From d2b3a8783c7a4529a2e8730b048fe1c6c34609f6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 4 Nov 2024 18:19:28 +0800
Subject: [PATCH 01/39] refactor: radix-vue to reka-ui

---
 .github/ISSUE_TEMPLATE/bug-report.yml         |  4 +--
 .github/ISSUE_TEMPLATE/config.yml             |  4 +--
 .github/ISSUE_TEMPLATE/feature-request.yml    |  2 +-
 CONTRIBUTING.md                               |  4 +--
 LICENSE                                       |  2 +-
 README.md                                     |  4 +--
 apps/www/.vitepress/config.mts                |  4 +--
 .../.vitepress/theme/components/Blocks.vue    |  2 +-
 .../theme/components/ExamplesNav.vue          | 16 ++++-----
 .../theme/components/LandingPage.vue          |  2 +-
 .../theme/components/StyleSwitcher.vue        |  2 +-
 .../theme/components/theming/Theming.vue      |  2 +-
 apps/www/.vitepress/theme/config/docs.ts      | 18 +++++-----
 .../.vitepress/theme/layout/DocsLayout.vue    |  2 +-
 .../.vitepress/theme/layout/MainLayout.vue    |  2 +-
 apps/www/.vitepress/theme/utils/codeeditor.ts |  4 +--
 apps/www/package.json                         |  2 +-
 apps/www/src/content/docs/about.md            |  6 ++--
 apps/www/src/content/docs/changelog.md        |  4 +--
 apps/www/src/content/docs/charts.md           |  2 +-
 .../src/content/docs/components/accordion.md  |  2 +-
 .../content/docs/components/alert-dialog.md   |  2 +-
 .../content/docs/components/aspect-ratio.md   |  4 +--
 .../www/src/content/docs/components/avatar.md |  4 +--
 .../src/content/docs/components/calendar.md   |  6 ++--
 .../src/content/docs/components/checkbox.md   |  2 +-
 .../content/docs/components/collapsible.md    |  2 +-
 .../src/content/docs/components/combobox.md   |  5 ---
 .../src/content/docs/components/command.md    |  2 +-
 .../content/docs/components/context-menu.md   |  2 +-
 .../content/docs/components/date-picker.md    |  2 +-
 .../www/src/content/docs/components/dialog.md |  2 +-
 .../www/src/content/docs/components/drawer.md |  4 +--
 .../content/docs/components/dropdown-menu.md  |  2 +-
 apps/www/src/content/docs/components/form.md  |  2 +-
 .../src/content/docs/components/hover-card.md |  2 +-
 apps/www/src/content/docs/components/label.md |  4 +--
 .../src/content/docs/components/menubar.md    |  2 +-
 .../docs/components/navigation-menu.md        |  2 +-
 .../content/docs/components/number-field.md   |  2 +-
 .../src/content/docs/components/pagination.md |  2 +-
 .../src/content/docs/components/pin-input.md  |  2 +-
 .../src/content/docs/components/popover.md    |  2 +-
 .../src/content/docs/components/progress.md   |  4 +--
 .../content/docs/components/radio-group.md    |  2 +-
 .../content/docs/components/range-calendar.md |  4 +--
 .../src/content/docs/components/resizable.md  |  4 +--
 .../content/docs/components/scroll-area.md    |  2 +-
 .../www/src/content/docs/components/select.md |  2 +-
 .../src/content/docs/components/separator.md  |  4 +--
 apps/www/src/content/docs/components/sheet.md |  2 +-
 .../www/src/content/docs/components/slider.md |  2 +-
 .../www/src/content/docs/components/sonner.md |  2 +-
 .../src/content/docs/components/stepper.md    |  2 +-
 .../www/src/content/docs/components/switch.md |  4 +--
 apps/www/src/content/docs/components/tabs.md  |  2 +-
 .../src/content/docs/components/tags-input.md |  2 +-
 .../src/content/docs/components/textarea.md   |  2 +-
 apps/www/src/content/docs/components/toast.md |  2 +-
 .../content/docs/components/toggle-group.md   |  4 +--
 .../www/src/content/docs/components/toggle.md |  4 +--
 .../src/content/docs/components/tooltip.md    |  2 +-
 apps/www/src/content/docs/contribution.md     | 36 +++++++++----------
 .../src/content/docs/installation/astro.md    |  2 +-
 .../www/src/content/docs/installation/nuxt.md |  6 ++--
 .../dashboard/components/DateRangePicker.vue  |  2 +-
 .../examples/forms/components/AccountForm.vue |  2 +-
 .../components/MaxLengthSelector.vue          |  2 +-
 .../components/TemperatureSelector.vue        |  2 +-
 .../playground/components/TopPSelector.vue    |  2 +-
 .../registry/default/example/AvatarDemo.vue   |  2 +-
 .../registry/default/example/CalendarForm.vue |  2 +-
 .../default/example/CalendarWithSelect.vue    |  4 +--
 .../default/example/DatePickerForm.vue        |  2 +-
 .../DatePickerWithIndependentMonths.vue       |  4 +--
 .../default/example/DatePickerWithRange.vue   |  2 +-
 .../example/DropdownMenuCheckboxes.vue        |  2 +-
 .../default/example/NavigationMenuDemo.vue    |  2 +-
 .../default/example/RangeCalendarDemo.vue     |  2 +-
 .../default/example/TagsInputComboboxDemo.vue |  2 +-
 .../default/example/TypographyInlineCode.vue  |  2 +-
 .../default/ui/accordion/Accordion.vue        |  2 +-
 .../default/ui/accordion/AccordionContent.vue |  2 +-
 .../default/ui/accordion/AccordionItem.vue    |  2 +-
 .../default/ui/accordion/AccordionTrigger.vue |  2 +-
 .../default/ui/alert-dialog/AlertDialog.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../alert-dialog/AlertDialogDescription.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  2 +-
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  2 +-
 .../default/ui/aspect-ratio/AspectRatio.vue   |  2 +-
 .../default/ui/auto-form/dependencies.ts      |  2 +-
 .../lib/registry/default/ui/avatar/Avatar.vue |  2 +-
 .../default/ui/avatar/AvatarFallback.vue      |  2 +-
 .../default/ui/avatar/AvatarImage.vue         |  2 +-
 .../default/ui/breadcrumb/BreadcrumbLink.vue  |  2 +-
 .../lib/registry/default/ui/button/Button.vue |  2 +-
 .../registry/default/ui/calendar/Calendar.vue |  2 +-
 .../default/ui/calendar/CalendarCell.vue      |  2 +-
 .../ui/calendar/CalendarCellTrigger.vue       |  2 +-
 .../default/ui/calendar/CalendarGrid.vue      |  2 +-
 .../default/ui/calendar/CalendarGridBody.vue  |  2 +-
 .../default/ui/calendar/CalendarGridHead.vue  |  2 +-
 .../default/ui/calendar/CalendarGridRow.vue   |  2 +-
 .../default/ui/calendar/CalendarHeadCell.vue  |  2 +-
 .../default/ui/calendar/CalendarHeader.vue    |  2 +-
 .../default/ui/calendar/CalendarHeading.vue   |  2 +-
 .../ui/calendar/CalendarNextButton.vue        |  2 +-
 .../ui/calendar/CalendarPrevButton.vue        |  2 +-
 .../default/ui/chart-area/AreaChart.vue       |  2 +-
 .../registry/default/ui/checkbox/Checkbox.vue |  4 +--
 .../default/ui/collapsible/Collapsible.vue    |  4 +--
 .../ui/collapsible/CollapsibleContent.vue     |  2 +-
 .../ui/collapsible/CollapsibleTrigger.vue     |  2 +-
 .../registry/default/ui/command/Command.vue   |  4 +--
 .../default/ui/command/CommandDialog.vue      |  4 +--
 .../default/ui/command/CommandEmpty.vue       |  4 +--
 .../default/ui/command/CommandGroup.vue       |  4 +--
 .../default/ui/command/CommandInput.vue       |  2 +-
 .../default/ui/command/CommandItem.vue        |  4 +--
 .../default/ui/command/CommandList.vue        |  4 +--
 .../default/ui/command/CommandSeparator.vue   |  4 +--
 .../default/ui/context-menu/ContextMenu.vue   |  4 +--
 .../context-menu/ContextMenuCheckboxItem.vue  |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuGroup.vue      |  2 +-
 .../ui/context-menu/ContextMenuItem.vue       |  2 +-
 .../ui/context-menu/ContextMenuLabel.vue      |  2 +-
 .../ui/context-menu/ContextMenuPortal.vue     |  2 +-
 .../ui/context-menu/ContextMenuRadioGroup.vue |  2 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  2 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |  2 +-
 .../ui/context-menu/ContextMenuSub.vue        |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  2 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |  2 +-
 .../lib/registry/default/ui/dialog/Dialog.vue |  2 +-
 .../default/ui/dialog/DialogClose.vue         |  2 +-
 .../default/ui/dialog/DialogContent.vue       |  2 +-
 .../default/ui/dialog/DialogDescription.vue   |  2 +-
 .../default/ui/dialog/DialogScrollContent.vue |  2 +-
 .../default/ui/dialog/DialogTitle.vue         |  2 +-
 .../default/ui/dialog/DialogTrigger.vue       |  2 +-
 .../lib/registry/default/ui/drawer/Drawer.vue |  2 +-
 .../default/ui/drawer/DrawerContent.vue       |  4 +--
 .../default/ui/drawer/DrawerOverlay.vue       |  2 +-
 .../default/ui/dropdown-menu/DropdownMenu.vue |  2 +-
 .../DropdownMenuCheckboxItem.vue              |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |  2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  2 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  2 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  2 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |  2 +-
 .../default/ui/dropdown-menu/index.ts         |  2 +-
 .../registry/default/ui/form/FormControl.vue  |  2 +-
 .../lib/registry/default/ui/form/FormItem.vue |  2 +-
 .../registry/default/ui/form/FormLabel.vue    |  2 +-
 .../default/ui/hover-card/HoverCard.vue       |  2 +-
 .../ui/hover-card/HoverCardContent.vue        |  2 +-
 .../ui/hover-card/HoverCardTrigger.vue        |  2 +-
 .../lib/registry/default/ui/label/Label.vue   |  2 +-
 .../registry/default/ui/menubar/Menubar.vue   |  2 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |  2 +-
 .../default/ui/menubar/MenubarContent.vue     |  2 +-
 .../default/ui/menubar/MenubarGroup.vue       |  2 +-
 .../default/ui/menubar/MenubarItem.vue        |  2 +-
 .../default/ui/menubar/MenubarLabel.vue       |  2 +-
 .../default/ui/menubar/MenubarMenu.vue        |  2 +-
 .../default/ui/menubar/MenubarRadioGroup.vue  |  2 +-
 .../default/ui/menubar/MenubarRadioItem.vue   |  2 +-
 .../default/ui/menubar/MenubarSeparator.vue   |  2 +-
 .../default/ui/menubar/MenubarSub.vue         |  2 +-
 .../default/ui/menubar/MenubarSubContent.vue  |  2 +-
 .../default/ui/menubar/MenubarSubTrigger.vue  |  2 +-
 .../default/ui/menubar/MenubarTrigger.vue     |  2 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  2 +-
 .../navigation-menu/NavigationMenuContent.vue |  2 +-
 .../NavigationMenuIndicator.vue               |  2 +-
 .../ui/navigation-menu/NavigationMenuItem.vue |  2 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |  2 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  2 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../default/ui/number-field/NumberField.vue   |  4 +--
 .../ui/number-field/NumberFieldDecrement.vue  |  4 +--
 .../ui/number-field/NumberFieldIncrement.vue  |  4 +--
 .../ui/number-field/NumberFieldInput.vue      |  2 +-
 .../ui/pagination/PaginationEllipsis.vue      |  2 +-
 .../default/ui/pagination/PaginationFirst.vue |  2 +-
 .../default/ui/pagination/PaginationLast.vue  |  2 +-
 .../default/ui/pagination/PaginationNext.vue  |  2 +-
 .../default/ui/pagination/PaginationPrev.vue  |  2 +-
 .../registry/default/ui/pagination/index.ts   |  2 +-
 .../default/ui/pin-input/PinInput.vue         |  2 +-
 .../default/ui/pin-input/PinInputGroup.vue    |  2 +-
 .../default/ui/pin-input/PinInputInput.vue    |  2 +-
 .../ui/pin-input/PinInputSeparator.vue        |  2 +-
 .../registry/default/ui/popover/Popover.vue   |  4 +--
 .../default/ui/popover/PopoverContent.vue     |  2 +-
 .../default/ui/popover/PopoverTrigger.vue     |  2 +-
 .../registry/default/ui/progress/Progress.vue |  2 +-
 .../default/ui/radio-group/RadioGroup.vue     |  2 +-
 .../default/ui/radio-group/RadioGroupItem.vue |  2 +-
 .../ui/range-calendar/RangeCalendar.vue       |  2 +-
 .../ui/range-calendar/RangeCalendarCell.vue   |  2 +-
 .../RangeCalendarCellTrigger.vue              |  2 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |  2 +-
 .../range-calendar/RangeCalendarGridBody.vue  |  2 +-
 .../range-calendar/RangeCalendarGridHead.vue  |  2 +-
 .../range-calendar/RangeCalendarGridRow.vue   |  2 +-
 .../range-calendar/RangeCalendarHeadCell.vue  |  2 +-
 .../ui/range-calendar/RangeCalendarHeader.vue |  2 +-
 .../range-calendar/RangeCalendarHeading.vue   |  2 +-
 .../RangeCalendarNextButton.vue               |  2 +-
 .../RangeCalendarPrevButton.vue               |  2 +-
 .../default/ui/resizable/ResizableHandle.vue  |  2 +-
 .../ui/resizable/ResizablePanelGroup.vue      |  2 +-
 .../registry/default/ui/resizable/index.ts    |  2 +-
 .../default/ui/scroll-area/ScrollArea.vue     |  2 +-
 .../default/ui/scroll-area/ScrollBar.vue      |  2 +-
 .../lib/registry/default/ui/select/Select.vue |  4 +--
 .../default/ui/select/SelectContent.vue       |  2 +-
 .../default/ui/select/SelectGroup.vue         |  2 +-
 .../registry/default/ui/select/SelectItem.vue |  2 +-
 .../default/ui/select/SelectItemText.vue      |  2 +-
 .../default/ui/select/SelectLabel.vue         |  2 +-
 .../ui/select/SelectScrollDownButton.vue      |  2 +-
 .../ui/select/SelectScrollUpButton.vue        |  2 +-
 .../default/ui/select/SelectSeparator.vue     |  2 +-
 .../default/ui/select/SelectTrigger.vue       |  2 +-
 .../default/ui/select/SelectValue.vue         |  2 +-
 .../default/ui/separator/Separator.vue        |  2 +-
 .../lib/registry/default/ui/sheet/Sheet.vue   |  2 +-
 .../registry/default/ui/sheet/SheetClose.vue  |  2 +-
 .../default/ui/sheet/SheetContent.vue         |  2 +-
 .../default/ui/sheet/SheetDescription.vue     |  2 +-
 .../registry/default/ui/sheet/SheetTitle.vue  |  2 +-
 .../default/ui/sheet/SheetTrigger.vue         |  2 +-
 .../default/ui/sidebar/SidebarGroupAction.vue |  4 +--
 .../default/ui/sidebar/SidebarGroupLabel.vue  |  4 +--
 .../default/ui/sidebar/SidebarMenuAction.vue  |  2 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |  2 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |  4 +--
 .../default/ui/sidebar/SidebarProvider.vue    |  2 +-
 .../lib/registry/default/ui/sidebar/utils.ts  |  2 +-
 .../lib/registry/default/ui/slider/Slider.vue |  4 +--
 .../registry/default/ui/stepper/Stepper.vue   |  4 +--
 .../default/ui/stepper/StepperDescription.vue |  4 +--
 .../default/ui/stepper/StepperIndicator.vue   |  4 +--
 .../default/ui/stepper/StepperItem.vue        |  4 +--
 .../default/ui/stepper/StepperSeparator.vue   |  4 +--
 .../default/ui/stepper/StepperTitle.vue       |  4 +--
 .../default/ui/stepper/StepperTrigger.vue     |  4 +--
 .../lib/registry/default/ui/switch/Switch.vue |  2 +-
 .../src/lib/registry/default/ui/tabs/Tabs.vue |  4 +--
 .../registry/default/ui/tabs/TabsContent.vue  |  2 +-
 .../lib/registry/default/ui/tabs/TabsList.vue |  2 +-
 .../registry/default/ui/tabs/TabsTrigger.vue  |  2 +-
 .../default/ui/tags-input/TagsInput.vue       |  2 +-
 .../default/ui/tags-input/TagsInputInput.vue  |  2 +-
 .../default/ui/tags-input/TagsInputItem.vue   |  2 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |  2 +-
 .../ui/tags-input/TagsInputItemText.vue       |  2 +-
 .../lib/registry/default/ui/toast/Toast.vue   |  2 +-
 .../registry/default/ui/toast/ToastAction.vue |  2 +-
 .../registry/default/ui/toast/ToastClose.vue  |  2 +-
 .../default/ui/toast/ToastDescription.vue     |  2 +-
 .../default/ui/toast/ToastProvider.vue        |  2 +-
 .../registry/default/ui/toast/ToastTitle.vue  |  2 +-
 .../default/ui/toast/ToastViewport.vue        |  2 +-
 .../lib/registry/default/ui/toast/index.ts    |  2 +-
 .../default/ui/toggle-group/ToggleGroup.vue   |  2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  2 +-
 .../lib/registry/default/ui/toggle/Toggle.vue |  2 +-
 .../registry/default/ui/tooltip/Tooltip.vue   |  2 +-
 .../default/ui/tooltip/TooltipContent.vue     |  2 +-
 .../default/ui/tooltip/TooltipProvider.vue    |  2 +-
 .../default/ui/tooltip/TooltipTrigger.vue     |  2 +-
 .../registry/new-york/example/AvatarDemo.vue  |  2 +-
 .../new-york/example/CalendarForm.vue         |  2 +-
 .../new-york/example/CalendarWithSelect.vue   |  4 +--
 .../new-york/example/DatePickerForm.vue       |  2 +-
 .../DatePickerWithIndependentMonths.vue       |  4 +--
 .../new-york/example/DatePickerWithRange.vue  |  2 +-
 .../example/DropdownMenuCheckboxes.vue        |  2 +-
 .../new-york/example/NavigationMenuDemo.vue   |  2 +-
 .../new-york/example/RangeCalendarDemo.vue    |  2 +-
 .../example/TagsInputComboboxDemo.vue         |  2 +-
 .../new-york/example/TypographyInlineCode.vue |  2 +-
 .../new-york/ui/accordion/Accordion.vue       |  2 +-
 .../ui/accordion/AccordionContent.vue         |  2 +-
 .../new-york/ui/accordion/AccordionItem.vue   |  2 +-
 .../ui/accordion/AccordionTrigger.vue         |  2 +-
 .../new-york/ui/alert-dialog/AlertDialog.vue  |  2 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../alert-dialog/AlertDialogDescription.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  2 +-
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  2 +-
 .../new-york/ui/aspect-ratio/AspectRatio.vue  |  2 +-
 .../new-york/ui/auto-form/dependencies.ts     |  2 +-
 .../registry/new-york/ui/avatar/Avatar.vue    |  2 +-
 .../new-york/ui/avatar/AvatarFallback.vue     |  2 +-
 .../new-york/ui/avatar/AvatarImage.vue        |  2 +-
 .../new-york/ui/breadcrumb/BreadcrumbLink.vue |  2 +-
 .../registry/new-york/ui/button/Button.vue    |  2 +-
 .../new-york/ui/calendar/Calendar.vue         |  2 +-
 .../new-york/ui/calendar/CalendarCell.vue     |  2 +-
 .../ui/calendar/CalendarCellTrigger.vue       |  2 +-
 .../new-york/ui/calendar/CalendarGrid.vue     |  2 +-
 .../new-york/ui/calendar/CalendarGridBody.vue |  2 +-
 .../new-york/ui/calendar/CalendarGridHead.vue |  2 +-
 .../new-york/ui/calendar/CalendarGridRow.vue  |  2 +-
 .../new-york/ui/calendar/CalendarHeadCell.vue |  2 +-
 .../new-york/ui/calendar/CalendarHeader.vue   |  2 +-
 .../new-york/ui/calendar/CalendarHeading.vue  |  2 +-
 .../ui/calendar/CalendarNextButton.vue        |  2 +-
 .../ui/calendar/CalendarPrevButton.vue        |  2 +-
 .../new-york/ui/chart-area/AreaChart.vue      |  2 +-
 .../new-york/ui/checkbox/Checkbox.vue         |  4 +--
 .../new-york/ui/collapsible/Collapsible.vue   |  4 +--
 .../ui/collapsible/CollapsibleContent.vue     |  2 +-
 .../ui/collapsible/CollapsibleTrigger.vue     |  2 +-
 .../registry/new-york/ui/command/Command.vue  |  4 +--
 .../new-york/ui/command/CommandDialog.vue     |  4 +--
 .../new-york/ui/command/CommandEmpty.vue      |  4 +--
 .../new-york/ui/command/CommandGroup.vue      |  4 +--
 .../new-york/ui/command/CommandInput.vue      |  2 +-
 .../new-york/ui/command/CommandItem.vue       |  4 +--
 .../new-york/ui/command/CommandList.vue       |  4 +--
 .../new-york/ui/command/CommandSeparator.vue  |  4 +--
 .../new-york/ui/context-menu/ContextMenu.vue  |  4 +--
 .../context-menu/ContextMenuCheckboxItem.vue  |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuGroup.vue      |  2 +-
 .../ui/context-menu/ContextMenuItem.vue       |  2 +-
 .../ui/context-menu/ContextMenuLabel.vue      |  2 +-
 .../ui/context-menu/ContextMenuPortal.vue     |  2 +-
 .../ui/context-menu/ContextMenuRadioGroup.vue |  2 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  2 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |  2 +-
 .../ui/context-menu/ContextMenuSub.vue        |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  2 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |  2 +-
 .../registry/new-york/ui/dialog/Dialog.vue    |  2 +-
 .../new-york/ui/dialog/DialogClose.vue        |  2 +-
 .../new-york/ui/dialog/DialogContent.vue      |  2 +-
 .../new-york/ui/dialog/DialogDescription.vue  |  2 +-
 .../ui/dialog/DialogScrollContent.vue         |  2 +-
 .../new-york/ui/dialog/DialogTitle.vue        |  2 +-
 .../new-york/ui/dialog/DialogTrigger.vue      |  2 +-
 .../registry/new-york/ui/drawer/Drawer.vue    |  2 +-
 .../new-york/ui/drawer/DrawerContent.vue      |  4 +--
 .../new-york/ui/drawer/DrawerOverlay.vue      |  2 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |  2 +-
 .../DropdownMenuCheckboxItem.vue              |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |  2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  2 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  2 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  2 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |  2 +-
 .../new-york/ui/dropdown-menu/index.ts        |  2 +-
 .../registry/new-york/ui/form/FormControl.vue |  2 +-
 .../registry/new-york/ui/form/FormItem.vue    |  2 +-
 .../registry/new-york/ui/form/FormLabel.vue   |  2 +-
 .../new-york/ui/hover-card/HoverCard.vue      |  2 +-
 .../ui/hover-card/HoverCardContent.vue        |  2 +-
 .../ui/hover-card/HoverCardTrigger.vue        |  2 +-
 .../lib/registry/new-york/ui/label/Label.vue  |  2 +-
 .../registry/new-york/ui/menubar/Menubar.vue  |  2 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |  2 +-
 .../new-york/ui/menubar/MenubarContent.vue    |  2 +-
 .../new-york/ui/menubar/MenubarGroup.vue      |  2 +-
 .../new-york/ui/menubar/MenubarItem.vue       |  2 +-
 .../new-york/ui/menubar/MenubarLabel.vue      |  2 +-
 .../new-york/ui/menubar/MenubarMenu.vue       |  2 +-
 .../new-york/ui/menubar/MenubarRadioGroup.vue |  2 +-
 .../new-york/ui/menubar/MenubarRadioItem.vue  |  2 +-
 .../new-york/ui/menubar/MenubarSeparator.vue  |  2 +-
 .../new-york/ui/menubar/MenubarSub.vue        |  2 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |  2 +-
 .../new-york/ui/menubar/MenubarSubTrigger.vue |  2 +-
 .../new-york/ui/menubar/MenubarTrigger.vue    |  2 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  2 +-
 .../navigation-menu/NavigationMenuContent.vue |  2 +-
 .../NavigationMenuIndicator.vue               |  2 +-
 .../ui/navigation-menu/NavigationMenuItem.vue |  2 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |  2 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  2 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/number-field/NumberField.vue  |  4 +--
 .../ui/number-field/NumberFieldDecrement.vue  |  4 +--
 .../ui/number-field/NumberFieldIncrement.vue  |  4 +--
 .../ui/number-field/NumberFieldInput.vue      |  2 +-
 .../ui/pagination/PaginationEllipsis.vue      |  2 +-
 .../ui/pagination/PaginationFirst.vue         |  2 +-
 .../new-york/ui/pagination/PaginationLast.vue |  2 +-
 .../new-york/ui/pagination/PaginationNext.vue |  2 +-
 .../new-york/ui/pagination/PaginationPrev.vue |  2 +-
 .../registry/new-york/ui/pagination/index.ts  |  2 +-
 .../new-york/ui/pin-input/PinInput.vue        |  2 +-
 .../new-york/ui/pin-input/PinInputGroup.vue   |  2 +-
 .../new-york/ui/pin-input/PinInputInput.vue   |  2 +-
 .../ui/pin-input/PinInputSeparator.vue        |  2 +-
 .../registry/new-york/ui/popover/Popover.vue  |  4 +--
 .../new-york/ui/popover/PopoverContent.vue    |  2 +-
 .../new-york/ui/popover/PopoverTrigger.vue    |  2 +-
 .../lib/registry/new-york/ui/popover/index.ts |  2 +-
 .../new-york/ui/progress/Progress.vue         |  2 +-
 .../new-york/ui/radio-group/RadioGroup.vue    |  2 +-
 .../ui/radio-group/RadioGroupItem.vue         |  2 +-
 .../ui/range-calendar/RangeCalendar.vue       |  2 +-
 .../ui/range-calendar/RangeCalendarCell.vue   |  2 +-
 .../RangeCalendarCellTrigger.vue              |  2 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |  2 +-
 .../range-calendar/RangeCalendarGridBody.vue  |  2 +-
 .../range-calendar/RangeCalendarGridHead.vue  |  2 +-
 .../range-calendar/RangeCalendarGridRow.vue   |  2 +-
 .../range-calendar/RangeCalendarHeadCell.vue  |  2 +-
 .../ui/range-calendar/RangeCalendarHeader.vue |  2 +-
 .../range-calendar/RangeCalendarHeading.vue   |  2 +-
 .../RangeCalendarNextButton.vue               |  2 +-
 .../RangeCalendarPrevButton.vue               |  2 +-
 .../new-york/ui/resizable/ResizableHandle.vue |  2 +-
 .../ui/resizable/ResizablePanelGroup.vue      |  2 +-
 .../registry/new-york/ui/resizable/index.ts   |  2 +-
 .../new-york/ui/scroll-area/ScrollArea.vue    |  2 +-
 .../new-york/ui/scroll-area/ScrollBar.vue     |  2 +-
 .../registry/new-york/ui/select/Select.vue    |  4 +--
 .../new-york/ui/select/SelectContent.vue      |  2 +-
 .../new-york/ui/select/SelectGroup.vue        |  2 +-
 .../new-york/ui/select/SelectItem.vue         |  2 +-
 .../new-york/ui/select/SelectItemText.vue     |  2 +-
 .../new-york/ui/select/SelectLabel.vue        |  2 +-
 .../ui/select/SelectScrollDownButton.vue      |  2 +-
 .../ui/select/SelectScrollUpButton.vue        |  2 +-
 .../new-york/ui/select/SelectSeparator.vue    |  2 +-
 .../new-york/ui/select/SelectTrigger.vue      |  2 +-
 .../new-york/ui/select/SelectValue.vue        |  2 +-
 .../new-york/ui/separator/Separator.vue       |  2 +-
 .../lib/registry/new-york/ui/sheet/Sheet.vue  |  2 +-
 .../registry/new-york/ui/sheet/SheetClose.vue |  2 +-
 .../new-york/ui/sheet/SheetContent.vue        |  2 +-
 .../new-york/ui/sheet/SheetDescription.vue    |  2 +-
 .../registry/new-york/ui/sheet/SheetTitle.vue |  2 +-
 .../new-york/ui/sheet/SheetTrigger.vue        |  2 +-
 .../ui/sidebar/SidebarGroupAction.vue         |  4 +--
 .../new-york/ui/sidebar/SidebarGroupLabel.vue |  4 +--
 .../new-york/ui/sidebar/SidebarMenuAction.vue |  2 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |  2 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |  4 +--
 .../new-york/ui/sidebar/SidebarProvider.vue   |  2 +-
 .../lib/registry/new-york/ui/sidebar/utils.ts |  2 +-
 .../registry/new-york/ui/slider/Slider.vue    |  4 +--
 .../registry/new-york/ui/stepper/Stepper.vue  |  4 +--
 .../ui/stepper/StepperDescription.vue         |  4 +--
 .../new-york/ui/stepper/StepperIndicator.vue  |  4 +--
 .../new-york/ui/stepper/StepperItem.vue       |  4 +--
 .../new-york/ui/stepper/StepperSeparator.vue  |  4 +--
 .../new-york/ui/stepper/StepperTitle.vue      |  4 +--
 .../new-york/ui/stepper/StepperTrigger.vue    |  4 +--
 .../registry/new-york/ui/switch/Switch.vue    |  2 +-
 .../lib/registry/new-york/ui/tabs/Tabs.vue    |  4 +--
 .../registry/new-york/ui/tabs/TabsContent.vue |  2 +-
 .../registry/new-york/ui/tabs/TabsList.vue    |  2 +-
 .../registry/new-york/ui/tabs/TabsTrigger.vue |  2 +-
 .../new-york/ui/tags-input/TagsInput.vue      |  2 +-
 .../new-york/ui/tags-input/TagsInputInput.vue |  2 +-
 .../new-york/ui/tags-input/TagsInputItem.vue  |  2 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |  2 +-
 .../ui/tags-input/TagsInputItemText.vue       |  2 +-
 .../lib/registry/new-york/ui/toast/Toast.vue  |  2 +-
 .../new-york/ui/toast/ToastAction.vue         |  2 +-
 .../registry/new-york/ui/toast/ToastClose.vue |  2 +-
 .../new-york/ui/toast/ToastDescription.vue    |  2 +-
 .../new-york/ui/toast/ToastProvider.vue       |  2 +-
 .../registry/new-york/ui/toast/ToastTitle.vue |  2 +-
 .../new-york/ui/toast/ToastViewport.vue       |  2 +-
 .../lib/registry/new-york/ui/toast/index.ts   |  2 +-
 .../new-york/ui/toggle-group/ToggleGroup.vue  |  2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  2 +-
 .../registry/new-york/ui/toggle/Toggle.vue    |  2 +-
 .../registry/new-york/ui/tooltip/Tooltip.vue  |  2 +-
 .../new-york/ui/tooltip/TooltipContent.vue    |  2 +-
 .../new-york/ui/tooltip/TooltipProvider.vue   |  2 +-
 .../new-york/ui/tooltip/TooltipTrigger.vue    |  2 +-
 .../registry/styles/default/accordion.json    |  8 ++---
 .../registry/styles/default/alert-dialog.json | 14 ++++----
 .../registry/styles/default/aspect-ratio.json |  2 +-
 .../registry/styles/default/auto-form.json    |  2 +-
 .../registry/styles/default/avatar.json       |  6 ++--
 .../registry/styles/default/breadcrumb.json   |  2 +-
 .../registry/styles/default/button.json       |  2 +-
 .../registry/styles/default/calendar.json     | 24 ++++++-------
 .../registry/styles/default/chart-area.json   |  2 +-
 .../registry/styles/default/checkbox.json     |  2 +-
 .../registry/styles/default/collapsible.json  |  6 ++--
 .../registry/styles/default/command.json      | 16 ++++-----
 .../registry/styles/default/context-menu.json | 28 +++++++--------
 .../registry/styles/default/dialog.json       | 14 ++++----
 .../registry/styles/default/drawer.json       |  6 ++--
 .../styles/default/dropdown-menu.json         | 28 +++++++--------
 .../public/registry/styles/default/form.json  |  6 ++--
 .../registry/styles/default/hover-card.json   |  6 ++--
 .../public/registry/styles/default/label.json |  2 +-
 .../registry/styles/default/menubar.json      | 28 +++++++--------
 .../styles/default/navigation-menu.json       | 16 ++++-----
 .../registry/styles/default/number-field.json |  8 ++---
 .../registry/styles/default/pagination.json   | 12 +++----
 .../registry/styles/default/pin-input.json    |  8 ++---
 .../registry/styles/default/popover.json      |  6 ++--
 .../registry/styles/default/progress.json     |  2 +-
 .../registry/styles/default/radio-group.json  |  4 +--
 .../styles/default/range-calendar.json        | 24 ++++++-------
 .../registry/styles/default/resizable.json    |  6 ++--
 .../registry/styles/default/scroll-area.json  |  4 +--
 .../registry/styles/default/select.json       | 22 ++++++------
 .../registry/styles/default/separator.json    |  2 +-
 .../public/registry/styles/default/sheet.json | 12 +++----
 .../registry/styles/default/sidebar.json      | 14 ++++----
 .../registry/styles/default/slider.json       |  2 +-
 .../registry/styles/default/stepper.json      | 14 ++++----
 .../registry/styles/default/switch.json       |  2 +-
 .../public/registry/styles/default/tabs.json  |  8 ++---
 .../registry/styles/default/tags-input.json   | 10 +++---
 .../public/registry/styles/default/toast.json | 16 ++++-----
 .../registry/styles/default/toggle-group.json |  4 +--
 .../registry/styles/default/toggle.json       |  2 +-
 .../registry/styles/default/tooltip.json      |  8 ++---
 .../registry/styles/new-york/accordion.json   |  8 ++---
 .../styles/new-york/alert-dialog.json         | 14 ++++----
 .../styles/new-york/aspect-ratio.json         |  2 +-
 .../registry/styles/new-york/auto-form.json   |  2 +-
 .../registry/styles/new-york/avatar.json      |  6 ++--
 .../registry/styles/new-york/breadcrumb.json  |  2 +-
 .../registry/styles/new-york/button.json      |  2 +-
 .../registry/styles/new-york/calendar.json    | 24 ++++++-------
 .../registry/styles/new-york/chart-area.json  |  2 +-
 .../registry/styles/new-york/checkbox.json    |  2 +-
 .../registry/styles/new-york/collapsible.json |  6 ++--
 .../registry/styles/new-york/command.json     | 16 ++++-----
 .../styles/new-york/context-menu.json         | 28 +++++++--------
 .../registry/styles/new-york/dialog.json      | 14 ++++----
 .../registry/styles/new-york/drawer.json      |  6 ++--
 .../styles/new-york/dropdown-menu.json        | 28 +++++++--------
 .../public/registry/styles/new-york/form.json |  6 ++--
 .../registry/styles/new-york/hover-card.json  |  6 ++--
 .../registry/styles/new-york/label.json       |  2 +-
 .../registry/styles/new-york/menubar.json     | 28 +++++++--------
 .../styles/new-york/navigation-menu.json      | 16 ++++-----
 .../styles/new-york/number-field.json         |  8 ++---
 .../registry/styles/new-york/pagination.json  | 12 +++----
 .../registry/styles/new-york/pin-input.json   |  8 ++---
 .../registry/styles/new-york/popover.json     |  8 ++---
 .../registry/styles/new-york/progress.json    |  2 +-
 .../registry/styles/new-york/radio-group.json |  4 +--
 .../styles/new-york/range-calendar.json       | 24 ++++++-------
 .../registry/styles/new-york/resizable.json   |  6 ++--
 .../registry/styles/new-york/scroll-area.json |  4 +--
 .../registry/styles/new-york/select.json      | 22 ++++++------
 .../registry/styles/new-york/separator.json   |  2 +-
 .../registry/styles/new-york/sheet.json       | 12 +++----
 .../registry/styles/new-york/sidebar.json     | 14 ++++----
 .../registry/styles/new-york/slider.json      |  2 +-
 .../registry/styles/new-york/stepper.json     | 14 ++++----
 .../registry/styles/new-york/switch.json      |  2 +-
 .../public/registry/styles/new-york/tabs.json |  8 ++---
 .../registry/styles/new-york/tags-input.json  | 10 +++---
 .../registry/styles/new-york/toast.json       | 16 ++++-----
 .../styles/new-york/toggle-group.json         |  4 +--
 .../registry/styles/new-york/toggle.json      |  2 +-
 .../registry/styles/new-york/tooltip.json     |  8 ++---
 package.json                                  |  2 +-
 packages/cli/package.json                     |  5 +--
 packages/cli/src/commands/init.ts             |  2 +-
 packages/cli/test/commands/init.test.ts       |  4 +--
 .../ui/alert-dialog/AlertDialog.vue           |  2 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../alert-dialog/AlertDialogDescription.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  2 +-
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  2 +-
 packages/cli/test/fixtures/nuxt/package.json  |  2 +-
 packages/cli/test/utils/registry.test.ts      |  6 ++--
 packages/cli/test/utils/transform-sfc.test.ts | 16 ++++-----
 packages/module/README.md                     |  2 +-
 packages/module/package.json                  |  2 +-
 .../components/ui/button/Button.vue           |  2 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |  2 +-
 .../DropdownMenuCheckboxItem.vue              |  2 +-
 .../components/ui/dropdown-menu/index.ts      |  2 +-
 packages/module/playground/package.json       |  2 +-
 packages/module/src/module.ts                 |  2 +-
 pnpm-lock.yaml                                | 36 +++++++++++++++----
 pnpm-workspace.yaml                           |  2 +-
 613 files changed, 1093 insertions(+), 1075 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 54005550f..d15763699 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -10,8 +10,8 @@ body:
         This form is only for submitting bug reports. If you have a usage question
         or are unsure if this is really a bug, make sure to:
 
-        - Read the [docs](https://radix-vue.com/)
-        - Ask on [Discord Chat](https://chat.radix-vue.com/)
+        - Read the [docs](https://reka-ui.com/)
+        - Ask on [Discord Chat](https://chat.unovue.com/)
         - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
   - type: input
     id: reproduction
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 1598db7c4..f95bc6135 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,8 +1,8 @@
 blank_issues_enabled: true
 contact_links:
   # - name: 📚 Documentation
-  #   url: https://www.radix-vue.com/
+  #   url: https://www.reka-ui.com/
   #   about: Check the documentation for usage of Radix Vue.
   - name: 🗨️ Discord
-    url: https://chat.radix-vue.com/
+    url: https://chat.unovue.com/
     about: Join the Radix Vue Discord server.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
index 8ce3b8e36..08532c181 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -11,7 +11,7 @@ body:
     id: feature-description
     attributes:
       label: Describe the feature
-      description: A clear and concise description of what you think would be a helpful addition to radix-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
+      description: A clear and concise description of what you think would be a helpful addition to shadcn-vue, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
       placeholder: Feature description
     validations:
       required: true
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8970fe1cc..565a11742 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
 
 Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
 
-If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/).
+If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
 
 ## About this repository
 
@@ -44,7 +44,7 @@ packages
 ### Start by cloning the repository:
 
 ```
-git clone git@github.com:radix-vue/shadcn-vue.git
+git clone git@github.com:unovue/shadcn-vue.git
 ```
 
 ### Install dependencies
diff --git a/LICENSE b/LICENSE
index 9100080f6..978951912 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 radix-vue
+Copyright (c) 2023 unovue
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index e8ee038ea..8108ae4c8 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
- <img align="center" src="https://raw.githubusercontent.com/radix-vue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
+ <img align="center" src="https://raw.githubusercontent.com/unovue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
  <h1 align="center">
   shadcn-vue
  </h1>
@@ -23,7 +23,7 @@ All credits go to these open-source works and resources
 
 - [Shadcn UI](https://ui.shadcn.com) for creating this beautiful project.
 - [Shadcn Svelte](https://shadcn-svelte.com) for some inspiration for registry.
-- [Radix Vue](https://radix-vue.com) for doing all the hard work to make sure components are accessible.
+- [Radix Vue](https://reka-ui.com) for doing all the hard work to make sure components are accessible.
 - [VueUse](https://vueuse.org) for providing many useful utilities.
 
 - [ahmedmayara](https://github.com/ahmedmayara/shadcn-vue) for populating many components
diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index df4c7e92c..1a1f7abad 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -23,7 +23,7 @@ export default defineConfig({
     ['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }],
     ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }],
 
-    ['meta', { name: 'creator', content: 'radix-vue' }],
+    ['meta', { name: 'creator', content: 'reka-ui' }],
     ['meta', { name: 'theme-color', content: '#41b883' }],
     ['meta', { name: 'og:type', content: 'website' }],
     ['meta', { name: 'og:locale', content: 'en' }],
@@ -45,7 +45,7 @@ export default defineConfig({
       provider: 'local',
     },
     editLink: {
-      pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
+      pattern: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/:path',
       text: 'Edit this page on GitHub',
     },
     carbonAds: {
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index f78a7e74c..33490a8a1 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -34,7 +34,7 @@ import('../../../__registry__/index').then((res) => {
         Browse
       </a>
       <a
-        href="https://github.com/radix-vue/shadcn-vue"
+        href="https://github.com/unovue/shadcn-vue"
         target="_blank"
         :class="cn(
           buttonVariants({ variant: 'outline' }),
diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue
index d4845775f..ca4c517ba 100644
--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@@ -11,42 +11,42 @@ const examples = [
   {
     name: 'Mail',
     href: '/examples/mail',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
   },
   {
     name: 'Dashboard',
     href: '/examples/dashboard',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
   },
   {
     name: 'Cards',
     href: '/examples/cards',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
   },
   {
     name: 'Tasks',
     href: '/examples/tasks',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks',
   },
   {
     name: 'Playground',
     href: '/examples/playground',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
   },
   {
     name: 'Forms',
     href: '/examples/forms',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
   },
   {
     name: 'Music',
     href: '/examples/music',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
   },
   {
     name: 'Authentication',
     href: '/examples/authentication',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
   },
 ]
 
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index 197960d7a..85c2d367c 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -30,7 +30,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
         Get Started
       </a>
       <a
-        href="https://github.com/radix-vue/shadcn-vue"
+        href="https://github.com/unovue/shadcn-vue"
         target="_blank"
         :class="cn(
           buttonVariants({ variant: 'outline' }),
diff --git a/apps/www/.vitepress/theme/components/StyleSwitcher.vue b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
index b46de100b..ac4614f68 100644
--- a/apps/www/.vitepress/theme/components/StyleSwitcher.vue
+++ b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue'
+import type { SelectTriggerProps } from 'reka-ui'
 import {
   Select,
   SelectContent,
diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index 4f55163ed..66a53d581 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
 import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
 
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 691fc07b5..96e2c6b6b 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -44,7 +44,7 @@ export const docsConfig: DocsConfig = {
     },
     {
       title: 'GitHub',
-      href: 'https://github.com/radix-vue/shadcn-vue',
+      href: 'https://github.com/unovue/shadcn-vue',
       external: true,
     },
   ],
@@ -377,42 +377,42 @@ export const examples: Example[] = [
   {
     name: 'Mail',
     href: '/examples/mail',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
   },
   {
     name: 'Dashboard',
     href: '/examples/dashboard',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/dashboard',
   },
   {
     name: 'Cards',
     href: '/examples/cards',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
   },
   // {
   // name: "Tasks",
   // href: "/examples/tasks",
   // label: "New",
-  // code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
+  // code: "https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
   // },
   {
     name: 'Playground',
     href: '/examples/playground',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/playground',
   },
   {
     name: 'Music',
     href: '/examples/music',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/music',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/music',
   },
   {
     name: 'Authentication',
     href: '/examples/authentication',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/examples/authentication',
   },
   {
     name: 'Forms',
     href: '/examples/forms',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms',
+    code: 'https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/routes/examples/forms',
   },
 ]
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index e33ef9eac..451b39add 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -11,7 +11,7 @@ import { docsConfig } from '../config/docs'
 const $route = useRoute()
 const { frontmatter } = useData()
 
-const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
+const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 794a87e30..d25ba30ea 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -209,7 +209,7 @@ watch(() => $route.path, (n) => {
             <span class="inline-block ml-2">
               Ported to Vue by
               <a
-                href="https://github.com/radix-vue"
+                href="https://github.com/unovue"
                 target="_blank"
                 class="underline underline-offset-4 font-bold decoration-foreground"
               >
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index 7e910a6a2..3c9e9e37c 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -91,7 +91,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
   const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
   const dependencies = {
     'vue': 'latest',
-    'radix-vue': 'latest',
+    'reka-ui': 'latest',
     '@radix-ui/colors': 'latest',
     'clsx': 'latest',
     'class-variance-authority': 'latest',
@@ -206,7 +206,7 @@ createApp(App).mount('#app')`,
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "rlig" 1, "calt" 1;
-} 
+}
 
 #app {
   @apply w-full flex items-center justify-center px-12;
diff --git a/apps/www/package.json b/apps/www/package.json
index 461346464..4411c8bea 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -33,7 +33,7 @@
     "embla-carousel-vue": "^8.3.0",
     "lucide-vue-next": "^0.441.0",
     "magic-string": "^0.30.11",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
diff --git a/apps/www/src/content/docs/about.md b/apps/www/src/content/docs/about.md
index 9e48890ab..c5332ba86 100644
--- a/apps/www/src/content/docs/about.md
+++ b/apps/www/src/content/docs/about.md
@@ -5,16 +5,16 @@ description: Powered by amazing open source projects.
 
 ## About
 
-[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
+[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [unovue](https://github.com/unovue).
 
 ## Credits
 
 - [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
-- [Radix Vue](https://radix-vue.com) - The headless components that power this project.
+- [Radix Vue](https://reka-ui.com) - The headless components that power this project.
 - [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
 - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
 - [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.
 
 ## License
 
-MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue)
+MIT © [shadcn](https://shadcn.com) & [unovue](https://github.com/unovue)
diff --git a/apps/www/src/content/docs/changelog.md b/apps/www/src/content/docs/changelog.md
index ce99836c1..e8e17abcd 100644
--- a/apps/www/src/content/docs/changelog.md
+++ b/apps/www/src/content/docs/changelog.md
@@ -49,7 +49,7 @@ The following form has been created by passing a `zod` schema object to our `Aut
 
 ### Component Updated - Calendar
 
-The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component.
 
@@ -104,7 +104,7 @@ And if you're looking for a date picker input, check out the [`Date Picker`](/do
 
 ### New Component - Drawer
 
-[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
+[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
 
 <ComponentPreview name="DrawerDemo" />
 
diff --git a/apps/www/src/content/docs/charts.md b/apps/www/src/content/docs/charts.md
index 06a551765..fe0c89c52 100644
--- a/apps/www/src/content/docs/charts.md
+++ b/apps/www/src/content/docs/charts.md
@@ -91,7 +91,7 @@ However, you can always pass in the desired `color` into each chart.
 ## Custom tooltip
 
 If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
-The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
+The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
 
 The expected prop definition would be:
 
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index 0076cdaac..f3523c067 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -2,7 +2,7 @@
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
 source: apps/www/src/lib/registry/default/ui/accordion
-primitive: https://www.radix-vue.com/components/accordion.html
+primitive: https://www.reka-ui.com/components/accordion.html
 ---
 
 <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index c53aeab49..bce118169 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -2,7 +2,7 @@
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
 source: apps/www/src/lib/registry/default/ui/alert-dialog
-primitive: https://www.radix-vue.com/components/alert-dialog.html
+primitive: https://www.reka-ui.com/components/alert-dialog.html
 ---
 
 <ComponentPreview name="AlertDialogDemo" />
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 507390f59..4f9252d8b 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -2,7 +2,7 @@
 title: Aspect Ratio
 description: Displays content within a desired ratio.
 source: apps/www/src/lib/registry/default/ui/aspect-ratio
-primitive: https://www.radix-vue.com/components/aspect-ratio.html
+primitive: https://www.reka-ui.com/components/aspect-ratio.html
 ---
 
 <ComponentPreview name="AspectRatioDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add aspect-ratio
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project:
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index ae7668fd6..615a99cdd 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -2,7 +2,7 @@
 title: Avatar
 description: An image element with a fallback for representing the user.
 source: apps/www/src/lib/registry/default/ui/avatar
-primitive: https://www.radix-vue.com/components/avatar.html
+primitive: https://www.reka-ui.com/components/avatar.html
 ---
 
 <ComponentPreview name="AvatarDemo" />
@@ -22,7 +22,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 <template>
   <Avatar>
-    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
+    <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
     <AvatarFallback>CN</AvatarFallback>
   </Avatar>
 </template>
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 073ab4e9b..a7760de21 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -2,7 +2,7 @@
 title: Calendar
 description: A date field component that allows users to enter and edit date.
 source: apps/www/src/lib/registry/default/ui/calendar
-primitive: https://www.radix-vue.com/components/calendar.html
+primitive: https://www.reka-ui.com/components/calendar.html
 ---
 
 <ComponentPreview name="CalendarDemo" />
@@ -15,7 +15,7 @@ If you're looking for **previous** Calendar implementation, checkout to <span cl
 
 ## About
 
-The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
 
@@ -26,7 +26,7 @@ npx shadcn-vue@latest add calendar
 ```
 ::: tip
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
-Check [Dates & Times in Radix Vue](https://www.radix-vue.com/guides/dates.html) for more information and installation instructions.
+Check [Dates & Times in Radix Vue](https://www.reka-ui.com/guides/dates.html) for more information and installation instructions.
 :::
 
 ## Datepicker
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 283d1fe41..3b56791cd 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -2,7 +2,7 @@
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
 source: apps/www/src/lib/registry/default/ui/checkbox
-primitive: https://www.radix-vue.com/components/checkbox.html
+primitive: https://www.reka-ui.com/components/checkbox.html
 ---
 
 <ComponentPreview name="CheckboxDemo"  />
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 2dffc5795..e85e8bf2a 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -2,7 +2,7 @@
 title: Collapsible
 description: An interactive component which expands/collapses a panel.
 source: apps/www/src/lib/registry/default/ui/collapsible
-primitive: https://www.radix-vue.com/components/collapsible.html
+primitive: https://www.reka-ui.com/components/collapsible.html
 ---
 
 <ComponentPreview name="CollapsibleDemo" />
diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index 86a970f3d..5e741cf5b 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -6,11 +6,6 @@ description: Autocomplete input and command palette with a list of suggestions.
 <ComponentPreview name="ComboboxDemo" />
 
 <br>
-<Callout title="Note" class="bg-destructive">
-
-[Radix Vue](https://github.com/radix-vue/radix-vue/releases/tag/v1.2.0) introduced a breaking change. You will need to wrap `ComboboxGroup` and `ComboboxItem` inside of `ComboboxList` now.
-
-</Callout>
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index d6235555e..5b4f0ed2d 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -2,7 +2,7 @@
 title: Command
 description: Fast, composable, unstyled command menu.
 source: apps/www/src/lib/registry/default/ui/command
-primitive: https://www.radix-vue.com/components/combobox.html
+primitive: https://www.reka-ui.com/components/combobox.html
 ---
 
 <ComponentPreview name="CommandDemo" />
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index cc718ce89..8009b70b1 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -2,7 +2,7 @@
 title: Context Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
 source: apps/www/src/lib/registry/default/ui/context-menu
-primitive: https://www.radix-vue.com/components/context-menu.html
+primitive: https://www.reka-ui.com/components/context-menu.html
 ---
 
 <ComponentPreview name="ContextMenuDemo"  />
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 85c5c3c93..ff79f8fd8 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -2,7 +2,7 @@
 title: Date Picker
 description: A date picker component with range and presets.
 source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
-primitive: https://www.radix-vue.com/components/calendar.html
+primitive: https://www.reka-ui.com/components/calendar.html
 ---
 
 <ComponentPreview name="DatePickerDemo" />
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index fee3e0203..5cf2c43af 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -2,7 +2,7 @@
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 source: apps/www/src/lib/registry/default/ui/dialog
-primitive: https://www.radix-vue.com/components/dialog.html
+primitive: https://www.reka-ui.com/components/dialog.html
 ---
 
 <ComponentPreview name="DialogDemo" />
diff --git a/apps/www/src/content/docs/components/drawer.md b/apps/www/src/content/docs/components/drawer.md
index 20dcf43c6..3c16bac89 100644
--- a/apps/www/src/content/docs/components/drawer.md
+++ b/apps/www/src/content/docs/components/drawer.md
@@ -2,14 +2,14 @@
 title: Drawer
 description: A drawer component for vue.
 source: apps/www/src/lib/registry/default/ui/drawer
-primitive: https://github.com/radix-vue/vaul-vue
+primitive: https://github.com/unovue/vaul-vue
 ---
 
 <ComponentPreview name="DrawerDemo" />
 
 ## About
 
-Drawer is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
+Drawer is built on top of [Vaul Vue](https://github.com/unovue/vaul-vue).
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 51e64a938..2f04df619 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -2,7 +2,7 @@
 title: Dropdown Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
 source: apps/www/src/lib/registry/default/ui/dropdown-menu
-primitive: https://www.radix-vue.com/components/dropdown-menu.html
+primitive: https://www.reka-ui.com/components/dropdown-menu.html
 ---
 
 <ComponentPreview name="DropdownMenuDemo" />
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index 6c0d0f42b..c1fda501b 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -108,7 +108,7 @@ npx shadcn-vue@latest add form
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue vee-validate @vee-validate/zod zod
+npm install reka-ui vee-validate @vee-validate/zod zod
 ```
 
 ### Copy and paste the following codes into your project:
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 0b45e1159..8ebf754e0 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -2,7 +2,7 @@
 title: Hover Card
 description: For sighted users to preview content available behind a link.
 source: apps/www/src/lib/registry/default/ui/hover-card
-primitive: https://www.radix-vue.com/components/hover-card.html
+primitive: https://www.reka-ui.com/components/hover-card.html
 ---
 
 <ComponentPreview name="HoverCardDemo" />
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 31d1b89af..a2ed09458 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -2,7 +2,7 @@
 title: Label
 description: Renders an accessible label associated with controls.
 source: apps/www/src/lib/registry/default/ui/label
-primitive: https://www.radix-vue.com/components/label.html
+primitive: https://www.reka-ui.com/components/label.html
 ---
 
 <ComponentPreview name="LabelDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add label
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project:
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 0ecd6876e..f9216c875 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -2,7 +2,7 @@
 title: Menubar
 description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
 source: apps/www/src/lib/registry/default/ui/menubar
-primitive: https://www.radix-vue.com/components/menubar.html
+primitive: https://www.reka-ui.com/components/menubar.html
 ---
 
 <ComponentPreview name="MenubarDemo" />
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 1ca991208..64cbcaf46 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -2,7 +2,7 @@
 title: Navigation Menu
 description: A collection of links for navigating websites.
 source: apps/www/src/lib/registry/default/ui/navigation-menu
-primitive: https://www.radix-vue.com/components/navigation-menu.html
+primitive: https://www.reka-ui.com/components/navigation-menu.html
 ---
 
 <ComponentPreview name="NavigationMenuDemo" />
diff --git a/apps/www/src/content/docs/components/number-field.md b/apps/www/src/content/docs/components/number-field.md
index b4b5ca10e..8e371dec4 100644
--- a/apps/www/src/content/docs/components/number-field.md
+++ b/apps/www/src/content/docs/components/number-field.md
@@ -2,7 +2,7 @@
 title: Number Field
 description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
 source: apps/www/src/lib/registry/default/ui/number-field
-primitive: https://www.radix-vue.com/components/number-field.html
+primitive: https://www.reka-ui.com/components/number-field.html
 ---
 
 <ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index 3bd93833b..02848c513 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -2,7 +2,7 @@
 title: Pagination
 description: Displays data in paged format and provides navigation between pages.
 source: apps/www/src/lib/registry/default/ui/pagination
-primitive: https://www.radix-vue.com/components/pagination.html
+primitive: https://www.reka-ui.com/components/pagination.html
 ---
 
 <ComponentPreview name="PaginationDemo" />
diff --git a/apps/www/src/content/docs/components/pin-input.md b/apps/www/src/content/docs/components/pin-input.md
index b20ecf6b3..bea99c2c6 100644
--- a/apps/www/src/content/docs/components/pin-input.md
+++ b/apps/www/src/content/docs/components/pin-input.md
@@ -2,7 +2,7 @@
 title: PIN Input
 description: Allows users to input a sequence of one-character alphanumeric inputs.
 source: apps/www/src/lib/registry/default/ui/pin-input
-primitive: https://www.radix-vue.com/components/pin-input.html
+primitive: https://www.reka-ui.com/components/pin-input.html
 ---
 
 <ComponentPreview name="PinInputDemo" />
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index beded319b..ef4e8cdbc 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -2,7 +2,7 @@
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
 source: apps/www/src/lib/registry/default/ui/popover
-primitive: https://www.radix-vue.com/components/popover.html
+primitive: https://www.reka-ui.com/components/popover.html
 ---
 
 <ComponentPreview name="PopoverDemo" />
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 98afe907c..fafc98dfa 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -2,7 +2,7 @@
 title: Progress
 description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 source: apps/www/src/lib/registry/default/ui/progress
-primitive: https://www.radix-vue.com/components/progress.html
+primitive: https://www.reka-ui.com/components/progress.html
 ---
 
 <ComponentPreview name="ProgressDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add progress
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project:
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index dc6b3a2c6..b8b1e87f3 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -2,7 +2,7 @@
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
 source: apps/www/src/lib/registry/default/ui/radio-group
-primitive: https://www.radix-vue.com/components/radio-group.html
+primitive: https://www.reka-ui.com/components/radio-group.html
 ---
 
 <ComponentPreview name="RadioGroupDemo" />
diff --git a/apps/www/src/content/docs/components/range-calendar.md b/apps/www/src/content/docs/components/range-calendar.md
index 121823d41..a883872ee 100644
--- a/apps/www/src/content/docs/components/range-calendar.md
+++ b/apps/www/src/content/docs/components/range-calendar.md
@@ -2,14 +2,14 @@
 title: Range Calendar
 description: A calendar component that allows users to select a range of dates.
 source: apps/www/src/lib/registry/default/ui/range-calendar
-primitive: https://www.radix-vue.com/components/range-calendar.html
+primitive: https://www.reka-ui.com/components/range-calendar.html
 ---
 
 <ComponentPreview name="RangeCalendarDemo" />
 
 ## About
 
-The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.radix-vue.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/resizable.md b/apps/www/src/content/docs/components/resizable.md
index b2f4c3570..ae9c60712 100644
--- a/apps/www/src/content/docs/components/resizable.md
+++ b/apps/www/src/content/docs/components/resizable.md
@@ -2,7 +2,7 @@
 title: Resizable
 description: Accessible resizable panel groups and layouts with keyboard support.
 source: apps/www/src/lib/registry/default/ui/resizable
-primitive: https://www.radix-vue.com/components/splitter.html
+primitive: https://www.reka-ui.com/components/splitter.html
 ---
 
 <ComponentPreview name="ResizableDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add resizable
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project:
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index 671cc2262..53aee0df2 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -2,7 +2,7 @@
 title: Scroll-area
 description: Augments native scroll functionality for custom, cross-browser styling.
 source: apps/www/src/lib/registry/default/ui/scroll-area
-primitive: https://www.radix-vue.com/components/scroll-area.html
+primitive: https://www.reka-ui.com/components/scroll-area.html
 ---
 
 <ComponentPreview name="ScrollAreaDemo" />
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index ca6e1f531..7a2ef593c 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -2,7 +2,7 @@
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
 source: apps/www/src/lib/registry/default/ui/select
-primitive: https://www.radix-vue.com/components/select.html
+primitive: https://www.reka-ui.com/components/select.html
 ---
 
 <ComponentPreview name="SelectDemo" />
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index eca5a6c36..39a0e1710 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -2,7 +2,7 @@
 title: Separator
 description: Visually or semantically separates content.
 source: apps/www/src/lib/registry/default/ui/separator
-primitive: https://www.radix-vue.com/components/separator.html
+primitive: https://www.reka-ui.com/components/separator.html
 ---
 
 <ComponentPreview name="SeparatorDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add separator
 ### Install the following dependency
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 15efbb08c..40f005e28 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -2,7 +2,7 @@
 title: Sheet
 description: Extends the Dialog component to display content that complements the main content of the screen.
 source: apps/www/src/lib/registry/default/ui/sheet
-primitive: https://www.radix-vue.com/components/dialog.html
+primitive: https://www.reka-ui.com/components/dialog.html
 ---
 
 <ComponentPreview name="SheetDemo" />
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index 4d4c2c93a..f3b48b2c1 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -2,7 +2,7 @@
 title: Slider
 description: An input where the user selects a value from within a given range.
 source: apps/www/src/lib/registry/default/ui/slider
-primitive: https://www.radix-vue.com/components/slider.html
+primitive: https://www.reka-ui.com/components/slider.html
 ---
 
 <ComponentPreview name="SliderDemo" />
diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
index e17d99f8b..96cda888d 100644
--- a/apps/www/src/content/docs/components/sonner.md
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -66,7 +66,7 @@ import { toast } from 'vue-sonner'
 
 ### Sonner with Dialog
 
-Related issue https://github.com/radix-vue/shadcn-vue/issues/462
+Related issue https://github.com/unovue/shadcn-vue/issues/462
 
 Add `pointer-events-auto` class to Toaster component in your `App.vue` file:
 
diff --git a/apps/www/src/content/docs/components/stepper.md b/apps/www/src/content/docs/components/stepper.md
index f3c7ec013..0be967ea3 100644
--- a/apps/www/src/content/docs/components/stepper.md
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -2,7 +2,7 @@
 title: Stepper
 description: A set of steps that are used to indicate progress through a multi-step process.
 source: apps/www/src/lib/registry/default/ui/stepper
-primitive: https://www.radix-vue.com/components/stepper.html
+primitive: https://www.reka-ui.com/components/stepper.html
 ---
 
 <ComponentPreview name="StepperDemo" />
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index ded55de93..0a03b394a 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -2,7 +2,7 @@
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
 source: apps/www/src/lib/registry/default/ui/switch
-primitive: https://www.radix-vue.com/components/switch.html
+primitive: https://www.reka-ui.com/components/switch.html
 ---
 
 <ComponentPreview name="SwitchDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add switch
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index c0fcc1d96..00e3e6ebf 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -2,7 +2,7 @@
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
 source: apps/www/src/lib/registry/default/ui/tabs
-primitive: https://www.radix-vue.com/components/tabs.html
+primitive: https://www.reka-ui.com/components/tabs.html
 ---
 
 <ComponentPreview name="TabsDemo" />
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
index f5d7468c5..736bf9054 100644
--- a/apps/www/src/content/docs/components/tags-input.md
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -2,7 +2,7 @@
 title: Tags Input
 description: Tag inputs render tags inside an input, followed by an actual text input.
 source: apps/www/src/lib/registry/default/ui/tags-input
-primitive: https://www.radix-vue.com/components/tags-input.html
+primitive: https://www.reka-ui.com/components/tags-input.html
 ---
 
 <ComponentPreview name="TagsInputDemo" />
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index f82873ea0..9cad33057 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -22,7 +22,7 @@ npx shadcn-vue@latest add textarea
 ### Install the following dependency:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index 1b579b2cc..2e3b6cebb 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -2,7 +2,7 @@
 title: Toast
 description: A succinct message that is displayed temporarily.
 source: apps/www/src/lib/registry/default/ui/toast
-primitive: https://www.radix-vue.com/components/toast.html
+primitive: https://www.reka-ui.com/components/toast.html
 ---
 
 <ComponentPreview name="ToastDemo" />
diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md
index 96a8f4635..d004f9e72 100644
--- a/apps/www/src/content/docs/components/toggle-group.md
+++ b/apps/www/src/content/docs/components/toggle-group.md
@@ -2,7 +2,7 @@
 title: Toggle Group
 description: A set of two-state buttons that can be toggled on or off.
 source: apps/www/src/lib/registry/default/ui/toggle-group
-primitive: https://www.radix-vue.com/components/toggle-group.html
+primitive: https://www.reka-ui.com/components/toggle-group.html
 ---
 
 <ComponentPreview name="ToggleGroupDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle-group
 ### Install the following dependencies:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 5bd4ec11e..02b2a1bd3 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -2,7 +2,7 @@
 title: Toggle
 description: A two-state button that can be either on or off.
 source: apps/www/src/lib/registry/default/ui/toggle
-primitive: https://www.radix-vue.com/components/toggle.html
+primitive: https://www.reka-ui.com/components/toggle.html
 ---
 
 <ComponentPreview name="ToggleDemo" />
@@ -24,7 +24,7 @@ npx shadcn-vue@latest add toggle
 ### Install the following dependencies:
 
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 
 ### Copy and paste the following code into your project
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index ab2a4d8bf..d482f68a4 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -2,7 +2,7 @@
 title: Tooltip
 description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 source: apps/www/src/lib/registry/default/ui/tooltip
-primitive: https://www.radix-vue.com/components/tooltip.html
+primitive: https://www.reka-ui.com/components/tooltip.html
 ---
 
 <ComponentPreview name="TooltipDemo" />
diff --git a/apps/www/src/content/docs/contribution.md b/apps/www/src/content/docs/contribution.md
index 782ddbb35..7273f5436 100644
--- a/apps/www/src/content/docs/contribution.md
+++ b/apps/www/src/content/docs/contribution.md
@@ -17,7 +17,7 @@ Thanks for your interest in contributing to shadcn-vue.com. We're happy to have
 
 Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
 
-If you need any help, feel free to reach out to the core team on [Discord](https://chat.radix-vue.com/).
+If you need any help, feel free to reach out to the core team on [Discord](https://chat.unovue.com/).
 
 This guide provides detailed information to help new contributors.
 
@@ -84,7 +84,7 @@ When adding or modifying components, please ensure that:
 Start by cloning the repository:
 
 ```bash
-git clone git@github.com:radix-vue/shadcn-vue.git
+git clone git@github.com:unovue/shadcn-vue.git
 ```
 
 ### Install dependencies
@@ -170,17 +170,17 @@ If you are interested in the detailed specification you can visit [Conventional
 
 Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file.
 
-See the [`Accordion`](https://github.com/radix-vue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
+See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
 
-## Wrapping Radix-Vue Components
+## Wrapping Reka UI Components
 
-[Radix-Vue](https://www.radix-vue.com) hosts many low-level UI components that are used to build reusable components.
-There are many cases that you need to wrap `Radix-Vue` components.
+[Reka UI](https://www.reka-ui.com) hosts many low-level UI components that are used to build reusable components.
+There are many cases that you need to wrap `Reka UI` components.
 
 ### Props & Events
-All of the `Radix-Vue` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Radix-Vue` component.
+All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component.
 
-To do so, we have a helper function named [`useForwardPropsEmits`](https://www.radix-vue.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
+To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
 
 To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
 computed object that combines the parsed props and emits as props.
@@ -194,7 +194,7 @@ import {
   type AccordionRootEmits,
   type AccordionRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
@@ -212,9 +212,9 @@ const forwarded = useForwardPropsEmits(props, emits)
 As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax.
 
 ### CSS Classes
-There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `radix-vue` component via `cn` utility function.
+There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `Reka UI` component via `cn` utility function.
 
-In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/radix-vue/shadcn-vue/pull/241).
+In these cases, we can not use `v-bind`, because this would lead in [double class binding](https://github.com/unovue/shadcn-vue/pull/241).
 
 Take a look at `DrawerDescription.vue`.
 
@@ -250,7 +250,7 @@ This pattern only needs to be applied when the `cn` utility is required. For ins
 
 ```vue
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue'
+import { SelectValue, type SelectValueProps } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>
@@ -264,14 +264,14 @@ const props = defineProps<SelectValueProps>()
 
 ### Boolean Props
 When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting).
-You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.radix-vue.com/utilities/use-forward-props.html) composable.
+You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/utilities/use-forward-props.html) composable.
 
 Take a look at `AccordionItem.vue`
 
 ```vue
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
@@ -300,7 +300,7 @@ Since `AccordionItemProps` type has atleast one boolean property, we need to use
 Note that `useForwardPropsEmits` use `useForwardProps` under the hood.
 
 ### Component as Root
-Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.radix-vue.com/utilities/primitive.html) instead.
+Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/utilities/primitive.html) instead.
 
 Let's take a look at `Button.vue`
 
@@ -308,7 +308,7 @@ Let's take a look at `Button.vue`
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
@@ -333,7 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.radix-vue.com/utilities/primitive.html#changing-as-value) property.
+You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/utilities/primitive.html#changing-as-value) property.
 
 ## Updating with `shadcn/ui`
 
@@ -352,7 +352,7 @@ Click on the following link to check if there are newer commits that we should b
 </div>
 
 1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version.
-2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
+2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/unovue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
 
 ## Debugging
 Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects.
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md
index c1852bae7..a09af6973 100644
--- a/apps/www/src/content/docs/installation/astro.md
+++ b/apps/www/src/content/docs/installation/astro.md
@@ -50,7 +50,7 @@ This will install `vue` and `@astrojs/vue` as dependencies and automatically set
 
 ### Install TypeScript
 
-If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/radix-vue/shadcn-vue/pull/118)
+If you encounter the error `Cannot find module 'typescript'`, please proceed to install TypeScript as a dev dependency, as discussed [here](https://github.com/unovue/shadcn-vue/pull/118)
 
 ```bash
 npm install -D typescript
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index 84e18528e..1c2d94297 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -147,21 +147,21 @@ export default defineNuxtModule<ShadcnVueOptions>({
     }
 
     addComponent({
-      filePath: 'radix-vue',
+      filePath: 'reka-ui',
       export: 'PaginationRoot',
       name: `${prefix}Pagination`,
       priority: 999,
     });
 
     addComponent({
-      filePath: 'radix-vue',
+      filePath: 'reka-ui',
       export: 'PaginationList',
       name: `${prefix}PaginationList`,
       priority: 999,
     });
 
     addComponent({
-      filePath: 'radix-vue',
+      filePath: 'reka-ui',
       export: 'PaginationListItem',
       name: `${prefix}PaginationListItem`,
       priority: 999,
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 02c89d332..c96135753 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Popover,
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 0a81c4af4..e961a97b8 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -25,7 +25,7 @@ import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internati
 import { toTypedSchema } from '@vee-validate/zod'
 import RadixIconsCalendar from '~icons/radix-icons/calendar'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { toDate } from 'radix-vue/date'
+import { toDate } from 'reka-ui/date'
 import { h, ref } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/src/examples/playground/components/MaxLengthSelector.vue b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
index cefce234d..86520feb8 100644
--- a/apps/www/src/examples/playground/components/MaxLengthSelector.vue
+++ b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SliderRootProps } from 'radix-vue'
+import type { SliderRootProps } from 'reka-ui'
 import {
   HoverCard,
   HoverCardContent,
diff --git a/apps/www/src/examples/playground/components/TemperatureSelector.vue b/apps/www/src/examples/playground/components/TemperatureSelector.vue
index 0a086051a..681a0eb6d 100644
--- a/apps/www/src/examples/playground/components/TemperatureSelector.vue
+++ b/apps/www/src/examples/playground/components/TemperatureSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SliderRootProps } from 'radix-vue'
+import type { SliderRootProps } from 'reka-ui'
 
 import {
   HoverCard,
diff --git a/apps/www/src/examples/playground/components/TopPSelector.vue b/apps/www/src/examples/playground/components/TopPSelector.vue
index 664cef467..d4df13789 100644
--- a/apps/www/src/examples/playground/components/TopPSelector.vue
+++ b/apps/www/src/examples/playground/components/TopPSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SliderRootProps } from 'radix-vue'
+import type { SliderRootProps } from 'reka-ui'
 
 import {
   HoverCard,
diff --git a/apps/www/src/lib/registry/default/example/AvatarDemo.vue b/apps/www/src/lib/registry/default/example/AvatarDemo.vue
index cfecb172f..b824866c2 100644
--- a/apps/www/src/lib/registry/default/example/AvatarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/AvatarDemo.vue
@@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/a
 
 <template>
   <Avatar>
-    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
+    <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
     <AvatarFallback>CN</AvatarFallback>
   </Avatar>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/src/lib/registry/default/example/CalendarForm.vue
index 84233db3c..0c6dbf0f8 100644
--- a/apps/www/src/lib/registry/default/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarForm.vue
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { toDate } from 'radix-vue/date'
+import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
 import { z } from 'zod'
diff --git a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
index 52d54e553..46f1d8192 100644
--- a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
@@ -10,8 +10,8 @@ import {
 import { cn } from '@/lib/utils'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { useVModel } from '@vueuse/core'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
-import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
+import { createDecade, createYear, toDate } from 'reka-ui/date'
 import { computed, type HTMLAttributes, type Ref } from 'vue'
 
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
index 9f35c2e58..f5ac914ad 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { toDate } from 'radix-vue/date'
+import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
 import { z } from 'zod'
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue b/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
index 45e6b427b..8d7e3460a 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
@@ -27,8 +27,8 @@ import {
   ChevronLeft,
   ChevronRight,
 } from 'lucide-vue-next'
-import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
-import { createMonth, type Grid, toDate } from 'radix-vue/date'
+import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'
+import { createMonth, type Grid, toDate } from 'reka-ui/date'
 import { type Ref, ref, watch } from 'vue'
 
 const value = ref({
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index 01208d73f..1abd1f48c 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import { Button } from '@/lib/registry/default/ui/button'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
index 6d688310a..34ce78f25 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   DropdownMenu,
diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
index 1d5682f54..921c1b5fa 100644
--- a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
@@ -61,7 +61,7 @@ const components: { title: string, href: string, description: string }[] = [
                   class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                   href="/"
                 >
-                  <img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6">
+                  <img src="https://www.reka-ui.com/logo.svg" class="h-6 w-6">
                   <div class="mb-2 mt-4 text-lg font-medium">
                     shadcn/ui
                   </div>
diff --git a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
index 3e3bc2962..95a46f26e 100644
--- a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
index 334ea80eb..8a6cfdcf2 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
-import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
 import { computed, ref } from 'vue'
 
 const frameworks = [
diff --git a/apps/www/src/lib/registry/default/example/TypographyInlineCode.vue b/apps/www/src/lib/registry/default/example/TypographyInlineCode.vue
index 0de2e7c34..49caf24b8 100644
--- a/apps/www/src/lib/registry/default/example/TypographyInlineCode.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyInlineCode.vue
@@ -2,6 +2,6 @@
   <code
     class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
   >
-    radix-vue
+    reka-ui
   </code>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
index 8ce8571b8..d52d81635 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -4,7 +4,7 @@ import {
   type AccordionRootEmits,
   type AccordionRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
index 62a445dc4..8e856a029 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
index ca2ed207e..b26a07b59 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
index 7aa9871ef..e5f4f6fb0 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
@@ -5,7 +5,7 @@ import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
index 8fb30de85..035b48814 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
index 48c7ccea0..2946de46d 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
index 927606d58..3bee5ff00 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 83fdf9904..30ff8f45c 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -7,7 +7,7 @@ import {
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
index 9f6db4322..4577a4d0c 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
index 6cd13f934..fd17cd521 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
index 4f5e2fd07..aabd777ed 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
index 652918182..32c038c6c 100644
--- a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
+++ b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AspectRatio, type AspectRatioProps } from 'radix-vue'
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
 
 const props = defineProps<AspectRatioProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts b/apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
index 362cdb0c9..2fcf32dbd 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
+++ b/apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type * as z from 'zod'
-import { createContext } from 'radix-vue'
+import { createContext } from 'reka-ui'
 import { useFieldValue, useFormValues } from 'vee-validate'
 import { computed, ref, watch } from 'vue'
 import { type Dependency, DependencyType, type EnumValues } from './interface'
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
index ed6ef22a9..95100c862 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { AvatarRoot } from 'radix-vue'
+import { AvatarRoot } from 'reka-ui'
 import { avatarVariant, type AvatarVariants } from '.'
 
 const props = withDefaults(defineProps<{
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
index a671a2199..a0b8dfab0 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
index 43499fa2d..3ad52765d 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { AvatarImage, type AvatarImageProps } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
index df004a13f..bb0e6652b 100644
--- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/src/lib/registry/default/ui/button/Button.vue
index d3e3786fd..17dc84d72 100644
--- a/apps/www/src/lib/registry/default/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index 6013df29c..abd769161 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
index cb61c0cda..2130239e1 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
index 9a3a984cf..c64636e0c 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
index 41c69acb3..e0e6d56c6 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
index 23d71ced6..d746afc3b 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridBodyProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
index f8101a3df..e7cafa153 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridHeadProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
index 15b084c25..bfd91e679 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
index 71f657541..824673d20 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
index dbb7ad8d9..3e716f00c 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
index 2de4ab774..9a0f0266c 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
index 700b0a861..f33b917f3 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue b/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
index c0a0d8acd..1ba7b9d2a 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeft } from 'lucide-vue-next'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
index ae69e8e9b..135e50bcd 100644
--- a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
@@ -6,7 +6,7 @@ import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Area, Axis, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
index be0d95899..de746b58e 100644
--- a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
index fae7919cd..8a8c61ab7 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
index 9f30898b0..075ca7130 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'
 
 const props = defineProps<CollapsibleContentProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
index 4a4346394..bb89c61c1 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'
 
 const props = defineProps<CollapsibleTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/command/Command.vue b/apps/www/src/lib/registry/default/ui/command/Command.vue
index d33ab3882..467ae0192 100644
--- a/apps/www/src/lib/registry/default/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/default/ui/command/Command.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
index ac79ade83..bf1ec376f 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
 
 const props = defineProps<DialogRootProps>()
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
index cd097d783..1908f93c8 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from 'radix-vue'
+import type { ComboboxEmptyProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxEmpty } from 'radix-vue'
+import { ComboboxEmpty } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
index 939b78e5a..683bf592e 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'radix-vue'
+import type { ComboboxGroupProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxGroupProps & {
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
index 261fb95ac..2713203f1 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
index ec9dacff6..dd5a872dc 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index 889b8d09c..82e81e96c 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
index 8f0cc1e63..cc5f05507 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'radix-vue'
+import type { ComboboxSeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxSeparator } from 'radix-vue'
+import { ComboboxSeparator } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
index 363e9c6b2..d95845c81 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
index 6fb7994b2..1d75d5541 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
index 568e878f4..8d032bf64 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -6,7 +6,7 @@ import {
   type ContextMenuContentProps,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
index b7458d771..dccf7bf78 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
index ab8e077d4..b5a228766 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
@@ -5,7 +5,7 @@ import {
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
index 933cdbfd3..448d66503 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue
index 73dc714b2..2d6767faf 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'
+import { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuPortalProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
index 33273a743..5443a3228 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type ContextMenuRadioGroupEmits,
   type ContextMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuRadioGroupProps>()
 const emits = defineEmits<ContextMenuRadioGroupEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
index 7967b3f66..1d94554f7 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
index b3a8e4fff..0bf0fd8c2 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
index 7abc36038..2b6671230 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
@@ -4,7 +4,7 @@ import {
   type ContextMenuSubEmits,
   type ContextMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuSubProps>()
 const emits = defineEmits<ContextMenuSubEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index 3ffa4f679..548ad8ce6 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
index 88e0d3722..354d4be99 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
index 22e417b52..99757133e 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuTriggerProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
index a04c02626..9fc9c7d10 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue
index a64703e56..ba036b516 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index 0de845183..be00c5e6f 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
index 878ef2bd9..5afbab04b 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
index 0d4482131..b0100428b 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
index 1f049e321..30cbb3680 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
index ee0c12ff3..2984f3712 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue b/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
index 8be665680..4ece87740 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerRoot } from 'vaul-vue'
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
index 9639a6f34..618df1116 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HtmlHTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerContent, DrawerPortal } from 'vaul-vue'
 import DrawerOverlay from './DrawerOverlay.vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
index 41c3c523e..f9307b715 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DialogOverlayProps } from 'radix-vue'
+import type { DialogOverlayProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { DrawerOverlay } from 'vaul-vue'
 import { computed, type HtmlHTMLAttributes } from 'vue'
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
index b83d90b86..5266c37cd 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index ca8867c05..d4934a474 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
index 6523e9eef..2ba6eefe1 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -6,7 +6,7 @@ import {
   type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
index 3f2013526..4b6951432 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
index 32a2cbd55..13f45fc8d 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
index 10494d4d5..0e171bb3c 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 4a727904c..5c9525f77 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
index d3fa47513..2347379a6 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
index dac6a167a..9f128a693 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
index e0f4bd778..95e703d2e 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
index 92078d9b7..fabd751aa 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 51b137f1e..815dc8110 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
index 8efd5a926..6c99ac35d 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts b/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
index 6011f35cb..f488d3965 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from 'reka-ui'
diff --git a/apps/www/src/lib/registry/default/ui/form/FormControl.vue b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
index 8459cab87..eddcafe72 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
+import { Slot } from 'reka-ui'
 import { useFormField } from './useFormField'
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index 699724e43..c5044da62 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type HTMLAttributes, provide } from 'vue'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
index 6004460ab..511150690 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue'
+import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { Label } from '@/lib/registry/default/ui/label'
 import { cn } from '@/lib/utils'
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
index f17c9d1ff..ea87bf2ac 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<HoverCardRootProps>()
 const emits = defineEmits<HoverCardRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
index 89c921310..687b339e7 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
@@ -5,7 +5,7 @@ import {
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
index 3e300b95b..bed301ab9 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'
 
 const props = defineProps<HoverCardTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/src/lib/registry/default/ui/label/Label.vue
index 5ad1568fb..b4991db9e 100644
--- a/apps/www/src/lib/registry/default/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Label, type LabelProps } from 'radix-vue'
+import { Label, type LabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
index 7d2ebc5dc..9bc91d805 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
@@ -5,7 +5,7 @@ import {
   type MenubarRootEmits,
   type MenubarRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
index 0d2f75113..e0606f9dd 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
index ef09e7868..a5175e462 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -5,7 +5,7 @@ import {
   type MenubarContentProps,
   MenubarPortal,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
index 853976b5e..15a22567f 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarGroup, type MenubarGroupProps } from 'radix-vue'
+import { MenubarGroup, type MenubarGroupProps } from 'reka-ui'
 
 const props = defineProps<MenubarGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
index 685b4bef8..0620d9053 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
@@ -5,7 +5,7 @@ import {
   type MenubarItemEmits,
   type MenubarItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
index 574ce4969..70dd3b170 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
+import { MenubarLabel, type MenubarLabelProps } from 'reka-ui'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
index fec5ee557..22f9b5c81 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarMenu, type MenubarMenuProps } from 'radix-vue'
+import { MenubarMenu, type MenubarMenuProps } from 'reka-ui'
 
 const props = defineProps<MenubarMenuProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
index 60a8cd1d9..3d351434a 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<MenubarRadioGroupProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
index bf265bffe..5f4bb4468 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
index 234334e1e..b84c8428c 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
index 6b76cd3e2..5a73fda69 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'
 
 interface MenubarSubRootProps {
   defaultOpen?: boolean
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
index 1cb245b2d..da969844a 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -6,7 +6,7 @@ import {
   type MenubarSubContentEmits,
   type MenubarSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
index a45e5b9f4..33e1c3662 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
index 61b27a88d..3ffb18599 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
index a0b5bec8f..e6f96767d 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
@@ -5,7 +5,7 @@ import {
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
index 101f450e5..a6828c193 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
@@ -5,7 +5,7 @@ import {
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
index bbf7eb8b5..a1f2280b6 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
index 50e1565fa..daef473b1 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'
 
 const props = defineProps<NavigationMenuItemProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
index 30c91c61d..037140f92 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
@@ -4,7 +4,7 @@ import {
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<NavigationMenuLinkProps>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
index 4cf0d10eb..74d22dee0 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
index 6f2d0a27d..d1d0216a5 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -5,7 +5,7 @@ import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { navigationMenuTriggerStyle } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index 56f53e617..e6efe0a05 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -4,7 +4,7 @@ import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberField.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberField.vue
index 3c7db4636..94fb59925 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberField.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
index bbfc5bd68..5e8f37377 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'radix-vue'
+import type { NumberFieldDecrementProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
index be1417ea2..b7a31a3d4 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'radix-vue'
+import type { NumberFieldIncrementProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
index f1c1f031f..1c5353242 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { NumberFieldInput } from 'radix-vue'
+import { NumberFieldInput } from 'reka-ui'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
index 62183ab91..0f493d596 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { MoreHorizontal } from 'lucide-vue-next'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
index 8ca3c94b9..ecd687cde 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronsLeft } from 'lucide-vue-next'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
+import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
index d0c33638b..b3f27ebb5 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronsRight } from 'lucide-vue-next'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
+import { PaginationLast, type PaginationLastProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
index 9e5faab5d..df0f64295 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
+import { PaginationNext, type PaginationNextProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
index ee0ee042a..bcdadd6db 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeft } from 'lucide-vue-next'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
+import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/pagination/index.ts b/apps/www/src/lib/registry/default/ui/pagination/index.ts
index b113cd15d..ec1a3b6bf 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/index.ts
+++ b/apps/www/src/lib/registry/default/ui/pagination/index.ts
@@ -7,4 +7,4 @@ export {
   PaginationList,
   PaginationListItem,
   PaginationRoot as Pagination,
-} from 'radix-vue'
+} from 'reka-ui'
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
index 49f4277ca..cb564ecb3 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
index 8bf50d15e..d9c60536e 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
index 9277580c2..7e0ae11a4 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
index f9b00b33a..8b2c7c558 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Dot } from 'lucide-vue-next'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps>()
 const forwardedProps = useForwardProps(props)
diff --git a/apps/www/src/lib/registry/default/ui/popover/Popover.vue b/apps/www/src/lib/registry/default/ui/popover/Popover.vue
index da5f7096c..72e0b5fa3 100644
--- a/apps/www/src/lib/registry/default/ui/popover/Popover.vue
+++ b/apps/www/src/lib/registry/default/ui/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
index 97580ecad..9e6c28823 100644
--- a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
@@ -6,7 +6,7 @@ import {
   type PopoverContentProps,
   PopoverPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue b/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
index 22f4772af..ac265950e 100644
--- a/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/progress/Progress.vue b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
index ea8f6d103..4462adf53 100644
--- a/apps/www/src/lib/registry/default/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
@@ -4,7 +4,7 @@ import {
   ProgressIndicator,
   ProgressRoot,
   type ProgressRootProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
index 752468e1b..1983645d5 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
index 86e8d194d..fda31b10f 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
@@ -6,7 +6,7 @@ import {
   RadioGroupItem,
   type RadioGroupItemProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
index ee7a5302f..be1e7387e 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
index 663776ab5..54be2f45d 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
index e456dc032..18d77ab70 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
index c9bb72a91..d7fd22768 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
index cae15cc70..b0f6ed13c 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'
 
 const props = defineProps<RangeCalendarGridBodyProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
index c11ad365c..f77f508e7 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'
 
 const props = defineProps<RangeCalendarGridHeadProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
index 05bff21ae..b6445dbaa 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
index bf516391b..1df932de3 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
index 662a7118e..d94cca1a6 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
index f3e55160c..dbcc04e20 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
index 9d9d621b0..7a6c3a2a0 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
index b245e5c17..37f59f46b 100644
--- a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeft } from 'lucide-vue-next'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue b/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
index eeb77c1f9..24056f482 100644
--- a/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
+++ b/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { GripVertical } from 'lucide-vue-next'
-import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
diff --git a/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue b/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
index d1449e091..c4d915b7d 100644
--- a/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/resizable/index.ts b/apps/www/src/lib/registry/default/ui/resizable/index.ts
index 605e81067..4c1c63b72 100644
--- a/apps/www/src/lib/registry/default/ui/resizable/index.ts
+++ b/apps/www/src/lib/registry/default/ui/resizable/index.ts
@@ -1,3 +1,3 @@
 export { default as ResizableHandle } from './ResizableHandle.vue'
 export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
-export { SplitterPanel as ResizablePanel } from 'radix-vue'
+export { SplitterPanel as ResizablePanel } from 'reka-ui'
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
index b9a1c59f5..8876d5312 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
@@ -5,7 +5,7 @@ import {
   ScrollAreaRoot,
   type ScrollAreaRootProps,
   ScrollAreaViewport,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import ScrollBar from './ScrollBar.vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index 8cd4a1844..59f723add 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/default/ui/select/Select.vue b/apps/www/src/lib/registry/default/ui/select/Select.vue
index adc42fdfb..b9b1f3311 100644
--- a/apps/www/src/lib/registry/default/ui/select/Select.vue
+++ b/apps/www/src/lib/registry/default/ui/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index f597885d8..d6397118e 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -7,7 +7,7 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
index b0803e138..d0010e0e2 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
index 9a4102702..9fcada827 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -7,7 +7,7 @@ import {
   type SelectItemProps,
   SelectItemText,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue b/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
index a0bb5c240..a4bcea848 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
 
 const props = defineProps<SelectItemTextProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
index 503e89051..31f6d45b2 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue b/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
index 885433476..eb41eda42 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue b/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
index 6c3711fca..f634e2137 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
index cb06b8d1f..cbfae609a 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
index 97c351499..f4071ce50 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectValue.vue b/apps/www/src/lib/registry/default/ui/select/SelectValue.vue
index 4bc37dd8b..5ed42d170 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectValue.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue'
+import { SelectValue, type SelectValueProps } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/separator/Separator.vue b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
index 916138330..aaf3fcc4f 100644
--- a/apps/www/src/lib/registry/default/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Separator, type SeparatorProps } from 'radix-vue'
+import { Separator, type SeparatorProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<
diff --git a/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue b/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
index a04c02626..9fc9c7d10 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue
index a64703e56..ba036b516 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
index a3606186a..f184db3bf 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { type SheetVariants, sheetVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
index b515e42ac..ebbc5c8ec 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
index b1029593b..72f6a9730 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { DialogTitle, type DialogTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue
index ee0c12ff3..2984f3712 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue
index 74cac4ea9..659a095b2 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue
index 83826c3e4..c119a8c5b 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue
index c91295e68..40f85205a 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
index 1d4386677..c37fc69d9 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue
index 0c63da140..2419f2871 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   size?: 'sm' | 'md'
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue b/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
index 8f06c67b2..08ebffd9d 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
+++ b/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { useEventListener, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'radix-vue'
+import { TooltipProvider } from 'reka-ui'
 import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
 import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
 
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/utils.ts b/apps/www/src/lib/registry/default/ui/sidebar/utils.ts
index 3ded66c4e..9d6f86690 100644
--- a/apps/www/src/lib/registry/default/ui/sidebar/utils.ts
+++ b/apps/www/src/lib/registry/default/ui/sidebar/utils.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
-import { createContext } from 'radix-vue'
+import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
diff --git a/apps/www/src/lib/registry/default/ui/slider/Slider.vue b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
index e3dd74b85..b39141ab1 100644
--- a/apps/www/src/lib/registry/default/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue b/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
index 881cff53f..229802ed6 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
index cc29f76d2..4214d6a39 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperDescriptionProps } from 'radix-vue'
+import type { StepperDescriptionProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperDescription, useForwardProps } from 'radix-vue'
+import { StepperDescription, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
index ec27037b7..1dee940ab 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperIndicatorProps } from 'radix-vue'
+import type { StepperIndicatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperIndicator, useForwardProps } from 'radix-vue'
+import { StepperIndicator, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
index bad879545..062e18eab 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperItemProps } from 'radix-vue'
+import type { StepperItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperItem, useForwardProps } from 'radix-vue'
+import { StepperItem, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
index 28dd5bf0b..856c4848f 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperSeparatorProps } from 'radix-vue'
+import type { StepperSeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperSeparator, useForwardProps } from 'radix-vue'
+import { StepperSeparator, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
index 686a35791..27e25c561 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperTitleProps } from 'radix-vue'
+import type { StepperTitleProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperTitle, useForwardProps } from 'radix-vue'
+import { StepperTitle, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue b/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
index d4ddcd471..1a91f7d30 100644
--- a/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperTriggerProps } from 'radix-vue'
+import type { StepperTriggerProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperTrigger, useForwardProps } from 'radix-vue'
+import { StepperTrigger, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
index 728963cae..bbe3a3bcd 100644
--- a/apps/www/src/lib/registry/default/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
@@ -6,7 +6,7 @@ import {
   type SwitchRootProps,
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue b/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
index 8feda3f79..15aeca8bd 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
index fb59dc968..662638d4f 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
index 9d828af68..4f787321c 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsList, type TabsListProps } from 'radix-vue'
+import { TabsList, type TabsListProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
index f4e7f670f..7e4182e5d 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
index 435b37825..879e6a1db 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
index 4b1de4e1b..66841ffc5 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
index 54618f658..06656575f 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
index 903d55304..be8aa4d32 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
index 2ce7a6dce..7814df88b 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toast.vue b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
index 53668710f..bfef9811f 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { type ToastProps, toastVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue b/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
index 1bc777283..fe25f3886 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastAction, type ToastActionProps } from 'radix-vue'
+import { ToastAction, type ToastActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
index 157eb5c67..52707254e 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
-import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { ToastClose, type ToastCloseProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastCloseProps & {
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
index 31b2a5a36..53cc47c5c 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+import { ToastDescription, type ToastDescriptionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue b/apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue
index 340cbd834..69d58caf4 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToastProvider, type ToastProviderProps } from 'radix-vue'
+import { ToastProvider, type ToastProviderProps } from 'reka-ui'
 
 const props = defineProps<ToastProviderProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue b/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
index a42b9c64a..5640b7b8a 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+import { ToastTitle, type ToastTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
index 839f1e788..608ea2908 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+import { ToastViewport, type ToastViewportProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index 5cb3f84f0..f39704d72 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -1,4 +1,4 @@
-import type { ToastRootProps } from 'radix-vue'
+import type { ToastRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 
 export { default as Toast } from './Toast.vue'
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
index 381465ed5..8fc278b8d 100644
--- a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
@@ -2,7 +2,7 @@
 import type { toggleVariants } from '@/lib/registry/default/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes, provide } from 'vue'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
index f51810f83..a1bdd4d87 100644
--- a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
@@ -2,7 +2,7 @@
 import type { VariantProps } from 'class-variance-authority'
 import { toggleVariants } from '@/lib/registry/default/ui/toggle'
 import { cn } from '@/lib/utils'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes, inject } from 'vue'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
index 30a4e2524..a98bf762c 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { type ToggleVariants, toggleVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue b/apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue
index b421f0fef..90741e37c 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
index c583a984d..645c2ec36 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue b/apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue
index 816505d69..abf42d871 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
 
 const props = defineProps<TooltipProviderProps>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue b/apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue
index f5b0e57f3..925527211 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue b/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
index 3eb25f5bb..0617b056f 100644
--- a/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
@@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/
 
 <template>
   <Avatar>
-    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
+    <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
     <AvatarFallback>CN</AvatarFallback>
   </Avatar>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
index 728b9be31..9088aa6de 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
-import { toDate } from 'radix-vue/date'
+import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
 import { z } from 'zod'
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
index a7338e661..8de222b94 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
@@ -10,8 +10,8 @@ import {
 import { cn } from '@/lib/utils'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { useVModel } from '@vueuse/core'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
-import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
+import { createDecade, createYear, toDate } from 'reka-ui/date'
 import { computed, type HTMLAttributes, type Ref } from 'vue'
 
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
index 1020bf8d8..7323533da 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
-import { toDate } from 'radix-vue/date'
+import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
 import { z } from 'zod'
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
index d6a140062..0978b8738 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
@@ -27,8 +27,8 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from '@radix-icons/vue'
-import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
-import { createMonth, type Grid, toDate } from 'radix-vue/date'
+import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'
+import { createMonth, type Grid, toDate } from 'reka-ui/date'
 import { type Ref, ref, watch } from 'vue'
 
 const value = ref({
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
index ad206003f..0217d3a04 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
index a99a75737..cd4456e5e 100644
--- a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
index aa44735a8..65c20ac43 100644
--- a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
@@ -61,7 +61,7 @@ const components: { title: string, href: string, description: string }[] = [
                   class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                   href="/"
                 >
-                  <img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6">
+                  <img src="https://www.reka-ui.com/logo.svg" class="h-6 w-6">
                   <div class="mb-2 mt-4 text-lg font-medium">
                     shadcn/ui
                   </div>
diff --git a/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
index 42278e71a..c4bb3cab1 100644
--- a/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import type { DateRange } from 'reka-ui'
 import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
index de80e4335..f4c01cea8 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
-import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
 import { computed, ref } from 'vue'
 
 const frameworks = [
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue b/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
index 0de2e7c34..49caf24b8 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
@@ -2,6 +2,6 @@
   <code
     class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
   >
-    radix-vue
+    reka-ui
   </code>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
index 8ce8571b8..d52d81635 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
@@ -4,7 +4,7 @@ import {
   type AccordionRootEmits,
   type AccordionRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
index a354cbc6f..c819a7411 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
index ca2ed207e..b26a07b59 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
index 318480e93..e8f343b31 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
@@ -5,7 +5,7 @@ import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue
index 8fb30de85..035b48814 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
index 7cff2871b..ca60c2a1c 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
index 3eebc8416..b1affa9eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index a1f7dd522..badb7d08f 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -7,7 +7,7 @@ import {
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
index 9f6db4322..4577a4d0c 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
index 6cd13f934..fd17cd521 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
index 4f5e2fd07..aabd777ed 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue
index 652918182..32c038c6c 100644
--- a/apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue
+++ b/apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AspectRatio, type AspectRatioProps } from 'radix-vue'
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
 
 const props = defineProps<AspectRatioProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts
index 362cdb0c9..2fcf32dbd 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type * as z from 'zod'
-import { createContext } from 'radix-vue'
+import { createContext } from 'reka-ui'
 import { useFieldValue, useFormValues } from 'vee-validate'
 import { computed, ref, watch } from 'vue'
 import { type Dependency, DependencyType, type EnumValues } from './interface'
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
index ed6ef22a9..95100c862 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { AvatarRoot } from 'radix-vue'
+import { AvatarRoot } from 'reka-ui'
 import { avatarVariant, type AvatarVariants } from '.'
 
 const props = withDefaults(defineProps<{
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue
index a671a2199..a0b8dfab0 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
index 43499fa2d..3ad52765d 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { AvatarImage, type AvatarImageProps } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
index df004a13f..bb0e6652b 100644
--- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
diff --git a/apps/www/src/lib/registry/new-york/ui/button/Button.vue b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
index d3e3786fd..17dc84d72 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 6013df29c..abd769161 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
index f0a2cf478..2bf95fcb7 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
index d0e465d66..8e59bb9e3 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
index 41c69acb3..e0e6d56c6 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
index 23d71ced6..d746afc3b 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridBodyProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
index b1356fb7c..e590ff93d 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
 
 const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
index 15b084c25..bfd91e679 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
index 4e0634fa2..edbc52b69 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
index dbb7ad8d9..3e716f00c 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
index 2de4ab774..9a0f0266c 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
index 1327c0e49..05e0fd443 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRightIcon } from '@radix-icons/vue'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
index 34466a178..93bb59c02 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeftIcon } from '@radix-icons/vue'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
index 43afe4129..451fb5bbb 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
@@ -6,7 +6,7 @@ import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Area, Axis, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
index 9d3d2e46d..1bdfbc5a1 100644
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { CheckIcon } from '@radix-icons/vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
index fae7919cd..8a8c61ab7 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue b/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue
index 9f30898b0..075ca7130 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'
 
 const props = defineProps<CollapsibleContentProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue b/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
index 4a4346394..bb89c61c1 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'
 
 const props = defineProps<CollapsibleTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/Command.vue b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
index d33ab3882..467ae0192 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/Command.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
index a9d08342e..eb7900781 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
 import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
 
 const props = defineProps<DialogRootProps>()
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
index cd097d783..1908f93c8 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from 'radix-vue'
+import type { ComboboxEmptyProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxEmpty } from 'radix-vue'
+import { ComboboxEmpty } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
index 939b78e5a..683bf592e 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'radix-vue'
+import type { ComboboxGroupProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxGroupProps & {
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
index ccdee24e3..262022aed 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
index ec9dacff6..dd5a872dc 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
index 889b8d09c..82e81e96c 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
index 8f0cc1e63..cc5f05507 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'radix-vue'
+import type { ComboboxSeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxSeparator } from 'radix-vue'
+import { ComboboxSeparator } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue
index 363e9c6b2..d95845c81 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index 5b82d05d7..29d569ac3 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index a7a55cd23..72a1d3730 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
@@ -6,7 +6,7 @@ import {
   type ContextMenuContentProps,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue
index b7458d771..dccf7bf78 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
index ab8e077d4..b5a228766 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
@@ -5,7 +5,7 @@ import {
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
index 933cdbfd3..448d66503 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue
index 73dc714b2..2d6767faf 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'
+import { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuPortalProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
index 33273a743..5443a3228 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type ContextMenuRadioGroupEmits,
   type ContextMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuRadioGroupProps>()
 const emits = defineEmits<ContextMenuRadioGroupEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index eb2002e5d..3e1e74579 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
index b3a8e4fff..0bf0fd8c2 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue
index 7abc36038..2b6671230 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue
@@ -4,7 +4,7 @@ import {
   type ContextMenuSubEmits,
   type ContextMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuSubProps>()
 const emits = defineEmits<ContextMenuSubEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index 0ba688844..2bd9eb6be 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 8c32509f5..7731cf8ba 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
index 22e417b52..99757133e 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuTriggerProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue b/apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue
index a04c02626..9fc9c7d10 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue
index a64703e56..ba036b516 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index db4537675..7788527ce 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
index 878ef2bd9..5afbab04b 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
index 64ec0495f..9aef11204 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
index 1f049e321..30cbb3680 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue
index ee0c12ff3..2984f3712 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue b/apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue
index 8be665680..4ece87740 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerRoot } from 'vaul-vue'
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue
index 9639a6f34..618df1116 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HtmlHTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerContent, DrawerPortal } from 'vaul-vue'
 import DrawerOverlay from './DrawerOverlay.vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue
index 41c3c523e..f9307b715 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DialogOverlayProps } from 'radix-vue'
+import type { DialogOverlayProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { DrawerOverlay } from 'vaul-vue'
 import { computed, type HtmlHTMLAttributes } from 'vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
index b83d90b86..5266c37cd 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 5f14d0249..9dd67248e 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 6523e9eef..2ba6eefe1 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
@@ -6,7 +6,7 @@ import {
   type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
index 3f2013526..4b6951432 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
index 32a2cbd55..13f45fc8d 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
index 10494d4d5..0e171bb3c 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 4a727904c..5c9525f77 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 6f54fd076..7b3828fcc 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
index dac6a167a..9f128a693 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
index e0f4bd778..95e703d2e 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index 92078d9b7..fabd751aa 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 6d7dea6bb..f70c2aaad 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
index 8efd5a926..6c99ac35d 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts
index 6011f35cb..f488d3965 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts
@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from 'reka-ui'
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
index 8459cab87..eddcafe72 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
+import { Slot } from 'reka-ui'
 import { useFormField } from './useFormField'
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index 699724e43..c5044da62 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type HTMLAttributes, provide } from 'vue'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
index 61b39e264..075f1282f 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue'
+import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { Label } from '@/lib/registry/new-york/ui/label'
 import { cn } from '@/lib/utils'
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
index f17c9d1ff..ea87bf2ac 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<HoverCardRootProps>()
 const emits = defineEmits<HoverCardRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
index 89c921310..687b339e7 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
@@ -5,7 +5,7 @@ import {
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue
index 3e300b95b..bed301ab9 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'
 
 const props = defineProps<HoverCardTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
index 5ad1568fb..b4991db9e 100644
--- a/apps/www/src/lib/registry/new-york/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Label, type LabelProps } from 'radix-vue'
+import { Label, type LabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
index 1b8188f18..f3044a327 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
@@ -5,7 +5,7 @@ import {
   type MenubarRootEmits,
   type MenubarRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index d5e56ddd2..dfd4204a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index ef09e7868..a5175e462 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
@@ -5,7 +5,7 @@ import {
   type MenubarContentProps,
   MenubarPortal,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue
index 853976b5e..15a22567f 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarGroup, type MenubarGroupProps } from 'radix-vue'
+import { MenubarGroup, type MenubarGroupProps } from 'reka-ui'
 
 const props = defineProps<MenubarGroupProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
index 685b4bef8..0620d9053 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
@@ -5,7 +5,7 @@ import {
   type MenubarItemEmits,
   type MenubarItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
index 574ce4969..70dd3b170 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
+import { MenubarLabel, type MenubarLabelProps } from 'reka-ui'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue
index fec5ee557..22f9b5c81 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarMenu, type MenubarMenuProps } from 'radix-vue'
+import { MenubarMenu, type MenubarMenuProps } from 'reka-ui'
 
 const props = defineProps<MenubarMenuProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
index 60a8cd1d9..3d351434a 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<MenubarRadioGroupProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index 270e4d195..25a9b459e 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -7,7 +7,7 @@ import {
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
index 234334e1e..b84c8428c 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue
index 6b76cd3e2..5a73fda69 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'
 
 interface MenubarSubRootProps {
   defaultOpen?: boolean
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index 8886096ae..75fbc120d 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
@@ -6,7 +6,7 @@ import {
   type MenubarSubContentEmits,
   type MenubarSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index a6295059c..07b1bfe2b 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronRightIcon } from '@radix-icons/vue'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
index ac1f825e5..5b66563c6 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
index a0b5bec8f..e6f96767d 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
@@ -5,7 +5,7 @@ import {
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
index 101f450e5..a6828c193 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
@@ -5,7 +5,7 @@ import {
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
index bbf7eb8b5..a1f2280b6 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
index 50e1565fa..daef473b1 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'
 
 const props = defineProps<NavigationMenuItemProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
index 30c91c61d..037140f92 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
@@ -4,7 +4,7 @@ import {
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<NavigationMenuLinkProps>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
index 4cf0d10eb..74d22dee0 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index b266d0a06..3385bb464 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -5,7 +5,7 @@ import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { navigationMenuTriggerStyle } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 70fae0e01..404630808 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -4,7 +4,7 @@ import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue
index 3c7db4636..94fb59925 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
index bbfc5bd68..5e8f37377 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'radix-vue'
+import type { NumberFieldDecrementProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
index be1417ea2..b7a31a3d4 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'radix-vue'
+import type { NumberFieldIncrementProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
index a84182fcf..d296e5139 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { NumberFieldInput } from 'radix-vue'
+import { NumberFieldInput } from 'reka-ui'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
index b382a5f89..16033d1b3 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { DotsHorizontalIcon } from '@radix-icons/vue'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
index 89469336f..5eb15f9bf 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { DoubleArrowLeftIcon } from '@radix-icons/vue'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
+import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
index f75282eb1..03a73d845 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { DoubleArrowRightIcon } from '@radix-icons/vue'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
+import { PaginationLast, type PaginationLastProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
index d27b83382..dd9e2d61f 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRightIcon } from '@radix-icons/vue'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
+import { PaginationNext, type PaginationNextProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
index 9b269a4ce..1e00a0ac8 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -4,7 +4,7 @@ import {
 } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeftIcon } from '@radix-icons/vue'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
+import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/index.ts b/apps/www/src/lib/registry/new-york/ui/pagination/index.ts
index b113cd15d..ec1a3b6bf 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/index.ts
@@ -7,4 +7,4 @@ export {
   PaginationList,
   PaginationListItem,
   PaginationRoot as Pagination,
-} from 'radix-vue'
+} from 'reka-ui'
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
index 49f4277ca..cb564ecb3 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
index 8bf50d15e..d9c60536e 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
index ed7ea7288..85d720d49 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
index 402a6a424..9e1a21c66 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { DashIcon } from '@radix-icons/vue'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps>()
 const forwardedProps = useForwardProps(props)
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/Popover.vue b/apps/www/src/lib/registry/new-york/ui/popover/Popover.vue
index da5f7096c..72e0b5fa3 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/Popover.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
index 97580ecad..9e6c28823 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
@@ -6,7 +6,7 @@ import {
   type PopoverContentProps,
   PopoverPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue b/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
index 22f4772af..ac265950e 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/index.ts b/apps/www/src/lib/registry/new-york/ui/popover/index.ts
index 0384c9979..1ee1fa087 100644
--- a/apps/www/src/lib/registry/new-york/ui/popover/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/popover/index.ts
@@ -1,4 +1,4 @@
 export { default as Popover } from './Popover.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
 export { default as PopoverTrigger } from './PopoverTrigger.vue'
-export { PopoverAnchor } from 'radix-vue'
+export { PopoverAnchor } from 'reka-ui'
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
index 63b223f2a..31603f9c4 100644
--- a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
@@ -4,7 +4,7 @@ import {
   ProgressIndicator,
   ProgressRoot,
   type ProgressRootProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
index 752468e1b..1983645d5 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 9b90de592..c6a2b6dfb 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -6,7 +6,7 @@ import {
   RadioGroupItem,
   type RadioGroupItemProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
index ee7a5302f..be1e7387e 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
index 0f38c759f..acb3b7812 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
index 9c2972bf9..ae127f130 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
index c9bb72a91..d7fd22768 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
index cae15cc70..b0f6ed13c 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'
 
 const props = defineProps<RangeCalendarGridBodyProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
index c11ad365c..f77f508e7 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'
 
 const props = defineProps<RangeCalendarGridHeadProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
index c1c7fb33d..3443b1817 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
index c2064ca91..0677f511d 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
index 662a7118e..d94cca1a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
index f3e55160c..dbcc04e20 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
index 49d0547ac..98a3654e3 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronRightIcon } from '@radix-icons/vue'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
index 0b58cdbc8..1892ec383 100644
--- a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
 import { ChevronLeftIcon } from '@radix-icons/vue'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue b/apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue
index 1f78fb4f2..2b60e790e 100644
--- a/apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { DragHandleDots2Icon } from '@radix-icons/vue'
-import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue b/apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue
index d1449e091..c4d915b7d 100644
--- a/apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/index.ts b/apps/www/src/lib/registry/new-york/ui/resizable/index.ts
index 605e81067..4c1c63b72 100644
--- a/apps/www/src/lib/registry/new-york/ui/resizable/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/resizable/index.ts
@@ -1,3 +1,3 @@
 export { default as ResizableHandle } from './ResizableHandle.vue'
 export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
-export { SplitterPanel as ResizablePanel } from 'radix-vue'
+export { SplitterPanel as ResizablePanel } from 'reka-ui'
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
index b9a1c59f5..8876d5312 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
@@ -5,7 +5,7 @@ import {
   ScrollAreaRoot,
   type ScrollAreaRootProps,
   ScrollAreaViewport,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import ScrollBar from './ScrollBar.vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index 8cd4a1844..59f723add 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/apps/www/src/lib/registry/new-york/ui/select/Select.vue b/apps/www/src/lib/registry/new-york/ui/select/Select.vue
index adc42fdfb..b9b1f3311 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/Select.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index f597885d8..d6397118e 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -7,7 +7,7 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
index b0803e138..d0010e0e2 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index b3fa76872..af4cae1b2 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -7,7 +7,7 @@ import {
   type SelectItemProps,
   SelectItemText,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue
index a0bb5c240..a4bcea848 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
 
 const props = defineProps<SelectItemTextProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
index 486150e1e..26433d4d2 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
index d7550e5aa..24be33eee 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronDownIcon } from '@radix-icons/vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
index 772c44e9d..1a065ae62 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { ChevronUpIcon } from '@radix-icons/vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
index cb06b8d1f..cbfae609a 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index d2df9164e..b1043977a 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { CaretSortIcon } from '@radix-icons/vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue
index 4bc37dd8b..5ed42d170 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue'
+import { SelectValue, type SelectValueProps } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
index 4612d8ccf..b7a394281 100644
--- a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Separator, type SeparatorProps } from 'radix-vue'
+import { Separator, type SeparatorProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
index a04c02626..9fc9c7d10 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue
index a64703e56..ba036b516 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index 367e69b11..e12c3b2ce 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { type SheetVariants, sheetVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
index b515e42ac..ebbc5c8ec 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
index b1029593b..72f6a9730 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { DialogTitle, type DialogTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue
index ee0c12ff3..2984f3712 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue
index 74cac4ea9..659a095b2 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
index 83826c3e4..c119a8c5b 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue
index c91295e68..40f85205a 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
index 1d4386677..c37fc69d9 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
index 0c63da140..2419f2871 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   size?: 'sm' | 'md'
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue
index 8f06c67b2..08ebffd9d 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { useEventListener, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'radix-vue'
+import { TooltipProvider } from 'reka-ui'
 import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
 import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts b/apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts
index 3ded66c4e..9d6f86690 100644
--- a/apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts
+++ b/apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
-import { createContext } from 'radix-vue'
+import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
index 776c8cab9..f97f7aec7 100644
--- a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue b/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
index 881cff53f..229802ed6 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
index cc29f76d2..4214d6a39 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperDescriptionProps } from 'radix-vue'
+import type { StepperDescriptionProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperDescription, useForwardProps } from 'radix-vue'
+import { StepperDescription, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
index 478fa9c7e..9bc685f7e 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperIndicatorProps } from 'radix-vue'
+import type { StepperIndicatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperIndicator, useForwardProps } from 'radix-vue'
+import { StepperIndicator, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
index bad879545..062e18eab 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperItemProps } from 'radix-vue'
+import type { StepperItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperItem, useForwardProps } from 'radix-vue'
+import { StepperItem, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
index 28dd5bf0b..856c4848f 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperSeparatorProps } from 'radix-vue'
+import type { StepperSeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperSeparator, useForwardProps } from 'radix-vue'
+import { StepperSeparator, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
index 686a35791..27e25c561 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperTitleProps } from 'radix-vue'
+import type { StepperTitleProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperTitle, useForwardProps } from 'radix-vue'
+import { StepperTitle, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
index f268fa819..9ccdc9a19 100644
--- a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { StepperTriggerProps } from 'radix-vue'
+import type { StepperTriggerProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { StepperTrigger, useForwardProps } from 'radix-vue'
+import { StepperTrigger, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
index afa7c27d7..c672a6e96 100644
--- a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
@@ -6,7 +6,7 @@ import {
   type SwitchRootProps,
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue b/apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue
index 8feda3f79..15aeca8bd 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
index fb59dc968..662638d4f 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
index ec00e78a7..d5c79efe0 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsList, type TabsListProps } from 'radix-vue'
+import { TabsList, type TabsListProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
index 720188b92..bb8b445a3 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
index e3fc91b42..7c98c000d 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
index 65204793f..e88787133 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
index a6f693966..de2e4bda8 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'
 
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
index e87275eee..c62db2fec 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Cross2Icon } from '@radix-icons/vue'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
index 1a450744f..b54e998bb 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
index 53668710f..bfef9811f 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { type ToastProps, toastVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
index b1cf82593..2bdb9f1eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastAction, type ToastActionProps } from 'radix-vue'
+import { ToastAction, type ToastActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
index f1458bfd6..922368079 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Cross2Icon } from '@radix-icons/vue'
-import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { ToastClose, type ToastCloseProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastCloseProps & {
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
index 31b2a5a36..53cc47c5c 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+import { ToastDescription, type ToastDescriptionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue
index 340cbd834..69d58caf4 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToastProvider, type ToastProviderProps } from 'radix-vue'
+import { ToastProvider, type ToastProviderProps } from 'reka-ui'
 
 const props = defineProps<ToastProviderProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
index aaca98f91..9904825bd 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+import { ToastTitle, type ToastTitleProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
index 839f1e788..608ea2908 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+import { ToastViewport, type ToastViewportProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index dcdbefd50..4f35f572c 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -1,4 +1,4 @@
-import type { ToastRootProps } from 'radix-vue'
+import type { ToastRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 
 export { default as Toast } from './Toast.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
index 0f21b20dc..6122e3514 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
@@ -2,7 +2,7 @@
 import type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes, provide } from 'vue'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
index 6519cfaad..8dc5100c6 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
@@ -2,7 +2,7 @@
 import type { VariantProps } from 'class-variance-authority'
 import { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
 import { cn } from '@/lib/utils'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes, inject } from 'vue'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
index 30a4e2524..a98bf762c 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { type ToggleVariants, toggleVariants } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue
index b421f0fef..90741e37c 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
index 685f03a3d..24162689d 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue
index 816505d69..abf42d871 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
 
 const props = defineProps<TooltipProviderProps>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
index f5b0e57f3..925527211 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index dce6798f1..e4e624d84 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
     },
     {
       "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
     },
     {
       "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
     },
     {
       "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index 0000a11b1..c48efbd42 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -8,23 +8,23 @@
   "files": [
     {
       "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
     },
     {
       "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
     },
     {
       "name": "AlertDialogFooter.vue",
@@ -36,11 +36,11 @@
     },
     {
       "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
     },
     {
       "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
index 54f7608c8..0d50bc374 100644
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/default/aspect-ratio.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'radix-vue'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index 391e4e858..19e556b1f 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -72,7 +72,7 @@
     },
     {
       "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'radix-vue'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
+      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index e4839ca25..5af79a8a6 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
     },
     {
       "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
     },
     {
       "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
index 09dd96b27..8a354dd2b 100644
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "BreadcrumbList.vue",
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
index 93b128c40..a5aaf2da3 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index 7950b0830..e99df1349 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -8,51 +8,51 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
     },
     {
       "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
     },
     {
       "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
     },
     {
       "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
     },
     {
       "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
     },
     {
       "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
     },
     {
       "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
     },
     {
       "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-area.json b/apps/www/src/public/registry/styles/default/chart-area.json
index 2768f0448..86fec025b 100644
--- a/apps/www/src/public/registry/styles/default/chart-area.json
+++ b/apps/www/src/public/registry/styles/default/chart-area.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'radix-vue'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 1a302e16b..c495496eb 100644
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ b/apps/www/src/public/registry/styles/default/checkbox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
index 5d436cc44..1f6da7fca 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -5,15 +5,15 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
     },
     {
       "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
     },
     {
       "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index 3a3729273..6e91cda62 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -8,35 +8,35 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
     },
     {
       "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
     },
     {
       "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
     },
     {
       "name": "CommandShortcut.vue",
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 37d2bb889..aee4f960c 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -7,43 +7,43 @@
   "files": [
     {
       "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
     },
     {
       "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
     },
     {
       "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
     },
     {
       "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
     },
     {
       "name": "ContextMenuShortcut.vue",
@@ -51,19 +51,19 @@
     },
     {
       "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
     },
     {
       "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index b1cbd449c..844646150 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
     },
     {
       "name": "DialogFooter.vue",
@@ -31,15 +31,15 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
     },
     {
       "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/drawer.json b/apps/www/src/public/registry/styles/default/drawer.json
index 530c04cfb..3b6f992a5 100644
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ b/apps/www/src/public/registry/styles/default/drawer.json
@@ -9,11 +9,11 @@
   "files": [
     {
       "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
     },
     {
       "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'radix-vue'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
     },
     {
       "name": "DrawerDescription.vue",
@@ -29,7 +29,7 @@
     },
     {
       "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
     },
     {
       "name": "DrawerTitle.vue",
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 68812dde2..5c12d0530 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -7,39 +7,39 @@
   "files": [
     {
       "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
     },
     {
       "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
     },
     {
       "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
     },
     {
       "name": "DropdownMenuShortcut.vue",
@@ -47,23 +47,23 @@
     },
     {
       "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
     },
     {
       "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'radix-vue'\n"
+      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index a692170b3..9ca74bde1 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'radix-vue'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
     },
     {
       "name": "FormDescription.vue",
@@ -20,11 +20,11 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'radix-vue'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
index 8d4e0c4ee..934f0e208 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
     },
     {
       "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index 58fc48ec0..35db08b24 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index b3fba4e0b..de8cddef5 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -7,43 +7,43 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'radix-vue'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
     },
     {
       "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
     },
     {
       "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'radix-vue'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
     },
     {
       "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
     },
     {
       "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
     },
     {
       "name": "MenubarShortcut.vue",
@@ -51,19 +51,19 @@
     },
     {
       "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
     },
     {
       "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index f11500267..e4dcaf199 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -7,35 +7,35 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
     },
     {
       "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
     },
     {
       "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
     },
     {
       "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
     },
     {
       "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--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-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--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-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/number-field.json b/apps/www/src/public/registry/styles/default/number-field.json
index f7804efd9..e72b127f2 100644
--- a/apps/www/src/public/registry/styles/default/number-field.json
+++ b/apps/www/src/public/registry/styles/default/number-field.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
     },
     {
       "name": "NumberFieldContent.vue",
@@ -15,15 +15,15 @@
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'radix-vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
index 6602832a4..a7c84710b 100644
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -8,27 +8,27 @@
   "files": [
     {
       "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'radix-vue'\n"
+      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
index 908bb101d..b5170d09d 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
     },
     {
       "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
     },
     {
       "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index 963992f22..3afda1fb2 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
     },
     {
       "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
index b7646c329..628f91075 100644
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ b/apps/www/src/public/registry/styles/default/progress.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
index 949af23b6..9669d8317 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/range-calendar.json b/apps/www/src/public/registry/styles/default/range-calendar.json
index 98c580a83..f176e87ab 100644
--- a/apps/www/src/public/registry/styles/default/range-calendar.json
+++ b/apps/www/src/public/registry/styles/default/range-calendar.json
@@ -8,51 +8,51 @@
   "files": [
     {
       "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
     },
     {
       "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/resizable.json b/apps/www/src/public/registry/styles/default/resizable.json
index 99bc62b4d..c5c416884 100644
--- a/apps/www/src/public/registry/styles/default/resizable.json
+++ b/apps/www/src/public/registry/styles/default/resizable.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
     },
     {
       "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
+      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index 4bbdd0164..8c2f5b080 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index 940c820f4..d8cd4e3d7 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -7,47 +7,47 @@
   "files": [
     {
       "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
     },
     {
       "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'radix-vue'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
     },
     {
       "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
     },
     {
       "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
     },
     {
       "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between 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 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between 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 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'radix-vue'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
index 1aaecbbf0..846b45072 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index be3c4f07c..8e62490f3 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
     },
     {
       "name": "SheetFooter.vue",
@@ -31,11 +31,11 @@
     },
     {
       "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
     },
     {
       "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
index 4a1f6151e..51603352b 100644
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ b/apps/www/src/public/registry/styles/default/sidebar.json
@@ -34,7 +34,7 @@
     },
     {
       "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarGroupContent.vue",
@@ -42,7 +42,7 @@
     },
     {
       "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarHeader.vue",
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -74,7 +74,7 @@
     },
     {
       "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuItem.vue",
@@ -90,7 +90,7 @@
     },
     {
       "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuSubItem.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'radix-vue'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
@@ -118,7 +118,7 @@
     },
     {
       "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'radix-vue'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
+      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index 010a6b27b..e352b927d 100644
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ b/apps/www/src/public/registry/styles/default/slider.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/stepper.json b/apps/www/src/public/registry/styles/default/stepper.json
index dc11e97df..1f1d67b97 100644
--- a/apps/www/src/public/registry/styles/default/stepper.json
+++ b/apps/www/src/public/registry/styles/default/stepper.json
@@ -7,31 +7,31 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
     },
     {
       "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
     },
     {
       "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
     },
     {
       "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
     },
     {
       "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index 3768809e6..df60e70b6 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
index 2e5f77f0c..b7ea0e324 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'radix-vue'\nimport { TabsRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
index 358edf21c..d684f2a45 100644
--- a/apps/www/src/public/registry/styles/default/tags-input.json
+++ b/apps/www/src/public/registry/styles/default/tags-input.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
     },
     {
       "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
     },
     {
       "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
     },
     {
       "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
     },
     {
       "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 26087aa98..35999b94a 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -7,31 +7,31 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
     },
     {
       "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
     },
     {
       "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
     },
     {
       "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
     },
     {
       "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'radix-vue'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
     },
     {
       "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
     },
     {
       "name": "Toaster.vue",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/src/public/registry/styles/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
index 36b4f55db..cf8546cf5 100644
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ b/apps/www/src/public/registry/styles/default/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index e9bc7ddcf..7fcaf8370 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
index d81cb61e2..35899e8f2 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
     },
     {
       "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'radix-vue'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
index 5389f871d..a2de5bcf9 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
     },
     {
       "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
     },
     {
       "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
     },
     {
       "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
index addabc605..456102530 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -8,23 +8,23 @@
   "files": [
     {
       "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
     },
     {
       "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
     },
     {
       "name": "AlertDialogFooter.vue",
@@ -36,11 +36,11 @@
     },
     {
       "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
     },
     {
       "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
index 54f7608c8..0d50bc374 100644
--- a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'radix-vue'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index 78a3b4e5b..e79a4df81 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -72,7 +72,7 @@
     },
     {
       "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'radix-vue'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
+      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
index e4839ca25..5af79a8a6 100644
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ b/apps/www/src/public/registry/styles/new-york/avatar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
     },
     {
       "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
     },
     {
       "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
index 232fce916..288ef1069 100644
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "BreadcrumbList.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/button.json b/apps/www/src/public/registry/styles/new-york/button.json
index f23bffb30..495248d75 100644
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ b/apps/www/src/public/registry/styles/new-york/button.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index b1f097d7c..8541fd565 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -8,51 +8,51 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
     },
     {
       "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
     },
     {
       "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
     },
     {
       "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
     },
     {
       "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
     },
     {
       "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
     },
     {
       "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
     },
     {
       "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-area.json b/apps/www/src/public/registry/styles/new-york/chart-area.json
index e3ea0a121..8ab525222 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-area.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-area.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'radix-vue'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
index 55292b27f..210f81097 100644
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/src/public/registry/styles/new-york/checkbox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
index 5d436cc44..1f6da7fca 100644
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/src/public/registry/styles/new-york/collapsible.json
@@ -5,15 +5,15 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
     },
     {
       "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
     },
     {
       "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index 27c55efc2..3c256f7d4 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -8,35 +8,35 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
     },
     {
       "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
     },
     {
       "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
     },
     {
       "name": "CommandShortcut.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
index 6230b6fb8..df3d24194 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -7,43 +7,43 @@
   "files": [
     {
       "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
     },
     {
       "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
     },
     {
       "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
     },
     {
       "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
     },
     {
       "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
     },
     {
       "name": "ContextMenuShortcut.vue",
@@ -51,19 +51,19 @@
     },
     {
       "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
     },
     {
       "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 73791dc0a..d5b5fd6aa 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
     },
     {
       "name": "DialogFooter.vue",
@@ -31,15 +31,15 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
     },
     {
       "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/drawer.json b/apps/www/src/public/registry/styles/new-york/drawer.json
index 530c04cfb..3b6f992a5 100644
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ b/apps/www/src/public/registry/styles/new-york/drawer.json
@@ -9,11 +9,11 @@
   "files": [
     {
       "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
     },
     {
       "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'radix-vue'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
     },
     {
       "name": "DrawerDescription.vue",
@@ -29,7 +29,7 @@
     },
     {
       "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
     },
     {
       "name": "DrawerTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
index 75d18a63f..a7ec8f0c7 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -7,39 +7,39 @@
   "files": [
     {
       "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
     },
     {
       "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
     },
     {
       "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
     },
     {
       "name": "DropdownMenuShortcut.vue",
@@ -47,23 +47,23 @@
     },
     {
       "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
     },
     {
       "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'radix-vue'\n"
+      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index 9bf20ecd9..5a313ebd1 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'radix-vue'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
     },
     {
       "name": "FormDescription.vue",
@@ -20,11 +20,11 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'radix-vue'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/hover-card.json b/apps/www/src/public/registry/styles/new-york/hover-card.json
index 8d4e0c4ee..934f0e208 100644
--- a/apps/www/src/public/registry/styles/new-york/hover-card.json
+++ b/apps/www/src/public/registry/styles/new-york/hover-card.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
     },
     {
       "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
index 58fc48ec0..35db08b24 100644
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ b/apps/www/src/public/registry/styles/new-york/label.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index a947be17b..39fd9e614 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -7,43 +7,43 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'radix-vue'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
     },
     {
       "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
     },
     {
       "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'radix-vue'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
     },
     {
       "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
     },
     {
       "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
     },
     {
       "name": "MenubarShortcut.vue",
@@ -51,19 +51,19 @@
     },
     {
       "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
     },
     {
       "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index ed9bc06f6..3be230199 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -7,35 +7,35 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
     },
     {
       "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
     },
     {
       "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
     },
     {
       "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
     },
     {
       "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/number-field.json b/apps/www/src/public/registry/styles/new-york/number-field.json
index 4b8bdf144..0c97cbfee 100644
--- a/apps/www/src/public/registry/styles/new-york/number-field.json
+++ b/apps/www/src/public/registry/styles/new-york/number-field.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
     },
     {
       "name": "NumberFieldContent.vue",
@@ -15,15 +15,15 @@
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'radix-vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
index cbb8ff08d..ba4e93603 100644
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -8,27 +8,27 @@
   "files": [
     {
       "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'radix-vue'\n"
+      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/pin-input.json b/apps/www/src/public/registry/styles/new-york/pin-input.json
index d01e38260..868a7c03e 100644
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ b/apps/www/src/public/registry/styles/new-york/pin-input.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
     },
     {
       "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
     },
     {
       "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/popover.json b/apps/www/src/public/registry/styles/new-york/popover.json
index f7b51da7a..de247445c 100644
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ b/apps/www/src/public/registry/styles/new-york/popover.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
     },
     {
       "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'radix-vue'\n"
+      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/progress.json b/apps/www/src/public/registry/styles/new-york/progress.json
index 8abd5c921..e9902e740 100644
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ b/apps/www/src/public/registry/styles/new-york/progress.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
index 4533f35ee..75a89969b 100644
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/src/public/registry/styles/new-york/radio-group.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/range-calendar.json b/apps/www/src/public/registry/styles/new-york/range-calendar.json
index 72403c2b4..935c591c9 100644
--- a/apps/www/src/public/registry/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/range-calendar.json
@@ -8,51 +8,51 @@
   "files": [
     {
       "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
     },
     {
       "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
     },
     {
       "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
     },
     {
       "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/resizable.json b/apps/www/src/public/registry/styles/new-york/resizable.json
index 25ec6541b..301cbf99b 100644
--- a/apps/www/src/public/registry/styles/new-york/resizable.json
+++ b/apps/www/src/public/registry/styles/new-york/resizable.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
     },
     {
       "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
     },
     {
       "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
+      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
index 4bbdd0164..8c2f5b080 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 48093cd2d..2cbb1ca3f 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -7,47 +7,47 @@
   "files": [
     {
       "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
     },
     {
       "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'radix-vue'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
     },
     {
       "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
     },
     {
       "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
     },
     {
       "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'radix-vue'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
index 42e55b443..73551fd3c 100644
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ b/apps/www/src/public/registry/styles/new-york/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index 343dd5839..4a3a0f20a 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
     },
     {
       "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
     },
     {
       "name": "SheetFooter.vue",
@@ -31,11 +31,11 @@
     },
     {
       "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
     },
     {
       "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
index 83f5bc7ca..5988aa4fe 100644
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ b/apps/www/src/public/registry/styles/new-york/sidebar.json
@@ -34,7 +34,7 @@
     },
     {
       "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarGroupContent.vue",
@@ -42,7 +42,7 @@
     },
     {
       "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarHeader.vue",
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -74,7 +74,7 @@
     },
     {
       "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuItem.vue",
@@ -90,7 +90,7 @@
     },
     {
       "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'radix-vue'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuSubItem.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'radix-vue'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
@@ -118,7 +118,7 @@
     },
     {
       "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'radix-vue'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
+      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
index 9e96b13a7..2ee05cbe1 100644
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ b/apps/www/src/public/registry/styles/new-york/slider.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/stepper.json b/apps/www/src/public/registry/styles/new-york/stepper.json
index 1ed6f5eaa..9906bd6bc 100644
--- a/apps/www/src/public/registry/styles/new-york/stepper.json
+++ b/apps/www/src/public/registry/styles/new-york/stepper.json
@@ -7,31 +7,31 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
     },
     {
       "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
     },
     {
       "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
     },
     {
       "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
     },
     {
       "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index 59167987d..a01e27638 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
index b976e9852..1fec294b9 100644
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ b/apps/www/src/public/registry/styles/new-york/tabs.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'radix-vue'\nimport { TabsRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
index 14a6c8e83..ece36edfe 100644
--- a/apps/www/src/public/registry/styles/new-york/tags-input.json
+++ b/apps/www/src/public/registry/styles/new-york/tags-input.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
     },
     {
       "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
     },
     {
       "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
     },
     {
       "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
     },
     {
       "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index 43193b178..a625ced99 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -7,31 +7,31 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
     },
     {
       "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
     },
     {
       "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
     },
     {
       "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
     },
     {
       "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'radix-vue'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
     },
     {
       "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
     },
     {
       "name": "Toaster.vue",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
index 2912324e6..e60969f32 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
index 6f92df82c..f0ceab843 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/tooltip.json b/apps/www/src/public/registry/styles/new-york/tooltip.json
index d1c081643..ca0171b57 100644
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/src/public/registry/styles/new-york/tooltip.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
     },
     {
       "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'radix-vue'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/package.json b/package.json
index 975a29ec9..b538bdf65 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "packageManager": "pnpm@9.10.0",
   "license": "MIT",
-  "repository": "radix-vue/shadcn-vue",
+  "repository": "unovue/shadcn-vue",
   "workspaces": [
     "packages/*"
   ],
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 98b347e21..a9c8a383f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -9,7 +9,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/radix-vue/shadcn-vue.git",
+    "url": "https://github.com/unovue/shadcn-vue.git",
     "directory": "packages/cli"
   },
   "keywords": [
@@ -20,6 +20,7 @@
     "tailwind",
     "radix-ui",
     "radix-vue",
+    "reka-ui",
     "shadcn",
     "shadcn-vue"
   ],
@@ -66,7 +67,7 @@
     "pathe": "^1.1.2",
     "pkg-types": "^1.2.1",
     "prompts": "^2.4.2",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "semver": "^7.6.3",
     "tsconfig-paths": "^4.2.0",
     "vue-metamorph": "^3.2.0",
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 96e0f0284..a88d96e07 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -37,7 +37,7 @@ const PROJECT_DEPENDENCIES = {
     'class-variance-authority',
     'clsx',
     'tailwind-merge',
-    'radix-vue',
+    'reka-ui',
   ],
 }
 
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
index 0345652fd..750be3a1c 100644
--- a/packages/cli/test/commands/init.test.ts
+++ b/packages/cli/test/commands/init.test.ts
@@ -70,7 +70,7 @@ it('init config-full', async () => {
       'class-variance-authority',
       'clsx',
       'tailwind-merge',
-      'radix-vue',
+      'reka-ui',
       '@radix-icons/vue',
     ],
     {
@@ -139,7 +139,7 @@ it('init config-partial', async () => {
       'class-variance-authority',
       'clsx',
       'tailwind-merge',
-      'radix-vue',
+      'reka-ui',
       'lucide-vue-next',
     ],
     {
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue
index 4d3bc6c49..34d1e4fd8 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useEmitAsProps } from '@/lib/utils'
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'reka-ui'
 
 const props = defineProps<AlertDialogProps>()
 
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
index 12eb7cf32..9ddb19765 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogActionProps>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
index 18df8639e..6f0904640 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogCancelProps>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
index 77f4c2d05..c6ce82ff7 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
@@ -6,7 +6,7 @@ import {
   type AlertDialogContentProps,
   AlertDialogOverlay,
   AlertDialogPortal,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AlertDialogContentProps & { class?: string }>()
 
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
index 7fb9eb3b8..cddc56983 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
index 7509deb9d..6af41d976 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogTitleProps & { class?: string }>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
index 4f5e2fd07..aabd777ed 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/nuxt/package.json
index fbac1d7f7..0f2942c9a 100644
--- a/packages/cli/test/fixtures/nuxt/package.json
+++ b/packages/cli/test/fixtures/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.8.2",
+    "reka-ui": "^1.0.0-alpha.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/cli/test/utils/registry.test.ts b/packages/cli/test/utils/registry.test.ts
index 6e03bdf79..6ff5fea20 100644
--- a/packages/cli/test/utils/registry.test.ts
+++ b/packages/cli/test/utils/registry.test.ts
@@ -6,7 +6,7 @@ it('resolve tree', async () => {
   const index = [
     {
       name: 'button',
-      dependencies: ['radix-vue'],
+      dependencies: ['reka-ui'],
       type: 'components:ui',
       files: [
         'button/Button.vue',
@@ -15,7 +15,7 @@ it('resolve tree', async () => {
     },
     {
       name: 'dialog',
-      dependencies: ['radix-vue'],
+      dependencies: ['reka-ui'],
       registryDependencies: ['button'],
       type: 'components:ui',
       files: ['dialog/Dialog.vue', 'dialog/DialogContent.vue', 'dialog/DialogDescription.vue', 'dialog/DialogFooter.vue', 'dialog/DialogHeader.vue', 'dialog/DialogTitle.vue', 'dialog/DialogTrigger.vue', 'dialog/index.ts'],
@@ -31,7 +31,7 @@ it('resolve tree', async () => {
     },
     {
       name: 'alert-dialog',
-      dependencies: ['radix-vue'],
+      dependencies: ['reka-ui'],
       registryDependencies: ['button', 'dialog'],
       type: 'components:ui',
       files: ['alert-dialog/AlertDialog.vue', 'alert-dialog/AlertDialogAction.vue', 'alert-dialog/AlertDialogCancel.vue', 'alert-dialog/AlertDialogContent.vue', 'alert-dialog/AlertDialogDescription.vue', 'alert-dialog/AlertDialogFooter.vue', 'alert-dialog/AlertDialogHeader.vue', 'alert-dialog/AlertDialogTitle.vue', 'alert-dialog/AlertDialogTrigger.vue', 'alert-dialog/index.ts'],
diff --git a/packages/cli/test/utils/transform-sfc.test.ts b/packages/cli/test/utils/transform-sfc.test.ts
index dfd12fe0a..f3b123c05 100644
--- a/packages/cli/test/utils/transform-sfc.test.ts
+++ b/packages/cli/test/utils/transform-sfc.test.ts
@@ -9,13 +9,13 @@ describe('transformSFC', () => {
       raw: `<script lang="ts" setup>
       const array: (number | string)[] = [1, 2, 3]
       </script>
-      
+
       <template>
         <div v-bind="{ array }">
           template
         </div>
       </template>
-      
+
       <style scoped>
       </style>
       `,
@@ -30,7 +30,7 @@ describe('transformSFC', () => {
       raw: `<script lang="ts" setup>
       const array: (number | string)[] = [1, 2, 3]
       </script>
-      
+
       <template>
         <div v-bind="{ array }" :prop="(a: number) => a" :prop2="(a: number) => {
           let b: number = a
@@ -39,7 +39,7 @@ describe('transformSFC', () => {
           {{ true ? 123 as number : 0 }}
         </div>
       </template>
-      
+
       <style scoped>
       </style>
       `,
@@ -54,7 +54,7 @@ describe('transformSFC', () => {
       raw: `<script lang="ts" setup>
       const array: (number | string)[] = [1, 2, 3]
       </script>
-      
+
       <template>
         <div :class="cn(
         'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
@@ -66,7 +66,7 @@ describe('transformSFC', () => {
           {{ true ? 123 as number : 0 }}
         </div>
       </template>
-      
+
       <style scoped>
       </style>
       `,
@@ -120,7 +120,7 @@ describe('transformSFC', () => {
     const result = await transform({
       filename: resolve(__dirname, './test.vue'),
       raw: `<script lang="ts" setup>
-      import { type LabelProps } from 'radix-vue'
+      import { type LabelProps } from 'reka-ui'
       const props = withDefaults(defineProps<{ foo?: string } & LabelProps>(), {
         foo: 'bar'
       })
@@ -128,7 +128,7 @@ describe('transformSFC', () => {
       `,
       config: {},
     })
-    // TODO: We need to improve this. https://github.com/radix-vue/shadcn-vue/issues/187
+    // TODO: We need to improve this. https://github.com/unovue/shadcn-vue/issues/187
     expect(result).toMatchSnapshot()
   })
 
diff --git a/packages/module/README.md b/packages/module/README.md
index e5d69cbfc..c13783b94 100644
--- a/packages/module/README.md
+++ b/packages/module/README.md
@@ -17,7 +17,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 Shadcn Vue module for Nuxt.
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/radix-vue/shadcn-vue?file=playground%2Fapp.vue) -->
+<!-- - [🏀 Online playground](https://stackblitz.com/github/unovue/shadcn-vue?file=playground%2Fapp.vue) -->
 - [📖 &nbsp;Documentation](https://www.shadcn-vue.com/docs/installation/nuxt.html)
 
 ## Features
diff --git a/packages/module/package.json b/packages/module/package.json
index 1e4c3e78e..42a70a484 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -9,7 +9,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/radix-vue/shadcn-vue.git",
+    "url": "https://github.com/unovue/shadcn-vue.git",
     "directory": "packages/module"
   },
   "exports": {
diff --git a/packages/module/playground/components/ui/button/Button.vue b/packages/module/playground/components/ui/button/Button.vue
index d3e3786fd..17dc84d72 100644
--- a/packages/module/playground/components/ui/button/Button.vue
+++ b/packages/module/playground/components/ui/button/Button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
diff --git a/packages/module/playground/components/ui/dropdown-menu/DropdownMenu.vue b/packages/module/playground/components/ui/dropdown-menu/DropdownMenu.vue
index b83d90b86..5266c37cd 100644
--- a/packages/module/playground/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/packages/module/playground/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 699347090..0139296ca 100644
--- a/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useEmitAsProps,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
diff --git a/packages/module/playground/components/ui/dropdown-menu/index.ts b/packages/module/playground/components/ui/dropdown-menu/index.ts
index b7d471b12..2e917ad1a 100644
--- a/packages/module/playground/components/ui/dropdown-menu/index.ts
+++ b/packages/module/playground/components/ui/dropdown-menu/index.ts
@@ -1,4 +1,4 @@
 export { default as DropdownMenu } from './DropdownMenu.vue'
 
 export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from 'reka-ui'
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index 9eae431c2..33ccfa885 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -12,7 +12,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.9.8",
+    "reka-ui": "^1.0.0-alpha.2",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
diff --git a/packages/module/src/module.ts b/packages/module/src/module.ts
index 8ee3dfbe2..72eb3160e 100644
--- a/packages/module/src/module.ts
+++ b/packages/module/src/module.ts
@@ -51,7 +51,7 @@ export default defineNuxtModule<ModuleOptions>({
     const componentsPath = resolve(COMPONENT_DIR_PATH)
 
     // Tell Nuxt to not scan `componentsDir` for auto imports as we will do it manually
-    // See https://github.com/radix-vue/shadcn-vue/pull/528#discussion_r1590206268
+    // See https://github.com/unovue/shadcn-vue/pull/528#discussion_r1590206268
     nuxt.hook('components:dirs', (dirs) => {
       dirs.unshift({
         path: componentsPath,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65c6f4794..e6d9a9310 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,9 +9,9 @@ catalogs:
     '@oxc-parser/wasm':
       specifier: ^0.29.0
       version: 0.29.0
-    radix-vue:
-      specifier: ^1.9.8
-      version: 1.9.8
+    reka-ui:
+      specifier: ^1.0.0-alpha.2
+      version: 1.0.0-alpha.2
     typescript:
       specifier: ^5.6.3
       version: 5.6.3
@@ -116,9 +116,9 @@ importers:
       magic-string:
         specifier: ^0.30.11
         version: 0.30.12
-      radix-vue:
+      reka-ui:
         specifier: 'catalog:'
-        version: 1.9.8(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3))
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
@@ -297,9 +297,9 @@ importers:
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
-      radix-vue:
+      reka-ui:
         specifier: 'catalog:'
-        version: 1.9.8(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -6478,6 +6478,11 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
+  reka-ui@1.0.0-alpha.2:
+    resolution: {integrity: sha512-RYBeKo0Nm2+JRLsR+KDvuoJlMFn3stz2juWhoxDZC1y1xcv0nXT0DoS40eKuUnrMD4hxbeU4fRDU/IZxAonoSw==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   remote-origin-url@0.4.0:
     resolution: {integrity: sha512-HYhdsT2pNd0LP4Osb0vtQ1iassxIc3Yk1oze7j8dMJFciMkW8e0rdg9E/mOunqtSVHSzvMfwLDIYzPnEDmpk6Q==}
     engines: {node: '>= 0.8.0'}
@@ -15031,6 +15036,23 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
+  reka-ui@1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@floating-ui/dom': 1.6.11
+      '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3))
+      '@internationalized/date': 3.5.6
+      '@internationalized/number': 3.5.4
+      '@tanstack/vue-virtual': 3.10.8(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.5.12(typescript@5.6.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   remote-origin-url@0.4.0:
     dependencies:
       parse-git-config: 0.2.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 207b4919e..f9533a710 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
 catalog:
   '@oxc-parser/wasm': ^0.29.0
   typescript: ^5.6.3
-  radix-vue: ^1.9.8
+  reka-ui: ^1.0.0-alpha.2
   zod: ^3.23.8

From f878cd1140fb8a8af6ce638ff10d7c47f7dcf0cb Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Nov 2024 06:41:06 +0800
Subject: [PATCH 02/39] chore: bump reka-ui version

---
 pnpm-lock.yaml      | 14 +++++++-------
 pnpm-workspace.yaml |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6d9a9310..2dfb14246 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,8 +10,8 @@ catalogs:
       specifier: ^0.29.0
       version: 0.29.0
     reka-ui:
-      specifier: ^1.0.0-alpha.2
-      version: 1.0.0-alpha.2
+      specifier: ^1.0.0-alpha.3
+      version: 1.0.0-alpha.3
     typescript:
       specifier: ^5.6.3
       version: 5.6.3
@@ -118,7 +118,7 @@ importers:
         version: 0.30.12
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3))
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
@@ -299,7 +299,7 @@ importers:
         version: 2.4.2
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -6478,8 +6478,8 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  reka-ui@1.0.0-alpha.2:
-    resolution: {integrity: sha512-RYBeKo0Nm2+JRLsR+KDvuoJlMFn3stz2juWhoxDZC1y1xcv0nXT0DoS40eKuUnrMD4hxbeU4fRDU/IZxAonoSw==}
+  reka-ui@1.0.0-alpha.3:
+    resolution: {integrity: sha512-koQkKXiFP7tqazpJsM3l+N1wBXqO8KyKOybRkhdxPlKv6Rs1Q90rL50VzUnBCrX+6zTGsFIovvlMVdvRRWdVXQ==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -15036,7 +15036,7 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  reka-ui@1.0.0-alpha.2(vue@3.5.12(typescript@5.6.3)):
+  reka-ui@1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@floating-ui/dom': 1.6.11
       '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3))
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f9533a710..a980b8cfb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
 catalog:
   '@oxc-parser/wasm': ^0.29.0
   typescript: ^5.6.3
-  reka-ui: ^1.0.0-alpha.2
+  reka-ui: ^1.0.0-alpha.3
   zod: ^3.23.8

From f079f0161b9b2e7b16fa0bad5091b3c1c8ef25a1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Nov 2024 07:12:04 +0800
Subject: [PATCH 03/39] refactor: perform migration

---
 .../src/content/docs/components/accordion.md  |  4 ++--
 .../content/docs/components/collapsible.md    |  4 ++--
 .../src/content/docs/components/data-table.md | 16 +++++++--------
 .../src/content/docs/components/pagination.md |  2 +-
 .../www/src/content/docs/components/switch.md |  2 +-
 .../src/content/docs/installation/laravel.md  |  4 ++--
 .../examples/forms/components/DisplayForm.vue |  4 ++--
 .../forms/components/NotificationsForm.vue    | 20 +++++++++----------
 .../tasks/components/DataTableViewOptions.vue |  4 ++--
 .../src/examples/tasks/components/columns.ts  |  6 +++---
 .../registry/default/block/Dashboard05.vue    |  2 +-
 .../lib/registry/default/block/Sidebar01.vue  |  2 +-
 .../lib/registry/default/block/Sidebar07.vue  |  4 ++--
 .../default/example/Cards/DataTable.vue       | 12 +++++------
 .../default/example/CheckboxFormMultiple.vue  |  4 ++--
 .../default/example/CheckboxFormSingle.vue    |  2 +-
 .../example/DataTableColumnPinningDemo.vue    | 12 +++++------
 .../default/example/DataTableDemo.vue         | 12 +++++------
 .../default/example/DataTableReactiveDemo.vue | 12 +++++------
 .../example/DropdownMenuCheckboxes.vue        |  8 ++++----
 .../default/example/PaginationDemo.vue        |  2 +-
 .../registry/default/example/SwitchForm.vue   |  8 ++++----
 .../default/example/TagsInputComboboxDemo.vue |  2 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |  4 ++--
 .../NavigationMenuViewport.vue                |  2 +-
 .../default/ui/select/SelectContent.vue       |  2 +-
 .../lib/registry/default/ui/toast/index.ts    |  2 +-
 .../registry/new-york/block/Dashboard05.vue   |  2 +-
 .../lib/registry/new-york/block/Sidebar01.vue |  2 +-
 .../lib/registry/new-york/block/Sidebar07.vue |  4 ++--
 .../new-york/example/Cards/DataTable.vue      | 12 +++++------
 .../new-york/example/CheckboxFormMultiple.vue |  4 ++--
 .../new-york/example/CheckboxFormSingle.vue   |  2 +-
 .../example/DataTableColumnPinningDemo.vue    | 12 +++++------
 .../new-york/example/DataTableDemo.vue        | 12 +++++------
 .../example/DataTableReactiveDemo.vue         | 12 +++++------
 .../example/DropdownMenuCheckboxes.vue        |  8 ++++----
 .../new-york/example/PaginationDemo.vue       |  2 +-
 .../registry/new-york/example/SwitchForm.vue  |  8 ++++----
 .../example/TagsInputComboboxDemo.vue         |  2 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |  4 ++--
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/select/SelectContent.vue      |  2 +-
 .../lib/registry/new-york/ui/toast/index.ts   |  2 +-
 .../registry/styles/default/auto-form.json    |  2 +-
 .../registry/styles/default/data-table.json   |  2 +-
 .../styles/default/navigation-menu.json       |  2 +-
 .../registry/styles/default/select.json       |  2 +-
 .../public/registry/styles/default/toast.json |  2 +-
 .../registry/styles/new-york/auto-form.json   |  2 +-
 .../styles/new-york/navigation-menu.json      |  2 +-
 .../registry/styles/new-york/select.json      |  2 +-
 .../registry/styles/new-york/toast.json       |  2 +-
 apps/www/tailwind.config.js                   |  8 ++++----
 packages/cli/src/utils/templates.ts           | 12 +++++------
 .../cli/test/fixtures/nuxt/tailwind.config.js |  4 ++--
 .../transform-cjs-to-esm.test.ts.snap         | 12 +++++------
 packages/module/playground/tailwind.config.js |  8 ++++----
 58 files changed, 156 insertions(+), 156 deletions(-)

diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index f3523c067..da3888f6c 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -29,10 +29,10 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index e85e8bf2a..12308bfea 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -29,10 +29,10 @@ module.exports = {
       keyframes: {
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index 777f1396f..6d050f357 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -751,7 +751,7 @@ const table = useVueTable({
                 <DropdownMenuContent align="end">
                     <DropdownMenuCheckboxItem
                         v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
-                        class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => {
+                        class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
                             column.toggleVisibility(!!value)
                         }">
                         {{ column.id }}
@@ -814,13 +814,13 @@ export const columns: ColumnDef<Payment>[] = [
     {
         id: 'select',
         header: ({ table }) => h(Checkbox, {
-            'checked': table.getIsAllPageRowsSelected(),
-            'onUpdate:checked': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+            'modelValue': table.getIsAllPageRowsSelected(),
+            'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
             'ariaLabel': 'Select all',
         }),
         cell: ({ row }) => h(Checkbox, {
-            'checked': row.getIsSelected(),
-            'onUpdate:checked': (value: boolean) => row.toggleSelected(!!value),
+            'modelValue': row.getIsSelected(),
+            'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
             'ariaLabel': 'Select row',
         }),
         enableSorting: false,
@@ -995,7 +995,7 @@ const table = useVueTable({
                 <DropdownMenuContent align="end">
                     <DropdownMenuCheckboxItem
                         v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
-                        class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => {
+                        class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
                             column.toggleVisibility(!!value)
                         }">
                         {{ column.id }}
@@ -1369,8 +1369,8 @@ const columns = computed(() => props.table.getAllColumns()
         v-for="column in columns"
         :key="column.id"
         class="capitalize"
-        :checked="column.getIsVisible()"
-        @update:checked="(value) => column.toggleVisibility(!!value)"
+        :modelValue="column.getIsVisible()"
+        @update:modelValue="(value) => column.toggleVisibility(!!value)"
       >
         {{ column.id }}
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index 02848c513..888b0ae36 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -34,7 +34,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 0a03b394a..5fa4a7e28 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -52,7 +52,7 @@ import { Switch } from '@/components/ui/switch'
 
 ```vue
 <template>
-  <Switch :checked="isDark" @update:checked="toggleTheme">
+  <Switch :model-value="isDark" @update:model-value="toggleTheme">
     <template #thumb>
       <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
       <Icon v-else icon="lucide:sun" class="size-3" />
diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md
index 4f2aa947b..7c0971dbf 100644
--- a/apps/www/src/content/docs/installation/laravel.md
+++ b/apps/www/src/content/docs/installation/laravel.md
@@ -112,10 +112,10 @@ export default {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/examples/forms/components/DisplayForm.vue b/apps/www/src/examples/forms/components/DisplayForm.vue
index e7185561e..779d1b9b9 100644
--- a/apps/www/src/examples/forms/components/DisplayForm.vue
+++ b/apps/www/src/examples/forms/components/DisplayForm.vue
@@ -88,8 +88,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="(checked) => {
+                :model-value="value.includes(item.id)"
+                @update:model-value="(checked) => {
                   if (Array.isArray(value)) {
                     handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
                   }
diff --git a/apps/www/src/examples/forms/components/NotificationsForm.vue b/apps/www/src/examples/forms/components/NotificationsForm.vue
index 8c9f09a10..1a6e43fb8 100644
--- a/apps/www/src/examples/forms/components/NotificationsForm.vue
+++ b/apps/www/src/examples/forms/components/NotificationsForm.vue
@@ -107,8 +107,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -126,8 +126,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -145,8 +145,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -164,8 +164,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -177,8 +177,8 @@ const onSubmit = handleSubmit((values) => {
       <FormItem class="flex flex-row items-start space-x-3 space-y-0">
         <FormControl>
           <Checkbox
-            :checked="value"
-            @update:checked="handleChange"
+            :model-value="value"
+            @update:model-value="handleChange"
           />
         </FormControl>
         <div class="space-y-1 leading-none">
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 7bba52efe..746cdd7c8 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -47,8 +47,8 @@ const columns = computed(() => props.table.getAllColumns()
         v-for="column in columns"
         :key="column.id"
         class="capitalize"
-        :checked="column.getIsVisible()"
-        @update:checked="(value) => column.toggleVisibility(!!value)"
+        :model-value="column.getIsVisible()"
+        @update:model-value="(value) => column.toggleVisibility(!!value)"
       >
         {{ column.id }}
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index c07e42ccf..38514f201 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -12,12 +12,12 @@ export const columns: ColumnDef<Task>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
       'class': 'translate-y-0.5',
     }),
-    cell: ({ row }) => h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
+    cell: ({ row }) => h(Checkbox, { 'modelValue': row.getIsSelected(), 'onUpdate:modelValue': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
     enableSorting: false,
     enableHiding: false,
   },
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
index a46390c25..12a793e81 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -773,7 +773,7 @@ import {
               <div class="text-xs text-muted-foreground">
                 Updated <time dateTime="2023-11-23">November 23, 2023</time>
               </div>
-              <Pagination class="ml-auto mr-0 w-auto">
+              <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
                 <PaginationList class="gap-1">
                   <PaginationPrev variant="outline" class="h-6 w-6" />
                   <PaginationNext variant="outline" class="h-6 w-6" />
diff --git a/apps/www/src/lib/registry/default/block/Sidebar01.vue b/apps/www/src/lib/registry/default/block/Sidebar01.vue
index 10affaf25..91aa04f4c 100644
--- a/apps/www/src/lib/registry/default/block/Sidebar01.vue
+++ b/apps/www/src/lib/registry/default/block/Sidebar01.vue
@@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 v-if="dropdownOpen"
-                class="w-[--radix-dropdown-menu-trigger-width]"
+                class="w-[--reka-dropdown-menu-trigger-width]"
                 align="start"
               >
                 <DropdownMenuItem
diff --git a/apps/www/src/lib/registry/default/block/Sidebar07.vue b/apps/www/src/lib/registry/default/block/Sidebar07.vue
index 82e5d1dae..78bcd1b11 100644
--- a/apps/www/src/lib/registry/default/block/Sidebar07.vue
+++ b/apps/www/src/lib/registry/default/block/Sidebar07.vue
@@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                 align="start"
                 side="bottom"
                 :side-offset="4"
@@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                   <ChevronsUpDown class="ml-auto size-4" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
                 <DropdownMenuLabel class="p-0 font-normal">
                   <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                     <Avatar class="h-8 w-8 rounded-lg">
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index f2e1608b2..31b0ca07b 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
                 v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
                 :key="column.id"
                 class="capitalize"
-                :checked="column.getIsVisible()"
-                @update:checked="(value) => {
+                :model-value="column.getIsVisible()"
+                @update:model-value="(value) => {
                   column.toggleVisibility(!!value)
                 }"
               >
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
index 3b7788fea..e0e2b07cd 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
@@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="handleChange"
+                :model-value="value.includes(item.id)"
+                @update:model-value="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
index 9e2988ce7..1a215f299 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
@@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
     <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4">
         <FormControl>
-          <Checkbox :checked="value" @update:checked="handleChange" />
+          <Checkbox :model-value="value" @update:model-value="handleChange" />
         </FormControl>
         <div class="space-y-1 leading-none">
           <FormLabel>Use different settings for my mobile devices</FormLabel>
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
index 571627d89..5a37788ed 100644
--- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -84,14 +84,14 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => {
       return h(Checkbox, {
-        'checked': row.getIsSelected(),
-        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'modelValue': row.getIsSelected(),
+        'onUpdate:modelValue': value => row.toggleSelected(!!value),
         'ariaLabel': 'Select row',
       })
     },
@@ -192,8 +192,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
index a10887c7a..7cbd7a200 100644
--- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue b/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
index 0016045b6..b4b2ebc99 100644
--- a/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -198,8 +198,8 @@ function randomize() {
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
index 34ce78f25..cb3434f30 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
@@ -11,7 +11,7 @@ import {
 } from '@/lib/registry/default/ui/dropdown-menu'
 import { ref } from 'vue'
 
-type Checked = DropdownMenuCheckboxItemProps['checked']
+type Checked = DropdownMenuCheckboxItemProps['modelValue']
 
 const showStatusBar = ref<Checked>(true)
 const showActivityBar = ref<Checked>(false)
@@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
       <DropdownMenuLabel>Appearance</DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuCheckboxItem
-        v-model:checked="showStatusBar"
+        v-model:model-value="showStatusBar"
       >
         Status Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showActivityBar"
+        v-model:model-value="showActivityBar"
         disabled
       >
         Activity Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showPanel"
+        v-model:model-value="showPanel"
       >
         Panel
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
index 145af875a..327a12807 100644
--- a/apps/www/src/lib/registry/default/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
@@ -16,7 +16,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/lib/registry/default/example/SwitchForm.vue b/apps/www/src/lib/registry/default/example/SwitchForm.vue
index 35e9f39f5..6ab9a140c 100644
--- a/apps/www/src/lib/registry/default/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/default/example/SwitchForm.vue
@@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
+                :model-value="value"
                 disabled
                 aria-readonly
-                @update:checked="handleChange"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
index 8a6cfdcf2..ee1ccb9e7 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
         <ComboboxContent>
           <CommandList
             position="popper"
-            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
           >
             <CommandEmpty />
             <CommandGroup>
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
index e6bb6a254..8aeae7b4a 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
@@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
               :is="booleanComponent"
               v-bind="{ ...slotProps.componentField }"
               :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+              :model-value="slotProps.componentField.modelValue"
+              @update:model-value="slotProps.componentField['onUpdate:modelValue']"
             />
           </slot>
         </FormControl>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index e6efe0a05..ef1bae23f 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[--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-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index d6397118e..7e80b794b 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index f39704d72..8953f1ee3 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
index 8dc46f453..6cf8a6a70 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
@@ -757,7 +757,7 @@ import {
               <div class="text-xs text-muted-foreground">
                 Updated <time dateTime="2023-11-23">November 23, 2023</time>
               </div>
-              <Pagination class="ml-auto mr-0 w-auto">
+              <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
                 <PaginationList class="gap-1">
                   <PaginationPrev variant="outline" class="h-6 w-6" />
                   <PaginationNext variant="outline" class="h-6 w-6" />
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar01.vue b/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
index 921a06ec4..26297e98b 100644
--- a/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
+++ b/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
@@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 v-if="dropdownOpen"
-                class="w-[--radix-dropdown-menu-trigger-width]"
+                class="w-[--reka-dropdown-menu-trigger-width]"
                 align="start"
               >
                 <DropdownMenuItem
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar07.vue b/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
index 70bb7fc79..1857e41e8 100644
--- a/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
+++ b/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
@@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                 align="start"
                 side="bottom"
                 :side-offset="4"
@@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                   <ChevronsUpDown class="ml-auto size-4" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
                 <DropdownMenuLabel class="p-0 font-normal">
                   <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                     <Avatar class="h-8 w-8 rounded-lg">
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
index 8da408f55..395ac72bf 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
                 v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
                 :key="column.id"
                 class="capitalize"
-                :checked="column.getIsVisible()"
-                @update:checked="(value) => {
+                :model-value="column.getIsVisible()"
+                @update:model-value="(value) => {
                   column.toggleVisibility(!!value)
                 }"
               >
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
index 1f42dafe5..c3c372666 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
@@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="handleChange"
+                :model-value="value.includes(item.id)"
+                @update:model-value="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
index f887913b0..7f3497b27 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
@@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
     <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow">
         <FormControl>
-          <Checkbox :checked="value" @update:checked="handleChange" />
+          <Checkbox :model-value="value" @update:model-value="handleChange" />
         </FormControl>
         <div class="space-y-1 leading-none">
           <FormLabel>Use different settings for my mobile devices</FormLabel>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
index 5f961e2e6..a5af1d852 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -84,14 +84,14 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => {
       return h(Checkbox, {
-        'checked': row.getIsSelected(),
-        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'modelValue': row.getIsSelected(),
+        'onUpdate:modelValue': value => row.toggleSelected(!!value),
         'ariaLabel': 'Select row',
       })
     },
@@ -192,8 +192,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
index 20f5ed249..7b086ce6f 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
index e4b778172..d72b80b4c 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -198,8 +198,8 @@ function randomize() {
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
index cd4456e5e..4c6ef62a5 100644
--- a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -11,7 +11,7 @@ import {
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { ref } from 'vue'
 
-type Checked = DropdownMenuCheckboxItemProps['checked']
+type Checked = DropdownMenuCheckboxItemProps['modelValue']
 
 const showStatusBar = ref<Checked>(true)
 const showActivityBar = ref<Checked>(false)
@@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
       <DropdownMenuLabel>Appearance</DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuCheckboxItem
-        v-model:checked="showStatusBar"
+        v-model:model-value="showStatusBar"
       >
         Status Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showActivityBar"
+        v-model:model-value="showActivityBar"
         disabled
       >
         Activity Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showPanel"
+        v-model:model-value="showPanel"
       >
         Panel
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
index 6949ecea3..fa6a0d7c4 100644
--- a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
@@ -16,7 +16,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
index b854bc207..91ea847d0 100644
--- a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
@@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
+                :model-value="value"
                 disabled
                 aria-readonly
-                @update:checked="handleChange"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
index f4c01cea8..241ffcad6 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
         <ComboboxContent>
           <CommandList
             position="popper"
-            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
           >
             <CommandEmpty />
             <CommandGroup>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
index 40fee8cc9..a9f15d416 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
@@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
               :is="booleanComponent"
               v-bind="{ ...slotProps.componentField }"
               :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+              :model-value="slotProps.componentField.modelValue"
+              @update:model-value="slotProps.componentField['onUpdate:modelValue']"
             />
           </slot>
         </FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 404630808..181bd123f 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index d6397118e..7e80b794b 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index 4f35f572c..121f09c9d 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index 19e556b1f..fca1f24d0 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :checked=\"slotProps.componentField.modelValue\"\n              @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
index 0ca7c3f36..17c01863b 100644
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ b/apps/www/src/public/registry/styles/default/data-table.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "DataTable.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :checked=\"column.getIsVisible()\"\n            @update:checked=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :modelValue=\"column.getIsVisible()\"\n            @update:modelValue=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index e4dcaf199..b1cb537b8 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -35,7 +35,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--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-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d8cd4e3d7..c420f6382 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 35999b94a..c4344b053 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index e79a4df81..769d0de9d 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :checked=\"slotProps.componentField.modelValue\"\n              @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index 3be230199..d1eabda6b 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -35,7 +35,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 2cbb1ca3f..1596b0bec 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index a625ced99..e91628976 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 85bc30fa2..38f299e8c 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -75,18 +75,18 @@ export default {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index 69ea13675..df7640a34 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -30,10 +30,10 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
       },
@@ -125,18 +125,18 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/test/fixtures/nuxt/tailwind.config.js b/packages/cli/test/fixtures/nuxt/tailwind.config.js
index 62653c7ba..1d96084e4 100644
--- a/packages/cli/test/fixtures/nuxt/tailwind.config.js
+++ b/packages/cli/test/fixtures/nuxt/tailwind.config.js
@@ -53,10 +53,10 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
index 93aea0865..d466ef23e 100644
--- a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
@@ -25,10 +25,10 @@ export default {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
       },
@@ -122,18 +122,18 @@ export default {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/module/playground/tailwind.config.js b/packages/module/playground/tailwind.config.js
index 62786e953..1de76bccf 100644
--- a/packages/module/playground/tailwind.config.js
+++ b/packages/module/playground/tailwind.config.js
@@ -59,18 +59,18 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },

From 19aacd90f207f98e8fa2be58dcebd232ac174049 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 8 Nov 2024 12:02:19 +0800
Subject: [PATCH 04/39] chore: bump reka version

---
 packages/cli/test/fixtures/nuxt/package.json |  2 +-
 packages/module/playground/package.json      |  2 +-
 pnpm-lock.yaml                               | 14 +++++++-------
 pnpm-workspace.yaml                          |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/nuxt/package.json
index 0f2942c9a..142ff8042 100644
--- a/packages/cli/test/fixtures/nuxt/package.json
+++ b/packages/cli/test/fixtures/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.2",
+    "reka-ui": "^1.0.0-alpha.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index 33ccfa885..93c25c8e6 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -12,7 +12,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.2",
+    "reka-ui": "^1.0.0-alpha.4",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2dfb14246..076a8dd26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,8 +10,8 @@ catalogs:
       specifier: ^0.29.0
       version: 0.29.0
     reka-ui:
-      specifier: ^1.0.0-alpha.3
-      version: 1.0.0-alpha.3
+      specifier: ^1.0.0-alpha.4
+      version: 1.0.0-alpha.4
     typescript:
       specifier: ^5.6.3
       version: 5.6.3
@@ -118,7 +118,7 @@ importers:
         version: 0.30.12
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3))
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
@@ -299,7 +299,7 @@ importers:
         version: 2.4.2
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -6478,8 +6478,8 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  reka-ui@1.0.0-alpha.3:
-    resolution: {integrity: sha512-koQkKXiFP7tqazpJsM3l+N1wBXqO8KyKOybRkhdxPlKv6Rs1Q90rL50VzUnBCrX+6zTGsFIovvlMVdvRRWdVXQ==}
+  reka-ui@1.0.0-alpha.4:
+    resolution: {integrity: sha512-hrae4UXs7qVLKftET9pVgy/nY9tX4ohP3af4M7WbyacFngVJalBD0lTiYT8w/g/ySwJgXZHDqsq/1RxtXSSBZg==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -15036,7 +15036,7 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  reka-ui@1.0.0-alpha.3(vue@3.5.12(typescript@5.6.3)):
+  reka-ui@1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@floating-ui/dom': 1.6.11
       '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3))
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a980b8cfb..96405123f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
 catalog:
   '@oxc-parser/wasm': ^0.29.0
   typescript: ^5.6.3
-  reka-ui: ^1.0.0-alpha.3
+  reka-ui: ^1.0.0-alpha.4
   zod: ^3.23.8

From 5ff9cda0aa4e1481277e160378568d06a5bf407d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 19 Nov 2024 17:10:16 +0800
Subject: [PATCH 05/39] chore: update deps

---
 apps/www/package.json                        |   58 +-
 package.json                                 |   10 +-
 packages/cli/package.json                    |   16 +-
 packages/cli/test/fixtures/nuxt/package.json |    2 +-
 packages/module/package.json                 |   16 +-
 packages/module/playground/package.json      |    2 +-
 pnpm-lock.yaml                               | 5188 +++++++++---------
 pnpm-workspace.yaml                          |    2 +-
 8 files changed, 2563 insertions(+), 2731 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 4411c8bea..cde006d1b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -17,50 +17,50 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@internationalized/date": "^3.5.5",
+    "@internationalized/date": "^3.5.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.11.0",
     "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.1.0",
+    "@vee-validate/zod": "^4.14.7",
+    "@vueuse/core": "^11.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^4.1.0",
-    "embla-carousel-autoplay": "^8.3.0",
-    "embla-carousel-vue": "^8.3.0",
+    "embla-carousel-autoplay": "^8.4.0",
+    "embla-carousel-vue": "^8.4.0",
     "lucide-vue-next": "^0.441.0",
-    "magic-string": "^0.30.11",
+    "magic-string": "^0.30.13",
     "reka-ui": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
-    "vue": "^3.5.6",
-    "vue-sonner": "^1.1.5",
+    "vue": "^3.5.13",
+    "vue-sonner": "^1.2.5",
     "vue-wrap-balancer": "^1.2.1",
     "zod": "catalog:"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.25.6",
-    "@iconify-json/gravity-ui": "^1.1.3",
-    "@iconify-json/lucide": "^1.1.198",
-    "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/radix-icons": "^1.1.14",
-    "@iconify-json/ri": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.108",
-    "@iconify-json/tabler": "^1.1.116",
+    "@babel/traverse": "^7.25.9",
+    "@iconify-json/gravity-ui": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.15",
+    "@iconify-json/ph": "^1.2.1",
+    "@iconify-json/radix-icons": "^1.2.1",
+    "@iconify-json/ri": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.11",
+    "@iconify-json/tabler": "^1.2.8",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.17.7",
+    "@shikijs/transformers": "^1.23.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.5.5",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/compiler-core": "^3.5.6",
-    "@vue/compiler-dom": "^3.5.6",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.0",
+    "@vue/compiler-core": "^3.5.13",
+    "@vue/compiler-dom": "^3.5.13",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.20",
     "fast-glob": "^3.3.2",
@@ -68,14 +68,14 @@
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.22.1",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12",
-    "tsx": "^4.19.1",
+    "shiki": "^1.23.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.15",
+    "tsx": "^4.19.2",
     "typescript": "catalog:",
     "unplugin-icons": "^0.19.3",
-    "vitepress": "^1.3.4",
-    "vue-component-meta": "^2.1.6",
-    "vue-tsc": "^2.1.6"
+    "vitepress": "^1.5.0",
+    "vue-component-meta": "^2.1.10",
+    "vue-tsc": "^2.1.10"
   }
 }
diff --git a/package.json b/package.json
index b538bdf65..fc913743d 100644
--- a/package.json
+++ b/package.json
@@ -31,17 +31,17 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.6.2",
+    "@antfu/eslint-config": "^3.9.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@vitest/ui": "^2.1.1",
-    "bumpp": "^9.5.2",
-    "eslint": "^9.10.0",
+    "@vitest/ui": "^2.1.5",
+    "bumpp": "^9.8.1",
+    "eslint": "^9.15.0",
     "lint-staged": "^15.2.10",
     "simple-git-hooks": "^2.11.1",
     "taze": "^0.16.9",
     "typescript": "catalog:",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.5"
   },
   "commitlint": {
     "extends": [
diff --git a/packages/cli/package.json b/packages/cli/package.json
index a9c8a383f..51cb3512b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@unovue/detypes": "^0.8.4",
-    "@vue/compiler-sfc": "^3.5",
+    "@vue/compiler-sfc": "^3.5.13",
     "c12": "^2.0.1",
     "commander": "^12.1.0",
     "consola": "^3.2.3",
@@ -60,28 +60,28 @@
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.5",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.12",
+    "magic-string": "^0.30.13",
     "nypm": "^0.3.12",
     "ofetch": "^1.4.1",
-    "ora": "^8.1.0",
+    "ora": "^8.1.1",
     "pathe": "^1.1.2",
     "pkg-types": "^1.2.1",
     "prompts": "^2.4.2",
     "reka-ui": "catalog:",
     "semver": "^7.6.3",
     "tsconfig-paths": "^4.2.0",
-    "vue-metamorph": "^3.2.0",
+    "vue-metamorph": "^3.2.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/diff": "^5.2.3",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.9.0",
     "@types/prompts": "^2.4.9",
-    "tsup": "^8.3.0",
-    "type-fest": "^4.26.1",
+    "tsup": "^8.3.5",
+    "type-fest": "^4.27.0",
     "typescript": "catalog:",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite-tsconfig-paths": "^5.1.2"
   }
 }
diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/nuxt/package.json
index 142ff8042..d3443b861 100644
--- a/packages/cli/test/fixtures/nuxt/package.json
+++ b/packages/cli/test/fixtures/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.4",
+    "reka-ui": "^1.0.0-alpha.5",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/module/package.json b/packages/module/package.json
index 42a70a484..06452dcde 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -36,18 +36,18 @@
     "pub:release": "pnpm prepack && pnpm publish  --no-git-checks --access public"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
+    "@nuxt/kit": "^3.14.159",
     "@oxc-parser/wasm": "catalog:",
     "typescript": "catalog:"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.2",
-    "@nuxt/schema": "^3.12.4",
-    "@nuxt/test-utils": "^3.14.0",
-    "@nuxtjs/color-mode": "^3.5.1",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.14.159",
+    "@nuxt/test-utils": "^3.14.4",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
-    "@types/node": "^20.14.15",
-    "nuxt": "^3.12.4"
+    "@types/node": "^20.17.6",
+    "nuxt": "^3.14.159"
   }
 }
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index 93c25c8e6..a12d36205 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -12,7 +12,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.4",
+    "reka-ui": "^1.0.0-alpha.5",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 076a8dd26..8087883ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,8 +10,8 @@ catalogs:
       specifier: ^0.29.0
       version: 0.29.0
     reka-ui:
-      specifier: ^1.0.0-alpha.4
-      version: 1.0.0-alpha.4
+      specifier: ^1.0.0-alpha.5
+      version: 1.0.0-alpha.5
     typescript:
       specifier: ^5.6.3
       version: 5.6.3
@@ -30,23 +30,23 @@ importers:
   .:
     devDependencies:
       '@antfu/eslint-config':
-        specifier: ^3.6.2
-        version: 3.8.0(@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(@vue/compiler-sfc@3.5.12)(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))
+        specifier: ^3.9.2
+        version: 3.9.2(@typescript-eslint/utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(@vue/compiler-sfc@3.5.13)(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vitest@2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))
       '@commitlint/cli':
         specifier: ^19.5.0
-        version: 19.5.0(@types/node@22.7.7)(typescript@5.6.3)
+        version: 19.5.0(@types/node@22.9.0)(typescript@5.6.3)
       '@commitlint/config-conventional':
         specifier: ^19.5.0
         version: 19.5.0
       '@vitest/ui':
-        specifier: ^2.1.1
-        version: 2.1.3(vitest@2.1.3)
+        specifier: ^2.1.5
+        version: 2.1.5(vitest@2.1.5)
       bumpp:
-        specifier: ^9.5.2
-        version: 9.7.1(magicast@0.3.5)
+        specifier: ^9.8.1
+        version: 9.8.1(magicast@0.3.5)
       eslint:
-        specifier: ^9.10.0
-        version: 9.13.0(jiti@2.3.3)
+        specifier: ^9.15.0
+        version: 9.15.0(jiti@2.4.0)
       lint-staged:
         specifier: ^15.2.10
         version: 15.2.10
@@ -60,8 +60,8 @@ importers:
         specifier: 'catalog:'
         version: 5.6.3
       vitest:
-        specifier: ^2.1.1
-        version: 2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0)
+        specifier: ^2.1.5
+        version: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
 
   apps/www:
     dependencies:
@@ -69,29 +69,29 @@ importers:
         specifier: ^0.8.2
         version: 0.8.2
       '@internationalized/date':
-        specifier: ^3.5.5
+        specifier: ^3.5.6
         version: 3.5.6
       '@radix-icons/vue':
         specifier: ^1.0.0
-        version: 1.0.0(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0(vue@3.5.13(typescript@5.6.3))
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
       '@tanstack/vue-table':
         specifier: ^8.20.5
-        version: 8.20.5(vue@3.5.12(typescript@5.6.3))
+        version: 8.20.5(vue@3.5.13(typescript@5.6.3))
       '@unovis/ts':
         specifier: ^1.4.4
         version: 1.4.4
       '@unovis/vue':
         specifier: ^1.4.4
-        version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.12(typescript@5.6.3))
+        version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3))
       '@vee-validate/zod':
-        specifier: ^4.13.2
-        version: 4.14.3(vue@3.5.12(typescript@5.6.3))
+        specifier: ^4.14.7
+        version: 4.14.7(vue@3.5.13(typescript@5.6.3))
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.12(typescript@5.6.3))
+        specifier: ^11.2.0
+        version: 11.2.0(vue@3.5.13(typescript@5.6.3))
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -105,102 +105,102 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       embla-carousel-autoplay:
-        specifier: ^8.3.0
-        version: 8.3.0(embla-carousel@8.3.0)
+        specifier: ^8.4.0
+        version: 8.4.0(embla-carousel@8.4.0)
       embla-carousel-vue:
-        specifier: ^8.3.0
-        version: 8.3.0(vue@3.5.12(typescript@5.6.3))
+        specifier: ^8.4.0
+        version: 8.4.0(vue@3.5.13(typescript@5.6.3))
       lucide-vue-next:
         specifier: ^0.441.0
-        version: 0.441.0(vue@3.5.12(typescript@5.6.3))
+        version: 0.441.0(vue@3.5.13(typescript@5.6.3))
       magic-string:
-        specifier: ^0.30.11
-        version: 0.30.12
+        specifier: ^0.30.13
+        version: 0.30.13
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.5(vue@3.5.13(typescript@5.6.3))
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        version: 1.0.7(tailwindcss@3.4.15)
       v-calendar:
         specifier: ^3.1.2
-        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.12(typescript@5.6.3))
+        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3))
       vaul-vue:
         specifier: ^0.2.0
-        version: 0.2.0(radix-vue@1.9.8(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+        version: 0.2.0(radix-vue@1.9.8(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       vee-validate:
         specifier: 4.13.2
-        version: 4.13.2(vue@3.5.12(typescript@5.6.3))
+        version: 4.13.2(vue@3.5.13(typescript@5.6.3))
       vue:
-        specifier: ^3.5.6
-        version: 3.5.12(typescript@5.6.3)
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.6.3)
       vue-sonner:
-        specifier: ^1.1.5
-        version: 1.2.2
+        specifier: ^1.2.5
+        version: 1.2.5
       vue-wrap-balancer:
         specifier: ^1.2.1
-        version: 1.2.1(vue@3.5.12(typescript@5.6.3))
+        version: 1.2.1(vue@3.5.13(typescript@5.6.3))
       zod:
         specifier: 'catalog:'
         version: 3.23.8
     devDependencies:
       '@babel/traverse':
-        specifier: ^7.25.6
-        version: 7.25.7
+        specifier: ^7.25.9
+        version: 7.25.9
       '@iconify-json/gravity-ui':
-        specifier: ^1.1.3
+        specifier: ^1.2.2
         version: 1.2.2
       '@iconify-json/lucide':
-        specifier: ^1.1.198
-        version: 1.2.10
+        specifier: ^1.2.15
+        version: 1.2.15
       '@iconify-json/ph':
-        specifier: ^1.1.13
+        specifier: ^1.2.1
         version: 1.2.1
       '@iconify-json/radix-icons':
-        specifier: ^1.1.14
+        specifier: ^1.2.1
         version: 1.2.1
       '@iconify-json/ri':
-        specifier: ^1.1.21
-        version: 1.2.1
+        specifier: ^1.2.3
+        version: 1.2.3
       '@iconify-json/simple-icons':
-        specifier: ^1.1.108
-        version: 1.2.8
+        specifier: ^1.2.11
+        version: 1.2.11
       '@iconify-json/tabler':
-        specifier: ^1.1.116
-        version: 1.2.5
+        specifier: ^1.2.8
+        version: 1.2.8
       '@iconify/vue':
         specifier: ^4.1.2
-        version: 4.1.2(vue@3.5.12(typescript@5.6.3))
+        version: 4.1.2(vue@3.5.13(typescript@5.6.3))
       '@oxc-parser/wasm':
         specifier: 'catalog:'
         version: 0.29.0
       '@shikijs/transformers':
-        specifier: ^1.17.7
-        version: 1.22.0
+        specifier: ^1.23.1
+        version: 1.23.1
       '@types/lodash-es':
         specifier: ^4.17.12
         version: 4.17.12
       '@types/node':
-        specifier: ^22.5.5
-        version: 22.7.7
+        specifier: ^22.9.0
+        version: 22.9.0
       '@vitejs/plugin-vue':
-        specifier: ^5.1.4
-        version: 5.1.4(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+        specifier: ^5.2.0
+        version: 5.2.0(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@vitejs/plugin-vue-jsx':
-        specifier: ^4.0.1
-        version: 4.0.1(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+        specifier: ^4.1.0
+        version: 4.1.0(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@vue/compiler-core':
-        specifier: ^3.5.6
-        version: 3.5.12
+        specifier: ^3.5.13
+        version: 3.5.13
       '@vue/compiler-dom':
-        specifier: ^3.5.6
-        version: 3.5.12
+        specifier: ^3.5.13
+        version: 3.5.13
       '@vue/tsconfig':
         specifier: ^0.5.1
         version: 0.5.1
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        version: 10.4.20(postcss@8.4.49)
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -217,32 +217,32 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1
       shiki:
-        specifier: ^1.22.1
-        version: 1.22.1
+        specifier: ^1.23.1
+        version: 1.23.1
       tailwind-merge:
-        specifier: ^2.5.2
+        specifier: ^2.5.4
         version: 2.5.4
       tailwindcss:
-        specifier: ^3.4.12
-        version: 3.4.14
+        specifier: ^3.4.15
+        version: 3.4.15
       tsx:
-        specifier: ^4.19.1
-        version: 4.19.1
+        specifier: ^4.19.2
+        version: 4.19.2
       typescript:
         specifier: 'catalog:'
         version: 5.6.3
       unplugin-icons:
         specifier: ^0.19.3
-        version: 0.19.3(@vue/compiler-sfc@3.5.12)
+        version: 0.19.3(@vue/compiler-sfc@3.5.13)
       vitepress:
-        specifier: ^1.3.4
-        version: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.7)(postcss@8.4.47)(search-insights@2.17.2)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)
+        specifier: ^1.5.0
+        version: 1.5.0(@algolia/client-search@5.14.2)(@types/node@22.9.0)(change-case@5.4.4)(postcss@8.4.49)(search-insights@2.17.2)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)
       vue-component-meta:
-        specifier: ^2.1.6
-        version: 2.1.6(typescript@5.6.3)
+        specifier: ^2.1.10
+        version: 2.1.10(typescript@5.6.3)
       vue-tsc:
-        specifier: ^2.1.6
-        version: 2.1.6(typescript@5.6.3)
+        specifier: ^2.1.10
+        version: 2.1.10(typescript@5.6.3)
 
   packages/cli:
     dependencies:
@@ -251,10 +251,10 @@ importers:
         version: 0.8.4
       '@vitest/ui':
         specifier: '*'
-        version: 2.1.3(vitest@2.1.3)
+        version: 2.1.5(vitest@2.1.5)
       '@vue/compiler-sfc':
-        specifier: ^3.5
-        version: 3.5.12
+        specifier: ^3.5.13
+        version: 3.5.13
       c12:
         specifier: ^2.0.1
         version: 2.0.1(magicast@0.3.5)
@@ -272,13 +272,13 @@ importers:
         version: 11.2.0
       https-proxy-agent:
         specifier: ^7.0.5
-        version: 7.0.5
+        version: 7.0.5(supports-color@9.4.0)
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       magic-string:
-        specifier: ^0.30.12
-        version: 0.30.12
+        specifier: ^0.30.13
+        version: 0.30.13
       nypm:
         specifier: ^0.3.12
         version: 0.3.12
@@ -286,8 +286,8 @@ importers:
         specifier: ^1.4.1
         version: 1.4.1
       ora:
-        specifier: ^8.1.0
-        version: 8.1.0
+        specifier: ^8.1.1
+        version: 8.1.1
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -299,7 +299,7 @@ importers:
         version: 2.4.2
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3))
+        version: 1.0.0-alpha.5(vue@3.5.13(typescript@5.6.3))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -308,10 +308,10 @@ importers:
         version: 4.2.0
       vitest:
         specifier: '*'
-        version: 2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0)
+        version: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
       vue-metamorph:
-        specifier: ^3.2.0
-        version: 3.2.0(eslint@9.13.0(jiti@2.3.3))
+        specifier: ^3.2.2
+        version: 3.2.2(eslint@9.15.0(jiti@2.4.0))
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -326,29 +326,29 @@ importers:
         specifier: ^4.17.12
         version: 4.17.12
       '@types/node':
-        specifier: ^22.7.5
-        version: 22.7.7
+        specifier: ^22.9.0
+        version: 22.9.0
       '@types/prompts':
         specifier: ^2.4.9
         version: 2.4.9
       tsup:
-        specifier: ^8.3.0
-        version: 8.3.0(jiti@2.3.3)(postcss@8.4.47)(tsx@4.19.1)(typescript@5.6.3)(yaml@2.6.0)
+        specifier: ^8.3.5
+        version: 8.3.5(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0)
       type-fest:
-        specifier: ^4.26.1
-        version: 4.26.1
+        specifier: ^4.27.0
+        version: 4.27.0
       typescript:
         specifier: 'catalog:'
         version: 5.6.3
       vite-tsconfig-paths:
-        specifier: ^5.0.1
-        version: 5.0.1(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))
+        specifier: ^5.1.2
+        version: 5.1.2(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))
 
   packages/module:
     dependencies:
       '@nuxt/kit':
-        specifier: ^3.12.4
-        version: 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+        specifier: ^3.14.159
+        version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       '@oxc-parser/wasm':
         specifier: 'catalog:'
         version: 0.29.0
@@ -357,96 +357,103 @@ importers:
         version: 5.6.3
     devDependencies:
       '@nuxt/eslint-config':
-        specifier: ^0.5.0
-        version: 0.5.7(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
+        specifier: ^0.5.7
+        version: 0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@nuxt/module-builder':
-        specifier: ^0.8.2
-        version: 0.8.4(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0))(nuxi@3.14.0)(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))
+        specifier: ^0.8.4
+        version: 0.8.4(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.27.3))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
       '@nuxt/schema':
-        specifier: ^3.12.4
-        version: 3.13.2(rollup@4.24.0)
+        specifier: ^3.14.159
+        version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       '@nuxt/test-utils':
-        specifier: ^3.14.0
-        version: 3.14.4(@vitest/ui@2.1.3(vitest@2.1.3))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+        specifier: ^3.14.4
+        version: 3.14.4(@vitest/ui@2.1.5(vitest@2.1.5))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       '@nuxtjs/color-mode':
-        specifier: ^3.5.1
-        version: 3.5.1(magicast@0.3.5)(rollup@4.24.0)
+        specifier: ^3.5.2
+        version: 3.5.2(magicast@0.3.5)(rollup@4.27.3)
       '@nuxtjs/tailwindcss':
         specifier: ^6.12.2
-        version: 6.12.2(magicast@0.3.5)(rollup@4.24.0)
+        version: 6.12.2(magicast@0.3.5)(rollup@4.27.3)
       '@types/node':
-        specifier: ^20.14.15
-        version: 20.16.13
+        specifier: ^20.17.6
+        version: 20.17.6
       nuxt:
-        specifier: ^3.12.4
-        version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@20.16.13)(encoding@0.1.13)(eslint@9.13.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.6(typescript@5.6.3))
+        specifier: ^3.14.159
+        version: 3.14.159(@parcel/watcher@2.5.0)(@types/node@20.17.6)(encoding@0.1.13)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
 
 packages:
 
-  '@algolia/autocomplete-core@1.9.3':
-    resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
+  '@algolia/autocomplete-core@1.17.7':
+    resolution: {integrity: sha512-BjiPOW6ks90UKl7TwMv7oNQMnzU+t/wk9mgIDi6b1tXpUek7MW0lbNOUHpvam9pe3lVCf4xPFT+lK7s+e+fs7Q==}
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.9.3':
-    resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7':
+    resolution: {integrity: sha512-Jca5Ude6yUOuyzjnz57og7Et3aXjbwCSDf/8onLHSQgw1qW3ALl9mrMWaXb5FmPVkV3EtkD2F/+NkT6VHyPu9A==}
     peerDependencies:
       search-insights: '>= 1 < 3'
 
-  '@algolia/autocomplete-preset-algolia@1.9.3':
-    resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
+  '@algolia/autocomplete-preset-algolia@1.17.7':
+    resolution: {integrity: sha512-ggOQ950+nwbWROq2MOCIL71RE0DdQZsceqrg32UqnhDz8FlO9rL8ONHNsI2R1MH0tkgVIDKI/D0sMiUchsFdWA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
-  '@algolia/autocomplete-shared@1.9.3':
-    resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
+  '@algolia/autocomplete-shared@1.17.7':
+    resolution: {integrity: sha512-o/1Vurr42U/qskRSuhBH+VKxMvkkUVTLU6WZQr+L5lGZZLYWyhdzWjW0iGXY7EkwRTjBqvN2EsR81yCTGV/kmg==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
-  '@algolia/cache-browser-local-storage@4.24.0':
-    resolution: {integrity: sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==}
-
-  '@algolia/cache-common@4.24.0':
-    resolution: {integrity: sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g==}
+  '@algolia/client-abtesting@5.14.2':
+    resolution: {integrity: sha512-7fq1tWIy1aNJEaNHxWy3EwDkuo4k22+NBnxq9QlYVSLLXtr6HqmAm6bQgNNzGT3vm21iKqWO9efk+HIhEM1SzQ==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/cache-in-memory@4.24.0':
-    resolution: {integrity: sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==}
+  '@algolia/client-analytics@5.14.2':
+    resolution: {integrity: sha512-5Nm5cOOyAGcY+hKNJVmR2jgoGn1nvoANS8W5EfB8yAaUqUxL3lFNUHSkFafAMTCOcVKNDkZQYjUDbOOfdYJLqw==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-account@4.24.0':
-    resolution: {integrity: sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==}
+  '@algolia/client-common@5.14.2':
+    resolution: {integrity: sha512-BW1Qzhh9tMKEsWSQQsiOEcHAd6g7zxq9RpPVmyxbDO/O4eA4vyN+Qz5Jzo686kuYdIQKqIPCEtob/JM89tk57g==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-analytics@4.24.0':
-    resolution: {integrity: sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==}
+  '@algolia/client-insights@5.14.2':
+    resolution: {integrity: sha512-17zg6pqifKORvvrMIqW6HhwUry9RKRXLgADrgFjZ6PZvGB4oVs12dwRG2/HMrIlpxd9cjeQfdlEgHj6lbAf6QA==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-common@4.24.0':
-    resolution: {integrity: sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==}
+  '@algolia/client-personalization@5.14.2':
+    resolution: {integrity: sha512-5IYt8vbmTA52xyuaZKFwiRoDPeh7hiOC9aBZqqp9fVs6BU01djI/T8pGJXawvwczltCPYzNsdbllV3rqiDbxmQ==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-personalization@4.24.0':
-    resolution: {integrity: sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==}
+  '@algolia/client-query-suggestions@5.14.2':
+    resolution: {integrity: sha512-gvCX/cczU76Bu1sGcxxTdoIwxe+FnuC1IlW9SF/gzxd3ZzsgzBpzD2puIJqt9fHQsjLxVGkJqKev2FtExnJYZg==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-search@4.24.0':
-    resolution: {integrity: sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==}
+  '@algolia/client-search@5.14.2':
+    resolution: {integrity: sha512-0imdBZDjqxrshw0+eyJUgnkRAbS2W93UQ3BVj8VjN4xQylIMf0fWs72W7MZFdHlH78JJYydevgzqvGMcV0Z1CA==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/logger-common@4.24.0':
-    resolution: {integrity: sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA==}
+  '@algolia/ingestion@1.14.2':
+    resolution: {integrity: sha512-/p4rBNkW0fgCpCwrwre+jHfzlFQsLemgaAQqyui8NPxw95Wgf3p+DKxYzcmh8dygT7ub7FwztTW+uURLX1uqIQ==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/logger-console@4.24.0':
-    resolution: {integrity: sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==}
+  '@algolia/monitoring@1.14.2':
+    resolution: {integrity: sha512-81R57Y/mS0uNhWpu6cNEfkbkADLW4bP0BNjuPpxAypobv7WzYycUnbMvv1YkN6OsociB4+3M7HfsVzj4Nc09vA==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/recommend@4.24.0':
-    resolution: {integrity: sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==}
+  '@algolia/recommend@5.14.2':
+    resolution: {integrity: sha512-OwELnAZxCUyfjYjqsrFmC7Vfa12kqwbDdLUV0oi4j+4pxDsfPgkiZ6iCH2uPw6X8VK88Hl3InPt+RPaZvcrCWg==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-browser-xhr@4.24.0':
-    resolution: {integrity: sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==}
+  '@algolia/requester-browser-xhr@5.14.2':
+    resolution: {integrity: sha512-irUvkK+TGBhyivtNCIIbVgNUgbUoHOSk8m/kFX4ddto/PUPmLFRRNNnMHtJ1+OzrJ/uD3Am4FUK2Yt+xgQr05w==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-common@4.24.0':
-    resolution: {integrity: sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA==}
+  '@algolia/requester-fetch@5.14.2':
+    resolution: {integrity: sha512-UNBg5mM4MIYdxPuVjyDL22BC6P87g7WuM91Z1Ky0J19aEGvCSF+oR+9autthROFXdRnAa1rACOjuqn95iBbKpw==}
+    engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-node-http@4.24.0':
-    resolution: {integrity: sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==}
-
-  '@algolia/transporter@4.24.0':
-    resolution: {integrity: sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==}
+  '@algolia/requester-node-http@5.14.2':
+    resolution: {integrity: sha512-CTFA03YiLcnpP+JoLRqjHt5pqDHuKWJpLsIBY/60Gmw8pjALZ3TwvbAquRX4Vy+yrin178NxMuU+ilZ54f2IrQ==}
+    engines: {node: '>= 14.0.0'}
 
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
@@ -456,8 +463,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/eslint-config@3.8.0':
-    resolution: {integrity: sha512-O5QSufPHpKTm0wk1OQ5c2mOZVzCqYV3hIDrt5zt+cOWqiG8YXLPkSOD4fFwjomATtOuUbcLUwkcgY5dErM7aIw==}
+  '@antfu/eslint-config@3.9.2':
+    resolution: {integrity: sha512-a1I1CXmtQdTL9jxcb2RzKjuYYAzjdKK3ktVpQGd/1S/aUdhKgcEEi3DRXYgnB8xdpYLqracETxEMDf9PQlmyBg==}
     hasBin: true
     peerDependencies:
       '@eslint-react/eslint-plugin': ^1.5.8
@@ -505,123 +512,127 @@ packages:
   '@antfu/install-pkg@0.4.1':
     resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
 
-  '@antfu/ni@0.23.0':
-    resolution: {integrity: sha512-R5/GkA3PfGewAXLzz6lN5XagunF6PKeDtWt8dbZQXvHfebLS0qEczV+Azg/d+tKgSh6kRBpxvu8oSjARdPtw0A==}
+  '@antfu/ni@0.23.1':
+    resolution: {integrity: sha512-VFAvMTJhjP6L7CuBKT5FioDCSpdmZxJ4POKTJOrFNicI2CK6mlaRwVEBGWLGm2V6BtQgdbBn9X68piHSbw5wQQ==}
     hasBin: true
 
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
-  '@babel/code-frame@7.25.7':
-    resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.25.8':
-    resolution: {integrity: sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==}
+  '@babel/compat-data@7.26.2':
+    resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.25.8':
-    resolution: {integrity: sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==}
+  '@babel/core@7.26.0':
+    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.7':
-    resolution: {integrity: sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==}
+  '@babel/generator@7.26.2':
+    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.25.7':
-    resolution: {integrity: sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==}
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.25.7':
-    resolution: {integrity: sha512-DniTEax0sv6isaw6qSQSfV4gVRNtw2rte8HHM45t9ZR0xILaufBRNkpMifCRiAPyvL4ACD6v0gfCwCmtOQaV4A==}
+  '@babel/helper-compilation-targets@7.25.9':
+    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.25.7':
-    resolution: {integrity: sha512-bD4WQhbkx80mAyj/WCm4ZHcF4rDxkoLFO6ph8/5/mQ3z4vAzltQXAmbc7GvVJx5H+lk5Mi5EmbTeox5nMGCsbw==}
+  '@babel/helper-create-class-features-plugin@7.25.9':
+    resolution: {integrity: sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-member-expression-to-functions@7.25.7':
-    resolution: {integrity: sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==}
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.25.7':
-    resolution: {integrity: sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==}
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.25.7':
-    resolution: {integrity: sha512-k/6f8dKG3yDz/qCwSM+RKovjMix563SLxQFo0UhRNo239SP6n9u5/eLtKD6EAjwta2JHJ49CsD8pms2HdNiMMQ==}
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.25.7':
-    resolution: {integrity: sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==}
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.25.7':
-    resolution: {integrity: sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==}
+  '@babel/helper-plugin-utils@7.25.9':
+    resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-replace-supers@7.25.7':
-    resolution: {integrity: sha512-iy8JhqlUW9PtZkd4pHM96v6BdJ66Ba9yWSE4z0W4TvSZwLBPkyDsiIU3ENe4SmrzRBs76F7rQXTy1lYC49n6Lw==}
+  '@babel/helper-replace-supers@7.25.9':
+    resolution: {integrity: sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.25.7':
-    resolution: {integrity: sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==}
+  '@babel/helper-simple-access@7.25.9':
+    resolution: {integrity: sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.25.7':
-    resolution: {integrity: sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.25.7':
-    resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==}
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.25.7':
-    resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
-    engines: {node: '>=6.9.0'}
+  '@babel/helper-string-parser@8.0.0-alpha.13':
+    resolution: {integrity: sha512-YHapkEwMu3nqoikRQhUqPZXUjqRepotzlYww49FWObNaU+9CKYtOJkJBwfY9RmcFDsFqGeLNk+IUSWRPgwhujA==}
+    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
 
-  '@babel/helper-validator-option@7.25.7':
-    resolution: {integrity: sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==}
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.25.7':
-    resolution: {integrity: sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==}
+  '@babel/helper-validator-identifier@8.0.0-alpha.13':
+    resolution: {integrity: sha512-/IZpaAHTp39t0YIZQT51w7xEAPVlEYA9YsxA4tUsveqjvkK47rc/teUWzhQnXKwMwWDiSnP9vLfxYCR2DomrWg==}
+    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
+
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.25.7':
-    resolution: {integrity: sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==}
+  '@babel/helpers@7.26.0':
+    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.25.8':
-    resolution: {integrity: sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==}
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@8.0.0-alpha.12':
-    resolution: {integrity: sha512-AzWmrp4uJ+DcXVH0uoUpJVhRqxNirC0BbXsZ82AQuVod41CoaV5G+cwcvtYusrIIxv7BIJb6ce0dQ9L0wAl1iA==}
-    engines: {node: ^18.20.0 || ^20.10.0 || >=21.0.0}
+  '@babel/parser@8.0.0-alpha.13':
+    resolution: {integrity: sha512-b8jxzP/fDYLjByadJgnXutKZvjXJUIyf0bIWMUIX47jhtbgA3ZFPC0PByLlqD6rKhTbgvuGHZ0GQilMFL5EaOQ==}
+    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
     hasBin: true
 
-  '@babel/plugin-proposal-decorators@7.25.7':
-    resolution: {integrity: sha512-q1mqqqH0e1lhmsEQHV5U8OmdueBC2y0RFr2oUzZoFRtN3MvPmt2fsFRcNQAoGLTSNdHBFUYGnlgcRFhkBbKjPw==}
+  '@babel/plugin-proposal-decorators@7.25.9':
+    resolution: {integrity: sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-decorators@7.25.7':
-    resolution: {integrity: sha512-oXduHo642ZhstLVYTe2z2GSJIruU0c/W3/Ghr6A5yGMsVrvdnxO1z+3pbTcT7f3/Clnt+1z8D/w1r1f1SHaCHw==}
+  '@babel/plugin-syntax-decorators@7.25.9':
+    resolution: {integrity: sha512-ryzI0McXUPJnRCvMo4lumIKZUzhYUO/ScI+Mz4YVaTLt04DHNSjEUjKVvbzQjZFLuod/cYEc07mJWhzl6v4DPg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.25.7':
-    resolution: {integrity: sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==}
+  '@babel/plugin-syntax-import-attributes@7.26.0':
+    resolution: {integrity: sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -631,61 +642,65 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.25.7':
-    resolution: {integrity: sha512-ruZOnKO+ajVL/MVx+PwNBPOkrnXTXoWMtte1MBpegfCArhqOe3Bj52avVj1huLLxNKYKXYaSxZ2F+woK1ekXfw==}
+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-typescript@7.25.7':
-    resolution: {integrity: sha512-rR+5FDjpCHqqZN2bzZm18bVYGaejGq5ZkpVCJLXor/+zlSrSoc4KWcHI0URVWjl/68Dyr1uwZUz/1njycEAv9g==}
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-commonjs@7.25.7':
-    resolution: {integrity: sha512-L9Gcahi0kKFYXvweO6n0wc3ZG1ChpSFdgG+eV1WYZ3/dGbJK7vvk91FgGgak8YwRgrCuihF8tE/Xg07EkL5COg==}
+  '@babel/plugin-transform-modules-commonjs@7.25.9':
+    resolution: {integrity: sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.25.7':
-    resolution: {integrity: sha512-VKlgy2vBzj8AmEzunocMun2fF06bsSWV+FvVXohtL6FGve/+L217qhHxRTVGHEDO/YR8IANcjzgJsd04J8ge5Q==}
+  '@babel/plugin-transform-typescript@7.25.9':
+    resolution: {integrity: sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/preset-typescript@7.25.7':
-    resolution: {integrity: sha512-rkkpaXJZOFN45Fb+Gki0c+KMIglk4+zZXOoMJuyEK8y8Kkc8Jd3BDmP7qPsz0zQMJj+UD7EprF+AqAXcILnexw==}
+  '@babel/preset-typescript@7.26.0':
+    resolution: {integrity: sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.25.7':
-    resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
+  '@babel/runtime@7.26.0':
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/standalone@7.25.8':
-    resolution: {integrity: sha512-UvRanvLCGPRscJ5Rw9o6vUBS5P+E+gkhl6eaokrIN+WM1kUkmj254VZhyihFdDZVDlI3cPcZoakbJJw24QPISw==}
+  '@babel/standalone@7.26.2':
+    resolution: {integrity: sha512-i2VbegsRfwa9yq3xmfDX3tG2yh9K0cCqwpSyVG2nPxifh0EOnucAZUeO/g4lW2Zfg03aPJNtPfxQbDHzXc7H+w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.7':
-    resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.7':
-    resolution: {integrity: sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==}
+  '@babel/traverse@7.25.9':
+    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.8':
-    resolution: {integrity: sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==}
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@8.0.0-alpha.13':
+    resolution: {integrity: sha512-Kt8oBPvsc0h5t06LfUPkBtkPk6t58FzCcpf4Qsjg142gEgaDwFcg+ZPeBCJySLqenk+ISUkdTXsvhbLXj74kIA==}
+    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
+
   '@clack/core@0.3.4':
     resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
 
-  '@clack/prompts@0.7.0':
-    resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
+  '@clack/prompts@0.8.1':
+    resolution: {integrity: sha512-I263nEUNbX4lPTX93trl1fkIvGrGlz6nUYkqOddF0ZmjqcxUgUlXmpUIUqfapirRKJrFddvwF+qdZgg8cSqF7g==}
     bundledDependencies:
       - is-unicode-supported
 
@@ -762,26 +777,26 @@ packages:
     resolution: {integrity: sha512-DSHae2obMSMkAtTBSOulg5X7/z+rGLxcXQIkg3OmWvY6wifojge5uVMydfhUvs7yQj+V7jNmRZ2Xzl8GJyqRgg==}
     engines: {node: '>=v18'}
 
-  '@csstools/selector-resolve-nested@2.0.0':
-    resolution: {integrity: sha512-oklSrRvOxNeeOW1yARd4WNCs/D09cQjunGZUgSq6vM8GpzFswN+8rBZyJA29YFZhOTQ6GFzxgLDNtVbt9wPZMA==}
+  '@csstools/selector-resolve-nested@3.0.0':
+    resolution: {integrity: sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      postcss-selector-parser: ^6.1.0
+      postcss-selector-parser: ^7.0.0
 
-  '@csstools/selector-specificity@4.0.0':
-    resolution: {integrity: sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==}
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
     engines: {node: '>=18'}
     peerDependencies:
-      postcss-selector-parser: ^6.1.0
+      postcss-selector-parser: ^7.0.0
 
-  '@docsearch/css@3.6.2':
-    resolution: {integrity: sha512-vKNZepO2j7MrYBTZIGXvlUOIR+v9KRf70FApRgovWrj3GTs1EITz/Xb0AOlm1xsQBp16clVZj1SY/qaOJbQtZw==}
+  '@docsearch/css@3.8.0':
+    resolution: {integrity: sha512-pieeipSOW4sQ0+bE5UFC51AOZp9NGxg89wAlZ1BAQFaiRAGK1IKUaPQ0UGZeNctJXyqZ1UvBtOQh2HH+U5GtmA==}
 
-  '@docsearch/js@3.6.2':
-    resolution: {integrity: sha512-pS4YZF+VzUogYrkblCucQ0Oy2m8Wggk8Kk7lECmZM60hTbaydSIhJTTiCrmoxtBqV8wxORnOqcqqOfbmkkQEcA==}
+  '@docsearch/js@3.8.0':
+    resolution: {integrity: sha512-PVuV629f5UcYRtBWqK7ID6vNL5647+2ADJypwTjfeBIrJfwPuHtzLy39hMGMfFK+0xgRyhTR0FZ83EkdEraBlg==}
 
-  '@docsearch/react@3.6.2':
-    resolution: {integrity: sha512-rtZce46OOkVflCQH71IdbXSFK+S8iJZlUF56XBW5rIgx/eG5qoomC7Ag3anZson1bBac/JFQn7XOBfved/IMRA==}
+  '@docsearch/react@3.8.0':
+    resolution: {integrity: sha512-WnFK720+iwTVt94CxY3u+FgX6exb3BfN5kE9xUY6uuAH/9W/UFboBZFLlrw/zxFRHoHZCOXRtOylsXF+6LHI+Q==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
       react: '>= 16.8.0 < 19.0.0'
@@ -841,12 +856,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.20.2':
-    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -871,12 +880,6 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.20.2':
-    resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
   '@esbuild/android-arm64@0.21.5':
     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
@@ -901,12 +904,6 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.20.2':
-    resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
   '@esbuild/android-arm@0.21.5':
     resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
@@ -931,12 +928,6 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.20.2':
-    resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
   '@esbuild/android-x64@0.21.5':
     resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
@@ -961,12 +952,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.20.2':
-    resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@esbuild/darwin-arm64@0.21.5':
     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
@@ -991,12 +976,6 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.20.2':
-    resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
   '@esbuild/darwin-x64@0.21.5':
     resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
@@ -1021,12 +1000,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.20.2':
-    resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@esbuild/freebsd-arm64@0.21.5':
     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
@@ -1051,12 +1024,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.20.2':
-    resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@esbuild/freebsd-x64@0.21.5':
     resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
@@ -1081,12 +1048,6 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.20.2':
-    resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
   '@esbuild/linux-arm64@0.21.5':
     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
@@ -1111,12 +1072,6 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.20.2':
-    resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-arm@0.21.5':
     resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
@@ -1141,12 +1096,6 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.20.2':
-    resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.21.5':
     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
@@ -1171,12 +1120,6 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.20.2':
-    resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
   '@esbuild/linux-loong64@0.21.5':
     resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
@@ -1201,12 +1144,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.20.2':
-    resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
   '@esbuild/linux-mips64el@0.21.5':
     resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
@@ -1231,12 +1168,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.20.2':
-    resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
   '@esbuild/linux-ppc64@0.21.5':
     resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
@@ -1261,12 +1192,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.20.2':
-    resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
   '@esbuild/linux-riscv64@0.21.5':
     resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
@@ -1291,12 +1216,6 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.20.2':
-    resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
   '@esbuild/linux-s390x@0.21.5':
     resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
@@ -1321,12 +1240,6 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.20.2':
-    resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
   '@esbuild/linux-x64@0.21.5':
     resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
@@ -1351,12 +1264,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.20.2':
-    resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
   '@esbuild/netbsd-x64@0.21.5':
     resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
@@ -1393,12 +1300,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.20.2':
-    resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
   '@esbuild/openbsd-x64@0.21.5':
     resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
@@ -1423,12 +1324,6 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.20.2':
-    resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
   '@esbuild/sunos-x64@0.21.5':
     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
@@ -1453,12 +1348,6 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.20.2':
-    resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
   '@esbuild/win32-arm64@0.21.5':
     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
@@ -1483,12 +1372,6 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.20.2':
-    resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
   '@esbuild/win32-ia32@0.21.5':
     resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
@@ -1513,12 +1396,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.20.2':
-    resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
   '@esbuild/win32-x64@0.21.5':
     resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
@@ -1537,24 +1414,24 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-plugin-eslint-comments@4.4.0':
-    resolution: {integrity: sha512-yljsWl5Qv3IkIRmJ38h3NrHXFCm4EUl55M8doGTF6hvzvFF8kRpextgSrg2dwHev9lzBZyafCr9RelGIyQm6fw==}
+  '@eslint-community/eslint-plugin-eslint-comments@4.4.1':
+    resolution: {integrity: sha512-lb/Z/MzbTf7CaVYM9WCFNQZ4L1yi3ev2fsFPF99h31ljhSEyUoyEsKsNWiU+qD1glbYTDJdqgyaLKtyTkkqtuQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.11.1':
-    resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.1':
-    resolution: {integrity: sha512-JbHG2TWuCeNzh87fXo+/46Z1LEo9DBA9T188d0fZgGxAD+cNyS6sx9fdiyxjGPBMyQVRlCutTByZ6a5+YMkF7g==}
+  '@eslint/compat@1.2.3':
+    resolution: {integrity: sha512-wlZhwlDFxkxIZ571aH0FoK4h4Vwx7P3HJx62Gp8hTc10bfpwT2x0nULuAHmQSJBOWPgPeVf+9YtnD4j50zVHmA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -1562,20 +1439,20 @@ packages:
       eslint:
         optional: true
 
-  '@eslint/config-array@0.18.0':
-    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
+  '@eslint/config-array@0.19.0':
+    resolution: {integrity: sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.7.0':
-    resolution: {integrity: sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==}
+  '@eslint/core@0.9.0':
+    resolution: {integrity: sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
+  '@eslint/eslintrc@3.2.0':
+    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.13.0':
-    resolution: {integrity: sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==}
+  '@eslint/js@9.15.0':
+    resolution: {integrity: sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/markdown@6.2.1':
@@ -1586,19 +1463,15 @@ packages:
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.1':
-    resolution: {integrity: sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==}
+  '@eslint/plugin-kit@0.2.3':
+    resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@fastify/busboy@2.1.1':
-    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
-    engines: {node: '>=14'}
-
   '@floating-ui/core@1.6.8':
     resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
 
-  '@floating-ui/dom@1.6.11':
-    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
 
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
@@ -1609,12 +1482,12 @@ packages:
   '@formkit/auto-animate@0.8.2':
     resolution: {integrity: sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==}
 
-  '@humanfs/core@0.19.0':
-    resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  '@humanfs/node@0.16.5':
-    resolution: {integrity: sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==}
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
     engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
@@ -1625,11 +1498,15 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}
+
   '@iconify-json/gravity-ui@1.2.2':
     resolution: {integrity: sha512-9PNVp7jbDW/cYTLCP2p6e57T/O4KiWZDhtsi9tHmthZVsNXIdxA9kh5VBT/VUwBqG9rPictI5cb6Fkf6U3yz/Q==}
 
-  '@iconify-json/lucide@1.2.10':
-    resolution: {integrity: sha512-cR1xpRJ4dnoXlC0ShDjzbrZyu+ICH4OUaYl7S51MhZUO1H040s7asVqv0LsDbofSLDuzWkHCLsBabTTRL0mCUg==}
+  '@iconify-json/lucide@1.2.15':
+    resolution: {integrity: sha512-mbHlTJRqOrqRk8E8xnpPzqZwCqsKNB9ZyITqDEYEtePEGxki9VJWJMU8JcNqRKDfPS9vlFsjwepUuOGgusmZUA==}
 
   '@iconify-json/ph@1.2.1':
     resolution: {integrity: sha512-x0DNfwWrS18dbsBYOq3XGiZnGz4CgRyC+YSl/TZvMQiKhIUl1woWqUbMYqqfMNUBzjyk7ulvaRovpRsIlqIf8g==}
@@ -1637,14 +1514,14 @@ packages:
   '@iconify-json/radix-icons@1.2.1':
     resolution: {integrity: sha512-glzHFq3Sj9QKUQG7u2dnlC+KPJGpGM1GhyUIrFFWhXqr9CZgkUPnF5n/6YlbCkYGMa+feSwdhwroLTfKvaAaVA==}
 
-  '@iconify-json/ri@1.2.1':
-    resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
+  '@iconify-json/ri@1.2.3':
+    resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
-  '@iconify-json/simple-icons@1.2.8':
-    resolution: {integrity: sha512-AzBpj2XAcWQbiy3i0rLq6lFw0pLT8lc/ptdsBc97N8KFKyXW4d62EK/EhAd82Ld0WsO+1exOvnfeIiX2FPsdzw==}
+  '@iconify-json/simple-icons@1.2.11':
+    resolution: {integrity: sha512-AHCGDtBRqP+JzAbBzgO8uN/08CXxEmuaC6lQQZ3b5burKhRU12AJnJczwbUw2K5Mb/U85EpSUNhYMG3F28b8NA==}
 
-  '@iconify-json/tabler@1.2.5':
-    resolution: {integrity: sha512-BDDLgDCbJ2btwi6cPmBL04QyPyNmWy6H13ynUAX48xxpxqUuG+hT+yrqL+RCugFimrvuhcecbSfEKnFc0BW1Ng==}
+  '@iconify-json/tabler@1.2.8':
+    resolution: {integrity: sha512-xvi/UKhLiFRnutSo6xuHxvOGmskYEoC2St4WDVsU9WAW1DRG1EkBUk/Zy1TpeSsBKMQfyqtdjjx9Cf4ZezOK2w==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -1803,8 +1680,8 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  '@nuxt/kit@3.13.2':
-    resolution: {integrity: sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==}
+  '@nuxt/kit@3.14.159':
+    resolution: {integrity: sha512-ZqxsCI1NKV/gjfEUUZjMcr82sg0MKYZOuyB6bu9QY5Zr7NGpfIZY/z5Z822AKTmFxKGChnuz9M0UaS4ze6p42g==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   '@nuxt/module-builder@0.8.4':
@@ -1814,8 +1691,8 @@ packages:
       '@nuxt/kit': ^3.13.1
       nuxi: ^3.13.1
 
-  '@nuxt/schema@3.13.2':
-    resolution: {integrity: sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==}
+  '@nuxt/schema@3.14.159':
+    resolution: {integrity: sha512-ggXA3F2f9udQoEy5WwrY6bTMvpDaErUYRLSEzdMqqCqjOQ5manfFgfuScGj3ooZiXLIX2TGLVTzcll4nnpDlnQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
   '@nuxt/telemetry@2.6.0':
@@ -1863,14 +1740,14 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/vite-builder@3.13.2':
-    resolution: {integrity: sha512-3dzc3YH3UeTmzGtCevW1jTq0Q8/cm+yXqo/VS/EFM3aIO/tuNPS88is8ZF2YeBButFnLFllq/QenziPbq0YD6Q==}
+  '@nuxt/vite-builder@3.14.159':
+    resolution: {integrity: sha512-V3FJnDNR3tCAYeYmxxPsAWuMq6z5mZi8KPWO+lrO/Z8LqfD3+uYpluzUtzj0S1IIhCERmHe4rUNzr67RqSTL2Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
 
-  '@nuxtjs/color-mode@3.5.1':
-    resolution: {integrity: sha512-GRHF3WUwX6fXIiRVlngNq1nVDwrVuP6dWX1DRmox3QolzX0eH1oJEcFr/lAm1nkT71JVGb8mszho9w+yHJbePw==}
+  '@nuxtjs/color-mode@3.5.2':
+    resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
 
   '@nuxtjs/tailwindcss@6.12.2':
     resolution: {integrity: sha512-qPJiFH67CkTj/2kBGBzqXihOD1rQXMsbVS4vdQvfBxOBLPfGhU1yw7AATdhPl2BBjO2krjJLuZj39t7dnDYOwg==}
@@ -1878,86 +1755,92 @@ packages:
   '@oxc-parser/wasm@0.29.0':
     resolution: {integrity: sha512-Ks5yFtJHypJZUdSNLImwtfkDt0/8ll9CDPyfmldhudtKB/1o6F/WQGWA4Oo+bCskDIp2MPKc3HfHccN3ALhtSg==}
 
-  '@parcel/watcher-android-arm64@2.4.1':
-    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
+  '@parcel/watcher-android-arm64@2.5.0':
+    resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
-    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
+  '@parcel/watcher-darwin-arm64@2.5.0':
+    resolution: {integrity: sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.4.1':
-    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
+  '@parcel/watcher-darwin-x64@2.5.0':
+    resolution: {integrity: sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
-    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
+  '@parcel/watcher-freebsd-x64@2.5.0':
+    resolution: {integrity: sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
-    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
+  '@parcel/watcher-linux-arm-glibc@2.5.0':
+    resolution: {integrity: sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
-    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
+  '@parcel/watcher-linux-arm-musl@2.5.0':
+    resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.0':
+    resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
-    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
+  '@parcel/watcher-linux-arm64-musl@2.5.0':
+    resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
-    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
+  '@parcel/watcher-linux-x64-glibc@2.5.0':
+    resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
-    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
+  '@parcel/watcher-linux-x64-musl@2.5.0':
+    resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-wasm@2.4.1':
-    resolution: {integrity: sha512-/ZR0RxqxU/xxDGzbzosMjh4W6NdYFMqq2nvo2b8SLi7rsl/4jkL8S5stIikorNkdR50oVDvqb/3JT05WM+CRRA==}
+  '@parcel/watcher-wasm@2.5.0':
+    resolution: {integrity: sha512-Z4ouuR8Pfggk1EYYbTaIoxc+Yv4o7cGQnH0Xy8+pQ+HbiW+ZnwhcD2LPf/prfq1nIWpAxjOkQ8uSMFWMtBLiVQ==}
     engines: {node: '>= 10.0.0'}
     bundledDependencies:
       - napi-wasm
 
-  '@parcel/watcher-win32-arm64@2.4.1':
-    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
+  '@parcel/watcher-win32-arm64@2.5.0':
+    resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.4.1':
-    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
+  '@parcel/watcher-win32-ia32@2.5.0':
+    resolution: {integrity: sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.4.1':
-    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
+  '@parcel/watcher-win32-x64@2.5.0':
+    resolution: {integrity: sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher@2.4.1':
-    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
+  '@parcel/watcher@2.5.0':
+    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
   '@pkgjs/parseargs@0.11.0':
@@ -1979,6 +1862,16 @@ packages:
     peerDependencies:
       vue: '>= 3'
 
+  '@redocly/ajv@8.11.2':
+    resolution: {integrity: sha512-io1JpnwtIcvojV7QKDUSIuMN/ikdOUd1ReEnUnMKGfDVridQZ31J0MmIuqwuRjWDZfmvr+Q0MqCcfHM2gTivOg==}
+
+  '@redocly/config@0.16.0':
+    resolution: {integrity: sha512-t9jnODbUcuANRSl/K4L9nb12V+U5acIHnVSl26NWrtSdDZVtoqUXk2yGFPZzohYf62cCfEQUT8ouJ3bhPfpnJg==}
+
+  '@redocly/openapi-core@1.25.11':
+    resolution: {integrity: sha512-bH+a8izQz4fnKROKoX3bEU8sQ9rjvEIZOqU6qTmxlhOJ0NsKa5e+LmU18SV0oFeg5YhWQhhEDihXkvKJ1wMMNQ==}
+    engines: {node: '>=14.19.0', npm: '>=7.0.0'}
+
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
@@ -1997,6 +1890,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-commonjs@28.0.1':
+    resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
@@ -2033,6 +1935,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-replace@6.0.1':
+    resolution: {integrity: sha512-2sPh9b73dj5IxuMmDAsQWVFT7mR+yoHweBaXG2W/R8vQ+IWZlnaI7BR7J6EguVQUp1hd8Z7XuozpDjEKQAAC2Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-terser@0.4.4':
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
@@ -2046,8 +1957,8 @@ packages:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
 
-  '@rollup/pluginutils@5.1.2':
-    resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==}
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -2055,112 +1966,110 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.24.0':
-    resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
+  '@rollup/rollup-android-arm-eabi@4.27.3':
+    resolution: {integrity: sha512-EzxVSkIvCFxUd4Mgm4xR9YXrcp976qVaHnqom/Tgm+vU79k4vV4eYTjmRvGfeoW8m9LVcsAy/lGjcgVegKEhLQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.24.0':
-    resolution: {integrity: sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==}
+  '@rollup/rollup-android-arm64@4.27.3':
+    resolution: {integrity: sha512-LJc5pDf1wjlt9o/Giaw9Ofl+k/vLUaYsE2zeQGH85giX2F+wn/Cg8b3c5CDP3qmVmeO5NzwVUzQQxwZvC2eQKw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.24.0':
-    resolution: {integrity: sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==}
+  '@rollup/rollup-darwin-arm64@4.27.3':
+    resolution: {integrity: sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.24.0':
-    resolution: {integrity: sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==}
+  '@rollup/rollup-darwin-x64@4.27.3':
+    resolution: {integrity: sha512-xW//zjJMlJs2sOrCmXdB4d0uiilZsOdlGQIC/jjmMWT47lkLLoB1nsNhPUcnoqyi5YR6I4h+FjBpILxbEy8JRg==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
-    resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==}
+  '@rollup/rollup-freebsd-arm64@4.27.3':
+    resolution: {integrity: sha512-58E0tIcwZ+12nK1WiLzHOD8I0d0kdrY/+o7yFVPRHuVGY3twBwzwDdTIBGRxLmyjciMYl1B/U515GJy+yn46qw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.27.3':
+    resolution: {integrity: sha512-78fohrpcVwTLxg1ZzBMlwEimoAJmY6B+5TsyAZ3Vok7YabRBUvjYTsRXPTjGEvv/mfgVBepbW28OlMEz4w8wGA==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.27.3':
+    resolution: {integrity: sha512-h2Ay79YFXyQi+QZKo3ISZDyKaVD7uUvukEHTOft7kh00WF9mxAaxZsNs3o/eukbeKuH35jBvQqrT61fzKfAB/Q==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
-    resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==}
+  '@rollup/rollup-linux-arm-musleabihf@4.27.3':
+    resolution: {integrity: sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykPxSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.24.0':
-    resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==}
+  '@rollup/rollup-linux-arm64-gnu@4.27.3':
+    resolution: {integrity: sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZpPx0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.24.0':
-    resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==}
+  '@rollup/rollup-linux-arm64-musl@4.27.3':
+    resolution: {integrity: sha512-TKxiOvBorYq4sUpA0JT+Fkh+l+G9DScnG5Dqx7wiiqVMiRSkzTclP35pE6eQQYjP4Gc8yEkJGea6rz4qyWhp3g==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
-    resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.27.3':
+    resolution: {integrity: sha512-v2M/mPvVUKVOKITa0oCFksnQQ/TqGrT+yD0184/cWHIu0LoIuYHwox0Pm3ccXEz8cEQDLk6FPKd1CCm+PlsISw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
-    resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.27.3':
+    resolution: {integrity: sha512-LdrI4Yocb1a/tFVkzmOE5WyYRgEBOyEhWYJe4gsDWDiwnjYKjNs7PS6SGlTDB7maOHF4kxevsuNBl2iOcj3b4A==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.24.0':
-    resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==}
+  '@rollup/rollup-linux-s390x-gnu@4.27.3':
+    resolution: {integrity: sha512-d4wVu6SXij/jyiwPvI6C4KxdGzuZOvJ6y9VfrcleHTwo68fl8vZC5ZYHsCVPUi4tndCfMlFniWgwonQ5CUpQcA==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.24.0':
-    resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==}
+  '@rollup/rollup-linux-x64-gnu@4.27.3':
+    resolution: {integrity: sha512-/6bn6pp1fsCGEY5n3yajmzZQAh+mW4QPItbiWxs69zskBzJuheb3tNynEjL+mKOsUSFK11X4LYF2BwwXnzWleA==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.24.0':
-    resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==}
+  '@rollup/rollup-linux-x64-musl@4.27.3':
+    resolution: {integrity: sha512-nBXOfJds8OzUT1qUreT/en3eyOXd2EH5b0wr2bVB5999qHdGKkzGzIyKYaKj02lXk6wpN71ltLIaQpu58YFBoQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.24.0':
-    resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.27.3':
+    resolution: {integrity: sha512-ogfbEVQgIZOz5WPWXF2HVb6En+kWzScuxJo/WdQTqEgeyGkaa2ui5sQav9Zkr7bnNCLK48uxmmK0TySm22eiuw==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.24.0':
-    resolution: {integrity: sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.27.3':
+    resolution: {integrity: sha512-ecE36ZBMLINqiTtSNQ1vzWc5pXLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.24.0':
-    resolution: {integrity: sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==}
+  '@rollup/rollup-win32-x64-msvc@4.27.3':
+    resolution: {integrity: sha512-vliZLrDmYKyaUoMzEbMTg2JkerfBjn03KmAw9CykO0Zzkzoyd7o3iZNam/TpyWNjNT+Cz2iO3P9Smv2wgrR+Eg==}
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.22.0':
-    resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==}
-
-  '@shikijs/core@1.22.1':
-    resolution: {integrity: sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==}
-
-  '@shikijs/engine-javascript@1.22.0':
-    resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==}
-
-  '@shikijs/engine-javascript@1.22.1':
-    resolution: {integrity: sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==}
-
-  '@shikijs/engine-oniguruma@1.22.0':
-    resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==}
+  '@shikijs/core@1.23.1':
+    resolution: {integrity: sha512-NuOVgwcHgVC6jBVH5V7iblziw6iQbWWHrj5IlZI3Fqu2yx9awH7OIQkXIcsHsUmY19ckwSgUMgrqExEyP5A0TA==}
 
-  '@shikijs/engine-oniguruma@1.22.1':
-    resolution: {integrity: sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==}
+  '@shikijs/engine-javascript@1.23.1':
+    resolution: {integrity: sha512-i/LdEwT5k3FVu07SiApRFwRcSJs5QM9+tod5vYCPig1Ywi8GR30zcujbxGQFJHwYD7A5BUqagi8o5KS+LEVgBg==}
 
-  '@shikijs/transformers@1.22.0':
-    resolution: {integrity: sha512-k7iMOYuGQA62KwAuJOQBgH2IQb5vP8uiB3lMvAMGUgAMMurePOx3Z7oNqJdcpxqZP6I9cc7nc4DNqSKduCxmdg==}
+  '@shikijs/engine-oniguruma@1.23.1':
+    resolution: {integrity: sha512-KQ+lgeJJ5m2ISbUZudLR1qHeH3MnSs2mjFg7bnencgs5jDVPeJ2NVDJ3N5ZHbcTsOIh0qIueyAJnwg7lg7kwXQ==}
 
-  '@shikijs/types@1.22.0':
-    resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==}
+  '@shikijs/transformers@1.23.1':
+    resolution: {integrity: sha512-yQ2Cn0M9i46p30KwbyIzLvKDk+dQNU+lj88RGO0XEj54Hn4Cof1bZoDb9xBRWxFE4R8nmK63w7oHnJwvOtt0NQ==}
 
-  '@shikijs/types@1.22.1':
-    resolution: {integrity: sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==}
+  '@shikijs/types@1.23.1':
+    resolution: {integrity: sha512-98A5hGyEhzzAgQh2dAeHKrWW4HfCMeoFER2z16p5eJ+vmPeF6lZ/elEne6/UCU551F/WqkopqRsr1l2Yu6+A0g==}
 
   '@shikijs/vscode-textmate@9.3.0':
     resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
@@ -2172,21 +2081,21 @@ packages:
   '@stackblitz/sdk@1.11.0':
     resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
 
-  '@stylistic/eslint-plugin@2.9.0':
-    resolution: {integrity: sha512-OrDyFAYjBT61122MIY1a3SfEgy3YCMgt2vL4eoPmvTwDBwyQhAXurxNQznlRD/jESNfYWfID8Ej+31LljvF7Xg==}
+  '@stylistic/eslint-plugin@2.11.0':
+    resolution: {integrity: sha512-PNRHbydNG5EH8NK4c+izdJlxajIR6GxcUhzsYNRsn6Myep4dsZt0qFCz3rCPnkvgO5FYibDcMqgNHUT+zvjYZw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=8.40.0'
 
-  '@swc/helpers@0.5.13':
-    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
   '@tanstack/table-core@8.20.5':
     resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
     engines: {node: '>=12'}
 
-  '@tanstack/virtual-core@3.10.8':
-    resolution: {integrity: sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==}
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
 
   '@tanstack/vue-table@8.20.5':
     resolution: {integrity: sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==}
@@ -2194,8 +2103,8 @@ packages:
     peerDependencies:
       vue: '>=3.2'
 
-  '@tanstack/vue-virtual@3.10.8':
-    resolution: {integrity: sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ==}
+  '@tanstack/vue-virtual@3.10.9':
+    resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==}
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
 
@@ -2353,8 +2262,8 @@ packages:
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
-  '@types/lodash@4.17.12':
-    resolution: {integrity: sha512-sviUmCE8AYdaF/KIHLDJBQgeYzPBI0vf/17NaYehBJfYD1j6/L95Slh07NlyK2iNyBNaEkb3En2jRt+a8y3xZQ==}
+  '@types/lodash@4.17.13':
+    resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
 
   '@types/mapbox__point-geometry@0.1.4':
     resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
@@ -2374,11 +2283,11 @@ packages:
   '@types/ms@0.7.34':
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
 
-  '@types/node@20.16.13':
-    resolution: {integrity: sha512-GjQ7im10B0labo8ZGXDGROUl9k0BNyDgzfGpb4g/cl+4yYDWVKcozANF4FGr4/p0O/rAkQClM6Wiwkije++1Tg==}
+  '@types/node@20.17.6':
+    resolution: {integrity: sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==}
 
-  '@types/node@22.7.7':
-    resolution: {integrity: sha512-SRxCrrg9CL/y54aiMCG3edPKdprgMVGDXjA3gB8UmmBW5TcXzRUYAh8EWzTnSJFAd1rgImPELza+A3bJ+qxz8Q==}
+  '@types/node@22.9.0':
+    resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -2431,8 +2340,8 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  '@typescript-eslint/eslint-plugin@8.10.0':
-    resolution: {integrity: sha512-phuB3hoP7FFKbRXxjl+DRlQDuJqhpOnm5MmtROXyWi3uS/Xg2ZXqiQfcG2BJHiN4QKyzdOJi3NEn/qTnjUlkmQ==}
+  '@typescript-eslint/eslint-plugin@8.15.0':
+    resolution: {integrity: sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
@@ -2442,8 +2351,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@8.10.0':
-    resolution: {integrity: sha512-E24l90SxuJhytWJ0pTQydFT46Nk0Z+bsLKo/L8rtQSL93rQ6byd1V/QbDpHUTdLPOMsBCcYXZweADNCfOCmOAg==}
+  '@typescript-eslint/parser@8.15.0':
+    resolution: {integrity: sha512-7n59qFpghG4uazrF9qtGKBZXn7Oz4sOMm8dwNWDQY96Xlm2oX67eipqcblDj+oY1lLCbf1oltMZFpUso66Kl1A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2452,25 +2361,26 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/scope-manager@8.10.0':
-    resolution: {integrity: sha512-AgCaEjhfql9MDKjMUxWvH7HjLeBqMCBfIaBbzzIcBbQPZE7CPh1m6FF+L75NUMJFMLYhCywJXIDEMa3//1A0dw==}
+  '@typescript-eslint/scope-manager@8.15.0':
+    resolution: {integrity: sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.10.0':
-    resolution: {integrity: sha512-PCpUOpyQSpxBn230yIcK+LeCQaXuxrgCm2Zk1S+PTIRJsEfU6nJ0TtwyH8pIwPK/vJoA+7TZtzyAJSGBz+s/dg==}
+  '@typescript-eslint/type-utils@8.15.0':
+    resolution: {integrity: sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@typescript-eslint/types@8.10.0':
-    resolution: {integrity: sha512-k/E48uzsfJCRRbGLapdZgrX52csmWJ2rcowwPvOZ8lwPUv3xW6CcFeJAXgx4uJm+Ge4+a4tFOkdYvSpxhRhg1w==}
+  '@typescript-eslint/types@8.15.0':
+    resolution: {integrity: sha512-n3Gt8Y/KyJNe0S3yDCD2RVKrHBC4gTUcLTebVBXacPy091E6tNspFLKRXlk3hwT4G55nfr1n2AdFqi/XMxzmPQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.10.0':
-    resolution: {integrity: sha512-3OE0nlcOHaMvQ8Xu5gAfME3/tWVDpb/HxtpUZ1WeOAksZ/h/gwrBzCklaGzwZT97/lBbbxJ16dMA98JMEngW4w==}
+  '@typescript-eslint/typescript-estree@8.15.0':
+    resolution: {integrity: sha512-1eMp2JgNec/niZsR7ioFBlsh/Fk0oJbhaqO0jRyQBMgkz7RrFfkqF9lYYmBoGBaSiLnu8TAPQTwoTUiSTUW9dg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
@@ -2478,33 +2388,37 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/utils@8.10.0':
-    resolution: {integrity: sha512-Oq4uZ7JFr9d1ZunE/QKy5egcDRXT/FrS2z/nlxzPua2VHFtmMvFNDvpq1m/hq0ra+T52aUezfcjGRIB7vNJF9w==}
+  '@typescript-eslint/utils@8.15.0':
+    resolution: {integrity: sha512-k82RI9yGhr0QM3Dnq+egEpz9qB6Un+WLYhmoNcvl8ltMEededhh7otBVVIDDsEEttauwdY/hQoSsOv13lxrFzQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  '@typescript-eslint/visitor-keys@8.10.0':
-    resolution: {integrity: sha512-k8nekgqwr7FadWk548Lfph6V3r9OVqjzAIVskE7orMZR23cGJjAOVazsZSJW+ElyjfTM4wx/1g88Mi70DDtG9A==}
+  '@typescript-eslint/visitor-keys@8.15.0':
+    resolution: {integrity: sha512-h8vYOulWec9LhpwfAdZf2bjr8xIp0KNKnpgqSz0qqYYKAW/QZKw3ktRndbiAtUz4acH4QLQavwZBYCc0wulA/Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@unhead/dom@1.11.10':
-    resolution: {integrity: sha512-nL1mdRzYVATZIYauK15zOI2YyM3YxCLfhbTqljEjDFJeiJUzTTi+a//5FHiUk84ewSucFnrwHNey/pEXFlyY1A==}
+  '@unhead/dom@1.11.11':
+    resolution: {integrity: sha512-4YwziCH5CmjvUzSGdZ4Klj6BqhLSTNZooA9kt47yDxj4Qw9uHqVnXwWWupYsVdIYPNsw1tR2AkHveg82y1Fn3A==}
 
-  '@unhead/schema@1.11.10':
-    resolution: {integrity: sha512-lXh7cm5XtFaw3gc+ZVXTSfIHXiBpAywbjtEiOsz5TR4GxOjj2rtfOAl4C3Difk1yupP6L2otYmOZdn/i8EXSJg==}
+  '@unhead/schema@1.11.11':
+    resolution: {integrity: sha512-xSGsWHPBYcMV/ckQeImbrVu6ddeRnrdDCgXUKv3xIjGBY+ob/96V80lGX8FKWh8GwdFSwhblISObKlDAt5K9ZQ==}
 
-  '@unhead/shared@1.11.10':
-    resolution: {integrity: sha512-YQgZcOyo1id7drUeDPGn0R83pirvIcV+Car3/m7ZfCLL1Syab6uXmRckVRd69yVbUL4eirIm9IzzmvzM/OuGuw==}
+  '@unhead/shared@1.11.11':
+    resolution: {integrity: sha512-RfdvUskPn90ipO+PmR98jKZ8Lsx1uuzscOenO5xcrMrtWGhlLWaEBIrbvFOvX5PZ/u8/VNMJChTXGDUjEtHmlg==}
 
-  '@unhead/ssr@1.11.10':
-    resolution: {integrity: sha512-tj5zeJtCbSktNNqsdL+6h6OIY7dYO+2HSiC1VbofGYsoG7nDNXMypkrW/cTMqZVr5/gWhKaUgFQALjm28CflYg==}
+  '@unhead/ssr@1.11.11':
+    resolution: {integrity: sha512-NQC8y+4ldwkMr3x8WFwv3+OR6g+Sj7dwL6J/3ST25KnvlwDSub2KGbnm2hF1x8vTpTmXTVxMA3GDRL9MRfLvMg==}
 
-  '@unhead/vue@1.11.10':
-    resolution: {integrity: sha512-v6ddp4YEQCNILhYrx37Yt0GKRIFeTrb3VSmTbjh+URT+ua1mwgmNFTfl2ZldtTtri3tEkwSG1/5wLRq20ma70g==}
+  '@unhead/vue@1.11.11':
+    resolution: {integrity: sha512-AxsHHauZ+w0m2irwDHqkc3GdNChMLBtolk8CN3IAZM6vTwH0EbPXlFCFcIk4WwkH0opG+R2GlKTThr5H0HLm7g==}
     peerDependencies:
       vue: '>=2.7 || >=3'
 
@@ -2528,30 +2442,30 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@vee-validate/zod@4.14.3':
-    resolution: {integrity: sha512-x33wzKCc7G9jB+U9iypw/7KAzoNCr+UzgN2O3wXIocKEDF3hoauXrB3/8Yk5KfPwURCHQugkoJxnKLmSZRQrDQ==}
+  '@vee-validate/zod@4.14.7':
+    resolution: {integrity: sha512-UD0Tfyz1cKKd7BinnUztqKL+oeMjg/T4ZEguN/uZV4DsR9z7gdrD0lOuOU7aVl9UpVK6NM7MhDka35Lj7b/DTw==}
 
-  '@vercel/nft@0.26.5':
-    resolution: {integrity: sha512-NHxohEqad6Ra/r4lGknO52uc/GrWILXAMs1BB4401GTqww0fw1bAqzpG1XHuDO+dprg4GvsD9ZLLSsdo78p9hQ==}
+  '@vercel/nft@0.27.6':
+    resolution: {integrity: sha512-mwuyUxskdcV8dd7N7JnxBgvFEz1D9UOePI/WyLLzktv6HSCwgPNQGit/UJ2IykAWGlypKw4pBQjOKWvIbXITSg==}
     engines: {node: '>=16'}
     hasBin: true
 
-  '@vitejs/plugin-vue-jsx@4.0.1':
-    resolution: {integrity: sha512-7mg9HFGnFHMEwCdB6AY83cVK4A6sCqnrjFYF4WIlebYAQVVJ/sC/CiTruVdrRlhrFoeZ8rlMxY9wYpPTIRhhAg==}
+  '@vitejs/plugin-vue-jsx@4.1.0':
+    resolution: {integrity: sha512-KuRejz7KAFvhXDzOudlaS2IyygAwoAEEMtHAdcRSy/8cA5iKH043Qudcz48zsC0M0vvN5iKwIwNMuWbBYn6/Yg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.0.0
 
-  '@vitejs/plugin-vue@5.1.4':
-    resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
+  '@vitejs/plugin-vue@5.2.0':
+    resolution: {integrity: sha512-7n7KdUEtx/7Yl7I/WVAMZ1bEb0eVvXF3ummWTeLcs/9gvo9pJhuLdouSXGjdZ/MKD1acf1I272+X0RMua4/R3g==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
 
-  '@vitest/eslint-plugin@1.1.7':
-    resolution: {integrity: sha512-pTWGW3y6lH2ukCuuffpan6kFxG6nIuoesbhMiQxskyQMRcCN5t9SXsKrNHvEw3p8wcCsgJoRqFZVkOTn6TjclA==}
+  '@vitest/eslint-plugin@1.1.10':
+    resolution: {integrity: sha512-uScH5Kz5v32vvtQYB2iodpoPg2mGASK+VKpjlc2IUgE0+16uZKqVKi2vQxjxJ6sMCQLBs4xhBFZlmZBszsmfKQ==}
     peerDependencies:
       '@typescript-eslint/utils': '>= 8.0'
       eslint: '>= 8.57.0'
@@ -2563,14 +2477,13 @@ packages:
       vitest:
         optional: true
 
-  '@vitest/expect@2.1.3':
-    resolution: {integrity: sha512-SNBoPubeCJhZ48agjXruCI57DvxcsivVDdWz+SSsmjTT4QN/DfHk3zB/xKsJqMs26bLZ/pNRLnCf0j679i0uWQ==}
+  '@vitest/expect@2.1.5':
+    resolution: {integrity: sha512-nZSBTW1XIdpZvEJyoP/Sy8fUg0b8od7ZpGDkTUcfJ7wz/VoZAFzFfLyxVxGFhUjJzhYqSbIpfMtl/+k/dpWa3Q==}
 
-  '@vitest/mocker@2.1.3':
-    resolution: {integrity: sha512-eSpdY/eJDuOvuTA3ASzCjdithHa+GIF1L4PqtEELl6Qa3XafdMLBpBlZCIUCX2J+Q6sNmjmxtosAG62fK4BlqQ==}
+  '@vitest/mocker@2.1.5':
+    resolution: {integrity: sha512-XYW6l3UuBmitWqSUXTNXcVBUCRytDogBsWuNXQijc00dtnU/9OqpXWp4OJroVrad/gLIomAq9aW8yWDBtMthhQ==}
     peerDependencies:
-      '@vitest/spy': 2.1.3
-      msw: ^2.3.5
+      msw: ^2.4.9
       vite: ^5.0.0
     peerDependenciesMeta:
       msw:
@@ -2578,34 +2491,34 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.1.3':
-    resolution: {integrity: sha512-XH1XdtoLZCpqV59KRbPrIhFCOO0hErxrQCMcvnQete3Vibb9UeIOX02uFPfVn3Z9ZXsq78etlfyhnkmIZSzIwQ==}
+  '@vitest/pretty-format@2.1.5':
+    resolution: {integrity: sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==}
 
-  '@vitest/runner@2.1.3':
-    resolution: {integrity: sha512-JGzpWqmFJ4fq5ZKHtVO3Xuy1iF2rHGV4d/pdzgkYHm1+gOzNZtqjvyiaDGJytRyMU54qkxpNzCx+PErzJ1/JqQ==}
+  '@vitest/runner@2.1.5':
+    resolution: {integrity: sha512-pKHKy3uaUdh7X6p1pxOkgkVAFW7r2I818vHDthYLvUyjRfkKOU6P45PztOch4DZarWQne+VOaIMwA/erSSpB9g==}
 
-  '@vitest/snapshot@2.1.3':
-    resolution: {integrity: sha512-qWC2mWc7VAXmjAkEKxrScWHWFyCQx/cmiZtuGqMi+WwqQJ2iURsVY4ZfAK6dVo6K2smKRU6l3BPwqEBvhnpQGg==}
+  '@vitest/snapshot@2.1.5':
+    resolution: {integrity: sha512-zmYw47mhfdfnYbuhkQvkkzYroXUumrwWDGlMjpdUr4jBd3HZiV2w7CQHj+z7AAS4VOtWxI4Zt4bWt4/sKcoIjg==}
 
-  '@vitest/spy@2.1.3':
-    resolution: {integrity: sha512-Nb2UzbcUswzeSP7JksMDaqsI43Sj5+Kry6ry6jQJT4b5gAK+NS9NED6mDb8FlMRCX8m5guaHCDZmqYMMWRy5nQ==}
+  '@vitest/spy@2.1.5':
+    resolution: {integrity: sha512-aWZF3P0r3w6DiYTVskOYuhBc7EMc3jvn1TkBg8ttylFFRqNN2XGD7V5a4aQdk6QiUzZQ4klNBSpCLJgWNdIiNw==}
 
-  '@vitest/ui@2.1.3':
-    resolution: {integrity: sha512-2XwTrHVJw3t9NYES26LQUYy51ZB8W4bRPgqUH2Eyda3kIuOlYw1ZdPNU22qcVlUVx4WKgECFQOSXuopsczuVjQ==}
+  '@vitest/ui@2.1.5':
+    resolution: {integrity: sha512-ERgKkDMTfngrZip6VG5h8L9B5D0AH/4+bga4yR1UzGH7c2cxv3LWogw2Dvuwr9cP3/iKDHYys7kIFLDKpxORTg==}
     peerDependencies:
-      vitest: 2.1.3
+      vitest: 2.1.5
 
-  '@vitest/utils@2.1.3':
-    resolution: {integrity: sha512-xpiVfDSg1RrYT0tX6czgerkpcKFmFOF/gCr30+Mve5V2kewCy4Prn1/NDMSRwaSmT7PRaOF83wu+bEtsY1wrvA==}
+  '@vitest/utils@2.1.5':
+    resolution: {integrity: sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==}
 
-  '@volar/language-core@2.4.6':
-    resolution: {integrity: sha512-FxUfxaB8sCqvY46YjyAAV6c3mMIq/NWQMVvJ+uS4yxr1KzOvyg61gAuOnNvgCvO4TZ7HcLExBEsWcDu4+K4E8A==}
+  '@volar/language-core@2.4.10':
+    resolution: {integrity: sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==}
 
-  '@volar/source-map@2.4.6':
-    resolution: {integrity: sha512-Nsh7UW2ruK+uURIPzjJgF0YRGP5CX9nQHypA2OMqdM2FKy7rh+uv3XgPnWPw30JADbKvZ5HuBzG4gSbVDYVtiw==}
+  '@volar/source-map@2.4.10':
+    resolution: {integrity: sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==}
 
-  '@volar/typescript@2.4.6':
-    resolution: {integrity: sha512-NMIrA7y5OOqddL9VtngPWYmdQU03htNKFtAYidbYfWA0TOhyGVd9tfcP4TsLWQ+RBWDZCbBqsr8xzU0ZOxYTCQ==}
+  '@volar/typescript@2.4.10':
+    resolution: {integrity: sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==}
 
   '@vue-macros/common@1.15.0':
     resolution: {integrity: sha512-yg5VqW7+HRfJGimdKvFYzx8zorHUYo0hzPwuraoC1DWa7HHazbTMoVsHDvk3JHa1SGfSL87fRnzmlvgjEHhszA==}
@@ -2632,17 +2545,17 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.5.12':
-    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
-  '@vue/compiler-dom@3.5.12':
-    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
 
-  '@vue/compiler-sfc@3.5.12':
-    resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
-  '@vue/compiler-ssr@3.5.12':
-    resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -2650,8 +2563,8 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/devtools-api@7.5.2':
-    resolution: {integrity: sha512-VxPbAQxJrYSIkoGVvQ2oOoKW8u4CMpvRLySTxhoJA38z8bQEGy9GO33eoRY/DulJbSFRfjZFNvH+dh8B4qpesQ==}
+  '@vue/devtools-api@7.6.4':
+    resolution: {integrity: sha512-5AaJ5ELBIuevmFMZYYLuOO9HUuY/6OlkOELHE7oeDhy4XD/hSODIzktlsvBOsn+bto3aD0psj36LGzwVu5Ip8w==}
 
   '@vue/devtools-core@7.4.4':
     resolution: {integrity: sha512-DLxgA3DfeADkRzhAfm3G2Rw/cWxub64SdP5b+s5dwL30+whOGj+QNhmyFpwZ8ZTrHDFRIPj0RqNzJ8IRR1pz7w==}
@@ -2661,36 +2574,36 @@ packages:
   '@vue/devtools-kit@7.4.4':
     resolution: {integrity: sha512-awK/4NfsUG0nQ7qnTM37m7ZkEUMREyPh8taFCX+uQYps/MTFEum0AD05VeGDRMXwWvMmGIcWX9xp8ZiBddY0jw==}
 
-  '@vue/devtools-kit@7.5.2':
-    resolution: {integrity: sha512-0leUOE2HBfl8sHf9ePKzxqnCFskkU22tWWqd9OfeSlslAKE30/TViYvWcF4vgQmPlJnAAdHU0WfW5dYlCeOiuw==}
+  '@vue/devtools-kit@7.6.4':
+    resolution: {integrity: sha512-Zs86qIXXM9icU0PiGY09PQCle4TI750IPLmAJzW5Kf9n9t5HzSYf6Rz6fyzSwmfMPiR51SUKJh9sXVZu78h2QA==}
 
-  '@vue/devtools-shared@7.5.2':
-    resolution: {integrity: sha512-+zmcixnD6TAo+zwm30YuwZckhL9iIi4u+gFwbq9C8zpm3SMndTlEYZtNhAHUhOXB+bCkzyunxw80KQ/T0trF4w==}
+  '@vue/devtools-shared@7.6.4':
+    resolution: {integrity: sha512-nD6CUvBEel+y7zpyorjiUocy0nh77DThZJ0k1GRnJeOmY3ATq2fWijEp7wk37gb023Cb0R396uYh5qMSBQ5WFg==}
 
-  '@vue/language-core@2.1.6':
-    resolution: {integrity: sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==}
+  '@vue/language-core@2.1.10':
+    resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.5.12':
-    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
-  '@vue/runtime-core@3.5.12':
-    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
 
-  '@vue/runtime-dom@3.5.12':
-    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
 
-  '@vue/server-renderer@3.5.12':
-    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
     peerDependencies:
-      vue: 3.5.12
+      vue: 3.5.13
 
-  '@vue/shared@3.5.12':
-    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
   '@vue/tsconfig@0.5.1':
     resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
@@ -2701,11 +2614,11 @@ packages:
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
-  '@vueuse/core@11.1.0':
-    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
+  '@vueuse/core@11.2.0':
+    resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
 
-  '@vueuse/integrations@11.1.0':
-    resolution: {integrity: sha512-O2ZgrAGPy0qAjpoI2YR3egNgyEqwG85fxfwmA9BshRIGjV4G6yu6CfOPpMHAOoCD+UfsIl7Vb1bXJ6ifrHYDDA==}
+  '@vueuse/integrations@11.2.0':
+    resolution: {integrity: sha512-zGXz3dsxNHKwiD9jPMvR3DAxQEOV6VWIEYTGVSB9PNpk4pTWR+pXrHz9gvXWcP2sTk3W2oqqS6KwWDdntUvNVA==}
     peerDependencies:
       async-validator: ^4
       axios: ^1
@@ -2748,14 +2661,14 @@ packages:
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
-  '@vueuse/metadata@11.1.0':
-    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
+  '@vueuse/metadata@11.2.0':
+    resolution: {integrity: sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==}
 
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
-  '@vueuse/shared@11.1.0':
-    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
+  '@vueuse/shared@11.2.0':
+    resolution: {integrity: sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==}
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
@@ -2782,13 +2695,8 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.12.1:
-    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  acorn@8.13.0:
-    resolution: {integrity: sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==}
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -2814,8 +2722,12 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  algoliasearch@4.24.0:
-    resolution: {integrity: sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==}
+  algoliasearch@5.14.2:
+    resolution: {integrity: sha512-aYjI4WLamMxbhdJ2QAA99VbDCJOGzMOdT2agh57bi40n86ufkhZSIAf6mkocr7NmtBLtwCnSHvD5NJ+Ky5elWw==}
+    engines: {node: '>= 14.0.0'}
+
+  alien-signals@0.2.2:
+    resolution: {integrity: sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==}
 
   ansi-align@2.0.0:
     resolution: {integrity: sha512-TdlOggdA/zURfMYa7ABC66j+oqfMew58KpJMbUlH3bcZP1b+cBHIHDDn5uH9INsxrHBPjsqM0tDB4jPTF/vgJA==}
@@ -2911,8 +2823,8 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@1.3.0:
-    resolution: {integrity: sha512-ORycPY6qYSrAGMnSk1tlqy/Y0rFGk/WIYP/H6io0A+jXK2Jp3Il7h8vjfwaLvZUwanjiLwBeE5h3A9M+eQqeNw==}
+  ast-kit@1.3.1:
+    resolution: {integrity: sha512-3bIRV4s/cNAee2rKjuvYdoG+0CMqtOIgCvWrJL6zG8R0fDyMwYzStspX5JqXPbdMzM+qxHZ6g2rMHKhr3HkPlQ==}
     engines: {node: '>=16.14.0'}
 
   ast-types@0.14.2:
@@ -3013,8 +2925,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.24.0:
-    resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==}
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -3044,8 +2956,8 @@ packages:
   builtins@1.0.3:
     resolution: {integrity: sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==}
 
-  bumpp@9.7.1:
-    resolution: {integrity: sha512-Z6fhD5B8POcSkP+LIHeFQ0+vF0p/C3U+aYp3Yui748VCmsHrhJ/ZshP2970FqE93ymHrJVXTTF8/HDKrRNEYvw==}
+  bumpp@9.8.1:
+    resolution: {integrity: sha512-25W55DZI/rq6FboM0Q5y8eHbUk9eNn9oZ4bg/I5kiWn8/rdZCw6iqML076akQiUOQGhrm6QDvSSn4PgQ48bS4A==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -3107,8 +3019,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001669:
-    resolution: {integrity: sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==}
+  caniuse-lite@1.0.30001680:
+    resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==}
 
   capture-stack-trace@1.0.2:
     resolution: {integrity: sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==}
@@ -3117,8 +3029,8 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@5.1.1:
-    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+  chai@5.1.2:
+    resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
     engines: {node: '>=12'}
 
   chalk@2.4.2:
@@ -3133,9 +3045,8 @@ packages:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
-  changelogen@0.5.7:
-    resolution: {integrity: sha512-cTZXBcJMl3pudE40WENOakXkcVtrbBpbkmSkM20NdRiUqa4+VYRdXdEsgQ0BNQ6JBE2YymTNWtPKVF7UCTN5+g==}
-    hasBin: true
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
@@ -3171,8 +3082,8 @@ packages:
   ci-info@1.6.0:
     resolution: {integrity: sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==}
 
-  ci-info@4.0.0:
-    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
+  ci-info@4.1.0:
+    resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
 
   citty@0.1.6:
@@ -3273,6 +3184,9 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
+  colorette@1.4.0:
+    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
+
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -3319,9 +3233,6 @@ packages:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
 
-  computeds@0.0.1:
-    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
@@ -3364,9 +3275,6 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  convert-gitmoji@0.1.5:
-    resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
-
   convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
@@ -3388,8 +3296,8 @@ packages:
     resolution: {integrity: sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==}
     deprecated: This package is no longer supported.
 
-  core-js-compat@3.38.1:
-    resolution: {integrity: sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==}
+  core-js-compat@3.39.0:
+    resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -3431,29 +3339,21 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
-  croner@8.1.2:
-    resolution: {integrity: sha512-ypfPFcAXHuAZRCzo3vJL6ltENzniTjwe/qsLleH1V2/7SRDjgvRQyrLmumFTLmjFax4IuSxfGXEn79fozXcJog==}
+  croner@9.0.0:
+    resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cronstrue@2.50.0:
-    resolution: {integrity: sha512-ULYhWIonJzlScCCQrPUG5uMXzXxSixty4djud9SS37DoNxDdkeRocxzHuAo4ImRBUK+mAuU5X9TSwEDccnnuPg==}
+  cronstrue@2.51.0:
+    resolution: {integrity: sha512-7EG9VaZZ5SRbZ7m25dmP6xaS0qe9ay6wywMskFOU/lMDKa+3gZr2oeT5OUfXwRP/Bcj8wxdYJ65AHU70CI3tsw==}
     hasBin: true
 
   cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crossws@0.2.4:
-    resolution: {integrity: sha512-DAxroI2uSOgUKLz00NX6A8U/8EE3SZHmIND+10jkVSaypvyt57J5JEOxAQOL6lQxyzi/wZbTIwssU1uy69h5Vg==}
-    peerDependencies:
-      uWebSockets.js: '*'
-    peerDependenciesMeta:
-      uWebSockets.js:
-        optional: true
-
   crossws@0.3.1:
     resolution: {integrity: sha512-HsZgeVYaG+b5zA+9PbIPGq4+J/CJynJuearykPsXx4V/eMhyQ5EDVg3Ak2FBZtVXCiOLu/U7IiwDHTr9MA+IKw==}
 
@@ -3695,19 +3595,25 @@ packages:
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
-  db0@0.1.4:
-    resolution: {integrity: sha512-Ft6eCwONYxlwLjBXSJxw0t0RYtA5gW9mq8JfBXn9TtC0nDPlqePAhpv9v4g9aONBi6JI1OXHTKKkUYGd+BOrCA==}
+  db0@0.2.1:
+    resolution: {integrity: sha512-BWSFmLaCkfyqbSEZBQINMVNjCVfrogi7GQ2RSy1tmtfK9OXlsup6lUMwLsqSD7FbAjD04eWFdXowSHHUp6SE/Q==}
     peerDependencies:
-      '@libsql/client': ^0.5.2
-      better-sqlite3: ^9.4.3
-      drizzle-orm: ^0.29.4
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
     peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
       '@libsql/client':
         optional: true
       better-sqlite3:
         optional: true
       drizzle-orm:
         optional: true
+      mysql2:
+        optional: true
 
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
@@ -3875,9 +3781,9 @@ packages:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
 
-  dot-prop@8.0.2:
-    resolution: {integrity: sha512-xaBe6ZT4DHPkg0k4Ytbvn5xoxgpG0jOS1dYxSOwAHPuNLjP3/OzN0gH55SrLqpx8cBfSaVt91lXYkApjb+nYdQ==}
-    engines: {node: '>=16'}
+  dot-prop@9.0.0:
+    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
+    engines: {node: '>=18'}
 
   dotenv@16.4.5:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
@@ -3905,29 +3811,32 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
 
-  electron-to-chromium@1.5.41:
-    resolution: {integrity: sha512-dfdv/2xNjX0P8Vzme4cfzHqnPm5xsZXwsolTYr0eyW18IUmNyG08vL+fttvinTfhKfIKdRoqkDIC9e9iWQCNYQ==}
+  electron-to-chromium@1.5.63:
+    resolution: {integrity: sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==}
 
   elkjs@0.8.2:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
 
-  embla-carousel-autoplay@8.3.0:
-    resolution: {integrity: sha512-h7DFJLf9uQD+XDxr1NwA3/oFIjsnj/iED2RjET5u6/svMec46IbF1CYPhmB5Q/1Fc0WkcvhPpsEsrtVXQLxNzA==}
+  embla-carousel-autoplay@8.4.0:
+    resolution: {integrity: sha512-AJHXrnaY+Tf4tb/+oItmJSpz4P0WvS62GrW5Z4iFY3zsH0mkKcijzd04LIkj0P4DkTazIBEuXple+nUVmuMsrQ==}
     peerDependencies:
-      embla-carousel: 8.3.0
+      embla-carousel: 8.4.0
 
-  embla-carousel-reactive-utils@8.3.0:
-    resolution: {integrity: sha512-EYdhhJ302SC4Lmkx8GRsp0sjUhEN4WyFXPOk0kGu9OXZSRMmcBlRgTvHcq8eKJE1bXWBsOi1T83B+BSSVZSmwQ==}
+  embla-carousel-reactive-utils@8.4.0:
+    resolution: {integrity: sha512-yi/2paSYQqMGgh983Sj8G4+zt4bhABC1pzN4P4Vmc7UhSxqo9I7r15tR7s3/zS0JEl3orRSw7TxX92IZqj5NXA==}
     peerDependencies:
-      embla-carousel: 8.3.0
+      embla-carousel: 8.4.0
 
-  embla-carousel-vue@8.3.0:
-    resolution: {integrity: sha512-K8ghzWZ9Th2Czvy9dVaz6ItgvFdkI3wHQe6HgeHmvmOlkvhu/fNz83uHrLWVAsjztu/b+yiFk9zvXb0+IQ2mPw==}
+  embla-carousel-vue@8.4.0:
+    resolution: {integrity: sha512-rtvnPWB3UDO6FJ6b+/8WoeTN6hgnhIix2eUmL8gUsjSDus0b19XI+gzdF9MFXSgP/V0M3/LBuNT2KMpt6PkjNA==}
     peerDependencies:
       vue: ^3.2.37
 
-  embla-carousel@8.3.0:
-    resolution: {integrity: sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA==}
+  embla-carousel@8.4.0:
+    resolution: {integrity: sha512-sUzm4DGGsdZCom7LEO38Uu6C7oQoFfPorKDf/f7j2EeRCMhHSOt3CvF+pHCaI6N+x5Y8/tfLueJ0WZlgUREnew==}
+
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
@@ -3998,11 +3907,6 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  esbuild@0.20.2:
-    resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -4043,6 +3947,12 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
+  eslint-compat-utils@0.6.3:
+    resolution: {integrity: sha512-9IDdksh5pUYP2ZLi7mOdROxVjLY8gY2qKxprmrJ/5Dyqud7M/IFKxF3o0VLlRhITm1pK6Fk7NiBxE39M/VlUcw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
   eslint-config-flat-gitignore@0.3.0:
     resolution: {integrity: sha512-0Ndxo4qGhcewjTzw52TK06Mc00aDtHNTdeeW2JfONgDcLkRO/n/BteMRzNVpLQYxdCC/dFEilfM9fjjpGIJ9Og==}
     peerDependencies:
@@ -4054,6 +3964,17 @@ packages:
   eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
+  eslint-json-compat-utils@0.2.1:
+    resolution: {integrity: sha512-YzEodbDyW8DX8bImKhAcCeu/L31Dd/70Bidx2Qex9OFUtgzXLqtfWL4Hr5fM/aCCB8QUZLuJur0S9k6UfgFkfg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@eslint/json': '*'
+      eslint: '*'
+      jsonc-eslint-parser: ^2.4.0
+    peerDependenciesMeta:
+      '@eslint/json':
+        optional: true
+
   eslint-merge-processors@0.1.0:
     resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
     peerDependencies:
@@ -4075,26 +3996,26 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
-  eslint-plugin-import-x@4.3.1:
-    resolution: {integrity: sha512-5TriWkXulDl486XnYYRgsL+VQoS/7mhN/2ci02iLCuL7gdhbiWxnsuL/NTcaKY9fpMgsMFjWZBtIGW7pb+RX0g==}
+  eslint-plugin-import-x@4.4.2:
+    resolution: {integrity: sha512-mDRXPSLQ0UQZQw91QdG4/qZT6hgeW2MJTczAbgPseUZuPEtIjjdPOolXroRkulnOn3fzj6gNgvk+wchMJiHElg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  eslint-plugin-jsdoc@50.4.3:
-    resolution: {integrity: sha512-uWtwFxGRv6B8sU63HZM5dAGDhgsatb+LONwmILZJhdRALLOkCX2HFZhdL/Kw2ls8SQMAVEfK+LmnEfxInRN8HA==}
+  eslint-plugin-jsdoc@50.5.0:
+    resolution: {integrity: sha512-xTkshfZrUbiSHXBwZ/9d5ulZ2OcHXxSvm/NPo494H/hadLRJwOq5PMV0EUpMqsb9V+kQo+9BAgi6Z7aJtdBp2A==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  eslint-plugin-jsonc@2.16.0:
-    resolution: {integrity: sha512-Af/ZL5mgfb8FFNleH6KlO4/VdmDuTqmM+SPnWcdoWywTetv7kq+vQe99UyQb9XO3b0OWLVuTH7H0d/PXYCMdSg==}
+  eslint-plugin-jsonc@2.18.2:
+    resolution: {integrity: sha512-SDhJiSsWt3nItl/UuIv+ti4g3m4gpGkmnUJS9UWR3TrpyNsIcnJoBRD7Kof6cM4Rk3L0wrmY5Tm3z7ZPjR2uGg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
 
-  eslint-plugin-n@17.11.1:
-    resolution: {integrity: sha512-93IUD82N6tIEgjztVI/l3ElHtC2wTa9boJHrD8iN+NyDxjxz/daZUZKfkedjBZNdg6EqDk4irybUsiPwDqXAEA==}
+  eslint-plugin-n@17.13.2:
+    resolution: {integrity: sha512-MhBAKkT01h8cOXcTBTlpuR7bxH5OBUNpUXefsvwSVEy46cY4m/Kzr2osUCQvA3zJFD6KuCeNNDv0+HDuWk/OcA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=8.23.0'
@@ -4122,8 +4043,8 @@ packages:
       vue-eslint-parser:
         optional: true
 
-  eslint-plugin-regexp@2.6.0:
-    resolution: {integrity: sha512-FCL851+kislsTEQEMioAlpDuK5+E5vs0hi1bF8cFlPlHcEjeRhuAzEsGikXRreE+0j4WhW2uO54MqTjXtYOi3A==}
+  eslint-plugin-regexp@2.7.0:
+    resolution: {integrity: sha512-U8oZI77SBtH8U3ulZ05iu0qEzIizyEDXd+BWHvyVxTOjGwcDcvy/kEpgFG4DYca2ByRLiVPFZ2GeH7j1pdvZTA==}
     engines: {node: ^18 || >=20}
     peerDependencies:
       eslint: '>=8.44.0'
@@ -4155,14 +4076,14 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
 
-  eslint-plugin-vue@9.29.0:
-    resolution: {integrity: sha512-hamyjrBhNH6Li6R1h1VF9KHfshJlKgKEg3ARbGTn72CMNDSMhWbgC7NdkRDEh25AFW+4SDATzyNM+3gWuZii8g==}
+  eslint-plugin-vue@9.31.0:
+    resolution: {integrity: sha512-aYMUCgivhz1o4tLkRHj5oq9YgYPM4/EJc0M7TAKRLCUA5OYxRLAhYEVD2nLtTwLyixEFI+/QXSvKU9ESZFgqjQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  eslint-plugin-yml@1.14.0:
-    resolution: {integrity: sha512-ESUpgYPOcAYQO9czugcX5OqRvn/ydDVwGCPXY4YjPqc09rHaUVUA6IE6HLQys4rXk/S+qx3EwTd1wHCwam/OWQ==}
+  eslint-plugin-yml@1.15.0:
+    resolution: {integrity: sha512-leC8APYVOsKyWUlvRwVhewytK5wS70BfMqIaUplFstRfzCoVp0YoEroV4cUEvQrBj93tQ3M9LcjO/ewr6D4kjA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -4177,20 +4098,20 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-scope@8.1.0:
-    resolution: {integrity: sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==}
+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@4.1.0:
-    resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.13.0:
-    resolution: {integrity: sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==}
+  eslint@9.15.0:
+    resolution: {integrity: sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -4199,8 +4120,8 @@ packages:
       jiti:
         optional: true
 
-  espree@10.2.0:
-    resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   espree@9.6.1:
@@ -4253,10 +4174,6 @@ packages:
     resolution: {integrity: sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==}
     engines: {node: '>=4'}
 
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
   execa@7.2.0:
     resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==}
     engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0}
@@ -4269,6 +4186,10 @@ packages:
     resolution: {integrity: sha512-rtmc+cjLZqnu9dSYosX9EWmSJhTwpACgJQTfj4hgg2JjOD/6SIQalZrt4a3aQeh++oNxkazcaxrhPUj6+g5G/Q==}
     engines: {node: '>=0.10.0'}
 
+  expect-type@1.1.0:
+    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+    engines: {node: '>=12.0.0'}
+
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -4377,14 +4298,14 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+  flatted@3.3.2:
+    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
 
   flush-write-stream@1.1.1:
     resolution: {integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==}
 
-  focus-trap@7.6.0:
-    resolution: {integrity: sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==}
+  focus-trap@7.6.2:
+    resolution: {integrity: sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==}
 
   follow-redirects@1.5.10:
     resolution: {integrity: sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==}
@@ -4579,8 +4500,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.11.0:
-    resolution: {integrity: sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==}
+  globals@15.12.0:
+    resolution: {integrity: sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==}
     engines: {node: '>=18'}
 
   globby@13.2.2:
@@ -4707,10 +4628,6 @@ packages:
   httpxy@0.1.5:
     resolution: {integrity: sha512-hqLDO+rfststuyEUTWObQK6zHEEmZ/kaIP2/zclGGZn6X8h/ESTWg+WKecQ/e5k4nPswjzZD+q2VqZIbr15CoQ==}
 
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
   human-signals@4.3.1:
     resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
     engines: {node: '>=14.18.0'}
@@ -4743,6 +4660,10 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
+  ignore@6.0.2:
+    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
+    engines: {node: '>= 4'}
+
   image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
@@ -4765,8 +4686,8 @@ packages:
   importx@0.4.4:
     resolution: {integrity: sha512-Lo1pukzAREqrBnnHC+tj+lreMTAvyxtkKsMxLY8H15M/bvLl54p3YuoTI70Tz7Il0AsgSlD7Lrk/FaApRcBL7w==}
 
-  impound@0.1.0:
-    resolution: {integrity: sha512-F9nJgOsDc3tysjN74edE0vGPEQrU7DAje6g5nNAL5Jc9Tv4JW3mH7XMGne+EaadTniDXLeUrVR21opkNfWO1zQ==}
+  impound@0.2.0:
+    resolution: {integrity: sha512-gXgeSyp9Hf7qG2/PLKmywHXyQf2xFrw+mJGpoj9DsAB9L7/MIKn+DeEx98UryWXdmbv8wUUPdcQof6qXnZoCGg==}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -4776,6 +4697,10 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  index-to-position@0.1.2:
+    resolution: {integrity: sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==}
+    engines: {node: '>=18'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -5003,14 +4928,18 @@ packages:
     resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
     hasBin: true
 
-  jiti@2.3.3:
-    resolution: {integrity: sha512-EX4oNDwcXSivPrw2qKH2LB5PoFxEvgtv2JgwW0bU858HoLQ+kutSvjLMUqBd0PeJYEinLWhoI9Ol0eYMqj/wNQ==}
+  jiti@2.4.0:
+    resolution: {integrity: sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g==}
     hasBin: true
 
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
+  js-levenshtein@1.1.6:
+    resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
+    engines: {node: '>=0.10.0'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -5174,8 +5103,8 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
 
   locate-path@5.0.0:
@@ -5202,6 +5131,9 @@ packages:
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -5266,8 +5198,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.0.1:
-    resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==}
+  lru-cache@11.0.2:
+    resolution: {integrity: sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==}
     engines: {node: 20 || >=22}
 
   lru-cache@4.1.5:
@@ -5292,8 +5224,8 @@ packages:
     resolution: {integrity: sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==}
     engines: {node: '>=16.14.0'}
 
-  magic-string@0.30.12:
-    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
+  magic-string@0.30.13:
+    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
 
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
@@ -5319,14 +5251,14 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
-  markdown-table@3.0.3:
-    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
   mdast-util-find-and-replace@3.0.1:
     resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
 
-  mdast-util-from-markdown@2.0.1:
-    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
   mdast-util-gfm-autolink-literal@2.0.1:
     resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
@@ -5352,8 +5284,8 @@ packages:
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
-  mdast-util-to-markdown@2.1.0:
-    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
@@ -5386,8 +5318,8 @@ packages:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
 
-  micromark-core-commonmark@2.0.1:
-    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
+  micromark-core-commonmark@2.0.2:
+    resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
 
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
@@ -5410,65 +5342,65 @@ packages:
   micromark-extension-gfm@3.0.0:
     resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
-  micromark-factory-destination@2.0.0:
-    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
-  micromark-factory-label@2.0.0:
-    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
-  micromark-factory-space@2.0.0:
-    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
-  micromark-factory-title@2.0.0:
-    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
-  micromark-factory-whitespace@2.0.0:
-    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
-  micromark-util-character@2.1.0:
-    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
-  micromark-util-chunked@2.0.0:
-    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
-  micromark-util-classify-character@2.0.0:
-    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
-  micromark-util-combine-extensions@2.0.0:
-    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
-    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
-  micromark-util-decode-string@2.0.0:
-    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
-  micromark-util-encode@2.0.0:
-    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
-  micromark-util-html-tag-name@2.0.0:
-    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
-  micromark-util-normalize-identifier@2.0.0:
-    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
-  micromark-util-resolve-all@2.0.0:
-    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
-  micromark-util-sanitize-uri@2.0.0:
-    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
-  micromark-util-subtokenize@2.0.1:
-    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
+  micromark-util-subtokenize@2.0.2:
+    resolution: {integrity: sha512-xKxhkB62vwHUuuxHe9Xqty3UaAsizV2YKq5OV344u3hFBbf8zIYrhYOWhAQb94MtMPkjTOzzjJ/hid9/dR5vFA==}
 
-  micromark-util-symbol@2.0.0:
-    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
-  micromark-util-types@2.0.0:
-    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+  micromark-util-types@2.0.1:
+    resolution: {integrity: sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==}
 
-  micromark@4.0.0:
-    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+  micromark@4.0.1:
+    resolution: {integrity: sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==}
 
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
@@ -5506,10 +5438,6 @@ packages:
     resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
     engines: {node: '>=4'}
 
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
   mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
@@ -5593,8 +5521,8 @@ packages:
       vue-tsc:
         optional: true
 
-  mlly@1.7.2:
-    resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
+  mlly@1.7.3:
+    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
 
   move-concurrently@1.0.1:
     resolution: {integrity: sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==}
@@ -5634,8 +5562,8 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.0.7:
-    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
+  nanoid@5.0.8:
+    resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
     engines: {node: ^18 || >=20}
     hasBin: true
 
@@ -5652,8 +5580,8 @@ packages:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
 
-  nitropack@2.9.7:
-    resolution: {integrity: sha512-aKXvtNrWkOCMsQbsk4A0qQdBjrJ1ZcvwlTQevI/LAgLWLYc5L7Q/YiYxGLal4ITyNSlzir1Cm1D2ZxnYhmpMEw==}
+  nitropack@2.10.4:
+    resolution: {integrity: sha512-sJiG/MIQlZCVSw2cQrFG1H6mLeSqHlYfFerRjLKz69vUfdu0EL2l0WdOxlQbzJr3mMv/l4cOlCCLzVRzjzzF/g==}
     engines: {node: ^16.11.0 || >=17.0.0}
     hasBin: true
     peerDependencies:
@@ -5686,8 +5614,8 @@ packages:
     resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
 
-  node-gyp-build@4.8.2:
-    resolution: {integrity: sha512-IRUxE4BVsHWXkV/SFOut4qTlagw2aM8T5/vnTsmrHJvVoKueJHRc/JaFND7QDDc61kLYUJ6qlZM3sqTSyx2dTw==}
+  node-gyp-build@4.8.3:
+    resolution: {integrity: sha512-EMS95CMJzdoSKoIiXo8pxKoL8DYxwIZXYlLmgPb8KUv794abpnLK6ynsCAWNliOjREKruYKdzbh76HHYUHX7nw==}
     hasBin: true
 
   node-html-parser@6.1.13:
@@ -5737,13 +5665,13 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxi@3.14.0:
-    resolution: {integrity: sha512-MhG4QR6D95jQxhnwKfdKXulZ8Yqy1nbpwbotbxY5IcabOzpEeTB8hYn2BFkmYdMUB0no81qpv2ldZmVCT9UsnQ==}
+  nuxi@3.15.0:
+    resolution: {integrity: sha512-ZVu45nuDrdb7nzKW2kLGY/N1vvFYLLbUVX6gUYw4BApKGGu4+GktTR5o48dGVgMYX9A8chaugl7TL9ZYmwC9Mg==}
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
-  nuxt@3.13.2:
-    resolution: {integrity: sha512-Bjc2qRsipfBhjXsBEJCN+EUAukhdgFv/KoIR5HFB2hZOYRSqXBod3oWQs78k3ja1nlIhAEdBG533898KJxUtJw==}
+  nuxt@3.14.159:
+    resolution: {integrity: sha512-1xz6AfFkun+byUIkBNX3/CTOTShPRFJe0y9HqWZX2aV9xdoz5ByeaHZfktokhOOSbvabjDyzkTbbHh3V673qHw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
     peerDependencies:
@@ -5785,10 +5713,6 @@ packages:
     resolution: {integrity: sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==}
     engines: {node: '>=4'}
 
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -5797,8 +5721,8 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
-  oniguruma-to-js@0.4.3:
-    resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
+  oniguruma-to-es@0.4.1:
+    resolution: {integrity: sha512-rNcEohFz095QKGRovP/yqPIKc+nP+Sjs4YTHMv33nMePGKrq/r2eu9Yh4646M5XluGJsUnmwoXuiXE69KDs+fQ==}
 
   only@0.0.2:
     resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
@@ -5819,9 +5743,11 @@ packages:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
 
-  openapi-typescript@6.7.6:
-    resolution: {integrity: sha512-c/hfooPx+RBIOPM09GSxABOZhYPblDoyaGhqBkD/59vtpN21jEuWKDlM0KYTvqJVlSYjKs0tBcIdeXKChlSPtw==}
+  openapi-typescript@7.4.3:
+    resolution: {integrity: sha512-xTIjMIIOv9kNhsr8JxaC00ucbIY/6ZwuJPJBZMSh5FA2dicZN5uM805DWVJojXdom8YI4AQTavPDPHMx/3g0vQ==}
     hasBin: true
+    peerDependencies:
+      typescript: ^5.x
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
@@ -5831,8 +5757,8 @@ packages:
     resolution: {integrity: sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==}
     engines: {node: '>=4'}
 
-  ora@8.1.0:
-    resolution: {integrity: sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==}
+  ora@8.1.1:
+    resolution: {integrity: sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw==}
     engines: {node: '>=18'}
 
   os-homedir@1.0.2:
@@ -5886,8 +5812,8 @@ packages:
     resolution: {integrity: sha512-q/R5GrMek0vzgoomq6rm9OX+3PQve8sLwTirmK30YB3Cu0Bbt9OX9M/SIUnroN5BGJkzwGsFwDaRGD9EwBOlCA==}
     engines: {node: '>=4'}
 
-  package-manager-detector@0.2.2:
-    resolution: {integrity: sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==}
+  package-manager-detector@0.2.4:
+    resolution: {integrity: sha512-H/OUu9/zUfP89z1APcBf2X8Us0tt8dUK4lUmKqz12QNXif3DxAs1/YqjGtcutZi1zQqeNQRWr9C+EbQnnvSSFA==}
 
   pacote@2.7.38:
     resolution: {integrity: sha512-XxHUyHQB7QCVBxoXeVu0yKxT+2PvJucsc0+1E+6f95lMUxEAYERgSAc71ckYXrYr35Ew3xFU/LrhdIK21GQFFA==}
@@ -5923,6 +5849,10 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-json@8.1.0:
+    resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==}
+    engines: {node: '>=18'}
+
   parse-passwd@1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
@@ -6177,8 +6107,8 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
-  postcss-nesting@13.0.0:
-    resolution: {integrity: sha512-TCGQOizyqvEkdeTPM+t6NYwJ3EJszYE/8t8ILxw/YoeUvz2rz7aM8XTAmBWh9/DJjfaaabL88fWrsVHSPF2zgA==}
+  postcss-nesting@13.0.1:
+    resolution: {integrity: sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==}
     engines: {node: '>=18'}
     peerDependencies:
       postcss: ^8.4
@@ -6269,6 +6199,10 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.0.0:
+    resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
+    engines: {node: '>=4'}
+
   postcss-styl@0.12.3:
     resolution: {integrity: sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==}
     engines: {node: ^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0}
@@ -6288,8 +6222,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
   potpack@1.0.2:
@@ -6456,8 +6390,14 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
-  regex@4.3.3:
-    resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
+  regex-recursion@4.2.1:
+    resolution: {integrity: sha512-QHNZyZAeKdndD1G3bKAbBEKOSSK4KOHQrAJ01N1LJeb0SoH4DJIeFhp0uUpETgONifS4+P3sOgoA1dhzgrQvhA==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@5.0.2:
+    resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==}
 
   regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
@@ -6478,8 +6418,8 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  reka-ui@1.0.0-alpha.4:
-    resolution: {integrity: sha512-hrae4UXs7qVLKftET9pVgy/nY9tX4ohP3af4M7WbyacFngVJalBD0lTiYT8w/g/ySwJgXZHDqsq/1RxtXSSBZg==}
+  reka-ui@1.0.0-alpha.5:
+    resolution: {integrity: sha512-jJEc2gJPejZABz4xjsy6VmJtQduV06sL06DOlOj+Mt6HRdFMLYxVPMbr/kwdMuBbBomnkbhefJxPaw8tsdWrXQ==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -6588,8 +6528,8 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rollup@4.24.0:
-    resolution: {integrity: sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==}
+  rollup@4.27.3:
+    resolution: {integrity: sha512-SLsCOnlmGt9VoZ9Ek8yBK8tAdmPHeppkw+Xa7yDlCEhDTvwYei03JlWo1fdc7YTfLZ4tD8riJCUyAgTbszk1fQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -6695,11 +6635,8 @@ packages:
   shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
 
-  shiki@1.22.0:
-    resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==}
-
-  shiki@1.22.1:
-    resolution: {integrity: sha512-PbJ6XxrWLMwB2rm3qdjIHNm3zq4SfFnOx0B3rEoi4AN8AUngsdyZ1tRe5slMPtn6jQkbUURLNZPpLR7Do3k78g==}
+  shiki@1.23.1:
+    resolution: {integrity: sha512-8kxV9TH4pXgdKGxNOkrSMydn1Xf6It8lsle0fiqxf7a1149K1WGtdOu3Zb91T5r1JpvRPxqxU3C2XdZZXQnrig==}
 
   shortid@2.2.16:
     resolution: {integrity: sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==}
@@ -6726,6 +6663,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.0:
+    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+    engines: {node: '>=18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -6843,8 +6784,8 @@ packages:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+  std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
 
   stdin-discarder@0.2.2:
     resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
@@ -6856,8 +6797,8 @@ packages:
   stream-shift@1.0.3:
     resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
 
-  streamx@2.20.1:
-    resolution: {integrity: sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==}
+  streamx@2.20.2:
+    resolution: {integrity: sha512-aDGDLU+j9tJcUdPGOaHmVF1u/hhI+CsGkT02V3OKlHDV7IukOI+nTWAGkiZEKCO35rWN1wIr4tS7YFr1f4qSvA==}
 
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@@ -6912,10 +6853,6 @@ packages:
     resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
     engines: {node: '>=0.10.0'}
 
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
   strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
@@ -7021,8 +6958,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
+  tailwindcss@3.4.15:
+    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -7064,9 +7001,6 @@ packages:
     resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
     engines: {node: '>=8'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   textextensions@2.6.0:
     resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==}
     engines: {node: '>=0.8'}
@@ -7104,16 +7038,12 @@ packages:
   tinyexec@0.3.1:
     resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
 
-  tinyglobby@0.2.6:
-    resolution: {integrity: sha512-NbBoFBpqfcgd1tCiO8Lkfdk+xrA7mlLR9zgvZcZWQQwU63XAfUePyd6wZBaU93Hqw347lHnwFzttAkemHzzz4g==}
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
     engines: {node: '>=12.0.0'}
 
-  tinyglobby@0.2.9:
-    resolution: {integrity: sha512-8or1+BGEdk1Zkkw2ii16qSS7uVrQJPre5A9o/XkWPATkk23FZh/15BKFxPnlTy6vkljZxLqYCzzBMj30ZrSvjw==}
-    engines: {node: '>=12.0.0'}
-
-  tinypool@1.0.1:
-    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
   tinyqueue@2.0.3:
@@ -7134,10 +7064,6 @@ packages:
   to-buffer@1.1.1:
     resolution: {integrity: sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-px@1.1.0:
     resolution: {integrity: sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==}
 
@@ -7174,8 +7100,8 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+  ts-api-utils@1.4.0:
+    resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
@@ -7200,15 +7126,15 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
-  tslib@2.8.0:
-    resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tsscmp@1.0.6:
     resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
     engines: {node: '>=0.6.x'}
 
-  tsup@8.3.0:
-    resolution: {integrity: sha512-ALscEeyS03IomcuNdFdc0YWGVIkwH1Ws7nfTbAPuoILvEV2hpGQAY72LIOjglGo4ShWpZfpBqP/jpQVCzqYQag==}
+  tsup@8.3.5:
+    resolution: {integrity: sha512-Tunf6r6m6tnZsG9GYWndg0z8dEV7fD733VBFzFJ5Vcm1FtlXB8xBD/rtrBi2a3YKEV7hHtxiZtW5EAVADoe1pA==}
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
@@ -7226,8 +7152,8 @@ packages:
       typescript:
         optional: true
 
-  tsx@4.19.1:
-    resolution: {integrity: sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==}
+  tsx@4.19.2:
+    resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -7255,12 +7181,8 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
-  type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-
-  type-fest@4.26.1:
-    resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
+  type-fest@4.27.0:
+    resolution: {integrity: sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==}
     engines: {node: '>=16'}
 
   type-is@1.6.18:
@@ -7305,22 +7227,18 @@ packages:
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
-  undici@5.28.4:
-    resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
-    engines: {node: '>=14.0'}
-
   unenv@1.10.0:
     resolution: {integrity: sha512-wY5bskBQFL9n3Eca5XnhH6KbUo/tfvkwm9OpcdCvLaeA7piBNbavbOKJySEwQ1V0RH6HvNlSAFRTpvTqgKRQXQ==}
 
-  unhead@1.11.10:
-    resolution: {integrity: sha512-hypXrAI47wE3wIhkze0RMPGAWcoo45Q1+XzdqLD/OnTCzjFXQrpuE4zBy8JRexyrqp+Ud2+nFTUNf/mjfFSymw==}
+  unhead@1.11.11:
+    resolution: {integrity: sha512-98tM2R8OWJhvS6uqTewkfIrsPqFU/VwnKpU2tVZ+jPXSWgWSLmM3K2Y2v5AEM4bZjmC/XH8pLVGzbqB7xzFI/Q==}
 
   unicorn-magic@0.1.0:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
-  unimport@3.13.1:
-    resolution: {integrity: sha512-nNrVzcs93yrZQOW77qnyOVHtb68LegvhYFwxFMfuuWScmwQmyVCG/NBuN8tYsaGzgQUVYv34E/af+Cc9u4og4A==}
+  unimport@3.13.2:
+    resolution: {integrity: sha512-VKAepeIb6BWLtBl4tmyHY1/7rJgz3ynmZrWf8cU1a+v5Uv/k1gyyAEeGBnYcrwy8bxG5sflxEx4a9VQUqOVHUA==}
 
   unique-filename@1.1.1:
     resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==}
@@ -7383,28 +7301,23 @@ packages:
       vue-router:
         optional: true
 
-  unplugin@1.14.1:
-    resolution: {integrity: sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==}
+  unplugin@1.16.0:
+    resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
     engines: {node: '>=14.0.0'}
-    peerDependencies:
-      webpack-sources: ^3
-    peerDependenciesMeta:
-      webpack-sources:
-        optional: true
 
-  unstorage@1.12.0:
-    resolution: {integrity: sha512-ARZYTXiC+e8z3lRM7/qY9oyaOkaozCeNd2xoz7sYK9fv7OLGhVsf+BZbmASqiK/HTZ7T6eAlnVq9JynZppyk3w==}
+  unstorage@1.13.1:
+    resolution: {integrity: sha512-ELexQHUrG05QVIM/iUeQNdl9FXDZhqLJ4yP59fnmn2jGUh0TEulwOgov1ubOb3Gt2ZGK/VMchJwPDNVEGWQpRg==}
     peerDependencies:
       '@azure/app-configuration': ^1.7.0
       '@azure/cosmos': ^4.1.1
       '@azure/data-tables': ^13.2.2
-      '@azure/identity': ^4.4.1
-      '@azure/keyvault-secrets': ^4.8.0
-      '@azure/storage-blob': ^12.24.0
+      '@azure/identity': ^4.5.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.25.0
       '@capacitor/preferences': ^6.0.2
-      '@netlify/blobs': ^6.5.0 || ^7.0.0
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0
       '@planetscale/database': ^1.19.0
-      '@upstash/redis': ^1.34.0
+      '@upstash/redis': ^1.34.3
       '@vercel/kv': ^1.0.1
       idb-keyval: ^6.2.1
       ioredis: ^5.4.1
@@ -7464,6 +7377,9 @@ packages:
   uqr@0.1.2:
     resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
 
+  uri-js-replace@1.0.1:
+    resolution: {integrity: sha512-W+C9NWNLFOoBI2QWDp4UT9pv65r2w5Cx+3sTYFvtMdDBxkKt1syCqsUdSFAChbEe1uK5TfS04wt/nGwmaeIQ0g==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -7504,8 +7420,8 @@ packages:
     peerDependencies:
       vue: ^3.4.26
 
-  vee-validate@4.14.3:
-    resolution: {integrity: sha512-o4yABwgmCxyNz63hAFiDuLtK4qSrJ3+Ri5kbbJ9RQecXpaMp6NzJUEGE3LOcScakkSmtLDzvliQ2yBdFyPWDIw==}
+  vee-validate@4.14.7:
+    resolution: {integrity: sha512-XVb1gBFJR57equ11HEI8uxNqFJkwvCP/b+p+saDPQYaW7k45cdF5jsYPEJud1o29GD6h2y7Awm7Qfm89yKi74A==}
     peerDependencies:
       vue: ^3.4.26
 
@@ -7520,8 +7436,8 @@ packages:
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0
 
-  vite-node@2.1.3:
-    resolution: {integrity: sha512-I1JadzO+xYX887S39Do+paRePCKoiDrWRRjp9kkG5he0t7RXNvPAJPCQSJqbGN4uCrFFeS3Kj3sLqY8NMYBEdA==}
+  vite-node@2.1.5:
+    resolution: {integrity: sha512-rd0QIgx74q4S1Rd56XIiL2cYEdyWn13cunYBIuqh9mpmQr7gGS0IxXoP8R6OaZtNQQLyXSWbd4rXKYUbhFpK5w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
@@ -7574,16 +7490,16 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
 
-  vite-tsconfig-paths@5.0.1:
-    resolution: {integrity: sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==}
+  vite-tsconfig-paths@5.1.2:
+    resolution: {integrity: sha512-gEIbKfJzSEv0yR3XS2QEocKetONoWkbROj6hGx0FHM18qKUojhvcokQsxQx5nMkelZq2n37zbSGCJn+FSODSjA==}
     peerDependencies:
       vite: '*'
     peerDependenciesMeta:
       vite:
         optional: true
 
-  vite@5.4.9:
-    resolution: {integrity: sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==}
+  vite@5.4.11:
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -7613,8 +7529,8 @@ packages:
       terser:
         optional: true
 
-  vitepress@1.4.1:
-    resolution: {integrity: sha512-C2rQ7PMlDVqgsaHOa0uJtgGGWaGv74QMaGL62lxKbtFkYtosJB5HAfZ8+pEbfzzvLemYaYwaiQdFLBlexK2sFw==}
+  vitepress@1.5.0:
+    resolution: {integrity: sha512-q4Q/G2zjvynvizdB3/bupdYkCJe2umSAMv9Ju4d92E6/NXJ59z70xB0q5p/4lpRyAwflDsbwy1mLV9Q5+nlB+g==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4
@@ -7628,15 +7544,15 @@ packages:
   vitest-environment-nuxt@1.0.1:
     resolution: {integrity: sha512-eBCwtIQriXW5/M49FjqNKfnlJYlG2LWMSNFsRVKomc8CaMqmhQPBS5LZ9DlgYL9T8xIVsiA6RZn2lk7vxov3Ow==}
 
-  vitest@2.1.3:
-    resolution: {integrity: sha512-Zrxbg/WiIvUP2uEzelDNTXmEMJXuzJ1kCpbDvaKByFA9MNeO95V+7r/3ti0qzJzrxdyuUw5VduN7k+D3VmVOSA==}
+  vitest@2.1.5:
+    resolution: {integrity: sha512-P4ljsdpuzRTPI/kbND2sDZ4VmieerR2c9szEZpjc+98Z9ebvnXmM5+0tHEKqYZumXqlvnmfWsjeFOjXVriDG7A==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.1.3
-      '@vitest/ui': 2.1.3
+      '@vitest/browser': 2.1.5
+      '@vitest/ui': 2.1.5
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -7683,16 +7599,16 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
-  vue-component-meta@2.1.6:
-    resolution: {integrity: sha512-N5zReatWQTNqULhatFib69K82g5UhDERVobeqrT5S6Uk2QoCeYbsSY8nHRUwJFywE2iXRFN4B+XPhI+piZfC6w==}
+  vue-component-meta@2.1.10:
+    resolution: {integrity: sha512-YEFSau36lLCJNvoM6eynAcq891Y6HKIEdEk3PCzCyNVySeYJAXgE/9iCYqQzLtBJlKg/bBpImz8VbUZsh4N/7Q==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  vue-component-type-helpers@2.1.6:
-    resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==}
+  vue-component-type-helpers@2.1.10:
+    resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -7714,8 +7630,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-metamorph@3.2.0:
-    resolution: {integrity: sha512-dCWwwh7OngblFqUvD/pilS++TVnTHY1Nft2Tp02mHYv8ZrxFHN3NDMOKOoIg8lo7WR3TKxi3+bD/rmnN9tS2yw==}
+  vue-metamorph@3.2.2:
+    resolution: {integrity: sha512-+sdjJ8dqcKghAgT88cH1Q93tE5t10k7F3vqdHU0V8iMTIkRcEdfIb1AZT7jeORV0TMldFxyexnrnPQThgfWDVg==}
     hasBin: true
 
   vue-router@4.4.5:
@@ -7728,11 +7644,11 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue-sonner@1.2.2:
-    resolution: {integrity: sha512-aDziD+CXlYmmdjP2k6N7uiE4tWPx+x0bqBiyHr3zxtItmAZdagKkR5C9eHgpHUFAjNKPLMnmDzdE+kjqdjOjkg==}
+  vue-sonner@1.2.5:
+    resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
 
-  vue-tsc@2.1.6:
-    resolution: {integrity: sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==}
+  vue-tsc@2.1.10:
+    resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
@@ -7742,8 +7658,8 @@ packages:
     peerDependencies:
       vue: ^3.3.0
 
-  vue@3.5.12:
-    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -7856,6 +7772,9 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  yaml-ast-parser@0.0.43:
+    resolution: {integrity: sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==}
+
   yaml-eslint-parser@1.2.3:
     resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -7909,109 +7828,110 @@ packages:
 
 snapshots:
 
-  '@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.17.2)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)(search-insights@2.17.2)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.17.2)
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)(search-insights@2.17.2)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.17.2)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)(search-insights@2.17.2)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)
       search-insights: 2.17.2
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
 
-  '@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)':
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)
-      '@algolia/client-search': 4.24.0
-      algoliasearch: 4.24.0
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)
+      '@algolia/client-search': 5.14.2
+      algoliasearch: 5.14.2
 
-  '@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)':
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)':
     dependencies:
-      '@algolia/client-search': 4.24.0
-      algoliasearch: 4.24.0
+      '@algolia/client-search': 5.14.2
+      algoliasearch: 5.14.2
 
-  '@algolia/cache-browser-local-storage@4.24.0':
+  '@algolia/client-abtesting@5.14.2':
     dependencies:
-      '@algolia/cache-common': 4.24.0
-
-  '@algolia/cache-common@4.24.0': {}
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/cache-in-memory@4.24.0':
+  '@algolia/client-analytics@5.14.2':
     dependencies:
-      '@algolia/cache-common': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/client-account@4.24.0':
-    dependencies:
-      '@algolia/client-common': 4.24.0
-      '@algolia/client-search': 4.24.0
-      '@algolia/transporter': 4.24.0
+  '@algolia/client-common@5.14.2': {}
 
-  '@algolia/client-analytics@4.24.0':
+  '@algolia/client-insights@5.14.2':
     dependencies:
-      '@algolia/client-common': 4.24.0
-      '@algolia/client-search': 4.24.0
-      '@algolia/requester-common': 4.24.0
-      '@algolia/transporter': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/client-common@4.24.0':
+  '@algolia/client-personalization@5.14.2':
     dependencies:
-      '@algolia/requester-common': 4.24.0
-      '@algolia/transporter': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/client-personalization@4.24.0':
+  '@algolia/client-query-suggestions@5.14.2':
     dependencies:
-      '@algolia/client-common': 4.24.0
-      '@algolia/requester-common': 4.24.0
-      '@algolia/transporter': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/client-search@4.24.0':
+  '@algolia/client-search@5.14.2':
     dependencies:
-      '@algolia/client-common': 4.24.0
-      '@algolia/requester-common': 4.24.0
-      '@algolia/transporter': 4.24.0
-
-  '@algolia/logger-common@4.24.0': {}
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/logger-console@4.24.0':
+  '@algolia/ingestion@1.14.2':
     dependencies:
-      '@algolia/logger-common': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/recommend@4.24.0':
+  '@algolia/monitoring@1.14.2':
     dependencies:
-      '@algolia/cache-browser-local-storage': 4.24.0
-      '@algolia/cache-common': 4.24.0
-      '@algolia/cache-in-memory': 4.24.0
-      '@algolia/client-common': 4.24.0
-      '@algolia/client-search': 4.24.0
-      '@algolia/logger-common': 4.24.0
-      '@algolia/logger-console': 4.24.0
-      '@algolia/requester-browser-xhr': 4.24.0
-      '@algolia/requester-common': 4.24.0
-      '@algolia/requester-node-http': 4.24.0
-      '@algolia/transporter': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/requester-browser-xhr@4.24.0':
+  '@algolia/recommend@5.14.2':
     dependencies:
-      '@algolia/requester-common': 4.24.0
+      '@algolia/client-common': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
 
-  '@algolia/requester-common@4.24.0': {}
+  '@algolia/requester-browser-xhr@5.14.2':
+    dependencies:
+      '@algolia/client-common': 5.14.2
 
-  '@algolia/requester-node-http@4.24.0':
+  '@algolia/requester-fetch@5.14.2':
     dependencies:
-      '@algolia/requester-common': 4.24.0
+      '@algolia/client-common': 5.14.2
 
-  '@algolia/transporter@4.24.0':
+  '@algolia/requester-node-http@5.14.2':
     dependencies:
-      '@algolia/cache-common': 4.24.0
-      '@algolia/logger-common': 4.24.0
-      '@algolia/requester-common': 4.24.0
+      '@algolia/client-common': 5.14.2
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -8020,45 +7940,46 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@3.8.0(@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(@vue/compiler-sfc@3.5.12)(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))':
+  '@antfu/eslint-config@3.9.2(@typescript-eslint/utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(@vue/compiler-sfc@3.5.13)(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vitest@2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
       '@antfu/install-pkg': 0.4.1
-      '@clack/prompts': 0.7.0
-      '@eslint-community/eslint-plugin-eslint-comments': 4.4.0(eslint@9.13.0(jiti@2.3.3))
+      '@clack/prompts': 0.8.1
+      '@eslint-community/eslint-plugin-eslint-comments': 4.4.1(eslint@9.15.0(jiti@2.4.0))
       '@eslint/markdown': 6.2.1
-      '@stylistic/eslint-plugin': 2.9.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@vitest/eslint-plugin': 1.1.7(@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.13.0(jiti@2.3.3))
+      '@stylistic/eslint-plugin': 2.11.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@vitest/eslint-plugin': 1.1.10(@typescript-eslint/utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vitest@2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.15.0(jiti@2.4.0))
       eslint-flat-config-utils: 0.4.0
-      eslint-merge-processors: 0.1.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-antfu: 2.7.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-command: 0.2.6(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-import-x: 4.3.1(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint-plugin-jsdoc: 50.4.3(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-jsonc: 2.16.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-n: 17.11.1(eslint@9.13.0(jiti@2.3.3))
+      eslint-merge-processors: 0.1.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-antfu: 2.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-command: 0.2.6(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-import-x: 4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint-plugin-jsdoc: 50.5.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-jsonc: 2.18.2(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-n: 17.13.2(eslint@9.15.0(jiti@2.4.0))
       eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 3.9.1(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vue-eslint-parser@9.4.3(eslint@9.13.0(jiti@2.3.3)))
-      eslint-plugin-regexp: 2.6.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-toml: 0.11.1(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-unicorn: 56.0.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-vue: 9.29.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-yml: 1.14.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.12)(eslint@9.13.0(jiti@2.3.3))
-      globals: 15.11.0
+      eslint-plugin-perfectionist: 3.9.1(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.0)))
+      eslint-plugin-regexp: 2.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-toml: 0.11.1(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-unicorn: 56.0.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-yml: 1.15.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.15.0(jiti@2.4.0))
+      globals: 15.12.0
       jsonc-eslint-parser: 2.4.0
-      local-pkg: 0.5.0
+      local-pkg: 0.5.1
       parse-gitignore: 2.0.0
       picocolors: 1.1.1
       toml-eslint-parser: 0.10.0
-      vue-eslint-parser: 9.4.3(eslint@9.13.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
       yaml-eslint-parser: 1.2.3
       yargs: 17.7.2
     transitivePeerDependencies:
+      - '@eslint/json'
       - '@typescript-eslint/utils'
       - '@vue/compiler-sfc'
       - supports-color
@@ -8068,250 +7989,254 @@ snapshots:
 
   '@antfu/install-pkg@0.4.1':
     dependencies:
-      package-manager-detector: 0.2.2
+      package-manager-detector: 0.2.4
       tinyexec: 0.3.1
 
-  '@antfu/ni@0.23.0': {}
+  '@antfu/ni@0.23.1': {}
 
   '@antfu/utils@0.7.10': {}
 
-  '@babel/code-frame@7.25.7':
+  '@babel/code-frame@7.26.2':
     dependencies:
-      '@babel/highlight': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.25.8': {}
+  '@babel/compat-data@7.26.2': {}
 
-  '@babel/core@7.25.8':
+  '@babel/core@7.26.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.25.7
-      '@babel/generator': 7.25.7
-      '@babel/helper-compilation-targets': 7.25.7
-      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.8)
-      '@babel/helpers': 7.25.7
-      '@babel/parser': 7.25.8
-      '@babel/template': 7.25.7
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helpers': 7.26.0
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.25.7':
+  '@babel/generator@7.26.2':
     dependencies:
-      '@babel/types': 7.25.8
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 3.0.2
 
-  '@babel/helper-annotate-as-pure@7.25.7':
+  '@babel/helper-annotate-as-pure@7.25.9':
     dependencies:
-      '@babel/types': 7.25.8
+      '@babel/types': 7.26.0
 
-  '@babel/helper-compilation-targets@7.25.7':
+  '@babel/helper-compilation-targets@7.25.9':
     dependencies:
-      '@babel/compat-data': 7.25.8
-      '@babel/helper-validator-option': 7.25.7
-      browserslist: 4.24.0
+      '@babel/compat-data': 7.26.2
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.25.7(@babel/core@7.25.8)':
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-annotate-as-pure': 7.25.7
-      '@babel/helper-member-expression-to-functions': 7.25.7
-      '@babel/helper-optimise-call-expression': 7.25.7
-      '@babel/helper-replace-supers': 7.25.7(@babel/core@7.25.8)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
-      '@babel/traverse': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.25.9
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-member-expression-to-functions@7.25.7':
+  '@babel/helper-member-expression-to-functions@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.25.7':
+  '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.25.7(@babel/core@7.25.8)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-module-imports': 7.25.7
-      '@babel/helper-simple-access': 7.25.7
-      '@babel/helper-validator-identifier': 7.25.7
-      '@babel/traverse': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.25.7':
+  '@babel/helper-optimise-call-expression@7.25.9':
     dependencies:
-      '@babel/types': 7.25.8
+      '@babel/types': 7.26.0
 
-  '@babel/helper-plugin-utils@7.25.7': {}
+  '@babel/helper-plugin-utils@7.25.9': {}
 
-  '@babel/helper-replace-supers@7.25.7(@babel/core@7.25.8)':
+  '@babel/helper-replace-supers@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-member-expression-to-functions': 7.25.7
-      '@babel/helper-optimise-call-expression': 7.25.7
-      '@babel/traverse': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-simple-access@7.25.7':
+  '@babel/helper-simple-access@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.25.7':
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.25.7': {}
+  '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-validator-identifier@7.25.7': {}
+  '@babel/helper-string-parser@8.0.0-alpha.13': {}
 
-  '@babel/helper-validator-option@7.25.7': {}
+  '@babel/helper-validator-identifier@7.25.9': {}
 
-  '@babel/helpers@7.25.7':
-    dependencies:
-      '@babel/template': 7.25.7
-      '@babel/types': 7.25.8
+  '@babel/helper-validator-identifier@8.0.0-alpha.13': {}
 
-  '@babel/highlight@7.25.7':
+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helpers@7.26.0':
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
 
-  '@babel/parser@7.25.8':
+  '@babel/parser@7.26.2':
     dependencies:
-      '@babel/types': 7.25.8
+      '@babel/types': 7.26.0
 
-  '@babel/parser@8.0.0-alpha.12': {}
+  '@babel/parser@8.0.0-alpha.13':
+    dependencies:
+      '@babel/types': 8.0.0-alpha.13
 
-  '@babel/plugin-proposal-decorators@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.8)
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/plugin-syntax-decorators': 7.25.7(@babel/core@7.25.8)
+      '@babel/core': 7.26.0
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-decorators': 7.25.9(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-syntax-decorators@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-syntax-decorators@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-attributes@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.8)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-jsx@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-typescript@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-transform-modules-commonjs@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.8)
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/helper-simple-access': 7.25.7
+      '@babel/core': 7.26.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-simple-access': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-typescript@7.25.7(@babel/core@7.25.8)':
+  '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-annotate-as-pure': 7.25.7
-      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.8)
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
-      '@babel/plugin-syntax-typescript': 7.25.7(@babel/core@7.25.8)
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.25.7(@babel/core@7.25.8)':
+  '@babel/preset-typescript@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/helper-validator-option': 7.25.7
-      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-transform-modules-commonjs': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/runtime@7.25.7':
+  '@babel/runtime@7.26.0':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/standalone@7.25.8': {}
+  '@babel/standalone@7.26.2': {}
 
-  '@babel/template@7.25.7':
+  '@babel/template@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.25.7
-      '@babel/parser': 7.25.8
-      '@babel/types': 7.25.8
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
 
-  '@babel/traverse@7.25.7':
+  '@babel/traverse@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.25.7
-      '@babel/generator': 7.25.7
-      '@babel/parser': 7.25.8
-      '@babel/template': 7.25.7
-      '@babel/types': 7.25.8
-      debug: 4.3.7
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
+      debug: 4.3.7(supports-color@9.4.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.25.8':
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
+  '@babel/types@8.0.0-alpha.13':
     dependencies:
-      '@babel/helper-string-parser': 7.25.7
-      '@babel/helper-validator-identifier': 7.25.7
-      to-fast-properties: 2.0.0
+      '@babel/helper-string-parser': 8.0.0-alpha.13
+      '@babel/helper-validator-identifier': 8.0.0-alpha.13
 
   '@clack/core@0.3.4':
     dependencies:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@clack/prompts@0.7.0':
+  '@clack/prompts@0.8.1':
     dependencies:
       '@clack/core': 0.3.4
       picocolors: 1.1.1
@@ -8321,11 +8246,11 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
-  '@commitlint/cli@19.5.0(@types/node@22.7.7)(typescript@5.6.3)':
+  '@commitlint/cli@19.5.0(@types/node@22.9.0)(typescript@5.6.3)':
     dependencies:
       '@commitlint/format': 19.5.0
       '@commitlint/lint': 19.5.0
-      '@commitlint/load': 19.5.0(@types/node@22.7.7)(typescript@5.6.3)
+      '@commitlint/load': 19.5.0(@types/node@22.9.0)(typescript@5.6.3)
       '@commitlint/read': 19.5.0
       '@commitlint/types': 19.5.0
       tinyexec: 0.3.1
@@ -8372,7 +8297,7 @@ snapshots:
       '@commitlint/rules': 19.5.0
       '@commitlint/types': 19.5.0
 
-  '@commitlint/load@19.5.0(@types/node@22.7.7)(typescript@5.6.3)':
+  '@commitlint/load@19.5.0(@types/node@22.9.0)(typescript@5.6.3)':
     dependencies:
       '@commitlint/config-validator': 19.5.0
       '@commitlint/execute-rule': 19.5.0
@@ -8380,7 +8305,7 @@ snapshots:
       '@commitlint/types': 19.5.0
       chalk: 5.3.0
       cosmiconfig: 9.0.0(typescript@5.6.3)
-      cosmiconfig-typescript-loader: 5.1.0(@types/node@22.7.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
+      cosmiconfig-typescript-loader: 5.1.0(@types/node@22.9.0)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -8431,19 +8356,19 @@ snapshots:
       '@types/conventional-commits-parser': 5.0.0
       chalk: 5.3.0
 
-  '@csstools/selector-resolve-nested@2.0.0(postcss-selector-parser@6.1.2)':
+  '@csstools/selector-resolve-nested@3.0.0(postcss-selector-parser@7.0.0)':
     dependencies:
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.0.0
 
-  '@csstools/selector-specificity@4.0.0(postcss-selector-parser@6.1.2)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.0.0)':
     dependencies:
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.0.0
 
-  '@docsearch/css@3.6.2': {}
+  '@docsearch/css@3.8.0': {}
 
-  '@docsearch/js@3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)':
+  '@docsearch/js@3.8.0(@algolia/client-search@5.14.2)(search-insights@2.17.2)':
     dependencies:
-      '@docsearch/react': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)
+      '@docsearch/react': 3.8.0(@algolia/client-search@5.14.2)(search-insights@2.17.2)
       preact: 10.24.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -8452,12 +8377,12 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)':
+  '@docsearch/react@3.8.0(@algolia/client-search@5.14.2)(search-insights@2.17.2)':
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)(search-insights@2.17.2)
-      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.24.0)(algoliasearch@4.24.0)
-      '@docsearch/css': 3.6.2
-      algoliasearch: 4.24.0
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)(search-insights@2.17.2)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.14.2)(algoliasearch@5.14.2)
+      '@docsearch/css': 3.8.0
+      algoliasearch: 5.14.2
     optionalDependencies:
       search-insights: 2.17.2
     transitivePeerDependencies:
@@ -8465,8 +8390,8 @@ snapshots:
 
   '@emotion/babel-plugin@11.12.0':
     dependencies:
-      '@babel/helper-module-imports': 7.25.7
-      '@babel/runtime': 7.25.7
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/runtime': 7.26.0
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/serialize': 1.3.2
@@ -8532,9 +8457,6 @@ snapshots:
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
 
-  '@esbuild/aix-ppc64@0.20.2':
-    optional: true
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -8547,9 +8469,6 @@ snapshots:
   '@esbuild/android-arm64@0.19.12':
     optional: true
 
-  '@esbuild/android-arm64@0.20.2':
-    optional: true
-
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
@@ -8562,9 +8481,6 @@ snapshots:
   '@esbuild/android-arm@0.19.12':
     optional: true
 
-  '@esbuild/android-arm@0.20.2':
-    optional: true
-
   '@esbuild/android-arm@0.21.5':
     optional: true
 
@@ -8577,9 +8493,6 @@ snapshots:
   '@esbuild/android-x64@0.19.12':
     optional: true
 
-  '@esbuild/android-x64@0.20.2':
-    optional: true
-
   '@esbuild/android-x64@0.21.5':
     optional: true
 
@@ -8592,9 +8505,6 @@ snapshots:
   '@esbuild/darwin-arm64@0.19.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.20.2':
-    optional: true
-
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
@@ -8607,9 +8517,6 @@ snapshots:
   '@esbuild/darwin-x64@0.19.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.20.2':
-    optional: true
-
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
@@ -8622,9 +8529,6 @@ snapshots:
   '@esbuild/freebsd-arm64@0.19.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.20.2':
-    optional: true
-
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
@@ -8637,9 +8541,6 @@ snapshots:
   '@esbuild/freebsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
@@ -8652,9 +8553,6 @@ snapshots:
   '@esbuild/linux-arm64@0.19.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.20.2':
-    optional: true
-
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
@@ -8667,9 +8565,6 @@ snapshots:
   '@esbuild/linux-arm@0.19.12':
     optional: true
 
-  '@esbuild/linux-arm@0.20.2':
-    optional: true
-
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
@@ -8682,9 +8577,6 @@ snapshots:
   '@esbuild/linux-ia32@0.19.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.20.2':
-    optional: true
-
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
@@ -8697,9 +8589,6 @@ snapshots:
   '@esbuild/linux-loong64@0.19.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.20.2':
-    optional: true
-
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
@@ -8712,9 +8601,6 @@ snapshots:
   '@esbuild/linux-mips64el@0.19.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.20.2':
-    optional: true
-
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
@@ -8727,9 +8613,6 @@ snapshots:
   '@esbuild/linux-ppc64@0.19.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.20.2':
-    optional: true
-
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
@@ -8742,9 +8625,6 @@ snapshots:
   '@esbuild/linux-riscv64@0.19.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.20.2':
-    optional: true
-
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
@@ -8757,9 +8637,6 @@ snapshots:
   '@esbuild/linux-s390x@0.19.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.20.2':
-    optional: true
-
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
@@ -8772,9 +8649,6 @@ snapshots:
   '@esbuild/linux-x64@0.19.12':
     optional: true
 
-  '@esbuild/linux-x64@0.20.2':
-    optional: true
-
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
@@ -8787,9 +8661,6 @@ snapshots:
   '@esbuild/netbsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
@@ -8808,9 +8679,6 @@ snapshots:
   '@esbuild/openbsd-x64@0.19.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
@@ -8823,9 +8691,6 @@ snapshots:
   '@esbuild/sunos-x64@0.19.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.20.2':
-    optional: true
-
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
@@ -8838,9 +8703,6 @@ snapshots:
   '@esbuild/win32-arm64@0.19.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.20.2':
-    optional: true
-
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
@@ -8853,9 +8715,6 @@ snapshots:
   '@esbuild/win32-ia32@0.19.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.20.2':
-    optional: true
-
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
@@ -8868,9 +8727,6 @@ snapshots:
   '@esbuild/win32-x64@0.19.12':
     optional: true
 
-  '@esbuild/win32-x64@0.20.2':
-    optional: true
-
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
@@ -8880,38 +8736,38 @@ snapshots:
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
-  '@eslint-community/eslint-plugin-eslint-comments@4.4.0(eslint@9.13.0(jiti@2.3.3))':
+  '@eslint-community/eslint-plugin-eslint-comments@4.4.1(eslint@9.15.0(jiti@2.4.0))':
     dependencies:
       escape-string-regexp: 4.0.0
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       ignore: 5.3.2
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.13.0(jiti@2.3.3))':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.15.0(jiti@2.4.0))':
     dependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.11.1': {}
+  '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.2.1(eslint@9.13.0(jiti@2.3.3))':
+  '@eslint/compat@1.2.3(eslint@9.15.0(jiti@2.4.0))':
     optionalDependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  '@eslint/config-array@0.18.0':
+  '@eslint/config-array@0.19.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.7.0': {}
+  '@eslint/core@0.9.0': {}
 
-  '@eslint/eslintrc@3.1.0':
+  '@eslint/eslintrc@3.2.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
-      espree: 10.2.0
+      debug: 4.3.7(supports-color@9.4.0)
+      espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.0
@@ -8921,12 +8777,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.13.0': {}
+  '@eslint/js@9.15.0': {}
 
   '@eslint/markdown@6.2.1':
     dependencies:
-      '@eslint/plugin-kit': 0.2.1
-      mdast-util-from-markdown: 2.0.1
+      '@eslint/plugin-kit': 0.2.3
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm: 3.0.0
       micromark-extension-gfm: 3.0.0
     transitivePeerDependencies:
@@ -8934,50 +8790,50 @@ snapshots:
 
   '@eslint/object-schema@2.1.4': {}
 
-  '@eslint/plugin-kit@0.2.1':
+  '@eslint/plugin-kit@0.2.3':
     dependencies:
       levn: 0.4.1
 
-  '@fastify/busboy@2.1.1': {}
-
   '@floating-ui/core@1.6.8':
     dependencies:
       '@floating-ui/utils': 0.2.8
 
-  '@floating-ui/dom@1.6.11':
+  '@floating-ui/dom@1.6.12':
     dependencies:
       '@floating-ui/core': 1.6.8
       '@floating-ui/utils': 0.2.8
 
   '@floating-ui/utils@0.2.8': {}
 
-  '@floating-ui/vue@1.1.5(vue@3.5.12(typescript@5.6.3))':
+  '@floating-ui/vue@1.1.5(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@floating-ui/dom': 1.6.11
+      '@floating-ui/dom': 1.6.12
       '@floating-ui/utils': 0.2.8
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
   '@formkit/auto-animate@0.8.2': {}
 
-  '@humanfs/core@0.19.0': {}
+  '@humanfs/core@0.19.1': {}
 
-  '@humanfs/node@0.16.5':
+  '@humanfs/node@0.16.6':
     dependencies:
-      '@humanfs/core': 0.19.0
+      '@humanfs/core': 0.19.1
       '@humanwhocodes/retry': 0.3.1
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
   '@humanwhocodes/retry@0.3.1': {}
 
+  '@humanwhocodes/retry@0.4.1': {}
+
   '@iconify-json/gravity-ui@1.2.2':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/lucide@1.2.10':
+  '@iconify-json/lucide@1.2.15':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -8989,15 +8845,15 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/ri@1.2.1':
+  '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.8':
+  '@iconify-json/simple-icons@1.2.11':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/tabler@1.2.5':
+  '@iconify-json/tabler@1.2.8':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -9008,25 +8864,25 @@ snapshots:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
       '@iconify/types': 2.0.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       kolorist: 1.8.0
-      local-pkg: 0.5.0
-      mlly: 1.7.2
+      local-pkg: 0.5.1
+      mlly: 1.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@iconify/vue@4.1.2(vue@3.5.12(typescript@5.6.3))':
+  '@iconify/vue@4.1.2(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   '@internationalized/date@3.5.6':
     dependencies:
-      '@swc/helpers': 0.5.13
+      '@swc/helpers': 0.5.15
 
   '@internationalized/number@3.5.4':
     dependencies:
-      '@swc/helpers': 0.5.13
+      '@swc/helpers': 0.5.15
 
   '@ioredis/commands@1.2.0': {}
 
@@ -9064,7 +8920,7 @@ snapshots:
   '@jsdevtools/ez-spawn@3.0.4':
     dependencies:
       call-me-maybe: 1.0.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       string-argv: 0.3.2
       type-detect: 4.1.0
 
@@ -9072,7 +8928,7 @@ snapshots:
 
   '@koa/router@12.0.2':
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       http-errors: 2.0.0
       koa-compose: 4.1.0
       methods: 1.1.2
@@ -9082,7 +8938,7 @@ snapshots:
 
   '@kwsites/file-exists@1.1.1':
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -9155,17 +9011,16 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))':
+  '@nuxt/devtools-kit@1.6.0(magicast@0.3.5)(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      '@nuxt/schema': 3.13.2(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@nuxt/schema': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       execa: 7.2.0
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
   '@nuxt/devtools-wizard@1.6.0':
     dependencies:
@@ -9180,28 +9035,28 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/devtools@1.6.0(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))
+      '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))
       '@nuxt/devtools-wizard': 1.6.0
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      '@vue/devtools-core': 7.4.4(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@vue/devtools-core': 7.4.4(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@vue/devtools-kit': 7.4.4
       birpc: 0.2.19
       consola: 3.2.3
-      cronstrue: 2.50.0
+      cronstrue: 2.51.0
       destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
       fast-npm-meta: 0.2.2
-      flatted: 3.3.1
+      flatted: 3.3.2
       get-port-please: 3.1.2
       hookable: 5.5.3
       image-meta: 0.2.1
       is-installed-globally: 1.0.0
       launch-editor: 2.9.1
-      local-pkg: 0.5.0
+      local-pkg: 0.5.1
       magicast: 0.3.5
       nypm: 0.3.12
       ohash: 1.1.4
@@ -9213,11 +9068,11 @@ snapshots:
       semver: 7.6.3
       simple-git: 3.27.0
       sirv: 2.0.4
-      tinyglobby: 0.2.6
-      unimport: 3.13.1(rollup@4.24.0)
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))
-      vite-plugin-vue-inspector: 5.1.3(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))
+      tinyglobby: 0.2.10
+      unimport: 3.13.2(rollup@4.27.3)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))
+      vite-plugin-vue-inspector: 5.1.3(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))
       which: 3.0.1
       ws: 8.18.0
     transitivePeerDependencies:
@@ -9226,90 +9081,88 @@ snapshots:
       - supports-color
       - utf-8-validate
       - vue
-      - webpack-sources
 
-  '@nuxt/eslint-config@0.5.7(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@nuxt/eslint-config@0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint/js': 9.13.0
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@stylistic/eslint-plugin': 2.9.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.13.0(jiti@2.3.3))
+      '@eslint/js': 9.15.0
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@stylistic/eslint-plugin': 2.11.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.15.0(jiti@2.4.0))
       eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.3.1(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint-plugin-jsdoc: 50.4.3(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-regexp: 2.6.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-vue: 9.29.0(eslint@9.13.0(jiti@2.3.3))
-      globals: 15.11.0
-      local-pkg: 0.5.0
+      eslint-plugin-import-x: 4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint-plugin-jsdoc: 50.5.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-regexp: 2.7.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.15.0(jiti@2.4.0))
+      eslint-plugin-vue: 9.31.0(eslint@9.15.0(jiti@2.4.0))
+      globals: 15.12.0
+      local-pkg: 0.5.1
       pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.13.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0)':
+  '@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
-      '@nuxt/schema': 3.13.2(rollup@4.24.0)
-      c12: 1.11.2(magicast@0.3.5)
+      '@nuxt/schema': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      c12: 2.0.1(magicast@0.3.5)
       consola: 3.2.3
       defu: 6.1.4
       destr: 2.0.3
       globby: 14.0.2
       hash-sum: 2.0.0
-      ignore: 5.3.2
-      jiti: 1.21.6
+      ignore: 6.0.2
+      jiti: 2.4.0
       klona: 2.0.6
       knitwork: 1.1.0
-      mlly: 1.7.2
+      mlly: 1.7.3
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
       semver: 7.6.3
       ufo: 1.5.4
       unctx: 2.3.1
-      unimport: 3.13.1(rollup@4.24.0)
+      unimport: 3.13.2(rollup@4.27.3)
       untyped: 1.5.1
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0))(nuxi@3.14.0)(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.27.3))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       citty: 0.1.6
       consola: 3.2.3
       defu: 6.1.4
       magic-regexp: 0.8.0
-      mlly: 1.7.2
-      nuxi: 3.14.0
+      mlly: 1.7.3
+      nuxi: 3.15.0
       pathe: 1.1.2
       pkg-types: 1.2.1
       tsconfck: 3.1.4(typescript@5.6.3)
-      unbuild: 2.0.0(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))
+      unbuild: 2.0.0(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
     transitivePeerDependencies:
       - sass
       - supports-color
       - typescript
       - vue-tsc
-      - webpack-sources
 
-  '@nuxt/schema@3.13.2(rollup@4.24.0)':
+  '@nuxt/schema@3.14.159(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
+      c12: 2.0.1(magicast@0.3.5)
       compatx: 0.1.8
       consola: 3.2.3
       defu: 6.1.4
@@ -9317,20 +9170,20 @@ snapshots:
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
-      std-env: 3.7.0
+      std-env: 3.8.0
       ufo: 1.5.4
       uncrypto: 0.1.3
-      unimport: 3.13.1(rollup@4.24.0)
+      unimport: 3.13.2(rollup@4.27.3)
       untyped: 1.5.1
     transitivePeerDependencies:
+      - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
-  '@nuxt/telemetry@2.6.0(magicast@0.3.5)(rollup@4.24.0)':
+  '@nuxt/telemetry@2.6.0(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      ci-info: 4.0.0
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      ci-info: 4.1.0
       consola: 3.2.3
       create-require: 1.1.1
       defu: 6.1.4
@@ -9340,23 +9193,22 @@ snapshots:
       is-docker: 3.0.0
       jiti: 1.21.6
       mri: 1.2.0
-      nanoid: 5.0.7
+      nanoid: 5.0.8
       ofetch: 1.4.1
-      package-manager-detector: 0.2.2
+      package-manager-detector: 0.2.4
       parse-git-config: 3.0.0
       pathe: 1.1.2
       rc9: 2.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
-  '@nuxt/test-utils@3.14.4(@vitest/ui@2.1.3(vitest@2.1.3))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/test-utils@3.14.4(@vitest/ui@2.1.5(vitest@2.1.5))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      '@nuxt/schema': 3.13.2(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@nuxt/schema': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       c12: 2.0.1(magicast@0.3.5)
       consola: 3.2.3
       defu: 6.1.4
@@ -9365,68 +9217,68 @@ snapshots:
       fake-indexeddb: 6.0.0
       get-port-please: 3.1.2
       h3: 1.13.0
-      local-pkg: 0.5.0
-      magic-string: 0.30.12
-      nitropack: 2.9.7(encoding@0.1.13)(magicast@0.3.5)
+      local-pkg: 0.5.1
+      magic-string: 0.30.13
+      nitropack: 2.10.4(encoding@0.1.13)(typescript@5.6.3)
       node-fetch-native: 1.6.4
       ofetch: 1.4.1
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       radix3: 1.1.2
       scule: 1.3.0
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinyexec: 0.3.1
       ufo: 1.5.4
       unenv: 1.10.0
-      unplugin: 1.14.1
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vitest-environment-nuxt: 1.0.1(@vitest/ui@2.1.3(vitest@2.1.3))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
-      vue: 3.5.12(typescript@5.6.3)
-      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
+      unplugin: 1.16.0
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vitest-environment-nuxt: 1.0.1(@vitest/ui@2.1.5(vitest@2.1.5))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
-      '@vitest/ui': 2.1.3(vitest@2.1.3)
-      vitest: 2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0)
+      '@vitest/ui': 2.1.5(vitest@2.1.5)
+      vitest: 2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
-  '@nuxt/vite-builder@3.13.2(@types/node@20.16.13)(eslint@9.13.0(jiti@2.3.3))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/vite-builder@3.14.159(@types/node@20.17.6)(eslint@9.15.0(jiti@2.4.0))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      '@rollup/plugin-replace': 5.0.7(rollup@4.24.0)
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      autoprefixer: 10.4.20(postcss@8.4.47)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@rollup/plugin-replace': 6.0.1(rollup@4.27.3)
+      '@vitejs/plugin-vue': 5.2.0(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+      '@vitejs/plugin-vue-jsx': 4.1.0(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+      autoprefixer: 10.4.20(postcss@8.4.49)
       clear: 0.1.0
       consola: 3.2.3
-      cssnano: 7.0.6(postcss@8.4.47)
+      cssnano: 7.0.6(postcss@8.4.49)
       defu: 6.1.4
-      esbuild: 0.23.1
+      esbuild: 0.24.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       externality: 1.0.2
       get-port-please: 3.1.2
       h3: 1.13.0
+      jiti: 2.4.0
       knitwork: 1.1.0
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      magic-string: 0.30.13
+      mlly: 1.7.3
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.2.1
-      postcss: 8.4.47
-      rollup-plugin-visualizer: 5.12.0(rollup@4.24.0)
-      std-env: 3.7.0
+      postcss: 8.4.49
+      rollup-plugin-visualizer: 5.12.0(rollup@4.27.3)
+      std-env: 3.8.0
       strip-literal: 2.1.0
       ufo: 1.5.4
       unenv: 1.10.0
-      unplugin: 1.14.1
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vite-node: 2.1.3(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vite-plugin-checker: 0.8.0(eslint@9.13.0(jiti@2.3.3))(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.6(typescript@5.6.3))
-      vue: 3.5.12(typescript@5.6.3)
+      unplugin: 1.16.0
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vite-node: 2.1.5(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vite-plugin-checker: 0.8.0(eslint@9.15.0(jiti@2.4.0))(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
       - '@biomejs/biome'
@@ -9449,12 +9301,10 @@ snapshots:
       - vls
       - vti
       - vue-tsc
-      - webpack-sources
 
-  '@nuxtjs/color-mode@3.5.1(magicast@0.3.5)(rollup@4.24.0)':
+  '@nuxtjs/color-mode@3.5.2(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      changelogen: 0.5.7(magicast@0.3.5)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       pathe: 1.1.2
       pkg-types: 1.2.1
       semver: 7.6.3
@@ -9462,21 +9312,20 @@ snapshots:
       - magicast
       - rollup
       - supports-color
-      - webpack-sources
 
-  '@nuxtjs/tailwindcss@6.12.2(magicast@0.3.5)(rollup@4.24.0)':
+  '@nuxtjs/tailwindcss@6.12.2(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      autoprefixer: 10.4.20(postcss@8.4.47)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      autoprefixer: 10.4.20(postcss@8.4.49)
       consola: 3.2.3
       defu: 6.1.4
       h3: 1.13.0
       klona: 2.0.6
       pathe: 1.1.2
-      postcss: 8.4.47
-      postcss-nesting: 13.0.0(postcss@8.4.47)
-      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.14)
-      tailwindcss: 3.4.14
+      postcss: 8.4.49
+      postcss-nesting: 13.0.1(postcss@8.4.49)
+      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.15)
+      tailwindcss: 3.4.15
       ufo: 1.5.4
       unctx: 2.3.1
     transitivePeerDependencies:
@@ -9484,70 +9333,73 @@ snapshots:
       - rollup
       - supports-color
       - ts-node
-      - webpack-sources
 
   '@oxc-parser/wasm@0.29.0': {}
 
-  '@parcel/watcher-android-arm64@2.4.1':
+  '@parcel/watcher-android-arm64@2.5.0':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.0':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
+  '@parcel/watcher-darwin-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.4.1':
+  '@parcel/watcher-freebsd-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
+  '@parcel/watcher-linux-arm-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
+  '@parcel/watcher-linux-arm-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
+  '@parcel/watcher-linux-arm64-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
+  '@parcel/watcher-linux-arm64-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
+  '@parcel/watcher-linux-x64-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
+  '@parcel/watcher-linux-x64-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-wasm@2.4.1':
+  '@parcel/watcher-wasm@2.5.0':
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.8
 
-  '@parcel/watcher-win32-arm64@2.4.1':
+  '@parcel/watcher-win32-arm64@2.5.0':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.4.1':
+  '@parcel/watcher-win32-ia32@2.5.0':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.4.1':
+  '@parcel/watcher-win32-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher@2.4.1':
+  '@parcel/watcher@2.5.0':
     dependencies:
       detect-libc: 1.0.3
       is-glob: 4.0.3
       micromatch: 4.0.8
       node-addon-api: 7.1.1
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.4.1
-      '@parcel/watcher-darwin-arm64': 2.4.1
-      '@parcel/watcher-darwin-x64': 2.4.1
-      '@parcel/watcher-freebsd-x64': 2.4.1
-      '@parcel/watcher-linux-arm-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-musl': 2.4.1
-      '@parcel/watcher-linux-x64-glibc': 2.4.1
-      '@parcel/watcher-linux-x64-musl': 2.4.1
-      '@parcel/watcher-win32-arm64': 2.4.1
-      '@parcel/watcher-win32-ia32': 2.4.1
-      '@parcel/watcher-win32-x64': 2.4.1
+      '@parcel/watcher-android-arm64': 2.5.0
+      '@parcel/watcher-darwin-arm64': 2.5.0
+      '@parcel/watcher-darwin-x64': 2.5.0
+      '@parcel/watcher-freebsd-x64': 2.5.0
+      '@parcel/watcher-linux-arm-glibc': 2.5.0
+      '@parcel/watcher-linux-arm-musl': 2.5.0
+      '@parcel/watcher-linux-arm64-glibc': 2.5.0
+      '@parcel/watcher-linux-arm64-musl': 2.5.0
+      '@parcel/watcher-linux-x64-glibc': 2.5.0
+      '@parcel/watcher-linux-x64-musl': 2.5.0
+      '@parcel/watcher-win32-arm64': 2.5.0
+      '@parcel/watcher-win32-ia32': 2.5.0
+      '@parcel/watcher-win32-x64': 2.5.0
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -9558,63 +9410,90 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@radix-icons/vue@1.0.0(vue@3.5.12(typescript@5.6.3))':
+  '@radix-icons/vue@1.0.0(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
+
+  '@redocly/ajv@8.11.2':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js-replace: 1.0.1
+
+  '@redocly/config@0.16.0': {}
+
+  '@redocly/openapi-core@1.25.11(encoding@0.1.13)(supports-color@9.4.0)':
+    dependencies:
+      '@redocly/ajv': 8.11.2
+      '@redocly/config': 0.16.0
+      colorette: 1.4.0
+      https-proxy-agent: 7.0.5(supports-color@9.4.0)
+      js-levenshtein: 1.1.6
+      js-yaml: 4.1.0
+      lodash.isequal: 4.5.0
+      minimatch: 5.1.6
+      node-fetch: 2.7.0(encoding@0.1.13)
+      pluralize: 8.0.0
+      yaml-ast-parser: 0.0.43
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
 
   '@rollup/plugin-alias@5.1.1(rollup@3.29.5)':
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.24.0)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.27.3)':
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   '@rollup/plugin-commonjs@25.0.8(rollup@3.29.5)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@3.29.5)
+      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
-      magic-string: 0.30.12
+      magic-string: 0.30.13
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-commonjs@25.0.8(rollup@4.24.0)':
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.27.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      glob: 8.1.0
+      fdir: 6.4.2(picomatch@4.0.2)
       is-reference: 1.2.1
-      magic-string: 0.30.12
+      magic-string: 0.30.13
+      picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.24.0)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.27.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
       estree-walker: 2.0.2
-      magic-string: 0.30.12
+      magic-string: 0.30.13
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   '@rollup/plugin-json@6.1.0(rollup@3.29.5)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@3.29.5)
+      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-json@6.1.0(rollup@4.24.0)':
+  '@rollup/plugin-json@6.1.0(rollup@4.27.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   '@rollup/plugin-node-resolve@15.3.0(rollup@3.29.5)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@3.29.5)
+      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
@@ -9622,157 +9501,138 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.0)':
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.27.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.8
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   '@rollup/plugin-replace@5.0.7(rollup@3.29.5)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@3.29.5)
-      magic-string: 0.30.12
+      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
+      magic-string: 0.30.13
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-replace@5.0.7(rollup@4.24.0)':
+  '@rollup/plugin-replace@6.0.1(rollup@4.27.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      magic-string: 0.30.12
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      magic-string: 0.30.13
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.24.0)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.27.3)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.36.0
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   '@rollup/pluginutils@4.2.1':
     dependencies:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.1.2(rollup@3.29.5)':
+  '@rollup/pluginutils@5.1.3(rollup@3.29.5)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/pluginutils@5.1.2(rollup@4.24.0)':
+  '@rollup/pluginutils@5.1.3(rollup@4.27.3)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
-  '@rollup/rollup-android-arm-eabi@4.24.0':
+  '@rollup/rollup-android-arm-eabi@4.27.3':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.24.0':
+  '@rollup/rollup-android-arm64@4.27.3':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.24.0':
+  '@rollup/rollup-darwin-arm64@4.27.3':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.24.0':
+  '@rollup/rollup-darwin-x64@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
+  '@rollup/rollup-freebsd-arm64@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
+  '@rollup/rollup-freebsd-x64@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.24.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.24.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
+  '@rollup/rollup-linux-arm64-gnu@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
+  '@rollup/rollup-linux-arm64-musl@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.24.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.24.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.27.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.24.0':
+  '@rollup/rollup-linux-s390x-gnu@4.27.3':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.24.0':
+  '@rollup/rollup-linux-x64-gnu@4.27.3':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.24.0':
+  '@rollup/rollup-linux-x64-musl@4.27.3':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.24.0':
+  '@rollup/rollup-win32-arm64-msvc@4.27.3':
     optional: true
 
-  '@shikijs/core@1.22.0':
-    dependencies:
-      '@shikijs/engine-javascript': 1.22.0
-      '@shikijs/engine-oniguruma': 1.22.0
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
+  '@rollup/rollup-win32-ia32-msvc@4.27.3':
+    optional: true
 
-  '@shikijs/core@1.22.1':
+  '@rollup/rollup-win32-x64-msvc@4.27.3':
+    optional: true
+
+  '@shikijs/core@1.23.1':
     dependencies:
-      '@shikijs/engine-javascript': 1.22.1
-      '@shikijs/engine-oniguruma': 1.22.1
-      '@shikijs/types': 1.22.1
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.3
 
-  '@shikijs/engine-javascript@1.22.0':
+  '@shikijs/engine-javascript@1.23.1':
     dependencies:
-      '@shikijs/types': 1.22.0
+      '@shikijs/types': 1.23.1
       '@shikijs/vscode-textmate': 9.3.0
-      oniguruma-to-js: 0.4.3
+      oniguruma-to-es: 0.4.1
 
-  '@shikijs/engine-javascript@1.22.1':
+  '@shikijs/engine-oniguruma@1.23.1':
     dependencies:
-      '@shikijs/types': 1.22.1
+      '@shikijs/types': 1.23.1
       '@shikijs/vscode-textmate': 9.3.0
-      oniguruma-to-js: 0.4.3
 
-  '@shikijs/engine-oniguruma@1.22.0':
+  '@shikijs/transformers@1.23.1':
     dependencies:
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
+      shiki: 1.23.1
 
-  '@shikijs/engine-oniguruma@1.22.1':
-    dependencies:
-      '@shikijs/types': 1.22.1
-      '@shikijs/vscode-textmate': 9.3.0
-
-  '@shikijs/transformers@1.22.0':
-    dependencies:
-      shiki: 1.22.0
-
-  '@shikijs/types@1.22.0':
-    dependencies:
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-
-  '@shikijs/types@1.22.1':
+  '@shikijs/types@1.23.1':
     dependencies:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
@@ -9783,41 +9643,41 @@ snapshots:
 
   '@stackblitz/sdk@1.11.0': {}
 
-  '@stylistic/eslint-plugin@2.9.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@stylistic/eslint-plugin@2.11.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-visitor-keys: 4.1.0
-      espree: 10.2.0
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       estraverse: 5.3.0
       picomatch: 4.0.2
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@swc/helpers@0.5.13':
+  '@swc/helpers@0.5.15':
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   '@tanstack/table-core@8.20.5': {}
 
-  '@tanstack/virtual-core@3.10.8': {}
+  '@tanstack/virtual-core@3.10.9': {}
 
-  '@tanstack/vue-table@8.20.5(vue@3.5.12(typescript@5.6.3))':
+  '@tanstack/vue-table@8.20.5(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@tanstack/table-core': 8.20.5
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
-  '@tanstack/vue-virtual@3.10.8(vue@3.5.12(typescript@5.6.3))':
+  '@tanstack/vue-virtual@3.10.9(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@tanstack/virtual-core': 3.10.8
-      vue: 3.5.12(typescript@5.6.3)
+      '@tanstack/virtual-core': 3.10.9
+      vue: 3.5.13(typescript@5.6.3)
 
   '@trysound/sax@0.2.0': {}
 
   '@types/conventional-commits-parser@5.0.0':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
 
   '@types/d3-array@3.2.1': {}
 
@@ -9961,7 +9821,7 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
 
   '@types/geojson@7946.0.14': {}
 
@@ -9971,17 +9831,17 @@ snapshots:
 
   '@types/http-proxy@1.17.15':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 20.17.6
 
   '@types/json-schema@7.0.15': {}
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
 
   '@types/keyv@3.1.4':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
 
   '@types/leaflet@1.7.6':
     dependencies:
@@ -9991,9 +9851,9 @@ snapshots:
 
   '@types/lodash-es@4.17.12':
     dependencies:
-      '@types/lodash': 4.17.12
+      '@types/lodash': 4.17.13
 
-  '@types/lodash@4.17.12': {}
+  '@types/lodash@4.17.13': {}
 
   '@types/mapbox__point-geometry@0.1.4': {}
 
@@ -10016,11 +9876,11 @@ snapshots:
 
   '@types/ms@0.7.34': {}
 
-  '@types/node@20.16.13':
+  '@types/node@20.17.6':
     dependencies:
       undici-types: 6.19.8
 
-  '@types/node@22.7.7':
+  '@types/node@22.9.0':
     dependencies:
       undici-types: 6.19.8
 
@@ -10032,7 +9892,7 @@ snapshots:
 
   '@types/prompts@2.4.9':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
       kleur: 3.0.3
 
   '@types/resize-observer-browser@0.1.11': {}
@@ -10041,7 +9901,7 @@ snapshots:
 
   '@types/responselike@1.0.3':
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
 
   '@types/supercluster@5.0.3':
     dependencies:
@@ -10082,116 +9942,117 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.10.0
-      '@typescript-eslint/type-utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.10.0
-      eslint: 9.13.0(jiti@2.3.3)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.15.0
+      '@typescript-eslint/type-utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.15.0
+      eslint: 9.15.0(jiti@2.4.0)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.10.0
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.10.0
-      debug: 4.3.7
-      eslint: 9.13.0(jiti@2.3.3)
+      '@typescript-eslint/scope-manager': 8.15.0
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.15.0
+      debug: 4.3.7(supports-color@9.4.0)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.10.0':
+  '@typescript-eslint/scope-manager@8.15.0':
     dependencies:
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/visitor-keys': 8.10.0
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/visitor-keys': 8.15.0
 
-  '@typescript-eslint/type-utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      debug: 4.3.7
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      debug: 4.3.7(supports-color@9.4.0)
+      eslint: 9.15.0(jiti@2.4.0)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
-      - eslint
       - supports-color
 
-  '@typescript-eslint/types@8.10.0': {}
+  '@typescript-eslint/types@8.15.0': {}
 
-  '@typescript-eslint/typescript-estree@8.10.0(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.15.0(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/visitor-keys': 8.10.0
-      debug: 4.3.7
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/visitor-keys': 8.15.0
+      debug: 4.3.7(supports-color@9.4.0)
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
+      ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      '@typescript-eslint/scope-manager': 8.10.0
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@typescript-eslint/scope-manager': 8.15.0
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
+    optionalDependencies:
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/visitor-keys@8.10.0':
+  '@typescript-eslint/visitor-keys@8.15.0':
     dependencies:
-      '@typescript-eslint/types': 8.10.0
-      eslint-visitor-keys: 3.4.3
+      '@typescript-eslint/types': 8.15.0
+      eslint-visitor-keys: 4.2.0
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@unhead/dom@1.11.10':
+  '@unhead/dom@1.11.11':
     dependencies:
-      '@unhead/schema': 1.11.10
-      '@unhead/shared': 1.11.10
+      '@unhead/schema': 1.11.11
+      '@unhead/shared': 1.11.11
 
-  '@unhead/schema@1.11.10':
+  '@unhead/schema@1.11.11':
     dependencies:
       hookable: 5.5.3
       zhead: 2.2.4
 
-  '@unhead/shared@1.11.10':
+  '@unhead/shared@1.11.11':
     dependencies:
-      '@unhead/schema': 1.11.10
+      '@unhead/schema': 1.11.11
 
-  '@unhead/ssr@1.11.10':
+  '@unhead/ssr@1.11.11':
     dependencies:
-      '@unhead/schema': 1.11.10
-      '@unhead/shared': 1.11.10
+      '@unhead/schema': 1.11.11
+      '@unhead/shared': 1.11.11
 
-  '@unhead/vue@1.11.10(vue@3.5.12(typescript@5.6.3))':
+  '@unhead/vue@1.11.11(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@unhead/schema': 1.11.10
-      '@unhead/shared': 1.11.10
+      '@unhead/schema': 1.11.11
+      '@unhead/shared': 1.11.11
       defu: 6.1.4
       hookable: 5.5.3
-      unhead: 1.11.10
-      vue: 3.5.12(typescript@5.6.3)
+      unhead: 1.11.11
+      vue: 3.5.13(typescript@5.6.3)
 
   '@unovis/dagre-layout@0.8.8-2':
     dependencies:
@@ -10235,21 +10096,21 @@ snapshots:
       throttle-debounce: 5.0.2
       to-px: 1.1.0
       topojson-client: 3.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@unovis/vue@1.4.4(@unovis/ts@1.4.4)(vue@3.5.12(typescript@5.6.3))':
+  '@unovis/vue@1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@unovis/ts': 1.4.4
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   '@unovue/detypes@0.8.4':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/preset-typescript': 7.25.7(@babel/core@7.25.8)
-      '@vue/compiler-dom': 3.5.12
-      '@vue/compiler-sfc': 3.5.12
+      '@babel/core': 7.26.0
+      '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
       '@vuedx/template-ast-types': 0.7.1
       fast-glob: 3.3.2
       prettier: 3.3.3
@@ -10257,214 +10118,214 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vee-validate/zod@4.14.3(vue@3.5.12(typescript@5.6.3))':
+  '@vee-validate/zod@4.14.7(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      type-fest: 4.26.1
-      vee-validate: 4.14.3(vue@3.5.12(typescript@5.6.3))
+      type-fest: 4.27.0
+      vee-validate: 4.14.7(vue@3.5.13(typescript@5.6.3))
       zod: 3.23.8
     transitivePeerDependencies:
       - vue
 
-  '@vercel/nft@0.26.5(encoding@0.1.13)':
+  '@vercel/nft@0.27.6(encoding@0.1.13)':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)
       '@rollup/pluginutils': 4.2.1
-      acorn: 8.13.0
-      acorn-import-attributes: 1.9.5(acorn@8.13.0)
+      acorn: 8.14.0
+      acorn-import-attributes: 1.9.5(acorn@8.14.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
       glob: 7.2.3
       graceful-fs: 4.2.11
       micromatch: 4.0.8
-      node-gyp-build: 4.8.2
+      node-gyp-build: 4.8.3
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.1.0(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8)
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.1.0(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8)
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.2.0(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vue: 3.5.13(typescript@5.6.3)
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.2.0(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
+      vue: 3.5.13(typescript@5.6.3)
 
-  '@vitest/eslint-plugin@1.1.7(@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))':
+  '@vitest/eslint-plugin@1.1.10(@typescript-eslint/utils@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vitest@2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
       typescript: 5.6.3
-      vitest: 2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0)
+      vitest: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
 
-  '@vitest/expect@2.1.3':
+  '@vitest/expect@2.1.5':
     dependencies:
-      '@vitest/spy': 2.1.3
-      '@vitest/utils': 2.1.3
-      chai: 5.1.1
+      '@vitest/spy': 2.1.5
+      '@vitest/utils': 2.1.5
+      chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))':
+  '@vitest/mocker@2.1.5(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
-      '@vitest/spy': 2.1.3
+      '@vitest/spy': 2.1.5
       estree-walker: 3.0.3
-      magic-string: 0.30.12
+      magic-string: 0.30.13
     optionalDependencies:
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
     optional: true
 
-  '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))':
+  '@vitest/mocker@2.1.5(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
-      '@vitest/spy': 2.1.3
+      '@vitest/spy': 2.1.5
       estree-walker: 3.0.3
-      magic-string: 0.30.12
+      magic-string: 0.30.13
     optionalDependencies:
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
 
-  '@vitest/pretty-format@2.1.3':
+  '@vitest/pretty-format@2.1.5':
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@2.1.3':
+  '@vitest/runner@2.1.5':
     dependencies:
-      '@vitest/utils': 2.1.3
+      '@vitest/utils': 2.1.5
       pathe: 1.1.2
 
-  '@vitest/snapshot@2.1.3':
+  '@vitest/snapshot@2.1.5':
     dependencies:
-      '@vitest/pretty-format': 2.1.3
-      magic-string: 0.30.12
+      '@vitest/pretty-format': 2.1.5
+      magic-string: 0.30.13
       pathe: 1.1.2
 
-  '@vitest/spy@2.1.3':
+  '@vitest/spy@2.1.5':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/ui@2.1.3(vitest@2.1.3)':
+  '@vitest/ui@2.1.5(vitest@2.1.5)':
     dependencies:
-      '@vitest/utils': 2.1.3
+      '@vitest/utils': 2.1.5
       fflate: 0.8.2
-      flatted: 3.3.1
+      flatted: 3.3.2
       pathe: 1.1.2
-      sirv: 2.0.4
-      tinyglobby: 0.2.9
+      sirv: 3.0.0
+      tinyglobby: 0.2.10
       tinyrainbow: 1.2.0
-      vitest: 2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0)
+      vitest: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
 
-  '@vitest/utils@2.1.3':
+  '@vitest/utils@2.1.5':
     dependencies:
-      '@vitest/pretty-format': 2.1.3
+      '@vitest/pretty-format': 2.1.5
       loupe: 3.1.2
       tinyrainbow: 1.2.0
 
-  '@volar/language-core@2.4.6':
+  '@volar/language-core@2.4.10':
     dependencies:
-      '@volar/source-map': 2.4.6
+      '@volar/source-map': 2.4.10
 
-  '@volar/source-map@2.4.6': {}
+  '@volar/source-map@2.4.10': {}
 
-  '@volar/typescript@2.4.6':
+  '@volar/typescript@2.4.10':
     dependencies:
-      '@volar/language-core': 2.4.6
+      '@volar/language-core': 2.4.10
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@vue-macros/common@1.15.0(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))':
+  '@vue-macros/common@1.15.0(rollup@4.27.3)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@babel/types': 7.25.8
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      '@vue/compiler-sfc': 3.5.12
-      ast-kit: 1.3.0
-      local-pkg: 0.5.0
+      '@babel/types': 7.26.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      '@vue/compiler-sfc': 3.5.13
+      ast-kit: 1.3.1
+      local-pkg: 0.5.1
       magic-string-ast: 0.6.2
     optionalDependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - rollup
 
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
-  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.25.8)':
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/helper-module-imports': 7.25.7
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.25.8)
-      '@babel/template': 7.25.7
-      '@babel/traverse': 7.25.7
-      '@babel/types': 7.25.8
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       '@vue/babel-helper-vue-transform-on': 1.2.5
-      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.25.8)
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.26.0)
       html-tags: 3.3.1
       svg-tags: 1.0.0
     optionalDependencies:
-      '@babel/core': 7.25.8
+      '@babel/core': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.25.8)':
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/code-frame': 7.25.7
-      '@babel/core': 7.25.8
-      '@babel/helper-module-imports': 7.25.7
-      '@babel/helper-plugin-utils': 7.25.7
-      '@babel/parser': 7.25.8
-      '@vue/compiler-sfc': 3.5.12
+      '@babel/code-frame': 7.26.2
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/parser': 7.26.2
+      '@vue/compiler-sfc': 3.5.13
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/compiler-core@3.5.12':
+  '@vue/compiler-core@3.5.13':
     dependencies:
-      '@babel/parser': 7.25.8
-      '@vue/shared': 3.5.12
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.13
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.12':
+  '@vue/compiler-dom@3.5.13':
     dependencies:
-      '@vue/compiler-core': 3.5.12
-      '@vue/shared': 3.5.12
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
 
-  '@vue/compiler-sfc@3.5.12':
+  '@vue/compiler-sfc@3.5.13':
     dependencies:
-      '@babel/parser': 7.25.8
-      '@vue/compiler-core': 3.5.12
-      '@vue/compiler-dom': 3.5.12
-      '@vue/compiler-ssr': 3.5.12
-      '@vue/shared': 3.5.12
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.12
-      postcss: 8.4.47
+      magic-string: 0.30.13
+      postcss: 8.4.49
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.12':
+  '@vue/compiler-ssr@3.5.13':
     dependencies:
-      '@vue/compiler-dom': 3.5.12
-      '@vue/shared': 3.5.12
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -10473,25 +10334,25 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-api@7.5.2':
+  '@vue/devtools-api@7.6.4':
     dependencies:
-      '@vue/devtools-kit': 7.5.2
+      '@vue/devtools-kit': 7.6.4
 
-  '@vue/devtools-core@7.4.4(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vue/devtools-core@7.4.4(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@vue/devtools-kit': 7.4.4
-      '@vue/devtools-shared': 7.5.2
+      '@vue/devtools-shared': 7.6.4
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))
-      vue: 3.5.12(typescript@5.6.3)
+      vite-hot-client: 0.2.3(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - vite
 
   '@vue/devtools-kit@7.4.4':
     dependencies:
-      '@vue/devtools-shared': 7.5.2
+      '@vue/devtools-shared': 7.6.4
       birpc: 0.2.19
       hookable: 5.5.3
       mitt: 3.0.1
@@ -10499,9 +10360,9 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.1
 
-  '@vue/devtools-kit@7.5.2':
+  '@vue/devtools-kit@7.6.4':
     dependencies:
-      '@vue/devtools-shared': 7.5.2
+      '@vue/devtools-shared': 7.6.4
       birpc: 0.2.19
       hookable: 5.5.3
       mitt: 3.0.1
@@ -10509,98 +10370,99 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.1
 
-  '@vue/devtools-shared@7.5.2':
+  '@vue/devtools-shared@7.6.4':
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.1.6(typescript@5.6.3)':
+  '@vue/language-core@2.1.10(typescript@5.6.3)':
     dependencies:
-      '@volar/language-core': 2.4.6
-      '@vue/compiler-dom': 3.5.12
+      '@volar/language-core': 2.4.10
+      '@vue/compiler-dom': 3.5.13
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.12
-      computeds: 0.0.1
+      '@vue/shared': 3.5.13
+      alien-signals: 0.2.2
       minimatch: 9.0.5
       muggle-string: 0.4.1
       path-browserify: 1.0.1
     optionalDependencies:
       typescript: 5.6.3
 
-  '@vue/reactivity@3.5.12':
+  '@vue/reactivity@3.5.13':
     dependencies:
-      '@vue/shared': 3.5.12
+      '@vue/shared': 3.5.13
 
-  '@vue/runtime-core@3.5.12':
+  '@vue/runtime-core@3.5.13':
     dependencies:
-      '@vue/reactivity': 3.5.12
-      '@vue/shared': 3.5.12
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
 
-  '@vue/runtime-dom@3.5.12':
+  '@vue/runtime-dom@3.5.13':
     dependencies:
-      '@vue/reactivity': 3.5.12
-      '@vue/runtime-core': 3.5.12
-      '@vue/shared': 3.5.12
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))':
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.12
-      '@vue/shared': 3.5.12
-      vue: 3.5.12(typescript@5.6.3)
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.6.3)
 
-  '@vue/shared@3.5.12': {}
+  '@vue/shared@3.5.13': {}
 
   '@vue/tsconfig@0.5.1': {}
 
   '@vuedx/template-ast-types@0.7.1':
     dependencies:
-      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-core': 3.5.13
 
-  '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.3))':
+  '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.3))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.3))':
+  '@vueuse/core@11.2.0(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/metadata': 11.2.0
+      '@vueuse/shared': 11.2.0(vue@3.5.13(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@11.1.0(focus-trap@7.6.0)(vue@3.5.12(typescript@5.6.3))':
+  '@vueuse/integrations@11.2.0(change-case@5.4.4)(focus-trap@7.6.2)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      '@vueuse/core': 11.2.0(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/shared': 11.2.0(vue@3.5.13(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
-      focus-trap: 7.6.0
+      change-case: 5.4.4
+      focus-trap: 7.6.2
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
   '@vueuse/metadata@10.11.1': {}
 
-  '@vueuse/metadata@11.1.0': {}
+  '@vueuse/metadata@11.2.0': {}
 
-  '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.3))':
+  '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.3))':
+  '@vueuse/shared@11.2.0(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -10621,17 +10483,15 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  acorn-import-attributes@1.9.5(acorn@8.13.0):
+  acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
 
-  acorn-jsx@5.3.2(acorn@8.13.0):
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
 
-  acorn@8.12.1: {}
-
-  acorn@8.13.0: {}
+  acorn@8.14.0: {}
 
   agent-base@4.3.0:
     dependencies:
@@ -10639,13 +10499,13 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.1.1:
+  agent-base@7.1.1(supports-color@9.4.0):
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10667,23 +10527,23 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  algoliasearch@4.24.0:
-    dependencies:
-      '@algolia/cache-browser-local-storage': 4.24.0
-      '@algolia/cache-common': 4.24.0
-      '@algolia/cache-in-memory': 4.24.0
-      '@algolia/client-account': 4.24.0
-      '@algolia/client-analytics': 4.24.0
-      '@algolia/client-common': 4.24.0
-      '@algolia/client-personalization': 4.24.0
-      '@algolia/client-search': 4.24.0
-      '@algolia/logger-common': 4.24.0
-      '@algolia/logger-console': 4.24.0
-      '@algolia/recommend': 4.24.0
-      '@algolia/requester-browser-xhr': 4.24.0
-      '@algolia/requester-common': 4.24.0
-      '@algolia/requester-node-http': 4.24.0
-      '@algolia/transporter': 4.24.0
+  algoliasearch@5.14.2:
+    dependencies:
+      '@algolia/client-abtesting': 5.14.2
+      '@algolia/client-analytics': 5.14.2
+      '@algolia/client-common': 5.14.2
+      '@algolia/client-insights': 5.14.2
+      '@algolia/client-personalization': 5.14.2
+      '@algolia/client-query-suggestions': 5.14.2
+      '@algolia/client-search': 5.14.2
+      '@algolia/ingestion': 1.14.2
+      '@algolia/monitoring': 1.14.2
+      '@algolia/recommend': 5.14.2
+      '@algolia/requester-browser-xhr': 5.14.2
+      '@algolia/requester-fetch': 5.14.2
+      '@algolia/requester-node-http': 5.14.2
+
+  alien-signals@0.2.2: {}
 
   ansi-align@2.0.0:
     dependencies:
@@ -10763,29 +10623,29 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   array-ify@1.0.0: {}
 
   assertion-error@2.0.1: {}
 
-  ast-kit@1.3.0:
+  ast-kit@1.3.1:
     dependencies:
-      '@babel/parser': 7.25.8
+      '@babel/parser': 7.26.2
       pathe: 1.1.2
 
   ast-types@0.14.2:
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   ast-walker-scope@0.6.2:
     dependencies:
-      '@babel/parser': 7.25.8
-      ast-kit: 1.3.0
+      '@babel/parser': 7.26.2
+      ast-kit: 1.3.1
 
   astral-regex@2.0.0: {}
 
@@ -10801,14 +10661,14 @@ snapshots:
 
   atob@2.1.2: {}
 
-  autoprefixer@10.4.20(postcss@8.4.47):
+  autoprefixer@10.4.20(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
-      caniuse-lite: 1.0.30001669
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001680
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   axios@0.18.1:
@@ -10822,7 +10682,7 @@ snapshots:
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
       cosmiconfig: 7.1.0
       resolve: 1.22.8
 
@@ -10875,12 +10735,12 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.24.0:
+  browserslist@4.24.2:
     dependencies:
-      caniuse-lite: 1.0.30001669
-      electron-to-chromium: 1.5.41
+      caniuse-lite: 1.0.30001680
+      electron-to-chromium: 1.5.63
       node-releases: 2.0.18
-      update-browserslist-db: 1.1.1(browserslist@4.24.0)
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
   buffer-alloc-unsafe@1.1.0: {}
 
@@ -10904,17 +10764,17 @@ snapshots:
 
   builtins@1.0.3: {}
 
-  bumpp@9.7.1(magicast@0.3.5):
+  bumpp@9.8.1(magicast@0.3.5):
     dependencies:
       '@jsdevtools/ez-spawn': 3.0.4
       c12: 1.11.2(magicast@0.3.5)
       cac: 6.7.14
       escalade: 3.2.0
-      fast-glob: 3.3.2
       js-yaml: 4.1.0
       jsonc-parser: 3.3.1
       prompts: 2.4.2
       semver: 7.6.3
+      tinyglobby: 0.2.10
     transitivePeerDependencies:
       - magicast
 
@@ -10927,6 +10787,11 @@ snapshots:
       esbuild: 0.23.1
       load-tsconfig: 0.2.5
 
+  bundle-require@5.0.0(esbuild@0.24.0):
+    dependencies:
+      esbuild: 0.24.0
+      load-tsconfig: 0.2.5
+
   c12@1.11.2(magicast@0.3.5):
     dependencies:
       chokidar: 3.6.0
@@ -10935,7 +10800,7 @@ snapshots:
       dotenv: 16.4.5
       giget: 1.2.3
       jiti: 1.21.6
-      mlly: 1.7.2
+      mlly: 1.7.3
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
@@ -10951,8 +10816,8 @@ snapshots:
       defu: 6.1.4
       dotenv: 16.4.5
       giget: 1.2.3
-      jiti: 2.3.3
-      mlly: 1.7.2
+      jiti: 2.4.0
+      mlly: 1.7.3
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
@@ -11010,18 +10875,18 @@ snapshots:
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.24.0
-      caniuse-lite: 1.0.30001669
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001680
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001669: {}
+  caniuse-lite@1.0.30001680: {}
 
   capture-stack-trace@1.0.2: {}
 
   ccount@2.0.1: {}
 
-  chai@5.1.1:
+  chai@5.1.2:
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
@@ -11042,24 +10907,7 @@ snapshots:
 
   chalk@5.3.0: {}
 
-  changelogen@0.5.7(magicast@0.3.5):
-    dependencies:
-      c12: 1.11.2(magicast@0.3.5)
-      colorette: 2.0.20
-      consola: 3.2.3
-      convert-gitmoji: 0.1.5
-      mri: 1.2.0
-      node-fetch-native: 1.6.4
-      ofetch: 1.4.1
-      open: 10.1.0
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      scule: 1.3.0
-      semver: 7.6.3
-      std-env: 3.7.0
-      yaml: 2.6.0
-    transitivePeerDependencies:
-      - magicast
+  change-case@5.4.4: {}
 
   character-entities-html4@2.1.0: {}
 
@@ -11093,7 +10941,7 @@ snapshots:
 
   ci-info@1.6.0: {}
 
-  ci-info@4.0.0: {}
+  ci-info@4.1.0: {}
 
   citty@0.1.6:
     dependencies:
@@ -11204,6 +11052,8 @@ snapshots:
 
   colord@2.9.3: {}
 
+  colorette@1.4.0: {}
+
   colorette@2.0.20: {}
 
   comma-separated-tokens@2.0.3: {}
@@ -11239,8 +11089,6 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 4.5.2
 
-  computeds@0.0.1: {}
-
   concat-map@0.0.1: {}
 
   concat-stream@1.6.2:
@@ -11286,8 +11134,6 @@ snapshots:
       meow: 12.1.1
       split2: 4.2.0
 
-  convert-gitmoji@0.1.5: {}
-
   convert-source-map@1.9.0: {}
 
   convert-source-map@2.0.0: {}
@@ -11312,15 +11158,15 @@ snapshots:
       rimraf: 2.7.1
       run-queue: 1.0.3
 
-  core-js-compat@3.38.1:
+  core-js-compat@3.39.0:
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@5.1.0(@types/node@22.7.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
+  cosmiconfig-typescript-loader@5.1.0(@types/node@22.9.0)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
     dependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
       cosmiconfig: 9.0.0(typescript@5.6.3)
       jiti: 1.21.6
       typescript: 5.6.3
@@ -11355,9 +11201,9 @@ snapshots:
 
   create-require@1.1.1: {}
 
-  croner@8.1.2: {}
+  croner@9.0.0: {}
 
-  cronstrue@2.50.0: {}
+  cronstrue@2.51.0: {}
 
   cross-spawn@5.1.0:
     dependencies:
@@ -11365,23 +11211,21 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crossws@0.2.4: {}
-
   crossws@0.3.1:
     dependencies:
       uncrypto: 0.1.3
 
   crypto-random-string@1.0.0: {}
 
-  css-declaration-sorter@7.2.0(postcss@8.4.47):
+  css-declaration-sorter@7.2.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
   css-select@5.1.0:
     dependencies:
@@ -11413,49 +11257,49 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssnano-preset-default@7.0.6(postcss@8.4.47):
-    dependencies:
-      browserslist: 4.24.0
-      css-declaration-sorter: 7.2.0(postcss@8.4.47)
-      cssnano-utils: 5.0.0(postcss@8.4.47)
-      postcss: 8.4.47
-      postcss-calc: 10.0.2(postcss@8.4.47)
-      postcss-colormin: 7.0.2(postcss@8.4.47)
-      postcss-convert-values: 7.0.4(postcss@8.4.47)
-      postcss-discard-comments: 7.0.3(postcss@8.4.47)
-      postcss-discard-duplicates: 7.0.1(postcss@8.4.47)
-      postcss-discard-empty: 7.0.0(postcss@8.4.47)
-      postcss-discard-overridden: 7.0.0(postcss@8.4.47)
-      postcss-merge-longhand: 7.0.4(postcss@8.4.47)
-      postcss-merge-rules: 7.0.4(postcss@8.4.47)
-      postcss-minify-font-values: 7.0.0(postcss@8.4.47)
-      postcss-minify-gradients: 7.0.0(postcss@8.4.47)
-      postcss-minify-params: 7.0.2(postcss@8.4.47)
-      postcss-minify-selectors: 7.0.4(postcss@8.4.47)
-      postcss-normalize-charset: 7.0.0(postcss@8.4.47)
-      postcss-normalize-display-values: 7.0.0(postcss@8.4.47)
-      postcss-normalize-positions: 7.0.0(postcss@8.4.47)
-      postcss-normalize-repeat-style: 7.0.0(postcss@8.4.47)
-      postcss-normalize-string: 7.0.0(postcss@8.4.47)
-      postcss-normalize-timing-functions: 7.0.0(postcss@8.4.47)
-      postcss-normalize-unicode: 7.0.2(postcss@8.4.47)
-      postcss-normalize-url: 7.0.0(postcss@8.4.47)
-      postcss-normalize-whitespace: 7.0.0(postcss@8.4.47)
-      postcss-ordered-values: 7.0.1(postcss@8.4.47)
-      postcss-reduce-initial: 7.0.2(postcss@8.4.47)
-      postcss-reduce-transforms: 7.0.0(postcss@8.4.47)
-      postcss-svgo: 7.0.1(postcss@8.4.47)
-      postcss-unique-selectors: 7.0.3(postcss@8.4.47)
-
-  cssnano-utils@5.0.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-
-  cssnano@7.0.6(postcss@8.4.47):
-    dependencies:
-      cssnano-preset-default: 7.0.6(postcss@8.4.47)
+  cssnano-preset-default@7.0.6(postcss@8.4.49):
+    dependencies:
+      browserslist: 4.24.2
+      css-declaration-sorter: 7.2.0(postcss@8.4.49)
+      cssnano-utils: 5.0.0(postcss@8.4.49)
+      postcss: 8.4.49
+      postcss-calc: 10.0.2(postcss@8.4.49)
+      postcss-colormin: 7.0.2(postcss@8.4.49)
+      postcss-convert-values: 7.0.4(postcss@8.4.49)
+      postcss-discard-comments: 7.0.3(postcss@8.4.49)
+      postcss-discard-duplicates: 7.0.1(postcss@8.4.49)
+      postcss-discard-empty: 7.0.0(postcss@8.4.49)
+      postcss-discard-overridden: 7.0.0(postcss@8.4.49)
+      postcss-merge-longhand: 7.0.4(postcss@8.4.49)
+      postcss-merge-rules: 7.0.4(postcss@8.4.49)
+      postcss-minify-font-values: 7.0.0(postcss@8.4.49)
+      postcss-minify-gradients: 7.0.0(postcss@8.4.49)
+      postcss-minify-params: 7.0.2(postcss@8.4.49)
+      postcss-minify-selectors: 7.0.4(postcss@8.4.49)
+      postcss-normalize-charset: 7.0.0(postcss@8.4.49)
+      postcss-normalize-display-values: 7.0.0(postcss@8.4.49)
+      postcss-normalize-positions: 7.0.0(postcss@8.4.49)
+      postcss-normalize-repeat-style: 7.0.0(postcss@8.4.49)
+      postcss-normalize-string: 7.0.0(postcss@8.4.49)
+      postcss-normalize-timing-functions: 7.0.0(postcss@8.4.49)
+      postcss-normalize-unicode: 7.0.2(postcss@8.4.49)
+      postcss-normalize-url: 7.0.0(postcss@8.4.49)
+      postcss-normalize-whitespace: 7.0.0(postcss@8.4.49)
+      postcss-ordered-values: 7.0.1(postcss@8.4.49)
+      postcss-reduce-initial: 7.0.2(postcss@8.4.49)
+      postcss-reduce-transforms: 7.0.0(postcss@8.4.49)
+      postcss-svgo: 7.0.1(postcss@8.4.49)
+      postcss-unique-selectors: 7.0.3(postcss@8.4.49)
+
+  cssnano-utils@5.0.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+
+  cssnano@7.0.6(postcss@8.4.49):
+    dependencies:
+      cssnano-preset-default: 7.0.6(postcss@8.4.49)
       lilconfig: 3.1.2
-      postcss: 8.4.47
+      postcss: 8.4.49
 
   csso@5.0.5:
     dependencies:
@@ -11659,11 +11503,11 @@ snapshots:
 
   date-fns@2.30.0:
     dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
 
   date-fns@4.1.0: {}
 
-  db0@0.1.4: {}
+  db0@0.2.1: {}
 
   de-indent@1.0.2: {}
 
@@ -11679,9 +11523,11 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.3.7:
+  debug@4.3.7(supports-color@9.4.0):
     dependencies:
       ms: 2.1.3
+    optionalDependencies:
+      supports-color: 9.4.0
 
   decode-named-character-reference@1.0.2:
     dependencies:
@@ -11782,9 +11628,9 @@ snapshots:
     dependencies:
       is-obj: 2.0.0
 
-  dot-prop@8.0.2:
+  dot-prop@9.0.0:
     dependencies:
-      type-fest: 3.13.1
+      type-fest: 4.27.0
 
   dotenv@16.4.5: {}
 
@@ -11810,25 +11656,27 @@ snapshots:
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.41: {}
+  electron-to-chromium@1.5.63: {}
 
   elkjs@0.8.2: {}
 
-  embla-carousel-autoplay@8.3.0(embla-carousel@8.3.0):
+  embla-carousel-autoplay@8.4.0(embla-carousel@8.4.0):
     dependencies:
-      embla-carousel: 8.3.0
+      embla-carousel: 8.4.0
 
-  embla-carousel-reactive-utils@8.3.0(embla-carousel@8.3.0):
+  embla-carousel-reactive-utils@8.4.0(embla-carousel@8.4.0):
     dependencies:
-      embla-carousel: 8.3.0
+      embla-carousel: 8.4.0
 
-  embla-carousel-vue@8.3.0(vue@3.5.12(typescript@5.6.3)):
+  embla-carousel-vue@8.4.0(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      embla-carousel: 8.3.0
-      embla-carousel-reactive-utils: 8.3.0(embla-carousel@8.3.0)
-      vue: 3.5.12(typescript@5.6.3)
+      embla-carousel: 8.4.0
+      embla-carousel-reactive-utils: 8.4.0(embla-carousel@8.4.0)
+      vue: 3.5.13(typescript@5.6.3)
 
-  embla-carousel@8.3.0: {}
+  embla-carousel@8.4.0: {}
+
+  emoji-regex-xs@1.0.0: {}
 
   emoji-regex@10.4.0: {}
 
@@ -11905,32 +11753,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.19.12
       '@esbuild/win32-x64': 0.19.12
 
-  esbuild@0.20.2:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.20.2
-      '@esbuild/android-arm': 0.20.2
-      '@esbuild/android-arm64': 0.20.2
-      '@esbuild/android-x64': 0.20.2
-      '@esbuild/darwin-arm64': 0.20.2
-      '@esbuild/darwin-x64': 0.20.2
-      '@esbuild/freebsd-arm64': 0.20.2
-      '@esbuild/freebsd-x64': 0.20.2
-      '@esbuild/linux-arm': 0.20.2
-      '@esbuild/linux-arm64': 0.20.2
-      '@esbuild/linux-ia32': 0.20.2
-      '@esbuild/linux-loong64': 0.20.2
-      '@esbuild/linux-mips64el': 0.20.2
-      '@esbuild/linux-ppc64': 0.20.2
-      '@esbuild/linux-riscv64': 0.20.2
-      '@esbuild/linux-s390x': 0.20.2
-      '@esbuild/linux-x64': 0.20.2
-      '@esbuild/netbsd-x64': 0.20.2
-      '@esbuild/openbsd-x64': 0.20.2
-      '@esbuild/sunos-x64': 0.20.2
-      '@esbuild/win32-arm64': 0.20.2
-      '@esbuild/win32-ia32': 0.20.2
-      '@esbuild/win32-x64': 0.20.2
-
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -12021,15 +11843,20 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.13.0(jiti@2.3.3)):
+  eslint-compat-utils@0.5.1(eslint@9.15.0(jiti@2.4.0)):
+    dependencies:
+      eslint: 9.15.0(jiti@2.4.0)
+      semver: 7.6.3
+
+  eslint-compat-utils@0.6.3(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       semver: 7.6.3
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint/compat': 1.2.1(eslint@9.13.0(jiti@2.3.3))
-      eslint: 9.13.0(jiti@2.3.3)
+      '@eslint/compat': 1.2.3(eslint@9.15.0(jiti@2.4.0))
+      eslint: 9.15.0(jiti@2.4.0)
       find-up-simple: 1.0.0
 
   eslint-flat-config-utils@0.4.0:
@@ -12044,53 +11871,59 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-merge-processors@0.1.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-json-compat-utils@0.2.1(eslint@9.15.0(jiti@2.4.0))(jsonc-eslint-parser@2.4.0):
     dependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
+      esquery: 1.6.0
+      jsonc-eslint-parser: 2.4.0
+
+  eslint-merge-processors@0.1.0(eslint@9.15.0(jiti@2.4.0)):
+    dependencies:
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-plugin-antfu@2.7.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-antfu@2.7.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@antfu/utils': 0.7.10
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-plugin-command@0.2.6(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-command@0.2.6(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@es-joy/jsdoccomment': 0.48.0
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-es-x@7.8.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      '@eslint-community/regexpp': 4.11.1
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-compat-utils: 0.5.1(eslint@9.13.0(jiti@2.3.3))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint-community/regexpp': 4.12.1
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-compat-utils: 0.5.1(eslint@9.15.0(jiti@2.4.0))
 
-  eslint-plugin-import-x@4.3.1(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3):
+  eslint-plugin-import-x@4.4.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      debug: 4.3.7
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      debug: 4.3.7(supports-color@9.4.0)
       doctrine: 3.0.0
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.8.1
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
       stable-hash: 0.0.4
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-jsdoc@50.4.3(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-jsdoc@50.5.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       '@es-joy/jsdoccomment': 0.49.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       escape-string-regexp: 4.0.0
-      eslint: 9.13.0(jiti@2.3.3)
-      espree: 10.2.0
+      eslint: 9.15.0(jiti@2.4.0)
+      espree: 10.3.0
       esquery: 1.6.0
       parse-imports: 2.2.1
       semver: 7.6.3
@@ -12099,75 +11932,78 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.16.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-jsonc@2.18.2(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-compat-utils: 0.5.1(eslint@9.13.0(jiti@2.3.3))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-compat-utils: 0.6.3(eslint@9.15.0(jiti@2.4.0))
+      eslint-json-compat-utils: 0.2.1(eslint@9.15.0(jiti@2.4.0))(jsonc-eslint-parser@2.4.0)
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
       natural-compare: 1.4.0
       synckit: 0.6.2
+    transitivePeerDependencies:
+      - '@eslint/json'
 
-  eslint-plugin-n@17.11.1(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-n@17.13.2(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
       enhanced-resolve: 5.17.1
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-plugin-es-x: 7.8.0(eslint@9.13.0(jiti@2.3.3))
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-plugin-es-x: 7.8.0(eslint@9.15.0(jiti@2.4.0))
       get-tsconfig: 4.8.1
-      globals: 15.11.0
+      globals: 15.12.0
       ignore: 5.3.2
       minimatch: 9.0.5
       semver: 7.6.3
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@3.9.1(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vue-eslint-parser@9.4.3(eslint@9.13.0(jiti@2.3.3))):
+  eslint-plugin-perfectionist@3.9.1(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)(vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.0))):
     dependencies:
-      '@typescript-eslint/types': 8.10.0
-      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      eslint: 9.13.0(jiti@2.3.3)
+      '@typescript-eslint/types': 8.15.0
+      '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+      eslint: 9.15.0(jiti@2.4.0)
       minimatch: 9.0.5
       natural-compare-lite: 1.4.0
     optionalDependencies:
-      vue-eslint-parser: 9.4.3(eslint@9.13.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-regexp@2.6.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-regexp@2.7.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint-community/regexpp': 4.12.1
       comment-parser: 1.4.1
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       jsdoc-type-pratt-parser: 4.1.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-toml@0.11.1(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-toml@0.11.1(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      debug: 4.3.7
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-compat-utils: 0.5.1(eslint@9.13.0(jiti@2.3.3))
+      debug: 4.3.7(supports-color@9.4.0)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-compat-utils: 0.5.1(eslint@9.15.0(jiti@2.4.0))
       lodash: 4.17.21
       toml-eslint-parser: 0.10.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      ci-info: 4.0.0
+      '@babel/helper-validator-identifier': 7.25.9
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.38.1
-      eslint: 9.13.0(jiti@2.3.3)
+      core-js-compat: 3.39.0
+      eslint: 9.15.0(jiti@2.4.0)
       esquery: 1.6.0
-      globals: 15.11.0
+      globals: 15.12.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
@@ -12178,16 +12014,16 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-unicorn@56.0.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-unicorn@56.0.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      ci-info: 4.0.0
+      '@babel/helper-validator-identifier': 7.25.9
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      ci-info: 4.1.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.38.1
-      eslint: 9.13.0(jiti@2.3.3)
+      core-js-compat: 3.39.0
+      eslint: 9.15.0(jiti@2.4.0)
       esquery: 1.6.0
-      globals: 15.11.0
+      globals: 15.12.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
@@ -12198,78 +12034,78 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
 
-  eslint-plugin-vue@9.29.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      eslint: 9.13.0(jiti@2.3.3)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      eslint: 9.15.0(jiti@2.4.0)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.13.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-yml@1.14.0(eslint@9.13.0(jiti@2.3.3)):
+  eslint-plugin-yml@1.15.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      debug: 4.3.7
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-compat-utils: 0.5.1(eslint@9.13.0(jiti@2.3.3))
+      debug: 4.3.7(supports-color@9.4.0)
+      eslint: 9.15.0(jiti@2.4.0)
+      eslint-compat-utils: 0.5.1(eslint@9.15.0(jiti@2.4.0))
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.3
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.12)(eslint@9.13.0(jiti@2.3.3)):
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@vue/compiler-sfc': 3.5.12
-      eslint: 9.13.0(jiti@2.3.3)
+      '@vue/compiler-sfc': 3.5.13
+      eslint: 9.15.0(jiti@2.4.0)
 
   eslint-scope@7.2.2:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.1.0:
+  eslint-scope@8.2.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.1.0: {}
+  eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.13.0(jiti@2.3.3):
+  eslint@9.15.0(jiti@2.4.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      '@eslint-community/regexpp': 4.11.1
-      '@eslint/config-array': 0.18.0
-      '@eslint/core': 0.7.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.13.0
-      '@eslint/plugin-kit': 0.2.1
-      '@humanfs/node': 0.16.5
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.0))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.19.0
+      '@eslint/core': 0.9.0
+      '@eslint/eslintrc': 3.2.0
+      '@eslint/js': 9.15.0
+      '@eslint/plugin-kit': 0.2.3
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.1
+      '@humanwhocodes/retry': 0.4.1
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.7
+      cross-spawn: 7.0.6
+      debug: 4.3.7(supports-color@9.4.0)
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.1.0
-      eslint-visitor-keys: 4.1.0
-      espree: 10.2.0
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -12284,22 +12120,21 @@ snapshots:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      text-table: 0.2.0
     optionalDependencies:
-      jiti: 2.3.3
+      jiti: 2.4.0
     transitivePeerDependencies:
       - supports-color
 
-  espree@10.2.0:
+  espree@10.3.0:
     dependencies:
-      acorn: 8.13.0
-      acorn-jsx: 5.3.2(acorn@8.13.0)
-      eslint-visitor-keys: 4.1.0
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
 
   espree@9.6.1:
     dependencies:
-      acorn: 8.13.0
-      acorn-jsx: 5.3.2(acorn@8.13.0)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
@@ -12340,21 +12175,9 @@ snapshots:
       signal-exit: 3.0.7
       strip-eof: 1.0.0
 
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
   execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -12366,7 +12189,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -12380,6 +12203,8 @@ snapshots:
     dependencies:
       os-homedir: 1.0.2
 
+  expect-type@1.1.0: {}
+
   extend-shallow@2.0.1:
     dependencies:
       is-extendable: 0.1.1
@@ -12393,7 +12218,7 @@ snapshots:
   externality@1.0.2:
     dependencies:
       enhanced-resolve: 5.17.1
-      mlly: 1.7.2
+      mlly: 1.7.3
       pathe: 1.1.2
       ufo: 1.5.4
 
@@ -12480,17 +12305,17 @@ snapshots:
 
   flat-cache@4.0.1:
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.2
       keyv: 4.5.4
 
-  flatted@3.3.1: {}
+  flatted@3.3.2: {}
 
   flush-write-stream@1.1.1:
     dependencies:
       inherits: 2.0.4
       readable-stream: 2.3.8
 
-  focus-trap@7.6.0:
+  focus-trap@7.6.2:
     dependencies:
       tabbable: 6.2.0
 
@@ -12502,7 +12327,7 @@ snapshots:
 
   foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   fraction.js@4.3.7: {}
@@ -12715,7 +12540,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.11.0: {}
+  globals@15.12.0: {}
 
   globby@13.2.2:
     dependencies:
@@ -12872,21 +12697,19 @@ snapshots:
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.5:
+  https-proxy-agent@7.0.5(supports-color@9.4.0):
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.1(supports-color@9.4.0)
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
   httpxy@0.1.5: {}
 
-  human-signals@2.1.0: {}
-
   human-signals@4.3.1: {}
 
   human-signals@5.0.0: {}
@@ -12911,6 +12734,8 @@ snapshots:
 
   ignore@5.3.2: {}
 
+  ignore@6.0.2: {}
+
   image-meta@0.2.1: {}
 
   image-size@0.8.3:
@@ -12929,30 +12754,31 @@ snapshots:
   importx@0.4.4:
     dependencies:
       bundle-require: 5.0.0(esbuild@0.23.1)
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       esbuild: 0.23.1
       jiti: 2.0.0-beta.3
       jiti-v1: jiti@1.21.6
       pathe: 1.1.2
-      tsx: 4.19.1
+      tsx: 4.19.2
     transitivePeerDependencies:
       - supports-color
 
-  impound@0.1.0(rollup@4.24.0):
+  impound@0.2.0(rollup@4.27.3):
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      mlly: 1.7.2
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      mlly: 1.7.3
       pathe: 1.1.2
       unenv: 1.10.0
-      unplugin: 1.14.1
+      unplugin: 1.16.0
     transitivePeerDependencies:
       - rollup
-      - webpack-sources
 
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
 
+  index-to-position@0.1.2: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -12990,7 +12816,7 @@ snapshots:
     dependencies:
       '@ioredis/commands': 1.2.0
       cluster-key-slot: 1.1.2
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       denque: 2.1.0
       lodash.defaults: 4.2.0
       lodash.isarguments: 3.1.0
@@ -13144,10 +12970,12 @@ snapshots:
 
   jiti@2.0.0-beta.3: {}
 
-  jiti@2.3.3: {}
+  jiti@2.4.0: {}
 
   joycon@3.1.1: {}
 
+  js-levenshtein@1.1.6: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.0: {}
@@ -13178,7 +13006,7 @@ snapshots:
 
   jsonc-eslint-parser@2.4.0:
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       semver: 7.6.3
@@ -13224,7 +13052,7 @@ snapshots:
 
   koa-send@5.0.1:
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       http-errors: 1.8.1
       resolve-path: 1.4.0
     transitivePeerDependencies:
@@ -13244,7 +13072,7 @@ snapshots:
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookies: 0.9.1
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       delegates: 1.0.0
       depd: 2.0.0
       destroy: 1.2.0
@@ -13303,7 +13131,7 @@ snapshots:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       execa: 8.0.1
       lilconfig: 3.1.2
       listr2: 8.2.5
@@ -13316,8 +13144,8 @@ snapshots:
 
   listhen@1.9.0:
     dependencies:
-      '@parcel/watcher': 2.4.1
-      '@parcel/watcher-wasm': 2.4.1
+      '@parcel/watcher': 2.5.0
+      '@parcel/watcher-wasm': 2.5.0
       citty: 0.1.6
       clipboardy: 4.0.0
       consola: 3.2.3
@@ -13326,11 +13154,11 @@ snapshots:
       get-port-please: 3.1.2
       h3: 1.13.0
       http-shutdown: 1.2.2
-      jiti: 2.3.3
-      mlly: 1.7.2
+      jiti: 2.4.0
+      mlly: 1.7.3
       node-forge: 1.3.1
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       ufo: 1.5.4
       untun: 0.1.3
       uqr: 0.1.2
@@ -13346,9 +13174,9 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
-  local-pkg@0.5.0:
+  local-pkg@0.5.1:
     dependencies:
-      mlly: 1.7.2
+      mlly: 1.7.3
       pkg-types: 1.2.1
 
   locate-path@5.0.0:
@@ -13371,6 +13199,8 @@ snapshots:
 
   lodash.isarguments@3.1.0: {}
 
+  lodash.isequal@4.5.0: {}
+
   lodash.isplainobject@4.0.6: {}
 
   lodash.kebabcase@4.1.1: {}
@@ -13422,7 +13252,7 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.0.1: {}
+  lru-cache@11.0.2: {}
 
   lru-cache@4.1.5:
     dependencies:
@@ -13433,36 +13263,34 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-vue-next@0.441.0(vue@3.5.12(typescript@5.6.3)):
+  lucide-vue-next@0.441.0(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   lz-string@1.5.0: {}
 
   magic-regexp@0.8.0:
     dependencies:
       estree-walker: 3.0.3
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      magic-string: 0.30.13
+      mlly: 1.7.3
       regexp-tree: 0.1.27
       type-level-regexp: 0.1.17
       ufo: 1.5.4
-      unplugin: 1.14.1
-    transitivePeerDependencies:
-      - webpack-sources
+      unplugin: 1.16.0
 
   magic-string-ast@0.6.2:
     dependencies:
-      magic-string: 0.30.12
+      magic-string: 0.30.13
 
-  magic-string@0.30.12:
+  magic-string@0.30.13:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
   magicast@0.3.5:
     dependencies:
-      '@babel/parser': 7.25.8
-      '@babel/types': 7.25.8
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       source-map-js: 1.2.1
 
   make-dir@1.3.0:
@@ -13527,7 +13355,7 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
-  markdown-table@3.0.3: {}
+  markdown-table@3.0.4: {}
 
   mdast-util-find-and-replace@3.0.1:
     dependencies:
@@ -13536,19 +13364,19 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  mdast-util-from-markdown@2.0.1:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.3
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       mdast-util-to-string: 4.0.0
-      micromark: 4.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-decode-string: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark: 4.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
       unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -13559,23 +13387,23 @@ snapshots:
       ccount: 2.0.1
       devlop: 1.1.0
       mdast-util-find-and-replace: 3.0.1
-      micromark-util-character: 2.1.0
+      micromark-util-character: 2.1.1
 
   mdast-util-gfm-footnote@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -13583,9 +13411,9 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      markdown-table: 3.0.3
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -13593,20 +13421,20 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.1
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.0.0
       mdast-util-gfm-strikethrough: 2.0.0
       mdast-util-gfm-table: 2.0.0
       mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -13621,20 +13449,21 @@ snapshots:
       '@types/mdast': 4.0.4
       '@ungap/structured-clone': 1.2.0
       devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
-  mdast-util-to-markdown@2.1.0:
+  mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.3
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.1.0
       mdast-util-to-string: 4.0.0
-      micromark-util-decode-string: 2.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
@@ -13658,71 +13487,71 @@ snapshots:
 
   methods@1.1.2: {}
 
-  micromark-core-commonmark@2.0.1:
+  micromark-core-commonmark@2.0.2:
     dependencies:
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
-      micromark-factory-destination: 2.0.0
-      micromark-factory-label: 2.0.0
-      micromark-factory-space: 2.0.0
-      micromark-factory-title: 2.0.0
-      micromark-factory-whitespace: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-html-tag-name: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-footnote@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-strikethrough@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-classify-character: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-table@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-tagfilter@2.0.0:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
       devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
   micromark-extension-gfm@3.0.0:
     dependencies:
@@ -13732,120 +13561,120 @@ snapshots:
       micromark-extension-gfm-table: 2.1.0
       micromark-extension-gfm-tagfilter: 2.0.0
       micromark-extension-gfm-task-list-item: 2.1.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-destination@2.0.0:
+  micromark-factory-destination@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-label@2.0.0:
+  micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-space@2.0.0:
+  micromark-factory-space@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-title@2.0.0:
+  micromark-factory-title@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-whitespace@2.0.0:
+  micromark-factory-whitespace@2.0.1:
     dependencies:
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-character@2.1.0:
+  micromark-util-character@2.1.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-chunked@2.0.0:
+  micromark-util-chunked@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-classify-character@2.0.0:
+  micromark-util-classify-character@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-combine-extensions@2.0.0:
+  micromark-util-combine-extensions@2.0.1:
     dependencies:
-      micromark-util-chunked: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-decode-numeric-character-reference@2.0.1:
+  micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-decode-string@2.0.0:
+  micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
-      micromark-util-character: 2.1.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-symbol: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-encode@2.0.0: {}
+  micromark-util-encode@2.0.1: {}
 
-  micromark-util-html-tag-name@2.0.0: {}
+  micromark-util-html-tag-name@2.0.1: {}
 
-  micromark-util-normalize-identifier@2.0.0:
+  micromark-util-normalize-identifier@2.0.1:
     dependencies:
-      micromark-util-symbol: 2.0.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-resolve-all@2.0.0:
+  micromark-util-resolve-all@2.0.1:
     dependencies:
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
-  micromark-util-sanitize-uri@2.0.0:
+  micromark-util-sanitize-uri@2.0.1:
     dependencies:
-      micromark-util-character: 2.1.0
-      micromark-util-encode: 2.0.0
-      micromark-util-symbol: 2.0.0
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-subtokenize@2.0.1:
+  micromark-util-subtokenize@2.0.2:
     dependencies:
       devlop: 1.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-symbol@2.0.0: {}
+  micromark-util-symbol@2.0.1: {}
 
-  micromark-util-types@2.0.0: {}
+  micromark-util-types@2.0.1: {}
 
-  micromark@4.0.0:
+  micromark@4.0.1:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
-      micromark-core-commonmark: 2.0.1
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-chunked: 2.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-decode-numeric-character-reference: 2.0.1
-      micromark-util-encode: 2.0.0
-      micromark-util-normalize-identifier: 2.0.0
-      micromark-util-resolve-all: 2.0.0
-      micromark-util-sanitize-uri: 2.0.0
-      micromark-util-subtokenize: 2.0.1
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
@@ -13870,8 +13699,6 @@ snapshots:
 
   mimic-fn@1.2.0: {}
 
-  mimic-fn@2.1.0: {}
-
   mimic-fn@4.0.0: {}
 
   mimic-function@5.0.1: {}
@@ -13945,28 +13772,28 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mkdist@1.6.0(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3)):
+  mkdist@1.6.0(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3)):
     dependencies:
-      autoprefixer: 10.4.20(postcss@8.4.47)
+      autoprefixer: 10.4.20(postcss@8.4.49)
       citty: 0.1.6
-      cssnano: 7.0.6(postcss@8.4.47)
+      cssnano: 7.0.6(postcss@8.4.49)
       defu: 6.1.4
       esbuild: 0.24.0
       jiti: 1.21.6
-      mlly: 1.7.2
+      mlly: 1.7.3
       pathe: 1.1.2
       pkg-types: 1.2.1
-      postcss: 8.4.47
-      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss: 8.4.49
+      postcss-nested: 6.2.0(postcss@8.4.49)
       semver: 7.6.3
-      tinyglobby: 0.2.9
+      tinyglobby: 0.2.10
     optionalDependencies:
       typescript: 5.6.3
-      vue-tsc: 2.1.6(typescript@5.6.3)
+      vue-tsc: 2.1.10(typescript@5.6.3)
 
-  mlly@1.7.2:
+  mlly@1.7.3:
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
       pathe: 1.1.2
       pkg-types: 1.2.1
       ufo: 1.5.4
@@ -14004,7 +13831,7 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  nanoid@5.0.7: {}
+  nanoid@5.0.8: {}
 
   nanotar@0.1.1: {}
 
@@ -14014,34 +13841,35 @@ snapshots:
 
   negotiator@0.6.3: {}
 
-  nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5):
+  nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.2
-      '@rollup/plugin-alias': 5.1.1(rollup@4.24.0)
-      '@rollup/plugin-commonjs': 25.0.8(rollup@4.24.0)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.24.0)
-      '@rollup/plugin-json': 6.1.0(rollup@4.24.0)
-      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.0)
-      '@rollup/plugin-replace': 5.0.7(rollup@4.24.0)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.24.0)
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.27.3)
+      '@rollup/plugin-commonjs': 28.0.1(rollup@4.27.3)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.27.3)
+      '@rollup/plugin-json': 6.1.0(rollup@4.27.3)
+      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.27.3)
+      '@rollup/plugin-replace': 6.0.1(rollup@4.27.3)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.27.3)
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
       '@types/http-proxy': 1.17.15
-      '@vercel/nft': 0.26.5(encoding@0.1.13)
+      '@vercel/nft': 0.27.6(encoding@0.1.13)
       archiver: 7.0.1
-      c12: 1.11.2(magicast@0.3.5)
-      chalk: 5.3.0
+      c12: 2.0.1(magicast@0.3.5)
       chokidar: 3.6.0
       citty: 0.1.6
+      compatx: 0.1.8
+      confbox: 0.1.8
       consola: 3.2.3
       cookie-es: 1.2.2
-      croner: 8.1.2
-      crossws: 0.2.4
-      db0: 0.1.4
+      croner: 9.0.0
+      crossws: 0.3.1
+      db0: 0.2.1
       defu: 6.1.4
       destr: 2.0.3
-      dot-prop: 8.0.2
-      esbuild: 0.20.2
+      dot-prop: 9.0.0
+      esbuild: 0.24.0
       escape-string-regexp: 5.0.0
       etag: 1.8.1
       fs-extra: 11.2.0
@@ -14051,36 +13879,37 @@ snapshots:
       hookable: 5.5.3
       httpxy: 0.1.5
       ioredis: 5.4.1
-      jiti: 1.21.6
+      jiti: 2.4.0
       klona: 2.0.6
       knitwork: 1.1.0
       listhen: 1.9.0
-      magic-string: 0.30.12
+      magic-string: 0.30.13
+      magicast: 0.3.5
       mime: 4.0.4
-      mlly: 1.7.2
-      mri: 1.2.0
+      mlly: 1.7.3
       node-fetch-native: 1.6.4
       ofetch: 1.4.1
       ohash: 1.1.4
-      openapi-typescript: 6.7.6
+      openapi-typescript: 7.4.3(encoding@0.1.13)(typescript@5.6.3)
       pathe: 1.1.2
       perfect-debounce: 1.0.0
       pkg-types: 1.2.1
       pretty-bytes: 6.1.1
       radix3: 1.1.2
-      rollup: 4.24.0
-      rollup-plugin-visualizer: 5.12.0(rollup@4.24.0)
+      rollup: 4.27.3
+      rollup-plugin-visualizer: 5.12.0(rollup@4.27.3)
       scule: 1.3.0
       semver: 7.6.3
       serve-placeholder: 2.0.2
       serve-static: 1.16.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       ufo: 1.5.4
       uncrypto: 0.1.3
       unctx: 2.3.1
       unenv: 1.10.0
-      unimport: 3.13.1(rollup@4.24.0)
-      unstorage: 1.12.0(ioredis@5.4.1)
+      unimport: 3.13.2(rollup@4.27.3)
+      unstorage: 1.13.1(ioredis@5.4.1)
+      untyped: 1.5.1
       unwasm: 0.3.9
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -14090,6 +13919,7 @@ snapshots:
       - '@azure/keyvault-secrets'
       - '@azure/storage-blob'
       - '@capacitor/preferences'
+      - '@electric-sql/pglite'
       - '@libsql/client'
       - '@netlify/blobs'
       - '@planetscale/database'
@@ -14099,10 +13929,9 @@ snapshots:
       - drizzle-orm
       - encoding
       - idb-keyval
-      - magicast
+      - mysql2
       - supports-color
-      - uWebSockets.js
-      - webpack-sources
+      - typescript
 
   node-addon-api@7.1.1: {}
 
@@ -14122,7 +13951,7 @@ snapshots:
 
   node-forge@1.3.1: {}
 
-  node-gyp-build@4.8.2: {}
+  node-gyp-build@4.8.3: {}
 
   node-html-parser@6.1.13:
     dependencies:
@@ -14181,24 +14010,24 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxi@3.14.0: {}
+  nuxi@3.15.0: {}
 
-  nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@20.16.13)(encoding@0.1.13)(eslint@9.13.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.6(typescript@5.6.3)):
+  nuxt@3.14.159(@parcel/watcher@2.5.0)(@types/node@20.17.6)(encoding@0.1.13)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3)):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.6.0(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
-      '@nuxt/schema': 3.13.2(rollup@4.24.0)
-      '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.24.0)
-      '@nuxt/vite-builder': 3.13.2(@types/node@20.16.13)(eslint@9.13.0(jiti@2.3.3))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))(vue@3.5.12(typescript@5.6.3))
-      '@unhead/dom': 1.11.10
-      '@unhead/shared': 1.11.10
-      '@unhead/ssr': 1.11.10
-      '@unhead/vue': 1.11.10(vue@3.5.12(typescript@5.6.3))
-      '@vue/shared': 3.5.12
-      acorn: 8.12.1
-      c12: 1.11.2(magicast@0.3.5)
-      chokidar: 3.6.0
+      '@nuxt/devtools': 1.6.0(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@nuxt/schema': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
+      '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.27.3)
+      '@nuxt/vite-builder': 3.14.159(@types/node@20.17.6)(eslint@9.15.0(jiti@2.4.0))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
+      '@unhead/dom': 1.11.11
+      '@unhead/shared': 1.11.11
+      '@unhead/ssr': 1.11.11
+      '@unhead/vue': 1.11.11(vue@3.5.13(typescript@5.6.3))
+      '@vue/shared': 3.5.13
+      acorn: 8.14.0
+      c12: 2.0.1(magicast@0.3.5)
+      chokidar: 4.0.1
       compatx: 0.1.8
       consola: 3.2.3
       cookie-es: 1.2.2
@@ -14206,22 +14035,22 @@ snapshots:
       destr: 2.0.3
       devalue: 5.1.1
       errx: 0.1.0
-      esbuild: 0.23.1
+      esbuild: 0.24.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       globby: 14.0.2
       h3: 1.13.0
       hookable: 5.5.3
-      ignore: 5.3.2
-      impound: 0.1.0(rollup@4.24.0)
-      jiti: 1.21.6
+      ignore: 6.0.2
+      impound: 0.2.0(rollup@4.27.3)
+      jiti: 2.4.0
       klona: 2.0.6
       knitwork: 1.1.0
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      magic-string: 0.30.13
+      mlly: 1.7.3
       nanotar: 0.1.1
-      nitropack: 2.9.7(encoding@0.1.13)(magicast@0.3.5)
-      nuxi: 3.14.0
+      nitropack: 2.10.4(encoding@0.1.13)(typescript@5.6.3)
+      nuxi: 3.15.0
       nypm: 0.3.12
       ofetch: 1.4.1
       ohash: 1.1.4
@@ -14231,27 +14060,27 @@ snapshots:
       radix3: 1.1.2
       scule: 1.3.0
       semver: 7.6.3
-      std-env: 3.7.0
+      std-env: 3.8.0
       strip-literal: 2.1.0
-      tinyglobby: 0.2.6
+      tinyglobby: 0.2.10
       ufo: 1.5.4
       ultrahtml: 1.5.3
       uncrypto: 0.1.3
       unctx: 2.3.1
       unenv: 1.10.0
-      unhead: 1.11.10
-      unimport: 3.13.1(rollup@4.24.0)
-      unplugin: 1.14.1
-      unplugin-vue-router: 0.10.8(rollup@4.24.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
-      unstorage: 1.12.0(ioredis@5.4.1)
+      unhead: 1.11.11
+      unimport: 3.13.2(rollup@4.27.3)
+      unplugin: 1.16.0
+      unplugin-vue-router: 0.10.8(rollup@4.27.3)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      unstorage: 1.13.1(ioredis@5.4.1)
       untyped: 1.5.1
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
       vue-bundle-renderer: 2.1.1
       vue-devtools-stub: 0.1.0
-      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
-      '@parcel/watcher': 2.4.1
-      '@types/node': 20.16.13
+      '@parcel/watcher': 2.5.0
+      '@types/node': 20.17.6
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -14261,6 +14090,7 @@ snapshots:
       - '@azure/storage-blob'
       - '@biomejs/biome'
       - '@capacitor/preferences'
+      - '@electric-sql/pglite'
       - '@libsql/client'
       - '@netlify/blobs'
       - '@planetscale/database'
@@ -14277,6 +14107,7 @@ snapshots:
       - lightningcss
       - magicast
       - meow
+      - mysql2
       - optionator
       - rollup
       - sass
@@ -14287,13 +14118,11 @@ snapshots:
       - supports-color
       - terser
       - typescript
-      - uWebSockets.js
       - utf-8-validate
       - vite
       - vls
       - vti
       - vue-tsc
-      - webpack-sources
       - xml2js
 
   nypm@0.3.12:
@@ -14329,10 +14158,6 @@ snapshots:
     dependencies:
       mimic-fn: 1.2.0
 
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -14341,9 +14166,11 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
-  oniguruma-to-js@0.4.3:
+  oniguruma-to-es@0.4.1:
     dependencies:
-      regex: 4.3.3
+      emoji-regex-xs: 1.0.0
+      regex: 5.0.2
+      regex-recursion: 4.2.1
 
   only@0.0.2: {}
 
@@ -14369,14 +14196,17 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openapi-typescript@6.7.6:
+  openapi-typescript@7.4.3(encoding@0.1.13)(typescript@5.6.3):
     dependencies:
+      '@redocly/openapi-core': 1.25.11(encoding@0.1.13)(supports-color@9.4.0)
       ansi-colors: 4.1.3
-      fast-glob: 3.3.2
-      js-yaml: 4.1.0
+      change-case: 5.4.4
+      parse-json: 8.1.0
       supports-color: 9.4.0
-      undici: 5.28.4
+      typescript: 5.6.3
       yargs-parser: 21.1.1
+    transitivePeerDependencies:
+      - encoding
 
   optionator@0.9.4:
     dependencies:
@@ -14394,7 +14224,7 @@ snapshots:
       cli-spinners: 1.3.1
       log-symbols: 2.2.0
 
-  ora@8.1.0:
+  ora@8.1.1:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 5.0.0
@@ -14452,7 +14282,7 @@ snapshots:
       registry-url: 3.1.0
       semver: 5.7.2
 
-  package-manager-detector@0.2.2: {}
+  package-manager-detector@0.2.4: {}
 
   pacote@2.7.38:
     dependencies:
@@ -14515,11 +14345,17 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.25.7
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-json@8.1.0:
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      index-to-position: 0.1.2
+      type-fest: 4.27.0
+
   parse-passwd@1.0.0: {}
 
   parse-path@7.0.0:
@@ -14559,7 +14395,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.0.1
+      lru-cache: 11.0.2
       minipass: 7.1.2
 
   path-to-regexp@6.3.0: {}
@@ -14596,7 +14432,7 @@ snapshots:
   pkg-types@1.2.1:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.2
+      mlly: 1.7.3
       pathe: 1.1.2
 
   pluralize@8.0.0: {}
@@ -14609,226 +14445,231 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  postcss-calc@10.0.2(postcss@8.4.47):
+  postcss-calc@10.0.2(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.2(postcss@8.4.47):
+  postcss-colormin@7.0.2(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.4(postcss@8.4.47):
+  postcss-convert-values@7.0.4(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
-      postcss: 8.4.47
+      browserslist: 4.24.2
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-discard-comments@7.0.3(postcss@8.4.47):
+  postcss-discard-comments@7.0.3(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-discard-duplicates@7.0.1(postcss@8.4.47):
+  postcss-discard-duplicates@7.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-discard-empty@7.0.0(postcss@8.4.47):
+  postcss-discard-empty@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-discard-overridden@7.0.0(postcss@8.4.47):
+  postcss-discard-overridden@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-import@15.1.0(postcss@8.4.47):
+  postcss-import@15.1.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.47):
+  postcss-js@4.0.1(postcss@8.4.49):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-less@6.0.0(postcss@8.4.47):
+  postcss-less@6.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-load-config@4.0.2(postcss@8.4.47):
+  postcss-load-config@4.0.2(postcss@8.4.49):
     dependencies:
       lilconfig: 3.1.2
       yaml: 2.6.0
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-load-config@6.0.1(jiti@2.3.3)(postcss@8.4.47)(tsx@4.19.1)(yaml@2.6.0):
+  postcss-load-config@6.0.1(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.6.0):
     dependencies:
       lilconfig: 3.1.2
     optionalDependencies:
-      jiti: 2.3.3
-      postcss: 8.4.47
-      tsx: 4.19.1
+      jiti: 2.4.0
+      postcss: 8.4.49
+      tsx: 4.19.2
       yaml: 2.6.0
 
-  postcss-merge-longhand@7.0.4(postcss@8.4.47):
+  postcss-merge-longhand@7.0.4(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
-      stylehacks: 7.0.4(postcss@8.4.47)
+      stylehacks: 7.0.4(postcss@8.4.49)
 
-  postcss-merge-rules@7.0.4(postcss@8.4.47):
+  postcss-merge-rules@7.0.4(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
-      cssnano-utils: 5.0.0(postcss@8.4.47)
-      postcss: 8.4.47
+      cssnano-utils: 5.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-minify-font-values@7.0.0(postcss@8.4.47):
+  postcss-minify-font-values@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@7.0.0(postcss@8.4.47):
+  postcss-minify-gradients@7.0.0(postcss@8.4.49):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 5.0.0(postcss@8.4.47)
-      postcss: 8.4.47
+      cssnano-utils: 5.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.2(postcss@8.4.47):
+  postcss-minify-params@7.0.2(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
-      cssnano-utils: 5.0.0(postcss@8.4.47)
-      postcss: 8.4.47
+      browserslist: 4.24.2
+      cssnano-utils: 5.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@7.0.4(postcss@8.4.47):
+  postcss-minify-selectors@7.0.4(postcss@8.4.49):
     dependencies:
       cssesc: 3.0.0
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-nested@6.2.0(postcss@8.4.47):
+  postcss-nested@6.2.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-nesting@13.0.0(postcss@8.4.47):
+  postcss-nesting@13.0.1(postcss@8.4.49):
     dependencies:
-      '@csstools/selector-resolve-nested': 2.0.0(postcss-selector-parser@6.1.2)
-      '@csstools/selector-specificity': 4.0.0(postcss-selector-parser@6.1.2)
-      postcss: 8.4.47
-      postcss-selector-parser: 6.1.2
+      '@csstools/selector-resolve-nested': 3.0.0(postcss-selector-parser@7.0.0)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0)
+      postcss: 8.4.49
+      postcss-selector-parser: 7.0.0
 
-  postcss-normalize-charset@7.0.0(postcss@8.4.47):
+  postcss-normalize-charset@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-normalize-display-values@7.0.0(postcss@8.4.47):
+  postcss-normalize-display-values@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@7.0.0(postcss@8.4.47):
+  postcss-normalize-positions@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@7.0.0(postcss@8.4.47):
+  postcss-normalize-repeat-style@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@7.0.0(postcss@8.4.47):
+  postcss-normalize-string@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@7.0.0(postcss@8.4.47):
+  postcss-normalize-timing-functions@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.2(postcss@8.4.47):
+  postcss-normalize-unicode@7.0.2(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
-      postcss: 8.4.47
+      browserslist: 4.24.2
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@7.0.0(postcss@8.4.47):
+  postcss-normalize-url@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@7.0.0(postcss@8.4.47):
+  postcss-normalize-whitespace@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@7.0.1(postcss@8.4.47):
+  postcss-ordered-values@7.0.1(postcss@8.4.49):
     dependencies:
-      cssnano-utils: 5.0.0(postcss@8.4.47)
-      postcss: 8.4.47
+      cssnano-utils: 5.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-initial@7.0.2(postcss@8.4.47):
+  postcss-reduce-initial@7.0.2(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       caniuse-api: 3.0.0
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-reduce-transforms@7.0.0(postcss@8.4.47):
+  postcss-reduce-transforms@7.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   postcss-sass@0.5.0:
     dependencies:
       gonzales-pe: 4.3.0
-      postcss: 8.4.47
+      postcss: 8.4.49
 
-  postcss-scss@4.0.9(postcss@8.4.47):
+  postcss-scss@4.0.9(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
 
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.0.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-styl@0.12.3:
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       fast-diff: 1.3.0
       lodash.sortedlastindex: 4.1.0
-      postcss: 8.4.47
+      postcss: 8.4.49
       stylus: 0.57.0
     transitivePeerDependencies:
       - supports-color
 
-  postcss-svgo@7.0.1(postcss@8.4.47):
+  postcss-svgo@7.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
       svgo: 3.3.2
 
-  postcss-unique-selectors@7.0.3(postcss@8.4.47):
+  postcss-unique-selectors@7.0.3(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.47:
+  postcss@8.4.49:
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.1.1
@@ -14906,20 +14747,20 @@ snapshots:
 
   quickselect@2.0.0: {}
 
-  radix-vue@1.9.8(vue@3.5.12(typescript@5.6.3)):
+  radix-vue@1.9.8(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@floating-ui/dom': 1.6.11
-      '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3))
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.6.3))
       '@internationalized/date': 3.5.6
       '@internationalized/number': 3.5.4
-      '@tanstack/vue-virtual': 3.10.8(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.3))
+      '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.6.3))
       aria-hidden: 1.2.4
       defu: 6.1.4
       fast-deep-equal: 3.1.3
-      nanoid: 5.0.7
-      vue: 3.5.12(typescript@5.6.3)
+      nanoid: 5.0.8
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -15000,7 +14841,7 @@ snapshots:
       esprima: 4.0.1
       source-map: 0.6.1
       tiny-invariant: 1.3.3
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   redis-errors@1.2.0: {}
 
@@ -15010,15 +14851,23 @@ snapshots:
 
   refa@0.12.1:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
 
   regenerator-runtime@0.14.1: {}
 
-  regex@4.3.3: {}
+  regex-recursion@4.2.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@5.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
 
   regexp-ast-analysis@0.7.1:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
       refa: 0.12.1
 
   regexp-tree@0.1.27: {}
@@ -15036,20 +14885,20 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  reka-ui@1.0.0-alpha.4(vue@3.5.12(typescript@5.6.3)):
+  reka-ui@1.0.0-alpha.5(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@floating-ui/dom': 1.6.11
-      '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3))
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.6.3))
       '@internationalized/date': 3.5.6
       '@internationalized/number': 3.5.4
-      '@tanstack/vue-virtual': 3.10.8(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.3))
+      '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/core': 11.2.0(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/shared': 11.2.0(vue@3.5.13(typescript@5.6.3))
       aria-hidden: 1.2.4
       defu: 6.1.4
       fast-deep-equal: 3.1.3
-      nanoid: 5.0.7
-      vue: 3.5.12(typescript@5.6.3)
+      nanoid: 5.0.8
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -15130,45 +14979,47 @@ snapshots:
 
   rollup-plugin-dts@6.1.1(rollup@3.29.5)(typescript@5.6.3):
     dependencies:
-      magic-string: 0.30.12
+      magic-string: 0.30.13
       rollup: 3.29.5
       typescript: 5.6.3
     optionalDependencies:
-      '@babel/code-frame': 7.25.7
+      '@babel/code-frame': 7.26.2
 
-  rollup-plugin-visualizer@5.12.0(rollup@4.24.0):
+  rollup-plugin-visualizer@5.12.0(rollup@4.27.3):
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
       source-map: 0.7.4
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.24.0
+      rollup: 4.27.3
 
   rollup@3.29.5:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.24.0:
+  rollup@4.27.3:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.24.0
-      '@rollup/rollup-android-arm64': 4.24.0
-      '@rollup/rollup-darwin-arm64': 4.24.0
-      '@rollup/rollup-darwin-x64': 4.24.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.24.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.24.0
-      '@rollup/rollup-linux-arm64-gnu': 4.24.0
-      '@rollup/rollup-linux-arm64-musl': 4.24.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.24.0
-      '@rollup/rollup-linux-s390x-gnu': 4.24.0
-      '@rollup/rollup-linux-x64-gnu': 4.24.0
-      '@rollup/rollup-linux-x64-musl': 4.24.0
-      '@rollup/rollup-win32-arm64-msvc': 4.24.0
-      '@rollup/rollup-win32-ia32-msvc': 4.24.0
-      '@rollup/rollup-win32-x64-msvc': 4.24.0
+      '@rollup/rollup-android-arm-eabi': 4.27.3
+      '@rollup/rollup-android-arm64': 4.27.3
+      '@rollup/rollup-darwin-arm64': 4.27.3
+      '@rollup/rollup-darwin-x64': 4.27.3
+      '@rollup/rollup-freebsd-arm64': 4.27.3
+      '@rollup/rollup-freebsd-x64': 4.27.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.27.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.27.3
+      '@rollup/rollup-linux-arm64-gnu': 4.27.3
+      '@rollup/rollup-linux-arm64-musl': 4.27.3
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.27.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.27.3
+      '@rollup/rollup-linux-s390x-gnu': 4.27.3
+      '@rollup/rollup-linux-x64-gnu': 4.27.3
+      '@rollup/rollup-linux-x64-musl': 4.27.3
+      '@rollup/rollup-win32-arm64-msvc': 4.27.3
+      '@rollup/rollup-win32-ia32-msvc': 4.27.3
+      '@rollup/rollup-win32-x64-msvc': 4.27.3
       fsevents: 2.3.3
 
   run-applescript@7.0.0: {}
@@ -15199,7 +15050,7 @@ snapshots:
 
   scslre@0.3.0:
     dependencies:
-      '@eslint-community/regexpp': 4.11.1
+      '@eslint-community/regexpp': 4.12.1
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
@@ -15272,21 +15123,12 @@ snapshots:
 
   shell-quote@1.8.1: {}
 
-  shiki@1.22.0:
+  shiki@1.23.1:
     dependencies:
-      '@shikijs/core': 1.22.0
-      '@shikijs/engine-javascript': 1.22.0
-      '@shikijs/engine-oniguruma': 1.22.0
-      '@shikijs/types': 1.22.0
-      '@shikijs/vscode-textmate': 9.3.0
-      '@types/hast': 3.0.4
-
-  shiki@1.22.1:
-    dependencies:
-      '@shikijs/core': 1.22.1
-      '@shikijs/engine-javascript': 1.22.1
-      '@shikijs/engine-oniguruma': 1.22.1
-      '@shikijs/types': 1.22.1
+      '@shikijs/core': 1.23.1
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
@@ -15306,7 +15148,7 @@ snapshots:
     dependencies:
       '@kwsites/file-exists': 1.1.1
       '@kwsites/promise-deferred': 1.1.1
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -15316,6 +15158,12 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  sirv@3.0.0:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   slash@4.0.0: {}
@@ -15419,7 +15267,7 @@ snapshots:
 
   statuses@2.0.1: {}
 
-  std-env@3.7.0: {}
+  std-env@3.8.0: {}
 
   stdin-discarder@0.2.2: {}
 
@@ -15430,7 +15278,7 @@ snapshots:
 
   stream-shift@1.0.3: {}
 
-  streamx@2.20.1:
+  streamx@2.20.2:
     dependencies:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
@@ -15496,8 +15344,6 @@ snapshots:
 
   strip-eof@1.0.0: {}
 
-  strip-final-newline@2.0.0: {}
-
   strip-final-newline@3.0.0: {}
 
   strip-indent@3.0.0:
@@ -15514,10 +15360,10 @@ snapshots:
 
   striptags@3.2.0: {}
 
-  stylehacks@7.0.4(postcss@8.4.47):
+  stylehacks@7.0.4(postcss@8.4.49):
     dependencies:
-      browserslist: 4.24.0
-      postcss: 8.4.47
+      browserslist: 4.24.2
+      postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
   stylis@4.2.0: {}
@@ -15525,7 +15371,7 @@ snapshots:
   stylus@0.57.0:
     dependencies:
       css: 3.0.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       glob: 7.2.3
       safer-buffer: 2.1.2
       sax: 1.2.4
@@ -15577,12 +15423,12 @@ snapshots:
 
   synckit@0.6.2:
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   synckit@0.9.2:
     dependencies:
       '@pkgr/core': 0.1.1
-      tslib: 2.8.0
+      tslib: 2.8.1
 
   system-architecture@0.1.0: {}
 
@@ -15596,7 +15442,7 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwind-config-viewer@2.0.4(tailwindcss@3.4.14):
+  tailwind-config-viewer@2.0.4(tailwindcss@3.4.15):
     dependencies:
       '@koa/router': 12.0.2
       commander: 6.2.1
@@ -15606,17 +15452,17 @@ snapshots:
       open: 7.4.2
       portfinder: 1.0.32
       replace-in-file: 6.3.5
-      tailwindcss: 3.4.14
+      tailwindcss: 3.4.15
     transitivePeerDependencies:
       - supports-color
 
   tailwind-merge@2.5.4: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.15):
     dependencies:
-      tailwindcss: 3.4.14
+      tailwindcss: 3.4.15
 
-  tailwindcss@3.4.14:
+  tailwindcss@3.4.15:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -15632,11 +15478,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
-      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)
+      postcss-nested: 6.2.0(postcss@8.4.49)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -15666,7 +15512,7 @@ snapshots:
     dependencies:
       b4a: 1.6.7
       fast-fifo: 1.3.2
-      streamx: 2.20.1
+      streamx: 2.20.2
 
   tar@6.2.1:
     dependencies:
@@ -15679,10 +15525,10 @@ snapshots:
 
   taze@0.16.9:
     dependencies:
-      '@antfu/ni': 0.23.0
+      '@antfu/ni': 0.23.1
       js-yaml: 4.1.0
       ofetch: 1.4.1
-      package-manager-detector: 0.2.2
+      package-manager-detector: 0.2.4
       tinyexec: 0.3.1
       unconfig: 0.5.5
       yargs: 17.7.2
@@ -15696,7 +15542,7 @@ snapshots:
   terser@5.36.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.13.0
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -15704,8 +15550,6 @@ snapshots:
 
   text-extensions@2.4.0: {}
 
-  text-table@0.2.0: {}
-
   textextensions@2.6.0: {}
 
   thenify-all@1.6.0:
@@ -15735,17 +15579,12 @@ snapshots:
 
   tinyexec@0.3.1: {}
 
-  tinyglobby@0.2.6:
+  tinyglobby@0.2.10:
     dependencies:
       fdir: 6.4.2(picomatch@4.0.2)
       picomatch: 4.0.2
 
-  tinyglobby@0.2.9:
-    dependencies:
-      fdir: 6.4.2(picomatch@4.0.2)
-      picomatch: 4.0.2
-
-  tinypool@1.0.1: {}
+  tinypool@1.0.2: {}
 
   tinyqueue@2.0.3: {}
 
@@ -15759,8 +15598,6 @@ snapshots:
 
   to-buffer@1.1.1: {}
 
-  to-fast-properties@2.0.0: {}
-
   to-px@1.1.0:
     dependencies:
       parse-unit: 1.0.1
@@ -15791,7 +15628,7 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  ts-api-utils@1.3.0(typescript@5.6.3):
+  ts-api-utils@1.4.0(typescript@5.6.3):
     dependencies:
       typescript: 5.6.3
 
@@ -15809,30 +15646,30 @@ snapshots:
 
   tslib@1.14.1: {}
 
-  tslib@2.8.0: {}
+  tslib@2.8.1: {}
 
   tsscmp@1.0.6: {}
 
-  tsup@8.3.0(jiti@2.3.3)(postcss@8.4.47)(tsx@4.19.1)(typescript@5.6.3)(yaml@2.6.0):
+  tsup@8.3.5(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0):
     dependencies:
-      bundle-require: 5.0.0(esbuild@0.23.1)
+      bundle-require: 5.0.0(esbuild@0.24.0)
       cac: 6.7.14
-      chokidar: 3.6.0
+      chokidar: 4.0.1
       consola: 3.2.3
-      debug: 4.3.7
-      esbuild: 0.23.1
-      execa: 5.1.1
+      debug: 4.3.7(supports-color@9.4.0)
+      esbuild: 0.24.0
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.3.3)(postcss@8.4.47)(tsx@4.19.1)(yaml@2.6.0)
+      postcss-load-config: 6.0.1(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.6.0)
       resolve-from: 5.0.0
-      rollup: 4.24.0
+      rollup: 4.27.3
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
-      tinyglobby: 0.2.9
+      tinyexec: 0.3.1
+      tinyglobby: 0.2.10
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
       typescript: 5.6.3
     transitivePeerDependencies:
       - jiti
@@ -15840,7 +15677,7 @@ snapshots:
       - tsx
       - yaml
 
-  tsx@4.19.1:
+  tsx@4.19.2:
     dependencies:
       esbuild: 0.23.1
       get-tsconfig: 4.8.1
@@ -15861,9 +15698,7 @@ snapshots:
 
   type-fest@0.8.1: {}
 
-  type-fest@3.13.1: {}
-
-  type-fest@4.26.1: {}
+  type-fest@4.27.0: {}
 
   type-is@1.6.18:
     dependencies:
@@ -15880,14 +15715,14 @@ snapshots:
 
   ultrahtml@1.5.3: {}
 
-  unbuild@2.0.0(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3)):
+  unbuild@2.0.0(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
       '@rollup/plugin-json': 6.1.0(rollup@3.29.5)
       '@rollup/plugin-node-resolve': 15.3.0(rollup@3.29.5)
       '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@rollup/pluginutils': 5.1.2(rollup@3.29.5)
+      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
       chalk: 5.3.0
       citty: 0.1.6
       consola: 3.2.3
@@ -15896,9 +15731,9 @@ snapshots:
       globby: 13.2.2
       hookable: 5.5.3
       jiti: 1.21.6
-      magic-string: 0.30.12
-      mkdist: 1.6.0(typescript@5.6.3)(vue-tsc@2.1.6(typescript@5.6.3))
-      mlly: 1.7.2
+      magic-string: 0.30.13
+      mkdist: 1.6.0(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
+      mlly: 1.7.3
       pathe: 1.1.2
       pkg-types: 1.2.1
       pretty-bytes: 6.1.1
@@ -15925,19 +15760,13 @@ snapshots:
 
   unctx@2.3.1:
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
       estree-walker: 3.0.3
-      magic-string: 0.30.12
-      unplugin: 1.14.1
-    transitivePeerDependencies:
-      - webpack-sources
+      magic-string: 0.30.13
+      unplugin: 1.16.0
 
   undici-types@6.19.8: {}
 
-  undici@5.28.4:
-    dependencies:
-      '@fastify/busboy': 2.1.1
-
   unenv@1.10.0:
     dependencies:
       consola: 3.2.3
@@ -15946,33 +15775,32 @@ snapshots:
       node-fetch-native: 1.6.4
       pathe: 1.1.2
 
-  unhead@1.11.10:
+  unhead@1.11.11:
     dependencies:
-      '@unhead/dom': 1.11.10
-      '@unhead/schema': 1.11.10
-      '@unhead/shared': 1.11.10
+      '@unhead/dom': 1.11.11
+      '@unhead/schema': 1.11.11
+      '@unhead/shared': 1.11.11
       hookable: 5.5.3
 
   unicorn-magic@0.1.0: {}
 
-  unimport@3.13.1(rollup@4.24.0):
+  unimport@3.13.2(rollup@4.27.3):
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      acorn: 8.13.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.2
-      local-pkg: 0.5.0
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      local-pkg: 0.5.1
+      magic-string: 0.30.13
+      mlly: 1.7.3
       pathe: 1.1.2
       pkg-types: 1.2.1
       scule: 1.3.0
       strip-literal: 2.1.0
-      unplugin: 1.14.1
+      unplugin: 1.16.0
     transitivePeerDependencies:
       - rollup
-      - webpack-sources
 
   unique-filename@1.1.1:
     dependencies:
@@ -16013,58 +15841,56 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-icons@0.19.3(@vue/compiler-sfc@3.5.12):
+  unplugin-icons@0.19.3(@vue/compiler-sfc@3.5.13):
     dependencies:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
       '@iconify/utils': 2.1.33
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       kolorist: 1.8.0
-      local-pkg: 0.5.0
-      unplugin: 1.14.1
+      local-pkg: 0.5.1
+      unplugin: 1.16.0
     optionalDependencies:
-      '@vue/compiler-sfc': 3.5.12
+      '@vue/compiler-sfc': 3.5.13
     transitivePeerDependencies:
       - supports-color
-      - webpack-sources
 
-  unplugin-vue-router@0.10.8(rollup@4.24.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  unplugin-vue-router@0.10.8(rollup@4.27.3)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@babel/types': 7.25.8
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      '@vue-macros/common': 1.15.0(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))
+      '@babel/types': 7.26.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      '@vue-macros/common': 1.15.0(rollup@4.27.3)(vue@3.5.13(typescript@5.6.3))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
       fast-glob: 3.3.2
       json5: 2.2.3
-      local-pkg: 0.5.0
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      local-pkg: 0.5.1
+      magic-string: 0.30.13
+      mlly: 1.7.3
       pathe: 1.1.2
       scule: 1.3.0
-      unplugin: 1.14.1
+      unplugin: 1.16.0
       yaml: 2.6.0
     optionalDependencies:
-      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - rollup
       - vue
-      - webpack-sources
 
-  unplugin@1.14.1:
+  unplugin@1.16.0:
     dependencies:
-      acorn: 8.13.0
+      acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
-  unstorage@1.12.0(ioredis@5.4.1):
+  unstorage@1.13.1(ioredis@5.4.1):
     dependencies:
       anymatch: 3.1.3
       chokidar: 3.6.0
+      citty: 0.1.6
       destr: 2.0.3
       h3: 1.13.0
       listhen: 1.9.0
       lru-cache: 10.4.3
-      mri: 1.2.0
       node-fetch-native: 1.6.4
       ofetch: 1.4.1
       ufo: 1.5.4
@@ -16079,11 +15905,11 @@ snapshots:
 
   untyped@1.5.1:
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/standalone': 7.25.8
-      '@babel/types': 7.25.8
+      '@babel/core': 7.26.0
+      '@babel/standalone': 7.26.2
+      '@babel/types': 7.26.0
       defu: 6.1.4
-      jiti: 2.3.3
+      jiti: 2.4.0
       mri: 1.2.0
       scule: 1.3.0
     transitivePeerDependencies:
@@ -16092,19 +15918,17 @@ snapshots:
   unwasm@0.3.9:
     dependencies:
       knitwork: 1.1.0
-      magic-string: 0.30.12
-      mlly: 1.7.2
+      magic-string: 0.30.13
+      mlly: 1.7.3
       pathe: 1.1.2
       pkg-types: 1.2.1
-      unplugin: 1.14.1
-    transitivePeerDependencies:
-      - webpack-sources
+      unplugin: 1.16.0
 
   unzip-response@2.0.1: {}
 
-  update-browserslist-db@1.1.1(browserslist@4.24.0):
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
-      browserslist: 4.24.0
+      browserslist: 4.24.2
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -16123,6 +15947,8 @@ snapshots:
 
   uqr@0.1.2: {}
 
+  uri-js-replace@1.0.1: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -16135,16 +15961,16 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.5.12(typescript@5.6.3)):
+  v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@popperjs/core': 2.11.8
-      '@types/lodash': 4.17.12
+      '@types/lodash': 4.17.13
       '@types/resize-observer-browser': 0.1.11
       date-fns: 2.30.0
       date-fns-tz: 2.0.1(date-fns@2.30.0)
       lodash: 4.17.21
-      vue: 3.5.12(typescript@5.6.3)
-      vue-screen-utils: 1.0.0-beta.13(vue@3.5.12(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
+      vue-screen-utils: 1.0.0-beta.13(vue@3.5.13(typescript@5.6.3))
 
   validate-npm-package-license@3.0.4:
     dependencies:
@@ -16157,25 +15983,25 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul-vue@0.2.0(radix-vue@1.9.8(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  vaul-vue@0.2.0(radix-vue@1.9.8(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.3))
-      radix-vue: 1.9.8(vue@3.5.12(typescript@5.6.3))
-      vue: 3.5.12(typescript@5.6.3)
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3))
+      radix-vue: 1.9.8(vue@3.5.13(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  vee-validate@4.13.2(vue@3.5.12(typescript@5.6.3)):
+  vee-validate@4.13.2(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      type-fest: 4.26.1
-      vue: 3.5.12(typescript@5.6.3)
+      type-fest: 4.27.0
+      vue: 3.5.13(typescript@5.6.3)
 
-  vee-validate@4.14.3(vue@3.5.12(typescript@5.6.3)):
+  vee-validate@4.14.7(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@vue/devtools-api': 7.5.2
-      type-fest: 4.26.1
-      vue: 3.5.12(typescript@5.6.3)
+      '@vue/devtools-api': 7.6.4
+      type-fest: 4.27.0
+      vue: 3.5.13(typescript@5.6.3)
 
   vfile-message@4.0.2:
     dependencies:
@@ -16187,16 +16013,17 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-hot-client@0.2.3(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)):
+  vite-hot-client@0.2.3(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)):
     dependencies:
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
 
-  vite-node@2.1.3(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0):
+  vite-node@2.1.5(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
+      es-module-lexer: 1.5.4
       pathe: 1.1.2
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -16208,12 +16035,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@2.1.3(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0):
+  vite-node@2.1.5(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
+      es-module-lexer: 1.5.4
       pathe: 1.1.2
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -16225,9 +16053,9 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.8.0(eslint@9.13.0(jiti@2.3.3))(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.6(typescript@5.6.3)):
+  vite-plugin-checker@0.8.0(eslint@9.15.0(jiti@2.4.0))(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3)):
     dependencies:
-      '@babel/code-frame': 7.25.7
+      '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       chokidar: 3.6.0
@@ -16237,104 +16065,105 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
     optionalDependencies:
-      eslint: 9.13.0(jiti@2.3.3)
+      eslint: 9.15.0(jiti@2.4.0)
       optionator: 0.9.4
       typescript: 5.6.3
-      vue-tsc: 2.1.6(typescript@5.6.3)
+      vue-tsc: 2.1.10(typescript@5.6.3)
 
-  vite-plugin-inspect@0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)):
+  vite-plugin-inspect@0.8.7(@nuxt/kit@3.14.159(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      debug: 4.3.7
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
+      debug: 4.3.7(supports-color@9.4.0)
       error-stack-parser-es: 0.1.5
       fs-extra: 11.2.0
       open: 10.1.0
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 2.0.4
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
     optionalDependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
+      '@nuxt/kit': 3.14.159(magicast@0.3.5)(rollup@4.27.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@5.1.3(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)):
+  vite-plugin-vue-inspector@5.1.3(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)):
     dependencies:
-      '@babel/core': 7.25.8
-      '@babel/plugin-proposal-decorators': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-syntax-import-attributes': 7.25.7(@babel/core@7.25.8)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.8)
-      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8)
-      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
-      '@vue/compiler-dom': 3.5.12
+      '@babel/core': 7.26.0
+      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
+      '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
-      magic-string: 0.30.12
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      magic-string: 0.30.13
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-tsconfig-paths@5.0.1(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)):
+  vite-tsconfig-paths@5.1.2(typescript@5.6.3)(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)):
     dependencies:
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       globrex: 0.1.2
       tsconfck: 3.1.4(typescript@5.6.3)
     optionalDependencies:
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0):
+  vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.24.0
+      postcss: 8.4.49
+      rollup: 4.27.3
     optionalDependencies:
-      '@types/node': 20.16.13
+      '@types/node': 20.17.6
       fsevents: 2.3.3
       stylus: 0.57.0
       terser: 5.36.0
 
-  vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0):
+  vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.24.0
+      postcss: 8.4.49
+      rollup: 4.27.3
     optionalDependencies:
-      '@types/node': 22.7.7
+      '@types/node': 22.9.0
       fsevents: 2.3.3
       stylus: 0.57.0
       terser: 5.36.0
 
-  vitepress@1.4.1(@algolia/client-search@4.24.0)(@types/node@22.7.7)(postcss@8.4.47)(search-insights@2.17.2)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3):
+  vitepress@1.5.0(@algolia/client-search@5.14.2)(@types/node@22.9.0)(change-case@5.4.4)(postcss@8.4.49)(search-insights@2.17.2)(stylus@0.57.0)(terser@5.36.0)(typescript@5.6.3):
     dependencies:
-      '@docsearch/css': 3.6.2
-      '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)
-      '@shikijs/core': 1.22.0
-      '@shikijs/transformers': 1.22.0
-      '@shikijs/types': 1.22.0
+      '@docsearch/css': 3.8.0
+      '@docsearch/js': 3.8.0(@algolia/client-search@5.14.2)(search-insights@2.17.2)
+      '@iconify-json/simple-icons': 1.2.11
+      '@shikijs/core': 1.23.1
+      '@shikijs/transformers': 1.23.1
+      '@shikijs/types': 1.23.1
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@vue/devtools-api': 7.5.2
-      '@vue/shared': 3.5.12
-      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
-      '@vueuse/integrations': 11.1.0(focus-trap@7.6.0)(vue@3.5.12(typescript@5.6.3))
-      focus-trap: 7.6.0
+      '@vitejs/plugin-vue': 5.2.0(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+      '@vue/devtools-api': 7.6.4
+      '@vue/shared': 3.5.13
+      '@vueuse/core': 11.2.0(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/integrations': 11.2.0(change-case@5.4.4)(focus-trap@7.6.2)(vue@3.5.13(typescript@5.6.3))
+      focus-trap: 7.6.2
       mark.js: 8.11.1
       minisearch: 7.1.0
-      shiki: 1.22.1
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
-      vue: 3.5.12(typescript@5.6.3)
+      shiki: 1.23.1
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
+      vue: 3.5.13(typescript@5.6.3)
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.4.49
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -16363,9 +16192,9 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest-environment-nuxt@1.0.1(@vitest/ui@2.1.3(vitest@2.1.3))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  vitest-environment-nuxt@1.0.1(@vitest/ui@2.1.5(vitest@2.1.5))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(@vitest/ui@2.1.3(vitest@2.1.3))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.0)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/test-utils': 3.14.4(@vitest/ui@2.1.5(vitest@2.1.5))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -16385,32 +16214,32 @@ snapshots:
       - vitest
       - vue
       - vue-router
-      - webpack-sources
-
-  vitest@2.1.3(@types/node@20.16.13)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0):
-    dependencies:
-      '@vitest/expect': 2.1.3
-      '@vitest/mocker': 2.1.3(@vitest/spy@2.1.3)(vite@5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0))
-      '@vitest/pretty-format': 2.1.3
-      '@vitest/runner': 2.1.3
-      '@vitest/snapshot': 2.1.3
-      '@vitest/spy': 2.1.3
-      '@vitest/utils': 2.1.3
-      chai: 5.1.1
-      debug: 4.3.7
-      magic-string: 0.30.12
+
+  vitest@2.1.5(@types/node@20.17.6)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0):
+    dependencies:
+      '@vitest/expect': 2.1.5
+      '@vitest/mocker': 2.1.5(vite@5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0))
+      '@vitest/pretty-format': 2.1.5
+      '@vitest/runner': 2.1.5
+      '@vitest/snapshot': 2.1.5
+      '@vitest/spy': 2.1.5
+      '@vitest/utils': 2.1.5
+      chai: 5.1.2
+      debug: 4.3.7(supports-color@9.4.0)
+      expect-type: 1.1.0
+      magic-string: 0.30.13
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinybench: 2.9.0
       tinyexec: 0.3.1
-      tinypool: 1.0.1
+      tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.9(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
-      vite-node: 2.1.3(@types/node@20.16.13)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
+      vite-node: 2.1.5(@types/node@20.17.6)(stylus@0.57.0)(terser@5.36.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.16.13
-      '@vitest/ui': 2.1.3(vitest@2.1.3)
+      '@types/node': 20.17.6
+      '@vitest/ui': 2.1.5(vitest@2.1.5)
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -16423,30 +16252,31 @@ snapshots:
       - terser
     optional: true
 
-  vitest@2.1.3(@types/node@22.7.7)(@vitest/ui@2.1.3)(stylus@0.57.0)(terser@5.36.0):
-    dependencies:
-      '@vitest/expect': 2.1.3
-      '@vitest/mocker': 2.1.3(@vitest/spy@2.1.3)(vite@5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0))
-      '@vitest/pretty-format': 2.1.3
-      '@vitest/runner': 2.1.3
-      '@vitest/snapshot': 2.1.3
-      '@vitest/spy': 2.1.3
-      '@vitest/utils': 2.1.3
-      chai: 5.1.1
-      debug: 4.3.7
-      magic-string: 0.30.12
+  vitest@2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0):
+    dependencies:
+      '@vitest/expect': 2.1.5
+      '@vitest/mocker': 2.1.5(vite@5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0))
+      '@vitest/pretty-format': 2.1.5
+      '@vitest/runner': 2.1.5
+      '@vitest/snapshot': 2.1.5
+      '@vitest/spy': 2.1.5
+      '@vitest/utils': 2.1.5
+      chai: 5.1.2
+      debug: 4.3.7(supports-color@9.4.0)
+      expect-type: 1.1.0
+      magic-string: 0.30.13
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinybench: 2.9.0
       tinyexec: 0.3.1
-      tinypool: 1.0.1
+      tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.9(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
-      vite-node: 2.1.3(@types/node@22.7.7)(stylus@0.57.0)(terser@5.36.0)
+      vite: 5.4.11(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
+      vite-node: 2.1.5(@types/node@22.9.0)(stylus@0.57.0)(terser@5.36.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.7.7
-      '@vitest/ui': 2.1.3(vitest@2.1.3)
+      '@types/node': 22.9.0
+      '@vitest/ui': 2.1.5(vitest@2.1.5)
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -16491,27 +16321,27 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
-  vue-component-meta@2.1.6(typescript@5.6.3):
+  vue-component-meta@2.1.10(typescript@5.6.3):
     dependencies:
-      '@volar/typescript': 2.4.6
-      '@vue/language-core': 2.1.6(typescript@5.6.3)
+      '@volar/typescript': 2.4.10
+      '@vue/language-core': 2.1.10(typescript@5.6.3)
       path-browserify: 1.0.1
-      vue-component-type-helpers: 2.1.6
+      vue-component-type-helpers: 2.1.10
     optionalDependencies:
       typescript: 5.6.3
 
-  vue-component-type-helpers@2.1.6: {}
+  vue-component-type-helpers@2.1.10: {}
 
-  vue-demi@0.14.10(vue@3.5.12(typescript@5.6.3)):
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-eslint-parser@9.4.3(eslint@9.13.0(jiti@2.3.3)):
+  vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      debug: 4.3.7
-      eslint: 9.13.0(jiti@2.3.3)
+      debug: 4.3.7(supports-color@9.4.0)
+      eslint: 9.15.0(jiti@2.4.0)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -16521,9 +16351,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-metamorph@3.2.0(eslint@9.13.0(jiti@2.3.3)):
+  vue-metamorph@3.2.2(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/parser': 8.0.0-alpha.12
+      '@babel/parser': 8.0.0-alpha.13
       ast-types: 0.14.2
       chalk: 5.3.0
       cli-progress: 3.12.0
@@ -16532,51 +16362,51 @@ snapshots:
       fs-extra: 11.2.0
       glob: 11.0.0
       lodash-es: 4.17.21
-      magic-string: 0.30.12
+      magic-string: 0.30.13
       micromatch: 4.0.8
       node-html-parser: 6.1.13
-      postcss: 8.4.47
-      postcss-less: 6.0.0(postcss@8.4.47)
+      postcss: 8.4.49
+      postcss-less: 6.0.0(postcss@8.4.49)
       postcss-sass: 0.5.0
-      postcss-scss: 4.0.9(postcss@8.4.47)
+      postcss-scss: 4.0.9(postcss@8.4.49)
       postcss-styl: 0.12.3
       recast: 0.23.9
       table: 6.8.2
-      vue-eslint-parser: 9.4.3(eslint@9.13.0(jiti@2.3.3))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.0))
     transitivePeerDependencies:
       - eslint
       - supports-color
 
-  vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)):
+  vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
-  vue-screen-utils@1.0.0-beta.13(vue@3.5.12(typescript@5.6.3)):
+  vue-screen-utils@1.0.0-beta.13(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
-  vue-sonner@1.2.2: {}
+  vue-sonner@1.2.5: {}
 
-  vue-tsc@2.1.6(typescript@5.6.3):
+  vue-tsc@2.1.10(typescript@5.6.3):
     dependencies:
-      '@volar/typescript': 2.4.6
-      '@vue/language-core': 2.1.6(typescript@5.6.3)
+      '@volar/typescript': 2.4.10
+      '@vue/language-core': 2.1.10(typescript@5.6.3)
       semver: 7.6.3
       typescript: 5.6.3
 
-  vue-wrap-balancer@1.2.1(vue@3.5.12(typescript@5.6.3)):
+  vue-wrap-balancer@1.2.1(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       nanoid: 3.3.7
-      vue: 3.5.12(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
 
-  vue@3.5.12(typescript@5.6.3):
+  vue@3.5.13(typescript@5.6.3):
     dependencies:
-      '@vue/compiler-dom': 3.5.12
-      '@vue/compiler-sfc': 3.5.12
-      '@vue/runtime-dom': 3.5.12
-      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3))
-      '@vue/shared': 3.5.12
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.3))
+      '@vue/shared': 3.5.13
     optionalDependencies:
       typescript: 5.6.3
 
@@ -16670,6 +16500,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
+  yaml-ast-parser@0.0.43: {}
+
   yaml-eslint-parser@1.2.3:
     dependencies:
       eslint-visitor-keys: 3.4.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 96405123f..1e3b7bfa1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
 catalog:
   '@oxc-parser/wasm': ^0.29.0
   typescript: ^5.6.3
-  reka-ui: ^1.0.0-alpha.4
+  reka-ui: ^1.0.0-alpha.5
   zod: ^3.23.8

From da5f36227f35c6cd687604e0d115fa8335460c85 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 19 Nov 2024 17:12:19 +0800
Subject: [PATCH 06/39] chore: run pnpm i and build regsitry

---
 .../registry/styles/default/auto-form.json    |  6 +--
 .../registry/styles/default/select.json       |  2 +-
 .../registry/styles/default/sidebar.json      |  4 +-
 .../registry/styles/new-york/auto-form.json   |  6 +--
 .../registry/styles/new-york/select.json      |  2 +-
 .../registry/styles/new-york/sidebar.json     |  4 +-
 pnpm-lock.yaml                                | 43 +++++--------------
 7 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index fca1f24d0..b565f1555 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
@@ -68,7 +68,7 @@
     },
     {
       "name": "constant.ts",
-      "content": "import AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
     },
     {
       "name": "dependencies.ts",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index c420f6382..e96b5fd53 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between 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 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
index 129913003..123e8cc14 100644
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ b/apps/www/src/public/registry/styles/default/sidebar.json
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index 769d0de9d..706363087 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
@@ -68,7 +68,7 @@
     },
     {
       "name": "constant.ts",
-      "content": "import AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
     },
     {
       "name": "dependencies.ts",
@@ -80,7 +80,7 @@
     },
     {
       "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
     },
     {
       "name": "utils.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 1596b0bec..002a4dcbc 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
index 5e03b5421..b88c60c98 100644
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ b/apps/www/src/public/registry/styles/new-york/sidebar.json
@@ -62,7 +62,7 @@
     },
     {
       "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot/>\n  </Primitive>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "SidebarMenuBadge.vue",
@@ -98,7 +98,7 @@
     },
     {
       "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = ref(false) // useIsMobile()\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
     },
     {
       "name": "SidebarRail.vue",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8087883ee..c8085d31f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -310,8 +310,8 @@ importers:
         specifier: '*'
         version: 2.1.5(@types/node@22.9.0)(@vitest/ui@2.1.5)(stylus@0.57.0)(terser@5.36.0)
       vue-metamorph:
-        specifier: ^3.2.2
-        version: 3.2.2(eslint@9.15.0(jiti@2.4.0))
+        specifier: 3.2.0
+        version: 3.2.0(eslint@9.15.0(jiti@2.4.0))
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -589,18 +589,10 @@ packages:
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@8.0.0-alpha.13':
-    resolution: {integrity: sha512-YHapkEwMu3nqoikRQhUqPZXUjqRepotzlYww49FWObNaU+9CKYtOJkJBwfY9RmcFDsFqGeLNk+IUSWRPgwhujA==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@8.0.0-alpha.13':
-    resolution: {integrity: sha512-/IZpaAHTp39t0YIZQT51w7xEAPVlEYA9YsxA4tUsveqjvkK47rc/teUWzhQnXKwMwWDiSnP9vLfxYCR2DomrWg==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@babel/helper-validator-option@7.25.9':
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
@@ -614,9 +606,9 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@8.0.0-alpha.13':
-    resolution: {integrity: sha512-b8jxzP/fDYLjByadJgnXutKZvjXJUIyf0bIWMUIX47jhtbgA3ZFPC0PByLlqD6rKhTbgvuGHZ0GQilMFL5EaOQ==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
+  '@babel/parser@8.0.0-alpha.12':
+    resolution: {integrity: sha512-AzWmrp4uJ+DcXVH0uoUpJVhRqxNirC0BbXsZ82AQuVod41CoaV5G+cwcvtYusrIIxv7BIJb6ce0dQ9L0wAl1iA==}
+    engines: {node: ^18.20.0 || ^20.10.0 || >=21.0.0}
     hasBin: true
 
   '@babel/plugin-proposal-decorators@7.25.9':
@@ -692,10 +684,6 @@ packages:
     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@8.0.0-alpha.13':
-    resolution: {integrity: sha512-Kt8oBPvsc0h5t06LfUPkBtkPk6t58FzCcpf4Qsjg142gEgaDwFcg+ZPeBCJySLqenk+ISUkdTXsvhbLXj74kIA==}
-    engines: {node: ^18.20.0 || ^20.17.0 || >=22.8.0}
-
   '@clack/core@0.3.4':
     resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
 
@@ -7630,8 +7618,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-metamorph@3.2.2:
-    resolution: {integrity: sha512-+sdjJ8dqcKghAgT88cH1Q93tE5t10k7F3vqdHU0V8iMTIkRcEdfIb1AZT7jeORV0TMldFxyexnrnPQThgfWDVg==}
+  vue-metamorph@3.2.0:
+    resolution: {integrity: sha512-dCWwwh7OngblFqUvD/pilS++TVnTHY1Nft2Tp02mHYv8ZrxFHN3NDMOKOoIg8lo7WR3TKxi3+bD/rmnN9tS2yw==}
     hasBin: true
 
   vue-router@4.4.5:
@@ -8111,12 +8099,8 @@ snapshots:
 
   '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-string-parser@8.0.0-alpha.13': {}
-
   '@babel/helper-validator-identifier@7.25.9': {}
 
-  '@babel/helper-validator-identifier@8.0.0-alpha.13': {}
-
   '@babel/helper-validator-option@7.25.9': {}
 
   '@babel/helpers@7.26.0':
@@ -8128,9 +8112,7 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.0
 
-  '@babel/parser@8.0.0-alpha.13':
-    dependencies:
-      '@babel/types': 8.0.0-alpha.13
+  '@babel/parser@8.0.0-alpha.12': {}
 
   '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.26.0)':
     dependencies:
@@ -8226,11 +8208,6 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@babel/types@8.0.0-alpha.13':
-    dependencies:
-      '@babel/helper-string-parser': 8.0.0-alpha.13
-      '@babel/helper-validator-identifier': 8.0.0-alpha.13
-
   '@clack/core@0.3.4':
     dependencies:
       picocolors: 1.1.1
@@ -16351,9 +16328,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-metamorph@3.2.2(eslint@9.15.0(jiti@2.4.0)):
+  vue-metamorph@3.2.0(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
-      '@babel/parser': 8.0.0-alpha.13
+      '@babel/parser': 8.0.0-alpha.12
       ast-types: 0.14.2
       chalk: 5.3.0
       cli-progress: 3.12.0

From 5c4b16c76ba6d58908a0ea546f6bf76e5796e5fc Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 19 Nov 2024 20:13:56 +0800
Subject: [PATCH 07/39] docs: update reference api link

---
 apps/www/package.json                                   | 2 +-
 apps/www/src/content/docs/components/accordion.md       | 2 +-
 apps/www/src/content/docs/components/alert-dialog.md    | 2 +-
 apps/www/src/content/docs/components/aspect-ratio.md    | 2 +-
 apps/www/src/content/docs/components/avatar.md          | 2 +-
 apps/www/src/content/docs/components/calendar.md        | 6 +++---
 apps/www/src/content/docs/components/checkbox.md        | 2 +-
 apps/www/src/content/docs/components/collapsible.md     | 2 +-
 apps/www/src/content/docs/components/command.md         | 2 +-
 apps/www/src/content/docs/components/context-menu.md    | 2 +-
 apps/www/src/content/docs/components/date-picker.md     | 2 +-
 apps/www/src/content/docs/components/dialog.md          | 2 +-
 apps/www/src/content/docs/components/dropdown-menu.md   | 2 +-
 apps/www/src/content/docs/components/hover-card.md      | 2 +-
 apps/www/src/content/docs/components/label.md           | 2 +-
 apps/www/src/content/docs/components/menubar.md         | 2 +-
 apps/www/src/content/docs/components/navigation-menu.md | 2 +-
 apps/www/src/content/docs/components/number-field.md    | 2 +-
 apps/www/src/content/docs/components/pagination.md      | 2 +-
 apps/www/src/content/docs/components/pin-input.md       | 2 +-
 apps/www/src/content/docs/components/popover.md         | 2 +-
 apps/www/src/content/docs/components/progress.md        | 2 +-
 apps/www/src/content/docs/components/radio-group.md     | 2 +-
 apps/www/src/content/docs/components/range-calendar.md  | 4 ++--
 apps/www/src/content/docs/components/resizable.md       | 2 +-
 apps/www/src/content/docs/components/scroll-area.md     | 2 +-
 apps/www/src/content/docs/components/select.md          | 2 +-
 apps/www/src/content/docs/components/separator.md       | 2 +-
 apps/www/src/content/docs/components/sheet.md           | 2 +-
 apps/www/src/content/docs/components/slider.md          | 2 +-
 apps/www/src/content/docs/components/stepper.md         | 2 +-
 apps/www/src/content/docs/components/switch.md          | 2 +-
 apps/www/src/content/docs/components/tabs.md            | 2 +-
 apps/www/src/content/docs/components/tags-input.md      | 2 +-
 apps/www/src/content/docs/components/toast.md           | 2 +-
 apps/www/src/content/docs/components/toggle-group.md    | 2 +-
 apps/www/src/content/docs/components/toggle.md          | 2 +-
 apps/www/src/content/docs/components/tooltip.md         | 2 +-
 apps/www/src/content/docs/contribution.md               | 8 ++++----
 pnpm-lock.yaml                                          | 2 +-
 40 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 2a945a8ac..9640037f8 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -23,7 +23,7 @@
     "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.14.7",
+    "@vee-validate/zod": "^4.13.2",
     "@vueuse/core": "^11.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index da3888f6c..6638ec031 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -2,7 +2,7 @@
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
 source: apps/www/src/lib/registry/default/ui/accordion
-primitive: https://www.reka-ui.com/components/accordion.html
+primitive: https://www.reka-ui.com/docs/components/accordion.html
 ---
 
 <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index bce118169..5a15b7362 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -2,7 +2,7 @@
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
 source: apps/www/src/lib/registry/default/ui/alert-dialog
-primitive: https://www.reka-ui.com/components/alert-dialog.html
+primitive: https://www.reka-ui.com/docs/components/alert-dialog.html
 ---
 
 <ComponentPreview name="AlertDialogDemo" />
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 4f9252d8b..77d14fbf9 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -2,7 +2,7 @@
 title: Aspect Ratio
 description: Displays content within a desired ratio.
 source: apps/www/src/lib/registry/default/ui/aspect-ratio
-primitive: https://www.reka-ui.com/components/aspect-ratio.html
+primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html
 ---
 
 <ComponentPreview name="AspectRatioDemo" />
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index 615a99cdd..2794e877b 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -2,7 +2,7 @@
 title: Avatar
 description: An image element with a fallback for representing the user.
 source: apps/www/src/lib/registry/default/ui/avatar
-primitive: https://www.reka-ui.com/components/avatar.html
+primitive: https://www.reka-ui.com/docs/components/avatar.html
 ---
 
 <ComponentPreview name="AvatarDemo" />
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index a7760de21..36df7161e 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -2,7 +2,7 @@
 title: Calendar
 description: A date field component that allows users to enter and edit date.
 source: apps/www/src/lib/registry/default/ui/calendar
-primitive: https://www.reka-ui.com/components/calendar.html
+primitive: https://www.reka-ui.com/docs/components/calendar.html
 ---
 
 <ComponentPreview name="CalendarDemo" />
@@ -15,7 +15,7 @@ If you're looking for **previous** Calendar implementation, checkout to <span cl
 
 ## About
 
-The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/docs/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
 
@@ -26,7 +26,7 @@ npx shadcn-vue@latest add calendar
 ```
 ::: tip
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
-Check [Dates & Times in Radix Vue](https://www.reka-ui.com/guides/dates.html) for more information and installation instructions.
+Check [Dates & Times in Radix Vue](https://www.reka-ui.com/docs/guides/dates.html) for more information and installation instructions.
 :::
 
 ## Datepicker
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 3b56791cd..1a398ec4f 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -2,7 +2,7 @@
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
 source: apps/www/src/lib/registry/default/ui/checkbox
-primitive: https://www.reka-ui.com/components/checkbox.html
+primitive: https://www.reka-ui.com/docs/components/checkbox.html
 ---
 
 <ComponentPreview name="CheckboxDemo"  />
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 12308bfea..dfb275674 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -2,7 +2,7 @@
 title: Collapsible
 description: An interactive component which expands/collapses a panel.
 source: apps/www/src/lib/registry/default/ui/collapsible
-primitive: https://www.reka-ui.com/components/collapsible.html
+primitive: https://www.reka-ui.com/docs/components/collapsible.html
 ---
 
 <ComponentPreview name="CollapsibleDemo" />
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 5b4f0ed2d..646c03142 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -2,7 +2,7 @@
 title: Command
 description: Fast, composable, unstyled command menu.
 source: apps/www/src/lib/registry/default/ui/command
-primitive: https://www.reka-ui.com/components/combobox.html
+primitive: https://www.reka-ui.com/docs/components/combobox.html
 ---
 
 <ComponentPreview name="CommandDemo" />
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 8009b70b1..8c9b0e5c9 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -2,7 +2,7 @@
 title: Context Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
 source: apps/www/src/lib/registry/default/ui/context-menu
-primitive: https://www.reka-ui.com/components/context-menu.html
+primitive: https://www.reka-ui.com/docs/components/context-menu.html
 ---
 
 <ComponentPreview name="ContextMenuDemo"  />
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index ff79f8fd8..2bed2ea9b 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -2,7 +2,7 @@
 title: Date Picker
 description: A date picker component with range and presets.
 source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
-primitive: https://www.reka-ui.com/components/calendar.html
+primitive: https://www.reka-ui.com/docs/components/calendar.html
 ---
 
 <ComponentPreview name="DatePickerDemo" />
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index 5cf2c43af..4f5548231 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -2,7 +2,7 @@
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 source: apps/www/src/lib/registry/default/ui/dialog
-primitive: https://www.reka-ui.com/components/dialog.html
+primitive: https://www.reka-ui.com/docs/components/dialog.html
 ---
 
 <ComponentPreview name="DialogDemo" />
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 2f04df619..b4aebf23a 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -2,7 +2,7 @@
 title: Dropdown Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
 source: apps/www/src/lib/registry/default/ui/dropdown-menu
-primitive: https://www.reka-ui.com/components/dropdown-menu.html
+primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html
 ---
 
 <ComponentPreview name="DropdownMenuDemo" />
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 8ebf754e0..4ec4c310d 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -2,7 +2,7 @@
 title: Hover Card
 description: For sighted users to preview content available behind a link.
 source: apps/www/src/lib/registry/default/ui/hover-card
-primitive: https://www.reka-ui.com/components/hover-card.html
+primitive: https://www.reka-ui.com/docs/components/hover-card.html
 ---
 
 <ComponentPreview name="HoverCardDemo" />
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index a2ed09458..18fe0ef7f 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -2,7 +2,7 @@
 title: Label
 description: Renders an accessible label associated with controls.
 source: apps/www/src/lib/registry/default/ui/label
-primitive: https://www.reka-ui.com/components/label.html
+primitive: https://www.reka-ui.com/docs/components/label.html
 ---
 
 <ComponentPreview name="LabelDemo" />
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index f9216c875..bcc933837 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -2,7 +2,7 @@
 title: Menubar
 description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
 source: apps/www/src/lib/registry/default/ui/menubar
-primitive: https://www.reka-ui.com/components/menubar.html
+primitive: https://www.reka-ui.com/docs/components/menubar.html
 ---
 
 <ComponentPreview name="MenubarDemo" />
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 64cbcaf46..d7eb6de14 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -2,7 +2,7 @@
 title: Navigation Menu
 description: A collection of links for navigating websites.
 source: apps/www/src/lib/registry/default/ui/navigation-menu
-primitive: https://www.reka-ui.com/components/navigation-menu.html
+primitive: https://www.reka-ui.com/docs/components/navigation-menu.html
 ---
 
 <ComponentPreview name="NavigationMenuDemo" />
diff --git a/apps/www/src/content/docs/components/number-field.md b/apps/www/src/content/docs/components/number-field.md
index 8e371dec4..474de6323 100644
--- a/apps/www/src/content/docs/components/number-field.md
+++ b/apps/www/src/content/docs/components/number-field.md
@@ -2,7 +2,7 @@
 title: Number Field
 description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
 source: apps/www/src/lib/registry/default/ui/number-field
-primitive: https://www.reka-ui.com/components/number-field.html
+primitive: https://www.reka-ui.com/docs/components/number-field.html
 ---
 
 <ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index 888b0ae36..a820363c2 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -2,7 +2,7 @@
 title: Pagination
 description: Displays data in paged format and provides navigation between pages.
 source: apps/www/src/lib/registry/default/ui/pagination
-primitive: https://www.reka-ui.com/components/pagination.html
+primitive: https://www.reka-ui.com/docs/components/pagination.html
 ---
 
 <ComponentPreview name="PaginationDemo" />
diff --git a/apps/www/src/content/docs/components/pin-input.md b/apps/www/src/content/docs/components/pin-input.md
index bea99c2c6..eb4099007 100644
--- a/apps/www/src/content/docs/components/pin-input.md
+++ b/apps/www/src/content/docs/components/pin-input.md
@@ -2,7 +2,7 @@
 title: PIN Input
 description: Allows users to input a sequence of one-character alphanumeric inputs.
 source: apps/www/src/lib/registry/default/ui/pin-input
-primitive: https://www.reka-ui.com/components/pin-input.html
+primitive: https://www.reka-ui.com/docs/components/pin-input.html
 ---
 
 <ComponentPreview name="PinInputDemo" />
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index ef4e8cdbc..06db37d9c 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -2,7 +2,7 @@
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
 source: apps/www/src/lib/registry/default/ui/popover
-primitive: https://www.reka-ui.com/components/popover.html
+primitive: https://www.reka-ui.com/docs/components/popover.html
 ---
 
 <ComponentPreview name="PopoverDemo" />
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index fafc98dfa..62f9f24a5 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -2,7 +2,7 @@
 title: Progress
 description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 source: apps/www/src/lib/registry/default/ui/progress
-primitive: https://www.reka-ui.com/components/progress.html
+primitive: https://www.reka-ui.com/docs/components/progress.html
 ---
 
 <ComponentPreview name="ProgressDemo" />
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index b8b1e87f3..0576414c9 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -2,7 +2,7 @@
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
 source: apps/www/src/lib/registry/default/ui/radio-group
-primitive: https://www.reka-ui.com/components/radio-group.html
+primitive: https://www.reka-ui.com/docs/components/radio-group.html
 ---
 
 <ComponentPreview name="RadioGroupDemo" />
diff --git a/apps/www/src/content/docs/components/range-calendar.md b/apps/www/src/content/docs/components/range-calendar.md
index a883872ee..2d0959475 100644
--- a/apps/www/src/content/docs/components/range-calendar.md
+++ b/apps/www/src/content/docs/components/range-calendar.md
@@ -2,14 +2,14 @@
 title: Range Calendar
 description: A calendar component that allows users to select a range of dates.
 source: apps/www/src/lib/registry/default/ui/range-calendar
-primitive: https://www.reka-ui.com/components/range-calendar.html
+primitive: https://www.reka-ui.com/docs/components/range-calendar.html
 ---
 
 <ComponentPreview name="RangeCalendarDemo" />
 
 ## About
 
-The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+The `<RangeCalendar />` component is built on top of the [RadixVue Range Calendar](https://www.reka-ui.com/docs/components/date-range-picker.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/resizable.md b/apps/www/src/content/docs/components/resizable.md
index ae9c60712..3c51b2b61 100644
--- a/apps/www/src/content/docs/components/resizable.md
+++ b/apps/www/src/content/docs/components/resizable.md
@@ -2,7 +2,7 @@
 title: Resizable
 description: Accessible resizable panel groups and layouts with keyboard support.
 source: apps/www/src/lib/registry/default/ui/resizable
-primitive: https://www.reka-ui.com/components/splitter.html
+primitive: https://www.reka-ui.com/docs/components/splitter.html
 ---
 
 <ComponentPreview name="ResizableDemo" />
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index 53aee0df2..b8bacd557 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -2,7 +2,7 @@
 title: Scroll-area
 description: Augments native scroll functionality for custom, cross-browser styling.
 source: apps/www/src/lib/registry/default/ui/scroll-area
-primitive: https://www.reka-ui.com/components/scroll-area.html
+primitive: https://www.reka-ui.com/docs/components/scroll-area.html
 ---
 
 <ComponentPreview name="ScrollAreaDemo" />
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index 7a2ef593c..ad69d5ee3 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -2,7 +2,7 @@
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
 source: apps/www/src/lib/registry/default/ui/select
-primitive: https://www.reka-ui.com/components/select.html
+primitive: https://www.reka-ui.com/docs/components/select.html
 ---
 
 <ComponentPreview name="SelectDemo" />
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index 39a0e1710..c3cdc6481 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -2,7 +2,7 @@
 title: Separator
 description: Visually or semantically separates content.
 source: apps/www/src/lib/registry/default/ui/separator
-primitive: https://www.reka-ui.com/components/separator.html
+primitive: https://www.reka-ui.com/docs/components/separator.html
 ---
 
 <ComponentPreview name="SeparatorDemo" />
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 40f005e28..568288e74 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -2,7 +2,7 @@
 title: Sheet
 description: Extends the Dialog component to display content that complements the main content of the screen.
 source: apps/www/src/lib/registry/default/ui/sheet
-primitive: https://www.reka-ui.com/components/dialog.html
+primitive: https://www.reka-ui.com/docs/components/dialog.html
 ---
 
 <ComponentPreview name="SheetDemo" />
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index f3b48b2c1..3ef17bb2c 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -2,7 +2,7 @@
 title: Slider
 description: An input where the user selects a value from within a given range.
 source: apps/www/src/lib/registry/default/ui/slider
-primitive: https://www.reka-ui.com/components/slider.html
+primitive: https://www.reka-ui.com/docs/components/slider.html
 ---
 
 <ComponentPreview name="SliderDemo" />
diff --git a/apps/www/src/content/docs/components/stepper.md b/apps/www/src/content/docs/components/stepper.md
index 0be967ea3..2c75017d1 100644
--- a/apps/www/src/content/docs/components/stepper.md
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -2,7 +2,7 @@
 title: Stepper
 description: A set of steps that are used to indicate progress through a multi-step process.
 source: apps/www/src/lib/registry/default/ui/stepper
-primitive: https://www.reka-ui.com/components/stepper.html
+primitive: https://www.reka-ui.com/docs/components/stepper.html
 ---
 
 <ComponentPreview name="StepperDemo" />
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 5fa4a7e28..aecce7648 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -2,7 +2,7 @@
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
 source: apps/www/src/lib/registry/default/ui/switch
-primitive: https://www.reka-ui.com/components/switch.html
+primitive: https://www.reka-ui.com/docs/components/switch.html
 ---
 
 <ComponentPreview name="SwitchDemo" />
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 00e3e6ebf..32a28e9fb 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -2,7 +2,7 @@
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
 source: apps/www/src/lib/registry/default/ui/tabs
-primitive: https://www.reka-ui.com/components/tabs.html
+primitive: https://www.reka-ui.com/docs/components/tabs.html
 ---
 
 <ComponentPreview name="TabsDemo" />
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
index 736bf9054..6f691e5b9 100644
--- a/apps/www/src/content/docs/components/tags-input.md
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -2,7 +2,7 @@
 title: Tags Input
 description: Tag inputs render tags inside an input, followed by an actual text input.
 source: apps/www/src/lib/registry/default/ui/tags-input
-primitive: https://www.reka-ui.com/components/tags-input.html
+primitive: https://www.reka-ui.com/docs/components/tags-input.html
 ---
 
 <ComponentPreview name="TagsInputDemo" />
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index 2e3b6cebb..568adb3be 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -2,7 +2,7 @@
 title: Toast
 description: A succinct message that is displayed temporarily.
 source: apps/www/src/lib/registry/default/ui/toast
-primitive: https://www.reka-ui.com/components/toast.html
+primitive: https://www.reka-ui.com/docs/components/toast.html
 ---
 
 <ComponentPreview name="ToastDemo" />
diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md
index d004f9e72..60523148f 100644
--- a/apps/www/src/content/docs/components/toggle-group.md
+++ b/apps/www/src/content/docs/components/toggle-group.md
@@ -2,7 +2,7 @@
 title: Toggle Group
 description: A set of two-state buttons that can be toggled on or off.
 source: apps/www/src/lib/registry/default/ui/toggle-group
-primitive: https://www.reka-ui.com/components/toggle-group.html
+primitive: https://www.reka-ui.com/docs/components/toggle-group.html
 ---
 
 <ComponentPreview name="ToggleGroupDemo" />
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 02b2a1bd3..6a9115077 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -2,7 +2,7 @@
 title: Toggle
 description: A two-state button that can be either on or off.
 source: apps/www/src/lib/registry/default/ui/toggle
-primitive: https://www.reka-ui.com/components/toggle.html
+primitive: https://www.reka-ui.com/docs/components/toggle.html
 ---
 
 <ComponentPreview name="ToggleDemo" />
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index d482f68a4..bc33c9aa0 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -2,7 +2,7 @@
 title: Tooltip
 description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 source: apps/www/src/lib/registry/default/ui/tooltip
-primitive: https://www.reka-ui.com/components/tooltip.html
+primitive: https://www.reka-ui.com/docs/components/tooltip.html
 ---
 
 <ComponentPreview name="TooltipDemo" />
diff --git a/apps/www/src/content/docs/contribution.md b/apps/www/src/content/docs/contribution.md
index a8e4917b5..ee54db1fc 100644
--- a/apps/www/src/content/docs/contribution.md
+++ b/apps/www/src/content/docs/contribution.md
@@ -180,7 +180,7 @@ There are many cases that you need to wrap `Reka UI` components.
 ### Props & Events
 All of the `Reka UI` compoennts expose their prop and emit types. We need to forward any props/events that are coming from outside to the `Reka UI` component.
 
-To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
+To do so, we have a helper function named [`useForwardPropsEmits`](https://www.reka-ui.com/docs/utilities/use-forward-props-emits.html) that combines props and events that must be binded to the child radix component.
 
 To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
 computed object that combines the parsed props and emits as props.
@@ -264,7 +264,7 @@ const props = defineProps<SelectValueProps>()
 
 ### Boolean Props
 When you are building a wrapper for a component, in some cases you want to ignore Vue [Props Boolean Casting](https://vuejs.org/guide/components/props.html#boolean-casting).
-You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/utilities/use-forward-props.html) composable.
+You can either set default value as undefined for all the boolean field, or you can use [`useForwardProps`](https://www.reka-ui.com/docs/utilities/use-forward-props.html) composable.
 
 Take a look at `AccordionItem.vue`
 
@@ -300,7 +300,7 @@ Since `AccordionItemProps` type has atleast one boolean property, we need to use
 Note that `useForwardPropsEmits` use `useForwardProps` under the hood.
 
 ### Component as Root
-Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/utilities/primitive.html) instead.
+Whenever your root component is a `Component` Primitive from vue, it's easier to use [`Primitive`](https://www.reka-ui.com/docs/utilities/primitive.html) instead.
 
 Let's take a look at `Button.vue`
 
@@ -333,7 +333,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/utilities/primitive.html#changing-as-value) property.
+You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.reka-ui.com/docs/utilities/primitive.html#changing-as-value) property.
 
 ## Updating with `shadcn/ui`
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8085d31f..3121ff529 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,7 +87,7 @@ importers:
         specifier: ^1.4.4
         version: 1.4.4(@unovis/ts@1.4.4)(vue@3.5.13(typescript@5.6.3))
       '@vee-validate/zod':
-        specifier: ^4.14.7
+        specifier: ^4.13.2
         version: 4.14.7(vue@3.5.13(typescript@5.6.3))
       '@vueuse/core':
         specifier: ^11.2.0

From f3f84b8e4efea68fa7bc6c2441002a9802217cf3 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 20 Nov 2024 00:15:52 +0800
Subject: [PATCH 08/39] chore: revamp sitte

---
 .../theme/components/Announcement.vue         |   8 +-
 .../theme/components/CodeConfigCustomizer.vue |   4 +-
 .../theme/components/ExamplesNav.vue          |  18 +--
 apps/www/.vitepress/theme/components/Kbd.vue  |   2 +-
 .../theme/components/LandingExample.vue       |  74 +++++++++
 .../theme/components/LandingPage.vue          |  90 +++++------
 apps/www/.vitepress/theme/components/Logo.vue |   2 +-
 .../theme/components/PageAction.vue           |   2 +-
 .../theme/components/PageHeader.vue           |   6 +-
 .../components/PageHeaderDescription.vue      |   5 +-
 .../theme/components/PageHeaderHeading.vue    |   2 +-
 .../theme/components/TableOfContent.vue       |   9 +-
 .../theme/components/ThemePopover.vue         |   2 +-
 apps/www/.vitepress/theme/config/docs.ts      |  13 +-
 .../.vitepress/theme/layout/DocsLayout.vue    | 150 ++++++++----------
 .../theme/layout/ExamplesLayout.vue           |  61 ++++---
 .../.vitepress/theme/layout/MainLayout.vue    | 116 ++++++--------
 apps/www/.vitepress/theme/style.css           | 105 ++++++++----
 apps/www/.vitepress/theme/styles/vp-doc.css   |  35 ++--
 .../examples/cards/components/TeamMembers.vue |  59 +++++++
 .../dashboard/components/TeamSwitcher.vue     |   2 +-
 .../components/DataTableFacetedFilter.vue     |   4 +-
 .../lib/registry/default/example/CardChat.vue |   5 +-
 .../registry/new-york/example/CardChat.vue    |   5 +-
 .../registry/new-york/example/CardStats.vue   |   6 +-
 .../public/fonts/Geist/GeistVariableVF.woff2  | Bin 53444 -> 0 bytes
 apps/www/src/public/fonts/Geist/LICENSE.TXT   |  92 -----------
 apps/www/src/public/fonts/GeistMono[wght].ttf | Bin 0 -> 138896 bytes
 apps/www/src/public/fonts/Geist[wght].ttf     | Bin 0 -> 149972 bytes
 apps/www/tailwind.config.js                   |  40 ++---
 30 files changed, 460 insertions(+), 457 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/LandingExample.vue
 delete mode 100644 apps/www/src/public/fonts/Geist/GeistVariableVF.woff2
 delete mode 100644 apps/www/src/public/fonts/Geist/LICENSE.TXT
 create mode 100644 apps/www/src/public/fonts/GeistMono[wght].ttf
 create mode 100644 apps/www/src/public/fonts/Geist[wght].ttf

diff --git a/apps/www/.vitepress/theme/components/Announcement.vue b/apps/www/.vitepress/theme/components/Announcement.vue
index f407ebf5b..7d998ff1c 100644
--- a/apps/www/.vitepress/theme/components/Announcement.vue
+++ b/apps/www/.vitepress/theme/components/Announcement.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { announcementConfig } from '../config/site'
 </script>
@@ -7,11 +6,10 @@ import { announcementConfig } from '../config/site'
 <template>
   <a
     :href="announcementConfig.link"
-    class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+    class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
   >
-    {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
-    <span class="sm:hidden">{{ announcementConfig.title }}</span>
-    <span class="hidden sm:inline">
+    <span class="sm:hidden underline-offset-4 group-hover:underline">{{ announcementConfig.title }}</span>
+    <span class="hidden sm:inline underline-offset-4 group-hover:underline">
       {{ announcementConfig.title }}
     </span>
     <ArrowRightIcon class="ml-1 h-4 w-4" />
diff --git a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
index f848f8ce9..f00ff6bc9 100644
--- a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
@@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
   >
     <SheetTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >
-        <RadixIconsGear class="w-5 h-5" />
+        <RadixIconsGear class="w-4 h-4" />
       </Button>
     </SheetTrigger>
     <SheetContent>
diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue
index ca4c517ba..3554f29a0 100644
--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 import { cn } from '@/lib/utils'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
 
@@ -62,10 +61,10 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
           :key="example.href"
           :href="example.href"
           :class="cn(
-            'flex items-center px-4',
-            path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
-              ? 'font-bold text-primary'
-              : 'font-medium text-muted-foreground',
+            'flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary',
+            path?.startsWith(example.href)
+              ? 'bg-muted font-medium text-primary'
+              : 'text-muted-foreground',
           )"
         >
           {{ example.name }}
@@ -73,14 +72,5 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
       </div>
       <ScrollBar orientation="horizontal" class="invisible" />
     </ScrollArea>
-
-    <a
-      v-if="currentExample"
-      :href="currentExample?.code" target="_blank" rel="nofollow"
-      class="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
-    >
-      View code
-      <ArrowRightIcon class="ml-1 h-4 w-4" />
-    </a>
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/Kbd.vue b/apps/www/.vitepress/theme/components/Kbd.vue
index 554281072..4a27454bb 100644
--- a/apps/www/.vitepress/theme/components/Kbd.vue
+++ b/apps/www/.vitepress/theme/components/Kbd.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<KbdProps>(), {
 
 const kbdClass = computed(() => {
   return cva(
-    'inline-flex items-center pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium',
+    'inline-flex items-center pointer-events-none h-5 select-none gap-1 rounded border border-border bg-muted font-sans font-medium',
     {
       variants: {
         size: {
diff --git a/apps/www/.vitepress/theme/components/LandingExample.vue b/apps/www/.vitepress/theme/components/LandingExample.vue
new file mode 100644
index 000000000..f573e3795
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/LandingExample.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { DateRange } from 'reka-ui'
+import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
+import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
+
+import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
+
+import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
+import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
+import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
+import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
+import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
+import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
+
+import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
+import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
+import { Card } from '@/lib/registry/new-york/ui/card'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import { getLocalTimeZone, today } from '@internationalized/date'
+
+import { type Ref, ref } from 'vue'
+
+const now = today(getLocalTimeZone())
+
+const range = ref({
+  start: now,
+  end: now.add({ days: 8 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <div
+    class="items-start justify-center gap-6 rounded-lg md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"
+  >
+    <div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+      <CardStats />
+
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+        <div class="space-y-4">
+          <TeamMembers />
+          <CookieSettings />
+          <PaymentMethod />
+        </div>
+
+        <div class="space-y-4">
+          <CardChat />
+          <CreateAccount />
+          <ReportAnIssue />
+        </div>
+      </div>
+    </div>
+    <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+      <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+        <Card class="max-w-[280px]">
+          <RangeCalendar v-model="range" />
+        </Card>
+
+        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+          <ActivityGoal />
+        </div>
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <Metric />
+        </div>
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <DataTable />
+        </div>
+
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <ShareDocument />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index 85c2d367c..aca01e170 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import MailExample from '@/examples/mail/Example.vue'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
+import Button from '@/lib/registry/new-york/ui/button/Button.vue'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
@@ -11,51 +8,52 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import LandingExample from './LandingExample.vue'
 </script>
 
 <template>
-  <PageHeader class="page-header pb-8">
-    <Announcement />
-    <PageHeaderHeading>Build your component library.</PageHeaderHeading>
-    <PageHeaderDescription>
-      Beautifully designed components that you can copy and paste into your
-      apps. Accessible. Customizable. Open Source.
-    </PageHeaderDescription>
+  <div class="relative">
+    <PageHeader>
+      <Announcement />
+      <PageHeaderHeading>Build your component library</PageHeaderHeading>
+      <PageHeaderDescription>
+        Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
+      </PageHeaderDescription>
 
-    <PageAction>
-      <a
-        href="/docs/introduction"
-        :class="cn(buttonVariants(), 'rounded-[6px]')"
-      >
-        Get Started
-      </a>
-      <a
-        href="https://github.com/unovue/shadcn-vue"
-        target="_blank"
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'rounded-[6px]',
-        )"
-      >
-        <GitHubIcon class="mr-2 h-4 w-4" />
-        GitHub
-      </a>
-    </PageAction>
-  </PageHeader>
-  <ExamplesNav />
-  <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
-    <VPImage
-      alt="Mail"
-      width="1280"
-      height="866" class="block" :image="{
-        dark: '/examples/mail-dark.png',
-        light: '/examples/mail-light.png',
-      }"
-    />
-  </section>
-  <section class="hidden md:block">
-    <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-      <MailExample />
+      <PageAction>
+        <Button as-child size="sm">
+          <a href="/docs/introduction">
+            Get Started
+          </a>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
+          <a
+            href="https://github.com/unovue/shadcn-vue"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </Button>
+      </PageAction>
+    </PageHeader>
+
+    <div class="container py-6">
+      <ExamplesNav class="[&>a:first-child]:text-primary" />
+
+      <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
+        <VPImage
+          alt="Mail"
+          width="1280"
+          height="866" class="block" :image="{
+            dark: '/examples/mail-dark.png',
+            light: '/examples/mail-light.png',
+          }"
+        />
+      </section>
+      <section class="hidden md:block">
+        <LandingExample />
+      </section>
     </div>
-  </section>
+  </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/Logo.vue b/apps/www/.vitepress/theme/components/Logo.vue
index 3acb528c6..9e6683929 100644
--- a/apps/www/.vitepress/theme/components/Logo.vue
+++ b/apps/www/.vitepress/theme/components/Logo.vue
@@ -16,7 +16,7 @@
     </svg>
 
     <span class="font-bold">
-      shadcn-vue
+      shadcn/vue
     </span>
   </a>
 </template>
diff --git a/apps/www/.vitepress/theme/components/PageAction.vue b/apps/www/.vitepress/theme/components/PageAction.vue
index 4564c9594..b733281a5 100644
--- a/apps/www/.vitepress/theme/components/PageAction.vue
+++ b/apps/www/.vitepress/theme/components/PageAction.vue
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
+      'flex w-full items-center justify-start gap-2 py-2',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/components/PageHeader.vue b/apps/www/.vitepress/theme/components/PageHeader.vue
index 72fc028cd..b9cee3b6c 100644
--- a/apps/www/.vitepress/theme/components/PageHeader.vue
+++ b/apps/www/.vitepress/theme/components/PageHeader.vue
@@ -7,10 +7,12 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
+      'flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12',
       $attrs.class ?? '',
     )"
   >
-    <slot />
+    <div class="container">
+      <slot />
+    </div>
   </section>
 </template>
diff --git a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
index e9794db8b..075d52553 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import WrapBalancer from 'vue-wrap-balancer'
 </script>
 
 <template>
-  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg font-light text-foreground', $attrs.class ?? '')" :prefer-native="false">
+  <p :class="cn('max-w-2xl text-lg font-light text-foreground', $attrs.class ?? '')">
     <slot />
-  </WrapBalancer>
+  </p>
 </template>
diff --git a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
index 917bc8980..da7d515d2 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :class="cn(
-      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
+      'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
       $attrs.class ?? '',
     )"
   >
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index 39a60b197..9a795caa2 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -2,7 +2,6 @@
 import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
 import CarbonAds from '../components/CarbonAds.vue'
@@ -61,16 +60,16 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="hidden xl:block">
-    <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
-      <div class="space-y-2">
+  <div class="hidden text-sm xl:block">
+    <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
+      <div class="no-scrollbar h-full overflow-auto pb-10">
         <p class="font-medium">
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
         <CarbonAds v-if="showCarbonAds" />
       </div>
-    </ScrollArea>
+    </div>
   </div>
 
   <div class="block xl:hidden mb-6">
diff --git a/apps/www/.vitepress/theme/components/ThemePopover.vue b/apps/www/.vitepress/theme/components/ThemePopover.vue
index 804afc1a9..d98d199d0 100644
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@@ -33,7 +33,7 @@ watch(radius, (radius) => {
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 96e2c6b6b..71b0a68f0 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -30,22 +30,13 @@ export const docsConfig: DocsConfig = {
       title: 'Components',
       href: '/docs/components/accordion',
     },
-    {
-      title: 'Themes',
-      href: '/themes',
-    },
-    {
-      title: 'Examples',
-      href: '/examples/mail',
-    },
     {
       title: 'Blocks',
       href: '/blocks',
     },
     {
-      title: 'GitHub',
-      href: 'https://github.com/unovue/shadcn-vue',
-      external: true,
+      title: 'Themes',
+      href: '/themes',
     },
   ],
   sidebarNav: [
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 451b39add..b2b6f7b56 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { cn } from '@/lib/utils'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
 import { useData, useRoute } from 'vitepress'
@@ -15,99 +15,89 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
 </script>
 
 <template>
-  <div class="border-b">
-    <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside
-        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
-      >
-        <ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
-          <div class="w-full">
-            <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
-              <h4
-                class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
-              >
-                {{ docsGroup.title }}
+  <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+    <aside class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
+      <div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
+        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+          <div class="pb-4">
+            <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
+              {{ docsGroup.title }}
 
-                <span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                  {{ docsGroup.label }}
-                </span>
-              </h4>
+              <span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                {{ docsGroup.label }}
+              </span>
+            </h4>
 
-              <div
-                v-for="doc in docsGroup.items "
-                :key="doc.title"
-                class="grid grid-flow-row auto-rows-max text-sm"
+            <div
+              v-for="doc in docsGroup.items "
+              :key="doc.title"
+            >
+              <a
+                v-if="doc.href"
+                :disabled="doc.disabled"
+                :href="doc.href"
+                :class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
               >
-                <a
-                  v-if="doc.href"
-                  :disabled="doc.disabled"
-                  :href="doc.href"
-                  class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
-                  :class="{
-                    '!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
-                  }"
-                >
-                  {{ doc.title }}
+                {{ doc.title }}
 
-                  <span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                    {{ doc.label }}
-                  </span>
-                </a>
-              </div>
+                <span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                  {{ doc.label }}
+                </span>
+              </a>
             </div>
           </div>
-        </ScrollArea>
-      </aside>
-
-      <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-        <div class="mx-auto w-full min-w-0">
-          <div class="block xl:hidden">
-            <TableOfContent />
-          </div>
+        </div>
+      </div>
+    </aside>
 
-          <DocsBreadcrumb class="mb-4" />
+    <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+      <div class="mx-auto w-full min-w-0 max-w-3xl">
+        <div class="block xl:hidden">
+          <TableOfContent />
+        </div>
 
-          <div class="space-y-2">
-            <div class="flex items-center space-x-4">
-              <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
-                {{ frontmatter.title }}
-              </h1>
-              <span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                {{ frontmatter.label }}
-              </span>
-            </div>
-            <p class="text-lg text-muted-foreground">
-              {{ frontmatter.description }}
-            </p>
-          </div>
+        <DocsBreadcrumb class="mb-4" />
 
-          <div class="flex items-center space-x-2 pt-4">
-            <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
-              <RadixIconsExternalLink class="mr-1" />
-              Docs
-            </a>
-            <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
-              <RadixIconsCode class="mr-1" />
-              Component Source
-            </a>
-            <a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
-              Primitive API Reference
-            </a>
+        <div class="space-y-2">
+          <div class="flex items-center space-x-4">
+            <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+              {{ frontmatter.title }}
+            </h1>
+            <span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+              {{ frontmatter.label }}
+            </span>
           </div>
+          <p class="text-lg text-muted-foreground">
+            {{ frontmatter.description }}
+          </p>
+        </div>
 
-          <div class="vp-doc">
-            <slot />
-          </div>
+        <div v-if="frontmatter.docs || frontmatter.source || frontmatter.primitive" class="flex items-center space-x-2 pt-4">
+          <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+            <RadixIconsExternalLink class="mr-1" />
+            Docs
+          </a>
+          <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+            <RadixIconsCode class="mr-1" />
+            Component Source
+          </a>
+          <a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+            Primitive API Reference
+          </a>
+        </div>
 
-          <EditLink />
+        <div class="vp-doc py-8">
+          <slot />
         </div>
 
-        <div class="hidden text-sm xl:block">
-          <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-            <TableOfContent show-carbon-ads />
-          </div>
+        <EditLink />
+      </div>
+
+      <div class="hidden text-sm xl:block">
+        <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+          <TableOfContent show-carbon-ads />
         </div>
-      </main>
-    </div>
+      </div>
+    </main>
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index 01ffbf524..4acbf9888 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
+import Button from '@/lib/registry/new-york/ui/button/Button.vue'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
@@ -11,43 +10,39 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 </script>
 
 <template>
-  <div class="container relative">
-    <PageHeader class="page-header pb-8">
+  <div class="relative">
+    <PageHeader>
       <Announcement />
-      <PageHeaderHeading class="hidden md:block">
-        Check out some examples.
-      </PageHeaderHeading>
-      <PageHeaderHeading class="md:hidden">
-        Examples
-      </PageHeaderHeading>
+      <PageHeaderHeading>Build your component library</PageHeaderHeading>
       <PageHeaderDescription>
-        Dashboard, cards, authentication. Some examples built using the
-        components. Use this as a guide to build your own.
+        Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
       </PageHeaderDescription>
 
       <PageAction>
-        <a
-          href="/docs/introduction"
-          :class="cn(buttonVariants(), 'rounded-[6px]')"
-        >
-          Get Started
-        </a>
-        <a
-          href="/docs/components/accordion"
-          :class="cn(
-            buttonVariants({ variant: 'outline' }),
-            'rounded-[6px]',
-          )"
-        >
-          Components
-        </a>
+        <Button as-child size="sm">
+          <a href="/docs/introduction">
+            Get Started
+          </a>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
+          <a
+            href="https://github.com/unovue/shadcn-vue"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </Button>
       </PageAction>
     </PageHeader>
-    <section>
-      <ExamplesNav />
-      <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-        <slot />
-      </div>
-    </section>
+
+    <div class="container py-6">
+      <section>
+        <ExamplesNav class="[&>a:first-child]:text-primary" />
+        <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+          <slot />
+        </div>
+      </section>
+    </div>
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index d25ba30ea..e0ba03f2d 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -7,21 +7,22 @@ import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
 
+import { cn } from '@/lib/utils'
 import { useConfigStore } from '@/stores/config'
 import { useMagicKeys, useToggle } from '@vueuse/core'
-import Circle from '~icons/radix-icons/circle'
 
+import MoonIcon from '~icons/lucide/moon'
+import SunIcon from '~icons/lucide/sun'
+import Circle from '~icons/radix-icons/circle'
 import File from '~icons/radix-icons/file'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
+import GithubLogoIcon from '~icons/radix-icons/github-logo'
 import { Content, useData, useRoute, useRouter } from 'vitepress'
 import { onMounted, ref, watch } from 'vue'
 import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
 import Kbd from '../components/Kbd.vue'
 import Logo from '../components/Logo.vue'
-import MobileNav from '../components/MobileNav.vue'
 
+import MobileNav from '../components/MobileNav.vue'
 import ThemePopover from '../components/ThemePopover.vue'
 import { docsConfig, type NavItem } from '../config/docs'
 
@@ -42,13 +43,8 @@ const links = [
   {
     name: 'GitHub',
     href: 'https://github.com/unovue/shadcn-vue',
-    icon: RadixIconsGithubLogo,
+    icon: GithubLogoIcon,
   },
-  // {
-  //   name: 'X',
-  //   href: 'https://x.com',
-  //   icon: TablerBrandX,
-  // },
 ]
 
 const isOpen = ref(false)
@@ -75,9 +71,7 @@ function handleSelectLink(item: NavItem) {
 }
 
 watch(() => $route.path, (n) => {
-  // @ts-expect-error View Transition API not supported by all the browser yet
   if (document.startViewTransition) {
-    // @ts-expect-error View Transition API not supported by all the browser yet
     document.startViewTransition(() => {
       console.log('soft navigating to: ', n)
     })
@@ -90,27 +84,19 @@ watch(() => $route.path, (n) => {
     <div v-if="$route.data.frontmatter.layout === false">
       <Content :key="$route.path" />
     </div>
-    <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
-      <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
-        <div
-          class="container flex h-14 max-w-screen-2xl items-center"
-        >
+    <div v-else vaul-drawer-wrapper class="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+      <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
+        <div class="flex h-14 items-center px-4">
           <div class="mr-4 md:mr-1 hidden md:flex">
             <Logo />
 
-            <nav
-              class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
-            >
+            <nav class="flex items-center gap-4 text-sm xl:gap-6">
               <a
                 v-for="route in docsConfig.mainNav"
                 :key="route.title"
                 :href="route.href"
                 :target="route.external ? '_target' : undefined"
-                class="transition-colors hover:text-foreground/80 text-foreground/60"
-                :class="{
-                  'font-semibold !text-foreground': $route.path === `${route.href}.html`,
-                  'hidden lg:block': route?.href?.includes('github'),
-                }"
+                :class="cn('transition-colors hover:text-foreground/80', $route.path === `${route.href}.html` ? 'text-foreground' : 'text-foreground/80')"
               >
                 {{ route.title }}
               </a>
@@ -122,18 +108,18 @@ watch(() => $route.path, (n) => {
             <div class="w-full flex-1 md:w-auto md:flex-none">
               <Button
                 variant="outline"
-                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
                 @click="isOpen = true"
               >
                 <span class="hidden lg:inline-flex">Search documentation...</span>
                 <span class="inline-flex lg:hidden">Search...</span>
-                <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                  <span class="text-xs">⌘</span>K
+                <Kbd :size="'xs'" class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                  ⌘ K
                 </Kbd>
               </Button>
             </div>
 
-            <nav class="flex items-center">
+            <nav class="flex items-center gap-0.5">
               <ThemePopover />
 
               <CodeConfigCustomizer />
@@ -142,28 +128,26 @@ watch(() => $route.path, (n) => {
                 v-for="link in links"
                 :key="link.name"
                 as="a"
-                class="w-9 h-9"
+                class="w-8 h-8"
                 :href="link.href" target="_blank"
                 :variant="'ghost'"
                 :size="'icon'"
               >
-                <component :is="link.icon" class="w-5 h-5" />
+                <component :is="link.icon" class="w-4 h-4" />
               </Button>
 
-              <ClientOnly>
-                <Button
-                  class="w-9 h-9"
-                  aria-label="Toggle dark mode"
-                  :variant="'ghost'"
-                  :size="'icon'"
-                  @click="toggleDark()"
-                >
-                  <component
-                    :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                    class="w-5 h-5 text-foreground"
-                  />
-                </Button>
-              </ClientOnly>
+              <Button
+                class="w-8 h-8"
+                aria-label="Toggle dark mode"
+                :variant="'ghost'"
+                :size="'icon'"
+                @click="toggleDark()"
+              >
+                <component
+                  :is="isDark ? SunIcon : MoonIcon"
+                  class="w-4 h-4 text-foreground"
+                />
+              </Button>
             </nav>
           </div>
         </div>
@@ -184,7 +168,7 @@ watch(() => $route.path, (n) => {
           <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
             <slot />
           </component>
-          <main v-else class="container">
+          <main v-else class="flex-1">
             <Transition name="fade" mode="out-in">
               <Content :key="$route.path" />
             </Transition>
@@ -192,42 +176,38 @@ watch(() => $route.path, (n) => {
         </Transition>
       </div>
 
-      <footer class="py-6 md:px-8 md:py-0">
+      <footer class="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
         <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-            <span class="inline-block">
-              Built and designed by
+          <p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
+            <span>
+              Built by
               <a
                 href="https://twitter.com/shadcn"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                shadcn
-              </a>
+                shadcn</a>.
             </span>
-            <span class="ml-0.5"> . </span>
-            <span class="inline-block ml-2">
+            <span class="inline-block ml-1">
               Ported to Vue by
               <a
-                href="https://github.com/unovue"
+                href="https://twitter.com/unovue"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                Radix Vue
+                unovue
               </a>
-            </span>
-            <span class="ml-0.5"> . </span>
-            <span class="inline-block ml-2">
+            </span>.
+            <span class="inline-block ml-1">
               The code source is available on
               <a
                 href="https://github.com/unovue/shadcn-vue"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                GitHub
-              </a>
+                GitHub</a>.
             </span>
-          </div>
+          </p>
         </div>
       </footer>
 
@@ -281,7 +261,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsSun class="mr-2 h-5 w-5" />
+                  <SunIcon class="mr-2 h-5 w-5" />
                   <span>Light Theme</span>
                 </CommandItem>
                 <CommandItem
@@ -294,7 +274,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsMoon class="mr-2 h-5 w-5" />
+                  <MoonIcon class="mr-2 h-5 w-5" />
                   <span>Dark Theme</span>
                 </CommandItem>
               </CommandGroup>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index a6b656fd3..e8da4d6cb 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -2,10 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Geist";
+  src: url("/fonts/Geist[wght].ttf");
+}
+@font-face {
+  font-family: "GeistMono";
+  src: url("/fonts/GeistMono[wght].ttf");
+}
+
 @layer base {
 	:root {
-		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+		--font-geist-sans: "Geist";
+		--font-geist-mono: "GeistMono";
 
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
@@ -86,15 +95,40 @@
   }
 
 
-	* {
-		@apply border-border;
+  * {
+    @apply border-border;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground overscroll-none;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 5px;
+  }
+  * {
     scrollbar-width: thin;
     scrollbar-color: hsl(var(--border)) transparent;
-	}
-	html {
-		-webkit-text-size-adjust: 100%;
-		font-variation-settings: normal;
-	}
+  }
 	body {
 		@apply bg-background text-foreground min-h-screen antialiased font-sans;
 		/* font-feature-settings: "rlig" 1, "calt" 1; */
@@ -119,16 +153,6 @@
 	}
 
 
-	/* Firefox */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-	html {
-		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
-	}
-
-	html.dark {
-		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
-	}
-
   html.dark .shiki,
   html.dark .shiki span {
     color: var(--shiki-dark);
@@ -147,21 +171,40 @@
 
 
 @layer utilities {
-	.step {
-		counter-increment: step;
-	}
+  .step {
+    counter-increment: step;
+  }
 
-	.step:before {
-		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-		@apply -ml-[50px] -mt-1;
-		content: counter(step);
-	}
+  .step:before {
+    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+    @apply ml-[-50px] mt-[-4px];
+    content: counter(step);
+  }
+
+  .chunk-container {
+    @apply shadow-none;
+  }
+
+  .chunk-container::after {
+    content: "";
+    @apply absolute -inset-4 shadow-xl rounded-xl border;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
 
 @media (max-width: 640px) {
-	.container {
-		@apply px-4;
-	}
+  .container {
+    @apply px-4;
+  }
 }
 
 div[class^="language-"] {
@@ -184,7 +227,7 @@ pre code {
 }
 
 pre code .line {
-	@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
+	@apply px-4 min-h-4 w-full inline-block leading-[--vp-code-line-height];
 }
 
 .line-number {
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 6e0d77c5a..08601861d 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -4,7 +4,7 @@
   --vp-code-bg: hsl(var(--muted));
   --vp-c-divider: hsl(var(--muted));
   --vp-code-block-color: #fff
-} 
+}
 
 
 /**
@@ -328,18 +328,15 @@
   position: relative;
   z-index: 1;
   margin: 0;
-  /* padding: 20px 0; */
-  background: transparent;
   overflow-x: auto;
+  @apply bg-zinc-950 dark:bg-zinc-900;
 }
 
 .vp-doc [class*='language-'] code {
   display: block;
-  /* padding: 0 24px; */
   width: fit-content;
   min-width: 100%;
   line-height: var(--vp-code-line-height);
-  /* font-size: var(--vp-code-font-size); */
   color: var(--vp-code-block-color);
   transition: color 0.5s;
 }
@@ -350,8 +347,8 @@
   padding: 0 24px; */
   width: calc(100% + 2 * 24px);
   display: inline-block;
-  @apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
-} 
+  @apply bg-zinc-700/50;
+}
 
 .vp-doc [class*='language-'] code .highlighted.error {
   background-color: var(--vp-code-line-error-color);
@@ -421,9 +418,9 @@
 .vp-doc .line-numbers-wrapper {
   position: absolute;
   top: 0;
-  bottom: 0; 
+  bottom: 0;
   left: 0;
-  z-index: 3; 
+  z-index: 3;
   border-right: 1px solid var(--vp-code-block-divider-color);
   padding-top: 16px;
   width: 32px;
@@ -441,20 +438,20 @@
   /*rtl:ignore*/
   direction: ltr;
   position: absolute;
-  top: 12px;
+  top: 16px;
   /*rtl:ignore*/
-  right: 12px;
+  right: 16px;
   z-index: 3;
   border: 1px solid var(--vp-code-copy-code-border-color);
   border-radius: 4px;
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   background-color: var(--vp-code-copy-code-bg);
-  opacity: 0;
+  /* opacity: 0; */
   cursor: pointer;
   background-image: var(--vp-icon-copy);
   background-position: 50%;
-  background-size: 20px;
+  background-size: 16px;
   background-repeat: no-repeat;
   transition:
     border-color 0.25s,
@@ -518,14 +515,10 @@
   transition:
     color 0.4s,
     opacity 0.4s;
-  
+
   @apply text-gray-600;
 }
 
-.vp-doc [class*='language-']:hover > button.copy + span.lang,
-.vp-doc [class*='language-'] > button.copy:focus + span.lang {
-  opacity: 0;
-}
 
 /**
  * Component: Team
@@ -575,4 +568,4 @@
 
 .line-numbers-mode pre code .line {
   padding-left: 3rem !important;
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/examples/cards/components/TeamMembers.vue b/apps/www/src/examples/cards/components/TeamMembers.vue
index 34d254f6a..1ac3411ff 100644
--- a/apps/www/src/examples/cards/components/TeamMembers.vue
+++ b/apps/www/src/examples/cards/components/TeamMembers.vue
@@ -25,6 +25,7 @@ import { ref } from 'vue'
 
 const sofiaRole = ref('Owner')
 const jacksonRole = ref('Member')
+const isabellaRole = ref('Member')
 </script>
 
 <template>
@@ -152,6 +153,64 @@ const jacksonRole = ref('Member')
           </PopoverContent>
         </Popover>
       </div>
+      <div class="flex items-center justify-between space-x-4">
+        <div class="flex items-center space-x-4">
+          <Avatar>
+            <AvatarImage src="/avatars/03.png" />
+            <AvatarFallback>JL</AvatarFallback>
+          </Avatar>
+          <div>
+            <p class="text-sm font-medium leading-none">
+              Isabella Nguyen
+            </p>
+            <p class="text-sm text-muted-foreground">
+              i@example.com
+            </p>
+          </div>
+        </div>
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button variant="outline" class="ml-auto">
+              {{ isabellaRole }}
+              <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="p-0" align="end">
+            <Command v-model="isabellaRole">
+              <CommandInput placeholder="Select new role..." />
+              <CommandList>
+                <CommandEmpty>No roles found.</CommandEmpty>
+                <CommandGroup>
+                  <CommandItem value="Viewer" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Viewer</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view and comment.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Developer" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Developer</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view, comment and edit.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Billing" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Billing</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view, comment and manage billing.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Owner" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Owner</p>
+                    <p class="text-sm text-muted-foreground">
+                      Admin-level access to all resources.
+                    </p>
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
     </CardContent>
   </Card>
 </template>
diff --git a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
index b73c042f3..9548a9f08 100644
--- a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
+++ b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
@@ -92,7 +92,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-[200px] p-0">
-        <Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
+        <Command>
           <CommandList>
             <CommandInput placeholder="Search team..." />
             <CommandEmpty>No team found.</CommandEmpty>
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index 921655a45..e5ceefa22 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -73,9 +73,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0" align="start">
-      <Command
-        :filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
-      >
+      <Command>
         <CommandInput :placeholder="title" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue
index 71cb99c4f..a3f52555f 100644
--- a/apps/www/src/lib/registry/default/example/CardChat.vue
+++ b/apps/www/src/lib/registry/default/example/CardChat.vue
@@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
           message.
         </DialogDescription>
       </DialogHeader>
-      <Command
-        class="overflow-hidden rounded-t-none border-t"
-        :filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
-      >
+      <Command class="overflow-hidden rounded-t-none border-t">
         <CommandInput placeholder="Search user..." />
         <CommandList>
           <CommandEmpty>No users found.</CommandEmpty>
diff --git a/apps/www/src/lib/registry/new-york/example/CardChat.vue b/apps/www/src/lib/registry/new-york/example/CardChat.vue
index 367adc904..81db6384e 100644
--- a/apps/www/src/lib/registry/new-york/example/CardChat.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardChat.vue
@@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
           message.
         </DialogDescription>
       </DialogHeader>
-      <Command
-        class="overflow-hidden rounded-t-none border-t"
-        :filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
-      >
+      <Command class="overflow-hidden rounded-t-none border-t">
         <CommandInput placeholder="Search user..." />
         <CommandList>
           <CommandEmpty>No users found.</CommandEmpty>
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index 36fda8754..5d21061b4 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -60,14 +60,14 @@ const data = [
     </Card>
 
     <Card>
-      <CardHeader class="pb-2">
-        <CardTitle class="text-lg">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-normal">
           Subscriptions
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div class="text-2xl font-bold">
-          +2,350
+          +2350
         </div>
         <p class="text-xs text-muted-foreground">
           +54.8% from last month
diff --git a/apps/www/src/public/fonts/Geist/GeistVariableVF.woff2 b/apps/www/src/public/fonts/Geist/GeistVariableVF.woff2
deleted file mode 100644
index 328a020bb563ac494e5ba10ecc29b5eb8c85226b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 53444
zcmV)7K*zs#Pew8T0RR910MNt$5C8xG0r;2z0MK0k0RR9100000000000000000000
z0000Qif9|?1{|dX24Fu^R6$gMFaVHvFMbMwpDcmvXbX&B05F5OMgcYgBm<c`1Rw>A
zI|sK$TUys~2B)%u!}$<Z=h(Jl^b1D#lyLz)wmFsDHe!vw<tEx!qTF@~&>euD<#qCs
z{r~^}*~w&#b(?u(15hxvx9a~>39|$WPckg0LR4?fgD70GIjvyrE^--tiwHsXB-$OD
z*!Lr<JmY5M&Gu3lT(OKL=Z>1Ywwh^nn3|{>)y{#3u;byiqWP8w#<-tr=1&&h;}o^V
z9w*YZJ-57#-h1)=)mRawgjJ?HHrd~n<`@CO5{f)vFj>K=R!sd+<z~tv35#))bB4d#
z(IzMS&8EL;oMa@43R6t)l7b4;<iXWoL+lTC_`iun@qdXAQKnol%0@wr#)dRy|6ap=
zp5F<VQjU~z^8^RovvgNUl~k!e)l+@Jx?-^TR8*xNBFm3j^zWRinnN{mCJzDe*ql@)
zqKzYB`&!TR_lRt(s_xm@*=2Tjc6SyQ#3e|IONf$Gzy#TVr>scyP%$M88Dl)bln_Hk
zMG?)sf(g%C%`e7?@?%cxA4sz0*c>c5O_zyIyB|o(2jDvZ-vDn21DJN2LTrmC=(*4S
zRP_xe@rs-U{3Lw={IrxFo}XKfC>4b%NWT4z0UH~ONH$imU}I5?G1>uwg&2AEdG?iw
z*;mFe>PpWu^1SoB@XSk3t7w^JRpY?U?Cff_A_L-&<ntq7_m1FXIv~&~EFBw3J|NjF
zBkGBEAkQi%@U?P#?t;o$QNg4#2I>G@dx*B_{XZQB&I(kFp*>d>F4Cn#T^6fsmu@WG
z-oU^>1O<uzKmMOOcs=*+mrN`m33)KnLMP(&(hm@qV10nL)jzh%EG&%1Ae9L!hEN0x
z7$QxSazMQw5xH^RUKCg5&JXWq^`JURO{UY)H5tA0>71Gdy6g9K^L4IWvF@z34h$YB
zmXL&y5OD(WpLE*yW(2ks+wwZF2%nb0`wy`OY8uXr?BxDd2kl*d6_*PP0dl|~$)Z92
z`Tk;eA>;DoPp}@?BWuoX0R{vC<(Ffho9w&GVm{{zEM+|@RV4t8I9Cw5Q_DhE;pYFW
zEEL0=mj6Ngy@{0U45F+9)D73jZvg}x(5C$lVhiiS8n)P?agx-MS}yf-eJTOk>sQr&
zJ=Kb(O;a&KNPzhN!L{_RbIHa}VD7nq_aj-g*)Nf<oN%kKj8DKxZVak^Urwv4B@O)Q
zwukrxcw9Uq3N0rcu&qgS7|87NzRAV9#tQ&P0t|bIy@05W9iogrl!2vJk!$h<Jn;3;
zcPea?1_1ip*wFHqLyB596!_UvY{itbq<G0=q8<>2qLMXczpECm*{n^3DKW`_Fs^-c
z0CWUB{w{=i_kQ{`n_wse4bvoOKn8{J5RrfQ7uqegU4){_yo<{^MFsc^AvTv;zWK`T
zwIqN%AQ`J$(9+sJPhe}X^U!+}y>A-^Vw<gZ6dqvMiw1yUe!1+8>g~9zW}LICET;h2
z)=;F?NMGBlY40D$l#55^4{ZZ<A+y5=ua2OM;URpKoX>x+YHr{EcozUA_!xkEI6wU>
z^(htUTabE4tD3Y`soQkm1CRg^Btek0KS0U`DaipS%jXla#!zvg{)b0~KU_6Ufu~oc
z^hZD*f70cAN}3r?r{&bXo>rKyNiWM}v6|(a?6O>^ud-O~vs&lxP1V|6LR9qK0j9z_
z6OObmITTF@ftNGKuKvE=<;U*Fau*9i1Od_nK?RT$ttFH|%7F`DDG-Ke%F<b+Lylmw
zAjyGp2%)=}9AkeeRjJOMi}FfW<)v7ZcWr%LnRxjBsk42#?D3H~2m`{^$~3S)yJJbl
za&-zRmjk}q#!n~N!1SV_#HERry`!Mc5B<Y`|NFh#H?xy<!jq)Lu11nIq4(+j|0jG~
zR+WINsxG8lRfX-UaJW4BpEj+v_E`bh0Y}OG1FW!VvU5fAyK+aCqKRb%>8Jv(aS!Fr
zbJZSj(Ogjj@4I|WTUJXMW1u2p8=xc%-M6GTe<<Td*Vvc2P+w7KX?g0o*z@K`Emgn)
zXmV?l9YzTTU)xLO&C;Ep%ZJESid}+;#CPH+_DRs&uW%(CrUVmA(2Ov~2qQc#WWUc_
zXhxrU?f$v*a~%>Sh=fC^#ajMHH6UuD59pXqMBH#W|Km2tImTS?`n}9Aav-1yA|S#!
zdU&65nx4MxNm7zSSeh;!PWv<V^M9DGZMW^U*Zuu@-XbF-BO@X_A>x_w{!o=|Z-!Z>
zi%Sqf)HNLb|JwR<aiW*L39zv-zA}-EJ^0^%D2?ZZpWyfbBJs&XDvsvFnJaI;eEEx)
zsGB4`WHHH+r@$y<Oi*gq*KT_dm5xCt)Ld%Ss&gY6lk~_?NwBQ6oVK!gq>u06VMfMg
zwN9bqhH-a{pEEgUAZkg%yTw+PSy$!52Af+9cG}fzZ@>M+jubPcrsvhRuC6VO<=w94
zLAb|}@glLey{SD)XGl9xQt>qCqFN@Kp6c}D)nAi=S`5-|8S%cJes^~l7wbTqazuR9
z&<1+04fM_=ez1SoF(lL)g%ALTAdg!E=ngAcD7OOe1luzR(2IHRZ~~eTKk2iQFJltD
zRh7kyYjK#vt#Wp`FGJN>0}wcmmllVE{L;bWJ7`YLO&z#na9F$uCxc^wV}@oxgFEZG
z*SfRU4hD!ma`Ivq?fJ*GHJM-Zb*mLP3w@k#eU<^}CP0gS7(!4Q3b2)<FBjO>*JU{g
z3ZUF1;_~z$g79h9Kp$uK6(L*w1Qj-@+11QxA!R=QeA1SK!7%CsQ%d#|j6>w%bUb}=
zL(g84$%7|qV<iX*0s<sHK?T8IBF*|XR%>_6f+A7|&WDR)RI#ck3(IATzOX)p%<(OP
zIid`TEN81(iyVuxw%`abs2EPtG=eCC;h85|M9Z1->r_XC5E3}N1xYj%4aLF8Eb}lT
zf-9r~wU4idR}rC_^F1tE37!`cKq?`WU>FHWvYGt@IFo2AR2ynsR8`e+oQAlEk;YB<
zakv&-c~eJ_BPf6)-I`linI4_LD%D1?C*39~hv7gZHT*2sB9Q~bL6I0Pl*CX)un_h^
zO~U9t?{ADbC{Ei|)$r%Xx`JG|F?A;n7+4Lgx;g*K!=gA)4nl3$cts6qml%)WNl_M7
zSxlAJiM>%2j2w)m;*Vj_mb*O-GQ2cc;GGO}M7Rk7$i40{vV5-D1?9bNpI(O_IlSad
zy^tkn)ffOzk3J#=YvE*P-l!3Z|8%&7(!PEWq@O%6@R!XDGwQcl%}o9CAq%tMyW7RA
z`TnR$-l|YXDA|BefALt3A+TLeLaps`EDghQQd)M)aYXjZ$>=yNCuhm=;n{+fcAV~c
z=k0aed%@3Rn>8K}{8DN?eqRE@az_b*{>$0h763_cG?~5Q&|&!=&)y?<M&*dNAUK4a
z7bNHifU^0#Y=}0t^7>)E0PDvgN=|DhTY=F#cxYYn<jQOJ)fVC%LzZeycQ`=#sP~XK
zh|QP$>_F?9LD(Alg7dR6sB2aM5w=t|<Ybd@h3npuL}%q>%SPB3MOG#wN0VgYMNCh2
zOo72<I(I44OB^d;Fj?)vz_ASmW(NcFk-_=Iz<g!M{BXmrydu9~aMcWK9D{T_H;*0Y
z<JdhY3oL=%>EtLe#wxezmCf14pQhD~uYz=eI4>7{6ev>bO){K&Ll~4Q>D)cwGUQ>N
z=2_k#tbx^+NH?W<qr`h-`^_X8?qvYY1vlRElJ0!a$V<@;$eg%6XF2mGrB<EBqGd7Z
zG7H5Y0NBR?M5c4Qj}<&nR#sM)QdU+D?n3@@{gtSi)T+~1v@9lFW@9<-wLOk!pOgV)
zUCgB(KsrSVdRIGH4L~+I^PG|V<>~xKT4pBgzQL|&1&GQqG-}vyePx-^#r*?KpXQJ4
z`a%d$<V1I75j}RA-*XR44Uy>9G3G7F^Wx=QruYbGYYnCQ8%j`F9dBNWH5(tGOjV24
zY5-czb`ju(y3sv_w{2b<M78bU>M=Kz%v1a|HqpJF_5d$p8cwHAEL4u*ozzrwZ{8;_
zA6TSZm9JK-ZqpSr*XZ*T&V`%=!hgR$*84`w-jhJ9P`ry}@LwDMxL{^j%*Wgs7B!S1
zAM798Hfy~(V&=6na$&0I;eWLo9|a3q+h(QZH4q;=n69$bNG}v)wRn!KpW5g-{mC=s
z|KL|G@v1vLqt2+!>3=@vC78Xx*+?(;o1VcJzXGTG@oesu6D(9#{K2E6Sw8MJg%lvt
zWB5SRutoO(_82hlt=N8Wn4=?q`F?~j-)Z-RQGP)&vvqC-QzWh(&+^S)dDM<r^8;^8
zqft%U_C8;Y{5oG3=3#bx`5mK4AFt%9px_>ucN&);BGox~?pw2bLf9|v67;A=d`z=l
z{?tMzB|&RL@21vbqgOa_)%!(fdY<K)OWiie_{V6XWIFe>0I5e?53NeH<H1KXuT`aI
zR1p<0X40S50gs5UZB4^AEw9Jv`-9BSZkn!Z{)<62m8>sZA3|=%f^|*^S7&^2Pnfk3
zIQ~cl-%Ph^cF-oezio9xy!Y^EF(f9(;5AG?ahzel`(bhs=tIf#iFYgfZx7WWlvH%A
zSaagSl`o@6(c*NJAW?Toddbp9wgN?pjW)(arKT%W>9`Zls8y#yqkr9J*6fY<)=kY+
zVUa@_Do~f)j7@>&=yVr){q6Iu7q1KrkBv`EUcYhk*6lmfckj*2&M(~0EiOF>N20OR
zw2bVW+`M=qzo4+Fw5+_MvZ}hKw!X2YwY{^eyP2Bz)ej5~4UdeDjZaKY&&<xvFD$C!
z2e)eVnzifJ3tYN<h0uzX+N)fpYPGQN8WE9E3i{uIR!nT|xcJ1Rl(h7W%v_`PGF!*Y
zCP%ty$dABa0&ut>7Aua&ixY`LY&M?D6_$|^QC3Fq`3RFHrOcRtnKLJ5i!CgY(&u;0
z!CD@y<-u9LW#&e4#p%<?W#bgEP{cxU@=y6xc!*Ldh3Qnv$W^B1*`K0^2x?iVBWj@5
znEHq)Ei(ko1aH`QpLvW_;TH-m(M~Ei0b<etAsK)!nf>vfld&vQK+;E$SzCflNU#na
zZNh~%3TR`55C?>KAS4WR8k1$D1@zm>BHlI@tqc9SDNUXW<IY&iLFqafD;sAyu>Pi!
zSwMwc77;lqjG)D3MuRdl!Dcqt%mrp%pTGH8SdFu|EEY(XBra}^wFEA!5*xvWmY~c!
zaQP=G;@OmzpvWdDvvp#Prot^QyGWWy52BxabR36>Ib=4-L3BM%F9#df)AX{5mXkJ^
zXgTSESz9*Ia<K7nl|EO3-uo@0=`EXJIcPoZt=i4}d){i$<_>If7h>)uYrX^<zfTCP
z>5ukfo}WK8=<^ub{0t#aAm$h7^V?)?rWIO#J_D7n=;c57RfB6X6kP{(H%+#d+Raru
z4VF`3toup`>_Z`h6hxFrL?DC^q7a2B21A0S%`ER=NaOg$3CPLG$#LXFA~l&gnii0e
zlab>osc4#2q~t_0YTRKyMTrv93<sE!)+TTe(uShaI%Yf!dOg*CZKjzrZc>{$nFA$Z
z4pzQHe9X1#en7*SMO(A%8jaf9H9(6t*vfabeoO@n*mZ3-K@<&XxtlzD$jE6zUd6gB
zr^rHHo+V2yIi89<H1C%vbD4En>Ibr1Zwa4<HW}~8$*73~S^lF<WE>57sLDq)c|fG1
z3FWw%$Tf1Zfhup62>IhdiYK;u?!h3+w`l9z*;9PPzKZ?W%2*C`t%}5=$%#;N!q${n
zwz18Ep*Ys)0Q;7M1OST1fh_INv1CKdmVq664%$&7T)A=Q!IL*FM*=6l{HYiPa26z3
z2#qk|P+L|+5xhi_2-ThoKY`i+dJLYmsEGbA0|0Sw+tcu<3|k?`ivF5vYUTHJ^)}F8
zLv3idjg4G2)l^emso%=Mksi%fj?eW@75-ZrSly}5TmG!^w|T2YY!my$F|iz1$DQIq
z@uYZe`C7Q`Lq4xXw!O<}2v%?7>0@xD8<?lwPQZ77tFetcbR6IW=eyqBJj~P9o}G<X
zWV`iu<)Ux-Rs8EDCzHJ*3sz5QlM}%CYu7iJ#CvS>pat@Pq<Y52HG9JAH~G3xP%p`|
zyU}syg?|9lh@r@FJLWm5QerK0M>H5)NL<FRMThKFJE~(Ios><yQb^E961B-YM}RJt
zu<Znu<31N8(3)Uf9|CmSR-`1=78T$yy&->?yhS(fs8l3Psif;0-8GU7Nj)=irSt@?
zrPre_9lFa`(iwQ~2uB~yDA{o4K5$cH*P;I0n%Vq=iC$#$zu^78n4-x(D0!tLs2phm
zVSPguDH*anNbBT>&F(g4Yqn=cc4n7?LCFzTF16LENv&Q<)~HTUDv#BO<F&tJF>f@R
z002G#{<U4t2K>j?-CXzbl>q)CUx$AK47PaIB8tP-bFJ@Le~#gAx2}0fvJ#*N{)~0z
z^}`f4>v3=Fi>%i(`0DH)gYV1vYNKA+&FdRkV4*RHc-1)yzsaE91ju&awO#uG)f+b+
z-Td);1jw7gfctqty@v|1q;N0Ljf!g1#=kZ(0lYyeYX@xr$)#9?kJBl?od3XA3wrM4
zR_yXY-){gx(GoWRmkjG<i2fz2I5on5wO<cEMm^}uV5cgW{`9Ude_#!m_+6LyeUh`{
zoh=Vnrz>+!bF^)$qs-435ew4ojD?c<^vb|x5mKw_+Ud3HSuBCn7Son#&?ZtGX2(s-
zG`(ZnLkwy(yB}Jt7Y^Fc@3Vn!7^4EANALht99eMU%#JH>4t)7?<1e1OMBPM7(nCjC
zOuEaFCqsczdKqJaLZx;Yq|z~Kols-jEu8H68-SKd%L&U{%jc}`gOmQWmP{;2Q`D*2
z(79m%yxva$slq&rxyaZ*3LP2-xt|X7oGP^*uRz8};0<6N+PwH^0rKcLov)&Sk_u=x
zyhlVV30vYK>?O5Kj<=O~l=hHDw&u^kc?0NrwT+fhG62EogO^33qit3txvh0wDg|ur
z%)LpzPl@i=)Hb`S#jSj<3IH3oH#Ul+4^RVvU<Ib#ZCC??LwUy;T*FT(nh|)U7%fj{
zS)ZLb@On_$=Vmo8$wjGni?G2Y^nst#02gTg*&>q>t0ZrmVuTK{difNN8&Md2*iA=?
zbqcfTHCVmvE#-?`mvDJs#9o+IN<7#GRh|&6G>=hk>t&qB=eXL<2k$1ofo)Xc1FsX&
z#-o76s<1`ieM;hNB)8dpvQ@9c6f6egPIq~Ku0-gaMonp&SyeoB3FNZ%{9g7a&My@|
zF@yKPzntSzt8yjw9n?iL6kB5$z|dwa4SaBKqFzDH*X9YY^YV;0y5w!MR=vi(`(qoS
zS^54^drZ!jY|5Fg_G~?q0N8d$K{UQ&<?c$^sSfPQyj!I5s8mPxo{0ifW$+n)DVV-#
zP?dqn>6^1Xb5+=_T=pnRQGPIL!5EAt*w{w^DTS_pahb!uIZS5iTO}LnU|;6}xl?PA
zD#{Avk)CwK_t&@=<xW4zCFejYb3e4NLKG@EJj$VuhVV(z20yahrT6LW-1+J<M>C3!
zI(8Gk+wnC!PXV0ZpR|<vrfS~&eC4Lxx|4&ocp8*b#pcY+in8#=&(>^imzzPYG}3ro
z?Vp_U<+Nz<`l}1SP#x%&i`kO<k}F{W#!I_z!Ra%Lz_4ccZa=d0b5*_S@Qliu%S|<8
zo*LrQ=3HC*>cSf$Y2*1**~#QXS@52!MpS2C9M$-1GCvuH`?8SBa!qAL-jSZ{^2p^%
zQ8P4ys|k86PK8JcuH_kc{j}e{ApGWk`3&VcQmsF6<01e)VXusPPXWwgwz%P(d>-KV
zGWQ!;)>u-BnmmtZ`;3e2?j+OM_NE?CZ`fPq6JaWR|6y<5PZvxud-JmxOEHs`*koI@
zrciB|rInn~eQcFp)}XeYi<La3W==9xr40F1j>%bsk^z8^D2Zsht#NQfv1u?EiC4xj
zz|AoeoiUi^R=dxe-GoY%7TL|d>{?K%tCz;uTyEF8hQ=+!?i4a8N_c5NJ;^DTzV)Bo
zy}=UT2%gTTkYlX=u^Twt3D?g8h->e%!2^J)1w!NbMgaTst-&7ee)I^Zw(@c>)U+7#
z0ab@da<z~=#gMOTFNk^D3&XNI6){ki<Y*Ls>k`G<&LE{TSnC+3lxBEquVl|zdVC&0
z-m0ZF4j_#qe6sU9ocM{9rk{aEnQDPGw%YHM%Wiw@t)J_Tx-Oyr<IG=siPB~J+i24)
zwAMBUoOZ<>PrUQXOT<9ddHqblOz1Odn8}KnoSn@-lbyfe!YE1xlVW2`x5zr%9aQ70
zyPkTlI<F1C(cf_uAX;ac`Ws}d85aA;4u_m^O_OInsMp?bC4JFNpcq~BkmLS*-%Lxa
zx6@%~)w}1pj~Z;fOMk~*kXT*yG{6w!&9YRvU5=>rKmYo_PaJGGoc@l7U~#(XC0B_F
zW?QDhZbzMS-F+{74#0*F>f1eq=%Bma@(eZ69LsI6$1w}*{r@!k62uL+)VFyF)lrfx
z`GzS~W`&IjL0>zsf!Rx6L$LK!z3nYbC&~Vk?;mcGxmMa_uM;k4^uR0MLa}vT;kep9
z!o^GRmqH^<HqR=XRjGE-O%JL3dl=;XS>Iju6(K>YzKV=A#eA!6vCm1D-15j9Ke98^
z0?|hTt=*|*odO&RwRNVF3vfegG?L0J(2cP`D3$+C?u|C2N(*#rG!jTvFVhifP1Ub?
zgQeEuRU9Lne>(1nHMFNTV*&1L?`cbo73i*Ldt++fJHLxcOYP5pdg|Q#XQVF6e`e~s
z{AZ<Z&VP35p8V&e9?O4j>goLErCxrg_XN9AuT!1t@g1p~VY~AW(9{vD<2o?N1PMu^
zkV2wjA~{^YnF18Ho`7hBZU-m|1|2LWIBf8^5bz-qLL!E|E&-6^1mV#I!$Akqga=8>
zlkOxvPo{^n$-3l$c1JEsUY9~mX-`>_GMMs3%I~S|skc&}q$S3rG<sSvZ9&?`^y%rV
z(qUAtz6kX`+lhL)Mf_vEaurruWwkZdSzw_>mRe@H722C^PK7orGuJ%x<@wtdTWz!5
z4m<5C<ME9iKY8~2#moB-9`>)zUVrt&o3~*+$p^zOB>Z<xCamS)WBofPr1kNyMm?ey
z!9idgTswGJ)Np!Aq0;CK9j30{&764rWzOU9P%c7B)RuuOHy%8BGYS+WRG4rPB6ZSL
zl2m>CrLTSl7^uW}Q_Qm15^L4C<g&XSd*Ye@dv9XZAzLa8)3b!Ma+PZ|)edqh8d^Gf
zMkZ!9b?Uizb?7o)uRaq@G|3uDCT3kKs%q*mxCR1=x<M+X+LKOR63PYuaWMUO$YPSO
z*a+iHHq$)ItWjaB-S#``lymCc_0S9NZ3b{P3du`Rkl=z3Dbz5-jWE)vqfc!dh_yB#
z7TbteViTHzaHBvH7A2DKsE|ZNjU+M}H0@Ir3zDd4kwiy_Bqr5JVxvbA7X#u+y%4YJ
zizGNTn7WnT(apxxy^M}23av+(%|Yu~R&&vMmEEyuy~}AHTAy;8kJh)m7NGSjzlCW1
zD`*kSCz#JLUtqq%e1rK8^8@B5%rBT0)U5iEW;TGdUxP?{wgG9MHX?XlyZ{6XfhrwE
znVBgyYo_wanlvxcBJ1cDX;WEcoU5pkOVw3#YgMbbV*wCywkQBx!2$Av;IOmBS43oZ
zOpWLeN6yIo^{b7g^6~4ahGa1zc4(#}4lQR%Ucy{MC^5?j3l@YJH-kf?ox=M1gTn#%
zzwVPQ3gx&M+_@Dog9KVYZhKh6L+s4<K7z94?L}j{QA$G4QOd6)E}H~TWXp+HA=>1;
zs$I%?U5A`M+b-v?I!XUFEw26f&JdQej-o{89}->m0j_hB<a55{Yrf~_Txh2XG$G<`
z00u(-uOFHw&ndP~(lU%JrV!Hus1|7~Y>_w_W)2~oPg+1}Fni8LbpQ+w#LyEF?G<-V
zVtmiu16?H+3xQXzq~|COPLMoA15^3#=zc$_p@vPxm=0;RXBv$rZw!*7Fy!`o`q8Pa
zqaOmxAB*VqWJm|44e7#gQCwUgtJc?ETfMETE4JedYq;jP|FMDpJBLbDIK~%=ZK2UE
z%gm#e3+veuN|t_G_TC|j@8<jHH;&MgU2G8Z_;Mq}Y~&LL2owRO6&h>^Np!3=>=nz3
z=w-vvvUIQBdwo(-EI?dO+6EhKvRO8j^q@FGM^C(BncSbGi2>wKASHl^S8<jsRn(LN
zK{1Dp&03|5$et8YrHGO$Ny9Y|Cm_QW^DF@mjB!C0f^P@|M0qXI-m8V#k+^7rWEp4y
za;%do!-Y0DOGt1nYcBv@dnb&yGA0A+E8l=j0Dt~p7$msEGQZqb)UcmB$EvwS?pfvj
z2Vf-tAX{|^fIS8t`?3It<N%zIhu$@s765?%p+A5i8(Jbw?TX$I0AL^&j7AK&ID7?q
zEeRxxmcmu|dBhUwHDWEP9<iR<=WL|Y`9grNLyxA*h$#F=n^~O;a2*0j@qC3TZFGp?
zM4YM^(x1gyk|U{4bKbR0IdyhfkF~lN8&;kBSvYvlcxLfhwsVqmIEZT~0R;@Ozylu&
z_z*%1dhjl!P{N2HqDUf#G|HgRhCE++tF!&(nnp`&7rrj(Z)6NofItL`lp$1vf$$L}
z(uqt!<{{gV9moOXDDo*L4Ko&l#n>=j%xcX0m~EK7n1h%{n4hqT*i`H&EDBqIg;*lC
z3hT#)OD^L^;F{=R$l0Ddr8`k4?c{swdmBXy`idHdx*Km8Z~f%=Ksj8iAw(oxJ|X~g
z2jh_AL!WQt#%r>sYvw!gt{YmjNqwfKvhOj7Fw5%8ItQV|b>Kh+6YT4<3ZO&~&4^(M
zBv8Nr4<blpE8YVM7LrZae$ahNJOA}6c}CbMY!wQ#9I;Tg#k~P7dfA<UY2cl&Y)|{r
z!SvYbcXTc15!~Zd=0u#7lk2Tr<@~-qjiL(m_@#X}z*4jdnjqV&R!j9M{)_P8|38>$
z6l|tS3~ZUf*ky?k->KA!b=wBlzulewn}#SPCNB4PLN)`oU%MdZ$64_F^!7SKk9>N|
z$=yUZvDP~O$D||I$U%ar#yh0uxxSy%9jGCe49kY4!vbP7J~xt$4e<SVH#$>cQ^41s
zz?Z>S_1!_8t;<&Q#VU-BpBw-;h&{NJaU{SXXl`v!m-JlE^;+k;l6%7OT*b9)UEh&X
zP7-^$k(>8Z-^6`{7f9aNx^xxX!Fycc2Dg}Hjs-SF3eeLDCIq0gLIGeQFoNrtVq#DA
zC06+-ytD;So?YV4=tkr3Mc|I>Li<QX{%(sgfWV;)6C|7cj~Z`{RgUWNS4v6#p56(U
zb&xR$!HKgrZO?CXmljzjLnSKFZ}%6oNv`<T6}d|tm8e7|Pie^Cv9H+ePnW#Rc86uf
z<gBpX%YLK7Rw(<rt@p0qQRke-sowH8%dS+dr>*oBjcLJ+z@b<?DGLf3c5K*cD^#E$
z!7O!?CRvIeQg=!w559hg5|i|9jDz-St^ZpNIO3R7t~l?aOP+e@k;l&Z8GzrKFwlzc
z4n?~ZrZ_N_Nkd;UhcK$h9VV!zb(*M#+DTSw>78TmDuc@$T+_w{9&U4Ulb5?Z-Qn*)
ze(sC#LYU{m{a=U&0z4DtwOH?T@WJIixy(mb`0Q%mT<eExe0RNHZYvSeOMsrGz+Vl6
zevN>>4F^*rAvcr(Wy>kc!15F|R$;kDg)=;i!4(-<iD4l|gf%X_$@!RKMge9OWM+XR
z_VIC#yIW$s<?M#MMmw%?7sfDwJxrkwGg!eKMj)VI;82AO3<L!Nq$@>2?9O-p_M6k?
zog4UK$v@wf<t%ot;^-)@+{1|;n2Ei&vI~;zogX+Q-M$lQ*Km`$j7y<+Y4#`kdbg$4
z|Nfe{?4FufxuIfz<$<b$)rWrfOTYi+n!~k6>W<bQYdGF`qUmJwsn*Bao@jrv<0&!z
zZN)*keF_J3`Gfq^+;zIw=J!n~FaaSxzkucTb9jTn^0A5<42eRhs>2nmiQDzKkXsib
ze=bZ~Pf$P?q=n7#a=T47#Y|KP6a&+Lrkah8g}uEQMS5~`aH`=cy<feKU5|Rc^1aQ?
z77KFgLZ^adszgdcTV&+rqa3+2xj+lbC)}GelMEIql!O>upah7)l|VSMvXKG-%Qb*+
z2G^hk5QFPb0mR@2Q~`Z+!%YBy9u5H5TLF0{uzfRdI}%uZ3m_Z-06-3a%=$?{DAb#C
zX}3`(VG%!YVOB8Wr1%nkNW{vPgb5#oPXRPyhDt**X2U&%dkkru_4vd5GagGfClEXo
z#W4_<3Bri@eVW_KKd=}l%<p7^Vw%gO<alD9i*cRNB^@Lz8?}qD1j7ZfNX|W43NJ`R
zoCW0)^!Jz)(juyj3T?kS#_%YHsgR=5Mk0^{8Avz?FsSn%{N#m12)7b3(!^v;SI1~v
z0@hf;2TlEm6HO;GeZy%Cfe=Xevx(8M)<bA$%58WAg&9ni{4b%xdT5v&%eW&Rl&}n>
zP#ZY!VYhHU;Av%3LBx=d#u3y)>PLh<rWGiL35Zd^w=;?aG8WCP_POvsBFFgvAd^u*
zvMAtKRUJ7ByRe>)(`t^6K_@k1<P?Iry4kVsNwL;wwDm#@5o~ZW4X!qymwxVWJ&!t$
z^^6@hoMx-XW)m?PR9t;s=H$gzE?ND2LV(1JO{U6fn3NmrETBlF{aBc>cw?_i^?5*S
z3qGT#C+UNVqirj?OT&!Rct9xbmNH!6KsYTw(&w(qglr0Pv|R|KL~gIejfNUEI5AOi
zK$Lm2HeFFnvJFQf8=h8;A#b{!o9ER%%<mDFQ;&me6D~@jOY@L0-ba`YEq2TXVj=Y6
zKpKq`tPv}H6}!Oxl7M-DS3(}%!iXysYV=uSL?U;yd>8UpS;tZOqoHPHIzlI)EyA-H
z#;H<L6&c|X1}`|$b$Us$>%2Mdg?sjx2|yCI-3$jLHn0W(%G>eQO<tPZdw|A(foTze
zju|1iUvshm)R@lAhS=?(k)!kfSU<p~O2R%^La_^hQ5@1Gk$`n<iM~?7z6i(OlCHkJ
zJl6^5GK5h3$SUzDX=UC-?&p^$4q_{9j21E&e_bHc$2ckogOX0-__LgCSjULv;_P#(
z939a#4>HigW)-K$x>ZKOlLJ>fb0s6qS^Ln7dfEw1%5Lvpe7|5{tq&gg`U6~^=19Fe
z;Wa)*7^>y9X5*Y{F7c;IHJ;E-(#zE<^Kr_;D~BteL=8kX1lXt%7k>eY=Gjl0t*B*Y
zi6btYrG%@k3(s()pu}Zgv&nJ|8$*sLVsk&=s!VEiG<<?*#a-5qOIP}<(%(uul*^UU
z9T*<ag!ZERkefL*B}=<Ye57^!sXC{4fSYM5?*RE;H1pd_+DM!|>O9#|TwLzfF&Pv*
znUS|clI%)#C`&sT(;c^)K=>W0qkb7m@FThEnR*I`5A4y?gs?KjK2Z^Ko>Mg(t+XjO
z_|>ssRq}tz`54!R(rl$Z5^&)aKcfxRmI(n`=W1dNN&j+POq&0!17ua$Yak7_uCzT?
zqOFSF^v$@AN{p-`NorNN#0pL$;+d4I9>)t+%<Lz-w<EqBu3@^wW3vNH>Y%DY%<x7y
z-pE8<NR%DdwU<+cNd#uFE;c)jO#1ioeCPtD&zAorGG+yGS4v0hpYvMD$QPoUV&tig
zwSychc%VC0y=rQ;$^`E~p<*f;=sYEQUaO<%Q>7Um{ry53U5S)VymdqfHHaUmIaR*d
zQs;RQ_4d796p#^`8(i6E5LO*sz9rL=<wc;SbQOP7wL@LuXk#%ci~cuZickWrckWG3
zwO-|yrY$Cwx;0UhGkdqfLoF1X0<rfBUK|VvYz3SX+M$b{(Vn<7EtA2)jQ~!!cRP+H
z=ybwhrN7Ds&!`1gXOl!Ret4E^6~sP}ShpN&IsvgD^0?7w!R|nAC0J&Sj~o#8pffz8
zsn2Vu^k6Qr_#=f*fm5eI_yEfjqi@klNkDFu?;%lXYzivmE^w$TJ1`Mhg@mdt@hfrK
z%*AyJmW)N}Rn~3A*|<B@A5pV0_p2jB!s0WbG~Z|wB3*-CNmAJv#p>??ekUT26NEle
zJvfN`)#qx0u1$`NfL_~>m3cBY$HLy3F%)B!59_IOX%gKyI?{4{Fv8G+H%?hbigM8-
zvCS6yGSV)P-6#1+`5+-n)ivH}j|P?qG`Wi<Q}uNGBucG1vWOb8n$*z<lSws`+9?&N
z2(f2<-%ik<-?oitCX56699RO5a;NEPn<x%uqe~_W$BaT6sGLgHndp;EOhQtIu@{a!
z+9SwP430=N?7E7;!fwSylO8_Efijh{^3F1aIL<It6l+gKaS$lRffOs}*ScI6lI9cu
z;I_{wz^RofxYL#-c_KlUqJ3vbJ9vMCK!LB0iwx$rp_bI7eSuT;{LJUe+Y1SRu~@GO
z>5EM+=O{QSX}&N)rH<5-xQ??^S2$iSpC^OWE``K7Q2`S3l~S}FvQIR1>S#lvc?_$R
zbJRX!)LusfU<FdbZWe~DVFErRJp@(;AY-cC2bEEY2b?3C>u7x|wJI5h+?X*RS3WgF
zQrUJ(2!?T-js7$dNltpT!Sz$ZA1auH%W!n83t?Pz&LjjGeTa0C*qSHAL>)s+gfR>t
zVWN6W3L?h&5(B3OPgEwlH{3z21?O}QIBShjDe_=zWun<!g{D@T4C?qy*yti2!H<A+
z4(4*bBMa%_wylgK;E=GqOyX@alEvH?cRpjH0DrA=ao}uKzh<MAGpFJb`YP2UE>LRl
z$_kb+hL7l*QUNZ9F-uNve4c=E#tQ&oxyPa!CPl_*#r}ywk5>kkeAeg*ZuOv(R40N9
zo7G(5I?kUbx2}ZZbH)%u>*qYltF|~Mo2tMdV@7MW)1Vq~0)pd9692-GHn_i*iB4__
z3&q`dI7v+~A1&_f8mKf^izMF^msW#C{!%NazAfTV>`G=|Nr<+KaJoFR@-aIUvJe$E
zS8ja{PDCXRTzJPEYRQr!*>0@;U{q*#8C~j+@0+P^!iH2G>XIxZ(6>nmb%%VV?+)op
zZS*q-;9*at;7HenqsuWU1OjW$rRvmj9WV2*VwHuUwgghsrPNZQ)@=s~n4av%#M(=f
z#vPz|uW!qSQ)-M$Rv&^tj4LE`OlSxWdGhgbY2k{|U1lqO`(8vJ%g^AM;HUsKi`qh!
zhg2e22O~JyH}?W#z7bRRPj{0f3Qj+8#uc7gY2QL__?W8=%cDt0!bG$}>i<nD8kM!?
zQuBpMWB&Hwcv<QycLB{o+sfS;tuy0&T5u{c`#Jnanr2}Acu?wtJ!h#)9sLS{NV<uS
zzh;CAkXud^HQMX<GpLbJu5rt^O5+AltUQRFVj$bR%nZ08Ts1P;1g@wTQ=cR>*o97F
zIK5qSHp)wNUXY)rI5{%{tcW0v?CHW8H9HC0DYg)Jw(E~HMv24GeLPx2){y$o&_%ph
zicDJYg40-PnI4sa#}$W-n|qdIM;HpDNhg#QdZV!`_M8_&Kwx{(P_sVtH%4nyU2F=X
z4Zfs^q`qo<eib>}(-nGk{~U6;1tb2G@&hdWfdWmU#pB;BO?DEAkwvTBGw*?pF7u|w
zT{0)ox!FN%p~4E=X390NKZ>uxi3gCT8g3u};F%h!;!#?#?W6vS&IbdP&1E%TPZy0t
z?Q;1%F7uz-IzlC$odJ_;S~^Xe`dbw`(-;KRsJsc==A<<&UqQZjTgoz*(~ZUnDrrBa
z)>P`*5EOFP-x}F)+f{?e5r*5ZOO<B)wK(rh$=`5?vf&|u3IDh`a_-J&W>)T$&*2}W
zHKf<?)&ek@HyHwC-#V2k-zl-frNpt692waNh-Z%k1cYEPd}{Vbp>k-SYZS+i`S<d8
zwmmeQknq{{I(FZsoo!dq0q0PvXJ(Dug<N^>z=I2io9?;sHO~!NaXcrt_EBkDV~Y_M
zs6qA%@<*fz58C@jf7nd9dk0OML47>i^M*Bt`h#KnMVGN#M=QomAOyjYiKshC5df0$
zDr@!ao>*hoL95^Z6qivQ_#wU+l~muUoKWGd-Wgav9_=czcgHIjfr54p=7wUz064_p
zs+cd~OLV!(`lj}Og8*1e2&fvBr7~2?pXPxH)?gFq;YSDHggcjOu#u5CqIAN>g96t^
zFah`n5^14{EvuuNt-?-qd(GZ`N=^N(QQzipTYX!wc_7;2Z%%>;Ol*-?hbuJq^Z2w(
z`Z+{lJ0}|eY@YQ32t_?&9Re++(&nt>&khxy;7h<y4N!+A&4cXhda1q+!xGo(iz{_E
zslY-=U9rfg4U9MtZwx`gQ^~u!Lx64EaSFh)?o^D6Gr51ntP9}CNSZih)QQu9JW{qU
zkC6t!_RXk|2WfzJ3glp;vnH(Lo6TdL1ofq+k`Y)U<DDB!pi|gL3M;Kum}K77oUFu1
zCBZ4OP!;DlXxK8lq2+Y-Nzsuf$7j86;@sD}!KE%@&R@X>TE6*az6(JvLsa7O@Qx<t
zVD4Kumvhod%)zeG3I`aKT7rrQnq}?OeJ30v4p^Xow<>i^n|skbu0N@sK(F1qcCTKN
zpzXI>of<XHI?d<!g<ZbEKd`IJTv3%molB2oQ?Tn0SWpi1hf(K)Q4of<M9`3OLs~oF
zR|=*(S1?lI3TcC$^+0!2Kdr#frOgXRccZo%hBoe_lne(xYYJVDIahRd{Ao~KYxQ6B
zQnN}#B$^!^gVoZDG0`ttT4Ls>QS1YJQmNV(sc#D6^<&9DgYK+X%{|*<w2~V+Ql|a|
zX>3&T^IrM`YO}1=uM%Os#;hhJYN=T#T5|MS63>&mk%hy7w>uvyUH%=!9@qL>!2qF!
zNN(}Ll61)H3wq&$F<2UL<$;G1R3w`;aY_t4Vx<d<4qQ{rTOpedJdw4b3mt#s;vI4-
z;iIW;zL#o&VDl2>1dinTH|r2kKNis&_&ebPFzyFOCD?}BsC^~e5>o5uYtUhZ*I<C#
z<)Iuh)Z%U6W3=Y)?)+cVrSH4%!TiFXUaZ`{vihQMbGS$OczdXDOcBAZD%#7`#ETU#
zvM*#5bJ5&lyO1Mnj3RW=WapxGYN4&Yh>LKG7Cq<|&MX!lE?&z}cet<^z<60|9AkT;
z?n9Wp=_}WnKWTuOI0QYc8d$>#!&yINjsFoBi*vr%P<~@Q@WsFH>-GAmq-rC9k?L)C
znS3!%S3<BjU^J_u=KA}r`~2EwgVx+=iX7z}1<t-jbEBTQPVMG#G3}PQPEY8aft;?<
zS)mEtj@k*evQ<qH*{TUOweCrMSskOnnfTTt+qZ2#y!OkX^9#4E+_LWdm4l16&EEz#
zjDs;~wtR4G#JMetZa$FsuW$yZ7xuE=f!l{b(?#X-UW>szFIZ$m5v`sWQ(QOKQ$5(y
z%1FezltDk(n!)|t)nigENpj~#^hV>YT@9j^m_o$1Q7N?y4&CY`5131zCvJf|@lXG+
z3XNk(8WaL<FwB)mV!Q(kcF)rMCTCM0>}&QSLqMN=vgVk~?k5X7dT#;?rjG4S%8QKe
zv|T(qvanJxkZgMlhv`6zHZLe$+H0u6$@MSj%Zt2P{lsXEPSd314A{*z<WGkJ2z+tG
zI`?3o6&XSz6AsRcAmB!P2pM|KT~1uR1MZ0aejQ#1Q}?d{h|czoH`e+lwp~Upo9Vq?
ziB#wjvpTCrm*%<uy?x~flf9%AH)-y&pOK+jFJf=gEcgNVx8nT$$a!aEH}GB@wIS%)
zL&)abO*kuVKIU5#Km0`~mpZT{esJL;AP1Q%kh)RAQp!027$9Kq5|E02SJ#ksdA-TI
zB{nW+5n(}3tdXsXG%+)=)@tQDik7WyEq)tU#Bq<xN*{q#{5xFLTiQExgY#T2?>qjI
zx~;QdnB#;_RvTQnwWMx=-;+5^oW->h>OqOFh2S0o@5Nhae79J{ceYTqmuSe)Z^7}+
zb+y*!`p_lkCEy=IhVtlhn(EziTDlLygAF|{qrS({&_<!^a50izJDOD+{;zokr>cKd
zOYh#Q7ft>M*SU0_=)DG(|H-Y5H&Zw+8J(clQ_AL<fLmIf^(AK16_$(YyTU<+o(4Oc
zttLmKJ#xiz1-Lf}T~U^V=fShp6{0q4AG!zK>`?G{mS$3ww3#Ok2~ixD%}WtEBej}R
zrIn=3-M3*9w$rC(NNgQcm8M6ej7k#0k@)nKLq#cvrh|`)y(FfI;aFx_QG!vRQP3n)
z)Qm<@UW?6*q2dyfURp-fI+a3^r;VYW4QB)Nmgj@W;B%P#lcA;_1|U#w;PrHf%w|Rs
zX}yA6>Fn%{Mj>{NA;6EPYzTpp+&Ipz3~=M0Y}~eygx)&LP@KAD139RY1}Niy`=O!y
zX*C?>K*^hVtf5>Wia(io>y^IU5J9kD1CSQ)fLGv#dGEqQ5FCq7YxnAXA#3IVK6W3c
zbMz%nuYs_*fU?~GX}|86?}fLZcfJFDsda+39_`r3#Ln8_;~Z$>k-FMopuOWqq<Sn0
zqJ}3j{OwVxBEbkeMoDF%3B&so8!>q7Dw}qgA~CnTR;)}KSI43_Q^EX)#Y>m|tr9;k
z1DX>}t{T6uy(48RSy&&WE|D5=9}=qe60n5KN}DcSPQRdSDo1J3r=0tz-}Ze?pAyzq
zRWXvxhP3sdy=kCM=vCAw<f_M6wzycgw!g90YSnjpa%2F+;>_wsy-*R7vnE-rtjQsT
zLKxN;NE4^!4izL*I;~=MU3gZkGd!b?Z52`4HDKQ!k5TT7%#6iU&rYS^maR=Z%(c{!
z1vL``>yK!jjmR~|6TkykEd*KhN4-`1-f0Pr=s%Rdz5rI4)g3j38#F1+YUa2URf<L(
z9miCqJjRgx^}_h_0A19OEa%W&4xVMBpDgf7HfspYYY8pjQEuY20%^FVD_5{4TP>_f
zA$ezw`f4UD=%KV*MYVlKXDmGHAyG`}tg^@8O9*H-VO-ax^Nuq`g)-clQWvzF75~Hk
z!MAxKF{{U9V8ucrYCixUfZr?VK`%?faS@mr;xn#CqptNg)-|pRRq;Pr9iCLjw(=<v
zg^Uuma@lp^z6gGwF9FDgAQo38C-06J4VL;&hYgBc+H_9Vx?1W)a0skHYlpR*xW!`G
zD2M_}YPoVnL1968&jU&h%mJ}@Qk}8lmml7GrN0+U>t6?l=J#%V!TCa@Fpu&RemuC6
zxktO-p8xfo2c6jov1?w9n5ox~kd2c0^b)d$QSKJhLcUAgEUMJ8h#oEzid?dYfUIK>
z9c&Rq-Pi|-OH!I=;)r|NAFd)t4~-F*hldsH$yO^PX{%JG9!K%8l%3(811=Q{JsbX&
zP#*6Uux95b?K+-gZ1X9HSp=z;$gS@0S2VBSqIFoM%ydkvj5baQy5kh*vs|EP&?BlL
zlING7Pe<HnP%5{|nD^}2|HDaX9SYE#oxJrZ%3!P!VGFSpGHQv9DTFAn^l-gKDL2V+
zd0Mu8tTM||x(r8p>zE4pJ|b67eppVC*5K$yJC}oAwfW``FCOU2Lx}~IN^2=c+gvwH
z`3QVd45f;8x}=UHcLjA>0}6+LNvm~M^0*ETH6(qFyk_HVS_-AA-Xg0csZFKG9`v4j
z!E%nCMq%rG1Rgjv4_)Rg;TCc!6KLoUdf|WY?=1ZL81;ZXjLR?XERo3sGH|@7^~r8L
z8#(ekWI_ND+4u*tFB`Y~?t6D}!e;4L{(%N}vp-Ecol$!5PjZwJO5W04FDVGl&puQB
zHo0pZ-bgMl#FqzXNY<BW;KAa4xE}UgZG}r9_=ucmw+9Ut@)@O#Ff_Sp0>O@UX>Q8r
zBgA}{hhj?)@NHT1GYeX!f4Lh;;<Phk2jH@a@>Uco&<IS455XaD^F!-<3yA<CU0vFx
z_Gv9{G2h)n)Bg76QmDD!TH9O~y0py*;}BG^Yx^KM&IzrXIJ)K_au7HV+&av5*ayMn
zV#fhwg>waRAcw@Yr0N-|3(#BUn`zHwR?T#93byIqcLpo!f<a#q3X-~lge*X0#zXQk
z76^j=1r8ilTA^&Ux=l^$Pf^pvRsJ%OCQ9a6*wO}XZN}K|JY0sAE|z-7vy9r#N|{aj
zAWhq64=5ufPA!MV(FZFeGJuu=A5pj7AH)ZOTE(|eUqL@IXeW(H)$*&D5Ehpmt0q&I
z1LaDijf2S04}ce!(A=;;HIF=ASq{rfPybtF%(iK(N38wtD_dGVP}=%?#Nr1D<qj(%
zFnayCMM8f-dky0Zo~3~SKc(07LGSdMeEUvvg+LP^@Pg5{a0-%A=WtuZ0V>PE{j*T)
zA7VM7=m2sc9j<}BXfCaI&(a-zb@5?%_#yCn@c|erU<BgV+#k6K*_7D{?UJ^I%6Ez+
zS8;K?GtnHzeopz*<L~QRMmP-uT=@NBco?QpJ9dJt)91y)R*&`Ggy(nX`b+XU*3Rnj
zYM;Q}YiH!OV=EWJ8VG)i^W!u-1`a`R!8;Bw48RpI&C(u@^iAb!JOrlP&u6x1HNvJY
zjtMsPw0Hx7b}QdaW!5oC`Or!BvF;+wfZ*u3!MsW6lIH&_ua!(IxmNjcluR?{4HBmP
z-DEVq@o2Z8=&A-6rIf4I#(DOA`D2zW>AorR&6Am>(`3K;h%$;Q?^d2&gAwaTp1^d+
z2%xg_$Bsu0_yRZ<uHF8!<3E>XH0Wedsp?zEt)cI#P_4z7Uy;Nh3Isg{UoL<H5UgtS
zsYT;gYXXTivmmsB08IEp<g8!@T^v5g&Y=V)Qd)z9%N5jfsSTs9zDv=O@0GPK*lDtr
zPDnH->Wjw5M!M)sMU#Xd(^j!N17Zo=LlT>oB}<FjWY!S}Hvwz*SxZ1G;TmO%WJA52
zukx79k4lU6QVvbelbv~ZrW}~KG@6O0+<tXC_$V8)Lg^3%2D0JEmk>o<a}XW`7ZKju
zzd(O$ff3rvgxH!4UA3J(3=XRhR4=AP1XV9!B@}@D5bS>&3LF44;YvW4mY(Za=g0<C
zN~QVe+1Z(oAyC3=85E{oBH?R<mgi~N4xPs6G07=vp)_N}jtrAQP}O8{7{ksa%`?N2
zMy{<>@`V<KCLw?Xzy<h>{09LAe<S`%@{IIz#OalSbb<D1(`jwHx^GE1Mat0=aS&Iu
zN`PC$1rxIGJiq<C6a}w;`yJ+4b{(Ry#7V42<%MAweAP!vuS3*iaQnp>N&oT;+yQ7d
zaa$MPXe5NTI$f$m2l`@7P2>p%!`tcEQ8(fSX9S5AJdJ}uHG9SdK87D#i~$+TNn<*=
z??M!?p@@_BEf+OjwPsH=$b8SrKl*}V3$z^YEG;gM@oRRWw!*E~`b%p&do4y2ue|f<
z-L?LRLL!|-|5~J$^aMtxH2c{5YS<I#gkZ1a#?(5V@M_1#fY+piU-w4ktI4jyjJ9_M
zEHLe%$I{^+ZNn^Tg|{K-^5(vMQ@%w()RM9D;e2otUb@(Kv1H2C=|U6F5UO>5=DTlE
z8b8YT$Y@bWL35i=FZ;_G(qJ0+(>M&R?d)~gZOnHmSEtrQ^jgmoOV_94Bjvbf-hao`
z?0Hs<pH8TJX8r@rw6kY&n>39!3Xb|Ou?u(}C6-0$)m3YiLD}0ao{#;;oLV3o^C7nD
z+2JAbn$r&z!!7yMhV;_|qhn-{c`Y;e^uO!Y`&OsQiWP4zkuuHaXd1Qm;Ju+QGY=Wm
zTEky_)C28YHge?Wa1xOKI6%k0bN_9J+q1`DV+tff=%&%n;Kr}mq=;rSabxN$Dez+m
zc$n06%B%m^CXo53eJ1Jhu$8wo=sAS>8y?KEgs2Ov+p9LrsdKv-iP~PBqopqEAp9G1
zsEp32*6>+${xh})e4CYZx_9=jqmx`XEW~0~k7exsbl!UVXdE2*_p6`3LM~^6Z<AJ+
zuE7-)<}!~nm(R+C32=U9vX%_qA@vHy%6696C!*7=_1rmQt1|*V37ci{l11VeUmitA
zI4p*#jHDt}P^1<dvlHFP_g1j=w5Sgx0k@fVpb7jws@EymJT4~LA}+HzdAG#I<t!Sg
z(2*L>sz?)CYt?FmK~0g5l^QizZQzOXhY;p_1r*?7$s<vYToRzOU4pU-lg;ozM`(A6
z9BGH)O*S<U^61IEZic0iNvkx}R<P>YBcuE%;P(@s8<iBLy^N~}Xt$vj3A7G8QywOB
zuhNPnz8Fg@k5EK5joKcX4u@SDB(Z<JzkAXKZJUryQw#c25p?2Z>m~4qwT9|!vvjK^
zsuq!;O`{RCM@33W6GdvXKOfeu%U;K=V^RGg5yR(V2}EJRyXCC@Ht;Z7Urq0td@k|K
zz*yZRr%}-)<hQ7_{8*Dj!S)hT^I(s&g?+rY$6aYE7gRk<+B%gL^7Dl}Cx;f23TYlE
zgD3JbSRNrr{nxVCz?|j-*h6#MyQUw6;K8U)mc%DgSi)7gvt&jJhiwl~B@*3dww*(f
znYuM&En&Gx;_GB-znk6_Y-ms`vr*alK!rqtL{G)!gmq>!Dh2AW9kq5fP+=Qo=XeOO
z@z3mz?muQ%wQ40vsCvFY8}?HUB=>!K3W<eHOB~VU=9d2jeK?^+kHzVM&cIWHKC&s0
z1A(OUzj!J5f3}QX;+9BCyyB{?OthDFciugF@#gfCWVYCEQSWX4cJ<Zj7Hv)kp)Z^z
z<j#ae{@hIPyGyGS9F|N>!<-tmcbix~>c^sVIz_Lld<o)JMdkky2%&+mfeD$6pj%6E
zPSFd;4mO3M782q5zw6sLZ0YUt@?Ydx4_IH4$otAmrA+deqA?)$DZ7a6gTAj&S5WBU
z^xGS6fmPdfkNJ32Ei9?MjV~Lyyo9Qe7@wC)h-D@+m4rt>dsf2xXTZ$m2QX*~Qj2=~
zBwVr)T_)BU1^CNY3rkWKRfzB;Df7s~b9V$X5|JmPP!<zNS4M*0j~9t_>Ju)+sXHOo
zKP>{kv5hh&_FwmZm|>-Y%VsOMmC$_F^ADD3l!@C7U(sk^;R)Z+Xx|V}>v?!Q4?*I4
z55Ah9hBQGS(en02g!0K#W1IdY64i0qZ(9HTtf=_&e~XKL`J5N@vtNpSU5%jEq2VQn
zJ`cf?Y|8>FK$M!Ny)YL(mrLaGKy$#-H~<hN<QzCb<$X&QlJ!SxmCmlm=_cnFPhMt6
zHpKsN25o6+Tnrb1o%|1JCgRrpeI(J^*)!GJQmpdTRoB!<l0B#-6)Wswiv%7D!^XjW
zcY6silxfS6$`1-h%o)9`YRaOj{@_?7Gc1EUje#N$#W@4B&)lyD96b%D#}RY=n@@Hg
z+qv|m`E&=y-w@OcHySMcIs1|P#MR(Pv!^ZS{P;t6L+g=-_8m!)<azUV{DoV^eg6aD
zNW$7rQdT5&_8mXd+S|G_6x<FX3G)WV&*NHS*_sZEfm6%Dd!r7K&&^>9JXIN%VN*uF
zUt-nJC=@f9X_ltdT7Bk9BZ+P>0Yyqy=E%wm7)l{<F#Zpj67qS`cEpEc&Bl`%hCiyL
zKT;0y5Tx+m0^dTw#1LQ>1P_UD9|X%P^;lAVdDG>m#?feYb@9xmQK~|6v2F~NaL$3G
zMO;=b*w6}N5R8$0wKIR*wO!+`<%1eSPN9-g&nnkz3G|UrU9FS3)gt%H1Z>iyam%W8
zYB-XvC6wz~^^`(o4uS^f+g8H~$OO0=WbJ1i`ufl}*hAkO`WlppU(LRDVfNKmz_IxG
z@b5o|fE25Ebf@aZ*C6Z0*Bp>!@hKlI-uuzi;=PL-p5_3)IHPbMGD1IYjhx#d+yP#{
z4c8sPZ#@(Gf(Iw#>Wm#l3D0H0=SAr|Rlu23Dd_RFs|M0yLdlOt>hTV-iYbTc(o-hd
z@ieJe%`7oz7r`Rniy!Zv6m*^cdj;3{K*vL6&MDTZ1u`_(hSqY{qV^9U1E3|r67~ax
z6|{1DZ8Uy|EUMD;ctAXSYcRMq+z=cTS3^Vc4mN~y7W(?)wJz6MH;ZcoSr)3xZCL0W
z>lh<P`jIl*TO)6zI`FIYTA7Sjb{9QN+vznJkbd5vYmX?K#?{*@7z{#G?nmEc^vk9V
z`U}^emq<yZ?8Ecmy6&EkoG1wjxLjL+!smx7>}(ZY>*<HpjxqAZgs+CnE2>>|QmIN_
zj{jhtvz$q*DWhm89I-=7xt{%hpI2SNI!>iXR4js^N=^pjk%>V^@0{N1@wne+oqq5>
zuihvoD2f8GI8R+PUz6!9-Be0fb3c;ieMh46WNyf1xhR4f>F6|BgH@qw;&Txx)sS<1
zVO7Cs0#zxOXGpUY5;B1-wUn?a782LsMe)+z9Hk+^A(0~-qo$Tk0WBOCi{TTA8GaW_
zK-QO2RoVyLwHglHNG8^@n8aFRC7orKci!hvWYwjW5rsslhJIUd>T|+1Qe+9esCr}&
zv0(Mh1YG`w_~Nvm<n6`cCTlbw<t8kiT2wT(MAxU&yzH7+bSqVgE^(<;$=;<>D!K!o
zhJ}KNthX^Na0p05Vb0pK0;2wf__75w1&MXn*5`jqUg%v5&;{r|AM|m%B?&ze%nUCs
zigKM1%stuh3XQz(Fp!Sd2>O-Ot7hU#nWaSGd|+yPDT#*a5E4TFWi)_Y$<R)Gwdj(t
zXzo``;3(&6dx`TIcS=j|Fwp3)uLIF}3iTWgcaBOqj~kc|6Cud_0eFPJlDQl17Hohz
z>JORk^nvc2+_Aa2r_SRBFUHWL{)nX><K{mN20=+IN<x#O@Y$sw>M3bX3bsMZZqS}n
z3N6kMUqNCdxa)VZSS~i(B0*KtG;l><S=qA|lBQAUhhDcwsl9Ty@<b;}ag);PRqoAk
zWzP@yf2G<V>d`F2lCHiP4Yrv<?O<c1YODN&-EN;UVN3*-UEdtlRd?HEt3yHA>TX-L
zxh*y#fO>Mx&;uJ*ivkb`O7h_0(*z1dXCtsJErzTrY=LvU(=BVHaUDGTd*VIoW^OF1
zpsVe8mNI0?wfvOl8W*Y+HPQrD2HcF;VIDYpcKR0gegxk@;433<;=1rmbp?ZIby2yS
z;3jF5D+&r2B1@DionOta+@1n|gpWS&e|!V;;!2DBJ!B07jlVjG4873(6q0!rk7lqC
zs$6N|ya4U1b^@(hnl#0t*O8Q!rDo<RYg2x~S$Oiqn2E~f)+_KC?y6z7Do;5VPCJ?-
zXRxXD76xOTtp434@B{dM2hxGe0=xy^{5QOXjC2|e^k>^XS>}e@j`+$>DVSJMa^1Z2
z(t#=2Yu})&l3f$`B7bL>eeyka%aviM#DYxq5qZO0c4Iv*zG4_0I87hXZWb}K9zm>g
zXU*rTX$3bXu2H`nQ*yKjk@P+1i8PVAG8ArWF_N_M*pBn&CEUwSRytOwPIyN*rVOz3
z$pLNA)EwNZJ0(e3Vdf+Jzmb~}2(~XxcA>B#3^iuNf-aj=17sGHRBAEHs3`-Xs+mGI
z8_5)5i($kFR)rLx+)btKhXif<H*d645QMf>IW^R4wApHsfk?a>q<$$2r0vQZq$zc(
zZ@*{*wOwXORaU13C2{ufEzk&wNsB`RP_t!@7!m*A(!2xN;6WVjy{^Q+2lm1^=PdCo
zi4AtX2ZveQ=%Sv`BiQf=(*u*?Io-zse33Bjc1WV6>*$o<;NU+)q5i8W_wjL7zebNh
zvl{&7$i@Zfvvtd1!s#b{ydGJv%^~u6TrQD6Y=QjU{zq5byMoEdOQZAe%Zg_0F0~@7
zs=xN-<+(7A?@NnwN}o(T)V$RM3^8OU($fN7DJGJ>m<?xxb0d6Ij*Y?R_<S6GIZ{rm
zA(Lxp6=Zb{o;JNKa}N^ZL#Iy@Psf4j!bQ027_?Me0B}-mSPFNy%&UC`_N@Vd-GBH_
zUi$;TE_t(zv}_Y!^#OdkbO0HcKmIisT@5aN-Lk*sMrie<)`P9DbU-$Ihc~z-+8i7d
zS2UWugU!*LMV!bCKKQ=9eziYPzh<315MU%~z@MY#hk_q`x{fFkZA-Y%K6?Mg;{DTR
z+;v{oQO+$sKl@l+Iai6x!%yy-mHLXa0-fLT**)h2QCDH-veVN#XYasmOXwAfruB`E
z%3dv7u<EewMTUPz=jXiQY~@|Jdfm9ZH&utq2hYzwyh=yuxa(}4w|M{8NAH6-=vG;<
zmJG_oOOBLet^&wotd0X8I2R9rz4JmX=L}bUR5UQ6z_L?~RRhayO>cpz7gUD}J~tN@
zymK;36~Nhg^X$Di;5dN8VsUPaV0aw{Q#V|I0S;edQPKFA)wt3py;-ArM`eAsWr5cH
zOR~|G2TF3^GFESE$;#iGji$U?n*Z4-Yxq`M7AXDz{tCgmG<5FFDdl4=)_k~ShgEq$
zcTB;^{Nn#uuYl!bWarH(7*-ObVe-#z&MK}gDm3$|a{{1|2tR^A9x)7x4WL*L%JuIz
zKyPX$H8Uj^q&7Evy(BPuA%Iy$W$@8ACz07U9aqA1u7LG<p0lu*bFhij%DytFE<;*z
z6;x|M5mZ$fI)W5Xzd5M*W**9tx6o3otCXyGzm0%g+A9v&D~^;GbE0GBfyGl^lp-3v
zB1O9u@{y^=a4U1{Fg-k*xqwsf^6=0Z{8cR1;7R81hYa<xfg2kd3m)cfz2oQA;)9Oo
zQWLbRvmX&Y{npmo+5%<OVlBhf&^&fRG$~+*84Q<t<2np+Wpa1eh_J7oID}3<BL!SH
znEqS~*2bio)R{OBH#iHAIS04799gb*QVZ6h50@cB3aBz&p$6IGGWhC23fO2|jzu!N
zRMuKYV*zSqjxU#r4=XweDq?X@u&~UP@DJzV2xs9U=b)O);WepkGR{XCipN!O%OeWF
zn5qm%gY(#qvlys3bVDhZK{MxJIcH%j=U|N%m@u8o;4&#-l!3VL1izI$70VRxN0!B%
zS!u>{0ZbO02cEOgmP?^8=RiHBo>z@J*O{$_*_o`26;FYOK`BV`EAuNss(LGeRa*zu
zYhA8eyOrs671fQ6*(QytJ+$7XSe#*ReN2A}XUFyCN9!Kt0x<Ojt5Sw>eR$j$uwc2~
zv>8@pmB*+IE`C(1%z7uq2$DBq&cY1h#%ii>XV(G!mJ8A)awVJ|PqaoOPV^}z?IYs7
z4P42fC57wXINR}sgBme!-7}Hd$WOg>s<Q5pUGjF2xJcl2eKyI#bURpbPvSaPhlC4j
z8~-wwqCNy>6*z&`Z*Ro)Fs?oUqOsPb|4xeWByYr|QEmE3uhuH{UE{wO8Jfa_kMmLo
zJIS07f8CqeN2H3oCCpzL(Cn1QsQP`_>!VWL?@yHQ67jOuB$`PUNAYjNn{K5dzF9}?
z!TXjBoNRWh)cv7YX}5}BCyLvaxB{k5YOS(;Wta4}_y8^7la|?g<{V7lCx?R`-4@-!
z3ok)kyS+$BB`e7=AQ`@s!j97ZB4&2gsXl7x&&rZQCh>M6U$SFnvm43j6Hg_jz4Ls5
zQTD?WNm=M49;O0kVJYWeR#gs1>PdYcT$dVBL4`BEnX(FYLY#*WoJFEJ_zKdb3~KD)
zN%2nXM8plHgySRq2V4WaPcgRmMJZh7EbpGxaI0|=+&*RUPKqMad1A*QZm_2M8fzE?
zl8ae&Zgxyv(SRFWMdM@ukzyjr+X-TURHRdDo9esU=I}`c*47o-`R=|r1imJl|NAmF
zV@&=W<fOkBZLJn{%le1z<zj67z-jTI)?^!cnf_Cy;W(-T`vy{HuMZzWc&V(9nrmt4
zJxKaT(0a{X5@&Y;ecpP?ZDhCaDt7VUVGXn6JO6v#W(S?0r^`?Yw15O9&)htPq<F$Q
z9rvp!m$_eW-RK~3XQE^Nj=R0lWQSsIkHhe$MId3j;QK-ndO;Nm8ew`%0vRm=6FcV#
zu98oj0X1h~;s|<f{)FrR)606sATySKowP+DQgBS!Mu^e}HsZ`?bm&7B+l6+`F@9X_
zgzrVGWrfO9cLOPCSD<cge+>J~NAz-z(6TaTcM?pQxl1IMW}%R^XrY%z;!BdWgYdk%
zcP?ksV**bK3IphB+X{2(>YOMvFT?#;_HPxFT>iepKK0$24XLlcbN|wfzPn1tTd)1v
zT15hmo=*mvbhn=jGWPDS1{)%(h8SI*4b|YzYM3#|hsOwjER2J@Sb$N!k32a~&Xe=x
zJXw-GdF)TbPk*{Lh{iM{m%c2$)YqZDZKJ+#R6mx~&;8V|Eki9!ckSI`%RO3*dGy2}
z9ywu3`IS?i8N$}0imP8N34FG2$}5*}N|W;P+(BRT&L^nqmoF5;UX`XGe+qkPo0{vo
zjgTj<ghY+nV%U^6;m>=A2oUd&fq4u<3@(Wf@c|Jk-YvsoIE4sYajfhxd1ox2v@FVp
z2;590afrQ&kJ!7tTtzG;78}D=W1o9AlEfyHzz<b#0<L-d+BADL|26OJP*V;r&KB9S
z;-$J#DIZWBzM|r&_%$ktxO-(KiS<iJ3~PY3p<~5R^6zfnul~dSV@kP$PhyL5*L;1~
z@N2(g+LSKQAomsd2oR>(jjzIRb@UIp-M|#`Um>T|84?LcI^MftQeS4$B)@5LM5I+r
zjnjm|V`yWww@=N)evP)nX60$^-ko9_k%?_`<|G@W%goNwHdefoL28z9Wc<rA$}*b7
z>D!k?TTAWXU1G}@wUIyaC)(mVFsN1GfINBO*!zz-zT|QbIV<uB_7SV&K0><KGeWW|
zJx9Fc2OiW`Np~_;>gse)?U}hIqYpjvD?dyGdtPy-4z)Sw8UvE$@6AQ|2J$e*eg!`?
zKm-!qzc=teT{RQH7u)!=d%O916}N`RKI~@mPQu>3<rGF5|Cn@G>W}ZxN1a?(@whW+
z*w39RZQR{G-%$CbaKcaRyBSH(&foMM`xd<EJG)m%Kec>{T?ezV1ts`|JlGeFsY7zN
zYARcmo+q4c?zc)>6YNVs`-HwRVd(!O3av(r1bER%<StVR^!tr8P%hXnHOb>Re*Ge4
zh$_;dzM2~0k({(fOUK!=XCQR7{KT4;+w%I+PCWT3?4N-3V?xg*X=Q#9Dlkb_xT=Px
zPSIWLQ}mH^h5FK;PJgm4KJWhYnc5FtIQ%!i+VX>E>%MkUzwco1yRG0a-?;DLr{5m4
z=J21DPsRfG>{}~;tA5{-<i0lg>XCOqH{FiUym{vp{}p^l+xz{I|8)!e&54ZwecVa_
z;g#(Ex}PFTkD30#ISxP%$i-vXgJzd4q)u9<Eay#9yE>H18k{<pah~m<lK?DK(>L}S
zdz=|$0^|W$0+7%4Jg<G@scb%#P!26o=?5>V^xE@hi=1cky~Xz8F`L>KD$4p^%O!|p
z;ofqqPSlsQ8n_xt*+3&~7rN$@$ktO%4y~SimQ40bo}YAHlVsb@&u)OL=xho1Y=g$K
zB#|SetF$LlYRPenCtF>~(=I^nibs(4Bjl~6RW@iom6R=^^fViEx}2^F$)U)3u>q^V
zSg5AI+G}}6nQIHk9+rGgFFKS_mQB59+i5JL*|d;4%a*~SNb7qBvIeKlr3dudlK@&s
zo!)!>6G029la`%2mjU4KBY@`jb1c5iQaRNUIu)Y1Mt~av(|juF=bXVKZD;XjQdq$<
z?L2<W_1^t>F02eSh||N8o1`}^hgkskRw`{2EZ|kuTSg7iFgi6z?;a&LMXgF&KVWvd
z$L3zp@rz}MIZ;Dd6IGKL<;O`S7BW3=-CUbj<Oofe-Z$hPS>^a=JwLKpv+}v-vL>pg
zN-|eHbPxmMW_I!X$hjzgRRhPzcji$WP|`GV<cw<NkCh_;zd7bh2QYHAcqV|FnH#w9
z=3*^?gR4G+R1LRv>IG9%%=W7HR?cpctik<5zj|}tAh)zi6U;Na9=?bGvP9?0ycBYB
zehC0q&JuoEyB${}T^Yo0M&MqPw1XJ(XSr!1RX@#aU9@cNsG#j&9%=EuCn+`Q@98Hc
zp{RGcc1ISPnOvSRov-rYlj0&}YPg+msS;=IT<@N!ftskg%#8Bmr2JnE(erfE^V|Pi
zGf~qc)un?I%=e(CCspIrn<4;yzXqbF)s>b<i_iC-7jvd&qK2|2swOkacarkBmY(}r
z(K9P*C~Kl>GW*rrK7zDidTx1=$unrD=7-g!s%(pV&a=<X^LEUQ2Qam|+PHofavM`G
z7;o@$+Tz(qDm20@s7k6Vr7GDnDplEWI2Mpo#F1=2s`Gp68&<c9#t_kRURr(d)qm$Z
zLsk;6N~?-w{h9ow#LHCCxwf|<r{)+0TkO%(_xk>r$<P|7s)P;9$ya8G@_M004wK^@
zp_`y4&EgPbn>&)6NNTSrwc2#9a}|0OOG`<&z^`8aRVzBo5c5=hw*9khNSV3+ODMy^
z3pPD+#V`xe@YV+Y(u*}>0e#U*N5n`A5jPN7jyK|rAU{f0>Rb9=q`XBHE&okJ?6ss_
z=h=p=Tn_LXJukT-hlrzBaFZ0zAd`Ip$?Prk!lCe+;?!%(xR&1iO5J{Tj3+50Jj8)t
zRvk(HnT%zrAS_l}f966-&Rc!`oX%pG0G^kbDj565EVj|)5IjBbCf-{Q@5~Ha`0@i;
zXzSG($u#9x_ZShUngFbA_n3N78>+j(7ynSKkh#mS;TV~kuN$~fhQXk!f7AozbrydG
zncufUX!%~2Ihozlm=(GnF#;H*HFctfJCEcrp_rHPQ^#q=Xh&~&US!MOSMpu?M(wUj
zD$Cb?VLOOZkUssL>CJwhZAY&*7B$Z6c_KvbRx%>*1YzBbTBM#E$<x`^d4rc0kDS-N
zW<w*ql&-h*EqE(>7-j{(MG$6$y%SGbnjmmR^I}1RcID$bBA!J$DofYwl(hCoXfTzd
z_NYAl^Q1P5@S1^&c|x6xt%G$HwI1bDL#d(}#M4$zU9AP5pwEeFD6}q~g|PUX_eZWg
zQ7oBD&ghdnw1HOBB0O1LNprGhR0G~XG<v9K{f8#@w%_Z-1_})U{Cbs$XHhzQ{8=-7
zCm7QoZk1A9SBupe@a4F?XtWP)z1<_L(S4R{W3|WGwyIId`7=(a>f&Jd-75}DoB1&5
zjXNza`h4Z&P1wngB=mDtT&*AJm-f9^M~_x)d1S4g-rHZ<&v(HgdWUW*eY9ULl~mQv
ze|m$u>n@fCt;n&pet7pcp<l}H+pXPRx9aeOUobUPWhbE3iKjQan`Rvm?;{bB$$I^u
zp<dO)?1TSj0006>G)Bm=nvg|Yy;8QW?^|7{o-9PP9Q)0q<Wvh+_w~L6FNOAnzJB@(
zr+;+1SK$4X@aJcKaOQ#j_xdmOkE}GZDY8HEH}!Jh^uVpblyEdApd=ebXac=MYVy)B
zg<Rna2U|JDGg-nmZek&00ZFk*qpX)>!ZqnwK~rtIUPA%ftLCufb~XB@yS?29{9<g!
zy<mnq9MK%-qnX2bElDZPo}82NbY?mmlSn<W=EcNM_3W8*r*e8`e)i=TB4|?Ld-1PS
ze7fR$6<4Q+)2r$8$ZL_)BL!lL*jxEXWv{%ae6IYk{CVV)k?W(eWfJ+>s(!X7JCohZ
zibg*eT^kEmMXEqeQG2T&ss4QR%a#3=i<Kvp;<1xsx5ktG{pz0T+3Nl3hw%@_*Cql3
z9Ft|nnRh44>^JJZuXe0<qxNd@&B?P<%k@vx|81SW+~V8(?uJJjzTEIV_2c!M^>@?n
zOrM_~%#?&*YP;F?dgiT}3o{$D*vju}e>oRjB}jQ`M!Ki@vF0x}AMe=TajD};NAcXr
zxtsH*+>m#)e7@ya=ibg|^RLdIp1<{4mDI1OYE+e|!1%Yx5m&on!TyehDp&`j@GQCr
zU5WOiW9XUa6-WkBh!7DGVnPB)7xELP2vd*Qh&hZok4?ai#+G6^SS{9tZNpB*F2!!Z
z9>ji&{jX$X2~t8YQI^C?HkKSJIa_k0<kyn_aS%tv$#GU(Bd!nk821m@@c6UlOi7<D
zca%8|kTY@c&@i#{VjxNlb>tpuuv_o8oqP1Fv60raR%r%S3m%2X;o0~qd_BGmKY(9?
z{|LVa|D2FW$R`j9Izkg+kZ^=>iSVETRWYk#Ma5vng^D}G5yT=Qi6|u6h+$$6aTf77
z@iM7^R6&Z67Lj(7?vUP8W>%UjmsGB=d{X%jc{tfiZYK|rmyoYf$P@`>DdlS_k9v^$
zhz4m|+H~47+NZRqbT(Z>ucJrkee@yv_w=6`LB@W@SB!^Dz(g}!nUk4InVXs4vDhpp
ztC=;K^&x8?>n=NkUC!pP&1^rrlRb~Un!TO<mNSZD<aBY~<DB9=;6kpSyMcR<`-Ydv
zgS>WLKW_=|Bi<f<I$zCS&;Le17i<;W6rzNDp+`7JcwG2Y#1tt-R#8~gEBZq8wdfCV
zt$2g@dx=J}TyjjBBb_JRBO583DcdF|$v=?qmY<M+BY!0SQ;|><Dk>EcMU5h)=uym3
ztX6DSe5$yjxUYDjj411sbCoNVTa<^DL&|H)AC<3FQB|(0OvP1ItGudls+p>ls%@%I
zRbQ$eK0B+4YQ1{7`h|wk_%z2gx2p0J_;J;?s$aCDv<z*XwpF`OyIy-pdrtem4%0<-
z6Lkx8AL*{@{-{=~8P&>adv#;=|9V`H=&5>{UjK2p_3iq8{Sy7h`hEIS`X~CghPt8L
z&}Nuwcw%^C#Eobp)hIL87z4(bagK4Nafk7Q@v5oNL^qjDLDOfZE2jIVe?d@VWap(a
za3aJ^gen+(-NDP)xp*nmYQ|Pu_7b8j`LgCoGgVk9<bMhw%VTSsEycFMcETRDKdrOZ
z?W?=v$afGNLWkMW<QQ;#;7oGzot@5Q&WH87`jf7F*HYKF?lO0~`?@F7Q|=LZOrGVQ
zU7o9+*WQ?y;Z=IW-p4+gugVwlUG<~<Oux-P)xRl_7ElGw1s4Sm1kVI-1b+*@31K00
zh#FFa?4j+UuR;$(FB<#?YeTqUe8Z}StqnID-h_#8Nthj0hn?Y;aDRA1_;C14_-W(8
z#;c8w8ec^sk=zI)Vv6`8o$BSE5m^!0895#KHu5m?Z&SF5(G+Rg({!@wo2CcRl4vm6
ztsba3(H+rGq8FpLqQ6E>bHT8A*Lxg#k5lh)Nqi-qigWSTgG<0+@D}h<)xDj#{tSAP
z1D@o=nZ<y~?*Dj?D~PPm2!I$s_s0<bWBGilgHQUubf)m}0my?N!n&{53N1aGc^Y9{
zVaDlSCtznZx|@K><pSur@hT7OB3_Ss$6$yU5)LcOfi(IYWkDzZ(Nd1s1=Jpcj5=fB
zQ+Eu1DHcNlmB-LAEP@B5Nu1?8gH8L{q8iW>D$UJ49wAL7%#tfb*Za+@HB=ZM4i@ws
zu5)8^XD-0W=c3}%wOQCwKPAVn(o;DCc7cXZMoE-Vth?`c{xcX?HAH^nj6$$LmkfaY
zHmzEzWs5~GCsl#p@E2hRdEe)Qi@DINMIcWjBrR?t5VXR;W?DO?m&9IZnrKGEBTkt8
zR(y2q{#tZ5o88gX8S+DFl|^2knFWG;t-LbX_{R0FIUJT0feY|9X4gY0&t|#SuHXyU
z?`Nf{=_jU6T$m!|=wPc+57P+*ImAe(ifLcu!vvFQX%!ik2rhD`zycJNObx9m&Cou5
zFexU-f+DFdVs3T3>Igz4!Mc`1lDjp)e&=?3<6M@4EX&xV>(1L(w|>!T;8;oXz{zN4
z#cPihW>!23VZuG3sa5P(sV^3yz}m$e=yz*Qr?uP_l*=uq4csNv8D)eCSEt?OVi`=h
z<ss$dm3<!rAEsI@3m3=4Txj-_m@Vw6_#rlX>JJmo&sJT@8yY97d6K{##FKw|tm;4k
z`7!<z!BQcyG|HXQ26=yOsagdQA-}*)eTUT+(a`rbt7-~mSTTHixBvehSafgy3n{#b
z@c)!N`m;T=B=+zV`1GGaTSO44cHvF$mIS0|z$m@z0fjUzsh)2a-8dS$bL8BG9=boE
zdxmiL>$4%!{n66VoIs961YM`$0LC9YQ+ANcXN={GuR50ZK2t2aeYQ`Tudy`vFpw5y
zR`%b-fJ}2nK5`%(i`egI@6{DdjZJI@jl#*CjVmIK{YU|PYrM}_UNTdqgCKp?4W8uV
zGiofn8fv<=SR$2`VoknIQO4?8tuL?d>9ZF}@NuZM$<UdR-?pTmUAoT@qmkzS|G$_2
zvayE|=dn@r?txtbYNaTO8=qx0Noxpp2%XkSs$J!8=pX#j$g8j4-{%+e*kv?64n%OP
zLr@lo$dh`wqxc{rFRC^bF{TVyB$_(oVE9lyvkE90L(Cg+bh>!cr|dC4>1WI>dHPaG
zZj{vx%lf0ggumw~G~+&YMJu&LLN_Q}mt~kG2bE?5-voPe>t91dM#uUyoBq~PEjEEH
zL0$vBP*8G6e+xVh1$G(h@rok(rnup5ty7z#xCj!rkMMiA1EnG^5#AqWa16BNBX$0D
zNXh=I8wVI-FZN$OV<y89<tz7(p;^`iHFy6>srePcG$D->I40Oi-rs^m@40s;Fvl#Y
zN9#O0Cux?aMhE+^XMWZ9jk{bat`9zXbjJ~G9z5V5?!?P1Zcs@-=zsYZr`EoDa_szX
z;<uNN-d}`3Aa`F+pk+F3h$<N@(r&L1>f|<3c9amyI8?|+<W{D*C5U~Y;)G&}T*&1%
z*MclUl`!ztSEy5=(VP_2l)c_>9g}@zzbipiNGnl+l!QW09xvR#ytx+aCgRkgriH(J
z-NBMi9O-Sj(b+YImd=)7q>&SlZ)beGw5z?SyKo4<oXG~rc;T5~1~K8lFtY)Cw=@PR
z8xM_s;u??t_wbi9j6>ofg?08=VvlL{#+L;Hk}`W9@{y*x-}_{Ybj950?U<~ZKQBW3
zu^+zobrUzQ%_TfK)RoO|(WE@czWrYy5s5(Rp`pm$wO&dL2n2~P0z&x5kBrLje{f34
zHnB<%(;&7(IXq0KHtuTL!hM}W?nX*+v#5~UhcdXcDLX1SkQS8OAsPUo6i7(=6dBGR
zkpSXwaA>ez=X*?rVSv(JeWQ5D*XDbs(`X07mPUu(RCkVbHkTsIZ7C~QeKXS+tt@XN
z0=@HP^r&x;;U0mW;=gy?)83Vj-ZBmY02un&|FRt44ZZ#`0TVC$kwgKL1$s`=L7bgz
z9lyI!YV5EI7H~$fV>on>0anK2m3GiH!?K<w&E_$M0fNMU=jP+d94oGn^xKCLO8q&#
zd;pz$3Ux(UAt8NMsT;yI8wX~|HrGu;3?ef%J-M=)!2WPgG5pXw4HXWl#C^`^U^_AB
z@~uY4(r=euZnsf)4!|zJ-Yc9-&Y#&P^D=Zk)1L3XKj$zpzxVq`{qvt6e|{p5$P9m7
z+tNcJ9#T~T7IHCpxgr~VWr26w<;1mqwfNH;K6vSu79*+qk{ws|ZefHyAj4x$r`6ow
zC;_Lbo=Q!kSSX=U<crHApU<ohOGmV}X6<Czq^S)JPUDkQX{k$d<9)SYO+B9@Y38l4
z<IH6#v;LpdTFZeU8cl5tEkIs3JuE*}`vOyf$;)Y12%KM+7&#`gHO&#jX{TqJ8h@QL
z))ZSsBE7;;BNGFs;Yg=9$x0+s2hn4whLHnqYmb+)O5E_HM-JK7@9y9zC^AR6QZIs?
zrll)adf@$41t)XW6A;qDadsn3x7pJyuuP|o+-GSkH>4)+a>|Yp2DT15cfflJIE()5
zsf*>9<9XLL<=awkLv^Cch~lbnTF?Wc7>`Q!NiXRidP3MducT;{H}1tFCC^&ZslZD&
z+oCueU$JKKi=Z8(t(-t463%PZD-e9H)dJi&Nmt-zl)@JeO;P-aa*n;w?9!b_kwj6d
ziz)GN{y>t=wU;}To9d}Rh=eyEEx%r0EGBV_iy^lIS-gZ6C7wUxy77JPe1<$NS_6j+
zoJ0k91f>q#q0#y7Gk^NipOp@&;8vf+Ji)<)M&PwY#l)h61}Z9nnpAi<L1bK@PuKPG
zfMCe6_5}er19{wOQLr)V9f_&<qs@x_2B-vU2kn_F7;UGUukhm^{%d0FdtW5pa{3>Y
z)scpddl&I%fJ-Q&X5`=8y}rbUmH3F&3y<ac-wQya$RtUyw;(4I$h_x@ak@|VNts^l
zYJt_s2*SVdx5D4{R%r}ok5{EB9W0rASsC3-Uzu!?+F96-hemQ$r;BOR`=t&0vW2(W
z^Ib=!Q=6SF=S%lgZX05rG_Vr&bTz#jYCP`ATh;5kys29YrYj9?dr9RNYJG!xt>B4m
z=Ihzh5)Kf7a;mt7n5Vl5OgCo1N4`yYWo|E4(q5vH?y^<&Dw<(k;`tC+dHO0iMSK@`
zP=dT;K$tP($_Qd$rBj<T8?!1T#o~Jx)PB}(ReOd)*>u3~``#UE>KgGHERJ1%_-h`2
z`RM0v*&p_EArx841WRI>5NU`%4O`f>)Z~gku8Y%@SJ(~tZG>=JzKYKMlM12~cnmK!
zR7)g=fQF<M*{cK`2nd_tv@?xX&oaiuZj<K>9bM(b(j1Yr++h$&#co}0td!L#i%q_p
zNw0<KMGK{*&IQ?xGlybWiNSCk6(q!4<D9Hxg<%wb{lt##Z=Ark_o}4Wi9IW!U;GRk
zDL+6%06q3%YcfUE_NVVd;2_53P^{J<#L!C`|Ij|J{L|WI^6JgIF}6!<gxsiZ{I*}`
zv(1kQgXxOjn69MBFcr`)M4%*$fOo$fc7X(07dx?>jcEgWNhjQ*XxB|Iv*rcWhpE}K
zWiFM(Wwz7|vpJm#xmC1@yN1%Dl-PxbTxpK|fi!aVNImxsHD2&TZKwmxO)$S>)F6Wt
zu4~AUX!Be$WSQ0+;CwYwBtphk)EZh5mP)ySu%vDFRl+9DJYLa(QB4U~EBEbEKr&V0
zRG++`27y&yLIEwxQNRKwFV1w`K@9$o<gsGr!~YI%>imXyKW(F@i~FK>?@(Dzqpon2
z^1w%?FC;0dohu~#D<PK7d4(wb5{i5d6?o`j-zg8BhnK^K%B^Jq8)uPN%`p=eO1Vda
z{8uyN`nm|H!b1<cFMau(hYnBvE!uDi(A#LRu;eJWU*1NKQXm7rfejMya>!N4-lBn-
zX=97J6A?z15HXfMbql29b}-#1COeqYVy_0hn$E1?@QG_M6XGk&^f)$~!X+Hv3Dh+Y
z{@6_2MhK@;Xq%$bTJA5jp8Fte;cli?+y=^M7iGa+Mq2?an%~E8C%_>b7C#G{JX$~N
zopAplX3gZR)Z-x%IL@%S53&<_mrG5B0KJ~mIe2t4b>>v%`iQsgL0VVAU>JO!=Tw|D
zyxGgMsrL&@FyIUcZY3abv_RQ1cE)qOucIyXyWM1A3er*vEM_@qLkuk17=wYf4p2ja
z^^Y6P9qjQyd)Vq7h`j`kaexGdUZ^K}*l-ai$@C5a35E%)A;bg9$j;ykZ0JSqTZO~u
zikwfKy`fmV)s^7bim&oq&PUyEQQ+Yq4hn~9Kz0J}unJ5bCI*NgQSKp>Zz<L`Uj%Y!
z8!!iLilK<QVhEzN0U01hDAx-C8UF@$E;mHIAv$^xCKliwvMZ^V`1k5L>*xN2zd#Q!
z<3pymIS^iyCAOV(+TwFH4Jb5k8>5L?UGfxjm3*^s*+(bj(jAXQ5{{IlnM7S8s!!xD
zN~EMNGnf2g(gbih@5e9b_#{q0{=vVQcyf#c#qfkcI%t`#BjV95ob<w`B_|&>-ohTJ
zZX*Vh^3`<i5=utVfwyGcY=0BFZHI3kee0)Z#x6i}0qJJPBewRhFCm4?QuinS^YYXm
z4xfYDEC-dwz@_pSe$&7hq%<G~4NZt4n|6y~DOC^Xjz#QkWyAPevu+1$2!FWhP+3Th
z4&RgI=sTq_G~8af9oP%q-%-_dF~wd#^@KFx{ziyJz2^yO!a)w(;waCiLulF41OjXI
zLbiqpCe659V|njuMXkjmX}Z0=5IlD^#lWx(Eph)FZ861~)52gip?v_YscM<Nb7FY0
z*2ci2VTiFNYHE9zknke&C=EKfpy&LXLcaL4Fpn=G`R2IANr~PeJmvj-?QE`F7~Vl<
z1R-kHGOycsSZj^APWJMaYc?Ch^9pWEI9`YlB$I74Kma7w9w37~Irool!gU2B>?avs
z#THUpIpZOv;uSPr`G{dzu7l&_Bdmx01AEH9lN7|)-B<n{XdpT|N1SH9lJ)l-qQS)0
zrVRRMl2W^v$>z?sC-)afNT7EZ|71ALt$p9Q#C+VA!Hc@kH5yvCat?pL!ujx^tnWMI
zw9k;EwE|kKw)|?}<d^%~D1}GbMd`GTyPlf4E2)M18g+6rDF@!>wLWA9rG##KBs`M$
zFoN8i<grmyAb!C6(+=<8ySZ&&mwFB!%R0^i@V&h4T8;YfyowuZf_{P`G@oxYF6dnN
zT>*iWEH3zbdN>XQ4;Q%Mf2_O9^7g+0MG8s6iN|#BFq)GyqmH#xI5j<_=5skI24yd?
zeD6b%QZ^Qgsg`)aXAv!x6E<+$Fgmt;Z>89;TMzq(O8Hj2m?oTEFW92R;6U|Yn1Rhb
z!^tZBQZAoAGrP#8YkK78W|&mki#lyCPgJd4z5YX&43oj>RO+A4jLv*1`$=dij(2L0
z%95|=Bc%3qoMJP(qx<c<4Eli$`h{GfOgqJ>v@r~4N~O6cBbt-&ybU}yoLs2sXBKsB
zhB+)BVy0AmOHp-FQI&M@x?$jKH>o6JaIpI*)AK;V=`=ee5#d{?A|8#oht;I;usS}E
zH0wR+wr*3nFcwdehInj?0u37xl99RuIGi@;+}gruZJmCa1dQ%5vR$f^OlBl8=D&2Q
zG6ny?Ad_342Zb<$tp@$K@9GW2I<DG{8HG)`v8v@@V@cRmxQ{?asXQfx2U+SXpddLh
zmTnuO$_mJ`$P*Rg{(}@GnM2zcG5t~Q`^BVAY(+Xa3|Rj5R4Mm2OqJZ2C1pRv4W19R
z!#O2ErN@S-w8GKICSu04%x+S^)8=$q!`(>P-2SwV+e95vO^6~Y2rhs^FOS6bU21~+
z@WlNTUz^!NzSLA@8Fg~{e`lP@{VpoCv3xFB5WS-1*G^JO7uHDxlH;b-tEC*!JbE)A
zA(Ty(xz;O|3bu|dWYVd!0<_z@>eVSSk%%X&;zDz#)$+4geoK~RLs=b2<6I?o>xJJg
zn7{qaNbN-u0_;|Qt<oCEsex*9PvfiqUKfZYo{SsdVHyxkRk<x3OM1lo&1dG%oi#K8
zaN9<)ntVto0JfKM5D$;)HSEOFRo#$_yzIa_S2S!bTpN#Hu^rNE#HC3hOzCd1Wf^ol
z6_IyoKrHsK@owfIQAGen+LWDwb|r__bN~Ejl+*kUSxyb+GKIqT|MTS9=A#tE+5Jb8
zX4Gqy%Fjw?BuwDx11tZiu2(*~z{);I8hBxtcHj@I(=`~2Ib$EVC&5X<G$%}4wa9sy
z-Z$PHo+++9)p`d+kjl#0J>X2HjwGTH5(*qFj~5dkWWK&`**n&IJnTPALW=$T4u+yb
zj5TvGL;xvKAq5<^2XpyqVrlf%#bWX`#B$T;h^5JAkA>r7!p|aLEt4G*a9F>N0!9e6
zQolnPkeh~Ki@D#a9E@4bd)vVYc+yDTcooNCv}_!%YJ8nG025dmvREra%Ls5!hC(c2
z13*G1Bvt<Jp=}!Dcl*4Uva<Qp<303wwR7e=TzdQxzv<j6m5Pl~I|9cwPbBG>Sio}1
zYqU?BN=$HCm4cDe4cuB|*>)#~4;u}T2~jD4f{-E>yzY@6OCY9p6lQA?v1VE53-ud}
zgMxi5JI62ATGaj1*ozkODEfVzSz_44lhzVg*kXr|#h*x6<~ucr!$~vB`kv;rHO)uK
z`m1TP`621VL9CjFVWoSNps1*r%1n*?eG#J2<+>*~?`ITvulDf5&c_T75ban6_h}K?
z*S4Kb>$cM9LntPBo-7BseoQ^ub`(UJQNeibmiThjJrh;!L3tnBaVcf{aH_%=M$O$c
znXtYZV?6GOt@*fd#LpalBbQRm)pMetg`87tH(ebYIBi$Qeg&=v%xX7(%2KvRx=*5v
zr8zs1AR8_6v+2&dT_;wv>x7ZISSupYdJKrw-yfgqi5&+$anQhIqZIGiWt*Wz$VsK+
zDBkzurfEfH4rm3AQz0&4Hx4$J7G{&NXv*Z*v-akDsBh!#`)*9^M^}%JVOY_ZM1?jo
zch|_G?RrZ)Oo7)~Gd$~InA}vO9#QCI{GtU$6oZcyjy#@aI&H?CrnxpJlmy=jJSHzn
zGi=^wLIqK65ckH7f*J%h{RgG_)c`FK%0h${a9!3Ul~)WInZtuCyx0u{+hPleanOQN
zGI7xh;&F=tSZBwck*8~T3GMUZ4Y!yoREC=ElNqszyGYQXSh6N{<`n0RIUuv(fq2--
z)whmKa<5OxPnH2mAlU3b;qEClO3+M0K92H|Kgmh$VJSi^MEqHL#9<3aLss}g6Z9xX
zKo+Fu#XV#~e>Uu$EM+71%=tL5y4+(C5A!v?f`VWb(=+tRm8!_;sdb*sBT9PYWq^Vl
z@df(8=Y2>h1`d^SJkDPEnllM7Ey@=ToB|mZmQSscZuMHi11iQr#YtbMEMZTJcwqn1
zhx^$y`Gaf0hU*(w`)J~E3dXGk(fjcB4{AXQuoKHmWa7PQS~9FmRuT=H$YnJMQ=>?3
z?KbeXeHbOW3-Y0REHRiK(|k4tJy?Kk0n4g}f{Ug#dgP)^F|o3`%0}HL=So222kNWC
z+Rhlc_4xao$!Aoo)Y&;$=&{V=d(6;m%<rcM(bw$3PJKUCCs*C)n~K~>Ma_TYcrR0N
zM0J20WOtHfFqT}^siWzlLL^qwOf=-DM?b_H*~EJk%u)aG)S&I%;0b%@+#vep<*Vr2
z<&@y&QV6A){c+P~$rIT;Dy+4+xik?%-t(Z$sFT%UX_JsNF`s7|O%!&NS4}t1_I8z-
zS4Sg5$lzgaJ{}{Z;C_gnSIsfiVcC#JEE|-KhOQp73EYKLil6j>3kr0?gmix^yQ{Jq
zarD9HAb3DTZ+M)O00C+$p$&RvlrsjeJXwVasLJ_xzK+gqq7B?PshyictGUgT8RZ8b
z+bXJ^(S$LQDWjxSg(2X)0>a?t{TM{0(u0O+Q33}SnrEuVTLXe!7;MzG1^3jTb~5&`
zZm9MU1!?vJZ^lmUS?>zLVgYl#k^=6~a5>oe%ODv$@u0|gy|Y^PW!|uK*I5QHW~<<s
z;bsXbxEbaJI+!aI+HRgR=lXk*s|PXov3@bTwTZ-n!(c^)Pj=TqdrBR~E5Ndi8?ZK<
z6G^0!%ugjEDJ`J+Q2w!~k%HCXB)NTe)5hMG@yAI(qjp{)_S{}(^&-lL0FaJcLX$5b
zvG2~PB8C&QCq|!hxMS<Fdtkk)DyP$`<J)mrNp^kAMeWXxMmyTgW<eqpq&ST;3*w%o
z%G9z?m<?%g<^oJN7KB4+^SmdOc{A-L2Yn}#Vfe}FIDh{C)$q!6<w1@E<+T!wmV{^o
z2t<|)|6A#S50p@p@bCSPjdf2i!%#@0a!N9(<mW^opBJRe0aeOOwNdGF%u7joRIIxT
zD0lB7^P?}^+E=L3ycu*BSpDqH9NJsETfxakZi<J`nbT<<H<Qw%{O|}~5?8*NMWa?J
z6;gf4AP!hQX-TXvOjabkOX&0j$Bc)OztLk_g@vM>202O7<{8i(UKA9ajsWG=uwvZF
z0G-a(w$>Iny4F-vMcJ)~O{t!qc|s(>4(uq+Q7$L8YmLJenKIHlOAtU`TVWAzCKCy|
zU(0%U(B=et&G@550x*}sc*(oJ$<=P&UstJDEDkkn7uAR5*7jwc=j42})2x+Cg%Tn5
zG$L-%bPW1Q<~nQxkB7d>vB)x;pH{(PPN#rdMNQmI)E=e4gZM(B?4BSiYD%V<Q5ccN
z9h{L}YKF%d8!{bcEaHz{wHyO7NH9W=*J$sc1t4e%6XRNIBV&~Xc3&kI1!gXl+rHly
z6SQB_2o#62(gEypLkEd*gPzLt-KMI18B}7ZEm>s-?x6Q~mikLEbK~edxIF-J9FJ8;
z*eC!pyLW1HhM?@IJm*`Vj?U?=h#eE%^^JP{Zw?&qQyPyIi`6z_*EdKe)T|<So&c+3
zx0OH&Wf_z)?aCw=HR*(xV@}F|jWc}NDXVZ%0+D^?S@JUQ=CZ02;4YRcIPCB{e1>9R
zOj@#qm=#2H%Cf&r!dsrn*z@Y^FICdJ@v{Q=XkcMbu~O@=EaeG>26#nFVT~py>e}wn
z`xQ~~+8Z+-Jg-0XPi(*;xM2XFE5wT&>X_J<<N6>hn=k@uNeRR(2XzdPAdAXD+!scm
zWRDZsqbRW+=`<q%jbj_5k7$s3>V~7Y2H#U8#tHncl`2Iw7(BeW=9$livGkxw!2~Is
zR7Y>m(4lVVWxH9Xw~+<i^R0AlCN1awLyg?0shOLk|G9Ar+vOF*9YUM9In)^?2M*B?
zKmU$@SY8{UNrBYKdI^I>dNmkm*tHxXm-G1|ryoOt@sou0uii3oW1_z1A0}^|fjr32
zxLF`$(gy$EC(`AymmWB&fhW^$eHJ_AN<}_ZeX;7urcs;^=B;$@Dr)1tMu{jU)X}`n
zzj(WLb+&WILGw*(5U&XBbbor#4H74Mm~j>-$oX~x7A9LkzL$afo!pzo6Ci`5ULuH(
z3m`3+D6W#q#{HXW4Zp^+c`nACjt^NJ(hUGB;_^2=?RbvIsh597LWphg;y|O&@=Pu@
z@4?r(oWqkZM)iz%+$~krqZ%`x)nwe?kRxn2(rF#{ecH?|q7c!RJtUVn9am-FMb&XI
zwFS@BddsN?Pp;^(-gDmr_{D*na0_7DD2My<rG(o|ExyL4fsN)ZVmyc!3Y9+@^1TeI
zfF+s1)h>t}Z(2SGBfDE4<he}i<UOt%{0Z(7_d!u{bIZYwS8HjI_AnT3$n>!)&g^jY
zAn7w;tXtHwe{hc@Z~Pa>4RqIyy$bF-a|x1YvQk^i=d#5!vmUN3%iM6zFnrq2;E>$$
zh|tJk*GG4$+DT=$9q5AZ*>AVWgxLGFRs(m!U)J{$?Nk9rJh;=;=3EsIT_X&)ZF-~)
z+&8Hm9Lp2ieuTDgCsHT34+T-7*os|((DFrIAzf}urkXL>oWC|6Z^$GW=#oMEIl0jQ
z#l?IO5e*nVxOhX3SUUEv)oNJ+u6;mJw6$DW`cwq1BPDoDn@8>k&W-AX8RKRpyUY#E
zhe_FClzaIgA{rnB5MWrTcVq4I#n{^5%=QJg_Nt>hM}kr}+XZxL;x^NI?iy<5zCj(_
zY|7&HrFL#Db#Z%B1R*y#qC)dn2}q8I9MC%nTGkvsL6ibC=v<=P_{yC!HUrEQLUu`<
z><4o<fA_n$E<a8||M_zgbdEpW_bubD3VVRvMixxFdF;-9p9idFLe6aqDlLqHx?QfT
z2ldUfXx<%Uo&W{c0-JCPXp*))F+>QHWy6;HZ@YwfXS>;C*+G{v`;7Y7thTV{P$51f
z6aw4IIVCoMmeV}PrX+Ysvf(5X5JOgCyctba4LZpemD2Q_-$~M{VI$`x%!>R_H|h9!
z`(y@jrY7lLtHQE~g*MVED#DrhP&Bq&769cq07XE$ztP^-m<aI4v<z%_m=+rGC;xh8
zZ2sic2XR^yDhheJ@w+!YS>j)g^7ccVCUf^Lr5CY2Wn&PE8t8cNdNN-HxM2~<(SAG3
z1EtLD{Ss;VYReUW<K(4daKht_zY>A`CI;J^0&IuQ=ab_VSSxbQEt0c>t2PcU!Bz7B
z3kwWU`JxZsP`xidzXX)%qz>=_RXoc$&TCF+RS#45>k5U*t#}5~Hjhc%2eH`I+7t0v
zYpmIq3#<IcKQ1-XWP<L#EK20HSA&g1!Egz89A^B;pI3@+Dy7Z9;qp!B(0}!w1YqQy
zVwU}p*%S)e4UfSF9p2($AZMR_H8b@L%wLBkg<kb*>Qd&J|0mS>Opx>=JrlRw%I}DC
zlY%2uiQB{vOC*KHUGv5}HMMKSuc6AbM#+6i*2qP1CE&j^?3&>bcXE`Izbbc7OlQ1m
z*=#POivyK%<hBv-E=q`AY_JUDl%pyJzKLZC4c$Fl6GjsAh9!qXwJi~VaYifXaH)<V
zONMlZ=r>Mr{iD%`k0O5a=xmz%@4wpzt@`dI)#9mCk`)(LiOUW|c?nYNN{01EA3ws}
z-mtCf=j`#mGTy1<IIU{q?mTW#ix41bD$+ATP|=LHrPe&e)tgXQp(m!2iNq<}>nb!4
zaz|?L08KSCKZ5yN3pLUSNa#7#3=sdaBxe0@2kPJ<)4G@1cpmmz#3?3ax$aFd2L6KB
zkX_VI!v~cgk|Mm()}|x(^e>6G*BcdQ!(EALDK>+S7e#Tv>`uONGu{xRzJ0^5&Hxmz
zaw|T>Y=4$+ei#c5C^~<NDwCJviZLot_QeQGG|ogh(A%>m65dRp5rrtvpV^pS8Fn>j
z@RwB1*x40pg_#`CPA8u@oBe1q-8&BUu|7bs>@9x1*$kj##fY%m9^`IzK~7hcKMEEy
zlC#smi&NmiQ#`_1><nUx2d(6cbEOZm3p5n?B?--cDQkemFjP4wB};zUD=;n_7AM`O
z%=X`FiX{_%lt#ljt-7vCQ*oW!ztHk-pAHC*2+}n}Mxx>jI8oH)bET6ZPS-*ZwI(2C
zFZ=xtsRZja$byyU$5+SS#HFu01WipuQxKZq2j<8}O8$R;&@XG~I}Zm2l!qHMfnaH;
zG%s+mIAptOa1>&@Id2l$IIau@#>6YSM&dNoHBU!J!e6CcCUL;)zI++NXG1uR7F{p7
z_@lx(v4gN2A;Of<1~KV}a_nSPMY9R?O~@E(j@6m-i*r}XFg*^fA+#_j^`|Sk_K7oK
zWNH*T!47$c$OA{wK_e_94|q7@(#h*LTN{hV&Jf^JfHYP3(Ix|%xwq)^FGrra!BgwP
z$3ks15;B;(e5nUZn51}GuqZ-ZI_TrZOG6zbSYDqu;4P`3N3ERY+_m}J2@>5Bso(RL
zlMhm!b%Vg$2le4eqopXnW!LNDC4GDFf%!HS?$IzbCXx11V{5X^J+B1qz~{LHiO_9D
zDemb-FozT9QjLrHeNYr7PF!}MWV6u}t&tiB4NtwDCB$vBDKWS+7Lq#OOV^p6-f%$~
zAxarfCcpi5B!Bo$?by7G`Qq9AzuiC3`tagPyzJvdyrCnL{eQt9lf%>e<#fz~$^arN
zB?+Ffz^2&DI;$lA2{v3ndGy8Eh3<sME239tMx?*?iNDQS;`R63{&GG!G5W&xo7LiD
zOs|wyxAW{fj*w~5%S6kChF~1ii;C@7G+LQDZmzW>)=j)@wMV{<ch$6<RSvgm|L~`z
zufQM;sEf(qV11L^j}%466Bqms)r<}+pQh*gKt^@2DDwDGSN0FM2e`TfhZCz>L|$@E
z`brII#STs^!%k@z&fC$J*71$clASY}SL&@3@r!*2B*ry^C}>@Wd3&RUjzB4+Wlg_Y
zn{$S=skvHfW`4h`rNf<}cY#IdHwrvz77=5vCJ+@x+oPiRayRMNkS^ZcN~X3;kpEsj
zSlE$oBN5T8|2iZfnC&1$rxZbn40p}ze-3cik~{J-()nIpfbE_G=DlAfle6wlHmcRh
z1(%C4h!l6vT5OH-i2aRskpU&c>G@up0)8n-B(AR?lFI4a^J`gmo`M?Ba9GWl5yj@S
zMtEQ(0N`~JSFi<BLYf#{?=P)f>3RRpm{<wZ!H<X|84H~Z)&5C1fH~~SnSwRcno}L4
zJ&ayat7XJOaq9MZ;-&X=tqa7HWI}CIjh#^5sI-wu&9IT&-Ysxpw$_}^*7r`hueNJb
zdsaHj4waaWv@l^_Nfo<uFXcryKCr>l{Gr`OT?Hm<HHY!6POJ(i`iGz2h97;!dr1yF
z@_T0RmdV=n?v><bTDTc9?7_3Ebz+Mp`>d7~rPyGmG(OaNNw~xFZgjTTL+{kgX2~s|
zlBXaIOAus?i?4f@w}=8kVN|=Z3Qml*4F~hDcszCmH$LMl4p{2tJKPI2WnU(sl<;;!
zI4}oZ$n_KfY>-}_P`(&)93wVg1e{!ewy}6l?wPmm8e*=mo$cARqh5Uy4;g#iSOHz%
zHVh9BdlMU9#EX@2Tf><#f|S=xM&pS{k7EprP>L<Js1T;;Bq@rjFp=0UTWMQ2w99hc
zbU(d&p$2@jin)ZGc;Km4RKSmPiDmg)?-Dg5Z3@T>k>?n?Ni?u}ZK99)CLea%)3y4f
zs%AALsIf!i(^|W|m09+&?w;TVJ@F;(D*BE37L(P+7#0737PHr`-neb+=AoewbQs8Y
zC$h1}C0&-#BIO`D3PFsVbpnsdqP!B%uI<lR!ybS9-?61+axdy%Az%^aKA4M@VxUud
zqO4<I_slm_W)Cbo;}&34`hyycihX#(A}f$A7ifGg!jDz*k-4Zl3lSiqG+^P~h_rJI
zFRn}5@Lcb9TW63ryscoPKtT`rK;DG8njsvtTe3L2TA6MO?XY&Y@`b#GG+)mXIKh+;
zouFQKN0GuzO<7MU1Q3xO#jsR%Z*w<&JeAz^foCD6ie#S1*YfoouF7st`3;89P`MF_
z`Jyqt736VWwmL(oCy74%<8~W5_2R!waPC?SAwvyY?I=e0i}+-CyaJCJ;#)i8vpR{~
zJjIIQbTu`}M|+%@>VnW&&<+j9)+V*NIZc*&dku)CJ-CSPP{THty#n*Iam(DnbME@{
zNg#2%r_M=|91lpIm3$iH9=bD8H^iNxI?%dT@?S+u<AY3QW%UH^&Q~PI%Hvc0qyI>l
z4v|tO0?mPycnV)^sHf#+G8&6n!nE+YLakPBHb(*SSkO2o#W5srIJim+q%l4(pVKQR
zn=P=(tksm5stVZQ{+c=%m?lX`93Ux{fIDqoqeOWPD{C$2y06PTAIpj2T>TI}v7<R^
zthB4(rgFKvV+70Icb{bU!m!)Y7*ea-{Ohd3uNm96P6I-2D0C`kZN-h<vWk^iVn&_?
z|LW9_2Gb7z_iQwfD5{78=Ch-cbRkIA1{}<|sy{B|(lQko6YRT7$^}9wi3JmGjTy=Y
zCumLZW~7P>mUYWjZ0!oWP1Fl(Zt>{wT%j;dL-aq3yCRCrlfY0IuZXB7;YoR;D31gk
z&1}@dYm<%oO4sZSiy8qk4Fb{hBn)UaQN|CeW<SLWH}JLJc5-AuAG!F_k%_l@-^Ydm
zc{iED%euP8WX|$g(?1g?K<{@!4QML@EM2Z&9n5?@1+RO2^%$~zD6jF}FMpK8<0NAc
z#}MxS5E8pxM7H0I4CYppfrPRc=;w;x`p@jin{E~TGjJj`!2}jx+1Qcm>h4Cp;dD7v
z3K9;d>8=XPtSbkbJ%r(XRX}?oUJlzMi=>{d)afEr=cuK!#;1$Ljm77!N@S7a7IUJD
z_PnWxxiwUVFL~05h0B6(@{xXS_tC|WXUj%qw?Q^HWA<c;x(KriWD$ln6$E<2hoC}7
zaq;kNu6FHn1mrw$c;CBwG=Ers%m3<~(&9G!0Kqz6gFEQJyiV{T!7Nl@8!8Td>RaI%
z-}>K^nr8CJ?@DR%z9D4Tj{}a9M-Wq?7se)FRMm^)$+R133CBw&PLh;n!DNE;buy7K
zPAEfUJ9S7K5F8U3+JBApgz!N~MJR?tf~3Zo{we0?CDK<-J-hLT-&^bFB2ry6?Fi~r
z_w8S+eQQH4ys_)RkD4Y4&j|gKf_&Dlp3r*SW71QE5PoyQo>ym{ltC#C_R7_ZjXvJ=
z>}XYZi9cJz#S@_7v7aMHe$=?{-Tcj;9tZNwR(%|wIR!HC@wwo+Agk^i13J3JI`hCh
zM7zwXwSjZw^JCX;|GfMfv~L&&){~J6YACX=X>N{$pC<>WGR%M!DQZxq*IYqW6<I76
zEN0;3Bbz<`HGHbx*H9SPSebY%oBp$(y>E5dICGN9XV=%)zJL`)ML$=;OipfZ!4@b5
zy9ahn#i0}Cs&MvVCaEt|s>TtIBmFs<iTtY{-S;=YdFz=cd4Pdg<g>zT@|CY_p@7n#
z4kr&ztZLiUKG#h_C%Q6z;`{$Pu;l>2@Q3q`vSt8Zb+mftV1XFM7ynuHWj+9xUiRZ0
zDa*XmkZh5}(L6sLcf;F~4n6~em&^WM{+RXDT<ASBIRYz8LkN%V<%JpSYe>KMV=1lL
z5vnwSnYDMwA~rdR{fgCU6$&>^NJAfF>81ceY)dGEccv8)&W`nF?v<8->T+5QJ?>_X
z$JIi|M5H5M0&a7hGM;&3`%*M;5d9SMV??8J2bN3TTL6(M0!rP=D7?DhxDMRwxb(zB
z<1N$TBZYrbkLMW<X@^=hIdUlZ@>4eGW~0o`rHzHxiHMGb)ve)pk|k1aRD+&qnu^Sp
zz6ADonZs;@QHF(kwtVrj637KLh$u#4IlFW9#8iwRMMbrtL5eW$G=~&_mp~AFW0RIK
z<2WJ+8bRE(;DJf#+D+zQ0boE)$p8$_HEsAo8ZPdD{US`Vx#T7RZi+Mujw4_LBnGRU
z5Aj5?*g>&RUzq`Mfgyq{l#n5KoDC_FQ>FiU)-BH-!9z2{{=!7noT`I6O=KZ*zgYzx
zuh@(y*xG1?4Tso73`(|QIxYApy44G>=-4}}jQxA(SaRrlBO@|{nU2~K%5eDo|I@k-
z6-?ixSftiOc89R1Sl)Zc+#3`1sON23kSiBY2Ld(0RPr);IxP~CnIyPq!pFDEiFd4(
z)rA*tTZ!3$VBjHPlmY^aQHWipUm#gJ%ao}Kbz0;G@m*qkeyW@P_!vem-xqZP{akgR
z0tecD2r4|{cQ|rJI|k}exy%ry)f2RjZ(pxLwd(X&2ikUGCE`?wFuoro^IyJQTY1cE
zMg5yEuR8F{>4QTLZ^rMzNS(i99f0hr`hp)Y(n;{S4ONMgT9(@z4-lVV2{hm?FeTW1
z8RHf(wf7=3kp#OfR9w%ugXGlaa9Bw*ad`pZM-zL~i@lgiQASpm^p-Z+iQ8epd3SS|
z1c7~tMH}k2=geP|FF~eairFkIv|(DNtgTYr$M$^w;K8#lWj}De)J&y_aQ!-=bTSFe
zO$LmcD@PB+dsbZiUPplIrwg~u&vU}1pNB#s8b$>*F8Iz%Ns$R;jb1|>Glp0l2vpPl
z&9iD}r3E+UryYllGm{#v)<*T=Ag~Rb1vkKrYVmDJEeuAB(l*rkWv2dsX7%KXB`k31
zX&|=VdHlN8J0WOma;~rZa@PLaU(nuxykPPQECK|lZY2@QXtes0@qsTnKZGwu)T5R@
zx&c}I8z`VJ|Mjn5A^=$<!S`q!Xnl!*LQR!?Fn;kVyH{(^>g1`8LnP6^sS9fTwio&E
z<b!%uVK)xi%OD_>R-*1_><XphAKwu${UOM5DoIUO_9qvvbnD0nwB?|$P|d4?@;a{L
zpH5&+KM7Zc2z1#qSx&1x+xgx9T0WTu4DqPx&6T6-3ku?Wfd<6;RMFKLYyPX`;>qgZ
zSWib6E*3zm&|iIhcx*xDeWu};>O+sEE6ngbt4DbM_VIrm0yJ~)1FH>GRObvMfY8Nk
zPfcwO#$<E4SiI5M>TLQaozt5oHtEw~!4eXu%HH-{bf^+!w4obI;Ppdo!~f(jf<mkZ
zffG0yEW4*xuTQt<JwXCON$#Oc=W`$^L}AdZ|0aLp{V{ZWQiDi}Z~qX#VcMpIm^!M0
zEh!FBjXld?Vj3J?!iMLl+b$_W=J1tD(-zleFp?Cqp~^I_o5Mk`V1G!PCdcz8g&63!
zWjSVw+$v5^m)V#NDyAJ9c>1S^Bnb>nVx>TL(wE8@*<{;``{n7=Tj$>PJN=TJ)0z}(
zHW>*yBNI3O+wwUwj%2b<vFM-0jO4C1PeAYh+}W4mE6GGAPbiX@UBBG8@$Ho}XXEh`
zo8KEzQlL@Zk0`Go5{Ml=7J2n|T3pV~IXFmze<`XlPCccJTnWQEY{FLT2>vk0VbAq7
zkJyj73go5U#f59Sft-kLJp%LEX;_(2sbPCtISHSkX-ktV7ihxlM<&^0<oF_FVBy|~
zw3Dv&is^VBGMHs64e|!k6#N_BuxUc4LWdbX_(BJL%D$-XZ{K?tHL2&3^>Z)-z<N7_
zkf#S>#0{m{cm_;0o4xypOyC22^iBuSJJpb$_)Wa+VY-6Qni-kLfS6W3NZ)Q%*gc=F
z3Ux?wq2tmgh|M2!l2e%$EXQ+Yl@59+2Q7Ue8e+h2ry(8jg}ETm<psXURL8<Xu*+6w
z2<b~`m|qyq<)Bkd(2HjPHO$&kO!pV@z<h@eOXfT88TnP$EBvN?X1x9Ha!0q>6ZEx?
zi4_`(%}oTmKZFY%sbKN;NoRfABE=FYfY!X>BXnVEOw5z8?Kw($3`n2N>HkWc?}r@A
z5uF9WH}Ld}=M0DAE~#p~So~4!27a{K!h)lY`tNV_efiWEBOJiJ<(#kQP-|2vY7{&u
zN<kPi%K5abxAwZ9s}vPaC7djW0tfT4qCsrn)lPHT=IjKvE|SsXlV@-5t7{WIF$T6b
z$z+Ur?3Z11><UKGx}v<Qv1%BQqMJ)=g6M9}?{Ag@&!5(+$A_}8#1t%l1XOjo{X>&i
zDEJf=Aw&(<uS`6ABPt!*6**@cyuG|&A;5@b7n*Y@RNIo+vx%YSP=@PpxMe%GO*oC=
z5CIJYq?Oo?0+CUIl1N(Dd%3&#-yd}x6DT(INo8!NRN4bJ^tgz-xQG2XY&RXj@q;>-
z!39Q#BsBXFnsKW-{Aa7?I<gVD)Zja&h4@u)XAD6lcPIw(QeabIy<Dl}Bt>y|C8+q&
zI~EjC*6Z_usGE(*T!+`8(W9{_aRG2g*jFLEZ&~Y<#3qP$AG`idpPKl<`Voijf4isu
zl7NTtq|uKeBC;E&)@C@qC1P%)sjhEABx;);kr_5(unbFYRR(II@74hW$c6^BEsgl>
zt}a^nKYJND*9{oua+*F#HAUAT+=@g6<7({eR5`@7jy6k@5p~1{O7^m?b)z7ZmLrOE
z3=*TD;_Qj6&?X|nv9=p@fY}&GFA&?NaE(gaE+GH9Vkyp}huXcWX<7fexm9)D%$|UD
z`c_ZX1dL;`lD0D)jM+*#)nrtTh(+9NCr5}9?7|ZXNK*iwNt2uuw7g3qtQn9xyk76O
ziw3F~UUkQpybL3EBaa{1w|~IhmhVY?mt3Y54W6_UA!v3H1<9l<mpb9YHANk`W&#4+
zIF73p9O}=G=Ji+ZO)~nr327BJ{C7VfL21lFi=&G4f*`|HHd3|Wb<gZPO)s`2rPWRV
zx50iiGa+#_&ZzXsTW6=R^3-&qeqBqccUf}#z0yqx8lt@3BV67HvZUmco6T+-IzQd2
z+9+6GClR&+8b_r}kdzaPa;vs3(7<pPkMS_=Wqwlcb$Dj`FIv;v-gak6AlSrJkPex9
zG;+!9N?Fp&+ty2^!!&%!GjAu(yngMsg`RQSvs?@wz<9AzzpkRx2os@4JPayB;UK2A
zr0E(fwU#HqNrsXd_G?9VsjDWQ2*6B<XbPi{Y(BkTCL6kPEJJgX)W6V5Rou}ZA4+X^
zur&R}hk@B=wf8Pki^StGpIpf(T;^_49XSxXzv3>tf@RZ8!*(Syw)QJahW(^@Au9YH
z*U#A`9r%nwaxgcRV4@&0{*|^Us%Om!<^rByxdi4D;17@SioTrK`*Zov`<EcXh|7om
zgs&e3`EQ{Q8SS`t5!b!YZd7$q;JgEsD$rIZ-d*H_DU0beILE+_tlV`505wrje8G_l
z6*<6h1<eJ~QXM9Pf&D|q9iem^G$l=gi(S|WUA$s171JTBnsH?$%S+!eL_@oxZ`WBH
z>|k!o4gsn(i=V|7vCf|!CI&HiNf$M3g)ykxdx~P%aboT2vYj`MqdEsq;IoVS7iQdF
zE@g5|vXmgAMO7$@wdoWk!Xi2DgWJud(kDt1Q$34v%4LX})RdHJ?Y3mZh0j1Lsy$9>
z0z=vg(5GU_E>V?$YvZWhHT1gr*+*|Fa3nBnXq#-cJ6(#P`}rg{dL0*DRjce-_5OhX
zJI;|w!_4E_yDwOneDQLe(V?UC-T>+oubGzC-0CTdGO9UUL5x?DwCZH*d$YTfVwl#u
z)&I`kIsCX?;gG5P00OCjD4XU5u2wQ*z>VV{n;H?;=i~9^IH|sUBm1|%Jw5c648iNc
zBRlDmiYwki_-x>ttJ3<k;!+mKwmHinDC<ahJ}uoEC7r+rTc{bbi_zthLIr(P*D!T<
zhOluV<-sObDi%V~7T*;T{nDVJR;1mh9#ssoHm<g99LkjtW0G}@?RBb#Dmo{HW$@Rv
z?%682RM^T7v)c|yr|)WAl6d7hbxmuTqlgi^?HCF1F6EKdgHk-S8<bsLNV*WFrWXka
z*bo2_Gi8K<kfgl_XVusenMkU{fIK{{4Dlz5$sJFL5|80ILG{5g5dn0a;D)!2MS4+-
zGp?Ag;B}3svDlp!h7J+MRW+SF?UYIoHH4B?H04)thaO3H^K@M`X*FM`pN3QdIxH}2
zpwO)H#bu>_ge9bU<4Yd*5<ktVd~&JvolUYEnM@Vp+iH@89r+Tt@qD^3@#4uFZg}`W
zZp$_aF19%I;DA_VC9o2ON00JpcrF<9_kViZ!yXJvvz7CU4BfPWugvaj)8j7YCvkr@
z(L{iU0k~~f(<#ASPsx7~8g8hw-8vTBmYd04?rmg(fFcha0Kt0#mc+`5mBx+woDWCQ
zw04g$hvl{$vuls*UN=myL90*c$p!VK`6byWF}rg9RTFH`>fXECwNGRII~OR07Ir@9
z!9^ICUYnVTJC~na7KFlxzo1o!1`rRusvIrV>Kz106#X1^0Pum&v<#BZtauS}detgy
zgO*^eFr?c;iZ@D57WrXj1DSLabW_IsH>8WamC~ABJCUyO0_id@l&-f^{|L%7G)gqO
z)`;{6MEl2|AK6<7e`UfwwhlE$vb-a~wUT3Vhh>4uFmilAC!3wt&}5wa>wsHqpuOh{
z3)`%<24;dT29yLkgNfIPaf1L$WPyalxfprE2y^&<;LOV;+?bK0v1+9PLjc^4Yb4nL
zO_3?68b7QLjW%OQ2!***%77@(w`mZ^=4H72kes+1`X1oz05*-?de83^<REDe2d~`X
z<pD0h$^68s9=iB$EZy<Q<$IzOvocT90Fb&5xo+>g!WrnCN$3sh&vi7=>Yf5kU@Sm%
znBrry{ecV$!C1MJfxTpG#`=s$k|m>}>)n{vrlqEAuuep1jl-QGKoeogaoGj>TC!!O
zk^D2+Rq!FsZ{3c8paJQmE!7vB8;x$lT-K#BQPxcCY`Rj<V+n`#_$o%uSaQ!kfMupu
zRzihqSPRrquogr*40zq}X(|!r&S)qAfS3&-XbB+`@k=R0SgK4J8=u^mSxgSm75`S3
zqeQIwTCq5gf@>=~P!qzfth!0zfrI;@9Ii~Rn%apN4TKP}#{kf#sKP(rP;^W;C#N{h
zK~d`B2R(acF)sl2PH;4@j}@!m<`UeE8AEKtr$d*>SDkM^1(ip`kGFd>VD8YB!{wTV
zn$ka|7fEnM@sNPZPBXoAX><G?t1ilkMRtQUZYm0jguD_Z3AQPrIeMhr@qGm^7lMRD
z1e{Ca4H<eUSLGyneVTJw8R~~05_hI!GAgNfoFd1<LIXvN`jsc-9p0!AEU!4Z!-Qy|
zDGFi<vI4@4(~8rCX71m|5M@+XP&kHeY(y=px(3q|2m?il67O0G1Il@p5O9>1>eNpx
zQ4xOBSgR(WZqm;vAT!@B6;>igAD`m_ZPF05>-D~=&asQ1$V<#3AO$dlQkAfi!3GKo
z7attvlq5LtngCZ2hI@rZ<t|4}LR7$Mf>_=NW|@p1-982XV}`rJjwTX%0uSM_!ysVU
zX(qHJ-Ix{lwjILA5q8miD&QmYQ&0nJHGO9(2sz+wi&N{dm;n$2Me2g}QE+o6D~<^q
z1zg<;M#;Q0+?vuc{6OIliKmh<6~%0v2VAU2I>?fIDFdsYmgqYM>=}X7uB756z+I*@
zntD*fib)09N{G6>U)kjAiQB95?mzF6&_ANoX|`=Cjf^VT^I1qhDI8cn)wA%!6^Z9I
zo6VT!maaAkAu1>jf|f|HQ6eC?PDn8UDV<XF6Jl|^JDn}aPL?rE<9O>FR?t{6KlHkm
zlUhVdiC&=))5_A+u-IBq_kaZ?gpe&^N^ip=58Lw&xTDb%EezSDb^p^Yn+Qpp{g^YM
z$cV7?DqOBy&T+UU7qeN9JSzfyAW~5<zcd=pWMG2O2@s-R{Hp;4izGQ9N2Kws8o5L#
z3d>#{f8OaU6!c`&K*ti$Xk`n^>fvp#e)s+T&9{j{Tic%ILk5ttj{TnYiw=CQx##tQ
zd)^#e8+qSF0%{ztJQn2YR&3<)d-CHOb4{3f84A(y!<$w}4Z&BHBZm{@0MI@tUb;6L
zJ}Q&B)ddGKQV7)1po2bmW^AfF@Bobe!2iFV%^@p3pPNHY!%<s0JYkWcGhQMwlE_82
z3M&l3x~MI*W1zi=AXV2#6#cHD(=T+{>uCY<AG`vUk%&sEfaIible@|<#(gSDLpHiv
zK`}C2j_tiHH!M!C-?5|abQyk_e_Vy<IAt8St+DF5rfN6JrL*pC@y^699B}J=*f|x$
zl`CDb*lr91-DWheUNh}Vxh%_W-d5W5p^8t~3%Idu8U;nt2ikhaq!ma09LEV(OXRd6
zD#hhscO@6+{q-kENU$fdXlB~q#-_EG+b<RiLrhh4>9=-%!2u>J$NB!ag=ON}{Vv|?
zU9C*-*rT<0QS2safTq{Ua==+f6S3b!)q-AMPt+D3Q{h2DE&!1G4iXH8Zv}~=lgi^#
z9^{c<CH+2~^gZVa<;f|<8LEB!5bl!9rseODR({XA_~wunOMeu{Ro9*38^*x@KlzsY
z<i3gP=xp^4ob%b=dgR=bFGoJ8TyL$<>}Xs+nJEM)m_Pi)al`(3dspr$9B{QrUo(D8
zfJ50D0%n&J`K#TwDBojj-vo0>7^hbs7%-BH{5by4Uvc#BI|Sqo{^f|G1Rb*CD2c>b
zxNwT)Ds+nb0n_<6zj@90pKd!-;(;1gD8AaodTIc+j$#$I!I!SA`w@k5aA+ab8xPK)
zJw~2n)9W6T-Ch&E3qQE>nGat|<8<O$rY3u~VA-}5m;FH}ef+~EI7`A-t6oCOtQRNq
zbJGiWG+8YbDs4woH(&7ZVMPhm3RsD+H9`Dn7p{%NnrqX6Sj*?XR9UBCp%fyS$j8|z
z0WyHJ;#V!esNE`6uz(3%Lz#$smqg?<6VsuG*`gFt%lnhbgh!E|Dg+mm(3GtF<V;x`
zvSjzn0bQW6mRMC`N9II5&mOkN9;bj|EjF4F6YBL63W2y*)unyzp7E>r<4ffB#+N~!
zHraSB+prq3OK5d@TWYAL7&3J%=d<%UAFkbfM7>{t@S09$m3S=)U4&hB+dEuC2vJ!P
ztW`%Fp&n$RDM%p)$VuG^W-+iXV-_)WJSp&**Ix?kxm24RZ*QW!g&KHHqFO5HQBjg7
zY<F5bo=}VB4;8RAB!z7Yhm`PXTL6ND>?W+e<!03?tw<lcR>Mh2vKD2$v?C=ljKcjQ
zVsU)mu1=a$u5Y-W*7~61Ao^N1?Q827L}`W~n%F#zc!xNUc`E=0v5k=vp9Hyrj}j((
z!Ax-`!%<aju+U18H>)XH{1I$MN)*|8WVvevr8}(VNO<E4yk|jvePu3v2A+5!{>6c^
zetduK#m>v&X|64<VXNjb%|rku(m`S+NTvbeK0NWFt(;1P1q5lg_+<2oz7LqoczLjj
zua5{-%B`VjFNuzGo|-ztFoJpvtk07fmEq#iE>z$+BZSpS+3bxdE9-l9inghv-j|`S
zR>nMaRWM^!U9i^X22xu4l>x?M?VU}CMlz96cy7g)-)<YZ_r%)0zwUd|?U-I47}ZP-
zHZR^2gGVeFjLdMj5DZS9{3F+<f)8E~{FpYCOvs7vswb^22JgQPxp-nz@c%xY_*<M}
zj85+ZR48;NeacpjeUpnJ(<>A@jk>$8Ku-nQX(Kso!r(^Se>Ocqa4caoe?~EZD-@5b
zvgnmU%7~{lj!4L(GnsTMUubDB2cBt#_Ik=ryXkFBQFiLe9n9Rge&aSK{&840$fW39
zaxm^50)(md7#7d3{0k8taPYspBD`#erMvRs&ibJ@v=bB!at<HE$_24N4#;7daXD=5
zF{$veiuERfSAmi!C-V&T65NC3T;^g@JX;DgdW5UGsv${+t9@3En$?fHrd&#}&`Ji&
zxg%Zh*StYmQOoI!E7j+fHfsq8G~Mn(i=OSDV8QchOZK2KOS+P?cID(f@9JD6DNHp-
z1zdI)&~RLmGO~iiI(B}?)z{zOWg52}6gh1%o_vJ(M<)m23g6y7uX{r)V10oasCX0Q
zo3Xa!k`6i~TVTO0@oA~yyX^<0`G15h(`!rcUwD$V>d2=$5IZhp=m<Fmv21}*%l=cY
z!1NmnJcf>j+@|R`YDx|DfbVAmJAgcdq?-@{Drjyv-7~&xG%e2q@{cUnKWLhx0l6`P
zWOp9Pi^IqYf87E!ykN~4<{S5@$xR6eHhExRUIkj|H6jgS5RuWiBT$MgE=IM{C!o*?
zQ0fl@cbFw$4^5n0RfZv;)@jN!Q4DdIw2ChW$t`oO%_>{K{mzqhj{EU$xg&wW%yq}Q
z>t|1u1C8MC0nyr^(cJdQbcJ!ip9f>Nh|-Tys>1*+R6I=}B7ly}q8^H^+rz@K|0bYE
zZ{PVhruxdTS>F1A>QfC<hVgMDX6AYNLw5tyJl$f&%*z)di0lM`$>@lS1Hp%|2WpDk
z*<n5bL5b1j#d1ggp#s&67i03cKqcc*7!FMN9(I(^lr|3@4LMR1oQ#8fB_vY%K_+9D
zNkkWNm^2k9Oe8&g1h~>koUlS)sFGXaDnEF1ZgNZ>Kee0W7w&!G-0W^5vPYCK>7X=-
z&>fO5ZL$<GR>HJ~7g2SHBEp+mr{2R;Eq>e#u-O^Gqzaw1d%>nsDegy#QjcmT+}~~(
zWDX6C&5EyMN!YO7X7hPU$+xG|iGg>i4Ix9tHIPFHA;4#8;DO{yTY7aHYd3b9#X>y6
zyFYYjnN?prZkC-~EyH)vUTv8pe5NN11h6h#yg6bv0sQ6hC4O@}8W@Tr<?P$xV2GMx
z*p@D3tX#p^kLQ+sKe~(kw%B(pFk)&9C|hbpIUdq*+~BiYf;o7DBLQP|ygXHjrVs5$
zO!TGWY8(rUP67kvyNf%#*lodKjS#!KMoC;`?h0)}rdQK8KO7WaHtgp&<^L)CcQ@V2
zP@YzkCkP-(8vhc_wIRfBmZv^^`N!_FysCj(WaGDktfye0c0Yy!jqDY8YBqk~mmmMF
zU?95KOiAWhjy_8_z~1w4XpH4@xM9n=oE+^A5{c{Q!bBlE8U#0b+a5kbts^moqLk^J
zXQS?xLhd<uSJQA%q9lUYgb-#NpX<FEqT&|38$u%Cubt!9Ojk5ST(?Lu$gGk@-sZRv
zG7u4avsV$bS@ECuW%fGiWZc;BE=5*O6${iIiM>v~NmnZLe%bxR!UPfQ5JaHd-c^>7
zN$K@Xc@P4gh~WpdX##vGDs!!^;8Hz~jcBV~Z<eAhxsc4MBt0Ycc3~FV31U8FJHdAs
z<=ZWC#xb3yhp!u_V$A!s_%0=P_)h%bio5TCfwkjWI)|y+pL1MSL9{K<`M+NVCq))@
zSiD@Ua=~V%osN4lnXZ@78t<WS-}6dj5U~CA8niS7{S>B-w|3cTJ|bH|S)6%df4>kj
zEB43|EiEcIwe4#w7A1RIkLBue*0L>2Gd+ih`C?69Q^&7bCrTW~2{W4<8Z|IzPeRvf
zJr2=xHN-=Ne@-1jhAw`!G84rm5;0{MK~}r*D<=9BE@ez^v$9@hy@$i6m|~_i<>%K9
zDYETjEJ%L1esXf6>TnyZF;L1T1(n=Z1KmJa05_l}O3e&%Jgao_7TsLlTW=Mw<yt+t
zrX<%6gXlT*U~s||6T92EnjxuQ8_*q9#HOUgT(5Nw8Eigek@)DB1KTRNi#PK;VY<zZ
z77xNZd_pmP;2}1s8UJsdS<X=qVHbAtoVovaHF&s0s+-Nc`Js&O+(b}a)09%)=F60s
zaE+X#ab&4Fjc8?he8C+m5@5CA#Z0aux$-APeuqUA+F<K1`HDx^|KwdhOLEg5`fw4J
zg|zbUYZ+#!aGaOpcQf*6^?J_j{=*-d%PH|VY|QsDElvGtKKw9#!#H!l5A7G4Ve%p+
z@|05U3{zqfucolm`)djndMid8paQ)>X`*c4U?({tIquc-3^k|@e<9)r^+p3oS{pLN
z``mYRnBk77b&Vt)Fxz&@gJ8SDs?`|YGP)rOfjc##Gd0sT#UzkbjprlGoKuf(zAvk1
z+k1AYzdf{u9cGnV(Q$={q`<&otO;gTVlJipYa;(N_}JDtcsg|*;TGWqlf0xn`0xE~
zId)gImp2N<n*@Y*s2Ki1Q^BbZceyn>jL`b=&#Y$4UR>&@1yxG0!Gs@11rejCdR#Mp
z%mX?NIg2Gc+0cymCa1+q4atIUMd?y|w%u%ULwb{8dY~742`iPEH&>H*iBzEV-y2=6
zmkO|2LdWCSzRys(U^H1|$c_#cvsY0OJq#+wE&(ZN3k(NQ;lhY9aLrauE$FdCKbS_U
zNw80;g2v=xF4ym9?s6QG&`*?Z{;^_QEzjJqH>3*l(Z4MB$C6$DCOEnE7;`VFVy)C$
z3;OV>KcdN0D4GmYR?&^>VHg!3Slaw=<nDTdk(4ea|C=dtoMw7tpj%i!u%IB)o0`&z
zI7A=2>{Y*@_Dd`2T^>qQ+m0;e16b<4{KQ==nA6z)9s(z2ve@JYNP*l4D>DL|CAS4(
zoQ42^dHSwE3-)D?5d?v0D%>}HsWMBP6JJ-n@|qDRmAko(FJA3jS!*9XulSO>&eLmY
zrK){0a;wK7h$%5R)phMN*?D<MM_K@JcUTTHN`iylJ)czw<c2&nRFeZcZ0dZ!FnKl*
z0US!79ML;yl;923zusAY)wuiud-U9@AJ4u4&kF;+ke(;n_3f8jue~b{#V!aHceOt)
z0SwbiHO!TE1b_d=3B7_*@;`PanAh@$u|MuD>Tec-+?_6pUl9dbwBUcrd76l4DS@1;
zl!?kg+n?|`-0hmVoY^M+IoY(0yUnE1#7m_ns{k6(+Lak`o<Gq=ctF1Oxx`4CAjTGr
z-Ya+HM_+s4%G)1yp12<is2(&Ei5^`JgJu1m2BV<a=m(u0BgYmtT*xq>@=DjQ!{}p*
z00o*$<Vok-aCMN*ORomf0s%tmM%UbxY`3qEtBw5S_1AQFQ{XLe)CDcKHm;WjAU}oZ
z{V8sn2fI=a+KZSEhv);h0t)dH>gFviOk$E+p`sQv61SBkW3&wnISER9g^i6aB;U)l
zwwe%XBpE)A>7-1?QKh(<Oyvo>(C7#Z$uatA48z2Sw-$U!)n|}+s#0vtIj%!Vwx|d5
zFdm^{W3;PHrnS|{CJ?etjU=P%2TdAPUDur1YFb#Z9-@!#f)^-C7QsZDdGj(JB~EKB
zIIXGaIWmigpvhIO{$b~6!W)nv&rdU2k4(O=+aUUM$$JfOPplmXSvcG>iU-ptFaHob
zgsy7O;?Vfm;GiTL3;q4vliXo!HQMCA@&eOXy;}9f+qd7l(59ZgDgTx1i_WL{b$CXO
z>hf8z&o}?Nrpxc&*47ZtnjQmFAQo4|FbnlmNT|!=J!_EQ<$vLXh+LDS##cH+55=~u
zYsAYU$p2z~%wwSqD}s@y<g|0wj$&lMC{Nc@WV5v@k&MuL0?UIZ50HF-FfpD7;!h+E
zaC6d9S9vW@+o<`Uca0W53d)hcakgDuX^T{EP$lYsdL=DKE~nHAQ6bhNRq_f{O_>>n
z;b^Pi89Henj6ceZDYi1ZxJt4$y82qGQ)^zIe#KmKQ&~B~LCTzAF*roROb#gvJiU(m
zP6Y=S?)jh28~1P^&s%nse=SX3+EIqcCV6qBMO}zRo^!J{;<3}teQ(&9>^`;L_FPsS
zs4H<?cJw$Fuyk3*Nlyh<oW5O_g5a>07PS$*Slk;6ioh8xgbaXpwo~EJY!U_)KpIys
z%K;UXtR)To6I5_*sZq9=5cQIi{gFkxrO1wi7S&h0xqD^WaV?VSM>rffz_yZbjl$hc
z_0mIau8TqK0Uob!r!1dp&MT+sBmICNd~vq+IYteTEOzKbt6V#xrwY8?3DXRm^e4rN
zi7z)BH*^T+vZ6w<)v0lPNFpLn(<)$<W7NXheoMLecJHi64)n<yQUO%df=b7{C|(j{
z!usi8fdY;#*wQgy-GB4yP2as2(M#N5;y$PPllircEh>`PO#;IfTPGYerXPrFWh7wi
zkduOs!vTq(a;oVK`HyIUwgxTPDpu+a?(62H)O>lJh;E!@oLWMxtJRmuPf1BcJJ6Pj
z9FZ?XkavtN>TAgm4V5j8FG#pxxD-M{q>H{dxg~C=EQogTrfB>`g!n$ec;Y{iF}7iW
zn3a`WC`ifR#Zk|cJQ_+F@sND&q;;#!43H->k9#VvAWFlAsG<8{dAiQBi01wSKM00H
z%QYN3r>}XP78dL0%4N@1-l8oJMZgjb{qVQ%cCXE}3(SQFoyA0(SmJj+qG3pFI`!Db
z*VAk3Q#VY)e?G7rXdc)x6KYhPeZ`Xawy<(zm=Mt`yUS#*#-S8nkS^*H3Em~z&T)N^
zBf}f?2~1@<{4B>lC=d2M)mh_a-PhI7z*`-~UTmVJIT{z>EdHR_Nfc_w;xVOdHhCCQ
zURoV->@Mor4$9hlMY<0gD1I@?U`N3Qfi-d?<!7@@J8)xkv&i>$&;8x;9v5x4I~L7B
z0M&Gl>dGIgj*W#NF)0Sk`<OF?0lYPdU04ZzW&100jR&^lYBxs!R=KjVuf@Y8ARK7v
zq<$_em0+r>|EP#|r@|6!;c8C0kX?yb>(t}jkjr>E{}Hb4`)u@~Mij<98({Dd|6m_P
z0ApAd7OJBZ4()Jtn!=)eeWy%HJb#vOj-BZv(n`_neM^$oYym3mT?HmcxY71fuja;N
z9;uO(5hcNShehoToUu*w>V5>U1M<y(GST1u`~M1u=MI-(#T!7d^Vz||bH4_d9n|1U
zq`^q2QF4cIo1Z4ytGEdfOuvo$nnSOR<CaNB$jaErAhAvGHhZz1pk-gZNr39V_vikn
z91w@R+r(R+#DM$Gh~K~d#A3tEE+Xj1d)e$SMjmVq>LmX+v2yLTg&?vOvMJ)N1mVBa
z0as<ee-8d(0-0(IfcAw8T#8iTE-B1U;!ACIV80Yw`h$_TM(YD`55BSdoBsLFw-5f|
z=*b1%jBzSXk2gvPzA<gy<Bo2+??!Aud7{29^Ckt?iRu2mM?Wz1?tf2p<AfAo{WiEV
ztWja-P%bqOs`2M2w_<3p8smNElaco<wA3E_N_S#=n`D>9b+kaG+UX8>Vo=k^?=5tP
zlPLk&E5J+qkT$_Ru!~jgNt<p6=jLOg*R)s|tZ~F!zhlwgzW6`S)pUFXUwQe)pNB|A
z5jmP5k*vEdFO$K%^234@^WJd#VR;5~lN8N90z`>|%m5Y_dZwc?EYHy@-cLv7RbK5#
zVn%5NYY;{<(<)D@Sd|LTshl3R`Ilc7gxJOPLBY^O%2*dF&)n4Jmx#19Wd^HMc3R5Y
z4@;A1LDFhgP!o?Mni#+^7ZRhWl9}-*Rf}OlZI!|*>2<Xx2u_7j+(M->p_()uY^hWO
z&#qlu<9(+wjp-MoJ`a()p(z}>mLDxvO5&8&JKb|u8G@uKmEgF@%nU^_9Oh(>iyc;u
z4`V3Yo?e+T6zi?3-bqZ9s+dl7O0{`Dw5Vd0Y+~(1m3G^|XooveK_c>}Jsn^D(D&!J
zzT;<y0gLuk2NGSaIP?y+Vvq!V%iR|!CU=#~pAKHYKvbN)Zw@?w&lwuuyK<<OEx2K~
zS@9xuBZYvG6!A+vR9q?;615uE(_5luAPXJtkg&EOr45RNb08iQ{2bR`uvOF=q0%ds
zcsO?;k8;ZbZkv9Lf+(vyed1guFx4MIT^yw}#r?mz$Z#bl&`J^=lI6ua<TKZl^DWOh
z8>c|$Y{P$sh8}~kMyaC^i!&wP%##e316R;d(4C^JY8jLozgH2wyK!jKp=J9l&@MKt
zWc>Wp;8%0RR?FCclgYT5bQive7|)}+M7czKFBD{i5b+l4??_Q|=2Z9&AYQmzP=kZ5
z*b6=Kc||>Rl6bSCQ1DrwkX&L4di$1dPQ+n-10H;LWcMk87<%JFML>-@Sb@+~Ub&+m
zmcFJ#4;eoldkpWakuiHlue|9C5&*m<XJaqYzcBKtCz<*G5PJC@aVXTwWDG?_T$1^~
zke?eWHH`pT&^!BgzUf16VR}G-z{#RGXfwO4f=_!Xo1kDs-;6e!;Q6!704^-5I*+{9
z^c2X&*^*^<$VsDMce%Xj_l=T3Zt9EUADSDZ-4+UCTYD)Yz0=U)7*AwDPF0*J>}7*x
z+<&v=;;uRlh{s$tSaNgLueYi*hnQ=v8Z1exet4J=$9M59zu%}do84F&#Y!=zxS;kb
zdjwURlq|K_!1ILap^P+lVrPf~Q$&*%dH>j_W)ig@UUO}u!w^pY4_i4P(TeHlg%_bu
zLbh}^erqN_hy?a_q+`Shlx&pC5y>6Vm-*B{R5o%k6TUzY>0{Dgg$Y79XYKyc_wKAQ
zU381dt+nvId<|~_d#*gQpmHSS<FqWNvn6oC3k))e9YGh#Ns+|2$)X7+xBqHuZ0CUd
z^25>SY#Mi$TMGus=NI+*9TIswmtT#fE~f#G6IntYlxxM2U)a!XCjI!EL}7QgKuExv
z^LL8HcEQzYT6YU=5CMLj{$FrzW*{e1nIyUaMDiQM8QWDePo_C8z3Oo|yn%RJM1`+a
zybd|(1jLS;-)MI@mffpi+q5C)-;O5S!^QBi@8K(~D1qHA3t)ve@n-W+G=R8yS2y^(
zTB5zF!dmIinM{;eOh9tH&a%4Ks)U992VU)U@31E+D-+rYxJ|-W-hol()GsW5jh9rv
z4gdVT1yeUz071xLTaY|9vm8MO4RHmn@F`baE@ne0+0S0H-=^&3`xi=q*ft-KLJe%*
z`3k6*-y8@Y51kNkkugW*3Yglgm6>c3b<QTr;Y@->EdD2CJr3H%v1Ywis}u@0%TBiy
zI$2Iqf|htS=Z#)do`fxq`q?Rjs&22Ba3LTTtv54hrHGcwl}fdgO(xZf)vweC!(1s>
zDCBc#DH*Dt%c&qC$|oT!DJQo-{*p^)pukZtSu6Ba4vFRqrDnYu^YhhOD!%>v6YEwj
zTsb_97$_A2^utm|Wfu$<OJCql?<3LjbL^D;wm)ha@_)V|BJe8)s;0-<tLukizr1DU
zPya21ctb}*rZXP!Dj<{t6=DKY_PT9RhH=xHYYRe5L}=4hQsi`@DAI|&*HC>QO~D;v
zzk%ZCq7ENFjohZVOYXD7nEP)E`CZk|mXXxFtNP4n?H~Sf`&m9-d0zv{`_FfbLHug^
zhytgcM@)yFp+)t48<An|2o`Yk{zR&7&AIO`hYJ3WHlLHY&-pmS4HA%_Q)do+x_l2=
z0HsN)IS-M@4kmER`FBo>4#R09HBLh|QXl*Hib>xLzqkJFTaQWjgOL`gzsm$O;E8+u
zxmk3Rd3bR!zr++~hwv4~v1P_POS^kO#G9@De~X1I0LUx_f8?%430p8I8@kp?416z8
z>?dCT@zGC0FtcMPhB)-dSpxC%r;>eF^F6QwaL;(TysT-v)%oNSSiyl8wEh7CLB|IM
z2Yr1DZU9bvgSFsoznwBdFjvpqF>HvBJQbOieDFL$GY0tIu{XH+OjR`Bd&?DuzN|qO
zBuIwj5$;<hf35A5%he<Z;dy(rOw(oGi{kjoyu|VSdU_lR1k)^*DF4pU(Rs~4vET|U
z5KJ0Qf~Y~5hF`zC5kw|h5wem95XLq-5+BYUq-KUB>0Sg!jr?KRvS)k@hz6ngvHm3&
zI7wgPGkV^hiJeK)-3NBb^-m5Ct~+{|jNq?F{@M-RcT}ABK5!c)@l)Df$PA$hmcPob
za%t4Ro@BSDKCYQ<o$5<x=Pe_pQ6|&%jq)?BFnVa>+c7<+QoC5H%1@j0Vk<xqYQNZf
z2!w-kxgJY+xyR~axu<|`L0n=FaVU$KfEU$+8ZO0JQS~EN27$H^p^CFPXpJbtC)p?)
zXgbQ~QYni6#XBBuo%H<+lm1p+{FDw<i*=}&bn}jmkFD!d(0-IieVN_t^HY7<lA(mn
zt^adll{T*bubXLu^`DdYcI=U+4ZVD5Tj*c+#sB$s0TrG!*&Y($q_L?UtDIbqJF0a@
z3WO<a-;dChs#Zdnz4y=oe@^d3)svg=0igqh59<C6H^SDX4A0%r;KxstqHNq)kK*I-
zFAxjpsUf4_>F%ptE(X~&LkEN(*VU!KP}o%AH%P{IAn%tO1;g6z4D}4nUs-;fv>G^P
zkD)q4TX3hp9Lj-%-5sm`^$`&3j{qM#Q}Z&w#k>_Ui82Gj<ddP_6<#rykBLY8=Tp^i
zhZJ<<gHL2!ziD6MEBKso_|zBOGX`nFulaEMM)+v5Y2Lw;Ypza`#_JpR)M02iJqvMD
z4xOHX|Aav3ta4n&1a0P6yFH^_FUX&4Ag6Np(AbqQ3GD7zzW1#oD~4Ki1);icO9q)&
zyb%CT_oCw_ML`m{IChxp4!v)gy8Bnl?t85_xU4B;x?QKj?SSn(3Z!V*u-)N30xu~D
z2sc=~&{%S9KNS&4u%2KF6;>dK2ghVvrr_?^OscGmCA|D{C9fK4RuEEg{5(60g5ZM!
zhn9+u1cPi1(O7^%eXN}37>@6}YYr(bq6>o|A|X{D+S+)G$^Quv`3L0T>@3;HQ-Y=m
z==4FQ*;EG2iKN|1+Q8S#uXsqx&^ED*M%^4QYjo?<ELKuF@O6~-yR7gl_k%K?C2_x)
zI0fBq82Y}~71<hF6N0y_&<JBXoFZ;23K2&r>p@5T%uqtM+d~d&u2`%z)S~Mmi#4W6
zx5)qBZ7Q9q(!4R#Vd%<8;KW+!(^t|D2f)#Ac^Lo3yyD{v2@XRFnrIq?&k0$T)4-Fs
zgY^i$j~^n4NCi!-%@{}oG6~HvL{WH2bIUdcsPF2DvvaeY#<Zm|H{|1nAxStw3<lvj
zj5#VTf3gC@cQ%_w`T!=bJN!`LsH3j)5iVk#p+(KgW-XpcNeQzg@7ev9)^Ic_#0rwE
z-c%QbJ=jPC0=rl5M5(K?Qf-X2W@egfOf@W567eNX|2TI5owhMwD%RFnf@%>A3%0}b
zdCvh45b*CGkA-h&;IDRLtFHnG!qhM^f+sKdy%!LLD#<2j78#LL;IuZMSE9)w)?m@(
z0I?QjB-`;vs<Qpa7?vt~pRI8zI7JO7=;?u*CNz%*m=zBjbhJc}X)RnL7XDzu)^XA?
zpcfX{j+Q%{nnd>H^p<&?>UNZ@<xrck!tumFXhP(0&VF)a+mkEDJRISZ9ba@K(u2Y`
z*w?0ePL?6d+<eqbfC-Dm@&^PyH2k*8_1@pNrHZ!RkMYmrV!!Sa(`;_Xefw1HseQtY
z1Djf7|C0(30GjqbrIT-~5dJ++=?ehx;Q#Ft0N~L-?i2d{oW6t|YXC?Q000Q+3+EQO
zFaFu^|J8vbH2n>P9+q8F`~>7q^n7goG4Y$+ex|Kq49*+ZkG@F|-8U`yDPx%;nX1>@
zz=-<1_TXv7rQE~er=S9qutT=eHupO4I@#TD379gDsjSTI#@UQoc^hY-wQdUj1!api
zGtHPi9gjJl3E>Wrmz&49??84@oLI;fUo<PEeihT{NBcLq%?z!f|NO(jFkCiji*6K>
zVg<t<DJbh|b7&qKUE_)5jAuN=MlQ`Vt?y)y>0Z)WDrOngu~GHLHK{A7IX2hWJaYLm
zH##<GelW<pGZ0%@x5@;s2Gc55BR--7^+_@(6+5bli_*!?q=~FO`lQ)Ru6r8F?nG{b
z=l2G4V<2cUG}9+{sARn?w|b0hjFIAJUo!CI8DCpPge|Pb)Cn7%>ec5z0YnHprtMjV
z%={vS*5>hE^niY3=$gkr&xi#mw}=4Pz-jF#xx7i3lX)!4%*0uqYt}BUoY$1mR`L?>
zMe$v`*OS)9-OX-(P8Tn<IT^j<_7g_Mu3n^;T(&B(auByp&F1dM_^@_6*@pPcbD|8L
ziX%!Uvj2{RD5Ez5L6V!}J6y;%uk<(fz{Zu`P%C4p>GVRaEtI-Xs%GA9kC=o9mt)@v
zMiye1*u|>-B-^q0qPm6j7~7r~w~rZOu~a|8QzS#}#<4?ph`t@MYVcQq5VO!1XN8}|
z&tLMnjb44?Z-I;V4mTg?{>neM)gr=_ohJrP#l1r*T?HjG8mKJnCtD*U@h^+^px(F+
zULb`;U#zYddoFbUEScVS7DHHLqMdVYjM!apjVilU?B<n!$iHo=zR#yvw00_d51Xs#
zCtXF6z+;@uiS+8pvujxV46zV<SY(B@{X*jNjxBxxv9;U7;@6zZW2^)AJd_{xzXYM>
z=^bqA;0nr-jA*1tW{zIsw{Nx?YXdv+2?lWmtFRqkt5drddu%=9)g70p0@JY<TiltH
z@AohH0Y3pA!?@%ZwJJUG#U8sX7%g*ud8mYD*>lSdA(-A|FjnX4Mw4S8>!<F_%c<g)
z&&97wNa?2W0k2HKXl?o7V#%6btPL9YQqMa(E$fIjhWu%XoO<IH;daR_ZU5-JvahWd
zY<anBN4LZdj8fMY^6sASZe3>5NWVu#L{6GXQ|Jfs(Ysk&)bQG&het;9NLxnbMMj7t
ze?xAHouBEk$NGU8cprKDzP442xu#u<M0%_CZl{edrfQ|?*999jjz+Gud6cowq4)85
z3S4EWyjS5emgx66bqasix7tNU&K4;n*5yK)(RECML7Q|`UgH<#UOUVd{TPtP(6^m!
z6Tr~gd8UDPnX=|yjPvSx(=e!z#+({mNgf~BgbZvnt9`mmO?oqZTx@(-r{j+Kx?wnO
z9QMr$H_s2z4>41Eq8=X_fRP`&fWf3tm^rMz2$l%SoqJVe8O&S^9w_b_6<!K8Y2HkG
z;0K!vK|l}x4GFSIAi{tJkPCp40&vfB2mk;n!EOjCrD0go83_lT%r3sY8wwXPK(_kB
z5K0pb6=SYpc)4OE;(RkKkMJH9G}_hktl1=V9s=;02!p_7jv?TbrG|o-gN6aWoHG)T
z=Z9gzrAbB#eBBKPZe<x62=y2_c(u(~0N2%q2d92)6d-S%QG!da7!`<pWdwdB!>I8i
z%xGwa%4o?)Pl(hXI{F)yG!j-c$>@n=p0Q>*zO)CBT;QcbD*ZH9g$aKjz#Ya2iGzN?
zAA-M@<!sSnHpvvBzyGgt$amLXv41Qw5YeAsX@L?XMI(-Zh6G{-!6&4QV$xyTUsn5P
zjxCWLC-!YEd*|fwKR&7^wvvpbXh#cC`N*{j*{(?M>Y0fw(2{nc5}j%L&J|aBtN+-i
z=m|NQh!C^8G?XdjYMpqt7~Ql+q3kXj?=rEi=4(xTaj%Lz_pwo$jTSl(OP6-ko0R!7
zQEle!*yqmjK2PK|Y-oBe%r6z&>SZ)+p=Is98c9WIkp%6v)T05#0Dk}*Kw-Pc^=mD~
zAGJn>pHGp1s-jJ#I=^y!7rW^s(R^#Ie`lo8!@K{`a&jqx6fVfICk7=jK&3^Tx%kb&
zW2K@LTs6m`4BX^33@*By1zd?o1u9X6LbAE@@I9K0&Y0vRH)DAwFZsMu;Hqot{q(!q
zq$tI_1B2!hBpANIrX)Cz`SDL_%2F;rJfrJwDA1UDDlE2Fl>l!93JNi#R0<9`6i@w%
zUudBV2_wv~!WQagA#N#jyU_5$k03%}!Xt_}l1N2}^r~1Vii<+~C_S%J)X}6W+UQap
zeGE+UVvWrrkaJp<$|7mPkM`?GH%!RiidC&WZ<KBasnAKhKLOCLlum+|4NC$fDpJ=K
zo1$(*>yZ<4ViR@N#Sa}znyzW2ZtfUiloS69BWa}_Gd)CiTbZP?d6GpfP2`Cbsk)X_
zV|<%PGuC($jB9z8+hC%7(!G@-vlUsHReFdpvOd#-auIX%B<rR8*m^0|Pd3G*){DvJ
zY+>}4#cPtOr;oqXdh)hBphnLsYUD3X-=kFe9|b>bimzl$5lqexQus1nJUW=jYAUW-
zUQfjv{$KU2(CyHj(B04=v=JJHHbbLnB_JV$P{I%iVTqJ*L`LMqg78E^lte`YBnpke
z;_w6_iA<r==nQEli_PK6$jZqp@D!DlRaE(E>Kd9_+Qy8VFloxP867fm;Pbj_dIp;H
z?rYStu(GkM!=d)qbCIs^jhBxh{TbiE9i7A&IdYAaCtra=MWFZhzC)*RV!CweVPE%8
zHie{m!T~S@N>#lu4ZUh97n!R4m&B;-z*Frf@QJJe%X&fyDH%B(`}|bYG_-W|42+cQ
zx0QvJjeSoUMFraKUMIb6y`ps<>(1RzOd`1_+|9$w2XD=0T}W6&d(Yewl2Xz#vT|Pd
zeE+T6uxZP-oeBG&yCLY)o|hO0*BIkuk@li%QqnTAa`FmLMJ0R6^!MHFmDg?wi-=;d
z?=mCnK5S=D@H^E+Yb{uY^}2J|Sex8t=%%zcmPx)sIXr>5LTL~5EtGzPH4LzV(mUOm
z-(_zh2X>ZQW~puZ+bq@+>-Nbft+vIgedaq)tMBd)M(ple`n!MHdJkwQ`S5(L<mUka
zqixp@5Wygs6u#|p3XNLtj~||;eQJqJq0-p5QPwwEY|j1hnUR%~SKuisDXXaR)sCm;
zRk(0_2vv1u6`00h(w!Apg*8}*4cLS&^5RBJ1vZtmAUEuluIh<~RO>+Om_O<|k4T}D
zu7w_Ud963_ix4YOFM)$!K;<`SX)_O*>0f%-k1KFL59o)y@7p7~W#nyAXV|?l5Y2q#
z5v_=WA0ZxTfm}d=HNz;s9L7f;4Hqw#*fwUB0{aRvEekFl%^p|om8uh$?F#bI=rL*8
zh0P@`T2e(q2BYlT`=7JC=vV2JgDjg*aodyy6mxt~a*lji+rKAT0w?hQ<*l_?f;w~{
zylxL4FT?oOQ55b9#rSKzM1ytwNmQvuO@=7F7g<m-Ls7#sbW-Y(M<=EI`{0C2F=cm>
zozb*`sdbj2GcVWV-dr!|X)irI{}c3CpVXcV$#8wo8;ad5SCRkM)Ci5G3;4qQK+v@_
zXqy)1-japM{UO)4YLMsRnJG%nr3+I+vISKcx(>Z?+!G=ZHjK1T_nI!W8|kw3s(0kk
zb@UOp<)VQxB8)@Av9njVneEd3OFQ@XEqxX}bcKeRR$?s&#Csyo$qr}5c+Pit=u`4<
zd#oyM-8V+>?Y$djpo!vsbUcROPBJtwAlQkO0B?u~h$T?C!t@4Ed<Y!}CrbV4taMBf
z`sHP2W!VF%!#{-n&XOEsS-r|fiIKd?$sQ@7{xSNXmBJ|ovs6yir!RzCV-1bd%&?+n
z&qZDJmzp^mX)ua$4H`7YfPvO-TUu!CnKK*QD0A=Jmo0i824DfX1ce#8>KbiNxW2oE
zZ^9YsC8^?_Vj8S44OX}cM`)`gj*pB6)WSv^9rU6HZFJB<L}n5FSc(B!3c19GD^Nih
zctI7QGO0e^4Lr#SXA#vRSoEZMkr`aMc)oRLlXUel=?cySV^6(<;XUmRvzmG4J3I{W
zYJP)H_oJK9U+ZbyyRUEbk!}K|z6_NB45{OF<I0Fktp(5;G~O;Ng|r!&CsqKssvc~R
z38QVSp2d`6Ra}`BNf|cEG?6hlgCC{zF$|Au`gF{gsF0>N<8E6!2SUpjssM(_IFwLE
zWTX~AYtZU4wsuh_uC(Yt=E;=+T$MB4{$PYrZB^Q$rC1eLW<^qljWSJS4A0et&}ba&
zG(l`ULenQeH8ga><Y@6X(JquRhuMp|m*VF@HM;YhPcvm2*M+oQ#)C&6tpFlSD5HwB
z9jquC9)8b!UsqyV-+8b6`iwHTscwb(ePe}IT*EdDCCcP9u3yRjWUJAzCBut`ZGR;z
z?uJ5$kT1)j-Xpm*dt9tsQuU}vLH+STwv^>YZIuuZk&sbP(XfHHTb;6MIHDAVhK7cQ
zrk1tdG4I+_`1<Sri5k1ZjVpFCrRU2YKL+pi$}hQ6tsV>pmJ;+%r*^to*gZ}Y2uLV8
zWN{*@g<<4#u}LYtDz_b{(<HxqPbpDK{-cv93ORWdZ(Sz2WCrC0E;o4HO3j(2^xVR2
zALAMiRcT`SR9Z><y5`Dn5OOGSIJj9Qn2>>jZ2>w+#H1vo4y}+5ELH+@vY2xsc8CI)
zsW2Qc3s6Xh8@B>%T~=cayE|xJ?T0E_Lz=Pmou?G$d|f39-><G|pE*i?P^Byf)1~rN
zdmXG8Znc4|mntFhQ0b_7gK~&zyfmLZt&*fnxPf={o><k}?zZfpxp1vD6Wjy0qeuoz
zm32ougpnc}@L<qXz@Wh@s`?<e1uogxsB17tS9j=LQ4x?%;PVu=x(=x@DXZjB*jh>$
zVaY`5PS|o$zZ7BG;<+WI4R~x*381lc%*Q4Y=<q;tqRD_GxSCkkIyu2&XJ~R>;<Sb-
zL5*}n2FKUjdsUx4{Ksc)PG*O1m-0W*s{Y^$B%CBXkA+_3)4QMAuLw-kv>$$GN*No>
zIsv;-(Vz{GTo&;gQ6DQuH@tAhwx50)b~w-YE4YXx@N3zQhU0&S7IIWSwx4Ug+pWj=
NOYW^eH+3!m006N9us8q!

diff --git a/apps/www/src/public/fonts/Geist/LICENSE.TXT b/apps/www/src/public/fonts/Geist/LICENSE.TXT
deleted file mode 100644
index df71062c1..000000000
--- a/apps/www/src/public/fonts/Geist/LICENSE.TXT
+++ /dev/null
@@ -1,92 +0,0 @@
-Geist Sans and Geist Mono Font
-(C) 2023 Vercel, made in collaboration with basement.studio
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/apps/www/src/public/fonts/GeistMono[wght].ttf b/apps/www/src/public/fonts/GeistMono[wght].ttf
new file mode 100644
index 0000000000000000000000000000000000000000..5ea4e68f394861790dd54bd633600fd2ff80ae3d
GIT binary patch
literal 138896
zcmce<2Yj2=^*8?9=aD7HcD!YITf?$EWJ|Ve%a-MB%eK5^TUHX=*@KWp5&{I8KnNQ`
zpp4KmQ%0aPr4T3$vtj;d+5NSQFbZK5C<O`u0*N2L-*X>HmK`(R&;R}Wom@SS&U44P
z=bn4+Ip?1HNMM2>Xz`&Ed>w7=p09T$8wBC&L_rWg=<xLqojf@Dr67EJL=ZAB?id<w
zc|GU#7=b09D+t!Toq^^-AxY>LSfd@a*n083<THIKzAwUecmI&BB08${7C~UI;rpT?
zf3yF{cdzWh^Xu__|I)RK*Vi2TZcGpo{DKf|Tyg5+jlcY#Gin6Zgzv(cCoDdBJ+8pz
z>u6k~PgryMin*6As}qFWd_mZI;R(q9x3TtN<o~-MytQNH^2N&xtw);C9_kdTR{}6`
zpE?=eufq5Im1{R`UU0R1FZxy^2(z=-oV0ZD7w2bJ34(5$AgFI$yLj_@X@l?y^6y7}
z{o3W57N2nM6ORjG?jn4*ty{cyx!JP+fFS&JuOQ5Nef>!%Z+i5-{67f7-!DY=t?M@~
zU%yhl<2=;28TmB=(Uz^a<DrvZduw5W`)fgxJ_1B|ujn`b=GTVbz3^T2#4K^AbQs^&
zf=E#Op`7#|`E}qq_q*!xhw+@3Qy$W%RL}Da2xoyhCkk=ArHIG)t`g_6%Y`V^aj`fT
zkGhpBTOd@h20)oGODXUhL7Yfrzdsr(9vE!x5e^9YBNGY^(qX373&J(@Tuc_9#zilv
z*<qmq^=AHGq!{EKK`QuxM9(Ot22<$!PhF|LWk^3%FTtr!cf{3)`=3gM$P-FbHk7EX
z$drrkL<`Rkq#wg8^ejXh>MOyf*JTB4rj!qO2*=242-lx;CH!Yf)ThWgBk$>1L}K7n
zPLt_))AyO`CRipC^))oUbRQZMx+mNzAGJ$u(S7y*MM_3qs+(|_DN((|7j&hzT7G7t
zyj0&$(Uy3G#z#a7_3Nju>yS4x0so2b0Hc1))E?pP|AFKJ{HGG}T?i+lF|`w!LeFNp
zMvQ-$7b464)IF6C&GpFZkB#vl%0wj2cSIMW!H<>u|MF~l-}{4Y5f6lThH#jkkH*o3
zM0BA35e|fV2$$`+r<93AWhq~zTuH(AxFDRKQPLn8kRtinh3}N84WcRGQh-Exs0`f`
zpHv1@2CkGZl-G%S6H+KY-P2r)LZUiJ?ob`2NTEJbeUZ=UJ^_g#QQmkY!qtvM<tV=e
ziP{XcMRieLYL~8rAJK;TLU>;tk&19nxP<6U*H|Q~V?jh3#XTkJBh5X!57kF`sjXI|
z&=}}~_wBe+n>E2i_X9|TE6tHmU#X6Iqy{9qr$pmSZ4rJ{hT5hwL<4Huj6}FnorF)Q
zZMsssH0D$fjT`la%Fwe+q*+LHNQp=eq|lg!#*gSq<)*`_?Vpo~zkW`l`Y%U%18EP^
zO-Q?tZb7;Z>CWJl?tgAR!abCdgZJsdEAb!Eladzc=hpdi^U->RBxBr;zDimat~<rK
z;~!4F%BLVtr8xK4>qwaQatG2@r28iG%HaE>&*HfeaKiU9q%VS3x+mJvl~Ra*>HYxH
zcBI`%lxIyaeTr)+5j=DsDofvYAQ9hCdp;yJ(qqANA+D5wBTv7>mB#D=q)U-#tj<F6
zBL$G|MmilS1gCs7w$uk|CzQUy{U=D&9;HzID97b6!7#Uut_2-l5a)is2sHUS(tdn@
z3uzRoOQCNht?54eo#?%HGEW#D%yV>|GFEaY>TSb4=zbLV$>2lE8yZKtmun~Mk;`yD
zfig)*kazNFNLD1wO?oC{9O&8jGw4G!Qfe@T`Wl1p*}+85P`~hRq`S~}6%xq@8V^d8
zw*ZOOiFhPD=XKJx5~&%9WH{RAd8t0)_YltmA3iTg&QSaFkUYVA`i{Qy1X}WZ;7Q?B
zBx;Xj42>=IVI30TLiINU@8{z>7`zAn3pq$M=g@a9r|3KA#$`9PDI#q{N=Bl3C{bQY
z1PkF!{iN@d{}LqXf2dCSPIVG4HAsXT!4iXs$`I~=PyAK6a@kM$h(>gU>|<D4CSFsn
zbkE4T+N~tI72XV{UAU4xwL2ocg!`RHdyu|I`Y@Otz!kQmKxI;cS0AoBkgh-~M1rj+
z90Lx!(aM|nw+l7Xzn4(s9^nC$-zyvwJ`mpISj58`gJ?mLkW%qU;8Z~s9gpiVVH@nc
zErLy`70wj)vJ_Ur%9)cjuuj&?&SaOdE7%L{V=+r~iu1$=#D~Ra#J41s6fMO`$x@+I
zBV8x`R(eP}pvqL4R4!GkYN2YWYPISV)s?DiRM)9)QQfQhlj<SW0o9AD*H!PSK307m
z-<WI2Jummh+(&Z1%Kc8Cs?XHt>W%sWy<P9nyYy}P_4?EG7wPZR@73R@e?b3;L1WMv
zjD}&u0>iHjHyG|T+++Bo;RD0JjG|F(OfV)JGmW{%5@V-vk#V`nVk$AckRO+C%3qoP
zi5V<pjx(p4v(5LK|73o|{FwPU^NW@<?UFsouCr&~zT?Qm#003I7wm!y6ugV2u`*W4
zYFRV$G9T~#^Xz>wJ>2`J#n&W3QcE%DeSuUJ?!BPOQst}aRBfsys#U6us>@ZoRM)C*
zR^6q#U-cmG{cEa2s*hBkq4)aSZRq{OxnJfU(WmIs_1Sto?|p^7miK;>e%qAZr=j;l
zhEc=i=>2aEcN^|CydUm;Qbg~UnF@ICW6}FX`Jd!ZgnPfwe82f&^8xc;(fd=;`)GSA
zdVh)1d-i)!;J82eN&$Wr`jc;xmkU=4mnq-)XSN_r$a1}Gm-FN-K^X5sS`+a+;`Z1}
z<Eqft!ydYO_X*|uq2Ay%|ImR$I}dfd``o*K#J}qfl^il3$~}~IDD9npAoulx@Xo`y
zE_iqNUEjO?@20<-`_8BDy!Xx<fdB2Czr6FvJJ-Flm1_FuO>fJB@b;~5UGbI%*POQ#
z-;Q}Z+&26%%?CIBt)FuKtpnbYKVcpmgKHz5?PmMM?c!c>pSWLqTzpA<h4M&cl3jAq
z9sPmN-I7P@lLm3`S7038hws~v?v&n<4oUAzpGaRwUrL9iZ&VPol!LA+l}e2}wJI8)
ziK=83X0|F-m97FEfA~)Y+<8LT>3>vT=ueWBPD<!K{YfNG_#fdR9g)75&`<i4zE?pO
zsNlbXK(LA3==Bi#`#Ji3j<`%*E)IyVi5=oX(IfiBPO(e;r}(D$w%98Yt!4}HkQ(WN
zNyrzhkQX&VozNh(3T=W{@CyN9jxZ`L5l#>`3MUJjh0`JRSBk^piQ<Ri5~)GBLHMn3
zr*OA$pYUhlfbfj)tnd%vb;z!Fg+sze;IzZS*TQ#9U{NfQC1DooSdO>?qj7@xzGxSF
z#23U@#23X^#V5oECAatx^NDAQABYc29`VoOA<-fhN{!-wAfNiB4zYj@h-ZnZVv?v8
z`{4Bwg(x8wQZ5FPFiFT2GK4H4Td2gGFBd8VozN-t3Ee`EFevnj2ZaG)jj&Q!C9D?C
z5Qc>b;TGXW;WxtV!p)GacL={19u)p4{7Kj^yevE~ydb<N+zZ+LsqitpbYEZvena@2
z#V|FCX0uqj@D<AxqJ>)_b8muo>oy@l_??g}+$E$4e}JECub>s~5z>TxLZ0xDkORrB
z7akTeh5H4I@PuF%9uta$ry%j46v~9Z3Z=qd1Se#BmGC#ATKHeVAv_0}^_oyGydg9S
zZwbx9KZPdYZJ|YYM`#z`6FRU0c!c+bF5zE-PxuU8(f<fT!heOi!Z*T*a736Vd@GD$
z?O7;{3kxt4<_kxK<xCQmF;Q5GwQK`R5Z19c;Y6kp*0XqFEsGUSVzY%)Sc>oqmVq^6
z8_N~8Gre#&%LAM57D|Nw5ekII1-EceSR}~83Z{~pr534IYL)7xHmOr;mztz}$&7Ww
zDwRsbl1Va3C6J><l1(a?D%dC+W9P5{`vp6LZN=(y7Te5DXWQ6PwwSGDo7f;5VtzKv
z=CKhrpDkbu*&?=ttz###4QxHz$WCUbu~XS8YzsS^ZD&`rUF;h6D|S7*0dxE}>}GZg
zyN%t$_Obiez3h+de)b@HfbD00W>2!G*p2Ka_B8u7dz3xG4zS1A<Ln{!FnfaSVYjlo
z*`L_C?0?vK>=|}G`wP2({gusO*Rr|nI(8v@mR-c2V;8gM*(F#jcd!@PrR*iPlf8`f
z<8SPj?C)4Z|G}<gudu7wt3t8xv~U{J3Y%E6a4Jg`48kMAR+c54$+E>Q;#P69c!u~3
z@pSP?@hQ<KJ}o{1A7_e~CVngaSNux+TKrD@UOXaxDIONT5&tc|F1{<iBR(tsMSNa-
zhW$&*ky52}Nh@VYX;P-7ld_}~DM?BeSBa~|_2LF`op_SCNjybdBd!%UiYJSwil+(Z
zFaw<5Y~sATRhN=z(1PDw;GIG6#X8J_^Pzd%h}rwBAhS}ejqO+&$Jk2r{3_7wPEhMP
z_8NPi9To*K4r^sTX6y>gzz5KSm&LclkHo`RGhNagX^FH>I!C$;tLE>dKS@tWFG_Dn
z|58P%l2kd+9XzT5)ne6J)n?T>s-3F6s>f8%LuYtj^+l96sv~MBYGKq#QNM_~B<h-|
zo1^ZE`c$2uu2ip8->AM*eZTrK%`A;pW6)SNHJVn<Ce3-8%Qe?)ZrAM7yrg+k^O5Fo
zv?@9=S|4qVc1E{G_eU>@K0Er-=wC<wHu{gzFGYVC{bjT~D}Gkytb$qYS)H@|vlh)-
zKkFB>&Y$)BSr5#5YSv3JVoZEYW{f$eJf=RTH)dYUi7}_doE`Jam>Xh#AM;4e^D%G5
zd>r$2Y(s2UtUq>P?5fz!vFF6@jJ-DYw%EJl65?9oHpFd-yCCk0xEtc`h<jsp^6cE%
zOJ`p_d-v?$&Axy3le1r(eQ@>%v%i>qG`=j}8-H2+weh#b-yQ!@{L}F-C*&kFC-f%F
zOIVh0X2L}YS0&t>@cV@Q2~Q;aE#a+%j}ldhiHTW>j>N`9Z{mu?jfrO_UX*xM;`51L
zCCW*&l2ViMl7^GcPTG-lP10>icPBlX^p~W+C;c<IDtS%v&B?E)2r02CX(@)36)781
zwxnE;az)AwDX*n`otmCnpW2x^lzK|)w$w{fcctE%`iIm<QlClvd+I+^KS@2NP1l;V
zWm>nkL%T?OmiA)p)!JLMcWEEczNkH@{XqML_DGtP7N6Fg7D!v1wkGYgwDZy~PrEMd
z_OyLzkE9(=o6yDRv^u@6OjoOG)A@9xx)r+Zx}Cafb+_sMqI*?$NcV;AXu3K*DLpT}
zIK4K#EqyS3QTn>{E$J7eU!8tS`o|dw8M=(7jLwWX8A~(H$oOT({TYvD{59iX#&~9D
z=KRd_Gq1?JJM-bp*E8SE{5bQ!SyEPPR!UY@mMhDXwK;2B)@@l&X1$j^JG&s;o4q0X
zy6nGYPvmHF+&LR^PS3e0=a)GT=X{>4%k9kFn0t3#Y+hmBK;Ef&*XG@v_h{Zb`dDbG
zHToufkN#Z!<@#UgKQyEnEQSh0w_yqNvtJo*fp+?aG0SK-))_s<WyX_?JB+s*4;Y^@
z9yA^@equaol1%ZYW>c4Gjp<_39j3pTKFObzZ_f|pUy{E+|3Lm%<^prMxzX%32h2Oo
z`^^6-NGa$oxVhlbf-fvuOO>V9vf6Tq<vz>9mM1OW7K(+A!iGX$;l+jb7rtI(DOy~#
zrReUW!^H{3oyC_G-%<Q+Nkhr@lD#EgS=+29TmMw5DXlEMtn{7IPfL%Ksmc<|vdap~
zD$AP6ddl{dy<hg9vTw>JY|*wPTc*uqv)Za`>usBD+iVxwF1P*4w%c}x?QYwC+gJ8k
z_6&QGz1H4kpJzYOe!Bf4`>*Z4wePb(WPj5By!{pXKkXmc|7-ugysCUj`Kjf%m%mqj
ztfHjigo?8&o^oK>!oL(piNoVq<T%4|v*QuR2bH?YK;;RQ=T+WV`G?AfD*sXWO_f-c
zTxF_is_L#9tvaFV<f?P3ZmN2y>WgY~by>BydR6tA)wfjdt3FWuO7)@Y&zwf5$GOV+
zTj$5lFP(BtOifyiv8KOfMa|ZlyKCO7Ib0i6tE(-nt*h;;onO1Q_Tt*BYkyn&aP9xr
z{@WGp%6C~^PS=2If$JpKX4g5cn_PFh9&^3s`lv3cuDfn+-QK!a>JGW1+<JGtyUV@I
zeV%)d`ycgD^@jSo`la<}*6*$VM}ydq-B8`Ipy9lRhZ|mNINE4#9B5qAxTEo*#*dqH
zO*Ku6nszq5-@LN<UoD9(tu2qW9BmzF{Z(6fTYg)6+y3_W_Tu&{+duU*dUkpq_I%{|
zx<lxg-C^vg>geydxZ~Q6$2&ggjO(oI+|YS>=hI!<uBBbOyFT}3czeB@z4v-w@qXg{
zwmYHQ-QC~4s(WkqFT3yTezN<m?vHwsdh|Vxp7VO{=y|l~?>+zNjqWY!UEBLmUtwQs
z--5o)eOL7D?R&cKoxbn-Q~PcGEBd$f|GNL_{;zzqe7U|VU$<|GZ@X`o@Atj~zE^x7
z`{aS7fr0_oK>xt%fg1)l4gPZQ#=*UV4-Ed#;2VQq45@}PhDwKAL%l;IL+gf49Xfkx
z=g{>-za6@7=&_;y9s0m8_zV04{ssP%{Ac+u@ZaVCU;jJ)|M<Tjo;92{Y#Oc@t{?Uf
zFC0E$_@v>}hPMx2JbcCQwZk_L-#NT*_`%`Fho2w*$MD<39}a&r{7oP^&<2gJVqz70
zT+&0cg08PiG9;M|Nrnn`xqLIT%75P_-G9tmLCU%aeM%4;uuDk#A8}raNs^pSgD&&6
zO|OmJe}7Ugi_aCG9(ReG$1nV=-w%6`mymXd1<-o2Ybu$sX5SZvUlxWJ<LONBq91@4
zqK?V@zX;Z2kxUc2p%-f;6SStu=acQ{PrMcZUmI?}G*sV2nYaj=LI~dq@;rp`-5Z9N
zOu=hs7;YsvC<Xe6ZJ<;F^ixpE03q+-$&h3M$sF34L(I2#_wM`TZ<3$1W!@k@?f+o#
zUw-kF@k>BBm>1A11<{Hcl0ZWf>PT`_q-j&tYExB38r_&Ij*9B4$^w(ADs(gQ%qgc8
z_f#~@vu)dO$&TKx9`BA*y=`sYQ^luOj#xc~>f)Ztu~mL|b#0U1RaNc6m=sKWfmU9D
z#w<h`3ks?#tE<tDPE$}|GOE?u)U-5I?$oK(tZewy`ubCc7o3|mmNZmT+gn)JTiXyw
z7)?1pab(ZNllP4NVx79Tul4M)(QU1P;iyy21J!u#eDujbLZffx)K}m%`U<=V6r<59
zn8+t=f^aqTSfc&(+=akf$qn2k8hfP{6TwjvQLX}%i{Z2<x+#PU6Kv#;v5UI9FB%){
zU3v1!D|^MKhi=-q@y0>_1s7a!5!&PBCBlxpMj9!^gZM`E2H|SSd7%cmXMh3^s)P2^
zV`=0J+R(odcDKBT^~w9#lHiC3+e?-%MZM`kD!GL}hT)fo;YF}_W`Y-jM<(H0g86AK
z?1Ozpb7A8Q&j}t`ZnFLSiBBT(uM4+d8p@A3Qp4$>;9CKz(>U=ybGj*TE8&arpz(8q
z$1((CkjttJm7KvemIg62JeG>;>M8>mj#Uny-ozd%@zvD#B`rwxEOO5|qq+68zN+40
z`IeIY#L=5q*?KlK4z)*juBZ;|Ic?+ZBmUaeUhnE!(0v)`o(;OgHs^GACRspxXVNmZ
zU*2f7vMuttm{fzs@`Khvt9&y`5O&4Du3*Xxm_7xnotS1xCW|g!WX0X5v^AbO)V#bc
zVI--)(b-p2++XYHDi-hj-ls~BFYiqpy6p^12-gX%>K4B;BdQkG56Zv3Bii93NyFRZ
zl*;ELUJO`>ql+WpMLz&9oREY06A5>W5Y?lWY!jjRQq1RtQoAXf8$Fds<|*(}f@6GA
zK>;r)VEic>K#Ood@>r@2T2|uU>hWy#cdTeh7)k8yaQjP3{cdMp@g4F-r?B+I(LEbB
z-acA)LJKI+v3*Y9><;_<w!!jSZn@3lp%@r<aGVmjWWyk7l0e=h9frysu(BQ2K)@<*
z!cfV#8;xw<xQop<8s%F+51Ma~tmp;FTD4Ruj04K+<CG()M&j!O+JV1Uj1JC28bF|K
zN^)p@_uRww-*b;&%=P=n5BZ5|JSUe`HeN$$rBdJ|4HS52<x$`yeF#poZR*N1^*Lr+
za4e^{6IziJIE{|dPH08)VYU_X{wnYa@^gprrIkm4D=QBZ3Mal`GJ2e-@Uz9qMR*m+
zo2q6ho|Sc?U-Ejr-GMU`-6wTN2mHgs>@~UY)C*B3%8K2b1~ow%yvX^C;A5P+3cL`0
znES9s5!LNzi!=vFI%gGgFf?S4oG@rBSIKDsR(ZtD3Jz^z>!B4uGhizl<Po&QOY#~K
z@kKIr;$z;Ddm@o)M6U=Aj{btUWm%A0)FE!sE(?^fOHttxs~@%T=NxZDKcP1B#HGBp
zU^&!AaJ6JvN0eKJHXtLyP@9&Zxk?*hXw8n#(Q*Z#1?XXdAebfMQ0P1<{3<c^`O$&x
zI|_Gf4@95u6AQ*K20r`6PIUCt@q;J}M(1k)VzID#rx1fnNuD!~1<p8zoY#xXkaOAi
z^=O;t<oLHK_y@Hl1x~!Dz(XsM2R*>*5`=?FoFkOn#1Tqvg(F14GqEbT7HPo~TwCDt
z*klf4#k42r^?`wQ`L7(kUH;tcrAwOoc17YDl;jnV6bbOMMd}NDedPjNk?UM>U{?Pr
z_4TLtl}{%r3{L);7}#^_<~@PHp3SH33HY10&7XgEOUv2w=WlDKaUj`P!D->0LJI{>
zv{2xod8oi?9uoZcc{shk(0o(i7l+H4Cl0}TNIJ?oVP6;znvY6*q4~(mahXeSwN%S#
zuhd4gS8^+~mxLJfrY}e_=!`lesaTGRTv3}EFHWbJ4w5OPC;ol$i6<_$b=cF>?H#s~
z^0c(_l42+_6*tOvTz~!DiI3iQ-+}677Y+_yu(X;;xL{jL%eDm|Aw(nBB!hYo@opTv
zP>TMj=s~6==tPR@IP#izo!h<6yM43Y=ksqCpRQco*0#7({*<k3Z)ye`DcTgx@f3J>
zF~dV8aT8RlNOGV2*Z}?>d(5}q?OyLY7`WQs*4o_ccPwmcTUvQFxX1+=Q84ik^ru&F
zmqHqCl;lXUOzNC7^Uz(7jy?MJ5Aabt)5`y@`e9}Q=c5B@z&(xlHLO8vENN*voyk%r
znj%Qyd2Rjnvd#ikM~6B&kR)YPm0h*n+t=saE<U|sX+^J9ic`7Uo_owtlp-Hu8(Zre
zT8LYD3!Gc$1i3YvOCAMI+^WEfCcaeQn7P0x2*=D-k$kg)OGpd1hh%mx)FP-um`%Vk
zsFXt`0meo?w{*lnP|BU%n>^|fjjg+)qRo^yJmeiMs$JF9wX!~XL|xEgZ|TeNw$3@B
zv|(Lh!`e=DmA4?H+-P)Ib=r!~D)*?PZbh@Yq_v>YVJI=Aq`QaeY65oZ6~~A7YBboZ
zB96TRr(P-WkbYtf>+J-G-hOzpmdV^9t;Gr&C|bUfo7OKzI*Hhbv4a29k%T#7&}yoK
z9L6o2psnL13MA#P8Dpk5eW$lJZ0J4zd`FjM{#fAI`<(Uc>&5HG4v3ZW8=9BZ_zmvD
z=8nE6TI%K5)B^T<`Dz6#7giY81Q>f=jDB6*2rXbI`W?)H{w?ACaPqm$p?s|(=%hVR
zh+Zpem6BWObs>5e2~~RM#t4&Mn#4z#uf}9q1(#*(`fY*!?(Y7;w#1!huovWtxnpB<
z>3RlX#mn;1IDxkx(o7UM(N}>N<0)y8)8QdWslZ86QvTy5<@9z!l2U<_q*TgHmz2tL
zl9UP_AxY_m=Ax{#1XoKHg~Sy~ZnC76+#yR^fs+JP;30j6)@7&;<eP9nVqo=^4!<(?
zX!@gLuRyMB6n8?lFur<IF09kRTs)^qa!70XMp|O}#`<DfM*6mU)4eFQMr=dm^;KAZ
z?c*;2C*B69@X1pstiXxF3Oqzf1x}PC`0<pSULU6<uncJvWEG~MGw2JsP%550u<Xh!
zmmGL<*)`X&<!rJ19?Ow$l&@z7`JWMdiycoxl2R&(i3gY5eDjjmn33Ho-^Y67G5Kwx
zuEMM2?>K!*PbPU-fromcz^Nw$KfWi^>kILO0;kbZ>I;olsE4HUR51ft3I=Tj+aaIN
z4$7O@RRJ;E9~gh1Yur39r}|k_a8=+$bp;;MdK5U}s=&EMEns^MJ6v-y_EDJR7HBpa
z79T%1o}KaJg%>_aG?`i7n?Z-dYDaRLye{#y+VK^G)+G%_DRQYe)V<o(=iR&T#w&OD
zJe_?z#HSsL+Pn+W<(FA5tqv{q4XxBNuZ{Qc{9q6D;nl&)C5i$sn)oKXI-qs*kl<Jy
zz9G4l3)$hq>Hx_Y;iH*up$3gJRyC7hHZ%siYzCuj^$N1dfGKZ-V{|dcG$c!=!$W+N
z3n>SjfGOn<X`o7O8X={Ykj<mONkS;_kc7wtwHu@}04MLDMXH<l1MCWoREHhbkUebW
z&lL|(9Y%=Yil>3vAx{I9dyIQJ>V(A+o{P|Ps!#Epkd{`=>%(e8?Vv8IPqDoS50chY
z-&8!NKBxK=NvmjmRL(nNIYp+?bCPMt*Q>}0dalTk>Fp}BjGimAbNX{-M$mI*MuhNE
z=uL2i-W(3vRZkp-HIoZFA0?rSk}~Ra!iQ*7Yb@OJr-jSU;n2d(h^H1uP)DuOa9`ku
z6~3~8Is58soegpG5;lx1T9ue+RA<H+ZRspgQ{^kD?##cry4Vqy-(1qxos{3!QeLL%
zo`3T4H<RPNjHQ)ZjLtl-xz$>xk0~;kNqbN*dJUM~01Bxkb0*Cj1^Px9TKvUK(4rZk
zg`ZF6{hweB1(NA<s@>$9d^Xu;{xg%%2f}TZ2J0z9^hRzFs*x%XK`@#7NH}*%1TF`|
zQ0o^65fPF>bq}acd%?9rlcE8T6#(@{YYKZ<4Kt1hC=WBCDmVg82ltz?TL$OO9jxrM
ze5Wck=NMv!Q#$0m`7UEmOTb_<W~=?PyPLe;f?1tqwu1H|qw(qANQDM-Vcg~Coqw6@
zlzEoHc|~^3T(7>Zs&US&IG?AgNbUEZbkhAEpLd`qF;-JzD6|~)wYOt>3M0Ut^#5c*
z&oQ@X$brI{C8V;G7dq%IX1&gUPU`We`kkH?PUnj5*52Oca*x^E9#>xCgFDAi)wX4L
zcuSja)#%uXwz&=Nd3KU<9<-7T8cp>>hh!WvCAp#Dd~+!VOWl||c5YmUqiblW%h4S-
zH@0CxT-#Q^e@lDGV4b?E_QbKV6Wwlg-5fiOmQp*7_?-%uIVYjSWeT)twgSy3Ov2D|
zHdEfhxJf8+nNou(jwn_*ahQ8xLKF*o)wu_ek0)2{Ns~=YW3il2o*I9Ozeh?7IPC3a
zv!}edw>M6qRFy#<clk=nefD|ohPk#A$3|Dt{y-`y)`xLPg!W>bv@FwfGq>V&Xx>}A
zZrx%>J8!0=tk7*V))!T`wX>33e|6lhv$kD5Lrd&jS*D(%PeHHS-JqaGav)kI2E6U&
z-0?Ty6Av2;x?GCItdq!Yapod)B5d9%_6l(_=N0r@PG=SAi|fx^l)CWTf&4GK*1Fwm
zyPWfyjJR|S3{Vo|o7ObRmu|bwAMK6l-SV4-^4ATU`h6!i*t!E2|K>*D`~|%uW5dH^
zMD>;+2kA(gi(DtQT0?k_Nd{&9RCTYdt6SaGzRE4188y&e**befd&=jmK;2hY-ydY8
z<}LFwh6Ck=nvPM{-rLy?DkyExst1oZNh`Y?hQ1z#7O7`~7Di1%p9<!MT-qa(Tv~Db
zGe9FsOtzW-_GI2ah1)C*=Jf=5SHZ8spB~1KxL<)<)iUTsBbSC5$LYmF#ykyJl|m$1
z5mFS=F;kdcY`bc(y|N{q=p`Ri_q!VU#oYESe*e}sB3NM9UIc>45A}5Q(5R3Gr0j!`
zW=?h;TpVP<Nl*>{-qn5Qoq2{s>~XQOquXmSj6cVo@p`G8dtw2~<wE9^Dx(?lV^%3k
zQ)r_K%nmzPf^ewjBTEyisCKLY!lAytvp2<G*?MA~>x7n?dC9(-mECQFjG5cZJiYxl
z7kJ9l<`S1HP+ZZnsk`UomP)H%PR8CDi(feC>@Qh3IJl5FU%`Z=!~s6$#e6<YhZfBU
zEgTQmAZf!jl*NXjBFPS=Uejb=MEiuGrQ<Z$skJsxLxPoD4o@Vh)wDhbeY-z{CKgx}
zAN(A;eB<%RD}NSkAhnlasK~pX#&zYS&~6Ugq{=K$TIP?5v3rVY`-}X}nkMYD$*+pm
znk>g?o%}mi-|Ox3%1?sEWc#BY^!gdl7}8~8CyN1GBskYf6?oyqlCZvJ=d^o{kBJG(
zhQzfvyO@kS?u|B(Cz>cl$?TV3W$(zvEKf`x|IF*<e1;Z$Xu*z1%>qOK@)_MpW1~Q6
z%oS*1&LosZjG&mik8+*j%;TS7?nacDtUdpm$-FeiO6{deURcY6;Xa{u^ojJ17r4Hm
zU__dQQpTD~HLb(W{eE7C;%w3CLUbnxO@>Dva}LWv$jxA)Ik)Z(i^bpRyMtx#@*3@8
z-1ui*z2X9|SE)@@b6QYs<O#i)w~barok-MBS}8;;$_^*?C6pabM-p?uNU~_OBYq~X
zfBB6Scdf)=+gQ%K@{32-U5wE1?|_=JxAi)&y=Y>dqRYdQQ1&+n4od>2Bj!Io$X~+y
zU?6rPCs3MJ8PTMC{noR)x@kzo8hyUEyKDRf$PM&?m*W=Ko54P$@m7NMp$`h&g7{gU
zAFV4s3WB5c_;4+p9~Ed-YBYMxwQ<bC0?zF^MPb&N6umjb^AK%8?#EqWuM{(@uFU38
z$INQ9H@W<|daXXipJTwMn0%^O*WT9B&^dR7yqozuYO`FW@?Ff|=H@p<V?U^%;xd|S
zQQh?Ug%<p1A*RY(R6kJcce#sNEMoEnvuyRb)uS~u!@Rww)^hm?>XT9z@!}!gQ*-eo
zl*U$p!q%p|pbFXzLtzz#Yakv}@>)@kh`g&fj<MXQ%egJQyD$^REN3X!==XW#52vHP
z%WKYC%6A=R>;u|zVa>_~JrWRgJavu7A`q!uFsq_Z1V0sZg4T6tp3thWSougpq(nVa
z>LuEI6hRvWO0-d+g?x8afszy;DCX&IKJymMR8RhElTcd0l@jJdwC0=F(K@cwMzTO@
zqcqsYm*}TH46Vj7{!m_`zmk{eufh()VG&C(tP2yu!Cag!e2?Kc>mmeIXcbaHxj#8%
zSL_{}H*c`2%N$`>9O#)hugBpnEc7}u@>5dsGt%kvz;B|8Ovb{vYtGzub^WP<f}lk~
zT4d{%fbYx>pKV?}v{n1u`ue%{ue+61-3MMF`;%}*q!BoJ(vIK;r!&bJQV}^`zCJN7
zb$)&Sa=U$be^E#Ithin6{r&A_t>*l;UE&>^)eTL3XLfa+*_T~mjF*obTseRKO6%O_
z=DAjIi_#kHTqvz+CxZ>pm_>`GrVzmwNGNM4=v`vBFX^rIrC;uB&CP9fR=4Hlwe6C|
zj%J!um9|RE2M^YaR#c7Fx<)I@M{8*oAchJnSg>bN*vO8DtDf7}WasHLP6u?9P-{?9
z#Atuqtn!W`rDqNEQ{u$FPi(FE=GHQFa2Jb?H&$dT%{4WsH_H`Duc&`m-^l-wjg^j~
zixfW<rzBUcNC5Fw&!K(a6CEAXTC;YIr7HVvcD{VZelhucv8|~mug)qTP!>V(l~NmV
z|JMrl4-nTXP~v_CT4do+E-#bAP}{pCr+nZ+>V4T%UF|2gFRI&@)vD%3cQn>Dr@39d
zbMnhZnp@^oM$c6ns`6bmnJ)X_NWODnoPD4|U0!3%*X3$s;)@ze$~uc}y=Cg`l8iEA
zmOdqVc9Gi(;sI*~6Y2}r8=7TS!dih+UleGOs6g`x>oBxjS)F-bCi50@`_G4dN9MIb
zHBq7q^2L|1Tg!D@8fx+uTDY|n4$M;4u8`%E<f~rXykuRVgJA>a+|5l*{lk`Cm(|+f
zaW}X-**C3As#XlP&525qD*V+8*7zElitF<Fo2qPeUCnX~=QVspi#vmBBX$&_=y0zM
z*L2S4?eQB;JE7{l(&=T#WR=;ZXglB=@)w0lrofv#t!xzWO+<Nl8CyA}j%V81LbbpL
zCUO1~7)(nTdQ-9Z1#HUtNle6gSss64N?kMp71%)mJ~(B9!NO>jb8EeV(|QtW!{QBn
z16K7B@O-Kw;gmirs*S0N0@O793;fR7hEBh4cH&6f>IH0Ae!RD90CXPz>>N#V2k|to
z1Kh#jD<<wRDLhRzW5k2d;_qgH79N>|Li+Q(kp92s(tqCMv&q`?U!H_Q`Ugvx-{8{!
z1d{#=K9K&wmP><el!=+JeiSI_fV=qmtK>cs&Rr6LCsu`E9agY-Xs00=k(zuz1RD+C
zJ~ejZjbl%V$#NTec>FWu0VQEoB=cA)zO6v}5!jB{dg54n-(X++*veHN5Au81diiqp
z;P_`0xCX41a@0@kW)T&+CZRxyiV9R&Efpxyi=b0i%jxxCwFFkxz{&`$f_o%7NKR5L
ztDksa$t4#q+yB^-E3d@4Ch?hP<YV%eue?Gf_^Ogj5ieZZbvm)_Lw$j%cyWDpmL?_V
zsj=T&GxlnNyK0v=DWyV;MxP!W|6K`rvz5}+8%R>>O(~6<0;S$4&_XUT6e#tEpy<sl
zeDs%2mYA$3|BXo~jgC@}RiZu)qK|6yamp^qAoIx&vYX|**<3%{<n_xtxJIkwrFvly
z5Pl_8uL33f6lf8bQVNvtQ=nM)CMH7rBcfV3hw~A|*c`9(&Y<&QU4thUXEt+j#;Xw2
zRaUfV9%Dqs{iL6`PyM6*Vfn#rmL|mMPxB0;W$HKi>L<sA@S%Py&|*oU@>FQijL^^+
zQeL7F)i8Yw>DgqPp)n*V%~GY!(jYICVGOZ)a45~v?VP#_#g2q?mqg$~e4x}pe4zN_
z<3L>{9%52on8}I9^&ytlyVP!9+G}YjOCWEd-|B45%WHM=&p1V2NXgIgjDOZsWb@UI
zmRF9tYDcRoMr$}vAI6y?>K*NJfTG-nBwu?Rr>Fug=6m<kp+z%73%?3dA2kp~sRmH=
zDn2Xt9-mUrWSjZVO_m^vDs7eq>nRh<I7JCc6umP<QPfWqRdSa^;6fBtpw`1gQN>OU
z*^N_HC5M*%vfb;?&bvw0f8Wt8HjF>6&-IF1xb4f!k=@9kL37(ziBk{O7lvDKW|4Y8
z`T*bM=lS{m7uLgmpkRa58eADuEKc3jmC>PnR)0vJ6GnsCTUWNqE2m>aR72zrG?N=R
zMeA-Niq<t!%Ze|Xo`E_9<z8#WGx;Q-_bDa*NUKcU@T9LW^bAn$pHw_pRL=pW9`3;k
z_c!QgsN*~`6<Q$GJ<nTS%PE0AEAbABXChdFdo!qZf}#YRvNWQKH-r2Z5A*&h9)-F^
zRFez6#_<7^QS79;Kk!!i>6x<j;aPAMt-FIi<K7x&9ieB+8WUMgk=XQ1k=S+nc)3BU
zQ<0YROp%s#T!w=7nC%2r<U?c$g`4Ra@f><}3$Lw}IBz@7SK?$Xd|7yw0?zx<tu@kE
zBKCE@scfpLJjsxgt&a-K>Tm4y&YBe~CB>#1Q#6`}d`rbpW_lXiY%3{s#H1OGndz#k
z+K$$(vt!*%j5p><d8KtFW?eFlc_kAuI4-XMmsqk6;3-rrKMLIqSy$vIwf2pT_4Ur5
z-&<5#T2zeS=*<g#zJ-hWeG8jim5w@hg@g7-Gf^SVd|>q;B~9_Nk!OaY$}$wcAK%G>
zRXKSifjmvV!1gJ@WdZgOTtc5J5oUf0FJr0vj0jm8wCk<LxoBD)m*IOMT7ZtmW4IB#
z{iJ*a;@WtO4u8sL>M(MXm#PgsFY;0q(qdqURh7X7!6@!NiM<(+D|q>hpMO5Slh=aW
z(0+LvJa-D|y*zgc+a*6lxfue3<wK#|anLa6G)Fx89MmyV;9k^{q2;8oPPIC&sGv|&
z$;##i<V}IMFDg}~?)s#ujeR!0^OIe>J`r=}u|hZTG1{fbO*QRYhrUO|{!fj)|AAP3
z^byf8IAKmSQaof5g_0O3rUX%{@Wvg!{f7BB+&+FkzuXYOso$mY4e|}4E04%yf&u&C
zRp66~DRvt-Q#G0@ono=VT^|{zuW<%r&#YaibxQN1mUUJ3msWI}z22P0Qh#gxkY+^F
zy0Wo-ZDWDg$?Au#?VA%FBQCYG#o#Wo*JU%DIZmrCvsG7=s1a6Y8*-MmT4R!8s|Oqn
z3!(f?iJLW;k`Q>|NJ?>t$$?{M;6Fvo0((TyViY|@P3ba>IQV=ruLah<L)r6jsG(;m
zB|oh1kz7$FMpKE(C3R2M)8%m)^?IYrL*t>;Nb3NcoZv1caz`S+3MdthbT%N+nf%KV
zu3(p^PGa?PR6xVZH^|QurHQ@@tx+d0%Q<#QkYn?~v5Nj}LY)cVbMl)x!BZyAOr}&<
zR*qE0)&!m^jB04{7aGJO1S@Tn4Xu0!8{@^-2Q}UqKv=^-;u@WrV&d^V6r-x<aS4+Y
zr5Gxl?=m5I*mD8-9l}%G$mbPtCapPY@)QQ^peQ{xovy)m=zm<!t9fi3!<m2hbAf$g
z2>S@F`_lT<3{8gdv4uBXyWmiQtJI&A+76|=lkFeBw1h{2@zUhkXKOf3iUk#DB9TPl
zQGn#(%fn7bgib^OkCE~V{-Y!uL-<8&>o4HeYi-@)4=i087+$ulDA3h@R$$JV?d@mI
z37pmLUp+duYSq~2YCbCH$t3kQqiw}jqCG0&p(H2CF=~~Zn6&GRy?3<paD2_EvwnVM
zpslicxIDm4%CUA9*R1q>`DJT=K}*Sh5rhWp-H;PqK`z0lBGww`Od*Mg=t%6Vz~MXP
z`T)}h<jP&2e6q{$#{lfa0HCx=aH8*qVCkUW8-*ZZs4$<^&j#c)_6fr3Hw9?qcyS(9
z4?E8k(KeOlo}my1G>4|t^i|-uzrA9zwlFf0bz**@PNIxN))>_l?g<OXp9lMK|NYWf
zuoFtOa5&}|f%4&{!ITmTIvxqF3$F!u)bZq^z!u2g@UUZvJa&A((HSm`3-3R7u1u~m
z41F@qv7dJCxu@Cf13uq?oh=7h<WD!9uzaJxrMb0DzL}^5>?zL1$@`H=9F{`kG9zxe
zx6YZ49b!ZMp;ar4AnL^Ggg1T=|7X$uRd5E=(EyVK=O3z1QQSe37)NDi<+03f1HM!-
z$7TIEz_J&ec;ce$l)B2wx|E1XZf(t<(hu+kE$g%b#b7ojllMD<B3uxmOK6WfnN07@
zDL8HY`qSh;1+rhr${BFG2XaF75kc4j^ynKR5Y6jg>@nu~C}x9lTB`(WLe8{!Go6WV
zuyQkmgcT&K1eOX#`LEiZGL|sZtc3YD4<(MKY_FF;X1ZXo|ApJ;%vVlA&7X7DMXb}0
zmP)buP&|03rJ&3Xc}X?O&I%7QA$@{b(Z*<^ze#DM$)7NmdiE+F8-6z0x#%pkux)hg
z?AG~nwq2+kE<iin3L*WK_7~Npo1xGAJ3k?X?}*Eqes(8#h6ed-I8A7*DY{e_qP#{q
zCrR-;q2L!S;kY>vU)E<QInh;%!0NxSQ4s!@TvnXW@#UAz10*Xb+?eJ&ox5t|S{lt(
zNIOI=gf%ss&A=YHLyJW?95TVSFPlGq+4A}G<<da*Bd68a?KMuDE%Bbm9^bd`@yG5-
z<bzx5_kVrPb=RMJ?)BH5L*t1RfzM$c(TFt?k&G!p$FxIAqP=*CIjoUa-nejYSHEkG
z_fTL*UuQ=@k7Tr^FYvZ4a>#p`(ArSnLiG_XDDEU1d-I$N!?YmDSrtN8tql>x+FjOm
zqT91=?%2w{W@~#SQR+@??^*+q)6wn=6NYRj<&?36xy5Iz;Rj}G0-OK+^y!-H_uqHi
zbd7?P7sNThnxqM>ERZjb6l^|Vit6BA0&A0+qoG+PL5ZR$WA05|nNn-`ov|k6#Id<?
z8OhsHGGpi58W?(V*^`@*a7^MgW~j8=E9HM4F{Gy(j<ECOUqB^jlpj+P2Aa-2D14rU
z_!vaurBqcTS|LrBD><v3h_utFv6Ej=fIu%;4WU?}P-s<XGVp1)Fh(1r_vuS(^0Sk2
z(_?k9T1%7L)SELq^RXW|BEkAbB#EiwW+$c2Vxkl?Po)w?Rccy%9F8x^H~jF~2}Y|v
zmv0yiC8C<BMX?(i>Eky>pRwJP+)+{%ueT)L3bs2*Osw<xEmh;6fUh-JHHbq<x8~=c
z`6@JBLp>5$w|m#fHM_@O*nQ2&uHDxR?t1ghT_OE6bmj6}CD>6Toefao4M1_EaYWJb
zY>8CDJ`S8WRSny9OD)wGsf%%$6I!8R0T5m^&mvDBVvQbuKjH);VTCz7{S@M)Hgr0d
z5Ef8NvHauclnf3pgd(-)usdWWR{I0L|AQ&<+Q5hQjYzI@uIKnf#D%lZ0^^@W#D;SU
zO^**3BUXOe6(z#_kQVb*;QFb046kt}T}IIvX(h+%o01fs;}P=Cl!VI0suiWEDo{>q
z@1&?}>*F)}>5#OIkiIk@a2^=a)ySo>qH`lUIH+^;=-`NX6Fe_ORvNr1KRQFI*unRH
zXevN3VnzI+qi4WV(MbspMJFu<4ip`%cw=&bFL`5V7y1h^NBj;l#KC1YCNIQxwX;F2
zg7&D1m%`iLipCnA!x}YCH(SdF3knMId+Ln^iGlL^JZFhcOiHTkDs5TeYFyi1+HNUm
zv6gx)j1{yc<`)&5JGgk;P<CQYK{j&@=@a$kgRNp|gQ0PKSMSDppS7=|qPwI7=YRSj
z=#`zpRFQTD)0LAnK^+7y4S@bUsfzG@dWxzTd2?({Ut90!%6YflW~-^O-F9Jx+g)*?
znB3pyaI4x}?E~IoV}aFMY%*FPMXv?{qEWw^WIsPyeKk8--d`jpdyR4$t*uH9^7#D<
z)Pk3>muRLye-8|?g%!5Wok?t8K)#gMz@GWw1Gy$x4@w{sfw#m<C^L$;SHvow<^?|T
zdOr$gr?r&kQD{dL^MIdJi?FCPG%sjg;+ksHn>2P-?*C<ROm~M3YIK6buXEVS*-C73
zJR=|MZ2kS~ukZ4DcfIotdK8Q-#Q5LG`E_~}U}Qwz43T}@Mi=nrw@_pfmx<60xus6B
zl|-Wf*Vr2t-EfWn8hnmlv*;T62tL>>`CE!uqAOm5#y{n6$!eiJO$ol^V$Or%Sg^_h
zvfR^xN<%2B8*GVKF>nAYZdzO|&6Pa0b)II#ewR7jjxv{OG<vmvY;{*7>li#G&eB<~
zDk!s>t>p}Fr(#7$z1f%()#UZHm(<73j_a?1_Qr$-K;kI+M0*&Jq5M#+w7~!2QvbWy
zGg`;40MZxBr-FV;PV(8`%sHZ%``HvI@reS>f1UUjIw*WWAxa5T>}<R%V*^W)ZLqV2
zQ{|(Rq@g>sqm-o@Z&NrA;i!yTl*ybkLOOcb%FZay$Waxt75=9Tnx;Cx*~Cue<Ns`z
zmr6pb7b{T`5*?$34JGLIv_F;~bJEpUt@EF8;#SNAd6@kUh33h(!#KEE=>Z#`>;ch+
z^Bu0E{y}!rke|l$J+JpYy3&kM{GKFV$nVJ`s}Mh&%uhUVYu%JI!fy2+<9zUpT*Eb3
z@H-+YQ07ZThJqU?YFW*_!qC=$dzw;5_^g}wXZF8;rocB@*$to?l0`LnMuElj9WU&x
zpf@_S(}Y#vXV~K@=pic^*wWFlWnhp#2LsEO2Zom~w+?4Ctn27p+ki8O9qStWfv&Cq
zC3##LJ9aB?8`xsc54fap3bca^L;-vYTjbLW@;l>7du(HC{Y_PNPl2E1k&eA()y|#m
z1Ln4}OF>x3Lg3yR90_PKd}YM!hYd^r4D7J~-c#j%|1rNjhKY{pj?t`P&!DV|^nMYc
zf~bXJ2}uV+5pws1Z1EbupZ!ZdG<*slPAWV886QyC3~0A6qU;n)oXSVm!@eghEaBQh
zm{5>nxK4_~U&SdBw!{_TfnJE{0Pn)R_lkD}@fY#tMM2B}4xx9TXs6qv1O6TBH*a3Q
zV@D_cc8JMO%o*^_=`Jg?+0bWb$FRPY(u(zcTzPJN`}?Vm{(h>XpREEZCaaMl96(Cc
z28j<}E76kMAY^?@aGp-bDCUNaDL5&d8d)W3AnRiYbtMGfibLy|lg~_Y!jjc}T)k1V
zXqJEN_tPZ*#$P*k!GgK9wWa0drL|M0e5fV6wX~e9GqlvjX%MuyF>;~0X%NZW(}gT<
zrdH~e&-Qn)e63P@utFjOi}HFO<P~G41*2s!SHA<di$Xo-ZYCso$PNx`I6;$J@k2Rj
zlNCXb%-%&uw!7*VHO(GL@H)E&2fM1h2_v(c7Uh5XX)wkOVOKTv{0u~OeZcmG7p*j)
zm8{5Cg66hjU205|!BO00Rp?ggul5cMc%8id#cnSJ=`Z;-&K9Vzc2o6eWv*QbsQY4a
zA1xfks-6-Diygw?Zct?8><lripb^Plve>6Y1k<RX7cTTd@o#}oVKay6MIJ(~&x6CJ
z*v;#jM{Tyz<`(*tm-*Xn+*{*z*ErqoxTY=h=51+GKI3Sl-uHTUpRi!ziWLhNoB*m}
z9`SiMo5wgid0P&e!6r?Lqe`)!2hMgiu3Pc4|IE|R*t*r#)bysd&(S+H{@L@-Gu^(j
zl9Dp;Z3bk53UV|Ja|^ZtNfS$u;#gIJ(b7D6f&7i6s*#ek&>t7)XfJU3tp1wX#@=5Q
zrDP`fTU+Jp@PZHd)r7)|^zxAg#CbY<x_iCyUv_zu4Qbzg+v*eFrg%GL=5?agAMv8m
z+O#b+@7lY&+jsnx!PJs(7z+%Kbyt;FRDVa_iYRUmLLyDEpq)Vr8i(m4Eoh6yp)(;W
zh~m`ahZ5TI@5paU7+O?6%b+_u%`mI}%D}?sS3JKIN&c%Sy=uwNx4e2!W<o;dJ<KS-
z{n<hKLkHk>$7oZ$XEwYTkjPGi3o4eg12@<~BS)=bItN1&C;}^FI)~jRUR7#wdS**j
zL0OJ2URMNl%aWR`uPV=JO3x^LVTM4_zYQlOGcjg%Qc5&qsVPIVlU2!S@iB~Ld^vLn
zDHF`#SJFRWHIqiiT?>k_{NZCG*KbJm*Xm-7w)jhUI8BSI!D}|l+o46r2G@#^WlL`b
z#!7{;H_xCTVzC&1<ai}<*RAe%c1@~7Q#C~uUk52JKGcR%{}k)_P5;)Z%GIuWY>`z`
z<tRT2Y+F!McvTEr&=_fY4+Q(nFJ~xP4lQIfp~9LDW)tZc6x*YwHGwo<^pO;DCO$WE
z{q-ZyK@(4whuH7OKil=xQ)nfWpEwzm)u9#3WT_pj@h_or*nTocmQ~uS<+ujdelslV
zP&5(yz&}175m7|QPKhcKg?8ZD%FAa4b%&5uJxvq&-2dw-x(Ki9IDG^%jdm^-FXS^^
z<C@}?1a<y@IFSP^6up~bFBH8S=W8Nn8rj<LL~?s;nq-aKds)QJ`O^#&2g37<8D|LE
zRrE`07a9fZLPXI(*9C2ZZxrM@HneMcm*Ct7A0*F@_>1xLkOvk9BAj0#ix6J+$@gK9
zxYy7oYy~WD#F|1H!%c=)XJ}*3wbUEE=MD$X@fzKQ=YD5&Su=3vq;AxaVRae(S@YI9
zSKl%=cFSt#+Id-izqMzDYjA5v$JRmDiXJPZok)H<+6`0oxD6y`B$9AYH{dTs6ArB*
zMJI`>BBwd=qUfxw#+t^Cw2Rd7x@42AeW~u=jJgW;XjYE5zDsUN%A5_s*(j4g0lq7o
z1y#;wOpCw_DHWo5pwn+M=w+w>&tkQ&g?w1X0x$bgj#o}cF~Je^C{|9ce@@*bVRV`h
zF|Y~h)LII{Z}NlG#2HFQ&!(p0!Fq<{x^*ktt#f<QYx0(sS({DPRs$q@cX4sI!`R)H
zUY$9(II((RgJYmNHYuj0t<*VW%P7fiH`_C9`Z8xa>u1c^P+ZhtN-xRo$hE=jMvN(N
zE5K+4y*5s~etZVu9QKJoxk=m1(tYwr%X&As-5YxQ=oK=36&)5!M@4z3#nQQg$tqdg
zsJvuwbkE5f_l)>GXU~~;w#Re!yg6rkXy$;b6qCTE1lc>#%c`+$M_XPj`@uy8Hmyhg
zD-Mgqd(-TNv~fnfr|bjrbM=m(|3=}Wpw-M55>33Q!5a*0r>!b?XX_hn-E(3`;x0V7
zYo#-P*xNLxRAd)-pT4dp(^`>lcIx{&)hoAD&abcTZ?hOZ%~?u2L5h^|(XuFqwiE&c
zG3D!jM5~%AWffxuCvS<Gryg!9>9G}emDSXk8_b@T)^^QE%;po?S2%|T=B#Mhlz7ry
zb#qNdt=(3i<4-Fubk<he)V`&*KwZl~LUPQ?zP3fw)zA(usDwBRkOpt-q8J7(UiXP(
zp0~2VSRjD66RNK5V{gla{%b#Di$EoQh8?tpMn<|;5dGkM)0psTOM?_rWiTOGar+7N
zQ6tg)_3cCXt+wLcq%j*iL;i<8F|o2SukD1|hP8<mBXw$b{cv|hm!+tHUFMg+Ps}US
zHm>XFIH>`6hB(MTyETe_r>IIHzK#q>2umgIA!lX24RtxqtNR=0I^##;>gwwJHZeKY
zIpFZDbTyvT=?M(9+Iy^)&cv>r%jaHuN-JKM8C_h_dj4`%e!UqdPy061`{(t01Mq>A
z_i+C~h_^s9&LzZC@sjpH{l<RzO!iLe;)dLHZ@e(-@9Ww1>sv-5XFv`lR#m76n0Zqa
zRgL10nX;pu652e$q+nLh#+I=jvA(-zabx2Wr?)}u9c|gr;TiGy`Ugflwe78SuD13>
z`-1k~<;kf@y)89!9gev*Exk#p$;*4&7ufyHtqtAX4Xw>=er>J8?RM1G5*JLNu5#{E
zIjaz2OcD`%2OM)kr)&=ek1nv{Db#hl>W0fEsk^=-OkMGnu1i<^5P9eNy5<DQs}kZd
zH|X7iu~>IV%M;8IG;kV$6QsQ2V0BbbFx?bopOtnD4|jA72RxanTVu=4P^-(VnW?t9
z+dSBA;-9}-vtYsM)e9D^aVI@zDD!l-Bo?G~c;e-Rk=r+J+%r15XCq!8395wfm__~~
zGZcJi;3lne`i>0CZ7DCcrZ0+*Xks@zx3IK=$%9j>jHok@_}FQvGEqbr<dQPmb&#~&
zDT{5VcyYRjyq!fqnw48*t!#5Ob*P)7^7GU4W71M8t;Ms?i)`DKT9lZkbJ{B!+H0kJ
zQ+8%bMoMf>dS%1GAHt@PG--v(mgA8@r-ODmVrVpYPu6i1cMs%O=uJ(Ht`>EZXvov&
z8nZJpN(wCILX+4exqBn9`&FaUP#G6fV6@e_t*X?VTwO+Httltlkee>q8t#~iA-n@Y
zULg5|h&(eE`zkWDv<{2&IL|-pZmF(r*ni);b$Jmj?jCV{{*A+R*=6#>Q){0bVSY*_
z%w;&3gBD;;{CKYmn|s|2=|yp~cOOizk27VP3`M3~6UL>ZKBDzsc^Yea;^UXO-c8n8
z_2vRyx>Q~@wVRW@%)mLq>d;8gwi?Gl2NP4#W73?)0&FQLcxk2&gSBy}&y`meE7>i%
zdFqB(m%FAt&(~}&fx(imD=aK7jKr(6xxF<#x!SGOsqOaq<@IyNTvl_sF}X0`Y&|rE
zP?L0u!+aE+T;xIG!TB(q75>|lS7VWnJz#cZ)kQS6yZy9P6;_vh^~V29sd;j)>tF-h
z@H-pRxe!thHXT0E^YA`6V!6WiGfaPPi789p)KK57&&n_E_Lz%{%>_k81vz<nIY_w?
zc>Sub%H&LlvE<vTt8Mv~nD`n~Rh=s*C&yyJ$Aei}X&D)5Sy}S3DOk@mUcng*M9KNY
ztx%dOVXQS+29HD4i1F!frcu+E#e_%AgORcn6f><UJrY$uM4>@TOT(Z&Ohd)TOul{!
zg3zqvFmHOWpH?8jqQI|vnFTg6e+GEL#Gx7C*w>j6j`u9j2rv2pcrmP+nc6M+f&5m$
z7tDYseq(xKKCI1Pzu@c1!+TS(OE}%vgSCH(9+{%ZQ!HM=wM-ct@K3}#R$aiXitea<
zwl1x%UfRk(+nf9I+H2gd*amf8uEj3Jl<8f4Lk*VV!oqZumK7tG<+Ri2#g+8g=DBe3
zk_$YZ3zjUt(8InRn~OoS+p)vvu1-#GZEx<x6w5D6Hm2hU+T^PHGvA!~1FCTFP1`dm
z!Jy;i6G!lyDwl}F0fPJpAa6j;-OA1dq#y{{1IRv}2VN+i=O&bTfJ3mS%^|yx=W%up
zO2OjdkXw-Feh$GHbI5goJi<#sN#c+@QR*(<7FKcjQM5jp2R5es2&fQ*V2uSn&^^e4
z`^nKN{fSXwm;4y*i7u>;J%e98QWIT>Dy)@lg^yBARKfQ>_`Z)n2Tkz(CggvBe+NbI
zeHWfTPW#tH4}8A`&+q5oiQ~~ve1C-J2QBdZPS(Qi;?F^eDbLB)1{IY2|8J=vzVKsI
zK&$8r#c#qc(}4DHywJHlHs_MQOXPF#f#2)F4>ZXxoYW7+dj5}K5ep`kqFjLpyA_hf
zf_*pQtHOyRsO$LWg~Cbvc`}}R#1~NBGO-3FQT`Z}FBC3S%5z+fFJB}q<Imv(6PtMX
z!im$B@^JqUKc0D9`|~33D;75M=ecO#6~wP!DgO<XFBP`(=c#y3Q5P1mcw$3D`BLG6
zi06cV;lwFQ`J+mC<+(Oo-b&@EfB%Vme)+^zn2DC)Oq>Uby)kh;W}-eg6A7{hkbOK4
z%|wFSgi;T12+c%->_VQ$@yZHiCKBWp<hh?iXeJWmIzS%brD!G+<W7{ji?>BHk>0jE
znTKZLJU$b7ssFb;$Sgm~gHmWFLfhw&bSz?R58H8ARy8;`1N$dHs{L?>waivxEvrb%
z`(+-h3#;>;p0+MeM^hhj{HFp|YH&`IuZUH_r3fnm-pIN|>DbI+tum`9EtIz)UvRFI
zk1K_2ehS)%w7wycG>F8~I<$Lc7h5Y+(qf=^=SMZEJDOZ=mDZx%tVdaEaYJQ#PAoL-
z%xqJ>RNLNAVR!1%5{pvlO_V|DLGum$3ob;|2DkN(YfRadxAwWECec)AwiJ|PWMmt2
z^?3%dN!{XVY%=L9@&{O5gH1}$HDu?QYBMu*xjCsStGmu-EQpD#G&rG3i6JSaSoaKy
zGk#=(ta}UI!|1(le?xWk-RoHEh~t~jT_aar2IN9=jG|+wVhUvx?t86CQAt4(R#@8s
z8bIYOGC=u_t4}|;dv;t=dV{-{)m4>C>AC{5-l|Q0*R?D@zNe;<d@@s|93N>?vV%5!
zxa#n@s}UW;N}7CAR^ZsOywD1)%THzaLCv}li|Mp8EVSrVQ2NrYJs)A(Y>gMSUt~GV
z4=|ObCXcn$Z(MD6Su0kZ)(&YH!c);oi4xEkf*U=2g@S5FHfW?>8gUOk?JmyG(l^&P
zH0iTUCEgCwKS>V_>Y%I+if2vyq~e)?pAwis@uV>f;qw1<ef+7FLC$BX>`k^rSs5tG
zid-DUY~Qg?{J>jkAO7IgIQlAby&TLH3)%+rIdF|-Pk*mwPYvUj-*|Qu5WlO&?_6h!
zO{kU6NrN_u(P4@2s-ySGPp~NY*ea%yk5PfQ@f&|C`KWwM5RdK*mWrZMPF{j`k$x90
z@cm}>NOh>dTh!9{hd)*3*h?yLN*QTNI|-33DOg6f7j+i!Rm(>?zSa0u#VEoRO-JAj
z9Gtwj9B*?NZ}tatQMC#mQAeMX@|;XX9g&X`;-Klyh*H2}vYd|B5K;QOO{$9@Ma)ao
ziBwl)J#U5T#75;Q!l(HCyt`=s9#pGnknpB)B*;R%ZQNumlT5~V$t0h`x|7qAGmDIQ
zmdw=jl+4_r+4`y?V^JocDe0-1mb_2<bS4wtk!{j7R^_(3&7p6CC|6G0#wsKcyO>yS
zxLpdFRsfGBbaBj_&<nmukZLh=$ehD&EcS-Zsv0QOw^diS=}QNy4nELX-(KZxb$2~*
zfo}v+Yy)tw;ui_C>+L>AueGnpF|Tzrmc`6(8>uK^eJmI$a_n`iwlCm!^em$1=)ZA~
z>-ZhGYDCWj_E!Yev3}tOR?i;f+{`04%-CRpD?v+q6oquG|K`tcW)gl71m{s+xCwtZ
z_VvAp0g>bml)W`v7BrkJC3i%YQA$iq$XkUnwq7jecwC0}Ul2Z*vAcoKn-eQZ`;+g3
zbbS#Xt^%?50m8F;{Au7Rfnx-4OhFJ&fg+9xLrT~EdFX&_Q&k>)PF0ED6*zcNU*8MB
zPX&I7ECY@)M3kbEayN<|`>%S(cbk+%#e4huZo>cmeqe(#?B5DD{~&C7$Db!Gk3I|d
zhk#qe-lG?By7rF$0avxy`x2fXGvfJ$Tw@v<|1Ez$gm-aK4MRu2z*Uk{C$2z$DDH;8
zeJj)#Vr2PRY1^@vB>U0tncXM9w3l~BPUm9^iTxSsUWGB0`2LRevn^+w0q7SKc>4sP
zYV7;bkFRJo-`c7-H(r1J8Eft&t(uo&$Do^fI3D<9+X;?xs{qGH5ClEw;95BM_A8t-
z(S{NzH^KP^zY|Kbm)D0LDm;VD6f_C*1krTZpG=aXqXJPHX=KaGrbWvNKm4$8*&@@+
zz!T*r7O+)fzEX}ka5#=)WUH$!SU_2lQ_`Sdw0_GLHWV&-n98-F(KJw;zrE3kC1+9-
zQM}!}b*x;3fLvN>DU5H!`<(D%_r}#-%}bqG&XTO$xD&VhrE^%HZZ68LZ0qS%BZjnc
z%nkh{JIQP}{RIe8OL%)+ny8-|UqX&Z2j(amQ2ZG1`lbMLmZQ{NlpP4Q*{7j4HCt{j
z^VeFNs<SieDyhu^tG>KiX;XY0E%7n=3bbDfeU--KD~#d+;aU7@=q(gMWj@Y_l~a*}
z|GDKkIpxoWZgO#ha@+BXrLVvONWw~Eq2Y&0=+x0}pH5@>q_Xw2(^@NAS}WU5JFTs<
zm7Qr^(X_(2dNseSqCW3t8Td8QcR4o-Wa&^m0?TQbKk{hf*a*vb27h!0L)imTtRg=0
zd`3A9nkdXH30GEhZs)o3V{z<2oV*dYgLFrmlTUd(Ptld__Yk8AYbLH>pK|^ebl~|l
zoYmKbcs$~1lnIYN#XRugDV6*bw)7fd6F7)G9N-<r=f|wMMq@5gv?(jgL<tn;dD#TG
zKESyipX?G2Uxp?p!1WwLTrXl)!rPB?^So}-Z^FMnK^l!CqOHjLjlpJb2wtz7jz$Qb
z(3R-T@xttxMJHs<@Y3_yqrv(x*`Fj;Tp&)B6|C<0_6ytp^)Gz<V`@DM*c#EQ)WdLy
zQ<+VQX9unV)W(vksiM4KJ#0>}B9<Ahh<N@;aCX5?`q9}Hf#DC%vZ7#HKQh-|4mTd2
zac<0Qw9cl@GW3GFp~Q=G4KvuUk*O1Ia*~IdXRD{r_4#!)*OT+@rpfk+8}Q4?YuIYc
zL*kNe!DBmwWB6s+Zj!OIx4(lm9qaE0e3>xL4o||DvCGG?($Lw|aj|U@o{AUcbGUC}
zpBRlgQ4d99_}G3@4;iHN>*63gpUy{No@2v?Jle{(piVi7OB>I7GV4v|23?LT%avN)
zY{+ad7S!`^DbA+XwfIqv;zF0vo=JBl7MGzs6E#1Ed36ou70nJJ91fmAV(C~<yXTVb
zvzi*$t$cm$+b_NL%Ia6wOv{b)V^x(F2k|<K>uzj1tNRkqx;3w^e&w~7-d+nuf(aK+
z;MavwH)aOSJW^!n1QS<eu*F}1Lrf8BjF$bne>A<!U?@u;?RWOKw3OMJTl!C4)H764
zuOHIamkjkR>XVAA#=3`~xdgh$DvL#;O++g?6Z9lflblsFM-Z${5e1|qr8%?|zJT`r
z?DRD^+say+eNNwq(%i_&ePVItSa%?X#SV3kRTWEpQ(C3I+y^?{ioU?RgZGa?P$oIp
zt^bF!F9EEoxca{{_q}`HdwJPcLI~LtNC;V8HVBXe5+H;SLfF?p0wjchAwfh$YJplr
zq)MqGwTOs{lq#hz)cPqRZq!;!t+hz4rM9IMsYOIcUjDx`GdFnw?APy~n>Y8&neEJ(
zedf%$7ccJFgI=bhE32;$NSe_pdGL`vdoH$C@b@YphYKH1L+|EcJ&&X;?c%-;TloC*
zHP1iahVL%_#yiA|9b4>MY-2x`ej*bgQWJU^9%?Kv6w8a<ud;XWT^s|k#0SUY0ycZc
zdx3?_DlQ(Sues0r8}BLjx);8FBz;BZhw#++;Cta=77H1*on^2g_jTS)aUIb9!G5m~
zBZ>-e-ykvg02_MdAAC}ES2tYm?0yJ49e*QN+~21a{~_<M&#=FBJzLEg+F@PyHqHgD
zRC`2@a7`Zn%unQNdf(hxxkL+^hLARdOySF>(=2G&GepfZ-L348dad9wF4;ty!IA9g
zYhQal{^R|h^29$Do$wBLi~QXNe@{w(k*W9uT|s2<k3E0<*z@)MMQ^b`pD6lc*T<ml
zfcAHlH&7>YN4HY*5|PLI)=a+dlfU!Hd%Tm<*t0e8E%SN~d4+G8+eqBz3(uuI3-9b)
z*H8AaXVbis$Ul|BF~MJ~gjG32rUVrv2D4)%AqHlLEnWJsRU%8@X5W9S^F!*(clMMF
zLaMR>VTlnzJ4FdOUwioBr9GvTrl-B-T}Gq7nz3P@RL;1zVkUMHGp-aqb~o{GEGFn&
z+e+WK#=J*pdtgF-rvN8#n0gej*J*~glMMa=&GW3e-d21y{G^zDj_uyft1#;vt2N-w
zw9EM7cq{)c)io6tTOz{$)(U$LVHYAS!gOEdRiLv*tKtrJ8gy+CbZroHSy(|=asfmb
z@eOSGVo?VUEcxzty}uT(syE+!tnx8oP+1?*s<37_O%x<2refE{Wc%QG$$={Jb)Am_
z8Q~G1h=?Z#@O5_V7-K$yRWH*q*F{X&p`B@)8FeaZrVY+xYrgub#)}mMgFdG_Z}z>5
zJFit$VV9Eh9(o~X_J)wuwC+6MC_hrlBN|33i7wa7i5aM8J0^^tKCk~kJ;$sX!&qZw
zOn>%2qXCT{(BF&u!Hm5HIZT^2y8Ce+4ow?6M)z2fU#0b2DqZeIfAycfNcz``bKmq$
z(%D!OY{2!{n}3;9zqY*lYpf^!2ld@a@+!T10VH|uyFNE&eZ8s1cX{vqi?}w3wd%WA
ztDdyhs_1)j`*yxko=bMW1?cTX_iIq^dFMwjjxQcvkXJrp+>0O4y0ttnuN>=EZ*xt}
ztZJ5?Gi%IT^u@DB&&(ZEoiQ=DCToOPy%uLr#zicwRx!7{x&Vc>iE5r$8<4bD9)mVw
z{LpKXv={xntNE|HhU$Tx`>@LG`lP1o#hN-6?q=b2-uIim?+Y<F5{1K$)?ug6%ZH<v
zPvyt1y@zqw;P<?S(YW)4K55;MQlC`3r8i9iYq*aQdo5yDYdESWcKnFrr)VXK-#s;~
zMJ$)SU&^^H_s&MzFQ|O>N!k09Pu{N26>{SpkM;KRSZ}BB(^za`&D`}h%`LFbUB;u?
z6^jl=G~h>T%4^$t7q{%GNt3+C#OhXtk~>Z})EElqTVw3!uZG#r_iW{?mdk6gCjYNu
zz*=@kXN$h$h8Spt?m?|BQ?(Xl-dk^p3SI2$^r5BS)xX;N{ibJstI*nDl2m!0x9sS|
z`|KC_V{Jrp?Vi0Ria!+HmN?hx-FL#y(Vwpku>E=I@#fdPzdF%;qJVK`dcXF1*T{AF
z(Gw?F#cNcHuG?P_dd4YMIxVvJ-kFUZ2Du@D;zgZ6k8|DbS0a&Q$0nk8@-me#{(9%1
zX#2}f8-1zOlvW3J?S}CZF`i*{DETCJ-)M&VP7g<}j_LuQu}|&cIrH5FL|Z@D{TDWu
z=ZV$^%9BxB?5H)#;ogJ%mahBwvt5(;vzw;e<K9yDShM#RQ})(Mj{26k;HaVm9XWB+
z1TELspVym@&jBN6+QY7%w}<so^!jl&=JnUHRYSWq#7!%1xu+mXO6HJa>};ZZk#P+=
zhk7<dH`;#K8)Kh5-n{&KxDA26c!p(e0d9F-``Y5XeE=0c{jUCO+3U@``9!m-09&dz
zRC`-aY(U9hw}+aF%crsgpI)Z+FZH*td1(_>ZZ@W&1h3nxP3{TP*<}SX629I~yR|)m
zh$q%Qso;s^b$m}9?rj;@*7fY1dVgoXpsEhxh*dp1sIA~}Zf`A;R4_q{34U~b+(XN3
z3yQe<G*u%J(KT$T_E2ZXo;B^S(QW{ZIsHfqiTWLTPu@t#)@NU+^DX=2EB9Ctvk$ud
z&HcZpn}*yfl6%`Soz&{@^=$u$jU&|9afto#o_<pd40#N5>RdLx^Iv*k*HHfJiPabt
zGMiauo%bJZ??0d}27NttuUN1Ohn9nzA{bIsNQ_-S?h|-rO-<hjXe`0#^z}RFX)pG~
zLZj1l@i4^I`B9(9evQb!x><xGQvKRi@Q>thO>sX*!)}rs@2r^7kG#X5>YC2~+Bv<e
zAO9<$r;3onI-e2mdTJ3RzWe(ZR@c+Esd3xUxY58_9kpt-?ps9beysVix-IT|{{2`j
zZesehKQV*ot)bLXd}}F<269A@g|!VW102flsjCzo9Fl!4-I$^FEBo@R!+PrJyXIq8
z=9-WFs;4c>ZF(FQsJ{FqRp&ave;?|oCG?CGvMpF?+_XKsYp=L^)LzlsOHh+QO}<r)
zW7JPrJr7YX#|cq~8LsA}qK_cWE!T5l*>TZ3{EqrG*{>;bud(ABUiU61rl2f}P*L9C
z@uG~iRMpSgRhcll@{1eP!{{O+pe^y!o^d}j?VaX#@K50N<23CH_Ove9Zu^wXx9oRb
zds#KGYgVI8t@fT$%~o>qx-qvmM$spV`1{0)5tl~YYe%i7Td2ANDtT{{vY?rHGqrs7
zKKhrDIBF2_ME0Dje8cIAJZ0hLqGokmlO7rs-Y;#S@9|1vdURN1NOWvnz`*=LafAAY
z_Y3tskO_+lkB_x7iylFq#8~gXCo+T`kd|cPGIlox(WgLby{f6WooLZ`!<%Cv!dN0p
z#febw$&htIq~2y^mo97fHQVTr$gt@2M0sK)iH%F`7aj@1Lwin=u#FKH^Q;)snwi~^
z7TLdlda9N2@P4Ur34{8DT4zkX_>|b^Ra3bkvsR|VWBVJ2>D-Ok9MOr<7TWg>#fVY-
zXBz7aMw$Hpe8BmHs0k*Wf!)A?o1cwc#{ry~;UlqT*9KXb&kh)f>mTxn4CGT*BL9zN
z3wHIx!CP9t@F-R0sp<XuN2WPsc^@|V$A<gn$``(|<b7Si76(R$0^Ah71${8x6h^ON
z$4FkFT4$tctzCa)_e}S;r*xg>N#0cU`!Cq<y{SA2O71)NJ+B(-G}Um?25!Zv;yvnA
zF}{~U9Onm+fK-f)XZLu2=36_`^5guc#76fp3w4G~IByZ0Ts%59Z<J+2ui(vq-p$u}
z6Le}!)MkpEY9;=PJ6jM9AW=*Ci63nLDLq3%Vm1Ot7`T>zo1eG`BnvfM5os4;XeZK$
zSf5rHX`1OJ$<fJ9eO!pm9TYvlrl-#sRWviFeC&XDTw0%c>j;~kF>=%pdthPLcHcVg
zQ*HU!0U3rF6C0ap8Ux*V^GA%FmlqYD^x3e&X>;e?J1KAOi2C~KVZ)}ZA6x(Q%9*V>
zEHf=N>*1c`)E;2Yl(Nxvb)(CsP~IVz#{Qu0<`PWDsPg1i9MV8Wj*f1zKBW~IjXmCs
zvQ-m`r;i;|lb=^Rbjp}ptBYq;z>+g5W0wA0XQloen>B1kPE=xIRBV0%vM8XuMDKnz
zM)c{~paufb<7D`o3fE$60V)$)bTl?TJSxn$U_<+b_a79ORxmK2E;jncjzZS<bT!${
zKWZkW4X}!y-hC^B<-)|MhOv_2rsR1@PaUG$6v-Ys9rJC`*PU)lR)u@-3K&?Bc4ObF
zI$f*tp~G&gH$Lxs(oIy{*xp9v_3d8@{&NRP-AA8RVllG!Ej!}0|F*aM&y4<$Ju>DC
z-_&(}b0JuT(bNBScXz#svz0=e&870syI#gD(%_$;!^{A>nKWL*$6+=Tf|FeAr;E=x
zV~+@*=t@kE*P8|x6bxpY$@DH^Pk+#3Sv$C39b1JM=nR?U^2$jErCr|d%@YMKWN?J6
zC?wJ4c?lhpMVJuaw~jECEU>VO{vuUg3{>*;>|ol2)XG(*L+frSt6fo)Qj(UC>2NvY
z)BEKVri~tq&zdloUxn#5!vaG32c}Fe&7M}8G^DO*KuP?DpaGHo{i7q2BKlW^g^mB=
z9qorYhSfb#f7>R{@S*XUk#i@N-BJ;e9OXB+qNO@IIXPqT^vSDBvKH=WXt;AkXz2X|
z^UG6mva=@*$uB{_Z0UWAhXh5D=;_395UPrG^k?F72x$m5aj_cvb?C<M!XZJZbw*4F
z1{W8vjvkR085cZva?P|cHG4xs>R9rCsg2148b{`i34SI&b97NkW>{KMT867%(4yIy
zW6P3b^YRByoIZIhbb|k?UsbN7cxB>}Au;haQ6XoND~9G2v$m)~8U2z{2B(Cj($N)Z
z%43&MBABPe2U`cY*bBzP0`jNjcxLARsiuPEWX~Qsa&|VB0c*Q9Q(dU(eg%7wA0U5N
z<=||^5`?2NlAkn}B37ahl}wm8*AdEPrO1_mPo{_?8F8-@s+01^EE;B??x-lu^hB0U
z8dH~&m6@4|+jhmX3(aYcaYX~OWAZAiXQm7uJUA_XZrsp<oCzuYGh+sfEg3pF*T^ag
zNr)Jj85EdSn37Qv7FLuvv^*uPD&NS=35g3Em>3q8F?>i`L2y`cCRF#a!gO5nz=?Q7
zM0yPRXz`t$YUGF{xQk_;sMx3y(k3VhsSmNZ4IobW$X(?Rg+`+o%9W*0ziZsMyQWY7
z_W1GNo?g*VP|#3O-jJW)P?0k+J$+)%;BiCk<wkB=w#Sn_$YYi}=ey@U(XxF1ym|YV
zw>&X#<iss==5DE~+A?>}mWlK77mOS^zaV+^P<whtb!o|@tfBVtIQFyQ{>D#9&lY9@
ziCQ*kp-ralNcNvN^;h3^?YTG`5n=7<QngDA7ebUIx5$PREuuT2i;9XCRt_Fqxv;2Y
zet!P^5@-_2uOG5#SZTt*iKEIha|gu54aogzI{CBwFPe~^U))e!+%SANnZ*@sa8~-j
z49B{Tj>r0eAJ<WtNjgyfTPkr?>AxefKS(Scmi}MUmzkl6!`@UFTOxWSYY!K9mudGF
zi*%iKZ*^=2gyKyPyLa`lrnqIpZuLGg{N7In4FAP&wuH_1{tqklK1#ZQSZZOR_xHd&
zN<XxbZEP2NThu6=nnLcdr@pBAgu0Ke3tVCu>EqIS{u8rv5)yK9*sj52hYT4vXwbMJ
zL&grS9GaYxm6eh_6m9k&>{FbH&<s!u#oXy1nNthcr)SUN<l_)ro`y>be+9cf27hG)
z5@t5+`qqhEU(HVWu#sQ_4g@)~!)1!v55}GY@=NY^9Qk5Gh-=ASlT2#wI6@Kqgpe+m
zoWZ`Kt>z-zPFvUPL{$~&@%4pMEb>PyT}D6Q*Sk{sKUh`8q7el3!-eRn-H~KLJn2~g
zuZiV}da#t$l&28B@|h$t<66^Dv!;Qq9)-V=B_$)H!@{EbhlWl$4RTKKVd$xbb)C40
z#`C}8zymx?=`Q1t4Z$jx^nHipY%x4#5^J6G^2;k%zKr}%(#G;Az8X@d{ZM1+xE1%T
zh1ti#s!qNT8~c-=#Cm^y@`Zr|fAW)oV_9W(><^-|qaXWA4}@F>AeZ<uJ$NK*8gdyQ
zjElMP^bG-$hYsMyUMD;3tzKX7&w_#rg%^me<v>n?{Q~U7D;r{|K`eBRMC*R&qQF4|
zMFX95GM-0v?LsVfu#w(lckC|sXMX;L!hf=Q)+i(U)BQfN(RfZfPCc>36Fqt;YJRec
zjUDw?v%|aIy5kNn<kZjS|MQ;(|15;|kcYiz*#I`M>-ar{D7=6xhYrn#c?0PzH^e<{
z((V*3rJt}T3MnUSwMrFjBzA}6FCjEY2Tjz-Sf=*_Hu%dgQJSpId+^OSM-8v8s($NL
z2g_%kW!|RlejObvtE+caSC8-L2&de=i*FlVVlQJSmP51OSe}H^qJ1fi&aA2ZM$!p5
zPLv;N%$qe}W?tiK^Zzv;C(o7M_gI$qxxcV}+1cK|f(2SBw2(xi2I{0yFA^dDL*E|2
zKOI#u%Kw``Qp`W?ik&6DmwLmOiouz9Z3Q$HZxo{pX^KgwyQ7e(xV~@bGuBZ3u;Ztz
zH_I5dpr~lUFlnZgq^6dn;6J70VBzLM7Pq-@GyV&`D`D>M@dnQo(yKJ@DA-)MX;a~5
z7GJojVDsjJP2faE_kNzC$AJ?bjDXa7#mF9u8Mz$&<j}4Lbu67l_XSm_7;fkbO_k9T
z+AEA%=1}M>9FrJ3wXSmZprYpS<Cl(rSX)Y2R$29c%F)x83>n!vOJCc$xe^M)jJ(Q}
ze%T2LLsKKd@+-57XJi#FDmBte5{q)<)8j*<3aW<}PRjyCF5H5{7wJU{LN5XNWYdnH
zkWiK5w9hod8i-wNm7n)PHs3E{>MezZw@jV4F=9^el)}RCiHYM2M@|cz9lDuqs;t~q
zS$R$BAGp2Mm{=_p8Bd#P@7P53BMkL}^!P^8`UL6rOay%HspEiK_3#j8gM_u1&Pgf)
zco^H~2#6V#S6&%BFKA@r_{zl|x1-Ser*SPK3?qYQdFxCwWlToljIf14<ClV<fTVED
zbw(6Ahff=tJ-sj@*<I;fF?4ESV1lc%(jDU;pB+;;)B&|Y;0C1o!58XTgf?9|TS3XG
zSxaJKu%(teF%}K0^TR%$Y*<@axt5=hUu=M~+oeJ|w@;i>moDublaMjZB+#UKqGr^u
z(`pqTHhTB1n#oCH^WS=F(#qoDD<@53h2A<I({+}|;3E)YMrRBgP?x)4%$P+UB=g3E
z2|uG=7@UPc>j8gD?=mHWYKQd%#tvFp2;E7E!G~*~jft<FT<%@mIc9Qge9SXE-J6;)
zfai6+SB@?R4$IiC0SR5$pl0-yI%ux{fNp5yLKiR1NI`aQ6Z5Gjk?0^G0TdseSvZ38
zTNd~S6)Y&8u)t$B_?Ks-6b%e;AKpJ?6x&ssuxOMs%vG5>W?<n=Pj<~vGbcN~C^>RO
zTII~;agZR<``o_@!g-g)8%s}YHGA1xhTmnWEcU+Y>K)b9-jDkzjD@Z+tq@wgA`l-&
zCe$@5%is~v*Kn?yY1P$l0!pAf)<FEl!Eg#CeL+r(oQbD1wK~?#uF4olJBMDt%$aOO
zf%kg_1$f;fKxrqsD{!J2!lSX9B<}2>FX~yQ=sqyo8Z>k(IXRMAq#w5HPI@fCIM!@I
zke((=YP27MMk%Q+^MW`)DamE4LuRC3qa|Y{kuB&YIT`f7v<pJ%{d{-D?q{X{WYOD?
zm4e*J|2Qq42Z>#3a9W-Pj+1-S){ZoB$;Vf++9TsZJzLk-mNnPLgWN!#02)9+E>b4X
zbiO#Ao$wB0+q`Y;L}lg5x-G6Pb^DqrZ>U@Bf)yg3_S&r-@(Tz+fleUMw#t-!&HE@A
zae6EQ26K;<Q;`lzms-$R_O|y@wf7QxyRxzwa6ZO0%;#2X>v=Yh!F=v)>iw9{olR{;
zt|n>cxeL1`(PHF4mrUI-ln<c6NLf4*{AJ%sOpgtV4EBqTnKW)#%8+Qxj-vZd8h5^b
zQol$8yGn~uexU`P+Qo=*mR82RtQhlQIuiyx><AQv>??bw@+w^Kggnac`J<vnLQf`+
zAI&@0G_R?xch|!O8omDV7v#yIt>QK8X|&`t>L-21P|}2u-@Cw<3tp@k<+9J}PE!o5
z3V$%DG&#9+(BRsB(Y5J=MkObY8k9DzU%x4XVoO3pOJc)fgOge1fTZ97p|K?q;ianv
zk4;Y>I~ZRZ@h}PIW@mY-h9o9t;F^3?;t)0@Ard!xha@K9VjL4+PCkeJ2K%O@zzmBu
zp~%Yw15KzG{NYeDyML^$)KN8hs5un!GiB!Zot2UC96H%52lVecIC?ady$eP)VzJYX
zNNyfj0u?K|>wL?3uf|?FQ^QwxZNZ04F@!?S5?ZFHheN%h`3On4(eth4Jgcet<(+y!
zb#><#dO+tF@QX7DaXKmLU??>L%*NuwM?Uu)JMI0>&wj>kt7CyI5NeM9<^5M3)hHKY
zCrae3Qp{b%r|}SU$HS9%H>{rAv4F*jeP8yOH(C!tx68D-*g+=Eu8=OE>6ciwQm>mR
zzcZd1KDREvpk#bqP3VN7$;18e9aiu0s;b%w`q1Kx%=`qBfz!3x?k^z;Mw&ea&`ptK
zPbN<-h}C@*Il$6);Y>@N*W$+AIz6mu%jEb!m(9(|TTqf-k)Iqod~sPuSxWrK^s@1z
zywf)=C<&?xo!tHazF;zZ*|_n|!{f5@GW?+WzanW`)sT?`XVgr>7P1}rzk>X~tNN}~
z($@@)9zFe+@0vlU6Yp<u+f`gwS4_Y7)YN$V#<2rc-f67#Iy7sYJ$2fwS<|M@9$B29
zUrav?a+sz&ZopGp0c|t-&^Ah&@c&0&<Tud0xwx{jn11mC2E^mn$o5uv=P}!m;lqav
zDKAe9iHZur?-1Z2z!fO_f02(N<s&_wk>x{1_T<dMp#BfgLilk09QY4uHYd+>a#S8Z
z+<Vdc1=UaQ+ts+B6X^Y-nFXMxE~D?yAXJogQhcXC-k{Rs3*v+A7@gP~*#4cs?(`b$
z=LO#KYiz>=?}pI=rnZK&9;_)!WLi?1fcnc%d(L3J$GLycNhw{s;zC#7K#YJQrGn((
zNGy+-i9_h#s3$PCeuDQ~?5elCfc^aXJh5<0ZLkdxoQPbZt+9X<S`jxB)a?BNE6Z&}
z8}{~iu9Z%*2~D=a$WSV`AqNxK8sw&60&+INdlx%I77Ak`KVz-@^qym~)z(R+6f&?5
z2O&zsF+!i@q@!2nCp9=eG9K9}_?~av*CtTz?nY(`(84)(hNiKvF|UG7MQjnolb}mt
zL44%nkL_(*%W~E>?R~82cJI5l|8(Ep+i%~y?~XgDuiDW475h*RrBL?NyvSfPuOO0i
z&7=SP@#f7xetP3Z=fUPp?CPfGgHJba^cow*NEo6$&PTIfVmAtRZgDdJvf)rj27RMC
z1|#v0EwKP>gBP%bxG0<5?AI?ZV2YVBYIJN$xQ+Wo^vjJJ)4#mZd;WtLLvx}Bcme{F
z($h*(9l;U92lUHu2PCJbWfr=JZ&^gWPMCHp<kq{8Lt16x{I7tvEoidEMjm_B`@8A|
z?5>9%ebl>~K8L)U<{>wR3B|>?U@!&ZG|}wUrPbAkpy=tYhgjL8ud&VNh~vT9YLwDL
z=pjko9UiUCKLX`Q1_@3umMz1MPioqzl$23v1dUuYeE6d8G(Yk9vi+B<6N{6QixaC0
z=MNt~zhJ`?`yanP=AJPUJ-ylk&4r#tk|8z!IfC}oMzB=x@5RzCm8G6}V*j$opSWB=
z@f9NW<Rrwt;mODMKS4DMd-7NZ%tI}~sDy=l9<+XeJLkR2*`K_-j=jouR(oSu%%ik3
zMQer%%Wp0|7Zo0F4~=Z8hR@|JioMFtR<8v+gwLh$sm8ic@eMT=X|}KjyaU<dW3OT>
zpt+iz^`1qv@ErhS5`SINkSu60Q|;_K-tVwC)Aq2^u{^7~>#niKsD_4UOU1fH&<jmv
zAUIi1W#_9A^8?<$F^W5;dad_m5i>5k@M(zIAPswHm^j-GCSht5labWiZCi13c+i%M
zdl&e>QuwNS0o%%oyl;5htJ!U_@4g$0)b7zj*e}s%QN7Vva)H?B`XwSyt!9_lt6g*W
zyso`)g$7%Em;HqD2mYZ&bLXG0qI>#r0aRDMb2idDLV%RtVC_|mKf3gt92!ZJR;2xE
z*K6#nSHZwk)gLiFkX=*0aP=LnmnHQ?6!qt;=!d2huph%mA3BrGR8oD+e);I5YpbhI
zp$z{FBH^n@W9WIT7)_exr!vpANOll37DPo}Wf}qS=>mmgEeg>FNo?;VB3g&drmtRo
z^wBrPOuZ1f&arYGni@&n%Ooon_Rh6PZym^^p2ea4470qisOLv)xOa(Noy50ZJ$C%q
zt0#U2GS}iqeaSuDU$S4KFM&Th$(9#TlVcgu!&<*%3^meA+l464NzlW5JMG+DzYoHO
z)Z8^;!d*2r-<mMtTa(7Fuc^Ib+_*bx@%4G+tT!C>JO9fLN}rf&hRrP~m^*CPyn=#x
zlg8aqGkN{EaqB17+%ax~XZG;oIUd}w8$KJew;-fa#;5Xo&}#=`bu<wBHAAt3JqkT?
zwKff!HWzEHG)Jd?2={%k@sArUq!A#JIzf6z_S)&3FftOiPspFH{IlLSp@jlmynWE{
zo?zIqghh1WH;Gmx!@38#g3N43gm+^=f4?+mgkQTW(9E~{n-2sH3=H>+_P=V=hw1v?
z1NyuD0^>S|=?<g7ZnD|o{*kUY{{h}3*&&f>&Y+^WfS8~#cO?6MzTM<Sy2JYnyazG=
z{wzw@i){KY-O>Ke;Ml-cyT2pb5o9zu!~J3dqTM^vu{s{;-#^z8?l%bd{)i{SKf?6`
z?zHFI4E}gvT(Ez%|L4OwFVt;pqBD44K)Ab~_viU`x0&q>VBZ}W6EWBsnh)5(^)K&<
z2oUWIieqDo@PV7*`ez934jLHzd%J;N!)Y9GL*K4{Oi+O{(9Cg!VaiN<wxoY`BYGcL
zF?Gg=7ZT-d5XXT7)1P{3$x}~FKS1gO%DgXoU$)*<2hn5lNf<BD%isXq0lAqZ_O%x>
zH{EYzW%L^VF1bJ+ET6FayWWqzr$wk=qPL^ILJN&&4nEe4&1VXQuVIw&Z88)KW_%k3
z>UxnS5tR;YAwtatgw+=M7c3n_f>@T0e|#Y&P>JuA(s!N8c(RBC{z4fG4NlHbu95->
zU_Jl1jByoWY>_d75<N6j5VLRJ<Gcl1_&@RfS;Ux&7&ELGL07Wf&ND1`Ng#qCM#j3G
zd<OeI#!k#*X$OK9BaBU(#-@M8w|2Gj{AqLzvHL@)l9v87@{z_juu<fK7|2Ecw~T>?
zXj=Qo7~pcGs|w!WsoTk>>zCk5o=mW5U)la~E!?6&xZFqqc@Y#~g}jH)hHUyDxS<ag
zw}AKXM%dq=uN3dW35cG!0CZxwX~d0+Hz*xayUny2ym8?|D*4l(e;xl&xR7jh{;YXr
ze8z?i*SXO-%jvRtv&adl?!@fs7}h>1dh${6wf73F{IpBZ39}gW0jZGxOR;tNC?j&&
z1OK3sxCs}WzU7*G=FXd2Q5{sxr)}EQ&~Tj}sa`vA4|%AVJCFaNp<xqIq;g9$H0(B}
z_I?ACW%T{{<?NnsUZPgK$4hXx`-)g4QMj9~k61=(US2Bw)GC3ONNZ|dj#x!tB>@Vy
zf!}ZQkLXl{D8P;&DH9RLq?qf`iW=XIV@pF5f`h{XL!$6~jeO|V3J!{Jhlc4M-NP3K
z`v<uDCk-1O65#JQAh`&-O>pOo-vSLyFAC0~p6q9Ce#^LV<Z>11wdvtv)K-^>+VT?`
zO7!prv!;ph<FoD{HV^F-<GQ*>{uz0=DBMw2${jTXJMD<^#qK2b2*yR6^kF?n-KX5!
z6!SSbw_}-E!~AlcvHhZBVzOdVN)ob%4#+t@Bt9%6EIc%{Uu<zE&rXdQO#C?2oyj&L
zHms%P>aqaGFk<tUctKrx=HRTb@VN5CP<K#(U$isIJ>>oL<mjyEG}n-RvF^Y?(=2oc
zAf}zH7`lKqSUlK?ql)4&V~FA~9*RALMV1ThYVyz;I=DxeG=%w7x+I5Fn6$DrWpJs%
zZn*;zN2rT*Te*g<9OvC0#523zr*K=bygA9fZN-S&qAZW*%1pZ-Q;8FpFHjxE9@zcN
z!y>Ep&`m6SGY<*V{=0}VjUB1;Rt53Tx}xcB*g?LK9Yo#7H<O>Cb~jwm*9q(#V9_7@
z);pFF-oJl1etcp7$cUJjh{*mF$4%NUecfKQU9@G<!mSo-=;%%ns@I+@>^EtfB5v6N
z4Lwcu6PA6DvWtEMl*@j^YBPqOF5InpZ|E7qZq-=mxfXV-RvCJ>uv_&4G7iFi6aIiI
zi$CC(@bwqmWt$6r(OtGL#a*^Oxuc$pJ$<vgVNd_6s_Iu%ewL0+%%)Hu`<yDV3?CJQ
zL4A}A@;<uwZU}k3?87%I*!yM$dT4rDiEe;G(Fm!vDwy=vTli3{AY2L`28dc1c?`$8
zFG0Z(7&r439Eo|^a0N%9cctAe^4||L^T`U1M(hg}+#hqgr3#M0NW4bD*wN57C^#1M
z+^^t)pl7Fo<1m-qr{H+(ApTgv383c{1t)@@*A<+Ebm<-}(US~6AED(i8|K5>e(jG6
zM%!ka6pYmqdq}~$R>+=EuuV&1mVdhzE!rl<V`vF{fb!$ew)0U6c4`awuN3U3Wue!T
z>AHPjf0m%nSNH%e-}Ws9_tQdb&r2ADyKQeN*aiG=73`<EY=2d-8}Ppr><{>wf>DZg
zyMhC?FngeagR}^HqJo39D0`8DLo|ndvVx%}*gjLiVF=ry;BYO?{#^w}ApU0+9I3_H
zf3D!DULK+j^zes8Yi|4Rm7o4voSpWo!9y0K1sN8d1GFR~T;XFihhfn+P>V526+TW2
zG3F{bUQ01nC^$iL88lm>I1{y4<3|ck(%i-`6r2n{Z%uD(TC%jgZfR5N*v6(+?GsnD
zt{6hL@-^*k^;P87i|@r<=OC=LjY~RO>f3s~E5yXchNh0?y=ZBl(zv{-Y(+~$FW$oR
z#ga{=+ZWw~Dr>1<w5&H0VIALI-_o?GcE$4gR&BJlLR+cbrnPBJ+7dLib}bGnII{5b
z0ICC~5$~}uo3vHJwFZ7yXwASZ682K91Mj84wZTUm4ihMrcEq|0B2Gi`EJ0ZE(Sc^2
ziBK!F<-o2+3~jJAYAwQ#mBJ7#(pF%Z)(*ci<e)z3PZX{zv|5B*f;d|sUf%|Bs!ULv
zh4*kQ^lFi>DnPw-TcL(r7p~Vw9K@U{-4)0~-?*m<N>?El<R0gfR&Qu4?Dg@Nfx1-)
zzZ^fAC*ooU1aBy|48$g5mwX_5Df~4cM}HUGECWO(Q!hd{i4bEEz6pMa(h5Oa8%!$0
zdf`41?{;9weHLKCFM(|>-v2v2|9krXDgNurej(EQ=KK#8HH>N&<wTZxoHhl}V&vdf
zK|9qy>7xa2;!~@Lu>trF!7Hjqaqute>J%IfR>3|AHIV%J#$44WhF<RXEnBKfvhLq3
zU5lD})Zlu=NA+(ZOrrBv*olrf;3(Zv3~B_oqb0=M&@QOu5rtNL@0-6&aG?$5c0EV`
zyHGdQ%;`wWYU9<2n>Z%vCkjiE18V!dP)iT4wg(#915vG_e&AM=MJ?V|Nl>X!&1^?0
z5@%M4QX%YGq)#F0fN4UmZ=`TYk6Sqg`gZuPM@d>V-^~Bb{Qc(;y{;2M54FM$w9T8v
z?dv`TewV{<8R&08sGIq}-p_yXYq|B(Z((j0^NqgB1aB8<%Wg_Zuj_bG#<E^fDJ=&_
zTWNxW9T58K-i?kP(;Z>)G4#o>Bx!Fk&UEb!RPP_t%`-H<L)vyN8GEi>P)*x_yRfE~
zirp6{I;%9Tk-4-twYQlcG)%dfKMP=i_};=`?FtLR-bDxtWnq{Xrn3lqZzcoZ9s4Ep
z#$DBZh3)Hp81IL${utdeA*2?o4P^sa9E;aJr4F4XFzoJVi!mq5(caU3jVAFMmcmlC
z?`c2Lp1}#?Khg2$VO=$d4aPmAbnUEmjr5f;$gZ-X3||#xInc0wisfp*Mb-NN3#2^k
z3l*?J?8**fMQj+f{}yAgD2ANo2<_)=BpaoTU?tjTtQ1>LquCf%&MMegHja&Fm23j5
zViR#gauSwklUXe^<khjM4Ero>2Aj!dvDw-ft%=QHb5S@gS~Hu6Z|Jsy@p~XcU!i%y
z>J@AOtJlV|g;*S%gT%v1wg^>y6>HFLVU27tWK@@;3#-(=W=+uDwG4WLma|rE0$agW
zqB;ByMY>wMmEEFsur{`ewQCbu2V2c<)vDPVcAGYdt!1~fb=sdHr!g6KG}f~_wKZ6!
z)?$FTU0bKEW#57hwnw!)v}e&oFQCayW#48SF{_;hZ9#v5R-*5)yS49X)1kL;3xrCy
zYBRL;>|V^azXiF1ZR|d_oqdnp52=+|>;bleeV^^bcRuIfKFANWqtGn&kT#d?(*DXG
zX1m!B*(2;nY!7>s?PZTaC&%M#KYM~b$(~{duqrypehghPKfwy>S?JyUDLcY`22Hxp
zL)7F&c9i{`y#y_~FGHKiD>&Xb#$IE`q0RCHP9NW7Z?U)W<=;oxJ6IF{lD*4*#omJ^
z%=g)EpfBdP>;v{Yd<FdX>?8IEXwm$bone1upRhkc()Q2nEc*-ljQy4Ujs2aSWB*|1
z*+1C@_Bp%A{>8pv|HjF}m+Uh8id|t}v#abH>ttP!v*_m7;NnnRgD=L}afWVUrS9Y|
z?#JESp9eq^B?xjNAz1Z?@o;Flii9L;KS&1j$KBfj_+HvToKVE`1fB?)$7E;<gBD{x
z2og`}*xeh#Gx443EJ%&y;NG+cUwO=jykQ|P!mjCXNQ;la*O*4}5?+e$e2vDgLOD)%
z#^NiQ;~||o0b1rK;yhy#WK1XXT0TX4nAc&Y6NcT52<(?cVb>=bCt@+!6Q72!t<T^y
z`7A!0&*5|VJU*W<;PreVU&I@DBVWvy@TI(oH}hq@g)ir=d<9?0Z{clx6>sMqd^Nw7
zui>}xwfuIzj^6<teV6!pey8@OcA0PB-{N=iZ}W|O6W`3g!|&$b<y-hYd@H{fyQ=r`
z?fiTEe*OU8!N1RU@*nUAHJv}ickze$ZvI352>%h^!yn~)`D1(^f1K~<Pw*%CQ~Usb
znjhpp=7+F048$3BtoAfkdXHgUxmSBl`;O+%e}Xkth&GBp!=L4c`A_)~{xkj@f1ba9
zRpVjpr`SDx5jz=f?E5c(tVRhx%74yZ;=kZ8^Z((m@K^aU{u)2dUx#M!H?-qe2OiOW
zrah-UuRR4#Krd^g>BNPdt~dEx{B8aYKgoZ|-{rsJ@9|&r_xW%5DgImN`2QXMkpG^4
zgdNS({9}HG|B-*f|HMD#f97ZTU-)PIul#TP@BAG92S3mM$uIEF`9=OO{ssRxzr?@f
zm-$!xiuiK1Q@dN+jMJno{3>*VeVbq7o!WeSfA%iz81Ld<-i<9DrgL4_ZQ4fd7n-Tt
zbwf9GhwjuiVa*$$eXd>9Ucf+mpB9gkkMC<cv<I{&(BbdHpnbo#TX$)@w1>3EbwBMv
ztfWuqZrxuG&;#`#Jy;Kc5OEkpK_c`>JxcGVN9+Cd7=3^qs}I!U^msi18}mtevYw)+
z>S_8QeXyRcXJ9AgMLkm=s%PohdXAop?ZP}gUoX%L^&%Wz4A+bG5&B4dlwP8j>Sg+9
zeT-hNSLkE)ar$_@QlFq#=@a#8eUe_IPu6SoDSDkgRokYW#^n88thhha{sevbA8WtI
zO8kuWi9SuAj_)MT)Mx3l^*Q=nqjX_g<LXAUqqQk3d-NEybb0-vwiT^r>53&QS{s-7
zjb7B$wy0zI;+DoWuF(xE+UplBYHV#c#w@CbFTC1T)VCYu!saUPaW~6VH03fHiaxu%
zY_v?Ku)-KCLimmCja@qB<haK6#v(%HWJ#xTk8Rw-`Zm9DK4HeIWX8*6jPdPFEe(x+
zl$k6~X;yAlwqK=>cah2RLK$CfzEM@bsH45ns1n2|Y?)ClvDH3UPo7@hy2O9d(vH?8
z^=%!?Tk1R7%}FwGqgMK__3@vVZ%h$bzbV%xpOY<;&n_=2x78s#Mx9Tv{2W0<PIjp=
zRTPW=)IKRrRoR^?vumH)*3`Phm?|=DOqU5x?@iD-y`ibGt#MV;Dr5SRw))kLelvR=
zjhO;P31*j96dJQcaM!Fp+%GLCEDID|%Pq@nS+S^PV(B<(_vBf2qc(HZsw|J6WP^f5
zrUdL3!SnKk#TZMke7~_GcLEObsRIHb1LWigOJHwp=yA+0&&d*&fKn@eWGxKrt)Idk
zP~O+Mw|YwNeWNZ67~j|X_#RHk*e3OH4w%~4+QVw;d1fEiz+SEj=div>3*HnO^}a2!
z+^koHU9Vc=qTaG|E$X4oXb`M68pX@i*yCU}s_>0{n&22&!}5xZB_f31lHO=#3&_cJ
zE$NL#RF9l&=~SL)TS`rEX>S;3lc)!EwG+%Hm0*)<j7_3m%JgyzWTVWNjk38n0u^(S
zeCHMz*lM9h*&@hO*wIF-#J2iiJ^6Yg8s&;UO$6I9)PEUm(tn$e|GWZYmB9L~x-R*g
z>>^t`HO6)y@A<is^z1UDLpH{aJ}Gsm>~^Te*dZEYhir_u%7kw1O~`qxRV9pDWn;Xp
z*U`Amw=otOYejI^+CJrg#yDCv#?e;eQ;jj-vK#eO!Lt48MFa}&X>8fDZH+D$4ng(3
z1PDYxy+xu5D2NiUTh&Hoky#cNS3Tuh1rV7Rup}hMhY-L$gyi@Vl5;&FIeiI1z#c+!
zd<lW2myn!ZLJ**bkQ}3h=*jhy)k?vlm<22e$sMg6R<+cxS}NeaG!zE*HaT)G48VS)
z>|2F3u(#n!dv6mGcB4s#YU&dzpr`Q&SGQ_8GDNcsv7&E?j=t8ON+mtt*2gulxBdv{
z(7xq+6P)OD<@o5ymgBA`TQ+`Awj7*1*|J@Dvedgs`75&AJ)+%svh(CSOSxxR@#HJ_
z0`<1ilU;x(OLkG7>{1n8&Kf+~Wy-&0xBQhWe1&|g`GQAvTAmz5SB^!u@}HyV%u#ga
zD0*@feL0G*9E&b1ewBWXq9@0q)ADE8t^8Z*D0;J0{8=i!ER{}{6`w_)N-s;%uO<hc
zd=-Cz!WXFci&VTt%Dq&%m#X;6R5_F>e3|lJru>gq?qd`^<;tI$FL}yUJh{qWt}4%5
z<u6z9H_xgU%DqV0a}}MriZ6L8o;)iaMNh8cORl0LSMfDZ@h?}=o2SYlSMe>^vRnQv
zdKDi%Dm{-%&!gz}Sad7@9z~}|(dkk2cocmeMVH5-%Zgv6?@{!4EIKWJmfgy~m5!n}
zPsN|7(#uon<XQ1q^r`gn6#Z(P^5iRj5W%1+m#09bQ>5Z6QtqY7y;Q|hrub2&@MX$>
znesnc`5UA1QLg-zTlNafqn9sis29oRmKI?Ix2!qYvX<v~Dnu+f_)sKy!&{_+x5y>l
zA~w7Qm+%&;<1M&~x8M@qf(tpGa_P^LFG@AXlP_|Cx8Mrif=avvm+=<dz+0vdO~rx^
zPky0uZDZRC>I;h`)X=(OxdUsTOaZjtx<UZ1_N8r&66ajJqN7b9or{}RD}Sq+)<}P=
zu$pR>pg8oB9$TAKgfflRj^%A44FOOZ1gJC!lxawa(h&YA4dG9wAwZdi@F>zCNaQSA
zw!@t4JjsFVygVmzCHyaSi`+<fl^^9o!EO<?vWR%H3MGfL3MGfL3MGfL3MGfL3T6CR
zg_6Trg_6Trg_6Trg|dXR3S|jr707m&RVM3Cmg<kPWc|Y@hg5vB{=%-}Q#B?_)tD?<
zW3sYJvqF~MwsL7>>wNjjY-w6j->(nK*CqaDF7ubPHP*K`wu!LOeSP>kg(@dsT>rkf
zK2ZfJx0c3Lt3=%4K8X1}*a(HK$HY|5nuX_(g_y-QwlpqopO49@%-71swx$&g^ZUGn
zOH?1!{Ki{4>RW_EuyW|d1T9+8vZB?;OIYKYMQF71Z|P`U)!wwCRfbc@-f)q=7@yz~
zR=B<q47>r|*F70^bzx)Ms-`8a^KS|YGJ?dE%qKOfmAP4%(aC&?S&U2MNPq#WaOT@<
z^>1uxX<CUTuyFK~IS_E5gd0}e+A8e+7P-O}Y}tC;LuGoj{eg*JgYYG3$rgPSXc9FY
zZ&9<c`5<aK-lF9IZ}}5_8SJ7D!&~%q@F!|M-l8P|FZw#XMc)a$XbE`B9=bfYA`<mN
zRqj6ZE|l=1_O#LAx~w1qM|k{vD{zSA&|A`B7RuLO03mz*1YI9bkZ|+y5#fXIK}Y$b
zeG>?g4!)@9KBzuqhe;=DL_RG^BCoGAp(;+_j-Y>ET%Wi@EH@FIU|)0}R3G0xF<D+@
zbM70=a_fyTNRaO1H_`{;OKFrZUd1CK5BGH-SYTrXR<%{tv-qUqFPu?$!gH`?>*-=-
zq*ev6{Pkje2?&%)_4GB;mn?(cj1K7aC96Rn?#W!sFurkz`Gg|Shg@H8GD+drCzCR8
zZww-^L|)g)#t2Wn$Ud|Uyxy_bpNLV?E^C`FQ4ziVd<!zf2VE~)Ww;Njmt&DWSl@V~
zeek`YASI#KKHmrQ4IPFajJhuxJ?JgMQ5RNGsHSJx*#*Y(rdHa2S=G2`MQekY0%XgM
zC&wd~P&ppik>%vdB@^CqvIfyl;Xik@nxtiw*~&ZGRtRKPnHty2<V;SD|2bKuaweCf
z)<s!md1ifE+lpH|R?5VS3b3+=UG!uMRp=Bb>YEj&NMdNPRG55;S-7Hosf0RKHdwwT
z3EAb6r0jAzb;&N3Q<Q8)Qnp+&<z&k#GTw5^lU?Qszz#xNQ~eT*1nnJdD%$b_x1yW|
zhXUGKz|K;Eumtwz!Pl`+SOR)-<Lg%B<3{=NbrV~L1u`7v(8nufQ&<Hb@<vw}w9V7f
zsH~&Sb|PGHHxH{oVOOllldHg-JeAcvxf+07vMg`3oCW5oDv&2v_c?iT?8?cLt5w)X
zyO4eCz~^T!x{Z<sC>J!jSp`n9pR;Ji@`X;ZPeqXOQzrHabF)Tg*0+d~L^!$70Z#c5
zwG8-Dr`YE42`$PqD_3n*pgxNIF}$t)F&Tqe>gTE@ey&=Q=H{xH)e<x}w@_>k!98<P
z{i;S~De$!v`dG3=X{s<;qTCDp`|QXB^la!+2}yqBsAG{FH6hL!U8ql~8SP$3GH0Vj
z(KUqlTBfwOtytDbat08Kg*0s--a1b3#2<sMXSN!W3G`)@c>EF}JHQ|*PzQ4wPVgAy
z5blDx5vTqP=X-}?9>JLx)4tFkvyUj_U?#9hFl*Tin6ua%nDcSIj!!ADB`}-Va+oXF
z3YZ<N1LmzbIcGRCzZ2$NI2mU+3*QKHGfu-9&cN@5xt(o?c|Yz~Fr08d4D*NVM=<xY
z{V)%(12A!#4HKu?Fb^}(hSTd`z<h<h2J>|WDN~$VzXkIozQMt8V*MV>_u21oGi)ZG
z3G-dtJ!Uvp{0+?Cao}+(7XmXLvc@`2(n<hV=_J`rT%+4g8czE(a0$oLIH60yjh8e%
z6Q`DNm#1=Y(GlKqG3ZndcM%|jfU{v6OvqN_c9e!Qehpuegy{Aw5RIk35<Dm$pf&Bw
z%U7;m>-2UrZZ{mRFdWAcnw|diUzfkSdaVn1o854_0w5zGB}>@v{_uw@XTm=X`>gw%
z`&`obE9cqyu=8aX_=UL7_0NsZV?Iy181TilFS`DH@!!|}ZNGH+QrMSYe0llHufDwU
zW#^a1<;$1tmt9|d^_BOl?kina*cE=oeI@v7<7@w`UtYa()w~*T?eewGYhBmO&aXSY
zo!y<hQ}1+iMt5~}dAnTROWyA8-*$i9eH9;0*1OH_Ku7`5S$;RJuRwzqGw5s;C;0}Q
z-|N@tL=|VLrXFDHv~inmv)N2rfGx`2W!LRCyTcxA*bUPNH2Rs$G)xB$Tsz(81HKIC
z3a|&B54;l86?#7O%dpSF&PTIozr;)FU+0}A_JH@q=f}J-1Vqx&DNvtMQB|j9wA8n^
zqBis8^=-?v#mkp1UxssS6L)fxP~$z2MHzz|YuhO(;<4kLn@S6}In?`p_1>x8yVUy;
z_zZ%-z4%E8TEh_1E<&R=z~3;<SvspcP8&A5whrcm(pfNZJVxfEDwx$(V_?=!nh3M5
zl>Fe31g4O9r`RZW8}tn@A2BY&Y~~~b{v0Fe>|#!`*kyJy@3uj9n<Y3=)6uFwg_$qf
z?il2dT5}f61_)I#v|mxL^&G&O`vaIvPZcmEvfUpF`%vO2PML9w8}{BB&Tux38m`&g
zuejfKpK+g}*5N*b-!u6A4WVw<25_?nKBd3E;r#`EP;KgO;Qg)^<^ICw>2!Dc2lYIL
zzx4#+j+=avKv5KA3`U{Zlp;seM;*pV_QyE6{-gE@vO{%GhZI$UlsCeK`;pYX{1cGg
zoA_PD?|uAE<M)}glbdkAsNV47k9y#bTf6>I+Bo+G`S=f}$Bjm!9`}uZ{vPXrAGbfm
zR{Y0_2bccTQ|o{I<My|nh#t2%K!Xv32fvZ{)gl)8LthJNCQJ4tLmL7y%3h9CLYG1n
zL~N@em<h=w$RkZd4OoQoZ-fBkM(qcJV{dA2X>a%P4e}3vhm6!e@cp!ZLRJY94mal{
zB(q3vY8iU%Es#n&0BNDO(6@eo{*z-IVRWAb<r9xL-3JYabX6_nNv7dRg*@3U=m)ps
z$%UN61E`zdhlE5vB#fRwoj(FekaF!E+zhAzH5VcEWQSbaB9_F8v{p6>vSJ%aPE6Yb
zIkB<YcSuG|yNBe%w0kiM)oS;NQD{4;TcSNc@>tpqF}Ca!qsk9J?E~6_kfQp&_K+A=
zc8T%ihZr|rg@hB07<)*rNqZD>O&@5Fi7|oNbOv%2k6h6x84p_lWbKAytjrT*<s>my
z&Jy+Tb}?2yDaOjD#8~+mxEQDXo5o7W<kdogt&FIIoZEb8o*PGFCFI<iz|U$LD<S8G
zu@e3;RzluwEo92-Xsm?18^%h6#8}B@gY)+y4vdv-0mjM)5EF967E!KP1LX>_lFZjq
z8YLmwhEWo-Z5SmX--c0=wbCdFnKtAZa%~tNSv$(`6jCOMt~E41vb8imvfF8VWb23*
z><;i^=yklP121UCP%F4FS8!py;KI{_3kL-k{w}z1S#Ti|xtoFf6Bnvz#sJO`7wTxn
z0NFm`!W_Ycxq=JxXvP44#Dzw|g~fskOK8S`91<6n(~JSR!i)jAA}*|^83Vgb@M68-
z#hro|-x9p|w&2A^!HZ3T7vB}U*g`V~Na7Jkw$hA&-AgkD_JH8X4#AP{3y$m*9Qgsw
z71)C`S75uf$DK=W`m{N3eD*o7f7Ur~d`g@*dzOm$DEvCOZ@%fX-Ff44$hqq#&kN4$
zpGxP=o;v5vo_WrjJ)1@9R%$OGzB>4mbhm+ONjuRmeQpO0<ogA<9D;d_tv6<T)8o9-
z`&fRQ7jAqUo1G!@acrlz<@frxV;7!%j!(pM$nl9W!*NbLFOYe?Z_DmDCZ3ZnxAiza
zu-u$aTF`%byY}`zmOs#N&T&aRUT2JW9Ap|ZkY~!HPcB@0fsJw1-t3|HT#I`jVV~o=
z@!5#nZt#7aDHbg^zAb;wEIh-UJH#^vX0`JX@ysCe#&8njTqvFv*GlVgu6Axv&lcxP
zH+#M*F68`#dUhbq_ip-p<h;qFXnE3k7<^ky9C2*0QX$Cs64?;<d(MyWK8v5ITdr~R
zSU#OsB;?{Qw}o>>xZ=R|!6;RaYa}4}MjC?W<j1vGg;_~&O3SsjCoIYV_HC{QU3(p?
z*$>S_&a>tr`8e_|$UFoZ9yE`@7asFv3-4NKzA1TXzK=W!{+g#9>#WE8%(2e$E8}&P
zSh2dEGcV$YslIvDQR%SZhsQkRsB;A1CmxF$M}99=6rUr(5rtoZ>!2gUbx=N5I`p=D
zUms4<Ao6uR49Y5z>Qcu%{FXX4tEbJe8M%Lu^46OdnU-U-Uyx(FUyytpyDZ4oZfo~z
zcI@+OrpIwe*vlL*_?6M)IObO<A-|)Jlf6BP;{)dv$0vTzh-bau-Hvm9cjH;_xI`v?
z_q*H<ugmRpi04W4EKiCj#(CJ8f}eP7?amfT4>er82^RKYqU8+pYj=+EYnKmNk9u4Y
z&V{H&c$_mV$Q2>Nso0RCcbyyj-i5iv?_F1%a|eEpApOIx!OoXZ_r&8oVL>jB^F7o?
z@i;%SAgg4Y7r?7#;)3%EM64;Fce~uSc1n|CM=Tz2eI#n#995H7iu%>*>U6DjZFFt3
zN*lHDke}gakRA2^U=RK|*DJ2Kfji|o1M_dLFJN{Gzd?RUe$n`4B7G`}<9Mq4rui+P
z{DLav5$|@%bCkwz*!JW13_>6EI}YewzYqOB^*ayyWqpC(tgqMG_4N?lT?mD{$1z{i
zwNH46;}yqA;4-=~!*{%d#R2XplO1x%ngchsq5b(I#}UUXfNX%Cfghc5K)W1=$sc^}
z6d_2B?*TxF0lOS<Ve^35LlDOeWyfBD+XU!-0b$kS*d?GjfHn%~UO*cFRfDd(9ME<M
zN%j!OddFbkX7QztwZe5faO)h<bIEoATH|m7dI(Uv1M4fK7UH<u#P<O~c?eo9zE}u)
zL(FsLSwJ>G=S|$F75-+K?*STu5OYlEUSI<Oc}&V7;j&DTLqHkklQIO9K0gA!9bt>i
z{epupuyu|U#~ipG0(}V%XtHK;EWr`$NCH&C?se2S;sB*Hr(>9T08j=ePDK%fJt573
z@3OD~ybxh+i1{dD!39#`iu=Ci8UZZ<L{x2of2;}tT>-=ebQW&3u-Ca85Y}aYMgqDl
zpa?)%Pa*_X@ZbfxrU1hF61eBIDDxBZGvKm-`&76(0Aa-nTK2N5=11ly@OK+<r;UAp
zpjiZ0^bb-gcQ*^WW@60<D7`zutTNUDih=K=0v7|^bH-xeN&y`<h)<|#MuSlch|=6A
z{AIy)k1<lZnr94@JS&Ck{lXP>%mB}TqdE%e2||dq29-SGGgli_^0;kpwpk%ex?DuA
z&1SQJ^5D8yLI|<YP9;AK&^$Yp{7|^gQXvw|X?7}kf8g#CIDhyXXGh7iOi(}Az5~!w
zxDFGpOW~St-vAu!W{!*n(A_=pCD|9k74#YT0+$Tel>!<9sHF$u0)jpWLzF1x*Mzc0
zgryR#5fIvv@tJ_2pxrDJ5OL^30U>@9>W2_w3?OhA&;V?@i1schIB$ipKW9P4UI9U?
zh4F}hz$;^yfUv`1Toh0ypsfNzSr{^J*h4Zl8e5QtN1J85YitHo0@t^NKTu_(x`(;~
zy#(N$zRkSLTnA`~e!Fqdpq4pOzt31>Q0p3@uQT=;vW1*5_KO$>!{1(m!u}dzYt0fs
z;rxWLgIu-y^lipYGXuB`K=+#ofMNlyGpTjO!k?@S=?EKSqIHo!1iT6;UBBHn$7rEg
z;7@WER2o$x-2{D`{bl2Q_)Fj?>_-F+Aq<Z(jKad7EJq3<%R7dDWE|J`z?Gn*`gTA?
z{3H7jeJh|s{)Q2x-wh~-e`p*L^){QoZp<;L^&=Krlt^O`f5U!NUjW=-9%8?&=K!ii
ze0%f?1?|-H0c{1&L9W^+(059NjRMV|8nJM#K-d%fGN24lz;W9`ho=6I>@Q$5il7kt
zA^sttOvEybp9e&#?cv7(CG(GLA8^V!K_{^fEMmddAGsnvKt})#MOY7iMnQu)<$MT2
z?BTnGzc*|f>23{+0)3LF=$CD)Ipqyu?KQkzK^43KP#kb&!j+&xUIUycErb>v#~l=+
zo+#x!8aZEw_+%^D3g{{~;F=65igf})|7{CnUjP~k=u><LoYDxfondDHp;UDlAMyS@
z5p#vU&34j8uFzR$J0@_bo%%<%mw_9}-_YN)j|2p&Y^Tt3>MRBRWIas*ZnteOaGAi#
zHZ%fh$leY0#kO6<_iI414dugCLeTJvnn8KP*AZ>)0vdpOKp_G`SawuEpp@Gz$W|+$
zEQB~Dpcv$B45MCf5=x<j(dak{xP0tYNhk-m5k>v8d2E>i3bGBhWdWjcTZr93$+ZOB
zr;@lR+;OB@9KtVX)Iu{6pG$iL(0Kla&A<&Gs+}P=u2Bzg4>;t-4IiD=@DQ}I)qqgu
z`eocb6s=7ELQt9r+y(6Ni`4XU*o6~iq<@BeW)T9Z5;r`!`?XG|dJ6rOe2u_mK%bhX
zzm0tseFG|@cAGHogvqo(0WXB9X)a;<!{l1MFc%0jLYUdYED>fSOr~i9P7ttLz{7+Y
zCCo5kQk+b)3ph@gDZ-p8@D5>;AFfS+iGfPMqlL+Zxl)*Z!n{M6GTpHPP7`LZFl%8#
zJ*t3fgxLWTJIw-46{e)q5O9z%C2au$HibD-nB#>hV~ZDXoiHn4>LTyheiE1!!kjJ4
zBw-E_W{fcNg_$hOF~V#S=3HS86y_RX-XhFIVHOKBN0^zyTr13WVdlZaFtLI7HdC0Z
zggHQ%<uH+N0S|`BG#gA!lRS(D%(ZG^juNIvn8Srx1(RvS2kf~DQ*vO0aE%n^?ZTWU
z%ur#D6J{k$3}XVGA<XH*>@Um^n9w~a;38qJ7G|q3sUBj}T)>Nj87|CRVa^feBw;oQ
zGgg>Gg(+)nfq-qol(mRBplPyX(*=H=FqaB*qA(Z3#7U1ZCFQdOe!ej033IY=m8sk+
zFl{iwMPbU?RSKAE>xJ1Y%raq45oQKVOeX}qM3@c2TrSLh!psupAehi81QQbxm|R;X
z%tDy>6D9*dXHnQirn4xXL}yVvO^d9@!8Lz{&Wm~7qD9MB^7lxPl+RiWVLtv52`BQi
zbd`!P5awcGwg|HgVsLGI&5E{$R{rLyrq;!LJ&uX9`9_#Id<)E6z8$8A?}VApcf%~;
zdtnyxCt()xL#sL#uHr{lb*x;)k7~zpd-6P1+ZosqIO`}e&*HXZC(h~IxTP3_Ckb~8
zGjQLq*iosEanxb2vkrFx8}t^ew$|wz^{x62eYd_(Kd2wkU(%23C-qbMY5lBzUcaPw
z;)Ks_3$w-8FWHi88IET3&BeAcwklhlZH}$MMyuMbwsp3RFn3^t*=IXwoVFdYy<|I%
zvFeoVwC$|zyzP>$6Q_f2!($J#$JmqX8Fr7o7`8F?Dtn!M4xk2m3(R)=I{QZZR{IY7
zZu>s_LHiN=OZMaTllDvYQ})v^&)Uz!>@;jfjNvxIU?v$EnDZ1HW6Uu|l~D(C4(9GH
zM!T^N^S;x@R$~Xu-I%u>#H{8e<G69sI0ejE<GgXn=rmhQ8+|j)j4_kU40DX>F^geV
znRVtIvjMK{<~nnuxz*fZ?l$+C2hAhqOXhL&q<P9bZJxzC?ULDv9T&GF%n{>AGOnUY
zUX~|@=0Q3!G!N2=p?Q!_49x^OF*MiHiJ@6TCx+&FIx#d4(utvY5H*cyKNn`OFdf2l
z3DYS|KVb$5GXV2*roDt!1k-+j89LKmHk)Dok4ZY9UNINLeAR4#dCXi0^EDC5UzmX~
zxq#>$f%;ATEZ0a^6+t25UbKest{-kh55NuC1ZXly#YsUrPO7qS_LGM*lp>s=jL=GO
z1GOAyS(P}ks>Zobtu|GgjvMcDaFe(mCsvE0N1z!aY%5NVNKMIF+@{~4eOud%JG@(P
zcXhjVKW^Xd#BJM$F>>$0Y3$<|%MU;U)lYEi{-?NQ{Ji!e=m&QKFz$<YoU~(>E%0vQ
z0o>hp3Hq72N7~K3%3qs$6UX4sQ2sHymUiMB;idL0=FR{o$bMDE=T|1({VG)aBxM12
zbDFY4enQx1Njp{-GQL>#j#2od${wQLK`K0*Pf>iC%1&p!WY1A{IsqnozOol8`!H!Y
z6#ZBy3V&EjQ8_Y~%D-#B3KyorMW}a_!bdB+qSJMkw7WK|c(y3}HfhJ&Ptt?xF6iRQ
zZj*0&<^SqWhBH(+hl<Cg>~3WbP<D$?if?9^a{piQ;XEh9J1_kI#b;N1v2Bpy?J9lS
zYH3IP5PUE?mHnIf@?YiGrs{{ysxQ~Yhxxlm5A#|1R{Xc!FYTDgigawMy!7)5e@@YN
zOxlg(3jd+PzpU`D+~7~d=TLMxURLhUDgQ4hyK*;P`tRa1R6RA`RQ}&q@tsumca{A;
z`NoP;(9zSblt2A|a##GqE}Y<tL$xF0kc#IS75=cYA5r$+e28#ZJIZoW<%(S^nXcly
zu}_AF&IE~nM8&t~27l6hzjA+4xhs0HJ0;!!kMx;qRr({<yI8%4skhZHY*F@1`F5r$
zdlKG3keFJFR!bCcv(4P7psm<9l(_w-%pW&jG2aIcnxe7Gc3y>XnO``#qYS&6TOA?T
z6U@P0|6(ES5(*zA$wP88qz!_!N%%w8LLg!YR$~h3+917_VSW6X|0mzh|C4XW|H(J$
z-Ty|q8OCC0?7={TA4XCZfFH(Eh7p+sYs^W~N6fWDL;1M2VN7JMyD@e$$8+7-w|1?=
z_{m%?-Iswm()}-(hqP;CcB4Hwo`ePqnB8B(+{+v=k7`?C?(TjT=FV=^U4(ic=Amv#
zy}|$IFgFVS>qVSvNUYD%qP4-?4s}_8yMG094U`!%#{!JP%sCReK$x=-V=i+RV}xeT
z5|RjTj)9y9bA)NJFlPyfIZ#uas9BBx{A%!XgZi_0yTE{xc%v60CO8mA*wGvNp~jmR
z5$+MZ{|5iB;Qbl!yW#H()DGs{0yWkS#KoN(P*;keqlY=yqlR^2y2G9A8t2dI)xfm@
zchS5A+)_yFRYL<Lb1nw%EaK(PIq>(4@V5}S51q4sn*rQ+1a2N|)3EEyopmBCa^XCn
zao0%HZ0_76aOJ>3W4`&M%LCj&gnbHOxpOa|T_Tn=xNdXC0S6uX{7He!fGx(E1Tz7+
zM+GhlIZAL|0WJWzJpyM#*l8GdxZ^5tKN7e?*sh3NW(o@OK>=dI8B7ksMhhH9dMDbO
z-%;!pLJ_#Y<$-tLgBjuiPaNkE-%b%9_+@gx2H-9O_ZZ<E=ds`U1##B#DR2h_?nBCl
zs|>hzf!il=?MNfvfZfq7(kMaL1)wDbGfD24CUB*|t%JY2u;<AgNE@ZF9k_Au=fdtQ
zcZ?LcyMY4_T^#$Y9DOkPLl5Kt=NwVkZ|67(Asp4_FxbvvzQR$92zL)~$cOWNV-~1H
zK7ji!a52coXH@!*5YYTE(M;uT<cl&pBm6x89DEolj(rGwPT+p1{6#oHpDF!40o)PL
zx7q+d%>%;UeZcKO>}}X5=H^a;`yOyxHE#dZu@tzw1nvjGtpV<R$2{O#LCZse7I4Xa
z%uxs2Lf{@0xEa75cA{*}YT$MV+!)~YI`V-VCgOusEOyDcBLgyj+^i6|r-91=&TB`S
zRPNwG0dP^U1=%ma3=lZ<?xq{ItM*S|a)CoTHo-shqWyhvLh=u?wZh+Lc1l<J!#5QS
z@XwxNo`yg0g&!gMj8nix7$<>y8@R&)_a1Nt#%6Au0PZIOcU<GP%eJe)9Tn-0MA%p0
zZ-EVbH=YwXj7AvQxUtXn5zM^;Hv(mey*&F!dzl@%btFK(u$mvDIO)vHo@3lC>Pf7?
zKO*qhWwXcH6Q~Y23I%?@zy|;yU=J}<fX66<cy<dsRxCEJotqKJ?InTVOL&|h=|-mQ
zg82pUN8le9_zUp=k#PY#soeY&CrbyRSBLz60{q*?8QZ(SpCbQAVKZRtHA_7`NOvU0
zwgp(zc$p2hV$CKrn?bu7Y|ZHXH$t{8fhFo$u&=||xdmE^wqljD4Vs2@q=B}AA9_vv
zgl<;HdSF)jVBkipHb;)|V^Sz^h?%v@kHFwmklE4{M(B0LsT;FlY!#uTrq=+3I;=2}
z6c2Wknfas-2EKVMaOXrQC`}?av;k&**n?ply{Gt<z*YF*gHbQC=tNH0qhXK3p0{Op
z!5$>{f`MZU^#;|DW)~tnJBK~fi{@o^Szwsi4nJqeCw}?L55`1>QN{;z1l&G~Ims*R
z6<}pddo(-Sk99d7b`V(RNYnb6<IKZmHP-O6%mwCAb1~NOZRQ$tJy!Bt%<YaC^B7j}
zADExu#PyQt#b|^+2IrmWSc`rSBjW>DkA7d<2`S45u`1n#b?I)%E|&af4R<%{3=>+N
zpt}iiM`$xxO;7Arow!e=QY7lkWTdtkV>4-!qx#jGvX!pXt0(mDLF-;3<P67CE$pLZ
z?`9g<Zq#KKWa+}vUAkY7W-HP`m8JAi5!D#0c^#STV{jGo5!j~)^K)TV2=lZsCkhjD
z13d2tm{uB$|52Ej*8o04CUz7!_D|kN4f_Z`gusa}!&$hPP0$Pjyb|@D=JFU-7+M^2
zqK-Po;D=V~oQ5~(LVwKAPcw{5G)ghYX3RDY!yR-vXhganFmgfuoeS}6#cwTs@aH7A
zM`SqXe!TC(k4C4Rz>|G9e)N6@zoWqI#T&gH=qEW>^tXUcYo91+x;9Hf&{c*VAWe4_
zyQ*As;D>`7zs1Ni$JIjP57yJ%wcWJ`<^dP_QP*)7`d`->7y5YD6+Z{Y+7Q14m>GV>
zFf05(yWax*TJT$g+13`kH{b_a{T{?`AAX?G?<M@+#P1Y-pWt^Mzbix~<o4xW4@!}J
z2HI?n&m3R)UG(z`>Iy*}sDw5)DmxAxc~p`dTH$aK<2VH=noos&2|ot=X~*9vcDOGV
z_Os4Hzca!PO>UYV_z@)hy_)X6>~927ec{j<2fW{L_cTa~%lJ<to=Z;6@0fCz;g50P
z{a$cSbE7sOTpjH6J}qhuhxWZQaNqBafuuU&=Zl&}?o`7#^vDst3mi}S?GW}e!VbAG
zKa{laFY`B!(t*6g96!_$;45I~fz5&IVBQ_LOS8MTxE~DMANX7#z6s^t<$f~oZRF~l
zX7gL<cg1aUAAsEaA@@sxX9F(@3HsCScLT4&wZ{Fv-yHWRz@2q}5qLQWHxT^lAmj4B
z`!aA>{T)F(2%6yWjh86Ds-QGLK>>S$GJ`Oh_=oxbKjz*8KCa`s8=bqmcgx-07k$w?
z2!bF;f)qtk6iHFCEXlGY%d#Y^m=YcP^NT+#eokUzcR|UCokVe**k7zTc4Es-k!3}u
zZCQnC>;y>=009uamqpu-t>1s{-GT*3Dc}3$z293BySL1pIdkUBIcLtCb8d-lzwTZf
zRj8YF59*HMXuI02`x4Ces9E`t@+mdsjCzmmFO-G4Z{uh`e8?ZwA*w-XQ|?wCRzHDj
zPpQA7`&-=)iCFz7>Q{6>!SB23OS+fvdsO{Z9ri=jUsr!$hxNIE)4k6v8*&Xb23U{O
z&v46JR4LcJuj|B1O1`G+RR2#ygJCye)z2smTv+YVb>aF;#?$)O^`{Ljgw>rjzF|`7
zU&hm{VYlH<lfhJGqSsGQs0{ZQ9>ejw+*@3a;d6#(aQwajwHp4~0PO0z3_sM38D2KL
zh5C0($JB?__vt2Ze4qL;^%vD&(@kMi#29@_PZGnAjB|!pj8XpD?fjTa(E8`pPZ?g~
zuYoG~@fU;6geQJz95B3Wq%<U^w3EDxU!K0jr~@VGT|`D8`yP>Tc4LR3ldI!QhHnEx
zneMA5sqR_bccgb1zHfllOyvev|Jm>=r!xG6NOj*g{KWVpg+~!Lyh`N8e>1$Q`zPH`
zbgv?&C2CR;nW5M4ieW;UE3GiRVf-PH8DB8|($r-5z3O#i*u<e-307QBB5NpQF^(D7
zO#cOb@{~L3@J+c2^jG{I7OrA;Dh%z$9>eqONmIUw7{}O7lLjSN#7!JTti+@kYqyMc
z0$v>zv6$sFo~4Yp*j8c9326;oEIa0jfyP7ay$pE)#qVLh3mJzzpkx^FKLf}mD1yfF
zT_R%28E7)dAiEjgl}r=9tC%hLu3@&~yOx252`?eMiwikqx8u73p8j|z3j;n+t}=&k
zr386m(UQP_konV0IOP1yC0b<ntcRT$yRnE5KpubOq-{oofCPC!D?~E91y6!}pp|&X
zZX8F2$O5Wh5;!VCHc(CkP6mym22n}CB=UvUBD*MBLEg|hgloV8f&8KMA`Ns93G#?G
zAnPbgSmYQj7fF$)RCu>oHE=_Cj!vc4Ian*Y@lOrB4kOb(<(FFErxv(G)_z#Qt4R|q
z-ycJ++Gmg()(H&#8*J3Shjsb`Jbe+n!dLM8JflFIKrUma{Q-wrmwgoDP)c(>qUHzq
zaT4lIjaCic#&&*u52LO7Q3}~(dAiB8n`%{PQ;3`yK|b0UM1O#~vLKLNCj;vSs4(X?
z<k=L3d000IbA`ezf}abS5gmXgc_(0}bVg$;=r1FpS^>?2Orw`l_f$B#u=Z@tbNR{V
zD5odDuTTq>KZIH#)|AXXt4Nmo9bd8{t7KKy88nDBwbW&uZO=N}pLKS7))^pLQ_IJ*
z&hE}S!+5SK`I)S<r?bvJpLK>c;hN|EIqU4lS!XY2ok81K^W1Amya@O_o^>z#44Q|q
z;^Chlh~ddTzir+5k#*-^NY>5pQksyjr_ZT0Cdhp(z$NH^1o~}u{aD}ga0@yi!92>o
z|M%<8vChvb|GjnhUs-qldr%{#Bl=B0RMLNpKW3n}(CbIi*Wcxj8PVtX>+i0)PLER>
zEWbA4WeA0tUZ3F0Kf)hlKH$ng`dO+~&<}0*5s^?vXqP@KTp!}=;n$dJ#_-8?J+Y^I
zPBm}B$1u@aKf!C_^gJ7Ld(-7<dxY#;cRw|AQ<%q_2D2yutt2rmP|>~X?mxKhKHl?|
z_57cv?^B(hAfbKs{col3Qz=ZaGS0sL@9FyjCH-XG{TJ8W|Jl0xze?Yy<3kAagslGj
z9@i-T=m^pKpp-1i!a6pqKXgS)%R?jK%jd2u-@2}R>$>~U;<M`8weJ3X>+Y{Ve{S9V
ze_i+d`tx6`EB}jRdD;tt*96dCVQvs)I2X>2@b?5;f-pY_GzQ_G&};BYP%*`WK(%Y{
zfv+WX@D!yBC5Lg9erS6_ErKONsEHu5Ot>eE!|N!8H66a`%t_6<wX;!}b;2x4%`P#8
zho48ZE-|z`p;e&`I!Eb;-T`dMc{t3slDZ>;=fv9M%>1M)4+;r|Z|&S35Fq5KMws0c
zvzwDJQ%w~AXtQ`uBAlhq1^m(S2l)G$=l?W$PT{BbF%PJe<tdex6?$<1bjv@<bGH;v
z6Yhb(rMaB|H9?$XYHWu2-U}shyapF^jh2E}fIfwT?7pNZV}BBsVd&SHv7#%m)TpFd
zhm1>8Mv4~bNTkMyVm3ul0*wgkJwVA*4851Cla6$%JxWdV9_6b-k8qsqk#LW$7KM8P
zpC+*32vAWtDJ&_-GNUi1l#r$c;cR^^kiI<Mr&J?Q2OTXsifhk=dje!QPTr%Gn<*(s
zj}+xmtfb1(9tiZ7g7MvSZ|I0*mrLOwRWogs9t(Y>Gm+Mk>Tl{;XoFrC$_qFVj_Hb8
zxGt=qXwTM5soiNVlcI{7lYB;?CQ89K<B!ffP!}(A3HHR+*Ml`hk~^lj0@fGlD-=pX
zcdL?fO|S*fE2%QH1wtCqJdw^Ag54~kCv>g|=h@}|JY8PUHUA=6p3Way{x8z^DgLN-
zB-BUe(Ax7<zxJlf3%u;^botbIcKeRxeL70CJ|{-(WAHE*s5(V+l)?oJd~02Q|2Fx2
z3Lk&BuKmAH-lwyN){k9{q>K~b|A+Mb)Oj|1-%H-7R861%{u=n!QVKn$_g_qwr?ZEi
zXJoMO{444E+2^VHcO~yrI;YRyx32uZCeKslA=CJgpmhESy~p=XpoJIsvZ+~*wRE~<
z3a=^dgs~Rgj`k?ep<G6wWJ<rZB>m0EniTJ#Rw??SbdBTWa}*1LB`S3fb0|HFQk4CV
z{By#bCU~PrYIdjO%u{?Vw2u@PIx_T|9@F}TW7;xpX{}}|z)pLT%{2t*1Xyvr26B2P
zv_jhyWFz0_EKTJr>!{`#9)1Dmbd;V+-xo&hw)Fk%bJ{X3|B2-N)cJ#emtr_u<_Hoq
z$>Wk#E7V6dcG~+Cl|XAr-WTfsLi&E{JTt3=am%LiuP4jXdlbHJpzhQx6nJ2E`SxUa
z!Qx2p771Zw#ITtPbV%Wo2xt7rrAAADADSUQl9a0o_!r9aXTo@_p<{mJ`4OeCJ(@-1
z|AU7lMOR-+o(aA9c)Aw?HPALv6#qc_UWVocIuod&moLjx!Wv8n_b8=Msf_yYojRr(
zR|aR45>q%6N)gz)QrtT=Zcp;?rbeCi4r`udE!ntCozXIo6zMW+@t49TE%O{`DFshz
zE>NtbdMn^U7!Ax9kuc*@b0Jld_K}WarY1TTseaKq2zhKB?LCfbsdni7$J6(P*8VDe
zKXopQiGWezSwYvy^ngOWb}TYwQ@F*O8rML{j}6)(#DqVpzY8A<54FP33`q2w{?Sk7
z7`qN6|I0`=MK6E#sU!cBzf126&sk6wXM6AuCHW_%)Rsx#D^Abpn@p+QNAzb%K}jEb
z8gEQw%5dLA?9f5C!w=?O(D0vN{n1WqLKOz`1pVQUO?VGh>e#~6;aH465#Dt5JbvCt
z-^*ou>EnFS1L@<!HD&B#d-{5bn9f;hX@wONM?xF4O&#E-(7}(0!c1YIZSm!C1JDuv
z8s5Q$BS6QP5v@WfY<Pb#d}V2A{ykiT!o<Iei%^L8_i^zs(|2;AM*K0wOo>o8Q;OPX
z`+x}USHI`q8%E$WM?ZzIGj4^}bO+uKbp(F0ZP+vZ9yy8kf8B@t8ec*Njpy+GsQ2;y
zrhdGWDGm#$1-8y6yzl5Rb{-!SeGzZ!8G@y558e{<p!jp*FN@p6J@DR^OU#mbNvq_b
z<UYyclK%lu?QcrHBY9JDR&rJ1V;NS>ma>iPF7^=ou)og!FZM<DRrp+=X2a5b(vQQJ
z`t#C1lOB_PNBRTlPh}$67THnRALQ@|lIO`Q<<HCiMgDU{-o7KhpvY0wDO!-r;ts`q
z3Wwrv72j9<RPmbPgrY-nO);(TDdL<NQOLJ*4{%4gFLU4Fe#QNs`v5V;Bix))q|_>N
zloiUGl(#8Aq5Ny*KPmrR`D<lZB~zJHc2&KqRdpM7hMrJ;N%fbiZ>zqidQtUT)%&U|
z$X+z3zF+;g`U~nmQ@hmPQNN)6x%xHr3H4dcCp16M3~S~!L9JM;)#hm**Zx}jM_r!o
zG2It+U(-FO`$yfs>0Z|TQFlsrMW3tRum8FJHT?<wd3~>bLceVIjN$JM|6=&1;kcm#
z7X1l>*N`wOjAmo8vEI1D__*<Z82{Y(1LMz)uNeo8bH;#4WYU_RF#RvnznlKU^as;>
zX07=S^8@B5%wIPDrTJUt@0ovO{)MH&@{HxA)nfg)_0!fP)-PN8tdrIyYs4nA>1|)M
zecyJ*7R{08m~!^#+?DfS&gXKzlH<tvyPO~7{4D1`bKcCkk`v06<mz&Za;tN1&;3fS
zBlmA|U&#G=?rXW{b9-~gau;)hdEz{E-jTd7=Y1pZTY2Bhdol0Tytnes=5^(b<ZsU3
znSU_<6Zwzie=+~7`R)17=f9Bu^Zd^I;r#i0e?e8j)`GnSA20ZH!I6S57qk_8yWsl;
zKPmW4!CM9A3VI913YH3@g-;azpztS!gN0Lt!6HdfZc$^=V@01Y`m>_vihgWY+AHjj
z*gtP~*#Fl4Tl-t~Q}#>tG5fsTXO9(E7B?5)U;JqCKNkO{_)PJ92~)DA<f)P$mn@go
zm$sC;N-vf6mClr|lr@(9UuC~2TPd$8|I6}tMR~=+iX#>OSn<P(w=1S9%PK!r`B>%W
zE5BNKrn0AUxa#9o->dp%)$yv1s;TPA>c;9_)rYJ9wEAN8T(z${UXxo>QFCX_mujA?
zdA{b~YhJ4PZO!SL%Qb_w_S)*&M`|6lFVwzMJ6NZ!J5cwHx{i9bUQ_=-{ZHy&seilv
zT>aIC@`g_}yxK6jY0IXUHgz^i8fzL4G(OSz*Nv|=dKx2}C7W;G{K?J#y!pk=uQyqn
z?rCao@@(0^<*6;dZO&`n-u$g*@7A2Hf3wx!($aEI%Rjexx9PTha@$MWE^Xhj{rT-L
zZ2$T8SGT{l{p|Lx?L*sVwy*5?=8nrd`ge@)aPRQ%h_}jGb*;IrrLA9Ub+vxG^&eY*
z*!r{9S6ctj`flsFoh3WB@4R*AJv$%X`T3n+-Fa;1cXs~k&X;!nVduL$&+Y8mIk<Cb
z=hDv5F3~RKuE%!$c-NaZu{S+@)1TjTVz+ho&fP!R9ijhjR^ME8^MRY6yt)16|GfF~
z9<t{XdtTe~&Yqz?fxXhby1lh~5AVHi?<0GU?)~Q8f7<)&y?@+$a_^PBv3*thp4s=_
zzK(r?Tgq-}x#gi-{^XXwxa9}8{Op$B-V)#6y#Mq2&)!;d>(*Oux%KW_AG!4lx4v@g
z#akB->^bnA13x+N`hl|t`VY(<2p?1)%s<$4aM!_49{l3Lwu66v@TG&N4qiGqa7c7W
zf2iir)<b&_efH2ZhrV^_XNTTA6u9m1ZC|*p<2L_o@x#T3w;#U$@Z*R7@54VjeClxg
z_FcE%fBRQ%|IzJl-R{4m^p3~xaNO~)cbvV$|FNAPd+1}|_}Ggd>-m`P&fGgcc4yn2
zzq@nv<A#qP`uOF${_XCs-2LL+tM?rLgya){bFbvytM`uHJNn7*-lxBB+kIE=KYahm
z2X;O1xd&c+;13Uc@W7P^CLaiXO7p4DeCkV|`u9(r{*?E@!Uvyxu>HX+pWgQAUwu0I
z(3c+i#X~EfDf`SfKJ)X>y!Dw2pP6~M<l(Ik-}CSn9{%RTzk2w>!!r;29@+ZHp+_Em
z<m4lPNA-_ZKYIAlBai;`qtVYk^_b`}`(rmh_V8nW`Pd7O{qeE>$5tP=KYsA>?>zpS
z$1gp>J+c3Zhn{%miNAf~#V1ZYG5aL*WbTt&p1kA9C!hTKliz#tl_xJgx%lMb=M+bb
zN2=5Rb{_fIkw=ew`N*?JzI)_nM}B+c)R9X^29L}ii9e-(%Kp@rr|x{}>8GB5>h#mH
zr_E0{Jbm!#yPp2m)9*fg>FJ@TSB^4AwMR>iHXhw|^pT@~a`Y=lzkc+&qyKdDUyuI$
z=x>g`e)PSg=Z|(D9XdL9)cbkzdBx{3&GGN4J>&#w!+X@>y-RbqAtuUF**8~Ct|@~G
zzpI^XAjR|Z#V*cwsZn*D9L^~noOZSENj%Xe{?+2*uUx{j@Qo!hJArJAxQ<Z;LQDd}
z9V(CMzU8rF$J$81#kX|5Ynd7tp#~;ZgA_Gzv~EV_aXl+S206yBWIUcs%d~#JWxk2b
zbpfLF_0g7uC*&?X5ON(`|3pH7Ad!OLdhq6<mP$KOLz5Em9}1U96))n>;9p|(<nX1S
zgKL?}JxjK10Sb#%%2Y{oL8J`-OnuOBkn=xSTw`!3j+YG_MmWq%i!TYV+=klex~r7q
zRzt`D>0Mr2T=F6zq?qjzSsNM}^h{TmRI_Q*CXK(#<x)x|Bog93!H`3L`t<4HpxA6S
z4-O7`qy^izZ+FQD2Es9p;|w~7O{2pB>u>d4c<H5=F8NwpJ?C(6&eMvDR8koyBck|f
zFzj{c4;(yHZ;A{J4HXs^vWwlXzy5l1yjuX@O@OaJq|%@=tx6>Jc<O3xqUc0tXXivz
zWT>k3EJs~`We~Hn+~(%yGBxpDJAeNCcrX-iFOV=1^d-VbOg6(G-g8Te_T78$z59wJ
z<FCJ}(yCn!Bt>-)#%Y-CxbO}dJv&D%TMryK&{|!oZ|5l}LoG33tYoRN%G?nNcO+}?
zKsy7agk6*xDa~g}i-pqc+R_63tiMx@zSG@hBgZZJgXl-lzu2{;#h_@GFcuQHz%z_P
ze)cTDwnAdKi~|EcMgcS_7+-7R8gP9r0bENc#h~Ef!-vb6!Q;n|Cvkf{YRk|p2iV(4
z*_wGL&~o;54Pb-^yOb4(ljQ<k_}3<BnXsKDNGf_S{<TSXs^jq>L3s&PUm3WbC&+3F
z3u~_Xa6NFH>wa7hrmibc0iCN3GUaN+D7yIRI?rIbu5Tynxi#(3_CK<n3_jF!4tr8_
zcuhT7@E!tOhcIR(t0FoO4fRD_BHDXiE>|kW5x>vp^M_W&IklTEUKw3+X&Hv))YH?^
zA`ot|PRY77!5|&03l~Nu1qIyX1y{+c-;e3`)1SUM8MW@(@1Aq}!%?h9MI;&?d*j6y
z@4tUvuFIhbdc#($_Z&#LKOjlOoSImS#1rJef%^F1V7TT$aujm`9o>&oaa<s<+SRqn
zf4iKr=4K;VSST(&rV0e$mwoTOQvMrvUVAM;%F71_le`Oi*ND)=UOV28iT)|2@u+`!
zrMlb@_m5&i4tb)it*p!;^LQ$1Y<YT#%OR1;Ni^m(%M>C>8Tx6L6W;(P=!hsMXMEft
zu4^h)w^vAGpzpwHLZs9ijmJ++N(%O3rruJj@|^$eYtbmjtt^D)Dj8<1RE8PrGI<7i
zyMOn)-<`pX-FDk;x7CJ6NA-G#c*bDl*3aCeq`1z^z44u>FiYhrddtuOW_ufvrs#lP
z7iRDEp1A%Uio?5r!wOcex7loZIqRQy&zBW4Y-Dz1WMnqNa#p)N9G;n(@r1*HfXgAK
zQ{9y>k;17ND6BG&#j8N!5JOQI6%+I9tl3q;#3SKw*s~mD6f*IPzrMO^-TS};5A3!w
zbML+M((-aN8fBN4C3Hx_t0W$G=EoKXdM|=zE-n*Y6Og#cpjPYkT$~h_mlq2Xv<R>k
z0amTaG&ID-OG@1Cl9D(xG~{xMS+|>YiMf&zu3hVPA3nVEgX70drsKyy*m?LcZfnZR
zH7>E|+BHvmM(*(vnwN!bq;U;z5iqr0f^Oh0d0b#Jz@BX(EtI=l4se?|_V96X{BWiP
zp{DiPL1vuRxAD<Z|N5|HC<1MPBmy7Vo6Hj?N<)DZ4PB29mjUl(z`HJnC<m^$cR6OP
ztE<BliMbpKO#k>i#(zcUV06-Uoha<{2OhY;R!mtwW+jI*Qgd0^W{9#1jf2s^EU``s
zX$1OST1($TKLH!%&I_qKR9l1Pf+$Bvclaq4wC4MuUXkO^GWouC<>AA>G||C7Uh**K
zVon}?mg$IZXiX>78B5if!Gwfj0#iqTPm8vwuPL}sR~ICn%PDf7J==~1)%V`JfNnWO
z%;CcuYM&EoFWOl946VI6RePq@AiWOdOK5csFCRkSmKjDJ9$S?5>7KUM(%IF;aj$#T
z2Lge*x`sJOoI{6P%-EO<zwO#k<DNZ%Kvi7S%W)@8T#~y;;oig@iF;go;odvq+MBp1
zaR(_B=93Y1no%c&!`pN`_jYx;oa7A`+25`R1PsTIL)O#Tvj^bqNiZAwn$!`}T5qOL
z&@p+U%8az2gRogTNLn9VQx-l>u(1(hwpesI0+mUjxuxN2qbf%4+{u%(fp!5@vsmmI
z!bOmp9FimrcAFf^Nv>S4XGHDUJ=ljf_M(lpLX0gwQUb<?Pnc*+@l2_ftPDba46cAX
zNuXm!oaRV`;OPAMK|fKIg6oy4h=1_BtF15wu@zX2!3&qRFDBFPfb8FyCb>65WZaw!
z){{VZAinYA&>lFjNkcrB!R9V|h-T9PVH_yl{`)zFfZc3<K>3T58YA&p^+HWz#tIp~
zf8Bgs&y^@opyLPqF-fJ@;}V}lDc*{CZO)lLcdh6AdvCq<)_doBt_@7O-R{YOYkik7
zN|*cGZU=MxIQ={35Jia0X%$0}kA`DFZ;zXpYJuKb6PfQm@07K)Oib8pn02*rCLYHh
zgJknkDJx-AE1mDZ|9<C+s`3C3eW23g5s4}*g+G@=6h!R2H4<DUGC2#)qgKI$dVuww
z5TmF);FKLdURE|Rfa%NkJO_|B*ojIB6-dnE246~3JP;omk{B8q3=)SzS3stxr-Q{U
zEyV10Ba=La8+s<x*zjeH_~r0nmrEa9TyRee3=EKpiVE4nm5g>vJqR0tK`X-qIFJ|@
zzybJVAmH~w$HBZa8nJBg6J=>>>B7RoN(ipIM&ol<zn@$|^;d}BFXNPGQ_0CFhjSVI
zH{EnoL3|8IK)!Dl`c=g5e@>Whbf5SzS}WD5x)2eKr#_6vk9`D<mwv!luaS?Ub8*6M
zr)2(N#4bR$7tqn!SESR)V;+wu;GLSd2E>(=mK7RR{r&w?b4^W+S=#S%Nja5_7006v
zB6euy3Vlva4jCUG_p8e2>aNJ+k*m>ptpYlk#bSExkAFOIq5rPC?jpS}zx;A9xy$8J
z#Ny#lFc6A{0uJq&?yHwCUnY5ZdCcsk%-CdRUy`3m*Ya**UV@)dIdmOP=cn8|y_&{O
z33gKmX^cyxa!q$f?@C-`LvPA+jb;Ntl{3*;)aNd%DON^jySlpi$EH02;9%M3a+sM!
z$nPD7DD7Q{inUgoMXxm|7^f)`lPirCm=y&ok$-W~z2J*R;_Z#W#g%CEllR_aBV%v;
z@|VAS^-6@quxJj(SWc%?{pLU4pNN;;efQnBZ!gbNVTh%S%V|<rY-Ky>nzGcSSe+fX
zdUa&Z8*`f2xO;x|Eapewa#XIf6&2*!jnW%vu8I_PC=a06ImV*~NK11Of%EXvRGE@%
z87wEcOO^&KJb@Kz8<C}+xE1x^3S1VOOs4Q^B=Sz5dj%hV1RplHs;bKWZZLQ#G=haX
zWMDzAQ`WTT_6Ao1F{c)crf1Ht0=>Ag7Hzh-7f(%1MJ>g}U;b1r4CqEgrIdtcPrdTW
zD`UFG#{R0!`}glhC7o`k><_+qcOV*Ab!wr6He2NLCr_UAL%BcOm6U&UuLwIt5}M;u
zMDiSPT89cq$YlrFB!>EzE%VSLbXZt-Uyo~2ya>IAY(#)Ws`vD|ATuck7oMluPo<q;
zMU5~iyiovO3MrJJWgRr(aGN|rX3n3VK?pW!(}loWz!<B^Rj?1te>oOrz9_@Y*f9LI
z893JaHpuh!dg_hf73RcxDe=*|tI*H?4vCb(nuTI*aV^#a=>99#EUMwr%rvqJt|KIG
z3iP|2%)r32vWew;42v)8@?Floh;e)VSz$z}23C&J+A{8vCy+nEX&M6qjgsgkJT)}r
zpvw@ZwY6Qf7}%3<VG?r_Cpg2hgXm~2uaVar{5KS^?TPIliFw+;|4uC1P#?8&D!F1!
z2h->o3A7MsFJP;ryPa%mS5Cb?v5z^Ce<1gb#6DbS9OR~U@<9?#iYKZk%5!tM4$>5u
zm~gqs+2`b!E-l|dUeh%+;0ew_{=`AJ|Id4NJsQod)To9dVv%Gxa6Z7EZXw(0O6|J=
z?oT=Pz;W{WN3PVaSNn~}hH?hI9h?C+Pe!b>&CH06Qs`Uk<<8EAhDH~2X~x0KTw1d>
z6J`XK9BWnpnVC<mTf)qTKc=8Rm`qHBGWp5=sZu34AESmfRLcyxT-f{M<RX<rDagox
zypYOBE3{e$udR`rnl%66215v(g{(LqxYyM#i3OMDXB|pGBqrv%sYqPM!y(uJ+Q!vn
z(*AgzH58s`Be*Thnf-u!KPaa-5|?Q-8d*FtKRPy=YYIkIhI@K?hF2mYi)DEk9hpfP
z7A)%x3qHZF&|bib63_tyz6h&U%6|Eu*J63MKJ?H-`|{Xpue{>*I*B4}Ot7psCa8yp
zsV!jxb%Nbexh_h{w9MFo8{a_UgR@}bq<Z+_PY82(eO(z&sasCk_J>QEKyvROQ)AMW
zn}%+!_AZ%#p^@p%!DIZGtywox8=!AvkCNOyZR`DTC@AGq=mqH>PfGU>f9C(ayVr+?
zVoI1n7{@hq`XsJD1*&V3h^g{x65H+C@a(0_3V9;zox{h2^<F4SIBP+nMX%<fjKOZV
zN4;3{O+!qA$^yP+pRK8>DMy@Ool*sfjzL*#H^fC64I)3gx<*#QMK-f6G}Yy5f+ZXp
zTy(CZV_B5DeJ><&yr>MHl0vjC6NP3+h6hKN!q(_OM@NTc%b`Pu>Re7Mi?`>fxCN-Y
zGYMWrmyza1tPC7xn8u`9jfRtuhK53Ec+9=baQR@dDa*akV_xsfqC!Di$hPud@0##D
zsDal^gn617IjK9d+Z2sv>oRQwttL5A2KU)DWv*x2l`_{?Z@}#`kOMIIqrvA^A~PC|
zYB@{SeuLNMB$meQ$c*6kN1%Dd!r+CT>5dCbBIuc$m`Jek`5;t9|MbO+7Y7EmZZAfD
zmR>9ck$c#wN<>0t^9%-H%(p6bszvd@;`r2(2t!;TN*pt_6kt%jq`+bn2PV6wr^C3B
zaNQgZEiEmD!a;(OtSnOorn=5?>ebLHRj&Mzk&zXmFSIW%1c_Lq33=v}URX@yR*b!=
z`plVOzY;qZ4ugzEb`egk6fZ1jZoc{E>O7;`Srv<k)Dn#$i1A;JMHv)erROIx;)!v8
zV3pI9G;o|79dQfez6Th&1sJghX9tIdsNrka4YGqe?D0o+)z#Iyux}b%blMN2bXkjw
zIX&s58xiV`j#*+xXNo!E9qe$~YbzVKH1+m^&}wQ+Y(ST-#54598*dCPON()_gc`LK
za+gg;cgxgDHW4HH_T{q+*j(%Lv8K&X4k#VcXg_`@45~0Hf#8dI-HR1=9pl0B*Td+F
z%iQxGm<J_t1qrS?4biwvSpYaJ1oNb0I<OjN+Vev`-o)$+B@BhR=P%BNtq@t(@Z9;+
zmRx<iBUgfjz6@~07p5kz0)iQ~WZ%AhO@;YpB(GmLA9xv>mOB}0gO<u~eXTDKqj?*N
zujS&xyx=YBAnEnxv#;Nr8V`k1gY|?)sW93Fb99MCqRc5NDalbum#<#Ey6kGlI5?Tf
z(=J_08R_U4^b)QZh%l2`3`h6S3~VDaL*3orJylg57cTW`R)=vs9MP3vO;Q5mX)M7i
z)xd&I=F$P1`}S=%vA#Z_V}Z@zm((SwoIMEoD6tta97bE|?mc@rZqJ@Q6-IkAewvHT
zJ`9Z4UKWT$cZ>4?={Eq>;2;gIlJ|xH)9|Se-hJyWlj-$8oOoBV&;e7<#U*JzK+2Ou
zn|8Y#vM5XUKmn9~15oE2<eWe!YowA2t7kVHANg^+5AZ$&cx&S-NuZ#hKp*${SKKo*
zs|m`mrHNJl;v9Ay+`d%>I5U>2K*_92T}Be6p^(hpKzyEv$VC#zB%EFY!<w?A!%Zwa
zea&~cYKI2<2HyNb$70B+#_Ri}alv>IjRk^nSdYXc-iwuAZ@m1DJMJiV$%iI2(!^3<
z$9ac1x*C@|aueae$^vk(91_V<diQSYayKjrJpt?PB);i<+za>%Ata&Kun9&EK^*A0
zvdEZf>V1KD&*o-3Gj}OH0Zf6Q+-wem_Q!p&7EVtS0L!`xgTaM~i3xWwBGy_gme$t%
z=)}2`Muq66H{TvzHEwe`@)^8`kWK<oOyu<zfd1?9tPC+2W<dc-?yv^SVIm?i0LNo_
z&GiJXhf~+-?BHd48xgsvmV=~S!V^>uNQqz{RIX6%d5L9WF}}7NKeeVE+Wvo`oi$J7
zqsb9K@SzZ=@r_+t2-`4BB?;i9rrwxX=((a&ifS&NA5NGz0pF`ZqL4dHoFX(oF9nkG
zRWb?5$w>h9VOODoGv?>#n-pwp1$w~A4<;q~&8-We#Cx~wE0np<z~Tg%%}OOslUyyg
zTHQeM;F4Ftg+g|qzCfVrQh-c-AGN4TgJJhA!n#0rF=0X|(>bMJr1e#VpG;b`vJ&UG
zrmdKTfq=<`B6AU^0`(5ekWP;4Oj6XtsPi+Zvpy1IROZ31rHBIa!lsGGsijfMh_sfR
z99SUdePOP!Am1nn&+~J_VHAr+amrMK)=D#8f*D3ExX8&&bUAcJ4NK0Qn;~2YKQm^|
zx#|-uvvaez+*F*H0t9FJuk;R&jg1ZWc6Xk5|1{hkOe{Nd=JcuV6}GSy#OQKzh)~bL
z)0MX6kTX9Xi?P%Qsm0W9%$1VHMy+Uds<*e-FVZ#&xXEx{Ue05qS{T`nzRp{Juobkv
zJhrCVh+*UP8<o$#{yE_FbHJ+^;}lr&21Uv%XD3$@&?__&pD*IHMS~$$rPadvIy$#Z
zOh$tuygUlz47<dpxjEDS8Gbi25as^q;gR7TTde*8aLu<bo$2TXhPpe>oj(3L7^;bj
zM26me>&<i15mRGhqXD~;I-TeL2+;zD>d>=I=$VD80~14Ii~bNbCBiV4n^>SmF{gN9
zY%b)){B^MkY^A7~cFVv(Q&VH}=IY9_9Gy-Fi{GV19fsHCRA}-nl%c~$>5wwBFnW#n
z+SkuXB%OkTMUsc7_(2=NNK-CiSi9yBq$w|DvHTGrR-@2b|BSpzliM`uAe|69Y<Df*
z5{oq~{HwW6p?qfb&6@?&T<CgrXEa!SFsZ?=YMHef?Dd{n+XA&$X6xA5(9;(9Iv6SE
zdbW+Q?a!_&ztMsxv<Z`D8-WQ~=oRH2bT<{d*l|5H1qhl&AKYXVt~Lp#v^(r1F(8DB
zV(esh^gu-fokY5@xgK@3$)O_cgKXbd;t=!fV;u~<z5~O7&{k&FWy3&sJaPbo(q<bQ
zYxVR-cgL`S=p+{$XqzcBv_qhlm7UEm&wY2ftPGU&2*-&X%q7Vhy^Bf^e!FzT3R>tj
zrZT@^5FjZ*izT$zFuz;%CX>=XIXP*<ZY_FURs)XdWONk{rn9qMd*#ZN{z11pVTNAo
zc2kxq>AZ*;>15nJ4rcpC>zVe3Yjrn;0Sl4!*x>hEv$VgYJnZD<VE~CQc)Z>LsA>FL
z1;_RE_74t@&BFe^<m0ysF{27J><YSpE-At*!&o9>Q+Q;==M>L(buBsJ)$Wj~@=z{^
z6*;A99M~kH_6oPVtg@`8vZSKGZp*XVsTK~S|FAcqhdhBc5a7&}u=cy!po24FEheQ>
zDy2W#5{FDqr)Ia0!x1(?>5(u?sejfMKx#Fa#>b||#@(KkB~TXV%N$=G6WD>@y%PQ=
ztD=C*k6GRB)?F=I8)_SC3jqOGRsX8C5kk(@1{NRmM5rj#Xwgt&1`Tyi``3)Uu&#uf
zoLmjAokvi@*U==uLQL!C*DFiqJHKP4R7#U`A}GCKPuk=_^{B81EY9jwX)Jb)>Z<6F
z&T!)n(n(ZmG@B(7=ZE)o3*c&{be=2GpiT|;DZRj|H%fF^<>|;Wl<H;7o5VK-B@_-o
zyr`Y)a2fOr5|>azApH{l=_4MuC&Fq>8g}%JH%5#0?=Nc8F?f46rw}t_Um=!R3x)fx
zhrO(ozA(S|nT{`kQZxK-t-t76{<nV2=o2YjFTEF>NUUo;yA?Wiv>uFmvfYhWo<W&E
zLzz|)3lSryUX{V%)$U1=zIt;swz{$kYvk(6Jk~tjL-Q*UIrL|FWM!%sysvkvr(sjR
z3=V}3(F%5kRq;r~Y@UU3!!O&hl$Sd5CGc$wVI|eKNc5G!cC`@>NFCGDDjdsPtt(5=
zl9pB${Mh0y%o8mPo_m*(ENkFn6ek*`si>&Pq%?@<F(c;1273z#zQt}o@owLWq`>9W
zvveC@r<JT(tCuXYdAKN-vWYlWUu7&Sn!(C^R?M=c```<P;}t>oq5gKaqv!Bn?dj?3
zoAOMJ0haM;-~7<kzOJsQ3XLlTMltFIt2lFd)G6Uq#20WHEX})jqEqwyYQ2CZk?{^!
zX>Tu9>szWCiXr1omg0uG&0D}K1A|zw4+gjraLrQA)dmMTiG*s2IxQOwI}I_0qsv4q
z>jl&7^|6+w<f=XGU(2!px^H4~U<mAHXkc=(>*B?5ObhU|v2b)A>dJf+y5C!!i%=-#
zN*=)cUF5=r&M9K4uC1*t(-U{k1y||7Kx1QlT}@e434F&2D(bh^H#Wv6&YU=L;><+c
z(zs*Cj^;d6Bo#>jo>IYsCs6~q3Rp$x-t}OVm6oSgu@pX@3&63Zvbw~q$|=AOUSX~#
zx3aRPCLmE2fpryYrGe4WQEZrsckXVsI3)oeTnL?_(bH!fFn5ec2ulqOW`c!aX;o)u
zPshdX&XGCH+PRU=-t$;uS8;yo-Z2#5%CMe=iAJp8n3yv+9A&k<lduHP!p>k}eZ9b-
zm$fGGN3HP97+-5n&iu@TdpY8E`@D15kcO?s&2ix{W&cylP8I`GppZjAcM5Xc+Sw_Q
z!^uHeSeTn%0u60!%x)hWQ>k2SSlJU;B028TrAxgNZijUHc41ktZXQlkNtU%cC~yH@
z!lk)DM&9#UaC$HG5kUSZAlG0wM8RD?Kg;9-l{HpJ0bRaoWQkSZ%1R9#Ru2ZhZwCA2
z_#~t*hcO!Tc_uIeCjwE0*=9AW<Z`TzB%E4pssNsg;Xye+JHO}+t;X6LLUR+-Q%zg+
z;mLR3efPq2JUEBt#gv!Hsi`dM>6;8n^0BPgTvb(^mz$fLr*S!I=^8U1?6_RREYD1#
zo@k8HiU`hwOLUZ`qntIzVlbKvYF3bRnLhGTJc~05JPx*?4OU8QL|+$wR9ev;+Kh%E
z)PYOMI;daE{lHxf%d#*vPGh`#E_7TS1`#eL=I0Z1ms#Ooo}XXFGBYRY8N=Ly6%AG&
z4iAJvexDbvwoW5t{OEF6iDf=&2*~n*Jmaw%V77Z+MD5R%)@`_J(ChW;Y0QnTpb486
z3lP48AqB(@n9Pap6(<*8_W72UmVLoc#A&+y_S<W9WDL|}h12c8g;!sF_3cwhNu6G&
zx>>lz4-XGd!P-P=72x@X9Mb+iAULUMhQ^?FLE)-vFq!yusza?WQ>$BBF*a-0sWbwh
zPKW^D<r~Hi9~EtZub*>EdmOB9h}P{8HE6aI<NB(HhAJvt4t;j@6B5aUz(wi0hI)V*
zSNx|gZh&0OUcJh00N*GgyIR+`;}VCl9KJz6GE|g9DPVam1qd?>T4fu-^b#neA_<jA
zNf*G-Kip9b#$<7^tT?CG>N+M3%;4eze7`kjRlBMC8cYJacI_&YO~4nyZtuR-JviWU
zs9@XWROMhh<pz#(h$`!>YqTn%U0z#C&)l`z(#91Es1ys46pYu=0j|3S;#)}bl8t)6
zR0*he9skL0DT6%~g#cff`6Kiqdzb8by`ZZ>y8A9IDI6n(V_2_}lg~;o&g>@d+BQSy
z=eVc1)P6EuuTYDNs+8-9<xYv40s|$4u5eFEBqv?uu6EUYV0S@KG5#)Rf(`~F3#^~y
zCyYcwzkzA;?d#(?i+c!=^F77a|5Lq+&X7F7s?0CS=}%Nl4NsIZ1K1%C^9x=0GL^O~
zhprAZBsxo~OD-j_vm-@ccf-izAm@`%mY@#a<CbNY6DpIf+%_Ptm>V0Oo)H#_!#)=|
z>0rc(W4iwSg}H@=sf$C6iSvc^71AJN3g+zA?NwDA_jQgdR&5v?-j<yn|IAooiP{E>
z;D(+XSCcF1fa*FcYQDBKzB0A(E6()w^?UMo%|fUn#GY*+ElAWk_wzZ^eHON*lk3{P
zo|3YubuA^)k;-1N(<_-C(6W@9x8t+ER(`)Ay#icYYij*MGnCOR4^=nVMa(a>7&ITX
zcSsaY9c7T&dxlkGGfUUoGo(9(v-8<Ih5C&<g-)GBA{J$D4_>!_X`4f4RCo-fImSm{
z=SMdkVUXc4YHyMz!n*6w1drY8w31z0rgfh3;FvA+V(n;r6wjkNBd>F7Z8n3!V6$m;
z`4#2mOH1YDc1=90hG11k<B?fdQD!492M29YDTh|OaOI@S&{7DU7Cxu?GU&9`7BbZd
zowj#&5nB(7vps#?9UYypf}B0u#Y|m*7``yY*tWoqyTt}hzO={|=2J~21P4wB5jnK`
z_Ejm^#0Vt!FpRcUDXn&GZ|I(AHpTKbBYmpp8I0WMI&YIoTSGJBk+ynC^V8$8wq-Q2
zuI22SGA;A5Md`7~T&E)eZ>A00BpcGS&Jm<4%i`kVN|4%cJRayAGkp$eUsp!wU}mv=
zh8ongi5h}7!Ftc=>KxLh7OHccc97Fa+c<?mur`4g+`ubij6zqm7CJ$X!xKq8F0EGt
zVcu9(!bNv^dD*+VxM;EXd@iwZe%`nNMC0iT+qc9fp%X);Z>ZJjW@c(@UE;V-9k~Il
zNoh(Tf#zT(WQI#!N&m47Ciyv-_8DC(f3-_gAMPu_+La%zHTxuV2PXtXtQ$q%%AVzA
zDM&GXR50Cy@)@YiehSri<wmGBKEc-nlPsPfqW1OH&W+YlSQF51>eI5e-<h_BJDIlE
z-^t)AbH@s6ZW}XFmV#FV6i~P@s5EGT$3~{Keub8vs7jU2+!6Y{+?=}e80z^f>e<A5
zax29)8yA@ByvQlyfmzrFhQ?<mCMK7I5xPF&;(pw>ElfbOpKv+UOg!XS_8KZHD{WZD
zI`c)bg>gJ062Z+D+l_e32_jIVMva<XogZ{<njQxI49^S>&UhkXwzqH0BT?g{)xy>u
z@dZ8e^X}QX=mK^ic$=Guw!nyEBoPFG2E$>IQ=W)eO;F)Qj8m6j*m#8K^=!f$!Yg={
zdO>SWd5E=HIDpELAb41iXu<xp!~?ek54;rVMl^%X(%#;sgaNBiV`8z_)n@TykIF~X
zSbC_0qQYaa!7wDzu7;&J2b=h?WQ2%3M`(?XLbhZr#FcG!qES<e7Yq8uFC!MI_17Za
z$Tdb=TdQUC(Kgli_%Z=U9ag|it%c-JCsmaarf`#1sk&Ek4L)esB=-gaG8w}Cz(5M<
zhKxf2H~Ttc2s|84wwIG!VIvH3z#u0`BSRM@($!0CG@G+W($L0S24SZ7ZWbqjW0P=4
zg=bZGg@uG)&`36|(&u@{Udd?*twVg7q-t4LR_{ew$z&e-BVnphR$`k?m#s&=HFoSj
zNu{2ULZP7E%bPb}y7arvn|m%_IstVK*ch62Ff_F2?Aex<>A_PjwTdDTD8vWmLsk50
zKZaAwo@u>eE0e<GuXz*M<P=@LyovACMog^X8(ER13PAH=k*YKz$cR~?-8#25_DW2A
zm-w9JTwdPfr0XBF9R=O0d)dfKzS{Aov9ZEJ*FOlDdlb)n4$tVKL}}3V^tq$*JTTW{
zO~_Fc(w1VD7!v-`0h3iPO~m|gsF|IZnVy)zfiLWG6vCa+H;T1!?@}zGE3(@`jH?JD
zgaN!rrBJZPq~druh8H}1vx#Hl;qb239OAhOVSH_QIUZkL>_2tt)O<p>X^Y3R65%vT
znM}sOc939kz^Po$0&Ke%0b>;=S!iK?ejc+(hwU*00u0X2d!tTxxJ0AjsDs5!#{Z<A
zn2wBsCF*Uu+}n%5N3!2V-Z-Y<jvqG!0*4PTBC-upQLa63Ll7`Q=OAx`&pZ`k)bg2G
zZzw92&rB>O>u_N1E5zb30zJZFu|n&zX6hs%h)V-U{0oqp@Wx5D;82f``@~`b8wAo0
z`o`BtMuFdZA?GrlnyJ_|W$Wk*UaJ+RimH(pTz{wRt9i_@xQKv+Ylg>Mf46>4fS*$7
z%BALn9VZ}Ng1v`@kW7IM?z+0GotL{t1*#nkxx@&E2_Mr&BJ+#TXVvP<m&>awL|)v7
z^Zda>F7ef?wbnIST{h3yNVglWP>NNMq_@4;uvj+Wz^oQe<_#A+Fs*Mu{~PPsc%=k2
z^J}bVbSkJc*{X8}*s__ikwJtL@RJg5uOB!Vx#XB`Y;1CFacO#JqCC-;(@<lGW6cJd
zYS>&*;2;k<m^}3wtw`W6Sp863rt>-Iaad@FYXaOkBoYzycLXLy5?c}%@+O_)^S0(0
z2duU%?t*=aks3b2uoE9l>>Mw0i8q-qn;kdk=_b@$k1?{Al-SIArJOee!xAwk*B9`c
zi(uIKG$eg>dBGuD=sS1rT#q~ato;4=ul0>Ddk`$4fSIDw!d!#idaO;X%+rXSqR7g;
zLsnIbeaE`0%B226dw})2Tt?Xv{_u{c!1k*AsfLi~EII4If7uy!VDO6ef<grLglGr>
zX1dN-r=Fu6O=h37%vnbACh<(WY%pij<>}ISGs+A0Ju}L~+Z@qYv~cpHL|cL8cul;<
zw`rBO=ftzhGwhjjJ*t*dE0t~?ZPS^mgSM%JX#o*h6jC;C(lAiANR}v+?0C^+@o*l>
z3h>c5^i4GS3vMq!J!QKz`fG@We+kiFZQNR^Wk&c_I{pjC$@nk0M5W}FQ{JBvSjl<X
zfHoTFC~@4CE6ugAv(+|VX+H4T&wlnm^A%Y15nRf`DmWjA@hKF>11yYz&tZ$MvQk2z
zL=#D+r1wAm<3D;OmA$>#5p}X?tJExU$U%lBW~o0N`$gsO_M{wM(;u~Np&?|`*+PYN
z@INhVQ?($FDkF(=R#qx17H+>?421$)a3V2|Bb{ilGvcCwEtjv~Ii4ozt_RK9;V4-M
zNfoBvUX5n7^YZ21QH`eeswW6}7xY|>m_cRc$kjCGkbrYUV(qloOM%rjy>^wwVw12_
z4%gK!FPlrt^udMY<+|G9TzGEf7T1<WpiD(dYtt-70v1!CY^Mk*GAnq56q)5fh@h#o
z06GNckUS$2QY=issy%_=-L9^gnfdvFfPCAwZSufC8vDmoh+)rxL>5NCm6u2~HWpLA
z2u(4fYOA(y_jnp}mI1<YPNOgiX!MxMUsmSFNF*D+5m!0@SPlS|HoH`TO)%(*zGZKH
zrH1&1V80#m5luy%ciDR(9KHZYCJ7&TYK04IF@#|%mB`Tid<Y?IkjQQJR7@UxaxQc(
z5M32wovL)iefb=AguG(07qv)bB(&<Z!UR1*WuBL)O8{sNgd>@mv09V#nSo5LS9kTV
zpcLkQiJGkRT~X^)BpgKEhhTWi7Adv_4DhTPg2cXt%4iaWVxv*!gknP@WC2(nAd3bA
zTN{mJr5C8|T_J`|Ti~{zijh^T;gRAna57mArC#Jn83bq(KA+dASViEYlmM`q8)|t}
zr>8p1^)usa<nze(4WANF0QHlZnO_NnVl)p6_CNAPLFzQiB6k3GZYCJUh4<4L9SURh
z)~#D>Oj6R~AT2J4y{4wT!aNgPvYiTW$swPj42xC=(+Cm}`zJjyr-;><9g5zo7{;!?
zK7Pg|;isOWThV%v*AH#p?_ELDD*^$&^Nv>oENi^Izy0lRsi(4>tU5)jMBc8YXgq%&
zA;Lf}0*24Kie!9zu}lU9Ko*H?+jh@AZnuo?L(a%5;8k4V`aA8c%{B`fBxAtl7%AG6
zgrEr!Yz72YI0N_xb1QP8g(@TooFzOc=}lnSos;8WRS5298K-<4tM5X2V0;{E$xAPp
zKH=$bWAInwQk-$k_uY5jRwzEq<;xDq?EF$N=91?@Y44s(<YC~cj=dM{?L&KZ0pETR
z-0o2Uqp?^@(cOGSgf6f$NN*R%S0izU3X^V?s(sb#5TBo0VB?$`nYplV1sjXQA$jRK
z>`TNlsYK*ZZQ5jkS8Yef<;xd^A>iS;5l3XsNiQwWEME#p>~={&J!Hz}h%8%KIeYM6
zA})d^DT*g>9PIeTFMiPx#J+-B9sUrGcn2_W2QW}7G3pJr*`=k0=+=rNRZQ$3zs76R
zdfCZKjjgLoGTG{?t4)^hK@(i?B^)xD8S%fRW|>1dK2GXeTI%T^PlatI9TzSPQo19j
zVhmZ8A_i~=Rl{Eo?+i;%N)Lv^n44{~^E1$X!!zd{vfsZ8S%2=`-#e7yFgbVm@;Umq
zX8rW%fbwgAa_8{y_&jwbUs;Auj(8lUZw5-Z8_M$3=to8m=h<gw=jUgqrzXZmM}~)&
z%L>e9i!~=NAF8}P#l&tDKEG2Vu~rl!HB)G6Vq$Q3a%lk@fHQ8nvbdqr^pPRQdB;Oy
zoen#Ld8Os$6*c>@6Y2A;%)^K}*#G`Vgd+2lk=Ac>r5$eR)<zo?*+7g)doiv1`&){g
z5K=9BA8c=vMO%%ktAi^FbVzNq7UBNazuxb4N-%%AMw4rXl-=LBZ5zYf7QD^$j#+%a
z<YMu~@^UXUV#Ei2*GN-0oHBJJ4y;CA_E(J54-Hx9W<^!icLkY|^2^c{6(Nnv{`nVU
z#mGZ8-!%6k<`z;?J+C`+<_vc4?GMN&CV=3}@&|B3QC0Q4@O&l4v=U=#RH=G;Xe7B#
zy?HZTa6<ks@G!X6W=b)3ba33n#J+u7-hBCGmFne}-`qm|e*lkbW5$$?oRvlu7N9ki
z*}Sljm#4hQYzaaz32YMqf+|X%nIJ*TNzvtWpkVe0(A~rA*hCsrnT}7?Qa}e@>E9ka
zZrG)J)xVtw(y=a15$_lkI6dXBn>SaM*>kN%6ErC(8LL)%-DZjl9t)1^>BP+Y?>nq-
zzunU{G>-s$=q*qVO7zj5x8Hu7f2^v?ab5M8?@3w@r!r>AmzFWs(BcHx9ra?%NEn&1
zLXa@e%6IK5uPV@`L`&aXq8y46^ze*Wk@a>7VkN1EZybk>S27mUq;F<=9YQl}Cq1q3
z4n*qXg^i~h=D!eALG)3x80>g#>?3EZctEKf_^-^$4D8qypev|!{M*KU9>ML;g95im
z;=WaxPR*$e8cUAFGCVvv)Oq@JN9SnY_^Jf4Lg8>+EH_bip(>L+Obxo@t1gF9Yc{aN
zGrzdx6UiK$!D`ldub#WwJ>)rNz+$_j<Jt<*l;fdt4OzL?;o2e&&(17>O9sMT_vHAv
z#iA8Uj1^6dHUlS4$dN6|XizbMF@!dbdSe{iRqE|X?6z5HFe{}|nZ>BnBC^XjIW{pm
zx*~-Jh!3ZrdpYoH(MZCu5f09VB^rBOQg&CMf4A8Qe90t?gqnh&(qnZ(fAuCRG{_LC
ztRzE>v9i(#lQBXk9Llb)d6I*BQLe6z6tnC!P4$I5C>(yK&hDP-ednEbu1@XVy*z}2
z!R6h&2N9={DKv6XR3wf%^yqPEu4;946&)hp8DJ|34{txBt8w_4Gh(AVG3a3G3dOTr
zqy~-m$OSHxv2^oZDA)`Vu4ncDg;iOZo7RBbOSBU997n5RRRaVS@pEc@`C9AEHe~Yf
z+4=ITR=&KnD_x#ydb>akaMzk#f>WK}Ut8PX-Q6`w`2qE?t*s0AT@spjVWnLT<iuuY
z$+c?^WEG@;?RiS&JS5+wQrX#Qs;;pbBaz+Bk%+}|{yfXNWELnVH({UFq3`LrrPX4I
zwYJ7cb2EuGH^-9r*+`*lEOA+}5mbwnlIurWSaFZ{fRNm6<MoBDGrx|`Y!3bUZuv!<
z>wCt~2MY}o69omG#+`Cwhh*mm(I(2=S=K?fy5V&~;0?yoKS3j-9xOC7OHD*(DJYnn
zUWq8+vMPrr8jw@p)wpM33>n_yOW>2B>M6P=b2)NF5)rRXO~Y}muwcPG9}v@+NGp=L
zImL_^9*>Mj{A`UZx;QymT4Ip+;OjHD%rMK;>Bqw;bMi+=d{P6v$}C!~8NRK0m!nc{
zDJm+XZd^7+BpTCbb<&szF0?D*Fkt79i4m`A=F}>gU<;sjIEx(_ifDS2QtHl1GZg*Q
zMUJ$m*Y@u6Y16eFmV2DTs~dQ_q4Y;BP5chQF=3A&a}6|^yhg2L`6#EfPyDFQW*Zrq
zu=oE6R<a($o%+E+lgZGdzf-^~_#}^00iPNA&d&Zp^@$SH2S+-Cxum3MWu>xmVPP=<
zy-cw3y2N#L5%Dpk+MAf1m>AJ&dwP&`O$X0!DQt38H5ff{PmfrZoG(-x;N>evjz{(c
zgZ1@Si_TL7AVt$R9OP^5D&L$XGNMvlxe^VR*P|8qt<lZMe{zuTB()N1t6uAKZyG8X
zFF^*LIg5iGw)+Aj#jKJP&T|6hHqvi;##3vI*yJujrh_^n9x9o&iaFAgw5xA?ZsV1#
zycyy=qkBSJ2Qn8=__=)XdG7p;Ajn`l+oPZyJ=@FkM#>IT|HU+gk6x@YnN;Gqe__EN
zH&z<^^QPLwv6xuwkc;t4&gQgCJCOd#>jp1(V;O70*0D*=tRP}<h0$RwbQ2R;&*X)}
zA-L-r;gN+{nn);IQlewSv$L~dR#);IPiq_dNiF_#y=9>mIawqu6@0H2!wJJ$gB%l}
z_PAjzSFSCEpSAS#EG@WU8HX7ad(pXu_&9`!R_kgr>57dqu~;1Oa$H_%eSLkEJvZ$a
zLv3>TcHSn(Tg#Bu={<+oG*sdyT@FzfzNonl(-eazyC6MzQrxXMOPU>$Ey#(G96M?&
zLxy<4u1C#nGV`$6oj(aGAzkgVsiLX;Ioo(X3<gaw4X2)>xk!+`ky`15>gkh8+ZYtr
z<kM)J|KF}WMNXU;)C>lD;wOX3<`~(Ms*1-TZ69+yJ)aR3Lg5e4r|CudVJ8Z#vn4|;
zR{m+YYw#S;CFweo%0hgG7TEIga&`f(K`gl2Y83V~_!-Yf)j++=xV&6lU73Ti&Z(@{
zdvL>}ug02*gEOO=6~mea_LeV4mcVOCeopOnyhWc%5Eb6YDN?DrRCYKq+EraNW!m-H
zdCm%7%9`K`xZrZIX7togfBMstqcy^43T-LHafcGxXr7!#Wy1SY;C7UMG~0<5UYb<A
zQj+HBT2t@c#=w_a$LOjK9jel`sq07}5RDPqHS~-)%vNh8(%jrshM2Lkrsn(@cKl-b
z%`R0BT#-@#jrw;GEkeH_r7W9QSX)~~IV@7UCbV?x9&#cQS(#p(R&Cj`MK!&c&BfZ+
zB6v2cr3kiKD8zu7hn)VP6Hr*hmKgF}`KQa>xwQ?&`3n^ZxjeDd-Ce<9s+HG(kMv+}
zDgY+j;5W-X0|GB726V{FrPBfve6}6FUT8tu+=;=JmBE~G>(ay^UY|PHCZ_ms$^s=o
z2|y9HAqCo@?W=_*Bh5AiZ5DbWZHXhAflO-~XL2>#KV(Nt7~ekKR^*3+YG5LfQDQK_
zHd|RnmJ!2ED&e^raYN!bH3}6RkSz$w^CQyJGDnIN@eo$mp*T$_s_VKspP;#nt=N3+
z(i@awsZIx@T9G&z>@0zCiiU4_SR2Ho-E7uN$?PnUE8yf7z(gZ`+w9;=hQ7fSqQzz#
zGS&_B84PNe481THdm|=9^1;RyL&nx|uoxjOp+Kclh>t;Ti!F0=7FRJtx8v%n3=AJ$
z%b2U{mY4i7hLIzrS&m(_<z>Jn)tk+BKw@J(fNB8=j3H$>88*7b1Ypf3;mUC7jeY@w
zwJz<Ua$TQ9p0}s{mDXrYSutnSPD$yN^SY<uU^(sfh7(S6B21?z!}Rre^)O!Py);_4
z8^%u+Y-c{F#0Nu~s$EMvP2+@(nB_*|?r>Sm!g$he$|30h(|@YMlG4(W95~%u0-HX)
zhqTM$0|W6L4?eh~%_L%BiIdADB90Wf>rDQkA-}1P=VO!~Z3b)>g;WN;KH(o5qp9os
zHk*I+0+Q%LcL;~Ve}&i;FnGA9ce%7saPdLYbk2apHQvRrTy7?(ayQ9O$#1!ZIt_AR
z4m$wEe)Vct&9`$G+PN1LP+C|xGqXH18$eJVzp1>rlnY>+xUf)L+Qct)BU09Zuw+;(
zCb}nrP9_p|N~JX1&meUuV7lm;B|07PCCQ;utv+yI&yLNFEj2kH0EnMOMJbX+O-)_v
z>*a-!HW67|eE4BkTLnzG7Y9S21BFa_>#ZXfVHNEdAu+Uy&&<r`oLDTXR!5VxVF1Ki
z>E0J3lEG{Rjv%*<t&FWyujGt7+3s$0-C39?!!R$0g1|%|w1uIu0b|UTNMy$jFle<J
zUKkQF>rkQkeCZ09rWi9=(8dm<c4}>FD^Y1wrUk#x&+Mr!Ga__(p!*%DyOZ^%t_4&5
zLYE0ECRDaU1qD*<IavhwTCH-Y63ZwkW@7qR=OA^i(%7}$fmuswWtr&Wk|(w*6RCBL
zR3R8+YLve2INWpM*aDPI%u%A5n{deb2f*yd2KpVEP>2M2dJqcU6QH~|iGeQy#%BQI
zcD+G5KQOWsh%0m^tB&d<8k13#@GlJa&$8shf{gOFF}|s(+4+T~6^}O%oF6vkmX+8G
z^KBNhUSDzD5TxyQ-n?&XVXoH5cor9CM=qYk!Zt37GA3jF*4+mQf|1+^M<R$vLTD39
z5R&x9C_zxt{vucYWdkne6%|%AY~HeM=boEIVlj=%pBNh%=)LU7!A=<sTjCT_?3f{*
zqmWM#vA`ClyxyqQwHQ6t<eIOA3iHGPw|jPGex?V8_EY(Krvx0OuDo3n4)0KP_AV(|
zRHxAv@k`OCdY4f%HW)5-3UZOk0lJ4{Lt@By{JM*xHc_m<|NAyP#Im7x#;dMf(`Zhx
zmCNj#3zhFgYR5q;aikr;@fwNh+7)O+r&P{$cNb6oxIZUnbab-#+K=(5x4-{+9afEM
z^;P4?4MRg_v+=6o<G2B4$=8{^KA>+V%GRhN9|(Fk>334iTXsd&ZJBfTSY>pZGOc~n
zolhE-$>kaQNaX_J3MVI_?Z4+@rl#7t>A8Ax#gao8e!Qmt5H$TvG-MjzG!A|3^E|Il
zRiZg}ZtK>y6)D_BMQ$hvsmgc`llI}0N-tf?_F`uG`yFdNnY9B0W^=YTGiI=3qet^r
z^lb<FmK%wD@WBl=V_H3Ln#<OXbFW-cDo>pn8h~YY6x%4Uk?W)@-EjRt%uNmkAx1t-
zOWr8iH(uET`1S(6!v9}n7@+W_yxgd_Al+Blg=>54*hvb9ZMF|(70DsLPEexBh*y6>
z(D2d*U&245Qn@iO(db6PyY-=of)0|A^}OG1+RKn?@>pvUDSeklF&TEXliGHv-=k5U
z#XcHdp8-=k?Fr5PaUaT6bKK5NIhgCnn;WAMN7I)+pef%qd6iI*=*A#Th0-_ap_vtA
zXV0EEH;+9=rwsdy^XE>SJ?k)BxH7yLPN$3wFAiV1&|V#jA%R9Bk$~5A43nOT``sc@
zFzD{1acP&Ah@k-+W-S#)xg53D)orS;Yb@fNGOnnxu6|Qpox`ws+tyl}Dmn@gIT}^j
zYFoB#POhf60CLKS0CawRT`BzRu=g3BgI2_UIHS80egF(ZqBQK+NkmTZ9QcM4KL2gD
z*uu!z_}Ikw%8E{_*6Cm^)S1oW<MvW0YH}4jG6FXptTc7%rcIk5=Nyb#FW{>dt=6Jd
z<BA4hQwZ6chlg@O!Sr-q-qe)KA$JdHwS7H+)*&_+2rt5n;$=Z(BQ#L5v{Y4vWMK@7
znpzm9b~B96n4%IgVm6N?CDh|+gIZFXdF@YYE6UF+v_TC(YT3}z%(PsBlu46)eSJfV
zj9AR9PT_EBm9DjAGh?$bGE3p26$>ZC$BJS>PeC;{`byP=cX28}whA`3)DI(eXWxiM
zdaQXBc}~6FFajvqC=R^H1|*Uj7Z>Bm{0h*@G}0iVf9WPH_5vC2{GwXT0eCfZFNKV(
zuKI&89VMLh#Om^UXQAD8jm$<>SRO$HFET1?6*QctZ8zySadOnC&HHxrtyERz+n5hm
zMH3$tBMOtxy8};PpGM_zK))s7sM8!p%qfe^!~^gf=Mz688gk&gs}ycj2E2U)!ydxM
zH@`V6A*tlgIehZx9GBR#JcqRC!h1ciSz$mHXe1+scUKouFLe0{SDShpf(bBUC9l9c
z=y+`qI+CVRib3i%x!YtFfq*A~H@69^d8&2D&JLY8+fn5<iC>tSnsYF)>GN}oYRJ^b
zpcvCg8esF`=2@tWFLqsm)*4^+f_YAl&0IVG!TWSh=>l^Dm#<C+MH-r3HXrGgol2}y
zU_FzwfkAjA!s)>~GjQrZ;R*8A$ZG!G_hN%BCRf8pM5(hB-~7o>A`g0-&RA-<sp7uH
zku&Jk)n#AQsZ2ye-o=GQuMz3@lcPXm5b3)I8#tqyyVSYJ<x~OjrJ97#moQYo6TqYp
zPmb8~Ey&f3h+#PEEdje>F>>I9gFZJz`*4V1jdtEeFr-lD0pwDXUg=bdqzYL=B1#~s
zmbkq^6bJ_HzN<>=J%h}r?@f5|9+`;`e)F5(bjOPJAA+SnLDPL`VRy5D^JrA4US_s7
zK+(Oq#*~<X1s;oKsc+&6w4sjSQ7@_|(bd%`6b}iTqA04-CM7&wWJ0g4;u?_2x3@}W
z9wozOGJHVx2lu~OP1fyykh$wggPSz`kRPAa-f)>rp;U60t}MxHz(S=-;_JU6XJL6h
z+j+TvJ`|%V2EuR!)*~5_cLJTCAj)EJg#w+<p+;KlfiW*w98LQiYcCUp7LgSCP@ZTM
zTk$8SiFU{SnbGocd!5Ow)0k|?31BiRQI`y^wl(OfT^_s!&y4PAuS0$OxI#(^N`!aT
zh?(SAJ&OK4hOyej8tB7jJsWh74v*wmNYFoht$%EM&g)0QCd9uc#3p#&7$W{@DCN^3
zEV@Gecs$WwDrOZ{j8Ji?r)Sbf_oSn7Mudqp71zOtRjQW;F^$?90)X7T5{gB!L81Na
zn?q6a)&qy~^Nl)-l?FZQ<ssUq5udDP-@bhf*i2z13Z+WHI?Gl)%kC?58X=^P_u3Up
z<uWljeArIL!00>X;?^C9liUrWjDK^4x~67R(<Z7SiNthy3yW#lww4x$r0J#>yR2Q^
z({t&)*Qp3Hm2JX1Y}zEz;S<PJF8Td?Lw->bH(x+qUj%L(N*Z&Gmt&amBXOwsxBJYE
zj?Q7^A`VLqhE+$FAi$;xQlvJR$sCTcqE<>IaUx}8QWjf3&N7Jtrg|A8C7>^$XEv-T
zE-qGtXU{J!B~%5#V1X*J<Z5g7%mY#0aM%m}KZB5G8w~1dsT77zlUYru<8%+Hrf=0D
zqey@-Ozgl{5n2P0AWke1Wgq~YWek4)cXw|ZB*%H43FcLqRay6aS683tZZx`a5D-a$
z00>$XWr<patnqlf8w#y<*Bdjj<Cs0d5j&&Mc2zb>d-y{WORwjjgW*3Dqw$V4wk(m7
z1%nU-LV$>i4WNO(&#JEbJ~J!#`LYf)8l>o*bvR<Sfa<QUs{F3}j`w)p=aq3Z(j9Fp
zny|E>)VC}Xua1uD^N%o^kMjD_u3j~m1MU1is!oHE$Tc(^O{7$V(KkL3345>)5ahOr
zQZl&tIi1musSp6uF!n<%iiJ_7T~Cp9tDl|@nt<N|N(0qC_gsL<BieK=-x9|_b1`cq
zx`tKHa-iEQe)%^>xb%&mytlKPEf5$&CX=u0qv+VMsr3LoyNAecom{V0>h1WLV6nN#
z(wz}t{~_$43XHT0^`jrHQxOE}ob)jJAO5H}2VTH^Bi^C;Afd_bPz;oGhRSZ6-~xd?
z0Zxc2<qW+eAq5lu+t$`{(_tX97U2T~Tl9$So%x`hP?b@{O_HNTJ0TjV+uiUli&V4l
zPK-f_M%=}KeG~I{Gf$a90XHxS<h*`ITl>VH)wOhL5|}P$FbEFUJg4e(!_k5La~Nd#
z>uJ0zS3mldcHPUk?jl+~#LDvW<Gi6GfFrV_upGO&TUAKx@Q{-QdY^qKX4u*)GB(jF
zGF%+qbCVUMP6$BjR5Bn2|Kp*mAdHVAD`NnsrM=zE=lzg#+AtbqaJ<m%Dhj}@0?fME
z1Ov8>lbghfiOerLlg%F<c6IylTWHVM(Vj_0KqOTSj8)L;i7Ppksq=*X&<1RmXh*x8
zOm1tFVGQrYSQ;Z90~4YU_XGR}FVK+BCc`5M7bB<SQA-hX^N%NGH#TRT0SqxNi&7?O
zfb41(q00p{s<Q+8d{TCgj~C0$cVc>Q>#D5=3<_}rgH&O-E!jddZh~?T7ISpm0TQr3
z)<*Eaeoc03nijJ4tX1#aa?bO*T`H;DeO^Eu@BKvDoSx_Rkw|slu%cag4t+h3zD5{u
zQMAjA{pHo&PKRf95M4nSx=d7IYgfn97&++g*pkx(8V?aR7_?D!bgL4hxId0CW>}rA
zHfJd8i$t>7uwQJaaMYA&`_L#{5STnrfa5Hy-`I!&h0?$|P3s-#gWqa0bo)T;K3_vi
zCUk^qPVUrFd%IQE=nXb&RaQ$##&L2covJ`;M+gYU+{#fEIC1xvTDTPs4$&iaP6xJu
zjg34~U0~h{o#Mtj6AYr}d_k+#>-C#-t!5=UY7!a3Ym?_3=%LrhR)9gNp*+a7c(9@j
z+gqwCx8ruv28OUm#KN@lSgdu*66r++gwa~fcjc|uTR1-jVQMPseJ3V1XscCK!{LBQ
zeaDm@9ranv=5l!}kxFBdwDuNn#kdC#)>5@zIp0P(<RqG(ZJ=sMLHG%|9#Sp9{`e_S
zgme?a8M=s^9C!^14ZJpDezZC`+Auen_^|d%XXv!3t*s0w1-xES&TN56R7VEcp~KXl
zpY>r#TskNE?4y!ok+-v0;z`Pkcg$1?@08#wB6OFqW@O5!0rap?)nFTm53?`}Lt#=`
z42RnWj9y!?xg)S<<%l~pm8;Rc9u4lJQh{PqYqtrL9mg2lfuK>T?e8MbLraU^ky*t2
zV3a^h2oW<LRwxsoXue4voy^KO`V)yJLn3@&AucA~nW(9RT*=lU;fuS);{JZJ(&qK1
zjn#?*gpOO3v*<wzYn-hWYIHoTBH9IKQH_IA;WlDscsvHGgvORSyxr4lZC}@WV;(FC
znnU%l4yZ-5JrzyNko!eQ72bH_d+kOkkch1(xo-MpYi}KR|C6-egYWg@zR2~Yu5Ov#
zy2$sm_fUDarT+%+{2S7u^F&m`@~6l_0T~4wH1?_xB!7~#W2XY}7sTv}f)pFO`!&TF
z47iad3^zxWwfoW1sTfBW1X4(X{j4xLj#^sU18S9IBnSX(ySEf$VTPA6z8yJ>Tg6ZM
zaNBT5Qi#Q3nwU{Vinm9l^Rxn?vLh=nN}*Xg9XR=clLSXU%>f<E(H$FZr&X<0RyRy~
zzFkS~?-z@^xVbr5#Qik!N|lh0WC!ih1A~k92m%-5RhfufaM5!D_FmlZcv#07-MH0U
z4Uz^rpkgVMC<DU2?0l!R)jK6GVze%j(RwB~&S5?2vs9${$Y-fXe>csje@79--IKun
zA>SdM2r{1*Fl|4*{=u65%sJGbLZ3B9O4=Nm_^dfFm;(QA?(sk5`2FYA^<UO_5|oM&
zb3};Rwn`DpMnM9~5$K3oZ9%B-i@sXY;FaF)?nXV_55-`wK?HrZg6P^${3P2l_CF!}
z9I!&zQxS#BbULi`rY4&V%ED4dS=oxUf5qSvt3YaL*W1s0LLwyIWRw*5%qP$?@CjXe
z_8J^R_@wg*pC~l>1c%-;rO9nlT1x?6K)0X&c{Aeg>#F}hu4jUKeUZ$MKv$>fK)+Go
zMF<8V5kZbCrWzi-)KhG%Yb4MF3XPG<tu<Hp5ota^MCUx!)o!|hz9K{+y;UsL5tcyI
z8W8LdwZ=r%q0Uq&L&##zLn|fL+$UNM5v*CA%K`UiP8S985X|<NyX4r_rPJ%Xnc;cv
zS07d7F1O4;s{w8Vq0Np6R06wP+1Y@9P*yONctxLk^cYhrW`f3+sdN~INcC30g5w4_
zV6CE!fqJqq1ThZy))M%mlWo{*{rP;eZHI;vfTlA(j!@!xn`=1iw?VosB_ZDwn=&Ff
zpy4#3Qv|1{7qos1v>H}q*{$t7>w+TgFd|#39hedy2_J>o3o)Wlr{p?LZYa8bDAhzm
z$}1f77-%yxvL^xW254uT0oEf1XeXG?C*@|jI6m%{lTcuGh$d5jN|ROX!^7EZSt0&6
zyFmxV$Bn)=3?h+9ZF(7s44PRWVp}d(Ko~f~(T$c0wWr(S16mCkV_2bF23xL?+ja@M
zB(<xfpw*-k_o3LB)55+;8TP4Xv>F=v&sKplLBvIncXEf}JDuIt<^4t(cc3Fdd5MVx
z*jJ~BG-8nqk;qmWY7Phf(+Hi;<whblfDcwyV7TywG8yO#p`gQRfgu~FHLJm7^%DVG
zPeY>traH!MZ0HeS2)|*s4}+avM<gwai3R<A5GqG?cP~}z$k-)mPE%)ix{^v~WU#f#
zh=PrWX@(=3Z)<5EDo%xhF?*xf5io77R4czBO)z;f^BK`J8m%;;zxusit2GEs$HCR0
z&Qzc|q0bJKr$UK|hud;B1+_*Np=5(L5z(3v3sr|wlW#GWNKZN<Ube1Q<Bd*Dk?;+<
zRj(uW3S|yPA~DWpW16&NN~cqat#TP|Yv1T7tVp%g+Jgr%_SWKFtJ~{uqnvM(6*~)O
z24@8Po8uIU8E7~S%7nhb)C~Ettm!rY4B$2B{fSniJE+z0zfP-xbtMUjGutLhJW2V`
zWv7ln;(dL6M$>Hwsbx*0@`r^DS`80X=80Cr=zfh>(;Jz=ef%#%0zy`D?Zkdtux)JE
z$WwY-*!B5#$+OoZvah+ixHK#-M#pp*l~HvYHuA3vOrx23+E|V2ygS~V9j~^F5bUlO
zcQyv%h_mO<D##~lfMdc2ESlWJ?Gq4^bLk3BA<2NuhC4Lb4Cr2sB%Xp~Y0`BsjL{aX
zx9)|c2uatyGDhFLDH*y~k~02Yt|nNgBM0k7YH}(Lu{X}V^6Ev&`lK1Xp7a~TEG*1l
zP`|^@U%7M{Nu*WMpJ#g39~JJx+4GbVr;+&AP}N36>lk<W$|Z`6(}+2HwqKKI*(6%l
zzxH>3_agNMX&UqDE3Zn{C&hGMN&Uh;{`jK$U3Fgl4s+?sCA3T%>1SHjx5tlqJms2#
zEO}r;EH@O@0>5}BktnEw2|GfwULv7M(r6G{M=H68tz|En!fV0?SSBZJ05}XpKKTNG
zjUw&_01<el>*ZpxT+HroZ9)B3@>%#IDzIDPa8qb$RE3Lh%!_1hw82Xt(LO!sK$_TF
z>!}qu4Odci#BFzFrr*UF{4U1eD9sshu-Po&{4`m}D<embkEgS69d0JG*#!BWOOKDA
zJBPUwvvw3p0DYJrn`x;|c;St3%$cc98`W@ZOkcWt=Z=O!lJrqi5q;UtE3v3TES%d#
zQ#6}(LPH)Ka|;5o@{f%>v#9CB39_+=j+%wi)^<2zZj=bR$ODYiwd?g}hl9sV|NINj
zor1Fzk6sT35-GMB$b)6d(w7GhoML31!L?;sv@Et0?S!!IS@*1(*DOL}E-}YBIEOHq
z!oNc6%0Tjfzj*)>4R4Dzv8LPfk!y4-V@;tc=nj0JV41-sKruL|CE5~LAmWll8xjZf
z%C6U)<_PONk#2}z&V_4O|8Q>a?RnU>DdhF?k*CD&WupPSXEsyoPUm_ZpwB~Vk@ZB<
z+uxhF;Hnu}p27JTGA%EgBz8L$_Tqh9xyEs8MUSV*O-^#XtDo3KU_+rT0IWYPIlqa=
zlXr+_@aCJ0dg7!0h?3Pt_7NBs-e5znos1+_fANbddBT9VfSVGdNq+K`#jzPlxYlZ2
zTeI8Ox_IW^eZm35(4G|ifTDLo^zm+Oy*owmPIw)V=SZT42wuH4B=N->iS<G_aVN$e
zKhAUx^#m3gjVN%f_kIuGhjnaPc!OH&jsIYdz*LMmlA=BR9t{vFHir+34a*N<I357{
zBu?h#bS5Tb(s%(J>4J5Abs5fS(2k6cM0a*VA&DFEfx#jMaSU#4<SgjbHil6e!zfv8
z`D_v;qFkRt14hCu*5ceQ0IA(vD@IRGOV;)1$T*5b!ON>Cb4Su)y&;wtwzOI?31;+u
zRyPt2|3#EKg3_$s2u^W}Qdrvv_^h1LE)ctEYCDnG-PIazvoh5hZM1ucXW7fDup^oo
zqsJEx!dh&zlJ1ObZ7n^%`^#(BuBDrv7taC#R%#l3Fyll<kBp-9{r%x#$?A?Aod`R4
zc>}boy9g?g%<!{diHit`a+5A=bNSU?+lE=49VK|YVJ{iW{bFhhvPFrt4M+EqMFlWP
z55hk<wp}k2Azan#dXHN~LiY@OIVlDC1jv{y3=7pH`m?qAXnkWN5}BNsdmgxGkC6Js
z)j+^&@p{+SAs`D@yWOIv>HLES%Nx77mcc!H?%cT`Vn|}FerX9146@4l^I-w$KNqO}
z2~5`BxP}|lbO>w>dNU$m&E;FS%KC9{XXnzToz6HlZz(Jj7=3}VYOz{Y$$I6=t?e?c
zkv-Gp?ORv6wH!ft<cwpgR$q+wS>b;#Bx6jnATHQ#9k;t&78~mgv0Qe$JGN=bX3Fi>
zYP&fTRkkCfC}=M)*!QYio1&qn^Xh5_adWGR1Yq5@(U&L$tKr7RnYp3>fkMZgJbCLT
z6qugw-}gdVogf>79iAhri2Rni^kWi>I7+u<Ev-kN+e$_Q>%Y<uZ|p^U`1q0E|43qY
z#>V=mJ*iJXU%Kmi9-MCr-Szy|llEwz@3=x4#A_pW06Vt0G9&dqCu<qLC;$qu(4jlf
z0$fE_=rTotude|yTt}K^f=xw0MR}!c8MEjb<_j0h4efsQcc?e$7P#o<saw5K5PGem
z6_BSmkopK4!L8nUJBiQ0rS9|gYb1^sQgi>ex8DLYJezqqDf)kV2QBKitoK{vSVs$i
zogMtNr<c;Si>~j~%~7+iqzldl?cJ6i{HgVV#B3hN7`koF?xvE%6e1cXMRYo3|E9B9
z?Fs(<dJ2PbYYoF9xgS5kLcofho}kLmd~lZGY_v%1#L!46W(|!DO*9(j(9DGk7iL1{
zMtANVAJkPqxD?rJK#xFb>DDL#icBM+8F{wbqIVRK`%$mhMr9Mzs0tN6=vLFMQsN#z
z-dx*>S$5Vo_4@M8B0S!UJ7uJM*LwC(P@5L<^%=VmjX>ieB<;d+Uy?pyH}V|Vjh-5V
z>Cf1flmfQOf?|XUZTy7o$#Y<PdUmXcw4=5D*}ZA7bNT(jpjv>mQ&25XVJy;gp#$=^
zN^XA@QSbXQ4mwCuN_juAwVTak^Mz(p?<N3>VYj|1O+UL|4R*6t?1iiyo4uW_K})Ym
z*7Vl>$J@CU7wzp_u%yI*FIE7K$)!JG^q=fz7VKtyuBL-0EAoG@T968y9`AY?4}G@Q
z{cKsgm;E*M7He5svq*2T%j4ty_>_a!0VhNqr!%g3>OJi`f)~`HAqD6WdZAe_=WJF(
zr>T}oji#WtxC_NPEd@C^8anVdcwL3$GQ>_0*8{2b^PeY+9Zm|?tJPWyY$aB|+E91{
zxQ})1dZU;CEmBhoRw^|j(E=1?v<Gk)MZ)C38y*qa76@v!R`himqZy`{aWh!E3VX}a
zJj;R2Fh;3w89%xMD8NUv!0n#`6)v!4R5L~~y<KW>b$L7pVRyWY(3}Lu6o*HHVmQfo
z>fS9-wBI`gNXc=$&&1d!MYFxS3GPedVQ>?nAxIK!xVo>9!kv(TrAy^9==aiTWc!k=
z$SH_GLkRHj`4yTBA7_pqLq1idP18IeGPT8fj5KP<0ay0`G2ZDUbb5l3ce_sjPk8=C
zklmBtC){ocE?vrG5)lCq3h67QQU~z$_uu>J^=!4pAkNW#=KQ&HJ?q(^jcJ$50S&?p
znb1Oh0~3*koPZ?&-8{2TUL_<%Al+N6f!q%C4{asJn2sHfTX=9gLCJ>>;xteS+E`Dg
zZ+(Erhj@_Rx6<jl1Cch<2uO4LM#w7%Y2&$b=g-(h8f~g(umAMD_tDBusZ`O2LR(u^
zWCEgkZS2X--Hg}l$XW?8fYT3HK#5Ps=pTGdyU*l1wrHQHYs50LMn9O2X@SBFixqi#
zp847jVDKQPeP0gO!5RYti}XjjwaS`v(kcDXq0f_WP9>B0d?dS+9WnJkC+o`?g_wg)
zU(Ch;rYV(Z<m;0Db@%!wpL4Vmab&#OC^u9nM7_`TxL%K=lN>*cSa~#0AAfP47Q*xN
zmf9`hsc+OwM;P_?FXrjy_B<V-yWb$OqgI?9$e=^|(Cf+fjDLIoZ!3mM+ulC@h2wpO
zHDbH&=@moU2lNU%t`|(h!<Jm3n3ZU`8DocCdn=NFfbFWm;egGSO;=3r?g>JqA?=Ea
z(`s{+AYF0t%ARXDhWtx{v60KwjU=G}>o!%=UH<^-g&0LYDLu=Gc4i(s4nyl%x*^a)
z^H5L8cWU_#cuQ;Zw7$uRtiAgU5vBOaou%}Eeu_>fGtWTHqD)5-s(A8qCpn*w!`Qy5
za~ok;bNANXldB9kook(J76Ibqs{6N)5X)kbkunvx7FW4}Eim@3de+L{mo#Ws2D(sY
zkjtkpOR<kOmX=}+?thGd0~W@%p`kB*X*|~bwO}5NoIF{pf$>Ka!L*N$JDpp%<XHDt
zPcrG<ZHm-Eq<vD&6N!GH^<*oA$(EORIto0}1T7&c53HeE`*=rHZ{LPa-yN|h`~Nid
zq`qb_=t&2FX}UDXbmk}Hi<w~dd3}#EnMW?C>wYqMUy=|hut1(>*tLg1hX@$}G^8v(
zNctAYvs)XnQ)#H{)Rf0Fl}bZw@uc45C-RRU=O-rcmoM4V76;$-xIGV3sfXPvc+hIv
zCnoIOa=T>`j~3A&4b}R!Yl|~4zGyHa5CM_J#y1U$0#7$60a$FaRX{eX)m99NVYQV_
zR)r1M>1;$p2ELBsvHTWvJ9~S9KuDsir5Ii6eYek+7!wM0cno0fju{GjB+>`~gw7lD
zAWK=yBUhtJ(J+p<DHc{w4cqM9+S=V%UH$mu#C{|KN5;s^Ou+l&9|LwX&wur+U;Wxw
zONBW97k}{=|LHF+mKgi)($c%V`|>(k_c~g4gk_hPMX^a>rey$!@@1HrS=}N-;_~cZ
z0^luxqgtwq(pyFzzI=G)@u)XqcAPcqbr!ob!S3*399q&5iv_$(`(_)Ykdd(291H_o
z;$U8K=U@;ix?g(9U%~-b^1p<_OuQfp6v>FwD#z@ve(|+qE|9vcLFCls?gM<+Yi9`U
zBys6|JD`qKfyHvb7Wh`*{HD8kb7={DEeGsoy|Z&*Gg6nA-6RTs$nSI#@5GSPy}S%6
zP8`LBQU&P?OXO8mxl$@!fjRunox7!&kp-3sv`my41|xvl7z#;t_jdh0mq`GszH8YD
zZ#bP<2*4m#Yc|v5_iEPZ+^AYH6k$6PGcv@b6t-4}Zr=tJ(SGXGb1ys()K-hb2wcC0
z@rk?YJNHWsb0oaIRT9icLpU1n=#4`Z;}FF-02)3tl*=KmC6vo*rWZ0A^ZYH9K1r>O
ze9!s(^G-Znu2$>$&yms4Mr5A<oFn&3YHX#)bJ^cp01WBbQ~Kj<JzV~ivfs8IE*qcq
z%I#@&B<cbDh65{9eXYJWQDcb>DyFjzTZeB1SYop3vJDO-nuB#dsqZc0!TO%m)w`#I
zJ)~y99>NbSL;cg}dq!ej>YJKCWgrg^%MWGwVajSv9U9gC?4n0UV|YsDu3^_sf)Mb0
zVr@oT0qDLYGqLTeH17GvemLBZ`|RJNzn{{GMt0)B%%{Kgtr+vIZ+-Uy6=T19{^B{w
zSpgw(y=+}yw~}Y0-RZR9f9V^>|MX8|^q>AIvHSi@^}EdFzqusMBL=pqsA~?#S~3_+
zvd{})T<Y#}#BcgJ)Yi8wqcT+ZGHlC#LjU87FH?U)#psLwSaMg}vfQrr>#VM?SFN&a
z9T=Mb?9XEKpZ(d(>UY$CN`L>SFRTAl{g?Dl{{u8SV1y{TUo-7+(8+eY&uiDWE54<f
z2qlpi6v-1t+J(0?^PnX5jf#}n+}rE>c69w^1bu#Rm00r(Rn6{Aq8}vv1y~a<o}<Fy
z1(=mJ#3T&fz21(Yx0=1H>s@Hd&7b`2{bCU?=bmx@iHRQu6wODWw3PFoe`##&!2?Lg
zh}Pg3h9f^ykw||w5!Nfh7#yRI9*tq?lBZ-G%64SS^72q9l@8$q>U7>V2EKHrlL^e}
zDx=o*UW*1gakoWO`p++?sSo~qV`FrbJSBIxMM(Elwac<LE47*F?zWDy|JDT?b@A(V
z``x?bDY;1-;h*(-nW9ct-0^yM;B_tbYCD3KYSy2h{Ol(eakIXw{;PS!Fn@6M@_X;S
z@$3*V7tdY1NMYQm_&h9&7tdXI{q;9KZ4_QW*(AEHe_!5xH^#jCE_FfuE`90WzpVZ<
z^`FuI{?Y~Y|G-?*CX+UKF`=rMOjb;$!JYf&H)G5<zeyqHnEt|VzfApG>fh4;=nEI9
zH_<l+HXM2#b7Fr#6hizte&fRKOdiaOs~p8%{eUW!77Vom^WvOJ$>%Oor%!*vy!iie
z?V&lPRetrsgLCKlewioUnf{#8T5@h^2-DTtolVcosX?jT-UwfO<yC>R-naq7Ubj;R
zx@PTmjs5vAK4AHk>FE`s$6=CU8jz`)!c^^z(Rth>g5)LkOMh>iibW*zA~FP2tb7HT
zsEb9(p}Fe@gLl}z44on7Ki47SDLnU_u(`ehofL$wN5)3>_E4FFERH9O?~`rM<P;z$
zyb)P|9FEOR$F9?X^hf;28g-IZZ@p!_o<Zv2Z1y_;%j>*kRF_B9>sk95STy<`p~2a8
zumrM&JSpXE>%mgUp@`2`#;9NB9G~l*UH#qLdAO9POZuMka7j;>);nP*(W|5A)!@AD
zm+JHGr=)pH@4Tk^y@Yd#=f}nbVWrtzS!uOawl;?l0&IWYUwvRcx<zdrH9x5OpC{X&
zCSCUTnt2jYMc=<q@PiA+p&<nO%AIT|lujYrI>Y>-F`%0ZWIAWQR9Ux<_U?XPU(omN
z{3@8MR#z9y-Ko^yTO@sNrOeI6=(#zN-)o271`fS_9D2R7X3)<rKNDGOS65a>kqB>e
zwCC=1cISNm9PR!kIlJ>d5V(7nJi9xX<m~QP{hg}&*Wp^a<#yNB%F5Ifc}mXi-l&yc
z>(?bYyXE%lN+tsVNJ_n0p02A`%U}=gjmw2^xZU44PeoT(qvVM_xLZY)hy_nJVaeSa
zsLTI%zVII}QTe&KJb99Rs=o;ru?fR14mOnW@m_6YWshKnfB`82Y;?7%8WEtfwWUf{
z&lbat6*k8`<C}#sj@iPoAqa>h(Nm2^jBYj;tozf^{q>=#_5Jm!q4oXfbg#^5lsSzu
z4ZR-x`Ja=0m$~$lpS_Gd{yY6WgB+0EzDR~%+rRT2Y_#*tg^TB2#x}nIA2B&I)g7Ff
z-38pMVHPzIsiZ%5u)7P`-Q!m-eGn&`y0cOyQb~VPZ`6rYGMGx={&tM{_P0?}oVoZL
z7l?H6Cg!+G#F8}#2T6z}(9m&`YjZq~y5gwoT<+NPOfG$UadkVfz4qYl$B#F6_R@t?
zKDGIHWiydN(9?ql_wFvI3e`#>lS*tndbqN)pGoa*tUbPa<N8hMT(`4NyQ@FTb=`Ag
zyWL*Dbk6^1`Jw+ePaK<>nLT=BI2?{5MIBNfA_brh#sCG0*vH1e7Ebdp6<M7gkJIT5
z508!xj~<zt1UZFtP8-CdPdm9k%i-N~ey^q){j==`M&t%Y<ot<a$BX&a+GZk?ORPP5
zu(Z0hlgL$}m+WlrBy)u__|>4)Wb+m1EqaU9XuG#~*XDezDgbr2Sv^0jBJMPoN~8)1
zud8HJ$?dh3^_@&HpWIwqd3f)mUwu@R&TF$B7Qurf^=Yq*O&X9LP^>gho;)!%3=?C(
zH#~p=9E1e)$CWUnR;BYRYmY;(f91&7C^)Nq;GS|hEJh>pjBu*bQ9D2sA^fI*q#)_k
z-p2ac!&^H?M#gsTEv{^AtZ(dP3i;towopM{!D@>b+yECB^?DJ3e#E>N3Wq_y8j{YF
z^Y1te-cw;a+}!r?)USIz<n?Oe9m&s71yL5;&JS<nVB5~OwLcEO-paKA)9bB|U*Qh@
zirk@lc8l%a(#H>0cK6eTYQ2(AZ0)3qm6}YkYO9pZgItvnOco=rfP|Ul-4hcfFjLfd
zlidb{J1dV=%MD7W=V_p-3aLb<(nK62@)+-~t!(Zir|aIf{<d^po7fE9B9_}vyEO;j
zKa9~BAs~%UxH}qnBRFyt(ZfyY{P=ESd;G%ZUp#yEh0~`_pFTA=H4YE(Sac{l90|B=
zc9+v;GMda_Tx`~B6|`*+xu=+VwbcP$5^?h*0xyE&1E!WhI1&m(#wL$WPaT~@vZJ|E
zFPyt@?))ofo<|G-*>T+7$iyKm$iZcD@bzJg$Or+690ZI!^}3k{S6RMym!@!+v{TEE
z5OO2vT8;br##+titJU`QBy7OFjkmuMOU^ymlo5&4AWzI7Oe4Epaw;Hy>2JaPExBv`
z8DMEr@H#s!27yy*l_rfyBbRG)vrMykv(+T1EkqERQ^3+ZeG|koyikcl_f#5ns)!Ru
zFe$i;3}&Z|g^dwF1E&=^G|UDBHZqLr1eWIML1<RmdOhJ!IyiQ{arkSD!;i^qg%{oD
z^Ljnb(9G-{X1^m0dbQc9s1LZmdR;aez3^BJhkQ=3ljyABX>bEXQJ=wvRHUk`vVKJH
zI(=@dUIzy2ddm`;IW{|F=^z9PkW~)+p$d>rx$U^83TqKk_Kbq}$KTlIf&dX^w$qLH
zaYSJ-G{SJqJcaiT%-Mq@v$~oC;Z-1DrE{y&d0t1T4e)4H$|ar`@B)-^4T@HIQKuv~
zclWlo6PX&!;U?_LR<lm&=&DUnp*5@dRB}J%-`~Xsnn`E!<w~(oqzT*?xxPt26i!^o
zwkDQDtJnmAvH*}8v#|}pP)m(gv(bQ)vqiJ<<GcW~wV-6S@)X_+SxK^1#)@DX%#^MB
zFzejkE;QV3fokDywkV-*6MhvV{~AUf{5cE-m>A2O905f9BlcKySWMu<Z{=5R-Fn;3
zBCuIiYf0jXS}nqphq!cum&AyVSXk=L9fG%52rCL__nYCqswCF${_>ZyT+b#-h%z?$
zqeoAicze7H**Jdg%is9MH-7Vl+1Z&XIQ1fS4!~BOI||BGs(s{0yEiKa=dR=Q^JnHJ
zMxsHF%NrV-IuZpB6jr*;Gd4GiB*Znn$3HYSG33Ek=MIF1CXUTbkA(f<(U}u&$Kr#J
zaqjxP#DCMpf<3j(eBum0aM!yK!E=eNt<|N6k5<8By}rGl&8AY>B0Oy^RW9wWtRP!2
zW|rKpWcL$^{lxah#`gC5qx<(37eBuJqr}ws5uCenBee?asfHkXdPDf6b#Y*g96f+W
z{1>=e{{naGw8i3Z>RT0LoJDLcXEf_!5pAj5lkFP>i6RWO%}S}-VnODiv@(w$OQ#Vu
zSA*B83zR$1%})f)^#;lxmQH80HO^wkfxxpW@#40tMZ^W?(+MJm8(P_Pv05#as?Bz@
z*;aY8#p-bTqfzN}LuV3TedvPe4s_}hfpxuM*>4;^!)8x3!U3n%?j0H%3A*f75zH1Q
zm)~PE@EoE|+Z5;zIHlF76p+72?{ru!j~{1{p-2y>XSGymj&vwi1YIPLfG;HXwt7Ml
zzujao+T7m2*!0ZgEMz#GVGtQk9tB9~sR?obMEKPE&rY0?L;K{x;VregVu^Hq`TC8Y
zeQ@RSl@C9<dl$6$_a8pE|8Qk%Z)a<J53<F6rci4&YxNe)xybvW?-Yr?;Ix{+>P3Tf
zpi&*F6tbCoA+v|r|ILjRfS;Bh-u>w2&5v$=`17mRu3laa`-3>cv{U8~aPg^WcL30c
zOw)(AX4vna+NTfRx`~L_ePB)!8*a~&W-0YNX@7zDzEAdZ)&QP<7ASJP!1Dw-UQ<B^
z9Uh5915UdI(dU$^vjj$lhr_^_lP$|+CqeW!Uayw+5!T>J)hL7ADqAA>&ak<aT85V+
zAt7%$c0@-wqHi|i=iBLJg9qn<9^t%Xwy8!PNiAPoU)lz7qRjFYU<NX|)rtpRlAzTV
zu~u-b?d%|enGqSwI6pofv=|!e(ka006_tb>HdTl`K&OdrCt_<_Jmwcipy1U~t&J$Y
zO2K3W9L!<RGiqFibaett$6Y#3*6EBUK}IU*e48`*;CS~)VvdBAR%>us$Z->+w#P<*
zELT~xQ5Qc`Rd~{3@@O_gV}^zR_o~a-Y1H7|fC|&8H1Oq46O6Qa(TV7#n$iK~Z})8f
z1B~(?V3c2Q1TkilCyqwFxLV&J!qwKg4I`P_P3Crnt>ExAA30^LVL*A=;K2;nH*#=t
z?11_}RAd?~aCX1fBgRd7FftqOef;5je{-kMhz0yM?Cd+W=^<X;y0cekbCw8zFQXp2
zz9zkp+=PXuR7E;GwAD2F%ImMc{_<}oH@0>rhOL75w>NHYRv!M<f3zG27r^Lj2+6fr
z=kUodeBlc(pFyo11XXrwS>zbV#!ZFH)=J`=Uz>CAMvpxfsCKB=U%&ADjV(HG>UEFU
z+Fv8C^LsmpvFz;(1oIz7&#kkwLj*zK3?Bz>O%DdRI0t+!%Pi2dvkTTA{NVj7SFc{Z
z{KNln@+83YU{?Wo3v8uGp+{f7ywJ7N{a+~SPsm(F_9V0E;lmWuu;Ww<vmP&w>!BBr
zaodb+8MVyrj?ZIPN^78u$Tpe;V{zy5GVVyJ+7=;|9MSvK$~GK#JIL|kr)jE_#!>lT
zuddi^1_g?cNVRE`z{IE8EsAx*hcoUnDEs+3wy!2)$7Q)(qcRzV=ZuJ3F*B_~IwPIe
zHMW<Qo<9@nY~MsrKDvX-??1fpx4!_h(BnL92ppNZfjkM0N%;LIxwd(1Y;5}2F_^wa
z9UF_tOR%BmJi#NVYXZO#MQO>5&JB@g%wuATg<M(H%SG&cxq2r)C0BB}O;B|%@1{z!
z=<=F5&|z?To35h-0%o?h2MkWK+*EC$?(F+LjN8A$xXpha>FdEdhbZ<sMx%~U5C=pf
zkhr(=z#`_`I+%p;puuILsuQD5T^Vb*taFV`sK{pjJ?q9sstJJviv{9IGqv%iUHiVO
z!UH-1l6Rn%@^8%#_cQBYSJ&97+BFDSHH5#3z(^oin`7f1Kv;CVPIvvIylD#A&ZbO-
zkFJBp4x*m|eTR*ogainVR*%Pwc=a+c0%d4FW{{eg5EDdFI~L(~+`=G$krH!Y6vr${
z5&(Pz@l*aml$scaoCLEkFfjl+0OY12<+PvpQ+q@Ep?wXC1Rkst-aS^y0R)c4j(bpb
zd-wMRh>uo*)gyK(9s$ius;G#bNW{Y`#S{k9XjBxVf^|iMTxVh&^+2iQNPVaoKYBHh
zDi2gzE9Pp9!C^&s7>C%fj@+S&NW~Ehj!Zaqsc^7eOr?tL@$E!Tp_E)=6O4<P#c;P~
z5qX%)7P2Ws{e#b>mDxtd9IfB~Gy46{vDD^4QiYBaY+x@|n?!4qzM*p{j9}aqgjf-}
z1<rtz&|oL*;)b*&=&|>Ml!{)M#+d1NL61f#Ea`2;Ba;3qWcq+Q0G&pURgv%sNuwjb
zrqlRH>-NYe^my0gfROAk+3jUWCyDaNr*?PiP+!N<*I~?PudcpUWL)i>-42p|y^IZi
zb=B=|G?1?|pMR4I#;D-i-X`r93)^*SW5Zy;CQ!=fEtYf|<V$Z;;NyGTv*vytWqyu~
zUqEnTRX8Dl=ddcW0OaHRAb;g@Er~yKW_Bdt65@8j6&RU4BZ|&I6p$dClA>g{X`Lk;
zanSFz*S5y~#>T$E8}(A)TEn@gw_U!zl&n#;hu2FR1emyA>fS#S>NlZJY{<8rkqEvE
z83LDYk4;G+8KwG&uz?TLnS~GY_K7~ay^nJP#sN0Vw^+@I+w*%4(6wGnXYvHP_Tj^+
zDe~;2YYB=2=>8r`$(M9x;?yjA>*Pi>MvFJPEj;Y2^(EaYcPhp{)KRlK@>P79Ju8bh
zwE6f2l=v0&CuaTe*|VbfTS!7e4gi-($1Swz$LZu3W$aY4%k@T_0?Oc961JZ>go2p$
zV2)MS-kwVuuhlXncN_317TEk9u-9NJIxR47HYiINn`zkNK?<Mv1$sof&{-pyp!m2E
zyA<-T;uL|N7SqxG+SnM5mOhF~9Q0Rwbfh*<-2wj1S`_9P8!pqnbqsx&A$>4mza-}p
z`6-HV*j@q0sA85moiVoEwpbPhuih|eo1y^aQdI?E0ftzKJmWM>u`F0d5JS*^)s2!M
zXJiDmNJaqfAMF_e^?<lnlkg}0788x2F<4LFPXe#!k*Nq8n2!93zh!~2*`VXy_V#^0
z%n*VLOw5rZ%!5X7Mw|&X4AO#$6h{rp!`7q5OvY5o<T0x0dWJUE@f}hqg6EZzP?GJ3
zN~JbqmQ4z21Rp)p*A{md>-rs1DspH%5`&F|F;Nc^aHoZ)s;P>{Q#H70m!XQtf0KtI
zO)n{S!7i72r5;7EFGMLfe7V|#Y*|kpu96MNzfQ?svZw8v_L6lonC)y@hNz9ekw?4E
z+O|C(7PE22PR)XrQCn(HF2>%+IE$TPF<eX+(_C6f7x$Db#53ngx^*k9Pc=&`t?iXG
zm8Mp<x+B*|7R1<W&Vf|c*c}M@?;n!eisu6G_IhGUhtrV6U;QDug?RQPlh@D}qMHv#
zA_%$ELIDBcQp%a!L=*sFU^_~*ZFnq`E+N;29E;$dv0(43;CG|N3WV*-A@AKl5-%u$
ziYyJAa3ho^!8+%f3g;aiy1STDLodDbQb^6;{U|u((Mj_#r-056#7zo9AK3cd`sy7B
zUz?ra=Rg1Xqh7a#ZuUm{99s9yC>05#<p8W|XH)Mq><)eRXP7lARlPeLcIz|S+nIKx
zv&@fD+w6p}ql8<J!}yfl&NKyA*d;VG;r5CeqE=gD^bS9++h$1VIPA3Z4kif}^*r?m
zw{sM4c9{9v&f^{9M7>h3AqdNiSS)k7Qm=)x9AaK!<{S^I+mF-|a5Vr^;wunz^(K?H
z8vi-^@%tF%=iEr|)Zuu&<^HXuVu$fz{~hx?-3~~BdRkWGN@i?&*eH`!C6BifV3sSD
z3fMqZKxSjdXky4-$IiQym063&=QZ)5@5SV4H95gLj-*w7eFr??nQTRFcNU&g6oa9j
zgB|57Up{4(Q@6mPb#=83N|AQErRYSP&Ga{yJ}#&p+?>;6UMC4g<!R|T&{Bb#MrZK&
z#$JG2{o<(0sFstPtBG0*fLPwZ)~e};<c_yEM`&as8jL!PpaUd(6S4Gs75y9&MLTj{
z+Pu8Y3y7r8#)GKq_*{rrbJ#a?D({(@t5p_+NU0Pd&p&cNJPBZ9?Wa53t~WXh*g7G7
z;mJUItRO^=ad>P${vgGKE`0s#U%wDyHsAY!Xf{ehOQ&n0$#4#KDHk34w?6s+xT+iA
zKR->nFm=S<oA3QQaT?q^$kj1oYga4Fi%yr5uN9DRvatT3R>R!}=-3}2d~y4lv|Xh}
z=4P_#a!0Z{6Nwxxx+l@tAsSkM1U|P;Dv@x;ya;<RxP!rbJ{a`q8kr^BsV$jAXq>Lq
zF8%a}Km6g}+|L=NPZm;eWMrGTZ$$ZPfFU2M8)QPTqP_$m@tmz)x_6zoI(RtKA>JXa
z3Q`&Ye^#rs;sT8z{|-E8F>eQ^7}x}fBaJng+*1IhO$~+p#;!k!?97k}2q8X_mTE^j
zSv_Wx#UWSZl@-P|Gh<^2DY3y82BT1-K8(zq$jcpxWHN&^r=VZ!r8)ggiG7?(J(leC
zTsA{^b0`STLiS_u&-K>oE2!}T?)}iHDArksR}Qs~S2+S^-pkhh(*rV`<SEUIh$qal
zym<^$Hg1*`-UH(GQEIqS8P<?~LtubxZV-TXl9(`CG;r!Vz4g_Xx&;vONwJ6;O!fUo
zP*UCy<r;|gsdA@N)&vf1E)tyKktnhPMWevTvN*pHc9D}Kkrs)Xg!;qaL<C1V?h-&P
z;Kx_M+ljlnfGpfZ_$Ffp;0t4FS@Jo={_{e)Tye}ZFaW#(+A)Y*WX693wR{7;o&+%!
zFmEB?>L(^(M(`Q=W^O+*JvYI$3$Vtg3Ot{x?mi~uvzD8S={jp82Nqfl$-xDCE<@^`
z^q9B`iNi9je)!?SWFmoyg$IPW9W;Ko*int%z)yajY+0rOJAdufaQNc6vtJJY{%Scn
zX>GR}Rm>O)v>&SEDy^<w|M8E1{NYZ$h&QX%p|fB565G31#Q#5zR@->K(IC%2K)gkr
zgz_#41dUX=dKJ6Qjkk~vg%HmM0#CBJ88!-q4aDB>Kb_HyV7qNmNMRJ@M<kX^u-4UD
zttXV##Fa7Db4yNk$BamPz$a60vE1S!Ct;i!KyPW!Ep0^m2r0oYCTjj#LX?EeDlpfp
z8LK30WTVavXEZAbI>-9Gb%*X=uSXLo6FDPDWDtROYd^cc8GApTsQ+86LEKF)Emdfn
zoL#(n6|7o|99GJ~fFj0R+pZZS#_rFI%ltuFmeU_3>?0%ggl$o4DZx4)ki-Cv*3f?}
zi9gk#f7-WtIAT3|jaHFWPYCHr#Hx_r+{|lnu0-Y~R|yH8PYmK*2P47rqoX|JC*-2)
zdCMgTPb?S<aG(nVXH0i=2Uj66BvC5JRej&O02vO90}8q7X>WQTR|2005z?ln$ZssO
z#YHOrejzuWzv+~W)v6KCI)X!hN0}F~VT}FW#ZcqL-|0(n1gR0kyh0Wi$RIJUR=al(
z8Pp9x^g3_m$8&}ECCU@iV}3(QK$-=7bmq($|2r=>LKlCpcPEK9fe1A)h!9Ogn@h2I
zZZVV5eLTQgk_lB4b!VvAi@)R3Mww^<3@Sz-l>{g|ILNxA@gm;WI8yxZ%Yja~T}$k`
ze1=Y~UaqN>-WNzGY7+4aI$_sGj(Cqpht;;1%fs#j9!fbViKS+P(OcdAQGi249gZ@@
zT_j+kiBW9{*@>0R=0j-nDOew%)p8Ev?m<9Tr#~h{hcRQe!&>y#JbUaIuq&ir46_1M
zehO%7t^Iu@rw|TrZ#y|T3rGvhOTzXxIUubz{D}*@-~I1U;<wOOrXj0w29&#Tjwz9S
zWEgUl3<?LT;c)w$jz)eJrku1wXh?@eC9$7Oksumc0&i@U@Vn4&gv|~Ub?+Wb5wo*%
z!zL<s@7~=kWga~~cg#WMKbHOoQc*|w!w9hzQ#J#3S%b|th8~8pTaZzf_p(*9)l!vC
z@9w7Sl!((05*`^&w@B5~*!dHwjop!9MAogZt?kt)k}k$V)kyl?B4r!tN)5zAIgS1}
z5wJvV2@E?xvQaHKIueM+V^L8Wu|aVpYMAlFsLp~jvb4Foy|xBg>W#@E937)mQ$Z<a
z0}A}Vdc9PD^#HuTfB9DyTlXv^E5eQPV{~LIMz4%5AaF6p-GbSXz~mFb7<29lA-Q`s
z#=T0t_S#=|Th&9&_vaima%R_=)g4FZ;BiW~UK7K2kLuo|$Up54+E5FaoCUtS&fz^U
zMNO4oR_1kJL8s2#pp2Eu-Act|x;S!?1Z*(ps4Fq<+BNFM7kl^BjS>j@-pH69-(kh2
zyCx`a(pz0-Z==|J`L%rQxnm<EIR6%Ko>4!FQ9tUom0)3Jaitr%x0jZZEHOftN)uy~
z=5~G^S^VO>TE!?9REZ7<aoRq%;C}Q7#;1s}i1YKv5m@9JM(@nr99Fd`PQLisYp<Q2
zBzXpQ^CW#puYLbDYWZ(a%hA!%A&-$ImN=MFkk3%Bhe1q$`<|FqSk;ExF%{ISBxI^8
z83oo9J~|7g_e!-DH_<Fd7-5m?jcX|}Fz;q?at^_I=wb5@q@!RfNo{_-TC~DDV34=F
za&W3?CaGv9yoLse#(b1l{cxj<O2$fK|L#wJBC|$)eJ>V9(Hu#^BGAn&Y=YF;v(LE;
z8+YNDOmIVIyCX#`ivI)paI)4$PhsD~xmv2xkiY3#2C`{J9ILH}S~RH0ql3Jt84X3`
zn5`^u(P+S?i(7TJKoq>twh(4>$i{WvaJLG(xOlhFqKL&?#_E;}J8RM@xk`jPnaB}X
z)3`TTnJ`uwnY~VcQ((DMI8Zu>Ca#LhtDF<}%?auyVgj)8(B*wT7y=Ln0^_CcjZc2N
z+b?2a{y)(#(09eppj*UjUZY{EN4IbrGSuFsrNz6D+V3tt#GpRBv4Re*+<5QZci(-l
zM&cmA#vV5{DH1Q{pvaxeNq@KQmJ1d14jIkYVowdjllKwgB*)JXjS=n%c@Nd^$%J46
zz6MIPX@*_f5KJROJYp0}Do@z%Ev+=Zoo+F3XK)Gxa|{#|2~%%y;M5_5qaunsi7<Ti
z>A`_<1#iQ=;(KZ+pS;~2vpxdWKwS0|tJ#<I8tP7=U>7kULYt$&c?$VTuL0~h>gLVf
zTIg%thEUj_0coq4+K`y3W5;5gTxbStl3_2A3A)|vDl;iD4{=y<yfb?}*E{0|SHE!f
zg_hD(6l@3wqC6zS)yr3T1|I8Mw+=>l9KJd@Gz1{cR@%f!?Bd4{xfq+@<5Bm<^0L8T
z4b|=<XZ76dR15h5o`=<~yH5@3){qJmF|0|tt1N*uB1oqs8Gw{WztQVGNp}tbwdXFz
z=+mbUU%d+t=;mgmQ-PNs3EQ}bALniSo@9s?>-F*R9m5>_D04BsH8tzVI-fs$^@jq>
ze|VLxR9N&|!(M4XcEee@(>i-Wck-kT{XUFjAGCbOW^*OB)u^W?(Nl6vckEcf7HCR_
zKsvqa@+(W7QHg%Y$8`7ZIdj+h{U$PR6f49$N6i+#|J$~^)LrXuf4?Z1@8O_LrRL`7
zd-r_4dy+Y$=8PxqRGpNwdi#V?0!X9X_WQxt%JX}B{ZoBV8oj*i^DQrfjU|;r*p*os
z-T8N4ci)#EdcOYewh>*SBCQwlL?G7+Y=5F;?ieQKK6+SHs}FC_PW0ope*<m%4YX~@
z2;z1VCD7I4&_vYIDuN$3UoE!`hK-#v_sFs(4ILdjauk@Psk!H#JLY8(oNG5REJroV
zM)$;=wXiA;wRN3VqsCdI6CHr6L_Kgx;B+V@lL!N*=p-!-@l?5*xqbc0$D5n!GI9e{
zMQ3F8#F?X04x7MQ!$%L?EkA}#yq3M@a_#Kgya|PgnPgTZ7O{^$NjvJW_8I=T@wjUJ
zBF(SL0a<o$Y3CuiTiVqxzUa(^LYdPp*J)h6g1JgUC%ab@YcrC~ROzDnKEH~K<t?{%
zHDL`vPCQED#Sk1{AyG2*oHOZZ<I(i5BokS#`}rni9)WoC20XRi%}pvAT>yUu(Revx
z(CI#`rEqDn)L`{&W42Xq&mOg6ayNH<j%IET3m=ocyD~<)bt3N^nuRT!{L)IWLQ`j`
zo#o{n%Ke=Ce)R$Eb;OLbBNTvEq)uuRm1-6wB&)(@<YBc4N<$GWGnVap_wVTpycJTV
z;PCA>1AAJXiq_AAQU<Ql!8EvI+|l`x)CBcdw|GJSBK4wfFF@U<PH5jJvJ8p4&~H1P
zwc2(l1a2uEi6NPIydcap8kaB6T)Vaq(_!`Q-9FKke-78NU2}%2AsvEF9)neS=5pg2
zbxjx81J?ESC$?$AQnj2)(qWJyEIrnJsJ1pgP<0<625W5m={AL-*N9=D%+Mxc&3`<x
zAS~+j7cMM9#)(0&4g^lz?zV~GvM10F5YohrySwPk*)KS9KmGZ(^rqq7z1`i$++1UK
zS3>qB$kj75uwZiaqSerb`V63d6oF}{PHk`BtkrIAZ+CZdk`t4}$@0q+v^K%$BS&KN
z$jAbJ;x?si;`Fs^G5Tje>+Rr!_|E!FT^Q;l;2>eBf_~C2@#;_b%GG_p#Q(5GIkzwM
zckRIyqocB-0O`t4t+9bjCLr-QZeX+i-~)-jIfEJO?z8F+t{5xi)@mLVMc+{K4;xmA
zzXW?h_Ig9&g|ASKi{bt*HMnA#p3oK<^N4yBqu16X9=Au^lo?Ek82!pCy;VB6V#Q$_
zp;IF2P;ca|jfWC{u_kZppLe1T>MM?H_~PL!R=HJnYl}rc*tGyUf+3L4=+2+lp&#-L
zVXr!Tg~71c^fR0IBE=N!lX`@}wq7+Qyk{|1RLhyWw0&UjAhN6h%_qitSlT7S5oRTw
zUSW>-{gS~UJCI9-Lpl}7z_^k4=ZG6TqKB@Y*H3u86V&ql{<36HmzIWx8bd>nXXo|6
zU1lkGyPSC6?M@~;$>gB5L=uNBLf{=;e-=M>e5|y3r^K(CN9RV>yBuo+vTz=GQjz$r
zylB=|Kh2UAj26$Iw}?6xe9#JQv;aR)0!GH%2F9n+(VKa;S=Eb15xGVxu#w7*N|S4t
zjC#IYZSX)yDG<7pmn?b;USrl`pjrU7w#=eIU#T|qKy8r3Ch)wP8USmwI)YKpG|D>O
zXo1JJ4DY>#MSaqF3#C*`q<Rxa!SgR$3^XX{RU{$R^C+m%D@YGxT8%UZ#nj8K4sUKZ
zt0h)2y<}mVCBTs^$OBpC(R|YEhN3q%>a{AW2V$^MX>rhp4f<-e(J~{76o~+I7J!~g
z6?tJ8Vr#3#(y9(fEDkVZlD`3xwGp{~+Qi9@c(3ztry5%=q+Zc+iUIgY7Wko7y``ue
zt?){RGm20MIxKRua7qP61GvYOHqgI3`iN$z0o*0ns+uT52d<$C(0;VsZX&G!2p-PM
zFp`VFJSr-~84bYoD8PaWEZRXcMx()?m4uIRu8Kw|d?<$1p*Ye^6PoL*wN*}T*Q)>q
zBCiboLbFkIRgI6Jdad06to0jKhc^Nkn06I_e)PMKLGNqjMpzFaphMh;D;43DFkeE&
zfjAE{Vn5oS==sD88mE8w<%Kx2xcJ-1dH34;G=5G_{#AF68hoewG5wXl#y82Qapt`*
z!lXhhihXZtocSU3WqdI6{TWga{XTv!z248r{^VQT&%Z+bb?<W&rGBxuj-Iwq1$ToK
zyG!i`*?sRm<Xy;qT8(`V>{~2Yp@MM15?AY|mq4SOZV5EXd8!0fOI?QoP=eI+;S$T>
z6aOq}1JufH0WrFFJ;8So>&*fl-Lsf@i^0`E(dII|#Z@EGA-dxO{h9*znP%b(?$Tu|
z{cwu5f@a{r*s;Emy^O?)osKBMp*%Y&u{95*#ctXCv15b7yZOPl?jf4`;J1iHNoxVC
zNHEt(^j3tpc@LN2@}=MxoQ+Yl;Dt+0k4V(b7<IGvt${6Wa%^RZVU>;~m{?fr9S)Nu
zZ0&m^xfbsL?*m+pRRF)9xeCcXn5C65Ng(N~$%VMe!MAb|+#jI0tX6Vi@2b8;I&U(#
zZG|F0D;8TJQ<ngk1}>_FDcfRMgB7V38{ji=AQ@E_v<8A?&SpDivj{u`2<<xkbBL67
zO3O*C*(`}sRr_br!|;&FG@)v<ii}L|HnzN1W^M4-;L)g4^I{#kCz51f$rxe;&lYFk
zSX%IQI)X*RV_1X^m<%lz=-l{e>)zGpQQz~p-vR@f)r|ZNF)<LdlFTuH*+I?Q+p9}}
zlOx;&S|EPHv<V@XJit^YxFkQL$Snd3u~>jM!J_A=4))X%q7Ec~p^z`6p%JEwMfjfK
zI0I=b!2GTz7`wH3b8t?9qbK2{3pU!lt9>>&UmvB3+n_D+cXoHJ)}1>N?=}!2v@Y>R
zyFHr~`fL`1D~`B_hO$|lre8dHQm;StMTt+>$<i=Ld}?P$ug}5ppw;p0{C^JP@f^m(
ztLSZxdZn(gfUZ!qRoLDqSouN&@rpLKQ>jB^u2aCj5X2yidaP)ZygZHrlTqLhW6)Af
z^_(*jMTgy@WXWW56$andBY#D!rH}D?@XwY30_(P85EaJ25bE)G&0AT3Lz4wKH7hBk
zdviM+*poXjL>NqJEsu{7OJH$G?otviq4m{Gmp=sM-S6?bogRlQxhr6A2E<;Zc+qNe
z<JJZJt#%&~a&XjL89L>{5~Fv2@kw`NFF;t6YF+-v!TKdUYS1Q1C2%s{x^?oT#AZiF
z`!ksAYDSD8>+)p?t|XIlIV8}Wh`k-=VC^V7=_5Xf_RqB12Q?6=iNwydt{^|020CFM
zFy3@;wEFud>xyPJNDX_gK!4X8pj~VQ>|bjmeY6Xi8{sJU*MPkxP6~P+ctnq}mP!de
zAJYQ6B7-HA1H>;!IpAV*NX8wgek8k&mn-*K;68nKe0C=NUEcZid)?oqgn!8IeA?JP
z+lJmf2Bn5XO-tlwpOxj=@Al97!yG30LcwOk%%RFLs@$797jYLaVs6bxwB3<`07AAu
zpw$lL78&H|aCdWb9L^ac4SiNNkU<HblI24}GtipuV-mlZ|Neja{r?fa$!qR^?Y<^R
TAoeT&?f>@sul(=-3-$j1I1}#I

literal 0
HcmV?d00001

diff --git a/apps/www/src/public/fonts/Geist[wght].ttf b/apps/www/src/public/fonts/Geist[wght].ttf
new file mode 100644
index 0000000000000000000000000000000000000000..40d1d13145754d3a37ada17d00ade0cb520eced1
GIT binary patch
literal 149972
zcmcG%cR-s*@;|)$JVK&~B82Eg4MY)Dfatx74l)LeyN!FVX^x$9s?+0h`la`BX_s^A
zCAsvTd@tQ8cIxF4r(B9J3F7_CK9Ufals|qi_VPT>Jp0Vf&d$uv&d&3|IAhF!Un<ty
z+SJ_g<;xj=VeI`X0B&yW?HM@m$;<aJ_TguYZTYr!U{*ut`T2J-K74?&a97)4eZRhs
zON=keWGrNU7p`*-8*>?7e;Tk>^$g?})u`6toWF_d1q1GS_mQ7ozXSIl$MycjYZk6|
zC*JS@W0A>>X%3HVUAXbQSB|Y?e8cg$zhl|LP3v)t0zJhz1}|HE%vjF1pKo9+1voD~
ze;Mk}efYv-Q2!Uk-nf4G(uGTMUw-anv^R?SrON@(y0qvI--~PO@->^c>mI!9dd8$O
z#<U-;UblGR{LQDH&sbaxW9rRo7H(fJ4=~Wm_oKdX&C<;am)-r($C%W9Ew1y|E?l$p
z*q)-x8M_bkh77D<w`ud&wVj~vG0>U(==zOI*DqI}iT2~PsIOtfTRwK9rhm3)eq`16
zOqM?bgngKG)u-ZEa^mcXvWch=vwSPA)l4ENe(;?9rROcQv0$QXyb1TkbIMKnEtiWr
z<!n2+Gmiy{mL_kjaIKP>`MJ2mq%));-0Dz{d>$*}HIr2tyNXE@z5L^!eXzm)#!mJK
zGyW_oG|1m^wUMz4>An;#J&A)6*oRoAbQz2J-Euk8ODOX5sCy$DmHxqUXDs*Qo>F3P
zjFINx`j3=nfUg^MAH?z3%4fLu4C*|?badnqY*g-1jyz(*gKHJa9FzzYj$#J<-_k7B
z=r23*ystFjd}@i2*8ukEuapnb{_hl39qOEc=U1b=i}NdS3@kgD6YU>e?m@jwrah|M
z$-1OJS}tWV@|`SWdXeU_NU3h(rx}ZpB})N?-2s}3C&Yv6rxt!Q%l*9~-G%38DkNhh
zGd@|s7-MY4F-Ajzr|2WmEocNizIF(gs)fa<=70}2X8)r_z7TZ>Sg&Npai%f=_&!m`
zE>+`L_{R(1!>Xiy)c>`z9`~Bjb~6i=nkT+t-?46#UZv3W#E)JW$N6_SkHPT(Kg_zh
zYU1a>0-flUx+lJ&BM<YI8vnT(@=EQ@T&Q2aQ{;zHhxnuvJ3kJ%l~RdgiKNB-nMw!h
zoyMFfCHx$5q;scK3tWG+#Iso0adeT|S-zCOVrMMrtXv8x>|4Q$F2RF5W|RJCq4EEN
zg==ABsMLvLJ<jz)4oR+jasyewICfwhzgCVc2IJX5V=2Y}JfXgdJ`w#yC$)bIWN97B
zNhp5<AJ1c%{2H%K-V6OBTZ?w7@c-esg|*36R^-<s=#zW}^!qHp4zbz(vIBLgjI%~z
z)5va;?fM6fWS{P1SyCxxf@J6=id>6(uoJR`duOstc^~k;g>$M8I^@|ne#qKXOIf3;
z8Rulf4x%4#L64)^0_bt5u(2MdmEXqw>sgJ2bLn#&Zw7tT_N!>;VL|JtbQpEWCY{J+
z&>ks0iawu-KEkHMw&#j|&@-UTXA9^^{T6nE&dDD1;n)iq_}E+i3i*o#FYg3C-`L<N
zk3y#6z@uv1_Z2)x&q~*z{);#^h<kRa5l5fx$P19gU1*PF^K9H7#&{;8EWkO{Z&I$M
zlUbGgUzGC!BfTk6ilXlmKMHw(U63PizYAqK+P)s;G2kU#?SMWk!ub&H5f12xD9Zu6
z2-nbcl10%s>PH>Mk#xl;Pw1;p4#k}Q4){}nF@}z!ubI+?@EdmGxC(791wWRtRB0p5
z*Q01rZxr`%E?0nOf235Q-XAEU-7_E$<ZleIEhv>J*(fO}6)0uWB5^N~&S6V3q1!R=
z05f?fjxH9;hjG3U#g6NFELEKU!FufGi89#;`HMp7M>_{_j6g|2F{8Lq7DDc0f%^~Q
z{G;{QPmECsS-@&E!K_Ag2diPvV4P5R7UUU4s>JnctcZ$~4>>>)_sdY{c9gX!?@j!`
zKS2MV0&gy0I(WEtUWVsUFt&EOrs98|uBn~v6Th&>;R{`Zdp#JhJvip#*oWt%h5knJ
zlW{zmMRL-wIXEuBJt`}`<rExIB#lz|skja-3vrDiXeL_M10M=|PAQTB&m}M$@4!7O
zBY<OW=M#`S*dyWz@y5p^pG-j(g5@(H!>ci7ZXDB@6ZdkZ<CG%9#$i=pXa5JjbfE;}
z8bxYTis~dBhggr?i~2*XSoi{<3wG2gy@7Hu%Co=?J1YmF?qXb%UCIM282Em`F*%?Z
zF+N6I`;Lh?4^s;N4)t$_3{~QIENtuP(5G(5d<=Z7z0lDJ@POt4%p0onasD*uSi^E5
zm$}kf6uQPyTm!DsdSQETyuw?~!I8?ofO4sFE|aaK^I0e!<v9IXZUE0OLmQowMbhJZ
z4&=WSJg`mtBs-a5`ZXlj{wt;ESKz-^|9I5LIt?<c6uS1Ei)WzQcKD%oc0?)gLnh^L
z9nParE<jm=0-FiH$j(=z?tYXPnFG3($^Oprh5dqU0)7caMv1|1TFu2UmF8_6zh*nJ
zUR%%dSvlLmZsmHO!=1c_xA88%gP+6C=P&YqOG%Pb8kX*p9+aMz-j!8yu&kA%<xIIu
zzEr+Ren5Uim8i0)DpZZC`KraLRjMtj3se`XE>&Hlx?A;k)dQ+WR4=LCQhliUx9Y2i
z+Ei2O$*F%yeJJ(6ssA&^7!!@DMzb-)SYUJ*D~wIX^~Ph2ryFlJ-fFzZc%Shhlg1Qh
zGMi?Z=9w-wU2eMBbf@WWrjJdZnkBQ^9BGa=Cz?~uIp#L=0`pSKi&m|5x%G4FMEc$7
ze@}lX{n7O2(_hM{u<a<23v>l>1<5y@c?9mr!~}Y7WCg5(UCD0eu{@8L^Lp;$y`sl2
z@Q<W;e~+J(-jtcFmP66w47tSLW2Q<{Syh#)Ce<R<O4UZyxvG7tOH@~@Zdcu_x?lA8
zP1PaQXR5>Ku`zWgdi-GOx2Z>rdSkpX*=Q6!E;5#j9&a}8oYLc1^mxED$8;`we3R)8
z)7_?z{5{qM^mqw+9A;f0dVE*<z3C68Ka&0|dR%VXiXI0S#GuD}&|^+L=Fg+o(|$Y`
zz~2x*p4&Z}*zs70PyS%dJ@Kh$)YIds@l-H2J{RSb$=iWvzkD>F>bw4K5uF{R$OwK8
zt?(YJ4&8oe=b^<1e>nI){ylLh;gJ52_E5+n)d%09_SuYm@ClBc2OAI89IQU5KB)cR
ztq)%L;2FRl`QYy#-15QcAFN{Ry)PJh_s(}S-qk2r>G!+&2iClO-mA;#{ME&nWo}Y0
zfQ)~Q9&7nteyg-qx>C9eviq#`GSz|HX3NENMn7_qTq@VeZE`2hyA_y#x8WK#Ouklr
zTRtGaCx0Y=E`K2(mcN#Nl7A63aFjhNoT?B;!0%9%Rt0XVB2>|;*hx%BpUEEJMWJV>
z{{+J1BdCW$Kk|3-5AqRT+X8Y#6-up%+YI`-So({!N_tp&SGrlcLfR?ql2%AhO7o@T
zq<PY6X@Rs*dI3CmURo;M1pb6G%>FE%S(p_Tg7m+N)v_km3?F_Lo6UyUC|k^yvrTL>
zJBA(0c1pXYHPXq_zoZ?qjokwKvY$Q79%C=S;=In@Vjr>3*nhzFZ`hBVbD67nFpuOh
zJdGQ9I?v#C=_KhM=}*$D(ulMKqw%=(ko1J~H|bV6UAm1gkuH(`Pr6;sm+q8aminZA
z86Jvsi?mEGkb3!2=~Agis+4M_F+`&z7R16}wL+N|K0qo<U`Z^Qm9Rp14-OW`+F1|l
zWL<24bz?^9XKUCBwu-H0$FV_3`<?7o_E+{d*w=g5z3c(@H2Wuef<4LJXYa5B>|ORK
z`=0#_%lkhz!G3}#?%@gCz~gv4w{Z!cN-$<^ncc=h*xf9W-N&NYgG|pJVo~gVW?=td
zvFs6+1}`9mJp~){EK7vvVPmhbboLU<qFI`~%JSf)<gzzd89T&E*$2$Y4zgnQHZ0PI
ztde~S@91+@$G%_<>@cfmU$RE_6>EVv*apwGmHn5w*bl6ajblaq3v<Jq5Az^IeKc%@
ztJz#0g4KwY&Bv@TkB71`csNVBjxE8gv5}{;bv%i!<gsi6Pho3$B3sXs*;a05$MZ~f
z0^7xN*`IhmJBjB(Ja1<?@W(RP%dDFHn=RzwY#G->dvc&Nc38t)xlqoNv*d6&Le|L!
zIabzVW(bpG<VaY{csWr{;_LW&ej#58%X&6H5A(?d{7ilp^l}^D!gul0_!wWtm-7{T
z4PVPQ@Qr*E-^{o2llY(bZhkU9g`djz@H6=7{9OKLzK{Qv-@)(Xckz4q-}(Lg0sbI=
zi2s8>$DijfV5WMBzs&!||Bt`Q-{SA__xXN)AOC>g&EMp2@VEIp`~ZKAzs}#~kMM{2
zv-}l)5kJT;=7;zt{6l^z|A?>R_wd#HZ~QX;F~6LD!vDfQ<yY{}_?7(M{3`xAzncGt
zU&FuP*YU&rdj1u^fq%_!<lnGt_Aj=bTiF(FV%xZdnc(&9;Mwd%o+Di(T`cXD_DL5?
zf0pi*{w^(-_Dg@2s-$YEPWo7SUpgp#D19n@CVe7(ARUrElHQV@l3tQtlpc`olO@bM
zvaAs^Zjc-zb7?|m(karZ(wWj(h=cBt&XvxSPLocT&X&%R&X+D=yLkZu(tP6NJ5*<p
zVaR|SbwZbyV2(eYoyPWJ#=8}o`wkE1)x4e0;tRp~W5C&~`EB6Wi{R5I{9EpkLZw*A
zEagcR(iUKUMtTjDekuJ=4#G%x$t&e8@-F!-`C|Dx`A+#E`5E~&`5^4$5mh{9#R8Q}
zHHdj}qiToh49tsH!3TIn^)BZB?}K<yM$k~ulA!fL#|NDjbWzZ?L4OT;An0dxvbsjS
zL;Y9v1L~*L|EEdP*fb7Jt)@dWTXUM`V$HRhJ2Veyp3;1#`7W3RYlGv1t--~?b-|s%
zL%~aew+HVHzB2gM;Qhgm2frWuT?h-&hQx<hLkdD#Li$7Ig{%xYCgkLh^Fr<mc_QSM
zkat7A4e^AAhQ@}PL-Rr_LR&)nLr)9c8+v8vt)crv9}j&w^g!rmq2GnEFl|_Tm^G{*
ztSYQ6%pJBMY<1Z7u-#$jhP@f~QP@{uKWT%sQQ9PJhPFssqixszReLC07oHNH8SV(L
z33r8`5Po|2pTpmb2#tu1Fh$rSoDq!?-4VkPH%I&};<HFqWP7ALa(?8>$gPnlMV=M;
zX5=qX!BH_$X;C>*rBU@!ol&!+7DcUzIxgyzsEebnjk-VTiKv&OK8yNJ$8-jrNtdfD
z(>3aL>aN$_rF%&CjP762VbRX$#^~<o;pipNo1;&RJ|p_i(N{&ksSnpT>F4WL>bK~3
z>L1s?tba%UiT)e?cuZN$teEXFm&e=~b9c;ZF$ZJ5i22bV8Nv-IhD<}Tq0Z1@m}@x3
zaI)b%!{vsX438NO8oo3fiIrm`ViRKXV=H4@V*6tk#jc4xCiZW!kH$V9`$p`c*e_#`
z#L01yaY=C*ar5F<#%+n)8Mh~HU))u3x5n*{dpz!?xOd_{jr(t$Cq5)TCf*pI6Yq>~
zjPH&gj$abLG5+NEbK@_Kzdru1_=n=3iT_vp`|<yY|2aXEpidZ1I5FYWgxeDSmhgDO
z%LyMR{E}!+%uXy#Y)IUYcz@!{i9aR9C6y%AC(TP5OIn+>HR-gZbCWJgx-#h>NzWzA
z$zjRa$z92-lK-51d-5yEKc`qy=BAvPvNz?0RCQ`ZYGSH6wKMgM)VotZPK!wEOuISl
zskCvU$=Gb{GOjT0fgk#&@dM*$#_vqIrgBrgsSDodLem=4F{WLnmrN7pD08y85FY4O
z^A7Xr=Dp^J%^r*1l4{Aav|0u%>n&$kuCd%=dC2mF<ps-omQO6-SglsO)n#2{-DCZm
z^#$t}>Cx$B=}qYy(vL~MIsKjVPtw0h|0N?hqc&r4#$PfX&+ym=Z0l@S+8(!kWcwvE
zF|#6baptPbO_|qc-kEtQ^UKWdGsm-nv-DZ1S%q1vvM$MbC_5~>BD*_#SN3Ds@8-nj
z%*ol5^O!x@-fQ1se<n9Aw?Fri+{1asyc6^OmG?p37kNkWRryi*$@!W2#rbvlx95MH
zKT(iV&|J_}Fsop0!P0^?1zQSEC^)&`?1Bpmt}M8z;I4uP3LY<bq2TpGU136@sW7Xs
zu&}(azOcQpuW-0<Z{gL2cNIQX_-f&y!f%VDqUa)XQBhGtQAd%xXl~J1(Ym7TMZ1d5
zD7v8N#iE}bk&ZgY364KI9(PO>#}$tjUnu_FRs2HnXT|?5kxL>=l1g$)T1ys}Tv+ma
z$!jIwl<G>YrER6NOP7|eE!|yuZs}#Ex0b$Idc;}k+~VBfJk@!w^J3?9&O4nCIiGR<
zuPma>QZ`t2df6pqx0F3p_F~!lWnY&~lt-2)m6w%wmd`KWT7Gu<t>w>@zf%5g`41Ix
zg}x%W!dcN+;jUO(aa_e26?a#BS*fWsRaR9lseHAnzG_j`Yt=c`t<`tb#MZ2+*<bT%
zt-jV+n^Rj>+gUrmc6;qTwFhb^>Qd|6b=TB=Q}3uhq5iu1w;R+A^$klJwl(Z-xUAus
zh64>hHikB)HaZ*o8do-MY5Ys$ZH<pKMK%>RwKdIa+SYV_)4!U2Y3^vgulZliU$um`
zSX*jZhFUhX>}k2L<<r*0*5cN#)?-_5Xnm;l)z*KvPPE0gIoev==Cy5XJFV@~wmaG$
zYkQ;Zi+0{_YM<lEcD1+$Tnk)lT*tZ2ab4ru?|Q-Yn(GtSx2}l}ZAW}ZdWW;4y<>65
z=^giUJlgR}$H9(&cSd!VbT)MMbdGke>fGLWa_8R8`#N9he53RI&QCkP>ioG&?h5PD
zcO`XMx^lW4U6oypT^(IRT?@L_b)D1o47>)cWu+4AugUP$!r&t@2h3HvNoUgAc$|#o
zWu_GFiQ&(AN`ejiWrM*}fP?hpc!gEkF}^NEIyGhd81W099@fd2-<|{}___}6;1-)n
zqj$(LoNeZ8UaRNz)+JwWr-z??mZ$Q$3@aV+jC_Wa0WTN3mxywWvwQsTbNp~U+czUT
znq532TsH-NoF7jZyJE)r;q0aW_!@uxSaz8LpU8uU`=lS9L@PAVsYjnr#ZD^d$FfZ$
z$H2=b`W5)uez<{cgAdE8zw!m(5$-#<$>9H2Vsbik7P#QY^PfHYd6nmJ-s>6he30|K
z!}Eajr2FIkPu<VD`RwsMKmc!_Nh^UR3jVa2#>`O^Ylu;+EjDqq*c?TrCB+#QONsAf
z^t&B9GF=WnXT^@qPd?e+)6@RsU%K6WeSeXj99^8(VpA{dUbx6zRaRE(t}H2Yg3{cH
zui*#14xgO`nKLp<ic3q;N}MJm!(vve4KcB?!0n8SkofBP=l1rVJAc>Nv2!994L2>T
zs94rCcPxBPc;^XG!`E-xbi>F=>(!k@&AUcMb~Y^>P<L&v2ZscHG4ix3!pQRk!8rv^
zBd@@t;r|myb0@4sj~||hwE&I4^!hq~eb6t{$SZiX@U8EGloIdG0`G#c9`SQ-l4GL>
zuD$d2tIj;-gdIChI7NE$zFThI?>_a^(@#Z9;z^k(!zhB{Xm++D8wy4*TrC?f(x5g;
zHrfe<f~$nXjMl@bZU5*SM)|{@i}<MLTE5;p*xvTcf<y6M-S|SZCvXTl6nHdzMdHwO
zxNZuZIHA-J^U|%<pM-1K$1~yyXBP#)NjDTcv22e5hi){Bo+|JpJ|;#+!GE^Dz5(k~
z(g7N=%OF`ctolu<62z#q1kx(xN@J@5AQsXbAz93MQb~zP>hV;BlnqtXEw8CvUYp%s
zrk`WzTi>|o-0u8YTUsmD3>HZiUevYHS-pM8IQ!VTwA%cT#swvFZrCt%`hud|;ZueX
z^iw#W2+nK0oOkMM;J;HxtY4Fp!*_X3%mMH1p8M_ncF)ybI?n)|8B;W1x(bv!EhQ$M
z#YUR2a>>~po#!l>wWT?HBz$B}-_rbov7Xw|A}o25>(p9p)BLCfH>_H9<HDMi4eI9E
zy?^TJ+tpdVpse3>@wE{J9XUREK0}PIRgAhGJX7TVYbg*OjaB_jaGf6>g;fXXi-IQ}
zmUR+8jk*HY@|XZTG`b2r7HeeE7aFZczy+DcE4{>Im|_j`FiL)FAXq_m2+PBM&&|uu
zYVSCA?3gnRBf+`d)%|1n1xvdd=M+d_M#HW@x3pZh_{L?+Z(Oo#h1%YlMZ7qvqilXf
zzkT`M9`AUq!FY)|$$`Pr=wKmraWrIucK(okaM12)v`bHVZZMnq@OTBEYc_kXfgV7w
z5&tC3vx9?bIc0p@s~u|uUkR#_bt0-D<bvIWb`Wue9R+Thps4=D*Rlk72I4KKkC@9(
zKB?xC&`JTvj8#hfn?Q_+M+y82TsQHm;HwJoP+^A@c-X|70zL;=?+$=#(GHC#S*yDO
z@Ptns5^&6qJY1&nQSii0ye8o0i9Gh2=q<t3a?%eN<%xfzwpAwGQ)(L~9um6Oh|vs2
zufQW3N1Ica@e*{LhAq8eteg+=w)&>_!Lp@Mwd>o}{X_Ex`HP;SzHN0RJ@ovr=zTeH
z1y=hkK?T8=391#i4$&9Vb+Q2)(4Me&4jr5VZjm*H(Lr9j#`8JPTJh5;M(_&0(DS?p
zLbLQs??`PBxT-`O(bzvC&Wuh(5iayefyX2Af^Ld73}{2Gj3Cr{bTEgXjd5ILcYE;}
z1kJSy&B}=Ro&!Dw9)(yw^^w{EK0iDjaVLV4MW2MLWz!d5DXq&ov@Yz5L$4<xl`XPv
zbo+;gwhunH={eAGk+gigLdqC_n~Im>J$NQWP|QiNxo-4WK7Vkh=LXb2S6YwyOU5tr
zQolz~-|Xdhp~4MNvqx}Afkz{{=i?G^gL(xX&mn<+JR}hc+<?e}m=7mbA~r#^7y_w@
z6Rtyv1L|z?QFdUtF>SC9rhfc9X&ne$JbwAUUUTyBP<=Ou5tia!Sc*u*)B=45;hNaU
z%6pAGIS+ip((}5z&s#c1zsFoF%F0%_+Ud8~Wf-|()28c(-Ay}3Ms_tTt^@UgtkJ!K
z8y#M57)7rYIL*xpT!%;>aYKQVwNv0>UjJ-*{c!etKz;H@slE-`{Vupfa=swoK53zX
zFBVZme>=k35?n2tEtAv|&z0H+c7xzKT32bnsYFDh0yz~2^XmUsqE;WpwDrr*?d&*j
zS?_imztVFrukkzvLpx;K-rKXhq<BS7_i{(^vZ#4CtXX@*{OYo$!fRaOtai8Wau1x;
z(Q(p%dsjP+6lo>w9JCTLJ?TAKbZ{gU$8mIG+wQ9MJvZId+t=57ll0`qrA>>AJzwzU
zO^x*pUJPZxpd+bq`rS;N&}du8R&RN#4?j;mwe94Sw|y|U&)t9@_r|fYjr$-#6+&Jf
zknR8%Vi0R(K{mLrlYS;)(Zr?0!?Zc#rb>=vt&Fd;jGfbo$z}Puu9k)&&*4~e__EQ?
z!a~Qg?(Q*%V_9=&Xt*-FEV*&{qHBxRogSp#wZwKpf6qxh_}_g}x3>?A(1%!(S9oK>
z?NF;VaH8YlEH*eKfehi{9jhyITQb!39qO3b(JE)ni;vZJcDw#AJz2c4p`gPqg;X`X
z^0YnMbBJ$jsIF=B>f9nBtwUaEWkOnr|BHm~D)4CUDuXN!D1y8w@OZ?N$-+4y_3hvk
z;)ROU_IgdwCmVbu#WjaxB4%UKuDDc5%)`C?$F{0RGzER-MJ?%RvuE`$%qd^l-o3sd
zctoA!Drx9W>+Kj`kz2Pus%A}_y2O={SY$Ohatwx|wvwtjj>@rmbxvbOt;3XK(#KZ!
zI%?(=l3WXVM8D7z(hkJLNedJ>X`up-MwD8CTZw)@JQ4k!#4}l6=dT|%rG7kiEqs=K
zD@M#j<5gVhfHUIsu6!n!Iwk3G@JS51(bc2e;`v|dS$k?Wbe?jGYxcaJG0uYzJ1hD3
z3)hc+U9@UR<6@_~t){-E>)X7#YEKwA4J$4sqXiAM0LRW?(f#{fDe7HmquV`xHqq>@
zfxck>3Yu>G$PX1GN>ExG%ojb^V$}kC{@RHvL~V@oBvd2Evui~Ex-ia5q^D?gD7-A1
zmT8&go1cgKkEtJ=KYMWgVEy)}x@~>@B~RhtJWS9yVuA*B0)rTt<${g~9xUik;KXSK
zu15+kjm&hoj$Io7C%dWC4`Vk6z$fv9!=6pzA-hTS$!<R3wVQ1L_sMQ5_+rTtiuMbs
z$9{Mc_AO*TUAOw-G1!%vY=<nWg2%wlK|5kyjYzxj0Zg1`Va^SniFpU!ndh1CO~52U
z@a1Ki?P#`^sUH4gww4b*Fz@{H7M*|I{0CN_c_tpXL+TYp%-WzwJSX_N*~`~c1w9I!
z_@Tgc+!6pM{weS<@`wC*ChLcDhoC<aa@Pa8!a$c^5GLzER^-1w9lP)EOFsS2*aHvn
zC43QVORDEe&n4XKc@Gf>c%)Jbo(d*uRi4s)|MS=*kBt4y&HP%=J-icp!tcQ!6g36?
z*e4Yl`x4RPg%dprT!-DaNjTB3z{A*v0QhA6aO~7g)~9h%>KoXg=vOi*RDnYBbV|4h
z3WcagGC$sP9)HENo1ZcyCAx>kKXH>*h`NHton9KBBHUg$wW+|Pp?Q;VqEUfs*(0LO
zT=;Q+LYqO1>22^}H09bsEuZ)G_U&H-+pl?d1fS|RQAA3aE0+Ts#ah5+WrEXSaLnc@
z^8+T#Zr9E8ufe9vO*eH940MZG(=`_3c@1MWbxv3=dU>k1mp_Z%z+y_vg#}UI(a3(M
zUJ_ksAH7uI@!0z$NzTQu6F?V9Oo`7{ISjccY~xMaPH;=9Fj$8KUqwyP;vR2{y9H(i
zPJC71I_CAI2(wt3DDW^yKT)F8Cw?n%t=C#l#}kfuYO+4*yiz|F`_}?Kk;ktTJyPIF
z*vF;uSMZPwDR2Y&=8G55I@~hVS5js>UnFXB?YZ(d*PT(nvFIckV1boY_Flm&eLyrR
z5UwNdS=9HfvX%Pr4C_EY9^#b(*K&imKH(>xDDYV9Y7?FqjQ(lzv4E4*X=IBx=0fyb
zDBwyI%gQ4~eUcWlfX935EB0tQ+=^Xmg-&Xh@LNTFD|VRypFm82>jYd`Ct4;HJ4^n@
z{s1`T9r*CvE8rd8b`|=Sd4%vQcG-d%jp{4*k>Hz^`rItq{R#B92t10tu&|Y)zG4HY
z{!UTfirsqAu8>KBE3#pM&o&d>3j5=uQ|Yh5XDdbj6h5mGpfz4TvpvW=rSSs&syxiR
zUityQ6YWdPKJlFtBc&oEpb&4^m?;eEbRx29hMOn?q6WBI4u`?(ydnrBeD)HJ2#UPl
zzp!`qgSEBJI_+@erjfDL;gJSabf`5qCR9_}n_kk9d24A_iMF$;sXNNj*ie|K>6p7|
z={wPpF3#f$GbOV#&6U+^&oG8&nbNa}PK6%wq;3)Xp?P)^{*D)}mi6;yf<`Z#391W#
z(o9U4)pFRfnd*jbn1tTvuN%8Wf#x9-E7eb15{DG|X+GkI#~}VV34hy<#n4G<Ht3<e
z3LH-W&#RH+;^jKnE+T|JwrjxY8iWTGMhC>CVhsk9H#V)t8eKeeuxBj4E9XI8)#R)V
z9gf;Kd+GYb;M&ERIn9~3R$0pV(;aInD_6BQudMW(7}VEX+!#J$*zy%mS9eub_h{Q&
z%Noq;1XpuumZo!b-MYQbfjpO#-c*<ztI1EX<+L`P;C3J1Tz~v<!mPo<Oik+?-rUvJ
z0qN<5^w=P6(Xg!K(b+T>ox>pH#<wV@FugZ|#v7f3adM|S#_enwD=Qo8XzcE;FKkIq
zZ`Ky(^dd}RDrq`?)~w^3dRNXFU6DUjQ#FhQ0T(jCz_FAm_R$xoB>D6P>eF0ns;btw
zs^?dQ428H#+xz?5OI<jvny*#5kkenOE-7CzI=Z5&N?kd-z&A=v`0o3?68EBi^q52v
zM{u<qy;7-dl|YLhnz(rq$7Efdx9)eSOA@DG)*=hXr*m=u*Zg}AG|gd|7_cfv=eV|c
zX=&-w=8~aUcc&aXV#}{Lo9pvi1_rbWw{o*Q;}yL*g}nvCRW(ETD@Nz|TfbRYf`>)F
zq9nDyUrIDvfhV)ek(ndpQZnJK02vXwR9d&|ZRv3`t-zeANT=~HUB$`^Bq{?70>6sq
zMez%(cPxmRzq`-+ZTs4)s<rLT;X3o~we5X<?HC0qqHcAa=d7LAxr1GyUB_QF-}8OV
z=APb7HTfNbwiD0nojb2<WOUZ7QLjA;!dS;m+n1S1>Ur94iuKG=>($pF<c?(^R-*Wd
zFHU&;@VC5h8u6K+x&Y`C{<>l7C+qs48W|%#Bj)g9Cu{%Rk0W-C2i&(~w}CidfWJ^I
zBwpC$IK>bMQHO~5hXY#)N81CwI;S8Zw!eNr9~BiI5g!^KR=Di9c=c+o%~+B!8oD&z
z8W|O((UgTnJ~=b{e9|5yz3HdhFv~N2<hVE1AR-<mijgAArdLcCkM>ftqKfZQ^*0wc
zM36!9yrb@}sOgbXn~!(9PiP{8GdQat3kJvYKxaFwr$mua<mZuBh!urcBRdRYH7vvR
z-rdyZ?oLa)jGLr}%66AIb^LMuw9BRF+&oDFSCQSVSP@@j7*VKzuneMt6eyNqP)dbm
zB?U|<AFT-+(pFcub?M#3jVmfEmNk?ONB5R3?`Z1hJiR%urK{)ajFvogdQL^fV0KZ%
z=8n!y4aIi1C%R@hpGVB^clPAW@9&?laE~Y<TLC)*yP{t_6Eu2kCa7)_D#v;;XyiEf
zSd+EM-VkPzzJCV5X*N?@j9o!{toDg{QX4oT!(+nS@1&(mK*ap_`SLlR=XvFiu;z!B
z7SHlO#2$_;LdL(x_#$VOb}M|lWr#V8dBmXWb%%x)v}Bj}WVxMXb={aX-jM8NNsc*{
zo?Cczm#f?5c^tYNs^CGNDYBxGlPAvRq3{R4A-M4U6}WEV33eswcca$z!dAa6Mn#Kl
zXF(0SR*D9X1U0>GDSG@cYJ*Dly_hqU+7aZt2;8z5Sp}+lf}lU5?sx#^u;*y3W@ryk
z@{O+zz!3f#Vfc<n!H!P`vNB0xVxJ}qG1wP*%8xfgCW^5;@)<pG08hk8<asDh814{l
zPOQYbgnU4PDo@z3C;B<AAT7wfq-TGgSjp}ccs~}cX=!&+K<@!3!cbL2Ln(BlwglxQ
z8r?N*`&<bo$vXaKONAE$4-(u_FhrF5pnB0a1*&_^%V8-^=(FH3cVOjd(-?Z)Tw4Fi
z+hez3W$4N0DF;0-9a(z@sKfY4Y4S4k>@z`iG{)~t8WF4_fyWPzM?S3=Kl`s2KfGHd
z;N&pu&#Q3jqVfugrA6b{Md@6G0rkI^7Xib61m*}tZ3Ska=?4ZMJPMhp#7(qFn7#GY
za(ppCF~?4UroI=Y$dQ}^T|*ogQXQvAwf7Kf@Ci3!dR{TdS#OuD4asfDY@Qt!6`a##
zFYnHDmpRj&sqUi6bZ43reTvFnYw2v_d9~*Jkva%}V_UnmvB2|BUftSjZOZpR`F;9C
z^JzfK-X_U06Agui7PV$o_t@NVMVZw-QuL`I`PHeVbIM4g3L7n5F5pr)1l=Ux9HRh<
zi9q)7B%CZ7!7*>H_3{U`$x~8l$0JvHvNp-4Qrj?0_PH0biQ0%;Vf_{~xi_P>r282*
zg=`)%kYaJCH|BZ1>5`{*V4o{JZSkU<ddt3<yP~XmbZ9LS+1i2o6H}d5vi)g_JJU{%
zWxLm%A!ia^D!eaDQoZC&QlY-l>P06wL|RWAg2na2i9-Ze%ai`0PH36}4O>4`-SA^4
zp~QQtOYz4&N(=PPguex{5elx@H45}w&|~yN(_-m;6NO3|0i~{CmKTG3K6s))HS96$
ze0oO)K0f&)h)=}PU`+b=G;`XVI;YPY6v2w#Zb=(6x4LI(Vd2uAtk%L1?Y`#T-sZf<
zbZgT->Bf!f%IfYN?d?0dlZ(s|o+EEBpF4NCeW<>E$gaqNcSQknhSmZW6KKq4KvPq;
z*?I@#`pUZ&7Zfb+D({Uy*V&ks*61v4N=s|nCy)M^k)^bhX?^|evN=U1bIL2`6c^6H
z7B0!aN=f$hD+n9!l#mgS2jq0X3-GlCQIKS}Hl(mMOX*k5T)kH6{ye|Y3K2y2_VM5d
zb5XL=Ty>>-qo+ve6ZOukhtMqVZolB6a9l_MU8>;F#<F5ZW=Rs%T5hWCO)0l~9>GY_
zY}iBcM0=c&n}|&`Qk4P<Y4Sp&BMDkE5rw+ZerP;Gl49+|KR_?1c|HD(70N}KVP8ep
zy4a~23T|jDt&gcF@0^{!d_n!NBX~${EVh=HCY0s(jaZ#?wRwHT>Vk5M&5&#ejmWCb
zZk?0gm8VY5NwAv}O@`oz%!=&7W~*1aKnL{%v0R}UclhKMaOw-eVLLjN+E$|44^8x~
z_NUa<dFw_6)TO<Ki-1X3KFNx=Y_O6cKarBVXwS_i)-V3dv49*hVGK(b)-PH+*vhdv
zw0nD9UC%6ASB2eP(^6Ga)y98lTvRgF-!wZ&Cl|R(=dJFosmrcR>!~ZruWYaPz~zwe
z_5?moBAu=Hr>1}zhm(I5-PY_jnmRqN@cf1rNj?6HHQA+js50IenS2uaBh#M^n)bZs
zC2pUB<LRa*_$k!>#S*@X0!afF?sRD6=~UQK-Ngfwlt`H`yfFUe6kIe0&Iv2^1Y-bC
z8zYlgt3acsK;w@=BNPYVUqQNKlxRlawvMGFPObLz%y&D>Yuntt;ZY;nRrB~P&tqNf
zePHwW;Xi5WTM4s*gCqo4goHe&%ohSTNeIE=FN;`=QhO4r6VV(63J=&@H%wT;>2<@m
z9o-&T)YFu9@vh3`eOOd4u2`|E?#1dXT4<R<WfJx`CTk-G<fT4_;-CIr!Pa`Q7@CP+
z@NTgNh!z<g%C^QEkB(k)$>^g}w5N$bIDS~E1D_%KsGXequN^&p$H<NoMz3ADbt~$(
z@cXHZALbW$)}Te;#&g6+qqjfpf)WKz98=&rcz#5o0w<m+@G$a!{P4;8;dmE`Xh$4X
zN(5ct67A%~!A_FPmjBQD7VSB8$=@GYbp8cAic3#F?fJ#??dz{oPlTn7#ts7$Sr<;H
zMd>t_UdyVJlQjC2$438h;piKYRVDjeI(?B8EP8ZHPA1VIo~Hg}pnaNCA5`cQaH5ak
zm{W%Y)dEVrQJ`VMaws?^>xM6%tV?5~)HO6x|1df5FVH`j&&eH~a^B;4fM4aglh1bZ
z%`Ug+Oc!BL>Jn{sFKuwT{BUZI;IL|9<)_pp+LYQ_>Iqux<r~@6@GyfAbCI#1BadqP
zwRrnT)!Xa&1=zZ#dzvO{1ODgH{uL~c4f^sPEPfK@v&GF6(N&W90^_)EPmkkv$|0Jv
z{$C5=dhTB@S)9gz&@Jdu+9h5<Bg8l%>g9(MF9;6(?VAZ2Ep~Dg9Fui*0Z`(bf+1{V
zCJf=iE+`mCYn8gOvz5Ae5*PD{LR%7tcj2dvv{r$~uw4Ogk_-il0SQ!!*GL{ijPOwd
zd<7A=^M%GSwfX~|+Rnv=1&cc?2N1ebX~PQJQk}KQ$+gasCSzKYwsS{^Ye!dJrfdB0
z_E32Cz2$QXi-*gc!zD#?%0M0YX|mAd8ZSqm7t|?m;u68Z(WTUv>Ck8)<I|zK04Q-(
z!4M`q_UU!Qw@>0Fjw*FyS1HguDMN5np)HBG2GB+vRp2q~&jE1asDi~XK$1TS`tN|`
z%VKq+8+B9W4Eh2%UfaZOJBRHOvQ#2=Hwcb8%m<G`jw4Z14-MH*YcWwDYcT^s^?3Gw
z0npU{M0xoXBi3!V2<}-H_<G3%REgDE+2ek?gYbT+5-U{8mKBqcJ0DadqqaBBN3k7R
z6T<HY-B$L9z|w)MTLfHLk6Y8wCcaI>IQEWFTY*|0CrW0l>s{^p>SoBmfRPugeb#}s
z({;oZ@4BAuO|I*$$UCRjXkCv?d$gvkzpeScej~dNP-QJ(5$hOb#st(mYgt6xNtr1K
zYD9l%5AP$<JH@&ZT(P4Tp>vA0BdB8Stav|_T2wTY;EHZp27GiNCJv|~9~Lp6S3&J|
zi=MqeEwUG=W#AyVNklRTZewrbs{}-mmS66_Pwx+8AZL)C`w!nH;P8&53*en8K8*(N
z1n1(ugfB#F=bNwtYo*yuKa<VG0w7=)OvLDYdo!06*Oe8oGo>UOg9bx-YTH~PA)#_q
zSd3Y((bQONMFWZPv3z@ePOc*~)@)9USCy2vHl7e3R>h?VbDEr%TbYv{7p;!hMZ={~
zXgLnFgwdK^p+#|B17q&5c8`vBca4sAW!ddn*>*eMKEJnj{(_#~`SlgWj>@VcM<wxz
z5S|9Es-bJX_bMnaE)==}>=a>Ba8JG;KylR3!JD@2-o4G695=|{LJ;PQ&C8Z<bT`yD
zHt`s@8@Qp1^o|B_hXc2grCJQ!n8ifqKN8R1^z1;!`S{u1+QmYnSI~%H7XJ}@-y-{f
ze<?4-Q#9Yw8v{B$rod5tp67{=K`Ne>Hh%RLYPO+0yh9FKftq^qhDGf*zR!b~YCStR
z5&}Gj#1p7p1V7+g)Q+J1J;m$Lo3NaulqV-%|B=<|qO6QeO)<ZBXmI?CK|bdBDpwV=
z@AJAQet7)s&-d;7TuSwfW>$G=H;bOe3n`+Wn?)uAuF;opcB#)g0e&2GNr8*^5YRLD
z&+@r~a^)Q)*d=;<2;}IH%M&8u6qk`abBpIqZW`n!&zqZhre_IH-RwE!dC7BV3*IJL
z?75tbBOUo-<+lgI&e7Aar4h(W;ncV`rXh`{Bu-hvVnUjH@j$KCIKAm}t=-49%fmrq
zeS=FJJ=rdoxiN3Ht7%X(qG?*w=-N=1;d1ioS@xFWqZ}g@YG*@xbwOn^$BVkLrFr?K
zMLFuCE_?ofGq=$mstYUabJWZ)1x2&LAG}&Z<7BcRVF>-?4(XIZ&kZ{V`TS!k?-yM`
z4lu?^)RoUcUC85P?R2d59m+1JL#>{C*7Heqr(6+~W42_gDrDCrs`i!&v(ad-Xqkc&
zk{N&#nU(>V9vGR|5b*rYoscXV*>(PrVl*r?N;0K&|Kz!I3-1~Ka!|vYx4;?n4+x!k
zrDUCu@U316pAgv{a4My%fD=-HJQi#$Kn^WJ04<FbNhxw3e_+t_MP^V<gFDkCWg+c&
zqsP?Pt6-$eYiL-LU+(b60Ip$Cai4N0kdKUOnlls)T#S}9LX)Tw-KeA)^k8lvtbRR&
zTH%>l0!J2bTmb1&vxr{^Cw`<T;83&0-w{r-Ai=nX@2*fE;Jdr~^a+}zl*i^?ap~Mc
zkrlb_XniwW_cp$N{H&ZzpZy6YP2oF%SR?E49fW(pXINdCzIsWS)E2yTG3iVBB5=OI
zi-;&84y5CMS$)I2c{i+HbL0H^H?Enzqq%v<>{&aSns(UT?QJIx44l}e{B{=(S5*%c
z77kTc4HpWPL9f7j%05G{j{zMRXIO{((LTKuh<k`P8Yq#9Lm^2ir6q&k-AqPd&fxg}
z_I>{OJ~ufgFhoe}1y3@8tpHDBJ~Zi^^jaEb3_LD2qVcK^h<!VvY(dq=V+T83mBU4Y
zd|isYE&KSD-+tTJlhKg#4bZ4a*5nE=4c^@>CCiCOpns!-gVKARvDsf@yv8d838;@}
z)kMF1Ucj@$n)`Y|&y$(+;gKr`Z@TH1=lt0G9SXz=OAMZn^vJZbBV0ai@RC8#D_&mQ
zd#^m|WyG{BYrGdgu_Q{4w&;Cn)|g0o)>rM`HZdsjtZ5o4UevsFBX*8{ps7TR1-SXM
zXg8AVCQ*%+kH#fkH#oj<IzGttOgL$-`0FH2no(>s;cWZo;53X#gLO|QQpPtgn2Pco
zC|+#!X~Lu)&q(hy<>uE+ZE1?KAKeKdA1aOLg9fv8GU+rd5yn-XsVAd@!TgG<sZEfu
z@Of@GUp}oz&<JnFH8cWp2%A|BJFp*iz&LGf6B}ol@(PsG5h2M)bL2agp5NVl{?b{y
z+)<+uHN)lYE6d7OwhwNM9gTADO7uL(OQJ@u-?;huk=m{9^1d9r;V`tTdH$^aZMD43
zO)Zl3x;3yxufg|gzQ*EvRSp}nG~X|CpM=I@H_cMsrYIk-jznW8xy36MSE0e$ZT++6
zH}4w48x=Wy<?gMuBiC=<c>M?(6zj+Z=;^)SsG8-g$U4y;VU&Cvyu^H@iD~4piTA`j
z?tO;{ynzo3O11d)x)_N>#q+S~G~R$B{0VP<3lgcd{P61$WeY2X-dBti4N_9I+jE{z
z`J1{)`GJVEA8%jXhTf9}ilddfGP=;Z-?4=l=!ZD}m3K?Th?k?yzbo&h&h(OrgfF@<
z$ptb*#wX@S3o<=ri(bUO9S#}SWOW^qYw#u{dtNjD=JuYGw?c&}=~JY7=ERJ-mTvUi
z%2{JgHN7q2<4`i>NA$$YA7RZcC6n6&1`30|I7nP-Sy|Pxb7*vVcN19U`HUZi5(rjR
zu4ryw4cpY(+$;D6CX$^Xs&5seAnXKrfHUfJ4X=G}njS>E-S<pW0hl;3D_jbUWIdCV
znaH6>pcu9%4k0b9<H>K*h>=0S%7RR4B0q9NOs(~S^jiJK1q-yvF?(Z@!{<LRd-m&N
zuWv!|{GTLqQ*l8-vFH6GrucZ%5q`4gI5-fso=25}?qCK~=5FY<omMk?Y^pd*@mhoI
z#0es%8Z~xS;KHfZSOWMGgl3!^R|myAQjERE+%jvjF1a9H6_=l2u+>#rx>C|gzx)+J
z;r4}*I!UDs*Tsb3ZNF&!{BV42R235&p_Ns!o;!YBe7ruv!{8fso<uG>v5b;1G_sPD
zeyd@iC|j3qk9iF8cnSZwvc;WQJpMWKE)w(BJz@-fo-n*VnrqU%o>qWAEYBPKWzKK<
z#QP2$*f;5hP4$aO!&XXIeh3W{^Q)L213Wq@b8z=mpKdBbLJip_Jl6|6@Y@Bgu)~3G
zYf8O?<M#%<u}N4U%hTT4^yRX{svIk<3Su52BVH!$q3jFnDu`@--Fkkb=aZku9zmA-
z$8Pt>ftl{02R!ul%j>zM2jtVEPvhqW<kX8EP0y>x8WT8<5q*M16MUK3kC7~cS4{C_
z1iqua8O8Ucyd3yM`kAfcT~ke?SJ}xa^4mq&WSWiewko)k@Aq->E;X)|h@G-tKz=db
zgqj+BA@p{|qx9;N3~h!-Db|O-qd0S<QqKp!rXRm!L_w+Wj49LE>)XbHc9EHjSp|9P
zpm>kc1G@gTZ1aG6=s8x8$NE=~7Ip^V`_&9)_|U*h_0bME;ma7NC>}C;(f%z$&dAbO
zrT>8|h_?h`U8R^4Cz4CyyJ{k2e;xunSrHWWMldyMyv3N6H=2==VeM-$XG9Ga)R?Ps
z<0PG~ygRpbWo6xlw*2-iTT5<XXAb9Ct|)6(#_s-wI|q^@Q*6n+VlXAjSlHhv<<^++
zrft{8>Rx+y5$fi278Z452_w_~Ccf=NyQ1;RJ5SzdM9Hsx=Ark%=<4pKt~twxue&b4
ztStY!(~7F9icXWFdzu_os-}wOK3BFm!|uwqm~F6Bz|a2){A!w&;1N4@y?m2rf0h*O
zGJ9gl2T*EI)Ee0d;9`Wx)kHo5p1fGPZ89!l5pjuL-v0d+gLvFi#-IKefixu}?Q^st
zlRrUvtWjF3;zd7-#y)eoKJzw+?~y?BP8U5^W*z0-LS;>8K~Tbi>>8{^fCb0Qe4|BE
zz!$k6%MR^m&Bqd;&f$)8<QMYg*zS4S^LAU~ZEwA`&*j?p!3XFIjXW|3G4hWI$y2W1
zf`s52(Zay2Ltl;}@}Spy&`W5WoGW_av&`7tageL2!*4yuxe3So|7`fr$L^2+v+h5h
z>kqCw=y~(thJ!rB^CRU&(UFHJzdb*K`$gD^_!#kW?7%|q{O@8Hi@-!I`FSEP;oq9Y
zyV_VjaBbbfQh7*jDX(m)M^<#6v&xZIp_&uC%00TOy_UE3Z_(P?3RM|-_H=t8$9FP$
zmf4tYP6?`W^)}~JhlOi<%HU!uqyHuPBqB==o$}^#ultk5?t|DjTg%S}&1ZPFdZpk?
zu?zj6;FNxmPc{Of;aJ!!GHdd4YHEz&CeIHWxXzQ07y;Yr`FWBvbf&a}xFt#3KfKcR
z3XWXFGY5oJ1jY!2JX94Xq^L6aZuf^KO<kos-NLtuv45`JMNg6j?ZA_mLoiZ!*$c~l
zdON#!^R?G(a-Y589A$?Pk8JgvK}G2S|8}wmVvI4)^zDOQ_fKxmDad!icvATg*^^$$
zLcR<n>qkK^X~%zo!5?X`K(VfI|18AdX-}Ep9wZ%kBa)gU_UOeynbT^aVah%t?STp$
zv|hF74*!Gy-#=(ST*2VoHv|U6m4RXUE*^H0&>PC*n1z{#)@BHN&k#%SXDaK_OJ3J^
zd~56Ref{*ie{kv2!C6a}+Gi!ytZi*uQ-ileTi4dO2iw~Rsd&ca(O<5mwxJ)i>j_%Y
z!2w7CT5a?4&^r%%BM8J!6aUVA_f}7{`)9XjE|e20igAF+5IegxW+8a?H{u6>)8=;O
zkFIgol@zpOxOtkgggE=`=Dzf%yt9A>e^~}tp7l~NWBi~O_TpI2#j_q3S&Kx0GN!PG
zpkB5HJo}sR1L<Y-WqgGno3B6PhXZgb8C)b2B7T5~t5~NJFMb3U1Rw6cTe{K91lUcY
zKOXfd7EQ8i@Y;U=w|#ouXRhDAef^ndw&CYYDf*wY`+8@0<mKh(D>CfueT0Y{QbRM~
zkhZ$VPnm{?xG)75{BL}*lqeUtC|V%TfUD|;{wbIgK@G$OIRP&DDd4i<yN`c`q^S9$
z_$@|D9usY7@U{f9&PYteYJP^6dfol}ih(JO3C#+EW<bXRh*$JV<iDsz292^y86x(7
zp$%kreP1@R_!62a2#Khw4X+gY^4sPduOEqYIh8jiB1iPcH+=DhH_dIuXj!#*W1@7<
zvaextj&8xbaQE7Ci?HX)QU#pku_MRD0C%aYug~RlMUKQAH%GjtvFHo!vN@$ygu1$H
zbcK>l_qAegy1}z)*|_k8$o3qSNjp=%D!78V7`x-xPYTTcrE$O<c?jH5*4^+FX&gv%
zu~Y8jly8~kw;R3gf+z2tArX)U<s+Bt>zVTb6&dH_81-<{bq8MX!B{vbI%mOm!%CEO
zcJHo=+O=b^xOW_L><K4S)YTm@bUV5R#t*;n0*|{ZFDEAtv{u2|#0&4*;)@j=of$25
zIVk){F*uIHCbw4WXwGo<+TCU4wOtow=@TQ}jg6k0Jy@Q+5t&&OUpP{O98YIw2U0wr
z+2@Kj#s2tXW3Tic<;<g14EC{T^*45l$Wyt?C#cOG9nEJx%WHxC^3lOrqa7uMMWz3v
z)w}R75ND2_vew2@SFE+Y-y-m>wQY#gTadRz^HKh?=z8mo*81pW3;M#+;&#QRh4tMq
zIRAyQ7Z#&<o|WV`GSbsC-ncVfr;ERn-WopqHvOOjG&4{(W~x|Ym%%sludyA<8k^Gn
zlr{Em4ZceilO3Pfkd%>^5*HDdrI+=#m}p~3VM<+mLhhq8NX4tOBBQw!8m`j^a~`7~
z2#;1p$3}#5p78C=f}-RDm4G`~QIoeNf)L7z`i)0NF53{}E{_W}=SS=jlX*i$jVnFf
za}w-$KJ2)|YgK3t@Z0h98GJYCefKZF%;3L~J)iVcrucBAFDoUu%R*mfTt)NO+&iaw
zJyY=!W}$a0rH1KvklHK$(Ma>dZcl{Q`ydRy*@`?6XcEo+O2!m4TkyyslZ$-l`H{;m
z8+jg+Q?zG*-!^`D-xE)e?E31HR}QYmp#__=yr!qt@Y-j652m|Z>46VR#8s(W(CVGp
zX@%{}bK)Pn$A1XObrQV|%y$wqp)^}O|2wN|*?sktd0yZ;YOaShBY%smnVPH_u18@B
zkv9Qvq#b99MW%O##9LGU|GazSrQ%C^4}m|3R`DLf8sc;ov@AkcR6Y4$Vg>XYwsbE4
z)8jKJ&99nKw5#}i)UJ|W5F3#HL;fY!wWvkfj_e#<BU0$SK00%w1C;-vObqzew8F>k
zIrL2V+N13I(&K>x6lj%>8$TJfunw1QM<f@!Lf9drua!)Otu+pVsRRq{fSjN>L;mip
zYGdxew)Vy6b{ng*cYFTp=r1T;=4xM7TF_tQPIj-X=|6daW8~_!H7jxD=B^XFXP?l}
zaKh~F6I~qERQVER1}LMrB{D_xB%4gpN^CD8n^%vIr=VSZ90Gc2c4KnH9bxgwCHdLT
ztmr#55wX#h@xw1w-5qIkSoy<ADX!$od{2WeF&zG3t%o+|D2EhZSEmd=kwY4oiAuXO
z<h4kheQj=wInCpA|3fP6ZJ=10Im5-j^+YK7tk@+(+#wTuDW3E~oN<94bD7MOaySjP
zjDWAK(WmCJx;EEk4^;Egw)D!CP4=OVgtD~7dAaqL+(r}Tjn3@sPKUXpDZVtZe^FHF
z{2E7JX_ziFrzzJtke`r~+?-yJm~YH;#`7M|%{AFsHJ13C<kr-DFpRPTzQ&j5=}S)2
z-YLb@NimRs0plHmwAVPO>^P1t$(>bGJu7z!ZEkG5Va}ZEH(`Up{pZt1cQrQd8a*A!
zPGWzM)9xl&D$Mn8w@R@m_~70uTYgNF6yb^~$i^<7vg*qR6-Ly<egZ{g6hWak<!C60
z8bp9KCPP*Jwv~ld$;R6Jj@e-&+S4|*FLzpJxfU#z`RN_UtSw8l7g^Jt#_l%t^5cu=
zR+siP*&NHWAS+6KfCH@{;6l+K<%4Kq@hwPGoSc9bH6=>JJa_BPpkeiJV_tW`ye@n=
zbD*`grByQ$dhE)!<z)kXv&R~@My(rC*Ow)f7qm9Gi>jUFrTOaK#rcDk4SkW(p@{4+
zz`H{dOU17e!H;lAYl*3Z_R9<w13tsbPxV~L7mp4Nd2ZtTl5YN<C)0h&VF)?6gE69~
zu-`T{dLW_(7Cpi_vd;+upLkivn%ba|;Mt8GLpE1&VXtm9pP%h{)EE_2(wxz{x~gtt
zRMAMKx~h6sM^Srbb_PGk?fEGxEz3~5uC;Yt4d|p6iBoC#Ccf8m7OL$1CTL&=#Z(!I
z<z>AaDpTrL^~_&x7|~W%4lR|V!<>DN77-+C8O~_RE$Fn{+M?ReUOIHimd3dq!P!Oo
zE>c;m)A3qK_l9csa8F^I4Pgz0$Iy4OJX-XfR`nzqV45L9GTc?Qp~o}Ej|^`rUHi_9
zbKKoyPyOF^(pb{9Vo;ufH;hVrv|}G(ic70e;wxVHR-8}0Z)*k{K0L2;TjOY_RNYZN
z*4(_T%vB?G&1u}))iZZsc*s4sr=hK-sj;;!s$gDo*V5=1T~|Zdki#)l*3hMkiC)^(
zJg>lA-&oVpQPWt@=a!c{s;V62*g%`)YpR#8UKylqj(|5VAnn*%oP6a%?EG`%(7Kp8
z+PdQ5`P`7Oyt#R0b=|tQ;SHt9bt~!$T{*V4qQaI8TT|5R28}iIoGVm~?KSINU}*mZ
zONK98SHoK~+8l*lb_zMRXTlG`EFnjLQ(^FxlIeR>_ym`t0^oqt4AP)<N{G}^6erUc
zI)y!_gc(?+D_dvHYHgi0*pe7?LRj9hYIUAHF{ZHdl(F*iu~Ry`PNw6@7p<N*Z`G=K
z^Hx{so;T&Sv^7L!#J09Xc=V{#)v46!?7}nPjgOuXvP9`H7qowFaO$Twd|pFgu04K%
zc3M+c^4*!aMcgxZ6zTxnX%zWQH<eiE+YaKD7K*#!t7FQFTdl#j2I8hSn8ZULNlMMK
z7dKVZwW{latk!sIXso{2o*jPDbRsHZvZ7++oCQTS&E>MylANed(1)eO7uURg6j_r!
z&cfFZyxg}PO%#~mjR(MHX;P1-@9L^PYmw1XS6k7bu9Hk@##D21LPAc4Ej`mB)k#TJ
z`O~PpsMcvJ)`n)7^DC?Ds+g42xP-)VOG>gSHC|3DO1}0eQlVGA(Fw&0&P3x=f>j$9
zZw80WiC5yM3CC>>rKL6d?^(MxYFg7*j#Pa0gQMb{b3Bh6-O40KQW?ypUmi71w57pP
zC4di@-KRHtX?<5!O}tGTcIE5I)mlrk#gv85y<@;yE2mL$QA=%EXGFx3ii6PxyD>c@
zE?zDyIl9}Ey-vW+cts#Zf|fYtI~Am!PICq(ErmYKbi%H$9q6t|%L|hWY^iDLny`wh
zvgWkj`gCj+#8~4pGqaCUo3{Gq#`x&cDnp#QprCqb_0VXAJw4tWooP+CzjqYlCi$kN
z88lrOO4vyxC>+J4m33)lHqS5jr8|-w)3|bF^R|^m_KJd48~=S&69M)j4*Mthln0`W
zk6&WJ1(-2~7qqw+8y7Z_L8_b|B_&t2x^gT@#=4s7dSj9`yQ3vNJ3BoiD=Q-<EiDDb
zG>yQEDoZTR$WWU#zqB;pY750z<Vz|mQc_ZEHvGCjDJeD~AvP(=v-~LXj~Yp?Z0sZa
zBP_2?BQosB{%MM0HJC&xk*T=!DC2WA4W%(JbjncnG-PCRgC!m#X_-c{l;a!9*w~|o
z(j!l&RPom3D2j~BSgA9O)WZ%;%$)(=%M)jW_pxthg!f}9FcY2uc6dg(n|(DSd=~q3
zM))A!DxWt4owM0D6LY=tgMMMQvEi@hAg&cOO;2n^<n~dH4JP=QR7vms-k;x9Q^pFz
z66YJe(vs2)ez~9Lr;JrpU}C9R-Itr&x4Ncgb#HEN?`l_lPg-+XRYh2hIxW>!Acy7|
zE4l}2Y}uKa@fHKm)=nP;mw0#;J-iA?`f~Y~qeIZbf&%OVR+UD_H#XO|K_RV~(dPJc
zJFKJ6i>5tSSVt%J)@Kf+kjF+kvX`e1cn&O{(V-rZ^y6Qy{8g`7<d|?}KcAu`P;?}&
z_<U=;E%Tn@ULz3TbFeW3l3!E+?*IOKzV^P&wY8i3`Zw3qZ0?_hANSzkbRYkWef!QJ
z4_{(i;8-g;Ye&<vg`e`-Us}l351<7SQi%uiK#Q7tCTM+{4cc<V^~4dn#{3T-4y#QG
zf9wg@6~Y^(Ywn@zGF;PYK`lulQ<Jg~jiSCBL-!MLKSSJCeLJ;&kWzo*2w%YWNTgfL
z^AMhZm&xwsy8%IbK|p|$7mGUBT2boYsXPJc_d>9$;iddfcxu4+6zWt82o@X)9za~;
zsaZZecq(4BH3-PVXgw8m>O>vv>3bd$qa~igmyxi}|ATsP|L=%7-}9S73_3DF`vUxp
zBQ^1bxWXI7_Yc&>6>-0j7mNGgiMU_M^Tahcg6mM;$V({}L;Mi+D|w~31~<IdE>R!6
z5YIPo#Bxy|oWOM|+OHG$!3W|3u2KL0DHo&{f0GONz5}c--w0`v8M8o-pXQ(UdSWTc
zK@@|mBlNZfaRh%UxdMNwi)?fsf7~Y{$hANEe!usA=EM;h9K`eBpm?6*R~o5bQY+5`
z|I;%(KfurT-~UNG4~~oHJH_(@0qsxB@VtBSzO0(z{_KGJr8D54&42Jov)l;YWJnlM
z(f+V#f3_t1`+r2-$B2siunOqkY`)+7{9b6D&8vCC#L<b%pm|2G<`E=w;xcF+)gjGO
z>g<K)5rj04Afc#J%F_TL%~PJ*3uz$;X`T<_5>JulDR?e}=22Uuc_YA+I<Xg;N0>?T
zhK1(sg}&PUpUND!{kF_u)v9Qoc+&-8nO}R?MPqZuJ>D`%>#kX?_PqQYdtQ+)?YuNz
z>0f7IW!m1-TG!1TUlu`-eLAeXDT076)_4xx<^}Qg+(O>y;YGQbp5v)rCUlo16LCvD
zt+SO746Tmf;3@u_1_2lYQZd4_?Zx`oP^^NiL3QfZx{9V^dsb@FBfK%YrZ_$&3`?HG
zWQ$cUZ>}jSaK^<(WyMg8CkB0lwV*G5P$D1Jm$5_*QXh_vzF_4Ej|{)BDy~YB>Lg2M
zx-BCoAtBkEYD_apb?SzS+B%D|$lAv%lZ(>i_*7GJilsa;Aucr~MrE(6%r|F*YKu+I
zS}2syE+GnqsEZ!U7ALk?5p}USN*=yve@$uW9cy{xh~tN^Dn|C6BX}X~7Da17X#k<%
z2DW1i7LAW3x0Sbo1@uRyOjvJdtCL^9GE8fWuc_+dl_iC8d|XDl(Qb%7Sg|A`qO+{F
zg{YZo)r6Z#435)?D4-v;5?3L20oh0U>w2fSFkyLVJ{Km=8pH9|VJm$i7H62jLm}=9
zTT5{iF}{>$05@wS$&r2^SJ}$actiEZRRtCHqLtg4Vf(zc7;#nd_PrA6-L_LcA0WoZ
zPbK;N0r7*swsd4$lZ^G%HFd@$OOC6R+<J2Fy{<j4gfCwfG3m=k;%{rr;L9JyuRrD!
z{@z^pd$Ry#2HQi-(k0*oa%L!pj$TgUHNls9uHjD4v+H=N=NVqr-R=3Bm(jWB85&zW
zrG6GqiFdftIla<^M}w^XM}E3RJ%T@utvtb_y5R<kr&Jq{dJ2C$!`IL_jP|sr@I4Dy
z*30p&Ud&Tij2rA5Hf(_G+9#F>C?fT7U@1O{n_uAAP<7d58y4S8b1cm_FYupW!RI05
zqmkyZ0)9Hd@f^Wz3Ix8@eC3;fATScGpuVu^^XT10dX8_z5%FXEz6KUw?1(uL20)V(
ztEIiA0a>FS4ARI$8(y$18q56TlgzP2mKQ)KJvT8A&smk{;^5O`BOZ|@q)HepjcSeT
zlr=%iHf*?BJR_c#p4@=v&}(`V7(OET*$Cr^P_eL60h<jlR7Ak%xy81uh~{cn4?cok
zx4ON4aamGXPG-v3hG*Jl8ROHlQj429+tdwX6~&`fFkZ=t6(!Fo^wBrLWT{wb$Co=m
zAtMK63Sxai#*6+Yk{*fgJXpb;l{|<RGb7PruZCJwZMeF4Zl%CnSv;*t>2<UO&ePwM
zzMQYX97G&GLSx9D!{5lg7QQ+|Tw%&y{AHG+q@*H?`2AdRVVbcpIl0i7R+vmS+>XBu
zeG)9J4iaml!N+vrjKj{0B~D}eb8+ML?Ty6^jm1sdw>K3x@*U=}x-s*rRpPLc#>9@l
zsoKB~LZXm~q{qIq1I1oDcTPp^=m<}E8b3@m@dKLrQ20l_zaxen)^w*y6NICT<LA5E
zc6%Pz^82)&EjaC_GxDFFXlZ$Zj(mSh3t8ET^Z6ChVUpiC_*t3U*6Vp|t;jN(dN+vN
zuq$x07k7zcI&kSEzJjE1;$wwlSUB9uHba`c@A)e;*6LKVITa<?l9XhjA~XPX58zLD
zWk~CU2CRby?D1-V0-p~TP$T)^_K72q)6G;L<730`2XVxGz8y!3y`XKO0dW|w01XHT
zeYm}vkme;QKp$T7(<X4u11`Jp1DIYY1YWCvZV0od#3bCL8iQ(0k{1`B?N_cNQ*j;f
zY6@oD-_(=<LVrzTa=eZGy577pwQbU#DrgVd=F>FB7wIN#3hWqfo~k@vb<IllHO^N}
zQ=v)SnrvNY)PM0e)7L?xXvBUd2rq$-U9adEFF^*)FZg@C$MbbGjuS77I%b~FuI9H0
z$Pb+UE}EVFg1?8`K@v)Pxpv<1OAr0MB0F+#EP?PJ$6?3?T%I2QmmOaC#9a~xB_!zr
z&uiV@`Y*`od^fFk)5#-J902bp(Xe%i9RS)Hkoqm<Wfp6%F~7ecJGZSl-7?FWnV+7J
zQe0-qE?xCP<o`$Bo4`j^Wc%Z{ZYQ14*>^~K3t0(CNIIRB0NDdcNJ2n%fsh0Ugn%I+
zBBP9>=&0j3j?Wbx+)x>3L}%R4Q9;BF5fK#~MJ6(+7?CALgrxibJ?Gw=?kp(2H}mHA
zKL1qu+*(dmo!ZW=I#suhF(fo1C1w1m)Q}OT&<O9K1nYRa9rUDNgy}HCuuhEt7r{v<
zu&sz^Z@8iI%7O{4?|yn{-@y--eb@rb0Ou{zKUGYeTFSI1WMK9+yK+Lom6bQNwtTqk
zgM<4HeM&qg#rYet2ADCtx1uQX!dES%){DM<h}YwmWW84yCI>Vl2ovLL<_u4bj!qpu
zrzWSSxF~f@VR6l>1yxf=kF!p-jvGC-YC*LwDRXY+R3BlOUOCsEBvVZWAeWg+E)g-A
z;hcJQCRiZ}=rD=p)Wb8vNSK2B%5!Rq3df`t71id{&Q`LUy{cMHvd^uYZV*0GE9Yh=
z>8ktXN@bag`l&)L;C8t63T!ecLsXqOv3WE2Oj&Q5S}#ro180gz$`TZ?dGm?ZGI?Ja
zPD27C8Mi6gb(whMOA$ISz>v?Md1lHp&$N-kV@HYuudDtzF*raG@(W;0(Qp)u9b&vL
zm-g2^@kut?2?}41i{NV~=+=I4^a!WXhY>;T6CIR%?X@C!!oed)Kj^uR)4;d=vvqky
zNjA=1#{?yd)I(p(HPyXzn_{x_PBB}2NueSr8s!kP9s3W7FMFS;mPrpimE-RyN4&g|
zx!Xo)ZBV$I;!nE0QA<R<P+%+<!g0TQSsckqxs@`tiaEMEuHA$nyoZ7!M8dfr?4N#i
zONSiuS?+F!33Dc*tPd{&H>lyA6|}(q*{Aj&ZpnQ^e7-yPv))hnz5f+bqtby6rF`_w
zQ)W!E81vh;wZHxBD|yOhM@^!5qL%sSonnqSreG`Ojew9W3|bK#?=reL*8BKo@kFAd
zM#0}9GP(Zo&Q)7L*)q(=XWN-{66o3jJO1uc8f073TaEbdImmgr#Z}t|q{Z<3m>Ox=
z&b#i)%*ariDp8l%_*PTnTU_TnSA+axKFdEacN0aJYbC(_5Ne<Okwc1jLll!di`Oso
zKF111dE8BtyAKJ-AJ7z!en>e58n$VjPAP4XF9J`SF9|#`e#INoy_}X5;+BLGTZxHq
zd^xSgpcz*c^lX2k<Q^B3KzVyA4`Eq+<Bf|S6KnWU^+3e~ufI+J=_DZ55yVQ6@1c9k
zQI>noDZR7`y5}i1Nli;lgkulD$R?FQVP46PJ%$XbIBn{aDbO#T0vbJdZk~{dLr|DD
zdKHGw)X&w=3>7bIuXS__L+y4h?+em3z(v1TG(?OGoEb<M2&Mg4hd2m%2%i?iESkPa
z&&rC3P)?lT00hna^9zg?UAlK=@r-#<7M;zjsw7HGsxU^0mv94wm}H7_&{YuP4IIy+
zZ>=7Zt8{VvMWKnLcj%<*ngz;+z^h#MON7t~5^V`Q_ruGsN~%Z`vzvdp^3g}jrqoP)
z^rFhmzoZWhe<|-?G=FqSynaqK&OwjQ&Kd7mq}$N5K^)J`%o>YQVAbKaeu%-cLwH8x
z!_*@yutv#R;doQ`>Ny9kAhKyik*KXX+*T?>#L=66*g|WS{&8GuBGT|7INq?4-#2;R
zeP*YY8<s_m`;~a~&U3Aac#S}-A|axOSR0+|P{{?An?1jEEqIs&$LqXY@&v!=qWuxf
zj_F>fu~H5Afim@vP|o#wVbV-*Bd+cYH~YX1sDT>}ANl4^wb`cT`c4cgNl7UQGKHB;
zVWB3|v+DDgKe5s9mc4S+s7iZ!Mn?JpL^K*hIU+wD7yaZe1N!I?W#gHFb^!!#!gnjr
z&ncUDAbW1Ucd74`%*-jiW!~fFZu*&pdmw#Umc69Jo;5AK=f6`p^iyvP-dcGgS}qvl
z0tI2kPG}~&KQ}H~*PN7{og_9AbSxHs{GiXVE-8CGzH*~4rEk$)jL}?z+Y=;D?a+j4
z;fJYZLiV8BD@ks}>ov?CumQuXH(tI$dO-pxZBs^GYik|9>VX*rm)^hdl1JvIP0LOl
zs|)b87sZU7l9V~WAhXh7@R}4TJckd@$Sb>cVcm5LGfS_Ym(`s7H`@eDL`G7|IBR-I
zSlC7PU$W?t%Zq1jUS7MdG%MA^WHY7KWfiv;j)^y1ygxiAIDB}^yo;|Y&RKlZjEjF&
z5*BiE`s7hDxzV^W(q4uULwhwd(Zi#q(e&LlR-e2Epgnf#)x<?`W`S-K^umE*KBkq8
z2g(?tt%hL_7aoh&M2^dhum)W`C9@)-r1t*UX(G;aQB$0$X?#XW(6+49;@tSu(8Sop
zWW$KShB>L_MRDfLEX(8>aV2AN=VZQPTjZU;GG=j#F}ikm@S(V}F}8fsHhfg_h}ig~
z_|SwT;;&%YB=N<2Gdf6Htm5qlBSK4;<mEM&9H}i4w)8pUp-~J+1=sarf`Qv1oiF1%
z=MPZ6iCjWW%tq~zz$I0LO<Z7AHpbIezOO|Q4$|f1Zp{}ijKz()o-@453R3M6g*7Ep
z<I_@8Q|)ud<<H6Sn(jR@*OF$;oK!s<a;T)ltc$H<vTc>|Q7J}KdBK<|8MwYPcx1RG
zH83DCCqB6#G&DD6Olf>#RhB;07Hkc*#Ds<<=cgoQ2ZiRRLQ|T^8I1!5Az^sWkH+eo
zzGLpv1)xN<zsY5yQc%}a4$KT>Hts8XxAIZH#H=3&Z0_yjHp)4f$zvDOj^yI8W0%yV
zq|_{#Fm|rpK6k9G#^zD2&l?q+YqjRa8poJDsy#EN(4MAt2xl@SRGU%*O%Kf!Q+ZZp
z)sM#|HTY)HGd?|L!l+RNu{bQ~Ii?~BZ?P2VFLE`PB?h<Y(8-5Ed$s*WPI!X)mZJ_C
z6UJg@66}icxeb*`NtF$`xeMvJFt=bqcJ_jTg8J<2`jm#e!jYEA6G~I@)wb1?@t4tr
zr{OnLj?Nw1Fm~+1yu5{DVJQ|#X`?O4-s@MdeqaQ;_W&wW>8$33Qi&rq7e-<fNG!}7
zeZlmlCac7Om(LZ8b+{`D^IzrkD5L`dvuFBtUOPKVGXS#76E<XD7QQZPgQGbAF%dN;
zPk85v#bUnWWl`X`4_AcTFA{Qc93R2wKKfz&B#XPm60{KS=R!)|PfFx2m3?#c#L<2K
zG3mCEBW*TuS5kRO%EVElCZ?p6CsmAzi%(07j~hd?uSC%y;Z!jCGfRLHQ!mOE9Y>B}
zMu!j)hmd&rNuJL=xsLF$hJwUGk>a2vb4f-+D<k?^Tniy-63uluytY={KxbqfUfNgX
zNT!o>1YQQ=Vb0Z4dqUu%C<u#oS5?vIg50tX3o8J^qc1LmhU-|V;6GMXB_a_;xiy4N
z2J0|uCJi%m-jZ&D5r_&Mtaz{XO%mMeOFk)v_e|9kw7xaqb}@YC<)*WB%iycVWXwm(
z@rBA7NZLoBN7AwqXL=d-bBL-v&zjATKW=usyXRSp<?+WY<)R|pe0yYi<OBcgv++Cc
z1zilv!CK5cq3n+OOtcqiqQ-*MOWf=Dt+-^4NOD|WBR2l#hi6N0U*;vB2wm@cv8%+*
zj-Iw>sWt4NDi&1nEkCr1qkb4cD_X1+?`+DPZJL$Y^ve8`^F^|#aO@Llj;H@AMx>`Z
zzM$Bcmq33D-O&N5YXo8r!M&7MEU~Tw6Urudo?iit+|g^EtLU{Dq=g3Sf)r_rTr4j_
z&!!uZ67UX0$D~;hy#&?QU%#)j>0L)VW1jfw)ThYFTacT(AWwnu1qlfS@%WD~cr0gQ
zj<9ab*@*uf$4bEK`p|$}rl2bD7ug$guDK>>qlnJACVS(?>}yaH+0HHUc%2nBVaI!m
zdLc<}aElo6ZF(6gFE91A#TUj9eVUd|Q-!Ja(lY%_uQ4?_xDVPqeQNE3Q8|kzR<#y-
z&+<%~WG}2T*G!tRIC(<rY~8w^jTPgTmFevh<3^;%MB9==!_v#`d9!S}jRpFoqPX!k
z>u76m_}Cg7E_eb(bd$~FXr*ZMcF5ga=WCF^vb#iYP<q2qE8$ZU`mo4LJYKYHa?+^k
zWknMfl?BWWoSs)SJ2iE7(fFDEbA3yfI*P^bd>re<Lq37o4cAVYa$RF~UQ?mIa7xux
zbx`9yw@hEUeEhkJio2ArQ?k)h7J`Q1bPF3+Ph2UkZA6~C^j+-&88wEaHajC(SGM@A
zzfVbVUit9(5$hL}FV6At&UYLsZp!h}=gXrVE4&Qlc{wve8-`ymuBq_1gxCtl<qVs(
zIDOW*kdZzWjuk0Wb3&~?6&1e5pp<brW4!C?Q7?(;!nlV5Hoh-~WO-;gbyeo3_%%^n
z<v7((8}7P_3Vim}Un8z^HyYikI2`9@t>7#8!c3b;Vmzs*)$#Hp=ENWLY;=6EGizdO
z?8K~{J4@S2pl!EGjB(77{d-Tz{<uWYJT5so&s39safzaO_qD33zkr7+_ew#zAUGIy
zh3QR!j1&!_G2j6-b7nOOm}_}Vf5Bv(UR#Pg#{x@hr&~=gpt=%A8s*I1eWg?6-BU^(
z%fwx#=-%HD*T%b&Pf4R@GBUY|=o3iS5OeD;5nvFQZ$^jZ<cyQ$wtBz7>;?Ii3+!Hv
zex=FrxfXxlC%2?b5O>v$Y?v@C)PQ-WC1(~6osaRdrAOz+MT|?Vn6=zG13X;2_XF+V
zh4nGZRJnSz+dgKB-3~B($A{+@y^I?_ep_9AD>m3Z9dPSMqLc%PNjRqhNs#ij_K9k!
z7(bMQQ}ZKVXW43^ki=n84J_WhOBBxvN!e{nl%|Qj*y-Y3j%*PjblJiyQLM;z{4P5i
zj~m#kxarN4DA`4q9LX|yw1WG4L+ADm@kC<_e^pFQn-27I^oTunO)xH&YPNedO70O|
z;yHy9k~B~niDHk#F7}9J)zy1}M)}7fe;VI3laR8(ed!HJxc6)-+w{DGA1C|vc8M}2
z5?a_MSurmki8!d|ICMkLFdIGsXcN1w)1EXuIc*PieCYcOD`w%06&D9I&rDBooZFyH
z++^LebPwU8A7Yn}Q{yk1GmtYOD``@bak>>1E2mv=xPID$yqAQY#VK=)XuNte`=?Ls
zj65phA6)t%MN?{8!q@nAt)!ff+P;b6O-EO?qf5M5QLz;EtQV`RX-*<tfxRdrPJ8W_
zZh?$xztqa5>J*=gKSSp>wH6pM_)i#)d}C-vD2EQPi6<7sj5dcx1o=c7YbNH!r$k0Z
zg+xZxOzez`9TB0=%B)+2_6y0j*Dc}{i_j$bBt=4xMft%gwulFdwpE;^P;n*p-R`5h
zCN;B=@OUMzUAnfe-nSkh_!1M>V^BNJ*M;D=1Cm<c-Qo5IRnDIiYt+*MR$0*Tsub*6
z;h^{^2uHu)A5$|1|Kk_MCCx5QuSrdsoRwFf65DJ`g082@qet8A;*X=#(?^e<JTg2z
zYkpEqc4kfTg!~ElX*KC-wQ2T=<0e#Pq^H@(j!LtOv5BK{g|OQ!Dd8xCgqw5e3)c|5
z-*Lu45rk!AcoFNyWgMxgUTINgk3#RN;#99x$is@fCf!yM5iR2@+6q%t?_<TqG*1Wx
zSdCOXSx;>yDg&Rk=t6&3d8YT2c>dFBd2R1?)z#?C$k7+y78U^)eVXPWe2Nk5Z2d|(
ztEKwI+jRcb)jg+l{ynFFOWT{Y%A}cJCT<4DTO&jV?XpilEk1Gl>bd8{FQ(zv&;VTb
zb<%MX2Y{5X9$j}H@tlRPT1V7BJy*NE;a9a+T`3}<8KdVxanup13s%3A{Z9M?Z!aJ0
z$&5x@<233(oo_m7CO5$Wnn>JZop|Yt(B>OzM;<A<*p|7VV02kle8||vMaf0+(c?!K
zO`71Cam|8)z^afb?Z2PyI6QXQ#7RrXTGKL<eektZS?u(xl<}6CwKX_QrQ9As8U%E7
z2Vg`{L>P&)Fbot41}v;cpmy49cTEDfiS>VZ<N6`g36M<bjNFY~VY)?^&T?d+m%8yS
z_qi`_TpMyu><N+G?&29Uic6+XFByfu#H1wg;s6gv0iTo;t#dA#K701`i{^~a&&tZD
zpQCD!7mf+i4U%3&oyQ_K>c&dtbcg59rtp74xwvCMQF`|MjG~M`PvIb~LUYosYJ3_5
zCqahEXg&FE$Lo$aSv<PAPFVZScsMSRZ|!YC`=?0H$OZCSO02k`=xom*PrRkXNynrb
z@l5YGVt<|^b(eUqS~w;~i}&*AOGSz`Mm`N$yW7bV3=%PUK>B0)&Ymo&<5-?@p*&oP
zh0A~=aJ7x_5_#^aPZQ77I3~#<j?_G{pX0cdN`zsSgJo?{49bN=Fd{3lu1;*xM8Wb5
z6lq{SabD57>>v~=LAF<8zEUl2L?QB~p>)Vd>_YMK29<~<&2jjKRJ`Y&_!w0_U8j`B
zt>&^5g5n~gQJC!Y?g{Uz#!R5v(VmBzquVG@Z@SOadgE_Al~X&!VEVF@a|hJo_WmSj
z$9WdiIZnCgLE6sw^4+>1u3b($1gkf6f|wxBOxQ#SHXKvj8pJKO@a&U?i{JLP$hU4^
zq0-R%sC+Be&Q_ekc^hvNoKmCJk-B>v!@^MIHOCX`gly3snx5e89cBtm@U8PoFNqm5
zUhf$>A~Z3i#9XtZ^MkD+X`?gK;zlMFClu!<j)@<cXwS{MzJa)Ciu4D$O^!o;dfG*f
zLt^N{G=UcNJ6?9YUA;`)xZ}S29Gk>O$GS~4s~H?8Bm!G+8D4m6it*y*Rn^tcIoc6R
z6y5iV*m$g(%d!S*hC6XTHO;SpsLiIy%HmF(yGy{f6LR@TBqY*0E|F~GAs=ekxb)$N
zmOb2E9g`m$mmgD|Gk@&Z`PmyD-ty3(l(jV^8do`mAD)5RrD%`IOAH&=ICgB~IFaD^
zD4{SuzA!-~eD=u0%N}~TJDU>BLGp32NPfd34{dpvQ>Ht(=b>%AX=V;egG55M9O1ZF
zeCOD>bBDOK&Jih$_mQlI2528{1}-BGi}nnOxUvqI7vtQ^4so<@Evkbtm+;NroN5Rm
zVw`wgDIRe6h;=)6;5vzxI=rrqAXzotR{2$h25<_{;FaJhwm7a8uO-|kipu4*>fWo$
zcZz{2<Ev93$LSK}h&rVFfa9Q`v?J@*I$q?I@gCQC%kQGq{Ych=kq{GvPx3MnyfTjN
z7nh66_Bnc<UbJK9Vlh)(=D61JNVS-`V~0XhuxOQ^MvmCw6LHxj^bxI&m+l)?hq>;K
z-nsI;-us!JefTE&Efo*_3j9D0>^ST26o1OY{RQuS9^sh4RwdPU<agyj1v@SzA`Uep
z2WZK?BMOncf~QBSR9@O&%m&x=5+b!PDRakJan3O{PyC4~aHBNND}gSI60Mu>TU%Fm
z0PXiV$Yd-}q)0YO(Tmm#=o)7u#8yz5XBvK12(mEde$W`AU}h&|dxBYgt0c6aQ)QfY
zklLFHPDnxov8Pfk4YBWRgkw60qtmh}(o?!H@jdNuA}u5p0g2D?9Xmzi&K-`sp1SY8
zwQKRCc~pw?Yn*j?k1$aR6e1hrO{`Ec9@C;QW|z)_*$w7+F4=(kIp>zzUoXzhUHt1>
z_34}4u(5W^wGG*{=&#+_kWJJ>!mY$l7@WdD`L-CCVr^mT)YR0et%U_E=(%E04&}+U
z%L@uyYm<{}fwa69XD0$t51z>LpWG9}Fe{72esl(Q{feXtX^J#US^zENE2T?O_5_lf
z>pgiRAp+cx&h18E6Q7@P@wnnIJVM~83UNh|pgpvw!Yi{hCq03bMMq2ob|mmItQe4_
zl0}64M21hW_qb3;pxK!26XEweLx^{=KEQi>NNiA~zbU}+iuXjFhe!%A1^5TYI(C-p
z1B&&-#B)*pQ9g+Q(T;`VLZdPaAyu#k!B3nk@*F0Y>m9Rz9TH#?7wbIAy&d2AnFD;0
z;?4R%@3B51Ue_Y0c(buB!zbJ?(L6OIG85S*1Vjg#{33mJc?|O^_Vm_$6c;N3P5zE|
zC+g%f(D0C7d~}qb+0k6A_xH{>1c~E`<|w34mhThfRpjOGSQq7Q^7o4uHvoI0&hZaK
z4nP{gNUI!acKDC*8698^Dxw01L~?(Y#8LTba3GqQlUNZqu3>>1a&+s~8IL}?_|Zpa
zY~6}8g+-1R9WQE6^hDw><(L^^U|};jRNN`<;t3(ilbw*7zfK_$L1M1FTgY!XHld%B
z^Z@traU5N=(CacBi_|z_PA6`x<2aCy%73S;uyHZ4XhbTmoUnF7UUAV%cD>W(kq%t6
z+nZO7(+DK3*75}&a`udiL*~8Li8mbCOu`pm90eC}qXKxk=wUi01gC%l>7oPVyw(wm
z1d*bPDqw;xU67|jS~XH6>Uy6NZy)6opz<7?*7&;&{WXxRL)t1g2^&r&u!JH65?Vgr
zJ9GL>xoIK(P=COXu4W8KH*ofsL)d?gv`79sV&b$zM#M(C*niH34IDBZAtb?Nxqfod
zyxH>f4I8kAPL`)Dn)PtwBWC1)zrqs|1o0X)u=ec)*q|y+yas&AeYzNrTxh+UjT?%v
z-c6o8Z+2N_V5L0$nrj*x2jD1|7{w$LLfPzj^4}X9ub~{0m2&f`7OZ=<O>VvZ+5V~x
z=D2AzNR|tvBk~zu&760Ya9u)XW&-_!hYt_NPcBfL37Ix_!%xe9vHUT~>9O+BCQvM7
zRwq!n8%%hHj0_424G4~a#4HnE3<d>;`-X(-?D&vpVSt~%?}*sEv4Q@6K2dSG_}YL<
zb&1H4Nvgw=r)1$PUovr`nxFIl?rFuFBt$vElRPdjJ64`k*IYlFVnTP%1J1W7Ts^y;
zoE_UZ?nM3UI#s78hohf>e8!IzL710C03Y;&-;sC_`))K>QszzfrRDi#3^R|2G#b;4
z@dYE($CzxNq(p~?hlYiOj4<b?%IOKlB&9Z>MfWr8%!hGmSO;d~%$B=s_Sd6raiQki
zm=Ir0llK1Dk*0CR#Nf0@v#+l|E6XOj){A`ch}fXjz<O*c<U=JNLPF&b`31Q_3kj7U
zkwa?nDHX|35`{nZp19Vs!xE2*#G<uD9O677zT#VTB;}m&WfL9O2Fj_u`<1*han9&h
zT8it%5|K&sP)acZ{6nXN#6hlR7ZFvPt0)9=^3}>%P*VJ1n!_tlKH3X`5skiu_zI0=
z4X9W5b!dj$8gp(~R8$y#e^8(D!l;OFqcJ=pN_!$7q$J(QDfLT7i|dNRqfi<1xP??X
z3#N{6J#<&AJc36y?k-i`%6Nt*OwCQB7`lwzMzK1&X{<skTpym|4%X5o-h*)P9>!P3
zmtF_X$?iFV#)w{re!*^~cjL|@#SPtv)CZvzQFSZ52pXAGe5E#_FG_QBo#=J3+=ny7
z0e3EwVV-Ii2Tq+rPTEeSp7$GZOC~U{MQwtcswcVpXZnc)TdJzIP+hCHSqwF|aeW}H
z?4%F+;FnrmJyk@z_k(6fgXT7_6o>xgcu)?5J}E}w@mHt|2JQF*z^GU4Ay}8{ReLDv
z)}Y$MU<+04;g}nlReJ>LBvrK!N59Qb?IXaU$E)^8aM@DT9);BFRJ#%TlrvSk32PbR
z-9(5PcZJc(V6t04&pOp^1r1lI_GrvGuT$+KvA6O&)gA+SHmi2}!s8*;9*2ClsrGo_
zJdLp_JTPySwm@&YVi)*Yi}q~DUzYsEGS#k=(!^z|-9w5LkE(W0*k4iYde}cz?cUPO
zm^~}$43ief*Q$0ODNX)Dwfnl+{lrLUk5};hr7VwJ)jq;S4=TggV};@`3{tSi<*MCB
zGI;z(wfn+;yK47?{XW(15BncgdjRZDsrEoA)Z-=99wdc(yr<f6C#uI+sy#&V_He59
zP$|^YOSOl=9;MpDC95ah28wzU5t6~PMzs%@!aZlH_7Sf7#CNNGbtR%CUr()EMrpXG
zRxXni==pm!F76KWd_c8ZByUfRW-Dl*nF{3_Ed_i2UA2#t%%0z<_87^a_fhS!Qn)@$
zwZ}=m`q8RA9yr-Enwl3cX`i;FxwX8hc~yG~*-F>8x7AmXzvAa|yLqy;u4(b=mijgY
zO?6CeYHVJ;T=7!uQ=67I7p-V%RQxoT%ZF^7hs&$aS=3VBuuO@_)=BO4EzJ#eE0)){
zO2yI&EJQAo+N5S_F%~85k`>z~Y53V;n+BgIJj(%_rBxhS3)~gbQus8myAU7Kw*zkl
z{8s@tkyB|$s;h7WXAI0@#3hW?(n1XQ24F6S?;51g23HdXEa7N5q)3Z^(TW(UYRpk?
z`PTt&F;Z%g>Jd8~ICfB*j-}OfFo$BP3N{zDDe!a0cZFC7giHq>(cjE@TisH2#Tl4d
z5olP2c+2rq=%pH34Q52CB%>~rRFyK4yAXJd$mc7rsUp~@*6TTTGsh@L{AS>+0CpME
z)CNfHQ_ta(@oa|=h0lha{1?Nu4$q&a=cn`kvGl2TxVP&<<az$`kKx`!y@pDnw5Sya
zAXlJ$+p+W|+Np0T7%g~GJ+*R*jqqR1bw#aW1-{Y`r%IF1!d4tsS;@HWDOdGN!BzYH
z+mw2Y(yxcgSEHsLy|W(aQ7>BvNOWEbH_>5*ALUz!g*@5Y(aWua`aF#)Dvj2c`<E{j
zwa|uk8(5<k7HbAl)<$bJQlk1%s3m#|K`)JBm#wAGuddHFsn1s4XQLLOv3)7ppbk&1
z1*kQsN4EE2wjyjfYDO6|(@>6Pl+}HtXnv*ATEwGXO6{YR*d1@E@S!nXzLSwJjWMFZ
zJuP?tslZtdoFdTO0&I7@fnh`8XnrpGG#~er28R}LpJ|Ym^~=%aJBiy$=?zrJ%TY6}
zG=Jwm+$vyGZ2cj=@sJ=xdPB%UC%uM>|C8_#o)|EHmTtzWnRuxeSB^9az3`F}gtr(5
z29qc?;cfrA^rrCP?=t<cP6@#Ink4BA7X3jYScE{N5GIWl;dt{Vi{a89=-S*Xot56f
z_mq)%yQT=EFiELUU1-59)+(aKNU4LEt%wn^B2HQ);z8{`>0LDIdk`-sVkY%CW=a{-
zH(<({Vw6Y{qopj7EFF=~i4@$0Fh<H2X(C<NM23_j9T0ZueRQ1<uoaVq4Tv0(i*vPk
zA`f5O=ZkS*<oWnEXuR~im>>$IaiUN<3Rz6CC=sQiOq7d>ViN8=s1#M$E~>^Yk+ouq
zs1sAgG^jV6E@nW+I}6_q%@K3O#bTbAj~g87#X`{_8X?74gma2Z@GWME)GU@_wzdq-
zwp6r;<!FrMm<5(%fIEaFtq`sF+OAxz6hb<N^RX+%CFsnnM4NPpSS8xUYOw|^sY3bz
zU)-$~mx*<dGOw2^#V^Da=<pw+vDZkKiYuknVuSdlxC$%2$>M5pjo2tvi)+PoQjPev
zxL({KeU2Mqr-&QHZ^TW~TJc*9zssb{rS;M}akKcHbf5GK=?SpT<6x;5iCe_)#jVnG
z@n6sb+aqohw@bg4W{5jT8YS+=toRDCN!lR&Qo2&yBkmP{5Szt)kT}j3_lpO_gW@4+
z4o)R@iY?N1@vwMAx)^iPFT_^yNAZ~WllZfETx=6hh$qEg#9zfz;%V^=HlCgn+r{(v
zdgX88Me&k&8KVE4;uWz=yef8!*KpOy8{$pz7ET(xjT0*Gh<)N++@1a&KB;<Nd>}p)
z2gOI?WAS(CWoZXQO!r9liciHM@fps!`~zn*KgT-wpW>+aLVStub&iRzMW^^i92eh;
z6XK*eB~C;B{+;L+--|Qi2LVC2=n=ibA)GkbCvc-M?ns5s4880HEr-LPi^K=_F8bj<
z+W=@m48nc?A<(4~CWp%rINdk`8UUhj?!tsyW-YjTCt4mU$KZTn98O{+K*BvrPQr~o
z$#M$r`5A+Ihtg#m?vsT4M9z}4<s958oF|W!^W|~!czJ?cfIY|}ocSw}OXV`T9NGjX
zK`U3KTqRG&DdZY_GcZN2lc&nlpxt0P?h~GgJL+f4bL6@5#qvCPzPv!L$No`++=!b@
z7s-od+Cy0?FOyqvcWW!OSgw@rmM?+SI~1~waIETwL*f&Oy(S~}wpPjQkOi!fFO}Cq
z570XKa(TV{3+R!!Qr;l{Qoc(56}0YNBX5+i#r?Oxmams@kZ+WKBi|(dR=!#OoqP*!
z^1fC6FPtvBUA{xUQ@#uPy_@8F<a^~m$eW?-@_zXN`9b+1d@<Yw%}EbKZ+tgI9*@df
z<v&7$*Pn1(?&I<{`3d<+`7iQc<)@&-@)_u!dkz{IpNE{}Z}N-sOY+N-PTnE!lwXl|
z;mc>br_~I7HXhOg&;xY8^on$?<cB>VJtQ}{Zd`s1_s6^eeE@ICd*ruqm(Dx#KI}^D
z$7=CO=`T_d_6dBj;+rQez{;>dJ|Mr3o5ntr56U0OA43B9iTtU2Nd8PdEdK*qpI?PO
zp{KA)dq#Rx+A6&$y@WNJ0pF8#$e+tc<bTRX<uBwf<*#t6fYyN<p?&9i`IvO0^eg#m
zxl@`ieJNcf?UcWfkIUc6C#0*Tze!&5N!*WfTJDm+ldh3&!y5Bj=>)W3Sf$_M)S?9%
zvTv1sk1r4Fr3dkfyhYk1cT0CkcVY#3hx|QOr@L|c&JXfgXi4mmdu500gm_2jWSvgu
z0sU-xotMsAH%w>H`RIIgemZ|$fG$uMqzl%C=t6a2x^P{DZn$oQ^qekI7o{`mOggj9
zqO)SpdnClxvAQ^2ye>hPs2inA(v8+7>r!;7x-q&mUAoSOFU;(^OkEc4CCJg`>hg4B
zb@|dw(kGZG{{~XCgVH~wze}G=A4wlehor;0ak}xk3AzGZp{__*tS?;H*0iR{YjtaL
zT6%GbSK;#dhPD;0UWF?buV`&r=2P6z+}5yq`J$GlwT9xx747v64Na}>`jUovVByiW
zqP|^U$}U4`U$|GPnoOyZ3?-jlT2!oLlT)TI=NLZauGEzvo6S(}N`+(D(v+Z5yT`<Z
z^=&>AU2)_|6<(9noF*wb=_j=}w=_2SP<hhqg=raS={^;%7-~{E$}=NNUsd0*y1hwX
z#q_AYMfz&Rx7y9uo~bKsUF=u0WOeJ}`nJ`}Tk2Q0d(|kJ>+2N!Iyd~xEd5mW^_e;#
zds{kZpI(|<>M;!^(ob`XmStliZ0Uvii@0U{F6x)#MQU*`Qi|(&QCoBCV*N#2X#ET&
z!x^p&hs|hgZfa{<)x1hSV{u#knkJuFu0Z`P_M!~aOUrWfvpKq9cE1KF%+4tapxR8&
zC`xTv(a<uvaH8V2XKHSJUFxb;X?7o_8dN(MitWA}Ju{0P`bqT2^qIt&u|05-izfE)
zpQKUE&VWgM6sd8UZnpcX?XNnNT2ZmMQrNC9r$?4gIaev$1Ks)_dni=eZ0rbd^}@cu
z^io?IJNygX$;%0FjSC9S@h|Nk>>3svJRs?u{)NpMP}m&*ntrMIU)0~(*S<>Dv-*Vw
zxSEoKL;BY%`-KjuT*Y%h@!8Y6aQ>v!#+K&A-WRDBeZ4#LDD|pWJ7>Mp3_cC6b~QBg
zwV}R|yN14rABLvB0Iw!Bev=Yk>6k?&%81C!)i354K8sz+a!|T0!?4(u3U_B)x)M~H
z>9K^k#u8VYVa?ocr`1(@HLDpmD;esWxy#7SOO-4$vK2m(rSOrZt~AudbCqXCwjRP4
z;v+3gq3T<#Z&iF--F)p?x+d_E75zpvgfzr;^=%4%n;U*+wtf}+`m7p|y)8Z0qn-Fi
zyBm5|hC+IJk$$zpKUVk4X|-D7)k=vyS2O=ut?-Xam5eTRWi;$ktwZTARrtqcu0Z`|
z?))QHzmB6D*7a)&@Q-4Ze-vx{LggP>np<B_9W33ao)b{*eM2=}8JWeU91vLVB7i;o
z>opS9h<(f<-B<099N??=N_H6PsoZLWK0cAI5Mpy91ol2cZ0>~E1`=ZHPY5FR5n^*E
z1P-O{DR-NT5Jc!B#HMed&<r1?Td8(#X0|JYWE86bt6J(;En$0q8gc?$qmF`e{2_5v
zUI*+9aE(31?HWbw);BA$n)}7_?;AfH>Z=YOc6c=}Rbna+{}ugXuI}&b>s(4Um-Pz`
zaP=b&4(Z>{L-;Z4&hcI}e^Dy9RK0im{C2kRh_I(C^9Xyo!Wr!8%9|EnL@VKG>N8ix
z%hkf|YWz$UPYqAg(#cZ8v(=|Exv-}z%)y?f@GpCMp&DPA1=-V!RD8{?;gzcXWy({X
z|JYTIX1A$y*)+OUe49$AO{LSO(q&WWvZ-|0G`h6()%<NLJvNO_4Nr4x<=662=}lAf
zNmKJlQ}apF($nZu^Gj3dS7$o*EH(XX)jwNJKUYmRR}C*z!wc2)iqv)}QvHim{2~><
zSPd^x=_yt5N;P*Wk0N^-&r32@M>h2<)ltl^do3iLdz?F3P7qCO>}g6I4py2hL(Muv
z?IIa!);O}xF*3ETriSOL?hLi)8ERE$s_A5E>8M4_P^&saElP&kRGDg%WT;h;sWxqf
z+7ua@Tf<YUGDB?|yPBU}&CjmVZP(~l@$D*|c9l-MN|#-w%dXO8*XYvHSM#^4^w>2z
zH9XC&m0!z8r8iT}CsWNQQ_Uw+OHZRu%`a1>UwtXsvs65sK;U-BR`bbK)5}%E3)S#K
zHJu{0K8jTTA{D<##V=OzO4M?cs(7WEyG-de8Qh_i_nBRBDDM<|rhD&FX39BAoJ{Ur
zIasJHU)WgBbY~RiV!oj{ZRyI$v)Rj-3>%aO5E`CLCZ1ePcrrP7ay8@0<m1WBf+trq
zo?MMKd#QqF&*E-jvuANN;K|jBCl?b>ZYDgrI`LHU#~}@-!=9BhY+X~^3K}4}-dI(#
z#f!b#7wO3ZkM>Jf;NjiAq^*hEUW-<&ZsTY38V+C8yq3aOVX@ju7T%2`gw|$GK*^%9
zb;WYdf-RILSqw_5WF5xoDmF@)@hEM^Q&MNEl0GAH4s2tZTURe{<2=|xd5}fTgRDv(
zijDGMJj#Rdlswp~<iUuX2idsF(iIM2OV3oQHa#<Q80v}fm-upN6#FWlMaV(5`*PB%
zgVRaNQJO9-M`^mW9Hr^fa+Ib^%Tdx#%TbyxEk|j(v>c`B(sGopla`}&owRI)L!=cc
zJv&WhzG=$Hz>TVEddkRxTTM^xifL+BOjEjIT3TUR^peX~E@^6=-~X|=t*O4fsf}OX
zk>?KzQG?vkso)uDX&K=wo7$RJG?KUiQ=UeiYZezy^HIE+TN@fyw5(`ltN$u&y}F!!
zO)V|WE3s_mK%b_y4H$524^ZrlD=t+c`dzZRX;pi(noN-9>I)AUKn6|2q6YZUvKpkN
zHq@_bI$s#Yv;IgtCQd1PI*(`60XH6=+*pu=aO2_0odNzD9*=vtdA#Gvd;xgen0RvM
zfIssEJekkHpBooXg&me=lm)glty-lvCAVFKn}@r<d9c5G@NoCwfsJd+%E%qIYI$=@
z)1vx@CMt4Sj>`Jd)3f!<n_FomwyLRNMQbCEf^>yYn_VfeEu&avaA`#zrK{UkFj88P
z+I5xnrcLeQwzNWp3)<9qPFhi>SAARCic43oR1(k4#vC5*HaZ5NdgTmbFX{xUPp;wv
znl+p(#b@D)_9cpK^~y#KTVcfMr3y*urON0`FH}Zhx=K>IG6k}wEAJ;fl~J8uWcSBf
zp{==oF?xRc>NYjm(rjOqa_TJE^nSq_lHV`c0j@H*2j;NDzppgzVYzN$R4(^0o>OHj
z@u-Aus8mdLa?NBGm+5Ii*TM~H%PcPTYA3?g+RenQj@@e2WGb^dTc%pnOyyM!w^C)9
z#pwnV3u3>l)P~C_2UwL^LPlElFkX>0tXRHq7_T(Rrs5RwN<Sm5IJLfoTL|%#*#rDk
z9PaM$FC4}THMiK@PH7qHk^%=Ed4-Fow!&3XP^aP<>Qp>Ko#$m_s41)Sx{M6v-H&i)
z2|N+V$jEkg<hVJ~xRum6%4{^puiskAzi&xSHLui%O%=!5R9<c?&hcGHXGn^<IU0lA
z9aG!eRxE3x?Mi&QjPq{+c<Sh;B<u`I*ddezeGzVfZ!~_fIHfBfLw^L2r1LWN1YU-H
zC-w#fb_Q|Z8}{iMu(h*DEP{QBSPIx8ehK(1aU0+r;ts&OaL=p|TcDv=h$qBf0H4Aa
z$pU*+I{;r1ZvyTShXJv_1c?15z+<8t@QgTvTjidWp9OqDegW`B`9;7TGUCdwVpjs2
ztT@mqAd!!S#TUC4;n-u%!k(av_(UH<;j0r9u!A8>IU6*0HoGl-?m~8_^ttD<JB;15
z=ZjO4_(~L8S&;qXE+R<%=~NtYfy5st5s{08eIE}%e3>j2;MW4IWcXu)<z+a@vw*%h
zVBEJmzwPdEIAsq{y|*Da)QtKje{t}WW1YuOoIKU_UHA8AemHxs$3ZAw-UeSk|A4^I
zNONM6P0Rr<(IkFXw{856x}8&BnYOF>)w!?MzxKszb6=nLX6;+?d)Dp^-CMhN?K{)=
zWxkvIZr!`}`y1c;#ew1jB?o@-{^cKz`Y`Qa$48Sss{8oJ$9aFB`pL*o3O=<S3j9p|
z%=5Fv!$F4=4^RC^R!4WonGQooXh&Q}e#flO^FJ^8e8%T9kJygb|2g8H$^XnhYB-wx
zMaUN;zDWKe^ULb5BEA~&mF27SuWZKxk6Dh5JU04R-PeI%hkQNaYs=TkohLenbs9Q@
zIzv07I?dmF{f+(`zi&o;Gx~VQ@v!4D--dr{{5Iy>xNj4`9rbO}w`0B?d*b8?j}!V6
zh7-XjhM$N#k#O?tNuQJcCxcIhoV1>dIhk-W@nq7;u_yCSjz1-z(x37<<##IRRK%$f
zr_84;r>v(&pUOU!b1L_={<P0&ztjGw!%jz>9)5bnY4hp0(@Cf8r!%|cE`8UqF8{8m
zE>oAK%i0y&71x#AHU2yA@66v>z8m>n!gs0N2fI7EJG;BPd%8upcekP2w>z*qs5`Vf
zyxZJ8vOBfg)?M@c_utFk`+Xn%eZu!i-zR@>JJWT><Ba}{;f(K@#4|I05I+q2A>fCg
zA4dI<diLyD`K-rT{aM4=z_X^a=Cg6<-Z<xZZg|hJo~|B`9{-+%p2VJ#UcX*TZ&Ghc
zZ>i&$<GACDqsP(fkR2WlZ^uYSvLnU$zVn=j!};$H`2@bYRd%Wz*j4q$j;dAnz3z<8
zp&Q|G%%jVr$3ylocvwARJ-_hm^!&l|oM(@xho_gPx2KQ(l)g*ftv{ph(R+Azcz1iB
z@$T{V_73zO<(=d`-|&gyu%W|n%+P5#Za85$W#~5iVCXS844wwP!OLJU1RFvPBYgaQ
zJAF_2cKaLrg91DPd;$UkzYIJT;vf1&XlJM)G&IyaJSb8`&M<{pX2f(QoJkv*d$uIK
z{Dbmi*yF=EqW<fgB|Ya{BQ16QUiyvmercz3yL1bFPdfKVo1O1STk(6*c?|n_JZ7*j
zX~1a&-Lj^(R;hM*ecLi=|MF$amtj}mqok~AnpDzoSzC)V5tEH&(!`ef_EzX{^}~MQ
z9XS1v$6xf+;V9NZ9EoegF|4aNRT|eA#eg5<w--Me!vec(%Ckd#9#x;m)aP-Ge!@GY
zKD*WDS@r2qo`SyX3Is3G1D9^7)8Pa~n_-V?50-lH)tSUKqC?7_!1e;xF!=c36oa8~
zcBxgGh>0b^I)asjvjMS#L$Ia_u)3-Qu&!n@;55dBTpV^j4^1VbbJbvzOo7P1qPRd3
z`7ca51~_j5;JBO#xDz+uT<|hrY{`DWtwpGlaa$+jmf!r~aYq4%k6Qp(l)n;iLq4=d
z=8w$BS>gPiv0qAJY)8Ho@XLG&KCSsU13#`cA18yyelYd~;3s1{;IGd|J>-{+?F2l8
z^Bg#lod0D0g8U`<EA!XpZ-DPXu3NACHn^|IzdHZ={G0RfCK=~o{}K87$32+8KmVX=
z_QSq^+-!oX(LxT6Upn4CZu_`TBvCw*bE=*2^n^d-H-srILCD@dLl|2o>@K$gexjN!
z6J9)zQ9^bj1uYFF2Xc|0W}fa#>l62s3hpmBP^d2ooq(^7Y8MivwFjnb<r4(dZ2!VP
zXXns~ozH(LZ0AArq-{00O2hRBH$Ibq|E^k`=kNcgrA;@w5B$@@$luvf%V((w&)HFf
zkFomyIXi3CQr`6E?5?>2KjH}dH&ohMnD*?SSIzz8@9xL$UCY}veD^2Ors2Bh<=k64
zm*Ww~Q2(6UYv(#|tBu#(?oa2Inm?m#e<eTX$(l#p!+wt4d9dch&%*Ck@U=1w6&Ll{
zGtl4JSzF8Pq1L-3)x1nN?02$e`#}7EsoP$&TT4%?XU#qEsr3uZ-?^z~k7lQ*bC=>m
zKkeu5j&nY{mbTNajWt|nhh|fs_<H?c@#oxEb7-h^oG;WI8R)OkH_(5eoBHKIzd>$8
z&9Om#{~{0PnVLmE*8hGg8|N1_eH;Y+a>%kcPr6bWsz19zf4<GxUF+{WSnGYhm_JrF
zcb+jYKGLn#{C+GA4d-V)4Yd`7ucdpwzT!MdpFsl;ZA8xt`=k1(X&H#?JO}^onm&$!
zv3N7{i%#Mjwe-fn;6L!nHq`la%!8D_(82GQ3r_4u5ViWzP(UZmO!<%Ab>RPzphbCS
zbb!Bu@1qY|;osK}iRU}Ntht&Zov*#!{k1w*a`|b9ymEdFi|ZYAJk%e`Gkz%lpYn5l
z(NK$gUH$W9ZHcq9WochLx#}vKuS{N3SA@BBHu*a{%M-c1PgUL_8OrB5yC-$9TOGX!
zS6UP6XBEG|d9Zwo^WdZ}*-h_%>MMK8XF9tpE1ZrhyYtYb<Ie7iwF-V!qm$CUz(4mo
z*U}#t6*LtL@&iqS{D?NK9Q5?4*yQ|TQdd7ew@CEPz)A-5nMr5KTPYWwd&@nX=gQZ!
zU&p+4&hDz2&Mzzb>e(#`$@ytzdq1}ut*AHDkt@{Q&S?X8$oJL|Z*J$wioUXGDGnSL
zntxx~yDF2NM=JVw2AA(-g<ivRepTTs$rZr^>FNvbY}~2Y2R?r+Zw+_Ib^}dXxc21!
z;$OK@b4!NG8=WUBZ*g{%U#0muyUUJ}-Fc?+4rfPMC-F+O$-P{r4%Fkp^2eN=Rr44}
z?FSl-&aTP_HGg^z_2*s(T09Mp=x}zs>Vj~I1}&VP&d##eHU14+_x91-U76$Tsu-@|
zlvg>sG3E|cWNC4oC(Ccu><SLjqOu*VFteNTA~*HblNGV-cc>x>G(G0Lz*(l#tsMuJ
z%{^}=|Hhp|;b>)Z$LD%DTIrzoy7SA5Ea$O`G)_aEiw&I)cnRU|D*ITH)b`p}xl^lu
z)X!#=GaqRcIS*Dwa@uY+?c7zK=uX3r*@qfi8orhv(>oL|IfF8tEx(Dwdnz|bQpH5j
zUG0kBzuo%$J1VA0q2-(V+*Ci^Dla))F&jK-fqUK>-cU~(KWOIy3Pb<m{y!9+5<Zwm
zo)@>f0&~5F+q7`!nX2%i#;O)B1yr<f9tYjV0NTWTevR>P3gs-&+LZCpcQ52`sD3gi
zo=U?Y{{bE-$79apm8W>js{ICira(h;c2=Hoo-8}#JW=T&Kj&@bYn)rk9Kdn$n(gIA
zDjTQ8<FEWN#zpy@hpRlaw4L8nX)~XGyxF;3!RI)8L615f$gTY$4G*#tF43U*Yfq+0
z!vVdTzhs!VuFvj)a`sdVxh5tY<N=<D@x<){cX#DcxbaR>-qnoLt&BlQUvWiWy8l88
z(J(MMqG_NXb~*<AQNPgIX;7f*(Vw@0ccI<1Kjg!_mDA}MJYUf8F68-BbX-UpKL=;v
zm>B5(IcfcG;L>~fC-X6&?|n&Exx4;;s$6)dH(pTMt|WibHjsw%MQ|RgqItzt=)+6#
zTj_kSs*L9u>UhOG@iDx=m3bn{#qUGr7wEU!%0AZkJn<H12g=c1Rmbn~gP2bqg5NeC
zqe#2#lsgSPZYk}~@|6Sq`?=lthV#p^0~Ds^*$>Z+5BJea?>9%q)!+?0M@1dCIy)+^
zcOI{}pVR58xVc{%9aZz3Zv3Bd4uVe}thf#QWD~n-yn>&AZXWZTHvBH+kLt%APotxs
zA82rQlYJmf>_=^|zv2;|H+5DX0DX|_xxE7v-fm#Nz%&EDr{b>z`Lq^?+m+g*TUi6}
zyWt?>{7Bg}p3C&8^+EQb{s?!-b^}csKI)X;HN5Vk^$C^n1N;u4AGy6>hN6kf`Buet
z_b~3qpH{p~={t9!Zyv4Kt@T4r`=G177{{%w{dle$za_kZfBkT`mmSu^-D%PMB)JN@
z(W_F)O;2YJ)|ON^UzC@zUw2g=+*KMr^)sFyV$R6npppIPz1Lk{r}&l6<fq#hAoqXg
zPou*<uGZK4`Sp`?DfFT*ZQ=1w{bp~)9$t6uZQM`qd5Y`YUbPf$vPDaW`vY3sd9Z4w
za}(nBR_vF&D{Gy*X5FvVDfNBkPkYgR*AXs$yWHkz*Uc*8w09x?uJT5#_w)MFr}orl
zFZzmu8Xb)PdBq{Z<$lnCHOoP_v8lxYqDHT?gXmCFCO^V=eldHq_AVwKu7tWE<LyP6
z(f2f8roTg(-#aPnV8szF4Z?Bmb?ZNys@7=ne(LF-#z0)>!CCifep-1nxAt^)Rju#i
zn>`iBxR0s*3B2V5)~bDSN9W#3+1WXNqI;f<-&xVu1JM@}oo6e0`qIZc1iWQ~=Kitg
zz;VO<WIzO>VSpFL#r%nypF6$e=bk3&pg_YL_~dsQ^`jyFG&-E0&fcu`D~!Ru{yan!
z_R{*z`NIDv{-}3aZx>J+&T~pi8vmg6JlfQ)H&b|dpn`Q_P)nPz-Rtl|Vrz5^#0AZp
zdEBYvNu!DVRC*~d<{u>U*aiD8dJmHyo)iW@`qTIXJD7K{O#z`CuaW0h=$Ux0APxLz
zJ#rn}A9KV0SyqjXpNs^W2IBCz|ESU*&%S=<+=e<KeuY08uRNF9Tg7uD=K{#M+Tphi
ze5bn-r2@_ZDi34_2g?p~`H25P2BOqWrIpei$dlaNC_m@z=&g)rp1sM9N2qjAKJ-Vp
zM1$gTL83`>X>%Kvl^(9-y-IFRs&`(aDVXjwkPpol`Prd{6F&W@t<S3ONsL$L$p(J6
zbG;0pPl-7+)aq0V9q1<iJ{pGL;aWV#I}172iOTWp=SlI(Z$*2QK$h34hFA2%*TyBy
zsYX;z*TSei*lw<z>pWDskjg8`l}ohn|MpX*!#%z>e(C+??my5De%Y?^bCS7neIKpt
zTZcoYu)#e}AFi4%mjMVocSBndE{}7XznrMz^@HL^@TdQ@^nMIeqv6MJDC~bCd*%2S
zD0}@eI)17=?y}b(OJ`7+T)EY~Pg6e5v$L2-48nEuK)>DQ=9HXWc%Szu?=r}epVs<~
zJI;CSp$eZmZ@7EF&%t$%cY${Iy12k7|8}$=qshHr5Z?K4S@wu|Zy%pkd7%4TW?<OA
zy<q3b06g*q=Ya<1XFPA#c>70{ZmYP#k$D~9HuvIpKxZZMEoB{0`8xI-`s4^GFTWoL
zrvx9jbwFRZIumjZq{9vOC;23`(GmPe&e)B0_p!>4!5a@dw^wqD(7ad65Bx6??ekcl
z`xd;D>AgmKX6oDrIIeKi6TgdDhN;C;p6>m`J!H`PRHdUIj!J{pKitFI?L^DJTdu6-
z=Pp;){OCz@Gk5n;cGR)QQ2zf)KlgF<uT1y<Vp^CV1^y@LM!)>Gu5td8Wg9B*9~}cK
zuhRI(Q1Sm&em_cwdnRuD)7|@DWyf5kZ=Lk7O7q{Ij=enm-=4?6Ap>O&g7*N)f=QlF
zKlNQTRCbWt8L=)k0>5CWaPs4{c&&6kjQ>6Vq28nJvgJXP43M4-3jhC!2V?*v|5HU}
zxrVmRr2a@}2526&t%}DOtpkUe+wgo6s~ojYC!!xFDt5JBlU#!0?ovv2!RyHZasrKx
zpHn|W(R(5BRoPI#wm@3O3yJ%$!f}@;YiWXpel%(RKj-P(SDxy8q1^s+;{3mc`=js7
zfAf3tKUo*&TetovX&N%`|Ht>=hNSu5=t*nQe`E6h(WL*+^vNM=X{dRMJK9ilGWU7R
zPsMjn>wm+p?JfRq<n`al181QJox8ZubbeM{hyLGK%luEy1yQ|eb@F59f-bav|F`fU
zSGw+edHrAGC0H}xbiT3-^vBq|b)etB+l{liyhn7w`N(n8<L2VaVS!r?@GWs1>E;nS
ze8~&@5=o9LiK~!waTRg3ans=^)4lERT@bf`zN*F@$TT~pdnRy)gs5jf?Y;z=?@HFk
zji)pyKJwAWO^ch2*o)#?;@S{T&+!&0_rcRwz;UzHA0!j84y32U-48h5$@eip2b3-r
zUwjKWPf8rI6VD{)-Vrb3sgn$GS@d-73O$AAa_8Pqe3>kNivA_!Ye>_PoQHJ?g&YLb
zksc(%X4omo@~<Rw=wtGyk|F&7>7|Q>)HxP=K5-~s9M-CF*!hVw<CjQO<F4~`+(3R6
z-PaAb7hM~Hd&wJd*Z19YkA(=Jd_{)y3&|XN)XkiTg^BafOzc_Bz-MHi@sIP58xBJ{
zk)+t;_?<z{GJd}JVQm&?#V-jz%<1E>ZyGldKkWCShNZYg_(6Ujw+^iZI-qlzTF5L-
zkP2`oc9B$!TR-S7?w6&nrA}xFI4*rF0{S!&q`Teaf3>&{H_5*%zL7kox1HT$0e<!P
zVP{p|3{K=NHJ}C?@oU0w5q^uEyTq0F-HPAsa1%x+Fgk(J35-r)bONIj7@fdCE#WS8
zKimMmkn|{!-UQYM(1zRiZ{S<_Z^u0&+8y|>_tmf;G%kcfnM5d*ON2tTM<_HOghIQ4
z88`8prK9+v=5gD9DDLME#l8HY;uH7<NUPBL?f9+6Zw-Ez;z!>eKY-tZ_zftfxZ8P9
z{K0vUOFKE{jACNvu?ddV%#zrF#yeIs!3Z<P#<STNOQxXDtdAXRvSKw;5PMsnS&tl-
z#8$*k10>seq|?Umw%E<FTTzRXQGVri`ef)lO?7MSN~sE=)lk&}%?8kCFco#zh<aOu
zI=coM4W3bZ!w1lkaM0B!r0=CO(htx=aZc)iRttyZ1Y;PwpUh%y3s;K&!fi13LYKiV
z)+_Ki>kl|V_qWKmOXhHlL20=2n;07RrOxh{l^7vAoZG^E5q^zi2!ak=vDUdI$Oczv
zP%>OQoSVYB<hz^)W31o=6d$_na0^Q`o?~!RL>P2dwBbgZ8*t})67G4w3mPvrL9c;b
z`h&C?x5V5JlLOsg4?~;9A8`-;SZOD8Yn0=b_0Od`ltzNig-~cJn+Nsu6QO^iT2w<<
z1GHC28=$>nhIAFQR?L>JC7l)0b$k!b^`cd*lx`5e6Sqh=L5IVG&=U42?!NgQv@<*>
z-ND)w?uO2U<I+9Qn9wcVD|urKo{X6(0vQG|3}zU@uz}(03=a^bF(VnQOVCCHn;0%)
zxR@Y%HNjgM-p>9!4g=28NCd=K1jJ|r#CQxiOCu5xV-gUf68<voqoI3%z*=w*P&D5I
z^h>@0=pnuV=y|#U2zo<s_Ybsp;O-x2@MwW%jk(aQaXH+-fDVmixCiK0(8qBN^k-ax
z@%npc;rK6T!MKuc2158<&~tGW)e%NA?gzqX#{EDD$NfOiknsYvSKN!9vJ1K}c0+5$
zgSaJV59)F+v{r0|){4W>fk7H6Ucik(N1^QkHwKB9WZV@b_Rw8H;%&MsNbIG%g2X#?
zSCH68cLj-eae{1>bFcp?jB|pk8LnY?DZ{l4A7J<(L5y;Oe_$V38r@ejIjEU@)K3=I
z&lOxhxWxoFBt6UZ6VLT?5$a<J^qee5&CEc}TnS&QnP#yOHM0~oa}(+gJw~*NTT%XY
zuAfU$KX*Y>$tH0h>Xh_>T!~tG81;t!gxF7`mad16j~$3jwe&l#rCYd`ZfD&dcR;Jh
z`$*$Mn7h&QK0{ic!`#m`_5f<^7*g#-Z+r+EJi4J#6Zb8N$GHx-aUDLvb@(LL;a|88
z|H^gv6l$OrHzN7DG+nUP2#aJzjZA}PlZ9?Pght#;&{*@O^i3ZR4-yt(713g(APqI~
zq?1O`LIW)^qz7h!qV)xRs0AZx1$t2%%J0teA9Hbi)@pKuwUV5~8-U-s@@DA)%kDuY
z&5~wm8N#fw3^w~LLzxYhfo3<SNAdS@*!7m7OrGV*A<V6o7lt$?mg*tRy_TWOBbK4e
z^_-t8{c6O01T~_Rf2L(2C|1hS!Zro}Nv7vk#$`L+3(q>c0&l@hJp{Kie4gP84FAUP
zMTRdie3{`6hC3O)!f+SER~hbR_!`648NR{rO@?nV+{17$!*>|&WB4w^{S4n@c!1&i
z48Lc1hT#tk&oVs6u!mtULkB}AL4lJvfI5cW42Ll^F!W*Q%g~SEc!m=g7BDPiSj4cH
zVF|-hhGh)P8BSza!?2d&6oz#SXEB`5a2vy?89u|1+d^<#2yO+zwF=G2L_gP?_>k=f
z8Ggj@bB4zmo@UrZklS{z@oBUz!R-v6XZQlczcGA~;Y$o(X1IglPKK{A+{N%!hPxTQ
z#_)B9Z!mn5;ad#%Fx<=V9ftcDzRPew!}k~-VE8`6?-`z9_yfbU49_v_Vc5&i!O%$%
zZA(zc(3{~fh6aW{41F2;F&xiu0>c7^g$#=r7BehiSjw=BVL8Kz3~LzHGMvH?U*~{^
zSq$eh+{W-}hR-m3mLazV+LrLSR?)U(=XyiilKmjVj~IT=@HoTM47(UUZCNnTL>`7Y
zX7Y{tz-1!46l0DZY@!aU#)F>@)0bq-se=tP%lk(Sj~dD5!KjfYyCs%PR5E^9=E#92
zs=%};sv>Gy)I2szOgCvJsx4}L)JE0ZY*{*#iMlK5m}X2pmMWKt!i8>Z9*p{P)U#}M
znsWx4C<mK81T71qKA@6E9p+L+T9!r~vs6WOQJg4;xo9Y3^fpho=v~GbOvdGQ+01(_
z?Z%J$8}oKDmcYTrXf$7^7-Kw4nz4jU9$>X`CY#*^UFmB!<3jUvV~cT(lBRKk`3lV#
zuQ%RmyjL}k7>^HWo;04(jCq^+OP4W01s56P3&!1MT&_2S=`jywc9~&}`v8j+8jT-o
z<ux8LUuV&Sjx**jq2TM3xyQ1=<ZB97`k(25$!ZQHV>$$rWU`~jMVc0w#+xRZ>P&NC
z7Qw7EtutMXK68iZe$!*7r%f-L-UQYG#Q4%uWjbZ*G3(Kuf#`Qi>&L>CgSM<vs4;JW
zX}9R99nA~4yxYu6VcN}C5S?g+?dDs|n-IDMHL@M$*lRunJfc?5C5c4;PPOD%iqQL}
zi~ZJZ1C22dCej#deA>;V8rhik4mQS@`<e0Pzml<d7$;gh`WtgA8Dkw8SBR;@x<oU^
zx#pt-jd77V)VR{P&Um$A%=s>3yvcZnW~|$XGRFIjZ)(Q;y7e}fF&<Ei#lyP9_?TiW
z{sWEikjq%N8K0)|8(${s%}1@<jc;0SGajHg#zU6jLmA_jmI`aU%NS3Qu~rW@#vbb~
z)6)LN;vi$4H`ti;mOm@TG<|>xG%au$SI(Nv6ltk2#hOx0If}8|>@ubzQ&pe2!Zd`j
zd|<jxGnQkfTinbhlVYZu7FhF!G$q!djJH)amf@fgHDg+;mDkj6`Li`1bX<pgHX+Rt
z>o(IC(>9pxrd?)SM`_w?-fTK({)Ej|^Hx&_df!oVsHxM`Z9V}bnfIFwFrhGJbE4UX
z-cx3-HP1FTqBpKJUuC`#__vuio41<(YQ4?;qWN|6ezfi<@I9gQ2J>08w?A5Uq$L?9
z%Tl1Wp3w?pIczy>ji*+&OtYq0(=5j<U6y$;OJLe8>n$5mzjs+4q%xt!9F}J-J1u*F
z{Q+VUt^?%{MoRIBO(m@6(l4>LS=U={M1S23nSo&g&ispU1f>~l&t@nX)&L4AitYJq
z_hWl9LFq}hXR`ewwx=>24hY!;+h;MPL;JFr%rKAPbcQntN_zmIhn#)vY!7F<42YX%
z0fiL6c7H%wq!5&zVEaV&AIA1E3~dZ0Kp}+y;>l142)Q1hEHc=heIA{Rk#1TJ7eTin
z={1B_LufBt1FeOmvv31zA-oH^2TAkbR%jM{_58X3<@Z?c-)YbsgB;IEe$WKj11fq&
zucU`YNQV?IoWd!E@im|U&<-gie`tu5r4YzTaVIe}MS4iS&=!dscA*I}5)gVAAqQF@
z*F#(3LU|$Vi{wR;H>hovd_ZxF6bh=BOCF$n1wvOsE29o2fHVoESOd(p@>)n@*U9Su
zFPATu0#T|BQV^94ICsf+NuDU*CP0)?8irDCl?*89pO8D<HLQnT!PAgI%Thd-%EPTx
z!GlT_$fXM4QpsGZP%f3ndCSuvHz4mOxe2sV*@ki1{J3mBTsHq9%C<^gg;=ZQ)rdvq
z9L8k}f^NxQqBdP+(?jxnH%d+=)I)>hJ+M<b4O~uNw{k{sIZ2Y{#eHWi!$5{%1f{pw
zPNM{}ZuWVPVF&vJvHdB6qLg6*Lmo*|7l(cZh<lkCDk-PKE=%_?{Ep!p96Ev__jk#`
z{=Mwu$&kj1EJ7L5h>=Aa`!nUzarQAX97$06km0-RQ^Bx+eU#kyvAvc3>)8G{+v5Nw
zN#O(&*r%L*lpIUgr<kDh4BM*!g~T}u;xUk<F{IHfq+mc<kdG{#WIL5bmQFKV!*C3s
zkSu^WQ4c7KEI=V~S)^~-uC&GHZ1-jy1v1Z&-XtICUWR{X_&mdp2#Oqr@$9pW?H4i3
z1;pJ}8vrCFwHVm3uLCFx6T=9GR)$3kCo!yMNHoh5^CXEW5lR~oH<CpxhdLRaASj4q
z$<oJcF9Z~l!pRt4dYVIDV7Q&(O9TaTHQcl<Abpb{eR~Pd9l}p~5fbPz!Uxi~W|0i(
zQ9CpUuYp+sNtz;y+$h#Vj&zH-0<y?^uz&FfnBPIhb|3s6gnaGytX=nZ$k<+j6mkbk
z8{dPD-0hH}9foe*4(Pjm75Z+!haawYhFtBOEX3b2!aYR?jcxHy@T!I4D2-w9HH~4>
zi7~uVd_&wwoT5=GPJ<g=F1m;Vi8C0bw}~I1-}MgB13t7_^wO9Fw*c<}4}29mRGIh4
z5vZv>D6<b_z`ihEkihvt$EiPb&jvxh9|{3y7;cX>vkcrz8VRGr-boA;(#Jw>ISe|X
z(;)xMmBs?*Lqlr-?*k0SzE2@`1!(VQxKxQ903D=w(~$l}FwxR<X$E{|LLYG`G!laY
zL%z2Vxi(;jAed$Bkf}m_xF2*OUxqZ-Nmqi34QP`QXq#)0=C#uGh)Z&KUua;x6O@oN
z-dnmGCWvM7UXX>~3;+9IbS#-SKm+ZANb@0>5iF(m#clMD0Eh0Q_l30eDeMnE4Xv*N
z?f()akUO|`-iEBvikqC@M{Rw89SaXg9*^M;X4=itV?XN~U}8@T_7hS!Lchly%|bxU
zEBcj(@RCBHmm7PCw3i`8LjQJ<WFj5hu+v_E49R7z<cT}D<D@`HE=R+j42f?P`dm8R
zZZ<Ja@(|;(Um!!4S&6u`YoLeL>nTXHPSnAFmY4-Q?H$M@?L-O}i;I!MJTVV(=VLcP
zh6HqhWW{dkLd0zl4agnZu<_=B#2tGE(1|ViqmMUB!6YLETn>%c-n{$Z1!?;wQUD~T
zZNNeAhy8MKIc}c*h4_UOjh=sn6a;DNm58+g_x1Zh3V#(sA(IB?HR2k)oqsKUjkwo~
z>tVk^{08=$pzm5IehZD)LC|!4Gwig-5sp#xU$EaMZi5|ralpJ&+=+A`y@vnY&~xnv
zx$`~n!AOH0BMo-i83~8n`61vuEFK1YOgtueVbnd2@<OjQ>gP%E6xsrEZrHbr?WpbN
z#q+SgAYMfMyd++N&kpel?2v!M|5foSY7cs@VSin`j=0cvjk<kHyagZZ9svJsu@Cqd
z&ww9_kKj-Gu4U{;eTuk;#3A^6CO(7DVR0Bf9ijuVAT@{o5$GrIBn{Z`fd*{YAwh@z
zYw<PkJ4Gk(X=g`(LwpOLlj0<BPKi_SKP@mDf`05SgnloeX_$BiAkB`_c^+Zp*-;$N
zBXW6ml*6;544y~Wcm|QhGl(>v7a4gTVdQyH7|)9=JTD64xx*-)JB;DELpIMHMnY3{
ztCYYqh%lZVS$K97#<PY|JUdE+hU&|JLvy4=o=4buj+Dvsh%jiOzD*iUd<u}}OEEmB
zh~+s&49_WIc}|f8-PD^UE6*%ad1hhc8B`qRjPGN%M)RnV7@Y?&ay2f786dbA?YoD;
zm$Yc>n2X^(+Q-F6E5&H|Cu7%6Fc%vEE>;L$Rs<u!y^68VSAzTC1-RHWU|s~?CBVHj
z{w3V_mtg+o&-}~Bjei9({|aXQ6$b8gJyLLSE**0&FXmi2=3Ig~myY)og&Y6!apPZM
zZv2bRLOcrIx)sKU_Z>a4$NCI%c^3Rj2KRa!<=6NZdLH(zzd(Hu7Zc!O-=dB*&PDG+
z{Go@To1kyGxR?iXF<JNvfA|N0e+4lA8pixfFNlAI2;yIQ=3m2^e}#g7*^pWWxR|HP
z#U_c#NP)PRC%72#uc=}te29z5%*BQ=7t=Er8_rzJvyY1{#5gDZ6~O#!B=axY!(WON
zh;td3b9pi663n@Rm~)L5t3*3+)`&|1FB9tk6)v_OTud+*(=iwGXD()R<6=SLYH>Ai
zHiCZ%>?__VjS#;97c+p1X`IV|y|!Dyt%!daz`1URoivshn12Ng;9r}-_3jb(A~hEm
z3!+^)`1I#ue}WHjF;8%@ZK$6oz{Nb6i^<HzLYRxm;9@Vqe+RUnn8i+TF%RZqGPu}o
z*k1z|lbMSJFc;G^7n7Nbg@B8_4V=AVuQZHy`e5G=j^-f_hy$o+?D`?i55x!XAs#0)
zkMj_p;EY2Ab2`DC&O`h|`~%byj|*WQCo_-JgU9_7K8hw5;&giEbRo>?hS9D)ViBj4
znbUbNr_(d1^8}~sg8z5e+g3Q87jrr<=5!|Jbdk*I(wWm`GN-dMryIj-rAX#<8O-TS
z%;R`<iq+Zzto@>x#|6p_SSwk0trW+cE`>SWDCTsj%;{p7(*-i8i(*a}DAQWW!fT~C
z=6A8o?_!wW#WKH3<8_mb`CTCMy9D`moK8q&u9qO+Dc=b@@jff_zG&usR_1-t%=_Y*
z_k}a>OJ?2|$-FO%d7n4)zEK$ElJ90o_I=Rz&uo7Z_NRTH#xbE_-<JWyeRr|{>)>H#
zIT(wN*|5EUSodPStCKEq2Kqkhi}#?{df)AU8_4dv(--{1>k41I<Gj}T9)Qn5-wwcV
z-=lz$zQ+KM`<?+D?u+%fZ?K<UlKlexA}K|ry@=EPBXSFcO_o+}Kwg;p%=0t&1;VyO
z9_#1pmk;c_#WjB3e*W+qCcF@u3R{|(>!<fKBXp<uji2mCx-M!&gP#YbD%Q)ve!jl9
zVoe?mo44=v@LL3%2bKqj0h{Ez2B8h|ZqSAp@)$YT_l)mCgzkl{i~OYLVLRbl4cp_e
zb^4aTHWRilee+;@2(}}>X|PTC|2X>&z^JOM|NF}H$)xv68fg#+A)y3FLJc+aD$M|j
zh`p@3nl}lkTijj0U3J}WU02uDRo7KN71xHM0#X7(2rUW8r1v&SW+utZ|99`3%m5kr
zzWwvanKSpi+s-}r+;i_e_YSZceIl^m1FO_W0Q(r&CB2^$E7zlZ<Wq#5)!BhP1FThN
z26h725nU^=4}pE9s{yth*k`&5V4nc{M0X0<W?&!cjsQCj{ia3vI6`Mg0`%+_v@Es8
z-{YP@JJXWCz-jdVtyhBjFa8dq)gQszbZ#Y(lU%I+89l5k@-yxa`d^?81?cWA`h&W2
z;KH5U?Rq0kf!oDTLkdp<yB}eXv9NBW`h@O%ghd1Uh3@Z2<yDscPP89gixS8|q`H^#
zmW#kUYjo7s`#blL#*P$tZZ_WGIXcT0_@^NQs}L#(N)n=9u73^K1YnExFCk7Bs0%0+
zHaF4dGwff$W>buh1vZ0)eF!XzV$jn>pTVe*C;dc5{T*l1r_eTntwr={j4A+2VliGt
zZt?mQ<ncFzB{J$Wz>qp({6GYKls+EiO)aM1mw`fSAz)pJ=xq#}3rO37CpE>CvL8Jq
zKm)m>znY|LXYXuw_~=YnQV_W52&-pd4>^3aQJQ@Sd(g2LeF|~;D5Q$IA`JD>qh7%F
zqjzj!*jB`SO~#PkOB!0Ig}}@j$Q^8Z;sq}|V6^T}$Qa6UzlQdU<p@Jcz@{U{PBr9?
zyC2wAHRKMz!$tJ#7<DOPELB79xO+fdrKYlhc)A=$rPwrvT|$f$hJ^rQeB<r`HHL+q
zMi{~o7hHy1Qf!}NuTIUd@pw<}qvOE?oB9rL{|#UR>a7$5J7unc6HZ>m0qbRPYk^fT
zEEU)}hJ^tuqZoON)>j>Z+%zbCh??pP<fdg@gEd36udw%8k=yT8-Jt4GJ|+qH9Uvd=
zK~*Kf;t;n~g}y)zI(#&*s*WQp)Uj79^AGjV?q&H#Am5z~dl?v72k)V-I<y3^HOQ@+
zVb3EB97Y(VS+|H`Pl77*?-0VCVPQyBi!|{b_@tA0IuV#Gizk6aG3tC^s59Psg%C|Q
z#e^V)p)Qc20bqy^>OxS_PN>H(k+O|prNHn8sO6x3O)>OdqWOY_q2!uR8TKc<hd1!v
zSz!1BhI}=zGHe$XYm5v_2Gz{4bYSl>3_Q`Geu!~5u*Vn%ZLfWSVRI0+k7Agk6Lmhr
zE`Tb>(18lhA?`+mJ<Kq)wDx|6g#wdX;n%?AR#=4?NsOui7Edu^bnMl{urP2(b&6rx
zp!zWkZ)*$;OF$}<7zPPLbQ<>{V!X@3{0Ohv%KA24FM~D%1ysEAu4Av7aTc?8qL%rD
z7E#N5ipG2QviDGTjftg2Iq@399>UKM$!!}=wx|}V|Av(F5cgH_3t$KE-Y4w67+@bV
z?C)40JHoK#2>Tnuz#X|Q$T495&BB)PN7dUIHUex5!`1-Xz_7XeQKz1&FQ&D*n?I^y
z9ON$n+s)ot1Z*e69z;A=N<Io$EDM80p_V0ZKd|F0Y$al3F>DjUz-^=)z#ml&Gi*69
z3&WNIljUSDVrW^|K440Qp#<o8G;RnmnX@RLx|xNY=KWMB#1o(<0Xr&w4a^VN5%CjX
z5AuHMqvE^3FjA^M5;2BwwZPsN=@^m<>|GIK9Tx`dEwL1>_Z?!qEIx*?B>t?LNhLXo
zu;<0ypgzXGqMj&Hy&Q)aPl&64g@gK-xCj`{?O|~?un16##7tl>1KTcQ4B@;$-73Za
z3qaT^F$fs=t}bNt0C&|(8TNBvix~Di>N|;Hvk*3eVG9r@bNmpneJpG@sB)MZVKV<F
z0+ac75*W|ko6jFr+8K5~!UiZN1R;#I41T}usIr|=GeE6o7+P9&g<)t9RRzV!FY(?9
zhLr+4%Ba<#e#NjJV4pE;HLy<@_9wh2OD1jew^-O&gfZ@Ng$R3@h3(>xf{)09O9oX=
zB^}s<EGz}@J<71{z~r#|K$T_LfUw<+nhR_v#mLkAQGwN$T)=xX7&VCZQ)a<pmgOav
z|1B^L?<YLL9|SfDEtA1N0c<1Q3&4I2lM<y5^dR&+!t^}GA@0|})chJ?@ra@17XzCI
zjOTNqGtYx+=d*y_56s4=fyx0JfL$VR!N7WXIu1c{gd!f}5cvhd>aoita1^WIY`|6k
ztK={akw2sKms9}=)AN3c7cg@YxL8n6z*}D65)k$bR+t2C0<co7M^QQbP|5TIIS5PN
z#%dmk7=Pnl#e31fUd0+2!*~;Bq;ks3*~%NZp?rpW6k#+*DMonuo)7;SGz8Bniz#Ox
zLr#ep#RSfXvdMgp#!Tl0<xYf6;6GJT-N+HTIuE^tc9rEW2AEu$zmIAhE{MGY$q*Y^
zIX40`QH&e|Cd*+r_XlMNpNp{fIE^v}Hi^J%fkklnz^0>|gd7F-H<W7_GZUWp(Nsl@
z2@008I1w1jnTG~e3?O};%)vWYGoWt@7=si{8wm%2F>OTN1$GW^3fviBWen>F)=4ow
z0@&9SBkuwG6$?Y(Q#?a40g|a;k}jYH6ioWbyTD#myi3yq_TLJsjrvjIR~WBCifK+g
z{3{B0OM`bY^gDTve@-z;0cpW6Dn6%3Qy7ps4+_r}Qb?=}Ze~zo;b9D)!r=cf7{TB-
z4Bie1XL1GuSV$CuUo%MCf+yJwPGm5P!Au7Ki$Q9g^JEQ!OBlR^!B_@U7))dEQwD#>
zU;~5e7|dnxaRy5mY+`UcgXb9BO(7@eGR*K~7S8HUPBZ)^7A`Ve%i#A6-p1fU2LH~W
znn4wX+)4&lvyk}=>KK%{v6$iB3=#%cFt~-mhZvmB;8Y4ZR$p!b3-M)8!Jynay$s*L
zU@C(jF=%9PCxfpsxQjszg&dV#p2#Kq4Z|-mIKbdh29*px!r-$E{)NFkfcOW<6M?~a
z2K^aKV({M#{+7Wu24&v1GrX9=#~7T!;EN1W`Q*tz8T>ti6%0PW;4B7X7-SqK_b|Mb
z!ABWvWbjW69%S$-27g5%$6ANH%R+`2+`+<SuKt0AJi*`#3|2C@iotRQk1<$9At%?g
zgM~cF;C&3*7?tsv<gk!U4BpLP9D~gazRsYY!Cx@Aoxxu+Sj6D38Jx}FJO&?Ra2tb5
z8O&qwE(T{ZSjymD2LHyO$l%)yKF{DY4E~it9|rd^_#A`F8GMsLF9u&`@H+-u82pyO
ze=ztZg9jM2Fu0Y$cNnZ?Fp|N12LGGEL<Sd8$mtmV7K5)c_%wq@7`&gs1q_Y@gc-~5
z;|!KDc!t3Q27k`roea)pa2bQu4E~J4KQj0RgOeD%#NZ$xN5TLFLfcVbdEqDkqZY6b
zkwL;B$Djg`C+{&_&2Tvdp5gQzo_xiqR1Pss0_0`i8#aouy<q6&d$A9|)8BXHeCThw
zVosOJE#Q{(&+zN`?c6$kFV0qM#k%r-tQ9|rHQ(p38}$lSIR4JPhuxr0a5m&9{~%6+
zJc%{YYOHE@;;aMx#asg)1Zz5xpU7wNv-t)5auTrvKOD}Vx_!q3yZD^jZ@>FqzOiWE
zoqPEFqW$;W%`e)0|Bl=FN(AiSm+!mh_I>;s1~)Odox$A<?%V&+-Pr5B=l-JoeEGfj
z!aw@Jo%?t5PvVEWC-bF%8T>B*r|`c8%;aAHoXY<<U>5%xU^f32;57a{!0G%)4?MK<
z0sgZG9=i7d{_6*6YDf7+U={8^rN0iV*g}6DRxG8z4y)Kge;rn_h5kCM_!<3mSVbcJ
zby%^R{yMB8k^VZYVhjCsSOq=P2@We^DbY{GV);A&HQE5*VWlxTtS0&MBj;y5_Dv~$
zll&dNJd6(i9yxrc^SvTxc&qahzY<I1VfRe_tapBzoS!xFC(;#J`q<52@0U40>ApA3
zcM<4nd>Wje3*>Mi*7-?yhG;&oIX_=@hR>Ei`Alc{bMmM7ne#jL3)t`UK9AV6COjX(
zPjq5g$W;z2<gp*isC!|v(qH!Fai;SHgdk6xG@~$v!9WJbF{ois&!CP$ErZ?+1~3@O
zpdTua9WU6>SRE9G0pkT5V1i%)Ocb!HPR0vnz$5|ZSV^*gQ>@tYqOp7#^k*;%khLTG
z3?mWv6tJrljJ|~FD`+B0uf}<C2f}D<j9mz$zduaR^%#gZ>gJ2xeSfwiC&vsWVFagu
z#df^MiIv#H;=~HPMWv?za2`AdIK^y~hZEt;4m^W^--=kA1?9vVM-A{8@P~tqxfRfa
zQ+gb1Q0(}LufS`86Q9A~tLz&m9>ixkO2&x;gcmE2A17jOLHw2YTR^O3lNkikBsSw)
zu~-TS8(xSJ#z7XaMT*+&AbU73?0mtE40|EiKWBSTJS=08f7JOVCk_)){78IX{6Z|l
zn?b1C0df$#VHrXwz9)erzbAhnFOV1UJJNpympJkF?2mE{#wQI?pq8SM@lg%|O~m;{
z)RVrWVzD5>;#TK7atQjEC`$!_hXYOdL!6nmIp1L+w3WsCogv}$9iavxcU%{OyadY4
z7g%2OfELYtDgLNT({|@kHa+(AGP$W-7MIOU<EC>nxS3oIHw(MdyjTS4Y;F#h%jI$T
z++1!RHy;{yA-9O`S|fKoR;+$SeodYuzahURza!6+|H3J>x4Czi{7{LyUVf-=%B>}c
zO5M$|H2+_*bpKzmwEthRRR3!%PTWbNg`L73!hWGlcu;suC>9P16~eEC=Y^MqSA@R_
zZwv1Wp9o(FN5lo<8lh3>73}zp_8>7<oG8u^s)gfVC3FJ^Ex|!D;D<u6e~WXq`18RZ
z`Z$MmFfoT@VITTWZ2$Qcw)6Z~@*3N3euM2azlHtU74)PkJWf_~Yq+%-BiG}k=0@z-
z((`q<(KD;e)9F2UC1AG>yJh$C_hI(@0RJF%$R6e&!QR+o^gO+gAxuGzGst~hkt@&9
z9`Q$~WH_Y)J(BjFUDySGnmj|E#ojsk;7uhPE!SwN3b@7alv#$I=Upft`s+<){0H|A
zMsik4>>rL`-_XIsJi>0FfL%fbM)2``5}(Yc@Tq(nKLO);`k30xz#gBO@5hSEAaCKV
zyp12?hxrj!zff5duzEt<@cSUm9KQ$sCyin_4Gig~IfDy#h>x<c`Jlr4Ow7O^_SZ#>
z1BesBC!jCTk&Euq%NX^VVi<poZ+7;S%h=JU`~29O1%&qq;!fhH%kRMl4C;#Ixr5tD
zKjG;>M@yRS9q8+CL(3h9e3fIitrRT6IfM(iX(398h9)yWqLe}>!bGx-?1nF#AH%6f
z#5*{%jc|Uy^KJUhY0euvpQjN{Z%vSMd53*2VQ*9K0}fg)AHOHxNz4MZ2V7bfaT57-
zR$3)|GZM&nl0=fB|It8#&UG&Xym;|Ye=WlH#&!56BAvJKeK+?WZiX1-EToU^5%(ip
zk8xo#$skiOdQ63+XOn5v+X%buJaq6YfX_kZd1#|o(K4Cb9KfkuE?^ecZh2_9e8B14
zJir-PC+DH-769g84IaMV)HjP%bE^Rx;mN>5*DnQpn}eq>cCn%Jusi%StPB)EXVSIB
zY0!zwu^zA=;g7)Eb|Jr#&w$KD0bj(g;-^6RqJbCitNBdGVGQua{2G2LByt?^CHz|0
zm}z`0@TIU?vmvE%z?bps`Du_>_>=L=`3+cANrwa}`T6_`$U`FJDGc8h@P)WdVmuDv
z&>J|S!C%Ukcd%CSPppIdi@Z-hARm(dAs>OiRI)n3segIwDSO}n#DSkmjOr2af|FBP
zPWF*U$j{-eNA>$lNbgIm>>MNKky;h0Cbc*XUr%gY2p5Mly6KD?_acwCaRM3MQ}95-
z&OG+zZ^zl&UGP3aE*M>Pf?h}v5|Q71_#4e}R7O&qE$nPvNH~?RC1g3-KsJ(1=rfSr
zo60p>s?jpZw^MWxGvw4p<@}}+{tjMdqh*W$_oDb{J_ftbv3wjK&nJMxlhKM(&|*{3
zI@xH6>0|1$4=sL;ui<NX6JN*I^9_6>-^4ew+J(ryh}M$-6r=1QzZHHxJZknfh1e6u
z{TitIWc<<oOsIWHuDZW*+wtCMZU^9H^mLxI@wY+tU?)H)P|ZUjwh;m6u<sNSV&Jzx
z79ZzN@vq_S$NA0Z(eP)-cX-pW&)3=K<NV*8l*gU<6WDTuZ^1YDA59HwoPhBNUy8rO
z$btWwe9h>&B$tgmC>hFMGXCJqUoC!N*(*7(Wxlrk^_8!$e&g=HFaGEL_Y&WG=wFY%
zzx{*hA3XIx+dtm^@qM3!eiHrZ&VMic^3kufUxgiBdH9L13%~yPH+kROdt~mBC%&_O
zzwl`K(V0i@KUQ$;p5x<=Z#cg7`0dB{9KY+t&rU8q6>w^QnY}EdY)V<~nSE#WpPg`a
z+SvtX*Z=5!F8EwVxo>$+`Rww=<@a9jzmR?*t0JT#z9O+Ar6QwZX2qI{4HwD9go_22
zhA#zQO1hMCY1O3-m$qCEx;*ppqgOJoth%!Ps^RL|tD7n#D)TFsRxYdDRV7x%R?Vwg
zRkfu$?b_;VcU{|8Bh-jB`kMHfw3=x(^J=!#4%Av|!)v2!6Khx0uBlyD`#|l3CT~-S
zDcY27nrT{UdZbQY7gm>8H@<E{-PF3Ax><E|>h{*{uOFxnst>Qvs9)CL+u+|2(vZ=R
z*)XT!@y3G2N18I4rZ?p@&1%YR%4=HLbZ658&9j<woAa9&w~Vx?TKrljwJd4b(i-2I
z)4HWCt8I0=y<OKH(4N$u)t=M7tz%qAR>%6z8C`>2UR@bo^SkGDujrZIv#vL+cV?fq
zFRX7`UryhWzNO|M^CI(N^R|9Pe^~$2{>2080qsE0K+a(I;2oB59QVtyEVZn#thI()
zr&$-;X4&Qq%^pq~o;AGJKHZT+D$(Wv(B?Uiy?icA3|0_TvuchiUtOaf)(&Wcbh+@l
z=+(#S^L+*awvsq1IZQr(^9yq2x1<v$!HeYdpUIzJCGY%|{N^?C-5cbYw@C4a<i$_O
zTc3~@KPAOqlF~29XJ3(*50iu6kY64r2Y(=MpCs>}B7Zzb&Qy?+i{$M~<om1S50&Jz
zD)QMi@@xZn#zOv0$V*tdM}|x^9h=Eq$5!%@<8iW!gb33i*Xd)P6bwsVxa#E9>z+^H
zaz~%1Jv>*i^++A{+|RRQCwubXwnrVNuYdl60qHML%JiWw&+_wE^3Zh;bzZ*lsU{EO
zd6O)2J|~I$*^UkJ(TBQ5kA2=HrK1mqoc-55UtmF=K7}a9Ll{2ghfWP{eB5>W2l(|W
z<HA2!z1~88rAQH*pm_cvaw3$Jr-u`u?#^8Iyv>Iq<P&nu<733|a{cpnI2h1p-q?rt
zf^jK7-xB)#0#7J|PdQ`BaX&$BH#{(%-^O70HcU_Xp)Qr9&p$D|Y=Y}2h2ML8CSw>H
zeWqhLazD^7>{*Xeyn&(D(?i`l$39e6k{D+%gIAO{?~m4)*P)i5pd`zY(?z8DHnx6z
z`9NNcL2xG8<zYxIbz8p=4zovPN#*tAM;QO~QQ`SH4DOwftyl2w=j1a?uD8PRDTc(t
zT~<QZd<8?R0h8As$T>*ZBQP7XP?o=7K_CFKp@;M99}v3@=CnYlB;Cn}!9YvJJ6Djy
zTS!foo2L;XKnnhZY2ZtE{tcsJhuqFQmM369&}Sl^FiaDFgIYZgUYx;H06c_=G#!Tw
zipdMSKf+(;wHWfJ!pt}g1Lgz9jbFlr%Nw*Km~7sS*hMh%{V;4!CX;!(B=H9FzlI!M
zM|$8Ba4I)xI95;sr{Ay8lkO+|qz}%s6)?c>f@uH;DG!ed*GS#;kT>}NTxB$btBfcd
z#xua+F&HAfq=%e<8T1V~3pd<vU>uDNdmK~RU>Gh+GL9{qEWl(a!{eKtVh_TIv9M<a
zxeep)IxM`+$5Vi31suh-FcHU*S)_%`hDx47rtm@d%whB#sNKh)38@iCpKus=5#&ic
z33&G5IgY2E)YFsP^hgKehz^s?+jtdoCdXk9m`CAQYP}Z=t{b35A9a?-Lit22oB^9}
z8gi9W5(l0tI8-O|O4dsrBzv)dV}S#+1uZ>?oZ@&~vbCBl=Yw$sV?VnhY8osGdPJiZ
zj|q<z*G#Pf9FJ?GUL%z-jB&jdrWfDSwJA(`8<9^FKAZ5_NbUd@PoBV2gXc^3yhy%;
z>W?Pvc%yyvlT+ikg_1sG5-tm)7lv`8pQH8p&pvq#uEe6cz!%F?QRF);gKU8__Mgc;
zFu{LD=E7`U2yUum`wng+XoiRf9=!h^YCt`D$DRkN<-|rsJ%d5=w_LQaJal2Pk?uTl
zEG8Xs>B?X{;UC#^$Ai>7yYs;v`?v(q1JE(4-}@r6hHOWZJ__|rUm#fDDxx0@4@5(c
z;=x=RaBAJbzmNMZKE80#!r`Sm`d%cz!G%X(_s%#W#uXkXlmf@<6VgfqCdZ|DvY9VR
zry*KeW?B}S7keMCqjZFY1#omll&)_CaaeJrWrMvQD!<KzapAyFCio~~C6tzki{h}J
zO3TB=aO03-46s-(PEMPPM`|>GYIP9hGXkAG6XmY}R1m8ybe%O&^7lji{TAx)T`0wF
ztZ$X#eAjF6%sve7=|SuP1Y#yI8}qO&{9RZfcots1Z}K1W-wDw|K2~hr#9Gbw!g;|Y
z^oUEv2Sua!JMpjLzr?S^(_*FACfXDlMX(}Ku|{#b;(o>N6|XBkQ2d~{q-a!_mArDi
za-MRva;NfM<x|R!lopjr6{Jc~Wvb?@)~I%>?o*vpE7ddAFRSa+z0gtKn#VNHYF^U3
zq4`L2MC+qX&`#0jYYVkowa;n)tbJGex%PzivbI%g)v0uWx;Wi*-4@+ly2o_S>R!@)
zp}VMS(3$mu-cLVHpQB%*-=x1&Z`A)*{|bCx+w?a0>c)Ca_R95I;kDK4Zm%c2e&O{;
zuQo56L1PFuBpRj~<{4HSb{g(86dQhHc*XEf!xx5=hAV~^gT-6r9ps(pJ=Obf-XD5@
z?Oo<w>D}sW@lpB&_>A*O_xaY>%XhW!4&QrxfA0HB-#_}+`gZ%;{ciL7yWhut-}#;Q
zGx_!S6Mt|21OC7FuL{rv+#B#@z^?*c4tOiz<A84iGXn1jd^qqx;C}`FE%3v@uLH{h
zD+5~s2ZNMB0YM2tQ-U@G?GAb{=!Kv+g8nC{BB&v#FPIDV4&E31dhiFqhl5WCUkOPG
z*&Fg`$ia}`hrAZ@LCE2dQz2JEnnP!V{vxz8Oc~}MHZCkZ><?kDhkX!sIP7%T)$keN
zyK#3&S$Ji5YeaZNazu8-{D{>NJ8&z)lM%m)csb%N+`!Nj(H|*9`bI|M4F5fmKac!n
z<R2s7jQl9_Ok`DLTckD0FDeFiNjw|%V$>T^{}c61)S0NNsJ19;v?@9P=hPpLE{%RZ
z`c<4y|04QC^rh&=XmgAh;~x_nGbv_v%+i=mF?Ys18gnq__c5>GzKFvyXJe{k+GA|v
z)Z>E2#gEGvmpg97xNYP1kNf$!#@MLXl-OOd_r;dPJ|Fvb>^HFkaeSO_Tuj{JxR2s~
zjMv9ciC-Rn8*ci0KK_;Xx8uKxKM{X1zCOV>Atqr@!UGAvOE{KLo2X2TN?e`zT;i$m
zQR8=vzkB?bN#04}Ny$l5lO9Mqnyg4JO#XFpeahaH-=%z?(wZ8UnwVOU`bg@>scor)
zX+oM`+SatY(|(rrOxo|$UQhcl?VGgI6Xr~KcEW2D-k)%MLfyoKiIXShPFyjuWTGjZ
zPxnrbOrM>;H2vZ9Kc#<^{&jkJdQE!!ByN(|r0_|5COt6e#Ytx-bxsbQoIUxj$!|@r
zpWK^~nUS0EY{t2anvBkj;VIfF+orrQr6+S-<|CQCQ^TfioO)pD>r=m-+LjfTwJB?N
z*8N$ZXZ?`vmmQOxmOU+dVfNbW+p~X`T`?_m+Olb1P8*pXIeqW+vgw^O=FWI$#@U$*
zXTG1K$Vtp8%`wjkoOSQ4s@cNqlG)v}9do?qgwIKylRantoYix7&bc?&H+NI+lez!S
zy_VaSJD4ZrdFO@aCFN!2<>oET+mKh3cW>SkdC%niKJTx2|IAn9`{qaHC+APi&&ywy
zzcGJT{(bpB<X_Hj&L5nsoEtbde(sdH`Eys!-9Go8xsT6%dhUPC{ma~U<{p~+?cB3-
zE9Yg-dvM-=&8wO}WB#W3f1Ph#5WV1;1vLwr7IZGuE=*jQzi`#UyB9vW@VSM5Uiibp
z{zY>a{ch1;79Cq;DbN?pELdEyso>6n=L-H(@P5J91;dM{Eq-zFz!GtZ-;!}lCN0TZ
zvTDigOCDVE<&w%JLrYgIeSPVtOV2JfEj2GwFN;`~zAS%P;j(?po?iCavX7S?U)H|d
zZ+X=6^yQnE-@W|l<u5G%V)@DCrsdWZVJoJrxM#)pD{5Da6owY&7M@$Vb>-Go{;OVI
zb$In{tE<**SW~vfvUbMW6>GPy-M`kj_Jy_YuT!p@v2O3WXV+a?KWF_18@x9>x#6>o
znvDxKzP_<+W5dRQP5zq-H|^f^%S~@?`fgM6X8q>m%~Ll&viX;rU)$olW$u=pTb|nT
z`j(@&rQEjjw)0!1t$*42_10_K$hPQhx!bmFE8h10wwmp!+m~&>XZzdR8+Ryn#O}!3
zv3<wScf7UZ+a1+AtUCjCPTIL-=kA@-&ewK+zw^hPmfNdt?=Rwtyoy4L5{hz)))d`U
zBo+Ol=#`>(iw+l^E2=K)*`?n#e%JC{Pwo0@*Qs3%yX?DFyYqMdZ1>Z<|FHYb-G_F6
zzx(3uhCR`H^7bs-vvJR^J@@T-YR@nCytwD}J^$MC`JQ8Y&hNRlr)|&R9r`;$?wE8(
z&K<wbg>_R*M{w+lVYE?5|5ePxsHQ8WVHl6}qVCJ@xZa9m---3)xKyebH;%NmrIzUJ
z_B-!%L@nC0O`S>hNTuRC?~typT*m_?gvH118qvlOeCbED132i#bNW3vSaTD#(?yN<
zKown7PjMBur24q1-5yf5xu~A<ZFW%;Z-@(12^BC?YB4rr_ecla^`SHY6+9*#5G<3)
zJ!5HhnU?9MrGiUSz@<QO=;M!HeO3OesHpy?qQZ2HyeAn|Sy_#ZVPPjuNML+h+mtD#
z2CS&jvqn5)DY$C4&%+euHTh4OnX@i4Z_h)L=1{`b0`l&=ogaTJ$z{YICk$@bXQJ3r
zS5;MYsr-ETC49EDl(q1Ifq}M`va%LC5YmDfh*Y8-;T*OB{2Q{3NWLddoT%*Q0|El7
ztE+nyky%+;CGjRxNbL0K({mRsS-KdXafU*!?#!7p^;}`0PdkuSpF)y|gd8J8trds+
zu=^qT=I7@p2P;}zTZ4jvhFdOt_0?BSiJ|NFc_?2@x7n^xDD39$y4sr1kdf}X^QTXr
zK3~^u4-KuUt!pI>(zE_U!;YZL%*;e@(sSk1sZ&jyNF1dx{@&uy(2zqHoHT28+4-K}
zl)}Ax_pV9{>^*gSdiI29k|{}|!%jv<jQ-}ztEUbfI`n-537uY0P>>!Oq323(l1%|w
z$&%ZXIaYH0eu65?h=Wp#`9S1(os7sm!v7~?%2bt$+TqGI7QBfCZ~R5Ex4ogEp}n`P
zSBQ*^6ne`@tMrT-t<y#VXruU>OuDe-<m512p|0t(&pvC?6_R+ofjY)=)u{29{uzN3
z<XTq7kFBNFMGc6D*?JR)JW=VYu{R7^rBh6mA_T0g#Z)Y0)rXvrl%|YAJkiAhl~AW_
zy0wLpn4G1li5^>;z*|y-Zb=>IqJHNgWvz=^>4B<qQ7s;*Ru|QF167uUP)aT4M@aNo
zN#I>EM_e)2fPZVy*2!@vkCyieJ~2u77w0eZSCy5i6rw0tySuu&dI#;okkx^X5=+cd
zKxCw<4!z`>Rn;fP(vA`6tr1ELP!FO2XJSt6?eEjnRFZt<zWcZ5rbZ9d;GZpg{Ipd?
zcUf#=NYaEkD^{$So0*gpp(E%*CbC!xtg5o5LTsi5+k3Bl2g&)is;8%a#Hdhdh|Mx=
zRPaizAvoA6PZ20J_0upwyR`I{mGv@+>QNQuPdYlrjXPj4nNm}Ag@rl>NeF0%4mn6d
z!quzJKC%+2EJrFy-8KPLBNlUgWsND^f56;TiRx8#bPft$erB`Dq*RL<KNV?0kGA0~
zy3!b^6#56FQ1!_Xq~#oR!iE0O(7HNF$jr|SEKTy#aHtpW9hxvTZ+`hDOL)#!=!VVH
zqZQSse+&tkKi}UwG$JyP<Vq4ZGJGJA8*FO0fJ*;pCcYWqLb9c{*4I}O+6M-QZ`Kob
z6hrPoy4<lc8{ne$d7uXV1XY$D1Em&Y#VL2J>}XsuyF8?8aZ$ZoRF`D+_g7VQ4vFBf
zIAS){n!<w=W^-Q+IDECW)2a(#95&T8qxpoumX<(C9554aFJlN;?3W52XT_41^WbqM
zbaGwYpo1?>4hhN4jrO6!Blty6m^Z(?qDcswu?0-tGA&HeaGo)F{?s@!Qxe7{B#e{9
zkzwq`8bhp24OPdSoSp(sPw@8g^7Rc6hf8H`GY&F=88q<~#j>)V7B8=h7rne%ddkYk
zRmmtQ+S?T+f;Ki*Tk2~v6&5BpeDzgY+E-sSBo`JE170vBBp6DB-pa~eXL?GcrzBVk
zK<D7DV(XS`HgJ<})@%l(F1Km5VYE#(h)KPn&<T<IIq7Ky&5>kCPrGBw?RK2}leSw9
z**~`3Y>4R`RWe3XcI!XwEvbPn>IDyR?JjDE2dcwG)p($GxTv}tsB(Q+%Eee?%NSdq
z0ar|eD<<7JO#-L<dk3+rUv{Rkmjnj~*VfiHv}1IW)WgG^y&m#oD&dBPOZ~$g%_h_G
z6`A376Xj@OUJ^2rG`jG(gmgM^=_OvT5uNSl=9S(xQg*v?c2grfQ0X2t)@q0sZNY?V
z<)*|Tv}BWHgsnv!5|=Vu>P1V?y7|#{jTva$l^`vW$e_f1`s0}V-F<gp<@GHo^9+lC
zR0dQ?!>QeTkvsKsQ`6j`AgOlbJ5HP^Rnt6mvG_#<1aJifV{)>&#)%&9u{m9$)MDO*
z=-1gAaw&Xd+Mt_uz5J_89E7^b8<36cktksdN(e1}q&Kd%HaPfX7#P$5E__##ON<i!
zN}<O0MW4Uzwyv&Jf3RqdWXvURl;k@0a)JOTYe#wy2KCL;iQ>Qg{3<IaAekB@bG(Gi
zE7h4y6TkQ(C8ZwG^)z}7qKAyBbsu8LJ>{(a`dZ6&63)naq{{WyP--zhfb_59i5#=b
z6|=*YF7=j~jPeG%%R4+g!28j%SGEr#hLIdAA@e0Q#J0NihaXx74g|Za(b{_D#~*(9
zAtfaxIasdJHB>3A7+aqK0XQL%&G)yrmoOgBLr&Q-gp4!WIA~zbX6|T&*f(~V9X?@U
zVLlFX%SCA7i!G2J2}8F;97f2dAIFhXr>^u8??l<~?Y(lU#McKeP;VjtfyWLAFZu)s
zP{GkN^7Ch?&Y#cPyLVQxH^;$e&Eep<f}qwztwC;WCG$h!8Y>28jpegj$~{qITyd{@
zh^uu`y<Jo_>aPc<i-oX$kPj9M4H;yXRLl(wjImAKqnNKNKJDRh8?$m3^FxR|rj0pQ
z&H=8Nn-Fsoa!xZ-yGfz6o0Va~!NbF~wenwZaG1hu^Fkx&ZRSpDa9r&q{jf0Xb~;jV
zS3Z?s%+%M1gkV1ASCEMIxX@05($F4hL8Se{sgks)2pvX1eMFSD-)vsAXy;D(&us3;
z`Rv9YfBdmQ6P2|QgW`s4G8HLX2Z>H&<RYg^FomcgR8S!KovJ4V1=B-G>kk+fe`uvM
z6enjUpav6AgCIH&XliO|?S!dS)~kq)j#gkQP$QN2h+5w;%nS&qLs~XZ3o@DfW3#if
zCq|;X7K$dwX`M)C1tmV+_0{F5Cc#{6r2aH=bLKM<`AkGU!9znWBS?It1xPE+u!W6%
zHIlF4(xpp{_8?3(`uh4{j2aA22kUf^eMr48Qm2cZNOO#317y79YhSczQ9QYd9GJk`
z?RMvwxdA!R75vm7ooJKW1yjG~TJ(t8`WiDIJu#?8p+}SGtg;PQ*@>1d=Dd|g(P|+Y
zwNb0qkUq;08slP(WH?veNx~+fMJ9!j#<QnNQlk@-5~IV^Xcf*kI(0@~UfzOb>!W=~
z1|8YnUFXi7Yt%$fU55r)Kb7QQm_cWw>7u#A1%Wt%g7gIi3-YH<y>opyX<_ZrLV~kL
z+hZ<DpO4ay6UFA%=6d|Qa`MzwQ*D)hP>`b?P18&wA|k{_c|tAf^cn>>Vz--nC4)^H
z8X8LKU_EJL>BMcE$&@r<+U(i0=g-ZWF>h|(tW&U{`q5z4ma}KiwxPjNq*9Hb5V#?8
ze}C_wWT?JeUS3Yn)?#}(ZMvK0W+Eo>vi5998QZJ<e}XFaEE}cLu`6Y?XBDBQbf+ey
z*E-@*ocbO^y3IE>Ha5~nsnwt}@eV22*4Y>pA7da55UC$8UTNyUEWf3lbV*VG=dkqm
zU4!bp+)WhT!6AX(dV{hgU}!|G^QZbOOzr6F=<Mj~x7h5Z8PVPj+fdO?%o257n5eYt
zQzH~st5pn3%~`s#u%%--ICbvrx8J@wH*U(j#fulu&wySw1}JofnCS}^ESMe_pzN+Z
z_hWfYd+(4jV5q0LvGN$E!WTQOO8=<Xap6JUiZNr2H;O59OEG^ex1u~y>3SLEmXXqm
z;rcdzlvi#WB-%qfxBk+|F~i+47b4AtNHb0p#g6vY*6PDQz-X#%03%z6Aul~2n9V_9
z9Ty;3<O+I0WSCKv5!T+()z&#^^u{W{l};sI>j;8GWki+6p%>}qJ@(k63krAb+O>W8
zjKabhkrs<3Hg~~-tm*R>Lb}K*By*zOC>;LYZkJ$<8NFd~C8%4D9zANVfmnTe!pSQg
z%BG{nFPqnk!91Lc_$-noiQV><+g9+n1?sxlyevmbVxhcABP+)8CW6v<I(#`+T+eYi
zrk5OZ{EabXT98bObkpF?N>XF6j@D})0qek?nqGx$aW;2Ti<7gDl!%Rxzs3@Dz)~+g
zoX_Z>$%alruj_yTma6MGo|TmvQmhkkD<QZ5DBe6)y4Qs2Lar~hJdzH(Y|bGMRQI}%
zr?~iaCnrCSd5EiaQQaxKN79f!kTH_}h|3evo*qWh0ayGHSL)YWg5eGHFwE5uI0`d8
zLZzG5$>@rwaK)n%tcH{p^K6yNNb@8Evi_l~Kk)S?>M-$#zNos>P}Z;=52{D(cVu#R
z?Im|obFcUy%Y$0u^sI-$M?BW6ujmS|`q8WB0;xreckp{XCFIFcgVMe?KWf7i-NX0z
z&%B*HNMpYYEA(YpSKDu%hx3RkOO*eEW822>mefcWb<jgxm5Z9{qEcI#mflMdr9Ekz
z&|TS=VLuMZEGE1J^-1g!NhwtfX@(w|@0|~K5+nJw;5+|ul1rYEO33n3@}XRQIxC=-
zvR11Vzv~KxQYTe-;po%a!9n}J^zN;@catqhwOJxdCDQEdjqdiTa@JY3Wo(^&kd(|3
zPt<T1war6Zg^L>PfjaD>#=EGr?fuxwAL~}wp-$pkzHMm}k7kh>CnUlCZ=o<3zc00R
zwU~2=d{-ddG-3&)%~@Ju_1L=j-IA(uQ5~+h)OQ@^A*vCD;>RB^qfxkk9Er;bC{c|J
z4Q<@Go~)6$>T3FTo#iR(n6dLFx8Byva|?@mZjp_gvXN6b?6MY^Nf%CB@Z%i=%s5lQ
zep10WE0an@QLEPaNQN-zXg2l_sH5oE9}WvG5%$uOjSJ2Xk2nZ3)1b{w81<(hnzhT?
z*C81y=s!B(lU6q1kJU|OPX4t_@x(vRRJp!-l#h-0Q${uQm~~uu2K?^*-@PE7fYQf0
z?oijzs;#S*i3L#nW7lyj$qUZ1*q4nhOZzRUgD$GcL);n{)#ia(>!JpEpq_D2LvEnT
zJotuEi{WLoY?KGI&1KDg$rUr)6>|xwOVH{G|EIMyx>WhUE~6#<<Pw^r`iyG{4U3dN
zwR)CprR$XL)iZYuZoNwBp5@)RN-1-Otu+?In=N-NXa4hb$m`2Ax;Hp-!#<nLbIvvP
z47hee+;P2KYa&0o*3R8j(M4_WKowlGLyK#5)E!rFt!SA%tSebu)Bz7vwqnbynr7F$
z)19(=#j5;<(NwOl&Na%2u2IGvSL4#S7MI3#Q{iv#>~Ct9{&Q0sT+-X+l3q9Uii;|E
zpnBrf=t^iY?h(m#Y(=l(_F!Q9XjD2Vok<SY0Q%#!SA~#WqtrV<y%YUr%7~y;Dt$?4
zsAjO?beU2yG}wU&QC*i6=5GIxCNMbI-%BG74(p*Vt=+KdOxWv?ym<RSPiJ39Mn*=c
z;7}Nq8e*-%R7eWM+;W7|8*njTd3j|^Z*)kI%F<X~GDYOfX0sr+wkqPMui0$w*T?5?
zz`re9R;^l=J#lKh!Qf}`^UVmcAm7=WF|$~JML#K>7u71Qru)j3E3KA61IB0F@bt-(
zCQTxCo6R=pFpv>DnKUU<ur+p@c|+7B_Y6$#H3CYDnhzqe>((b^+OSOX_C)i$MLhpo
z(4u78RZnTEZ;{`CO!M^=FHELIx@pw%pmi|Hlu$Q?N|anXhfE7_(|!pWJnP6D`v}_H
zVI!eoqP+!;&J7Lp)z|miY}O{54{hf@v~!(K>l+dh;-k^|>CmV(RTf=TX11NEYjTux
zQgr4kL<KoeI69l!T3Z4k2$6#0fOmivxALB=>Fo;)2+$1FU6e#D4Gdb10Rw|->~GU_
z&DIgDj1a_7l+59WAr@U`v9*mGpR;ze*{n&Jd)o$sQV>(ZN2n<5gec4nGg#Z(+pRuP
zljbj9zI@BZnNg~amKDp>w=^p|v{6}WNWLUtzBV!}YW@2mD_xdBh>BLUG&c5;i4!6f
z1Kr&{N?pVxDS{UjN;PP_WuT+OciOaRk-i2y(djxcu6M}NlMg=42cKe_uauoRqfneV
zbGE9vu?~~Ky2cI;{NdUfE@5x|QX^ED#KmWoaK{^rSl=u0!uCC(ycnk?eN|;8v1?av
z+_<s1dEL5=YuDlg{jy~%R)q{<`+g)SWx=|2>lVO6nof-DB_T>G+-f?DCo^Y;D>{*W
zRlg!&!c4hL^yE%1$`ozx8%E;|_nG@z>ziYO)#e89w85;7jB9Id?;|}JmSm3m4ck?^
zNR%arwBnVf0jr%WjZO%r{g4Yz$XZ>rvv0sJArJh`OYpb!?cB9)I$0-4VWS+fw_U5c
zgqR(Qh?z5IPE1G$RlBWyS;iE|54~#y@y7J7fLqX<@e(}63%o@<jZCw;<INgvD?w0z
zFA72MiwFsUS42pNrgz8-A6`SfwWvic+Ui-Z>UfFIjA&9;R@FyT(O^y>X+tx0boGHN
z=AI67ds`cAu;z|9UrSqCo5eRSmokVplZJ!nXwXV3Wr+`#BWKP`_EuPH&`@oPn3>mE
zuXKN^nC~MOsZL&oW-A%x&h@js#wMJ6;3nsBlVuxnEo!m_G1IInM-R%aw{~^6H`Udd
zZ9FQ*+sxf94N%N&W-&ZGTr}6CPW7Zk@`@*pIEzIUGm)5khxiiWIKXRt4MtsA8P-Kv
z^P`4oz3s6{4u^NBPsX(Qh3nTR=q;$PMW2w6xoG|R^@|fUsIx{E2C_slT)Y<IGedE;
z97jX#!@QRiI^5UQYJ%W4_K9A0tfdDw9DVc6H;;D(WxM;#T$Db>YH^^rBZF3A#TI$l
z$wsR_Hle+9pe$uVh}CqQt>xZQCB(!AF%b<(oVE;Iq-e+7MDPBd_3N^Wy8HbSXK%r_
z`2VRFQ(miM<UK}3KYYr;<`G1OykhP9dTPKese!ko#yF|99#hshsaB6vt&<w)k!o>L
zgI&~nP@{Xn<E)6}2@@tv%?RmKs~rx9+Q-MoTOkDf@0<_x^HV6bzCIR5c$m`Gg(h!l
z(RuleYK))I(OGF>YPDJ^_^w&9a@DF;E0--^G;i^OtpB~4c(d6m`3zZf@J=@P_(P^c
zgUtQr|G4#VyqvXOn2QrsLo;a`9vOg?4cdqMhah$1Q+$S7&!5$(9pg_PuN?MEW73B8
zeJoK2Xf^22N_2<_y-I|=<3I<pmBb`v7C_1hGUEM4&?6dK)bTlMHum-VH*Q*&9k1^|
zmP)Nwqf{saV}RNZP97F4Shrh;^;(A`0;{GGviv8YL<wjcUxUFQny+5%t;O2B0-MvY
zCyTitZ=-VJ#EEgCWTHeSmiYGe_WDlRxpT{w9Xob3H}BX1eOAmJZ8mDY`R1FW-;sYb
zH~+(_Pqri7?MOF$&^n^_y?nN9P=Ns`Kx?ycR4a_wb$)??Pzz1n1In<_5N|TjgnBh#
zr9$!-1l~?n|6uU=z>$#=+YlDqj9h)W<l}Epkdr5yi8hugh~|?e=_#54%RtfA{1hEV
zUHohB0XurTI{O-1TQ_amRFIMC)6w2G6q>q#*=G5YF=fQY2Vl1?Dy*#!OZ(O#PM`y;
zR<G5<k&8^67$^+XfeRf%$i(ZkqdaohQ9|^@2#nkwMh-?3J<$T?cphnLnHG0rJO#K{
zjAIx`(|99AE{R2s73HRl+Q!mklj%QXdy^ytw6+HPXS|=XWXZ~v{~`aUOG2-YPw#)$
z2u$<QeI>ff8bS@53un$>YiOo>pXi<1t||;>bhS{ZH?>-f+{j3YLX(!3=EaqUP$Omm
zT$b|}VzqxUHe{`aG;|y|2^cjaR=WZXuTd!_WnabN!-p?-%9g_Q<J~zn-uY*Yj(6_4
zkIpp{wB0b98?|H0sigFg*`ty|XEyp6EQ8Y;kaFp1fnDa%ylytpy4SPh*h8Qr_Mkhq
z+d|gef)*sxu6l~+kZISI$Ze0a+`K)->Xc*ox@mOnn62Ro*cvXEuy))x4%CCPJ>V|q
zpd2&69g}iEN99^{RMe4ArKb@!W+^O<7svX+c*))eY2=Yn{?RpG>dhnRx^@2k{_sCF
zb>gLB5t^;mCULfr14>cEHd0IsT{Oib+&d4^i`8@H%$c39)#k^J>9ZO+mr3qi+~s$A
z-(5#@`GC+C9DnWm*0ff%WV>V}rzJ81liIJ;iwc~1_nsZrcu3hc$mAnht*^wHg2wC{
zX%SOiVIADY1>DTNC`v8HdBkm_^&j<<^Xl$rB6Q|T<0b09A#s*=No=SD8%n+6MGTJ+
z@NIjL{Zi1P@+EQQd~je){zJ6xY`tM{>Dc@)lP_uh`Q*{j{N0>U$Xp9V22PG%-(!4C
z+!4armg47RSkJ}XNI15LeOiU0y!>kU#k$s-s})x-*R*!jp+8o_PeK?m*PcIrUZc@i
zt=*NhGuMJ~jXgb9qu6@2x^ckB4_QYf)u0Z&I*be&75+dX)CW?Vn+ujMUb?hk!Q7l#
z(`U|}nKdOF`=HqM?BM+-0s}KhX!3m8;}fM~f34OpD8QTA!djI^hfkeWDXFfVMc@D7
za)YF5xJa=p4NhKBAM2?oc_>PL{?hr1YmE){vd;14dR<DVzrDxyj6xlWBIyr=qD0Gc
zb7sz&H)pP_a9TO<@v_D#Mve{DW(>?)A0Om<^~dj#-KneBwT#^RMXFhf`R*HirevD`
zEoeA6NaGpY@!UO}QM}v~>PtfXB@;PrSPd<TdNuV8-=d<$8rsiVj~;F587>uWsC1%M
zTUU#wM1|*0rET()9MHg=z%PeRRB05(TXSP7$~Oz;i!@uP$-r66-OVr<n!9hBNWj76
z8Thzh-q7ltH?)?OL?+0_cu+#-VmeRAylJ8!g<`g-P*FjEBO{%<MkqQUcXZA;X3SS$
zx&p3_V1hA5f57AYCuuP<t=3aKtxOAa)7)AWzAY_OtF}!8b&OWE$T5T6F=@Y)tpz_y
zGu}v%rG}GZg?XY;uOrmY;<hB{op{T@`vkiAQC?o#QCo#oglbb)<K=VZXU+_&V9P1{
z+pmCQ%%{T0e|x0bC~Eb@JYe(-%A7qDQ`I)Mq7bPdLv>{(3C+#xH*VOldexG}SWPG>
zC|tc^!`gN0LhYEF*<qZagDj+r3dOL(bXq!F#oS=nX7u9}YC2_&Q9#q4x!R`)PIs;>
z6rhX+C}TX;#btF3l~s_As>+526wo%}jbCc@9<dF#!H{bkM&*r~<5e&w)jC$hhzxT2
z^tnb7l$@HH8t+TmD^8chQ@vT3os^W3larH?lr(4cx^=#Tm*J3bdC)htVC~wq1*v2b
z5}FY1E?&2ZEL}P^Kw&=r`RAXX?^pOwUFwt{y28Jd@(?D9f1rW0C^Qgbt<t9Shlhu$
z+oD6K!zAAXOScC7RuX2;&I~frb$-3p$X6fvR>HDO-4IdG#Sk{%PuSSj*51<6*<+!z
z;K6~ej+U0@){RL)Hca`4f|BOK#GOm0{DNJr;EZ9mVTHF3%BlfNwKHd?2P^unf{U$m
z+RrpIJsZHRe}&?F`PoaAO*lVt?IK<wmGCC4Y3MR4ux1&hQJ4BQH*eaqZu6$C8#Zj-
zfX1R@OR<+$+t@IK48H#Q>r+>2W!uTEaVn`)`Mbvm_xRzB^nZ#b%CzgomTf5Ic5pJ?
zV#i|1>EkUHKX{Ks=?AU6PN!22b~QCLL`8=vEu9!cF4XmR(RqM*h;&PmpWSNitpkVa
zdTpA(5UdGnF{Ki<US0u-;A*sTq_@4Lt+U5GI8vG(?=xgJZ@X=7f&q(my^0Wx6<juC
zF1T&at`W`<Kcx`t-8erpXZhyMo7d#PgFs5*a21yy^nRp<xAt~+b@tjs%5O(+Z&xEE
zyJuJx5IHVBCeWY}WbU|mpho$?1FhQ=!A%Rk1<fGSCU}Y$a*KG*G~?Xy)`PEfTuy^E
z;TY`2noV8B>9UL0(AB#fZEX&^bgt>|Zfontv@>+L*F*(_t{gfXMlGUPEd6G>{$%ur
zb3|>oO$S#nq%ok10BijZq+#r}M9<m&<daX{h4qk!pL*)4J6B;DG{e`|ciikX%a$!n
z!_Yr|&LS#J55NFEe93IoI(oZ%y1Kf}7K_aouypCtbf1wL4Cipj7^pt|(MKQs`>=Dg
zOc<5jc1}K8RM&X!oI-K#9Jz!d_EbvB%1aoqoHN%D1x_Os6&3B;T~yTETvS9hU=i3q
z#mj46E=(hGQmZ}b?6=HME(ZP}H>WEISFesqTbww}V3<}yPgXIfaC*23|Ga2^$ZmI0
zb5Y;w4U!I7At$0eDb~|z9aeH^KGaVxaB%3@`J3~C2YE5qfW_IH>JgYe;m%!S>atc6
zw6kYx$5e>r<CZEdN)L&fh`Ns%$NXhlyqlJU@-crwNC#E1XPO4pP^!(%QQ`jKzNAAs
zpd4t%)=7t>gf|50OM}`QWy^DBj0nf8<;%NUdTloN_!xD9RvR*T$&w`#VzgR`AD`xT
zb6?QW<mhp~tg$5%Wtx{KTKFyECCaqRp5pn8Nz*<0#teao(YJ0AVvZSo?Q%?SPpO8;
zv`|kpwM+~4L<^8<QEnRDKd1Kxs8#&Y2J!f}<OHS|M-Qq6``%gJk3U3yhDncByHBfi
z_60gGp?cil%OCC1mNom7f3Isl1*ZkXlE~2#va-}LVBel*&s3eu%&~<|hZ$JRX|=iJ
zITw`3Z^qc6!?G`5kK1Z=OOyT<v|yQb!Bad=rfJ+X>J3BB|9J6A$JdSCXO5oMHy<Hq
zq+()|uwhDuag$4_mwj+x%M|^C_w83_<AO9v!pwadwnHRxLYAg@q>_wO{CavS+bl$+
ztnjNSJ9)kwqRr-r*UWH@kvMGk`04eLp@D&#etS`J=bGDZE1XMx+2}MeCnq9;@}(3q
z8?J>+qNlp+EXuuv$J=9iP{1u{(K4;kQ#_4K3v<)lBPi>y(Qe9EFPT)n=Xg(_cw!>S
zI)`EZ3w}i|d6rwgRGfBFdv4Cns|wiNq5TYo$=LFT-hyV3X(R4<*ZaquKTq`{7my)w
z8Ssy3ZEnuZolTN{(my6do;`-RQ*(28><os^9@nB>lRfYF1_ofCS8>BWFV+xm-sdG6
zBOK)M(+xLl?j~cG)x+j4Z{zG5?;Eys;WdHZW*@VqEBQqD>4Y0Ma&Ml;<5zeo&qr?b
ze~_*65t&Ahj*XEg|69ZhxCJd*rqy~%ldUGwlcgT=8<gV(d!jkZ66cA=$?>AyG`IY+
znuob5OVO4q(3Xh;>^2y~TG1zz&O8Hxf`jyYZ>JC%5-fE0c2vS*tD?@@l4uzqFxj~3
z6D0vz*to*H;%q$$o&XC2e)CP|%SsYE%mdUK?(f1L7~KSGYQg_Fy&2!ky11F^VYO|V
zO|4?x(1^l7C;wXHECmQ7!*pg5uT?l2F}&5<6yC{ByVxy{&T|68h(D%<m{&|OZcp++
zV<-2Dd5`g!zsyh2*qMl8zQ$9U>_o&*<i}1s6yt6r4`uO_R|Vod(Ri5_<%!15K@{_$
zZW>*`)1dusb&5^)N4fP$H52r(yz-QD|MebTa<5=MG{v|N%XMPx`qd@NIl8)ZHDh#j
z$=z0%ebS!R?DiaR(*$`3mUr*KUcZxOaPHJ}x^`-=rwUFg@1kCxE|YPMd+zL}S>^T5
zVfXr{n<mP%W>2)S@!Zyl)w$w2eBFwxdsWq1ewBPeS5=2&)_Pu5Rmr+{s;Bi%gS<x2
z>1mC?X`?i{Z4`H16!M5}a<`Y8<|U7AeeN;LO;gLGiqi8q!1&tf)*bG6%ulMA?{Lc{
zrBS&o=Bvn8kO8g;wf}6i$5QUm+oiCg(n=1)w&S;~0R83btvfk(3pq(+Zw2-3(b(>^
zPm?z&bswnTjZ$w%+B=apH#lTW<E#b)X|Fu~J#m=ZufaAhzg&Ig%GJh>9_m?6%x$0>
z>aKkM{r6Ykf-iY-c1v$}pWpcL<3m&m-Wb7;bkt$ih?7_%w(OPoQL?J4-eG@(m%`ds
zRl<3zjA<$#g~BH+E)}x}ZCKh={L9Y9ft9$3=rDi(0AIiOKp5+B6QLec=#>Rt94Cwr
z$6$AN_n^(j8`X}X-~imyz;i|)2dA(P5no@0qtAl9dY!MlCXj&|(R~)Kxz`xb+k6d^
zuWQYN*hw91zH<Ed@hjx4M14k#I2b1BE?w$!_~DGXzoYX~2^XZpc4bf;HhE)%)PsYA
z>YxO;s3wpJk_4N>QR>A}e=RZyFINjuhsycU(L#azB;1TqD$)Bu<Pj7%%j2psti8%7
z9uWs;!$*%RX|)3b^jw_+^Ubz_5lI7&*SZ0^#h4|LtddZAc8DEZiuErP8*#3vQ7lxc
zrcWpFhyyR!Kwq7tft&sW-(Iv54j+u3UUHYFf|e$6v@}l5Ckk*+<^^%E%vy}DAed$p
zPAkUY1(%&DYd-_AI`vz_v{C(LKz$6jsY^jq;CY2uRpwuHji$oQAPUpng^s)LqDgUw
z<oaVqiEBHrd%w}%bG%Pz2uBQsDT?MSBvg*(osPHZY%&;}8TRt>0$=JvL(9uQ4-LI?
zq5M0{Fp5R+sJcnwaA;I{;zU+fQ`NB&iSO!lNIqC1UEkb%&pr1wH}AUd-uuXUybbOw
zFOcYoQe{EGp+oq3b9<R6hoVP0MEi+cd-r_^b`SoOp6*hJM%?izy+)DO|9OA^;ltL$
zxsHc~4-Q*Dz^5Wl@p(V=+KY;zV|fonMC8%SF}aN0d8CH?liQt<hx?#w#A8Db<)LT3
zCA}!~kM2P4L7GzrYzn>h?D@t4H8zIA)tHp_YNE!C8>hE+Uac_r>KxX=u9lV-)8$JS
zFPngLnn|xDMGg%PnrpGJ(KO=liH?cEl9E**f!H~Z)@wA114_YegGDMlGbO^C*sObY
z&yE_w@>7c@C^R%k*Ky&(1#58niq$PGW^F`j&b)c^(ltH3`bj`?QgM!5id2WEq)Y=>
zCr7CJV5&efsQaquy&^wcu57Uyy?CD3%vRp6@zD~yU7q8(PR8PN?WY>e`SWSD@N<>O
zyb^N!fG+);ZzeP~tzBD}PJAT^r($vJw#I3-OaV98PKG<?AknLuntKO_l<MaCPFFgT
zmpATz5NsVC9X3JGc$b8_)79I%yJMpK^|&`7IXU#YTqLiK4lBgY+Z!kFy{sM1wG`T}
zbjQxyooirpU5h&}!CMf#OT67VjEt;aczwD;hnLrAYNMweyxPj7SJ+9Nwm(bcb?G-;
zKh6fcr&>pQec|9b;KevO{To>h+;Z88cV(-?;yQCpS3qM?LfjD0)XNECRh7U0kEc$Q
zU8VjHw8vCgN`$N|Vmp8<0&44<nwzIjKXq!+(nSeDBwX$#3m26LhYqC%J2~yvAPuyC
z%o*(;?(nNL+%Pu0iH6S_4X3vwV$>QvGbPprmo-4QNunw1SYZe>mh;4vJKY)@KYld6
z(`Lfm{c!Isg(E@M7>XVjw3I^5wv1BZkY@_GA^B7^4=Ysu;t#z(7tWkMagtnias%gV
zzn3_*ct9T?A2%U0BhF^OGsow#JlwZiEZn&Un}x;7{QUgfIgybP?keKKz1(wXSv%l&
z1)Qxg>CsW$NcZ+<#*pA3=OUWCl*Zxq5!^t6!^uH(V`{jsr>VNSsb|D1$ZMqHbcOy>
zU9m7SA_|gT5JyJHi3;D8tdy<_qd(3&b8KIeLTm|Bee36oOFTH=^x5;~&Bg`Vd$YP$
z&M6k`c7d1FJU&Uwp`ZdI)8mw*xa9#Ok_8;4XKv))=bZCu)Kr7xj}z7AuSmC87F>IT
zKY=wGa>A(Y-9b20;jyf_JZ><RNP$t7LaLu9A<Yn*t-Aw@_BPByF!GpMI|twp{M~mL
z{NPmrS4^(ALsE5IK6&zFMZ4`_$d5lZH#WAm4d4jlo;`aCCIqzNATSmz$4SM4F5E{n
za{X<RDrqwG%Jj7H^4TcoNF$e%)}2?2Wnz{7f`3&l%6LF+Dm2~Sw?n*t4a$dhqiY=W
ze$G%V!RY1DiN)f1{lHh`tI@cujz+{MsW6_jsS`$%d4g8eh@@CbG<TfQR^bjG#v`TI
zMarQD99RT@l;!!9J0W=8$r;-AbmR)67aMfagTn2-6qOGq!?cu?7|R;F21bnP(9vPO
zB!~|1k@TQ&tUpk(4r9DYg!D_wDO0AT#YXrV)veI3QzC@cR;M<imQ5CN3ahJo=N-?v
z{R^v_9&+Q7lk@OHI4}G}u8$(tPv$y$z9&o+j~r2-J2%kV33cB+Kv7LxT%2Zr)YE>A
z|DLiAGnuT`%L^B30}`-x8ma|4bOrk@mxrK#s1i7IiyDufGD*ByyTN&a8?n+0x;Tmk
zAn5=OEp&s*EAdpG#GBRN$?4OFmBAQVb;CeAPJQ^{hbKFT*NwWd<fr*VFY(Pmt3)x4
zUe?%%yFPHz8NI@xpeXg#4^d#MP$J;Im{5;QilUl7EbO2E#34+p0B5&IwH0XV5C8ht
zzmB)UyQV~F&CG1Q1*hCvw2Nxd`J)<fGD^27hJ*y;SU1!W)hf<E8RvtWto^2|7k#{y
zO((zk=46xA+o$46?PnD=QlNuyYX8t=dehit+*i`p?;zm~P;x|sPD6BROUjxGdJalX
zsI3*ElRo~p5V~STPN?wt$4TR(dRx+@00$Yd^qUSHY7NXPC>W1DYoP(_rL4En6_q96
zUSdCWw>@>buAlhA&(@dpw_H4RN`WgP`a9{yPE)5+iAzGTG#2RSZ)-Ebu)%R^b{|A?
zsK39OV}9U5ctb;YNn%WZVt8o(9kXLJP0&$InwY6;_U<1V76W2ZaW_Q%jMN!3CQrsl
zB?SuDLLZNAmK7-9IB?X|-)|X#Gj9os7||eGjC3TT7Cu%($|!R)ocffG%yh;N6M&wJ
z5%|OI8Kk>C*eHr9a(!uUnua(LJb&fN7hfFx;q>WKU%dP7yC#$A!l`55eDTE>y}d9M
z={T81>N&22Gx$p?|3plbQUa6*BkcAWGnOyUo-uuDW=djW;-{Z}TG6YUie0Ii8kn-^
zOo~IKzoBQ?$ms$l)ul5?@L2g}S+A}_-V0)|5-CgSn{OUDeg-Drnd3)3|LFbq-~Z_I
zBd4pe1yX(b$e}m>^rt_)afo~j!J{md(9E~Giz6_ADoZ9`bY!8@fI&<2H5F!NF3L_%
z&tAR%;fMFnRH^pn<4)gK$bFLE)dcJ~-FP*J%%N#c4q-g<s=RdO)E8FK0;O7Cc|uZG
z9z%yXR*7biM9h^!!z9rM#|lNGx(*YyDD^;HT}k-Ly1FTuS=rk=t~3n~59?#_J$>b!
zciy=&9R~^}k)0%z#Ew3kEHtVkVX&6B;$Wdu$I@F3=A(ULdwXf?oH~Bw@W=1H_uirJ
zAa9M0jpvRW`5G*xjYqF2<k3Q<g55e~m-LvxS*dxQ9H3;{uq2jlB4y9Wnv|YSn<_3U
zEUX)GE4nqAXfN83BoSUh{SDniMo~~HMP9;%3$f%HUi$9z8KxVZrJ_>9G(T-Q&zipm
z9+1`50Up&0bg;qjO?rCouot#Cxn7`kN8Wntt#9gxAQf{OjnR{OWBqeEa$W^~Bq)3g
zI`0dYFO*k@`)CH6hdQp7ANTUAs8A@r{Wd11x>}*At|oO-vC3hF<&6tnB$X-<!$Vx4
zO48NUkqKE@6X+kC-ztaT;N-jM=XvyZsUq(2nYRenOeDpQ-=t9N+NE@?-sBT}SCPYU
z*Ii^UQaojXGPRjbNvco3L~|Yb@>5BNow+NA4qc&t*Uf&PLTR5uX=h)#cFoj;_JY4t
zeSOEURyopKb?w@<T5Rl9Uim*<J`)k&j@8(frp9_xZOygnmVuO*fWV;O(C~=pnArIL
ztvk$~l{F_TA~Y=43nmsn*xA_GuL=%R@u9&9lcvpxrnl4#2?5b5Oc|v_s~XS?8&uI*
z8|dXISx`(7XTsrB93DXzN+wL4m^rz%t+lPC*>tf2`m9V6IjlxFjDhGrzzPboan!_l
zUrLbcevTOM0-c@s(9`IXQs5nJ?(84Lo&6Tb?UAf;MiE^me^V)rRP4zd7)e;Ne*NaP
zE7t5KYe9eVN|#XttG_tr)LY|`+7zS)myVZSy2UK_&yc4}mtNwEit_N21?T=RGv3pP
zl9cq4-1|e354|DW_xSPWpTA+A^derXsQ4{jWu}aWIa4nA9ZTxBOmdTvQZiBs?CbmT
zOWJR4xIgV1mRia6cc=yS^laNk2jUy<QOjdVmW;hiO@Z|3s375NVyWbwgM=ZR{+^_P
z?zii7itoF_{$F?R9Us?uo{4^^PVWVSKInx2NRS{%krcbAE>aRrO17+K6+4L><vQ`&
zPWA?82D0MyT`T$B<XW3}osBoU-W2D${2W;=mQ_evEC2zJ=)Dbq0j6SlxzBfI1|S7W
zR(Ai%-64S)oH^$!@7Lb)yze`5?HWKKxm^Ly?Rul}zWaQ>$TJO|Gmk$`o|S+kWq*OQ
z4T?lKxy!AuLn%~}F;OY`CNFy!13?GrMo)X@$dMy7rNu2h?*AV5H#T<P;B~)o2KDy-
z<zIdrKmYw)HMijD%e>yte)i+|`U7%p(#P`l8*;>zD?_7`lM`1E1Qphg#fjm5*i3jD
z^tOxcsvkM`9H&m*c3}UW&KBtE5YA*MtlI-od1gkIBR=lD6E;SuPr?XooWYyd!}R(+
zg|m56(%y_isxcL0y!%nw?N023aD4E6iY??*9h?^A1l)3L!n0sYAS?42?8CP_FE?8q
zyM<)B+1LMv_Vxa)eZ7^(`EPzoPxbJWlVk>Op(FcbFXCHy<Zjj|kI7wyc76#|e*x=Y
zcW8ArNK_)cX48UF5UyP5zx@6$e|7%iNZ+6*<ekOlKDWA_MNrNneI~Rt0x5HNnasgx
zX0VwB5?opHt#b-VZ7#7HLxUFwuT2DBG9${-l`EqGVyFX;UWa(PqgUL!o2=153>$PN
zlZ=N00UTLPb=&qHyQ8h4x~5_GUGT)YXK$k|f^#KouGxz%`?nw654uY2n&MKeDBy&(
zS>cV63Q}}iL{x}Mz=Bmuo}(zu77M>FNAryGmX-oilOk2_brOjEG+U269l&4X1xCt@
zV-+~89(bk&dV;*e!3Spnx)QUJc3@zI6yvB(saskQHpk;JcHD8t9cQ0@`g3^eFg?m3
z@Z(sJdGt|D6d$6RN1?~2@I<vyq0uYZ6g2A+b;PVIRwFJBpiEi+3;;(to|o#XEST*e
zHLbn}q;#<@Efw7Y4{sJInmpB(Gxjb{eGy1{dB>vjkaELaNJTRTI|DmG?9xlQ@A4A;
zhVEGK^f*1sU8F@q^hv>U@XXbN2L$y+q8-cKPxGxIl1f1a=R_f(o{bDFF=3~~wp0+&
z(>7OOc*rb@=K)D7wBR;8MG?0WJ360{l*7XYL+{0lAC6L$F?15E2II&u>=yhI4$(lj
z5>!hg5aB4khXXZ!y36D76^gxk{BfVJ<L<jUcTuH<La}R?&xd{btfa65k$w9?7+;ka
zFCJ^N+d&G6Ie3u%<j={?dAv^7+s58<qdo4E{m-^~woxr4l`vIo)ASoNGynLH13x;P
zeV+Tyj|RSjccF=WW19Raw9A>Pd%oJ)c{ll6{CgV7cH+nd_8oj0BXNEz^VNHxU8aGP
z1VI95Mgjtk0D~gXpWK+AMLje|96PZbmuwe49GLJTSlP-jUMu+EoxXPd1Ie&D-G}%{
z7tWpgHQxGQ2&JB@ECOf4*EOZBtSE=OQiP*YZxP94UC@8g=#nh=%@!swa^=eYeU8i&
zHvPfnWO8{3A10ILogG&$FA*#3E@dhe)XL3PvR#rI6xPbhCUDfX4plOh*69sOk%1m5
z6^{el0<Ra26$F)vV{<1a)h(Ah5p|J*y=-8Gt>?gxx)7d`Jl|cINv!BOlQ`JhQcr-9
zd6iMaL;uAa^pJG^y6_ZcuL8_@e)ew8Y)$Svaq~O6PAI>k(_Q_K=L7-4zjWvSBMz}w
z81CW2<ewGKdOV-`%){KX_}oRlkfT1V_cG;kRNpK;hUZW-kNfg9Q|+$I4GBUlsZ<KD
zzwYz(_YaJDVI|DlL)=_TOOksD_|}V;FJ3%fUH!A4HMh6dS5uc95vzMIKt>XG@gm3N
z%Pe@I=mp`Q11*$Jmu*<zlvD`v__Rcx?$&!e50ot2fB(cpX)&;kyHS@K8BNsC$$tYs
zf0&=^)WVZrrLw+F6nd-^p5&~XMVv(t`s$(S9Sx!eTHxA++`8Ue9ZPg|+$-fvqPk+u
zrmk3+u=dPK*d2J!>G?AUfHA$8vruh5FYB6*6rSI_9-!r(DO}gwT&{*28<;^vE)+Z!
z-2cFK_M-aY4Wpmq=7wkq4;4z-9GyhY5?s1z39d)!r{sN`Zq<eV93w#dHLqtxF|+Pp
zoSa<r3&p}E-OxPM_Hvx0<nT^DEbd%%5!LZJcx#5)y5nCsjs#(UA^&^X^o2Wa-@bkO
z?RVS<55W6MN?v#YOZQt+83F~Q1)T|grzV|{jwcWVLI?~F4hDqcooP7m<fX+;YV^>)
z{7#`SRR3Gygi|J(N(T(bP5eEHr=xZO=6rU547hS%q67F^@l}aGGk@CixOgy44yq5S
z^R%Ko9F+weX0uX=t}I7jvIPKTV%e9A8A?qLIleJMb-|O^8Ag531;=7Wogy7t%fT#<
z?ygnh+<E?a0D8NuMyC~Y;gUhMx^4H-qeu7eY~4Ty($fRF-5d46LXR+^yKbGpEE#x-
z^_=k>Cf{Tg&pVDF_urS1m<b+f1)sDcJdHI(HNzC`oPW`tD+{I2-pl`AA{~dxf8|?S
zZ!YoMYMB5xmP*^?aBiGXJha4=j<Y0!l3aAVkzZH^l!6C%CcQ~N8gG?qjA7~q)pD<%
zi3mjV$b@{*Qmk)0m6nvS!mXrq0E@eA6x?6kf%B)M`i#~Gqqa{=odCO_z=Fj}!{NXK
z)ZM|YLBElo2Rl#?JvX3s{LznYS=UdcZ{DIVSzC-Oan@Vbd6;xb6niOsLd|sF+T$cf
z10@616Xv)XhBFASMc%<&>3OGTQK4Auxz?p`A(2QbO=wrqQ?%CO$!6#0AAY#99pMk!
zD<4*Q;lkimJ&ZF!OL5MK7WQ#HF05AAg=kDCa*2i_dnvc~)S*p>oCJ0hd1P*El}YH)
z4_GI_ORY|<3UzhDYDh9fsz1`Oa!L+`LZ#~M1z5QZDxEU*!SEndaD(B4q(tg6Xf&i3
zJjX2?DDz00E7MO`=E=g!JdCzcty9&8uh8nuOsRv*MH>inMWr*-t5ZJT6of?h3%z6$
z0RY7bn+q{9yS|=87*p5@sy5t)_C9oGVMU*hGND~rIP>7%(z?1*FeFlW!F34W!8xqW
zT%3tIt5r#YL5CxEDpBbfx<ac3`<l#=($xdKo~-G$B*n{NuB3zu_g)s0i*USB#ywr?
z<T`wq5c;58ivXorf<u5*)tO`AXP!7%r-TYmS$F#r&xE7qx?QsC_pa^R>+0kNDXrEz
zj5S=C(44t&n8t(4`8A<E!TfA4j4h44CwqI|;0L<--6#2vZuQ8_+Zg4|`=frc)OYT4
zPGYwe<_o2ROa)2_)+Y3L{_)bt$R(r)c<cQkpKs_FKls5f-j+CYJL?9^qm*f3U%o<$
z9dZ$P3e?NdQ$8*5OXWFp+rE?gT3h#>Jcd+=e~N!@;V6vzN564ApC<Afq}w5%px}1k
z^(P2y&ew|$TW)64{e&V-90JQ>D^3Pv=I30%Y7LCTtTc|Zy^Br665mn|48UCot~dj3
zhi5hbcOpaM>C=mg?I#)+7aNZQXm}ifV7nBFY)bY6ku+;-#OcJ+^dxl7{5Vi8@)^|D
zL=Avr1J`D}J{pb}HVZ>!2As88oitS7FI)=-(3&LmFXiU0%|%^IGT{<MBPOm{lvEJW
zt}hXz5vVr~lh^KU3I?Bi^3=U|J@A<`pE-T{G_-e$;$2TZ`D7$QHE|0IxVB5<@jUt{
zZKPGFOZO~MMo__vcib^~<-Pab>z$NThYugVeNV^AN{3nE03=D}TWz5<auT(QVHFIO
zvRGEdUm3qLZW|YRW?lTXYqpjTCAwkdhlWmj++^rEsIu4B+f@g{uU!v&>PrOdJvxq&
z6xeJB2esS{b_`ih$|m9oc64@rcC@6}%J_Zb7v6hMqv`K2W#1iTOGn>jS$JWLgUEq3
zy5Fn?T!I=xYmwTeSzRSy<~aJ(0`A8xX0BeIiahoedZ<Zdr_(JvJ6r3^o%Nqdr_Y>8
zXAU2-m`{HulR14FEJ>GQb_s~3=+dmDSo5#r<zJKZ(I{Ez>sz5eeQI@Io)#~H7GJ{%
z?u#eZ`rp4WII$3jrLwV=`T3PdDj8lJzjprJtE(GZ(XHJU%l0tgg@vV+RbL<&ibPi?
zEhV+p&WbXJ-DWb?-_ogZ-*ac5xNpzS+LltCN@Syp6RRPWy~JMD(scaZN1oi+x^C_9
zSa#K1WVM!7me;kmckJ1J_z;_Av+?li-0bA&Q2(d!hot(@8uZ$zU@y#Tl>XV_;p^9i
zuDwT7DX`~ZZ{^_!)l%1O<bViZRgL=}d+f0%pLzBV$Y*7#`HMqg%r%&`d;4<oMgz*b
z8|CTVfB!q*`9#UAi@ALH)ngDWT*OcOpGHhulf*RQdBM|utEiS+^HfhtQEn!RHo8gn
z_!Um)%a{L@DJeOEyhwj?3poV5(q{P^!bq-MD$iJN=Cx-2F~`^cgk0{XoV{}P!5nXY
zo03W2$lX&;i)I+;5<p@00-|1iNKpkY@}8SnSm@RYAgtjJzaj`<`AXgc<T0=j%-+3u
zDWEVyYM&2l<fby@4WdwxQK9&~-@Cam)pTX$G>(lzfg3v1ZIniVz?*O0<eTxfOe5(=
z{|q=`9ic;{y~$65GCLd{iW}WEa+IQ4)cq*EY<l`1{^8>|;UDKJx&=23FO9E#?c+G&
zC-E38ZlA~%3#dOQvB<K}Ewr0AYdw$R{$psb^WRMDmd#UpJttQSWJBhrI<Y%t{zK*<
zZ$5i1^ITG;N`@8|Rzix33dQ2ptBVV_ICx1Fn6&x^2M2zdb2N0`hoE5hbvDpQE1HI5
z2n&4-5EpKtwszrD>>r!04Q!DFH^;&wbxXkfZqWwaEU(_E4cdy`-mGaWl6v#Itq5!b
zXa;#4IW}nCy1DaECv=l--O5bnv!9K%JPFshZX~J8?OtbaFFnPZ1);OW4z7VsM}l68
z-o5<KKbn{b22)zdBbr2TX$ai+;3BNj;3AN0>z6%2Bw=G*3Ls*GJ->uz&3JiWF}{(S
zA-*_pxw|=$$mJs=YI|k#ZII_~+rI7iag&KzfOs-5R_=ZDi(mZWBe%D;!PwQMy!(!Q
zZ7n-0G^|U(J9f0R?YrY{$$0mD`-{lpIT)eNEs~=B_Z2dOP`~=)XnA=ckWvCOtV#xW
zKDstD3MD6A<KsL(b_pWrOMI#X8@dbUxr<u{W8$J-SgqUY%8TqB+qX3|HGTb$j)Ld<
z7WuaFcV7I;SAPEw{vcBd6B7FZoH-F>h*j$JKYjb%ci(j>6XD?fcN~W7B{6e(Z4>az
zq}2%-ZZwt)x_xc1uTP=4dQ}j5dnxEg>76hbhOdLkkvOv%DhC|sc`r-KV#qI@8G=r8
zb6t7eRGp{RA!*DVk$nJ1#fbXDJYVrF>Y@7Y&Lm}Z)Rtnq&0)p|ArT6AW~SL}BD6Yz
z&JB5z>2xwQjgQlzWHy~*X2xd2Gz14!=3F|F<zA`;TD!avLSl`M$nePW@-mB%_KiT8
z>>Hlai!XIjop&55rBDIYw8aw{PN8>%LNMp-0E6CS(WFwE;_djjy;vj0fc-Wb6huS)
zm5>@sLE`cCC{%S>mopplz58o$^8-^$DJ>KhGcz-5jJBu|yx*?92aRejzd}0EKdQ5>
z49B6E6qtB;4f4dy;u@7NN(|}nGM#_(@bc&;%(rxxE-e#%9dv?qda``UU0G>isV&ul
zNd_C(zUIm#G}zRXdKRYCBj6K}^o|-yU4-e@-F<f%S-pq}1$<9g9t}*-QRo(kRs$FF
z45E5vVXK>j>a4yVn?@w@O)Y}{A)=qPtnBxHAF7lt@%!J$ESnAGJu6S(`4f1)8ftZQ
zLgmDatI}oG26~lhWhO}-dsY^_!{^?IP?M3mjFIKBtAq1VR!;-}moXW}g-WrKSS7ar
zTyr%PL!q(J>lCw|vF&~GxmcLDR8gt_z>)hN|Hd~C9wfJ+l+qndWu;~&I7L@S&#Wir
zQm3OqKU~IDyEiiEd>$?PJX+Sq8FcF2zGco@2hFM}g=JF&DZs#HXD93>W;VHwBo=V?
zUP5rJNCwV|Qb{5j_5xrtiNF<389A)bm7={hR+Gl1VMUc9%d^>Zn&rCN>J9J{{=)ux
zTL6IyNV(BiPC%Y)Y3D<ymsb>}+i47uyHB2c@XkB$Jhq!cZc2>J%?E+FIo4_oAz~zE
zT5Re9x^aGV!tc^#V&Ql+771j)pyy|Z75&I_By`!}M_H<_nqQp1R2op)rpcs@Od`?x
zQslj}C(nLn=?>*|BWa!{&3~I;K@`F80O(Mk<`6NZx8IZ2LZMQo%>+mKmBQ+3--ms@
z!;5Q(v$wpw76ndAG9mY4h^A;-1Rxyi1-+7VNPaRl6NDNZflm=dzrNO(NyMLd_F%0F
zISE6i`W+|F1S7Bwoqp)yQzuV9a^~TOAHHWdG@O!&*V&4;gA7gjI1RaSeSTijz4n^f
zsKh?Na4J2Y&G!_@OK9r}*&*oUh^uNQy0)}j<5WhyeZ51&(`)PNp+F!I$#Pbt9;r}6
z(8Fv;M8yR4Gh5GOvhEsIP!(aQRM=(16g82`Ff7u8EMzoJsMl*uVsz}1dq=e)gVilq
zDoUG99QXT$lD(gM^z_4b-G1QkaoCP-Z!70uPg_+KHQj|!0r$yJDM4wn6`7T;n()j-
zFJeWkKwl6+oB@9{m4JuP!Lr2SWx)C_FD7&?2Xi_EYPX<K;(4RdR&19P<Kx~X;ASBF
z@aoz<op3+cd8Ad<jih-qJ#R~j>gs(Do;^#d5&nUq86@t_;jB7$T2YDRMU=EBlcfQ#
zfY!6&4f!lHQOw$f@$m(`MbjBOX1FdRr#8uG@!6bN0)_l^QX?5thKP(p6x1r-Rm-bj
z`A{I=e1_*ipQVHfLbochbjjz-YRf^va&6Y<-m|-$2cZ!0LI5q9(%mP&_~MH%K6Cc$
z7k=;ee((AFcLT-6ns=YYS@yv0GMoeDyYGMQx#u1LYDLmyGigT1W?~#os8S14BbUfz
zp$E)l$vyY%EfoNw6iWBrQ&g0m?}ZMjcRpRnC-`(>9*DNm(&>eySlqI$rpA<upDJV$
zK_6y8D3;BtE3w^FDigVR5Tx_K915&WVCpJcYf7|Qt(qsPw9BqASj<|13=YmkGMXCn
zuE9tUB-XtHAqKObedI`s)w|+Zh$UiC^fs+6u0M##1&4PvHCV%#2!4I_o`;@#>Zu3!
zkmIO9tZ&+lS)w2A^T4ZyPsI|bfsM?L&xHsq4~C3?0H<dET1s2no|iaJqDS{T3E9aJ
zN=HsW(*(}HK%<=KA~YakjI&q5qjJj&p<UdBZr?8B#Kc;2ISEe;z+#JpVb#X(79&$H
zcoF)K{--ahqruDO2yzAkH+}8eRFIp70c!~!o2lT+OxPnaSynPaiBx8p_7QCvqWr>^
zyOP&!Q~9UV3CDF=Q-gvOK7@z0K;ed%UxHBOl<*bZgy>h+$;qL<iLeJ>rPeQB%GoHW
z6^&-~*{#!P=I7!Tr3sx<Ds+0?iZ81u!>nv7*EyYb-Il)M0=g@yW@ZAcQEgDOybJg&
zEhUnXWiw%KG@5>Ow@0f*kWz)-K%Zap&P;1GS)U(_+w|f}D7@yuk+bDRag(a%=28T2
zj>RK!myu7!12|?qi1(p27FSeTzbi{j)Y|@AXgedQUHjr0<geouD(E{_eF;?w+`JHe
zM6I&|)MXa}^K-DisXwk098zkq5)18&t5~H}+K~vrVWcsK5%`Qx`%rfPaEAYMC~U_C
zmClA(GKTfBt5;PjW_=BK&o%5Vk@?Zl(S<Ot(_I@J``CUdMS_^hG3az$D%QV7A71st
z{{+gFl+p;=nboRH>Q%Xa)JAASx(R53=t+WEV^jGPezOKS>M_EifB=rd{9Z|A*V{iF
zn_{Ohw&IeCsFze@xzR0nb2AFgwLO+zo0wYWIE4avc?3P?q)Av`Tvk)x;H@utYy|>_
zB)c+GQQ=nW0dzHzC}<Iu2>)tF$^g$cgG$utHO0ka!#YJGNRt%@W1P-3JUqT-RB?e0
zEUQ#%TpXvInvx93<T_mC7^MUKE;49Uc~sSN==XCN*8`aZz$@!f-|XbXS_=8n5NHy9
z5-_}^)9dqdv#W_Li|8gm;%<G><{RJyh#g{SC;`5}%tH(?@d8PasVQHA7y!srWCBy)
zJ+KNh7bn7BkL9EO`MF7rKDxd-2Bv1jm&TUCMAjxD226ikhYSn>a5KfJQ&9RXucwkO
z6PT+ksi@Gi33^ONiM}H5C6(vjv@}#UWvl6Ln+E2SWK3*qtfZr=j4=j7w!B0Oe?J7r
z&SvKNhepRRvdYB50J2j}EJt!<`*l$1>!8vhHi2_K7LMUJ7#)y8Yox1H#jazlA}lq?
z=vg{$t85WIZ&}GSBC@=cm5B^AU9@4YD)~)NWsuKs#+#x#KXu9rxN%Z2(@82M*S~ux
zVnQew1JPqOm?9(K<tM!p;HyR=S-4kaBVMd>Z-mBQOh^3CudaTSf=FeWn-fX|hi4(D
z;pnO2ptUEAnB_n~n^6INSz)wQFc^hpbO8<=OrDk-vm}d*W_qQlE3T+CFp1SAjo!e-
zsGmocC>+Jb(2yl@^3%w#TVC=kNy9Tsp>Q;cfLpGn00J<jl7xpQ*(8zx+8t*N&hH+G
zF4CA>%V@+j;G&E$e0|jygDJqOT3?_n_F6<hGq{iTvCu_B7QRI|)FV6u1)GK!T&9RW
z!hpKLjA(-Jsv^Oee9vx_x3y}9p{(H=g{R27!lq1ZgV7Mz5Qwc{HQM}6%zYRBgzpge
zdFylf+;je0eW%QQcgyE=Tb{eI7fLmgrM+Niu^;J$BKPF#W{rP}nGJrJG~75|2pk7D
zUCdQ|c~g6Pds8_Q4*6%mlh61wQaz>#;!_z7+U2z*YjjqY=oKn>$MH;xZme0}R8mq*
zoBw}XXh@0}Q54mJ8L2H&kl51LfW+|x`LxQjnbayKf!OH4gwT>S=752XV+sU_XmYv_
zX+^9v1jNo@i4|93Emam9wOXA4n~*^VCPAY_i<KHJZwGs3LqN6J1+!kuB-RjoIJ&a7
zW?T!iMr@;IF6oEsV+dVF#8l)yL#8z=R*}_!@NGe_hcd!hNo08x2b?vBb|oZatoKJ;
z<pQs<VG8jPu!7jlvUCO!6(*2L%mioh9Lyn5kji;AO4ap&-zckc6V=rdw-Q)uOyT0)
zzfoxA0Q6&iljKUzvXb0cmfQDOPQ{+**a)lumwyetD^Dd@M4-vQ1588^I+eZRt5E$y
z<;6pUoekY!&A$yjlaQeYJhf!bCh=S{OYCr}fq@YW^s<}wMMH&eig1Uo#3grmr7?s1
zGDs|VI}*>`-cp$c5+PlA2x_%MHw)exDtOOA#+#*LcTRgsrMjvOECSsjm6>I8hVGnW
zXuBY{T|THcIyZQBaIj}+e)Wz6n_ZA+K990Q^nk?O-Qeqv7PN00*LhsepiOx>YvXzp
z*FCqmp2GFOrsw0v{YhL;ZeFMBk=6^pkSzQVmA5EKk0)ZAPux^ebo2VA{&0=z5BC*X
zx_Nz!Uf<~1=Jgc4-njMtB)xuc>vh>X=oY%-2)%!ULYw7#>GciIOS&88bk0GzgSaJF
zz4J8Pe1iHMZkF^Qo}hLyfU9w2c$Py9Nsmr?LyXC&$s$CWVLiBtQ*G71j#zl=I22aD
zaq9@mTSsH@HsIHrOH77XvZ1ERZs2%ctEFB}DxmCl>}YTp1)SeXH2zaAba^gq_T%67
zNNlz<Na_8*-8iT)Z&a8!UA$%b3beT|ckwe3E6_DB=k^a869c$UIPH$TO<tD}@2ssB
z@cFz}?xt^lk^lDTt>31`p~}azjTOM}Z+-S><OlMzZRE+V-zNLWujseX$-TJsTeRwD
z`Fd~hEWZ8u$A6m~1Hgfn+;OXtBZCMnhHnq-M27V(Z4UMWD~E4OjGNThoGbsf=k)*n
zy9@Pgqc%eZnRy)X==$2)S~$wk0Mbz}SYFSxPnRWY1&xPcVj@haRH-3r6Y(*z+Rc<}
zTn=q{+rEAK+RCk9S8U}C*ahoa8VpvP8WK)F)@5PA!<3b2Nt9yLiK<Mm^Z9ZbIcgy)
zc2d+D6@EEnDJ1Jrpu>4*72;t^3Y=&-ZdnfSA|mRJ9_<n?U0zSgj3#`dkK$=+d66nr
z77H<!QOHLkI5UCE32HaslcINU2(IW*w`tSSs5hKpSt@}WB*M8=JPVzMk%iu&y9y$e
z*`yM(5cBl9@}{ONQNtm>wzjpUt{J;}Gmf+_qqVvM+#sI_dLX9+;wj#xg7PAkNMwK!
z&YwF4I~HKgyi`9q<s~LsAz<rDN;w<9zAS60SV-N#^Mk7eLnyh5vkXHOAigvY{R24A
zl+ghdg<YvsxmW<(B#tFW+q13GqF~A1z1u6P6319oR8&<AnWWf>yw|Ce!nyC*v15n#
zQvLi99JZ1!l~JjwG-p&&E*Z`B)1+Q&YkowoVR<H&$U<3>Z}~0s+8Uym_sx%Jd`iJX
z<^?jp7q&dIwr}UYdVZ&JNljEsL^Vd)evHOpko^co!wFjtnHpb7D!}jZ$>8i{IvtNs
zT_2bWt${&{W6y+kK~jg&-6)~Vvfiz#sF+y+MR+1~Gc~+awzs3X5`k)Xb#YZ&2jLDM
z-nqM@bw}rc0|z>BmP-be)=-3gIg||43+u_G#7#{pITx!@DsviIdd@#cXEq={H9Q+%
z@%l_UCcZK{HsuWmar8$MvJ9JwE>BH^zozGW3X-g=oMCyh)9FkMEny0U2@hpLAVUK*
zBP@w;3R7O~s?nC$H5}Y;u-cpr9f%Cn+zD^>R(VVe74_}FIJe5jd=_c~S9vnEz6`}d
zO3hI%0@?+=0f|Cw;7cG=S)TuN;yU%xf^NFFx>`~MgX<x`AAwT@M6D^UsDNXsk&QEM
zJ{F6HeUhT2q!e5QMfvfO<q7y-aaRTw61l!Vjk3N#`<?<t6l&2`A5UcfZ4Isk@jIMS
zA`iAA<;Mc|r4;yVN-g4Z0FHPPRS*a_DhR|+QV_VA3f9#kS{3LQTX7qpPMwW=Fh;jk
zSTQ}V6?89XsIWmyb5ztp-QP&Z4yphV^8cnPfE7ML6_DE}{{O_aQ9gk3q+M{ab9deR
z7hNY5l|nsP5M`qA$nhg-z@$}>5glppiug?9lYlr~+^^nvgYfMa!87L87j(<=b3*PR
ziP2--<Q}4r<3YG?LE-eq8xpz5<FWRO^1A$=eJ-zQfU*WVu-JPYajMwxo%_kLyquQb
zFNl&0QJ=s?ID5h4o9pdORJxU{HXOe5&OHdsgUy#ac8o9J-ttjc2#pZZCv_34n**k=
z2%p}|uY>}p#lb!@BoS+O?gsMS4V=9e^mW6k{mm|N&tdZCU58~Bgi^N-RI0<brf3|S
zJqyc2&j5Ua;ZQJu2p{UqidW*iD;dCidV9M~$(SEo0Z<sH@4qLReBc3~Kl!?v%F<Fv
zQCeDAQ%8;+%h$S5E(*=Wqt^#|P&A4a<Z`VxHX?Bm)@F4vJ9fBDDAXTI-gEzH6pdn&
zD7OoCx#{uI(edf|c^C8c+xgz!h4#vFydYqC1I(+6EslJ6N#ql2i}N%deE-1Z{+=Es
zqFaz_zyq@D5k_mPpeE-cE(>*<mNQh8Rg{`7Mgu{YYUbu<7iLDGq)S-$J@GW+I11J_
zWNSHk;_ef$q4@pBj$v!kH|*ZsQezVn({Om1&NAKFR6G$)vZB7CVYAO0ZCmrxTyrpV
zLJ`~BJ1}<bGCDuLmQ<^Hu8w*xU&h3}21_cmHFGlyYilqEWi{$-cx7e`_bsQ9KL&nP
zJGyJCmFqa#{HuO!eh<MedHS=DKmPdb)v3XOqel<5pEwZ;(QVTKrHD#|S!rf?_|nCJ
z@s)&Fi4IgU2<Gzk+xhXx&rW!|!u3=G$qzGa<OW&3PL}0iG=WzE8a|s8lYQ^}=Xd_A
zvd%Hz^X|Jy5wC&XO;);72&}rC5A)@nC!aXk`LO!UUk4oZ^^TceznNQk%^0I*%qdIK
zRw0TNwxno`ApFBx#7LE@CS%41pI&urGNulNY_^QC*=;c|UJr+_FPan6T7*a_(@rO_
zm7AtR!-E!6R8^~rnk<9Eq3QGa7UyG=!Jjbu&fxUO_kIdS|J$l?&|-2{9KIca=f0h5
z3AJESl%2t1Sy_Reo3~oMUi$8KbGTx0bGFr0o16Lko+IRM$*&oE#S!w4<ZoF=@Ck(A
zWz2x!{gC`Mmdoo1q;R36<bs=<+PQNo-wG<FP#Fh{xCg8KWg!@T?iq3dvJPEYg>@;+
z*{pLoD_$0!T=PB-uKptu5F)eo(jh_CjI*0#Qh~DN4Beh6rc%^1jL0*?xDlp_=<)=B
z857G<(XA`fVS?z&fXz9+jqH^)0HitF@4D-*cBe6xZ{>|U2uxhWEbkyzd_r7ixuqL-
zz+#lY!@EXqyo2^sjh-T4Q3|&p9L0gJfr0sPL4Ki_o=$wvu18ZY3z~YlZ{Q;h&u=D1
zx|xuhI#C?*d%)>F_~3*0-Es6I9m?-6;CisT+|)U_<%N31^?|<2sMcjj<w=#R9Rw?4
zm?#GjIAgPO(PUCxR0H0lrbwN17l)4CaUW_$-5!6Agt^*5NFlfJNCvtIDV2e#9+-H0
zrUJ^``T8jOdlvmgMww6Ag_h&6mc*Awv8qRJy&Ks!ccYtVvh9<%r4kM7<(iTvEc2#Y
zZBMq%?dc|><;MH7h1PG~n{M2>R;Z)v*h&I>Yyz!s@@HU(3oTEN0z|u%f{6zVXxcYD
zJ3S8=v_BqK+Nz+2uCgiP?rmFls~h*Sn~06w^&{I>w{3Gr+e-V*oeaxHjh$@o=BlCd
zl==X&Lx9MV%G@@W%8eQQj%pmB=bNGrA|v!;H$N$VJ3;<0iIlq$uk4;pkF5N&`Llg?
zi5=GyHmpjs2!NQQ>6SYt=pB$g>PG*k@92VaEiI#q`9;1AD#0B^A1W^mPEQW@j|>jY
z`o-|%K>u|FfjNgXB$uyT`NcaI;ayk`h#7|zLmEv{ZDwtP`hbp((PM6K;A#}TuY~Xj
z2w;)HUg8W#(xT2{7P72LDQ4n{`br%b<?^wyk)e?h`ruSac`Xnt^(}2}un{!YR4q=A
z<@XNCEjiF4tru1;?;EfYe((ljoKpWwsIJ+UwGcLv>t~*P^2yJgK}@_ZRzzq@T+dN$
z<LQ1O3B#t)kJtcsx|^Dw6GY+GK9-CEE0KJRrf7IDcRfzTeBIQepCW_mL={X8S`}I#
z<UWbO5rRb@o5eDs@Av~cC<BYVR%IzEEnQsn_~WeTVt2G^B~3cXAj1#KMh5y=cU^G?
z!pFiIT*zZ<^i!s|w)XHzyzT+&iM}7Mtp(#&;{*6WtA<6ftV|gW1~ZT=U;o9M7giAn
zDZ!{sorew{%uDSX?Hm;Z>fj+{(&-F+#~-7E@Xok4OdB~&KMkUtT9)k_h=7TNn4e5b
zthRNBOE0o<zh`l=w6w&cB5AZ!OeQBl?p_)XhrUlFlVa6vc(pgw);6@$PgS{g9z1xc
z)1+q5uJzRmZ~o$Sv@{b8h9TC>%&e=SD#*9<Bi@$$I|J{0AhFHY2|oi?=uV0K@u~bg
zq$h^i3Hu%8b>WT_5PtOmbG_Lm@bIWccv6h{vv+ner+%F0ee)$laUqJZG5|vKEyZMb
z^3-#u$Z_dgxw)`$&!Bvhe9yDtiSV;G+(R{Cs26NIm=tlz=K?p40O~+Ekf`K__Jql;
z^^N;rJI&u01`ibm;}yjmMD&$hM5X-6myfC{2ChfD*d6-_7fxCHUF=LY*Rq@M3W!xv
zF5B|~;Zoso+*QHk?xJ;4Zoq|>ztqKi73bqd1Yn9vp(sUNu5TMXeC041Wq<25kdC9|
zoS5$|eJ&q6l19a|;5k)56hr;juG8EiOe!vMRn~<uw+d%}SPAGlWCjEn3v2DU-fuj$
zD8iv=Ud~9ur^XhnRT4}rDkVq}#=(TAx;VQwy!;VbfTqwO=`-3cHlhYCR#P4<=lDlx
zk-ICS$6e|O?n-(+oSHM`?lPj?HB?VUsIMxv8W9juBT5t^NHrY+FG(OYQv?UbN8J`~
z+q)ODQE94nDYA@Rq+Sa0`A*BJm&;Mnn^BIQ>I6^@EM2Jx#1?s2+uBM@rV<LMF#vuh
zkFQHf9qRlkRy5^z3pzdmXemMP>Zbf}o-?MS3*Tizel3BEWD*HCIV~L~uOO>kEJx2O
z+|h&^4A<sqTI;~~|LN6NuUvV9{1+$_Dl1Q(tdnwY-QwX+2ro&^G4ki+Kad}gA8;p6
zK7o1gpK)U<_4?~EDff0m%~UeuE@V*_6@=K&DdgKX<sItxL}!39UpJB?=PT`2=4*pB
zEnj@T+>Mhii@OO*Rp1s<kf5mlIQ6433_C>8F+7rg187!a?91Kw`KI^;omo#jb(oyv
z03iI_5ps@P=%Vvd0_dk3KY6`1J&Wm_$3_M>oR`?Io6-Ca3N~~)dNQ8<<|@9a%ok4{
zmdneRwQ;v7i06lg&!a(ZX4&42%{BZ4Ubx%MK=jJZ3>u{e)>ER1BX!hZPygTi&5y``
zM-B)Gs#YtUZme!>>&fk{<)tT2-jAc4Sw@1!<z<X-AsQp~rZ%GlMG__SQ$qq%gs0U-
zZbckVZf_^exu-Uspjc-)hOHp1tqTf;m{_@feQl1$bei&W-1Y0wV06KpKH%dJIe{=Z
zD{UYR%d}ANIQ(K~Cq_rFUY%cTY=k%ptz%2m+iy2Ek}{x@5mD^a13|w_L?E}H{8X=(
zxbKaQelIuwDEf|OEokKV;OZhmsZEWI&)_|Pc+`4mJ^A1jg<@>%iqU{S6u~RtZ`^8L
z!BRVLWIent0rvmlSeT|Maw}o1gU<yNP432-8O?TN#d-L#&wu_gyzkVUQe^;!O{-3A
z-`>%2s))lMT+t~oSZ=kFuqrIMPzuMo5^QIqoyUgi#wxRCR%jTA{3<JGYm~nPVDgu5
z!6UU>1yD3LUI(-;ROy0{sw{tkoY+mM(&b`4i}(NPb6rZnmveQxkxkI!kt;>C6KorZ
zc5(<xgA@G4_6_Y&EofTi#45;Xhvdfo^7{4LZ+9DVI-(miMM?z?@`Ig9Ru*w5PSj5;
zP!L}27jv_b`c(d<lQcI$|DH!M()|s_O!<XK7aW}RX;Y{OEjOu&Nv9BJJ=+NE=CvV(
zG2y2_*un%}kO3V{<swCM%=p#T3?TVP7Ln1_*6K3GL;!aN6ffz4+mK-!0Br!XL3Xyw
z;ybMa|3PK68O?!6pKp>}H@?g@gEoX~x2qKClxK}tYMXURi-XA~vW!YAQt(s`(m??o
z6wd)T2V_sB#$K;XrIZFkdUZ8z2&9-e@aPN^_jrN@#0H^wjTHRZf!5#&kQ$pb`i@K^
zxdpTlw5gv&qpn7^-h*?k$Poxe(w|5p1;xjPVU9su6s`GVY1Gz=VUVfv>FCp{auo5Y
zgz8h$rdpvuaA1Y_uc6ETi@EbpSlwNRl97Z0sAlkmBn4ZG!BE`P-ny-=sj<pP6f}9C
zQjJKGEv>tFf#P6_TXrJ+Y@I3<U8OL?<(M^*78Kd66*0CPA{(R5ydjA3YLgn40gC4Y
z#PU!o><`my0F@m(om#vLB9C;~>Gah3o=Bv<V|z0!15=(*wg{!vmS}*%0&6<EG&ME7
z9Aj-&RYFy{f$>hc4?TEf=k^LPp-Dztv2EYOUqEiU6Svh`EwxSc6{QvB(36)GnH`no
z8tut@@4@zR|J}!Kzy0<DyBg|htE;N2>TE6T`}f{?dyNX~NGxkV@dP|RK1Uvx)X=-b
z;u4NS_3u8!3cx2P5(>RuOhXwT1uzIB$RxsCB4N-uN-AJ_5F=rVgj@6{h@gQWpf(~<
zZ9427f}qMzBox-R+&=m>Q2I|OrT5YNj`qr8Jw;GO7DoHw<<omP!>EyBb*#^jj>Qv6
zTUC4x(3$XZl!pKuS)i)9z6tE`k{SjZ#Ii6I7unS=Er94Mm8Ng-7jO0YV^T@65n9E$
zNOPr_n(1BeCwYAZw)z^oNf~h)cIsdvp?E}EZ}nZz-2pD)FXeyVf#1@>ZLP=2U*pd|
zgHO}<$|~AhYCDSp%X=OMJpIh$_wELq=iq&x2Y&s9XK~8@1rkAmeIhZcJXv*V!}Bvk
zldF&4X%y5}gH+-Plhdb<c3zniD)yW%(MG4QQ(uz{BXd!0ey657H1Jk{L*s;^Y`kJ!
zh_C<6)ert#H*(fN+edd1{KreY7Q{Fw(}&5o+4k)(V9r1t?IQ2wx%=;;q*p=LL#YJP
z1@!jLrh*#4q>Iu<B#S`&+;a4oi3j})lM`m6Ch8r;xGV%ien@;DzHtrmo!7U{V;rm1
z=J?teVkwS$;ZrUZGYrYBPzh%tilS8M1VJPjOg9DVYDy*uX8}y4&Z<f;`63CTj7L(L
zR4No9UT<3DX@X`QoA9rA-G_EpDU-?PpS`!ug8Yi%G)YC)V~N!nib&2Bw;%e<7oJUI
z$~uppMZUbV9qo5QR(<YEUjhv3@w<%Fd%&pfIC1Y8a3G)Ag<Qy`X=L?e1sl!ViJU<p
z|5_-kOa=Tv;zl#BrWE!dpw_RA&Mya(YKvXR!()M00?U#vDbaC}1$lMFv&ORAoIC;A
zealH|s)<$J4)F^|7Edwixfk~D!l!CMFjQ~fvuAs?VH80HAx9>Y&5dRuaxEelDw>)R
z^Gw~P>FI%klB%?+y;K!-n*_D42xCDYBu=h|)`0+RZJ{N?iJlRl>c#mWYc=p^?qHBV
z;8*^|w$PEMFCbPCG}@p<5+gVp0$<j1btS2;@9eCHBg@#8OW=4i2%f^Y>f!HWO8dM%
z2549z6Y=|ftIP8c`{rUACnj-ik;Q7U<nvA6h5r8$?LV!aMoO0tEjl6T1-b7sCGd-@
zrouA}!9=iDT7_(2K9E(ave{I$sCZ>XWrAT&#aAmufhF)}Tl8sQ7%b*|iwHHP(WKKF
zx_>YhCl37s8YK(bB{Qs2qqh}ft17nXH3}uPB}#?H1O%hjXiBG@6*V<A&26RY+M1dw
zMH<XhT2Teti*kAz@r(oEc-qyLMvOTGIG&cZ_<<m%R1g!|w-$m2|Jtg5bvYE8nF(PB
z^De?+eK^1N=%|0yNvf-E*=xG!3iRiywsu-g!P1B}ps~QDYtiskx9qc8FZVdBmb-l0
zr|I(gx}yU2<qAh>X>pc<8`iVMH}`kjZ|E<!;Tt+D%WyU5E0s5j?dDWWrwaSc=5Uzj
zInHX0#dNwrfUHAZUn-H(Zx?GbZOxg4v+U9(wHmq!VBs4Y7&w?i9rbOPtVmB@uYWtr
z+=qcI_lD?pnhkjuMzC2AFL<ek7yWBwWC0w#*xA`uU1C+ZObTmBbz3JKFiV_R4$cyb
z+Kosubkfra2ScFznKfzC*dfZdb!@Y;dMjeYlr@^(xiI93kjUVL;1te)>r25LKa-D%
z2ZU4Vd@ngqgY^>#jC}a+2dKCOmjI;ulPOS;lDgOt@;6jB@HF=Ce<(;v8+HO7dE{Z8
zd0Ci23{!*#%InBBY#sFb{5{`>j|mN*Dc_f;NnVbn94}tHa)=+Baxra$@9mhW=Hbfm
zVXie4Lt=o~vk~G*F~|?|!{ZV^C?KqnNN=YP@CQ;GUaZsykD>z_1_s`Fhv#26o5#jl
zuUz?X0OLLI;ja*K{Z}6jLmn9Z@U6f9`@eq+0kFFmL?R>?+{MSSA0remey!ry`|ppg
zWFUuRS4Q4<H>lN}oij6SZ@tyrJa_7p>=R~nwt}f?anckDX6N?9hYxQj#VD<<&3%|m
zxsg<)3n^xD8Jg*PO^rp(V8yX&b4_kXZADw#FgGME7A%}l<lkyF5*4hw>5q%CSR_R7
z)$6-AKE0&ZQLd2Ah1{Du2DC#qtB(_iVnpAC>|G4MF5!*k*K>3PuP<u_EKwmEt*@V(
z!!NU$emsvnR=l1BClSu1s_Jio!L~NN{)ui&eUiGfKlN0-(b&=P&_hOJCp6If0NI9I
z6{^|UdcD5CKNuXzOSn`wN_9pOx4LGwKrmIinMlO_C$!P{=|-x0B?53M6!Ey5Q7G_5
z0F4X;y5%`{51zggPuBpCI~ER6dt@pU4lU1loJGp;JPb(lVP$#EipLv5r=SX|NKwbG
zL;&e&5|J1q6hV45CgzZFY1$u(B@^zN=4QC<7BSf3n4-GQho5;m6fx%m6j@@Sr=LA@
z8v?hv%M*zt6@J0t#O8+w`%u7Q){gM!jnvsUksG7KXx&pzQdvQ7%Lzu*^0=|<VJPT}
ztyl@okNa`pr2PXIFAmI#3-7IIJQr8=zDx7M%)3`BH0gD2)*DBbW2++WEl-YR%gA`5
zmYEalgjrUu00WBu^hDt}$~xZoVk_8nh0a=R)umUaSIn)MWFl>{*sL~-$%<|ui}#vf
zHtUk1wfZtLH$p;D>TJ6n)#!984IHa-GvQ0<4fXLx@Wb)(P&}0tE}!dN3?+<UbIXjP
znkuG|tg0xnwop-1sV57de&67zXB94l%d0eHvW>~cBjG97TSokZ*V`R7gGMJZE^87A
z!!32NSi#Q^oW-gSoJ+d9)8VMCtu$m3$)}%upuJM#gCmAl+gvJwTj5HY_uqT+fn{&f
z-hA|_r=EKBVD-+U&|Dwi3013m2lReAi@otM^$%<=)5qpVN5(zjB#-M{-0z#~egFOU
zr=pCZw63YKroygO=J&8i&_~(g1+iq~r55-D`|1ti3J&)b(a?1J0hTvd1;JJZwy%OH
zkPHKPrbsH8c9nBnhM`W#O=hx&%m9~W;WiBuXE0bnf85(lIwT(h)+((tm3Q8C_wZy=
zTYD7Nxudn(_{hNV!>x{F(g6P`lL4@6mw;zsesWn;-q9hNwCJ*rn0BF?ZO(E%D~X8Y
zl@NsdZ2KbG{zZ(>E`Z7qlCn~}?zz%qFp2Tl8Z;cESAxN0icUnWNf3g;>%GvH%qH#I
z8a?wdsEc)$#l<yVSBAEiGQh#Xd0Hp<78fm&jb*b+dugf9S6XW4<MZg%3<TotUEnM*
z5^-zCso(m2ldZY^#ADzlf9r)8Uf5d;-9DQI>+!-1U;6Fe{oUU^y}vdUdKzl*FG{*~
zX#0Ij)C4jZgiEF(6$!0p7-n6viAKPqvspL_!f(T|4ffqegT8=6qc%{gm69BNeaYk!
z4FNGdzl0obODQO4QcE8|37Ct|WaQPR5`g{)bVo^bIn@D44wGqi)>;Dy*7gc3$SusG
z_jAI7q)y^SmX}A|M*rNz0462^l-bjBmqF_MjG&y`U8uJjIL5_gn)55Qyoir8!;m`%
z#uoqX9FJ^9^aqDpSD6KXx^PC&RHIsqTq-SCs=!{6s!*t^O(JdX>K`Lynv!~(tSU=q
zW||J%3tP*volPg}W@hfVgZ|KPd1ZZ=shO3@{&ztq%9XCnPmNHM!pPj*NK_)xeCuew
zsoR|35NPD^#UMr(i*A^<Zx|o&XK?Y#6(DL{2(5W>$xRSlGwtT+KGkh9(v65JP@wan
zy9G|ul2c#%cmM7Pd5!$Da_0a1W6ZO=@2Nga{u93fk3VZSZ^H>!@IWmf8k>Q}17}%U
zA_#SLkZy|9LTuHu(9~APB&f&il1~tp!t*2WGz&>x`ilcAQO-z}*5HWf%oY_{){aTn
zXxH-4a@+0N@$=`qDU*+G(^n#fqb*~ut?Rt!<kXVh*>MUo%9nrV*s(7@^Z6G~o&<KR
zOTV+xfcw@lwMa6W%(|_?@p0K(e=Zup#r5^d19#ue<!M$8nl)fV&9T_r9Q}ck{e53C
z#uFwD1qDro-+v!W&AFG&B_$6%M1P{u%<pXXKmOcvILTDwq0snZI=u*|M!*~jk<clB
z1N;`XvEX0vB5*$u!+3#BS!g3xE1&Y%uWa&4I*i-P96vC?yJgv=3-Qlc+>pD2S~u)y
zWtTE=Wt@y(2_RCS!aEM0X54FVcPVv;cadF(bqM035X_T(lV+h1H>(j(w&&t~(&Ior
z6mswI0v8~wEDjAV7T&?On2n5QXei7WQ>z2m6<1ROJTd5Tn$U@n`^~a?byQusvoiOa
zG&bsgwUSD${A$qzXVOLEK(5VN)C^63zSCWt7p3zPdf14&I4dPU+k)_RzJCSe2jYdy
z&Pt4z0<dtuM0a_gequsTf85;6%ueJxhOQfYG?YA=MNwQ_Xlq+|TM!DGe(GTaZ&@NS
zwY8M$K$0qorg^r`H`(Bp&~v11r(re~{sS!&S4x@-xRwHialaUeAWe|`V8f)Zj^(G_
zcmOe{l*-(bQ_Uq;CRz^UXAsS#T`t!ciQG_Y7b49O-|POhI^RVLYPQ=qYPU;WU;;_)
zb4SZ!`yMG+b_?a8V(>hht&mhuu3Ikp>el?PyWuOQ#;QP^8>`ihKO|LWXRY|izF67O
z=ko2LbT4*7DM6ur3@g#;*ToNby+Z#6|Jx;4<w+=ZlD4Cdz?LoZPf9$=q9-owo{T!;
ze(9y$b($?`AFh{qL%~Qqvbs3af0Y2FJTp5vv*Hc&;$Z&_9)XRy)S@?HcfgVss2O?9
zM?r4O%c)YgIv9_!N`tMqX8U%iD~&M3$Nh_l1tF27y95E!z0=exybLEYFk`&A2D%1l
z2QmffP)n)73A}1s+sj>CYil;!owr~vU@kGsj=Wx`U{R42=gvhICwmd=xf{=PON#yb
z4ThFhY6F9(TAts03Z?!odiE!+sW^#iU?j!XmrBA4h6of%!CGo!lZbKh;gV<vhi=Wp
zRu=+LCom|3=Ur@adCdiHM3PLpAWdrtGGY+>wrvRZz0}{|H%%(qTDKMRD}()Rc#5T5
zJ5m{?Nw1@xtjMcUQsS_3oKA1ADls!AM^!5#)U<{?&^&rVDbB9W#vuW+@EMf0a~k*-
zmNphs4?_g32|$Uoc5T)NIe@GIE(nEZO-;3ygvQ6l*H~S7O@1b9L+@J9JM6XQU;;*O
zEgzhp4|+!-l+TiRpqX)KVGBpBAuzsnc-?i|K4-6V*i9y_wzT}&$Dp13truT>g#4i-
z8DXqBd4JFk7UU;C`N>azrZ?tz?gE+t>eiBxK;UX^0-|jfFi3nal!8rebtbb~tWX@f
zz!3r0@0Ixb$bI+yUA~1>F2icwn3rNX%P!h{Jih~p+jdAyGDEYie2-~-5s|O?pA!7b
zk8@$QAZ24I%Laq*4ZeqPPhl8BKLj`kX+j7>)95mp%bASBai->s!-3V(#omn!HOLWy
z{3AEm)MU(AG<xn_jJ<k33J(ObAa!#U6}bRN%-P$HKt=g8=xm?){K=DF|2oq6cGC?A
zhW;Pt`|)}7<8ctW)#)s=C`mXJ3;~{xxc}61ljS+tVKhlnIwyo7hmcwU;e!B$XcU~b
zd|Mk*O@-GJE-j2U^bxfV4g_fliE6w!Pb;DEvva=d?pFBAtC>*RwEft9_cfJKC*uU5
z+a+z3u|2V;$&thf8!=Sg_Q)fT93yv1ns99C>YHz*IE^y8AeEzV1V&J)6ij?|!IvZl
z4s_W3Q&+*}Eb^5Hax%(x^rHj)!1+zBzIXv$x)@bL=i>2Hlv<GEYE_a*-8aRE2VGdr
z0>Nj~c9(cOXU}>Uaxs$kJ9+Rk4?N&sf>=edn#APRVAFN9Lm}Skgr5T2&|=Qbo-d=m
z=TTp!CyaiFJ!4pFW1bcCY{fH=l`#KTKYac5*MIm|uN=+(d-~7(%3po|hd=z`_y6kE
zS6+GL)vI$q{cGZuphhh*3N8b3^g7}EZY--ts2n4ok!%V7Jeo2O9r?t>9PHvOn*wL|
z@@|X}T+WpSY*+?h)sSUWS%iTpayqa^9L@&F9t}<tZZ|o%!%t#+anjIA8sMq|9FEHX
zG!G1WScm9u9M0t*b2*2I>_QJ;b&}m3`IA>>2q;tVoBqj6m=$CRgD7Jl$qEQE4|4qQ
zl_QiC%2z;%?}HAn9?t$T^Jjl{U-pl)&u2e_f6r&XiqC(H-!J0x^Vt_UN~pux&#}%D
zL24F2B_1>?19mzA`pknmbD&LXZsMbVcauZ^T2dY8fDNVNz%k0l9%x0Rl#12^_aY+r
zy)q4t{VQqsaiq<iOEivx%?W$BhPuvZs;U4_GD^yvbrVXA?%Wy3vIyv!Jl7uK0JOT8
z-#<2N>9sXZUnnFPy)#f|shV0_)0u=fQfzQ*u*-slO<u1)0ZpCi{Q2_`Zz^Ix>d&uv
zT7sR{4%9R&uma-kfK5=PvJiF<1Oh>cH>&^n&y(kp5gN66+dKKQcBB5vnwn79KjVed
zH|oE1xfe+2l__2?*AHR(g!5Vw)^bEbX{Plbi*Bhu*L`%p3cVL{_F#z#25J4&@GN(~
z{ai$VIhaaK@>#!8|FDu5u3fW-mb7yH=`_=Oc}34pxizhzT5Id|sykD1{iwaUxuQRM
z?4$jEUnwZx|CIoZklcTn0O<b0X8lK!N0K|_{=b9RmN(Zw0Q}m}wUAxwk?Ehvq+46P
zhT@1@L$&ZNEzWE4J7oH!{`2Q6`hQfw__l%mKyVYAqtr1lI50RrKX^k+#w5$;NC38p
zL6O@;Q8*w8^dl67qt!lC{*c_d`;pulqk~^)qTIrb@-ekA!9ZU4o6(Q>K<Am|owwgX
z?h_^yVywOWz1E`s{^@D=&E=y9J3hd#4|YV<di{m;h2hHK%H>@7$I*W3ndV$wSP8F(
zJ=5bOLxLu|Fns-T@3pbT<$&+p#pz#$FOc`8if!9EI=5A0Wwmv5G#g>LWVKXEON2Bf
z+YJ73w+VXwcr1>*#TB(lM9*U5QAryMdgteLS}wDY#Zgm1Lr1M&L;j0v)6**fxI`%}
zG@#qICbK~>lyAFXR4GP4``Y+x0w%_rZ^|%2wviokbB^U@ha1QM>}B+&s3Ua%{-k4y
z@l<IlWuLiWY~?bVoB1)VcC20y>H+a%8^>6bfkJX+Pz^Mz=<koESCc<S87Lw(11U$Q
zKGmS_auSn~Q2iC=FzTaQBEuS!0wVL+li@&kzE-H4KOYf`mV9wi-6jd<>1pD0!UY0Q
zD`Yf)wI~0OAzB?7LX-iWVrM3q-MK@lTPP`s&pRCPHGn2~KEEqaghYp2D=LEK3<6J1
zeTG`otdLIn2M7J8?WU`Nz6e`XWR^6D1{q(Xm6B<Mj>p_WtrY%}YpVeXa7`xj4)enG
zq3bH0T4`8VQ#j`5<0T8UR>YRb^>%}cDlLVyzBnOFK=|o`1J}X=sfW*ky07oR0gmfT
zcG8G^3P`06(nAW7stU4;8i5==o~wHOBA%AOftQrjk94cCj^2H@<pMac46ag~NKbp7
z``M@$sj)nQpkLI>_0lKF2&s1?OV7LSCX*Mq3v#{mS@;(8<mbx9)8*v?g3<}wCdnM&
zb>-!&s}eJWR=@WilogS&e@Q~7QSQ8anPGO4+PeJH8?6R1mFG*5jZbbh?ej=|x4Mtx
z4jky~>`cn7raf-&$+x;7vl|8n`S-v1lb`(E<Yf5$zxX@y9}x6--@X)b6!sx<^gbw$
zIk;Nfh4`4NKm5bH?!5ERU8nAX72*}#cIlG+(k0T-F*`eo^o#P0qo^|~IV#^2rs!4!
zQ!mrdATia|-G_-wkvynUAqMcjmzW>_SYqCKE8mt452y8}uuz_u!AcX`)2U^)P6tfR
zFPzB_ZS?pMU-88%R)0{~yEmR{X%U2m26}La)kEpIIlJAh{D*%?CSQAv(oFpCt;>~_
zKmU22VjE92t%qk4<pQlMc|Nt$AJMy&uN65@*gm8QYQ^jm(X#v5t2aDFbqC5frv!8>
zj()MjzymT96EH8h6bF;&mkJ$YPmxm+a~yfiWqNGX)+_Ku;W4_0h{@FX6@8@Nt$ZfQ
zUvoYv(%P8#Qx*OE$&WsTIV=dXv$SV-IFpLoZd16G_a^U6CJ`$XJ^NeFw(_6-to)--
z@j`F7D2wDjlDIRSS<%;XZY7ueg7cdApiIS>ucH44h1}#DXBg_5Xl)f+TPG0LQ`NwZ
zEiH|)4W*@S4QjkM61gK1xfi+-)xR*uJ3Egv|8nV4zFt}a^{CXmF)74i!sHw0&H;+8
z8ev98nwr?ArV&s`5<nqU@*qBOm;iqysoEym+J=W4hlleR3m&EL1X~WVAqW|ymIx#b
z=su_}qKd|Er*>{?WD!KD#dYOv<vL+Z-6akUO%QDA5^k_Txl1+nqAI!c_y2rJ+kE8y
zNSAohclGU`ynQuS+9XPwKwA$94NWa=GIKtQSmyM@(D3LueGf+x$k~luo2Ix_Xbt#`
z55mykb)g8T5quoO&uz0)6U%rPLV;DGeOE^Z0^ZX<1ug?sApR2U79%q42txag?XC2^
zp{}YDZy3uiZgP5lp_>~Y9UgRZtILb?Zf>Bz@2X3gMY>#a^=e-q62!O^CcTynTpJvA
zkrEeIRax5LR&3kWM0|mD=quaY;`Z%r2qTFQU@fg}+u@gFD=u|&HMI>*-#nCDUh*vB
z%uFVATD6M4n@vV2!QlnXL!*~W!jxvEnm~BAB=I3>wpf#az}gx<(%Wv+=?wB?pmuU@
zZgv*Y{Bapjjw~#9_$!H+q4e40+&px`crCAZ>BE?oT^uBAeK%(^12zbm1@4nv5nPnr
z3M4WB)9*kI?UYLq1tf>2OmmT-i}U#dUbkXt*^6W^0uL3STZCXhGO47CTUrACkBh8_
zf^N>Yy6VlLjwv$Qgpt%C>dkxay$8wyi$n7-=^)?(>w>m`V<x{{KtylOFYp^miOB%O
zOy}1}ug^@~`ueTz=M)kndUE#{bS4U@h<|)mAW8(6@9llkO#y#Td=J<W{C)4e1zDHg
zP0_jZ?tvEv<hy@L9-!K}89ihX_;gL-0Z7`pef6f&g|qVgJO0a#T<PiW$)*4NRAG<H
zTWSf7@3w2#cVSO)F+Y6(xv)fWWaLXUl?Ze9Yx%vGMN6o@svED|o<;4!&^Z>c?Y%=k
z;6jFwfeoM9dzkz=XIL^U$&?duAEMykm}VKVmkAk|@H32MRsJrow*=H({IJ)}8IUR2
z4O#o1gKjQbR8-KlZ`>tnd*M^4m53I1c@E;Pb(?KHzrTP1&-?j~x?k!d_q+2NwZhX#
zoYf1jlI;@N4q|2QIpL=1UkbZZVFyN<-M8MDn;jo>E3_P^)tb#(w<4T*=&|bZU2Sf~
zy4}9ME(nD>H=i0CpPhT-E#3`U(j-n=`c&Jl^6JMP%D5GFyC~8J^DT9vrA|60BUz2O
zuo#FW04JGUb?XcU6(>htP9RE+!L2hQ_fu_kkx@w*^>Vjvbu|t%2+U*n9WU(6^n|XK
zbLoI}qeL$JGbBVYxI8|-LbE;i03b0KIfO(HamFZ(T$hPOX`DmKcTtd}DjN<XuAG<=
z^{R~CUSU_*^`c%LrM;+OFWOt|TMe!w^er@vq9PRv1$?kDdRJHb`{&%nRx4sOLeXYH
zXQ_!7Qh%7n0#sPtM3n3)QDb(LmV|?_i(85Sq{(Db)pf=0V!wYixC}Gdaxj>MIm20A
zgE*2-hePSlQ|qSr6J!=GOt_J$nvq*pz*u9(1};wx47f#ur>AFr-ryF);XqAeeZ5;;
zwW!s_#RY0@J`u`hFJGQ<i+8rSD->;a;tBZ4*3{sM<<U`vV!D9i-a7L;Ko6?9DGH=`
zamBL|h{E6$Ugwg7<49RLIp=kojfjC4rm<(EM4?o|^bM3W%c+g-A_W%<>$FON8tI5G
z=Cf8-!DMLHxb<Eyf|cQJB>+Z=gi;cfJfb}VV3u2NJ5cKm)N1n~bC{S(M|+3Ifx4QQ
zo|&B)y1wMLnawJk->Dc;B6cyhMbFZbMrU^0?8xj39naeC+m9m_!2UhEJ9qBwaJp?s
zE2al@Q;l$fMTi>ia1`4i8{LBHZ6dR5WrmxW`42w2qPxftvry7S4lt2-<?jk!HWD*4
z0|5jHgP@Q9qd&s=RZ~+K1BzFn9uZw^;DZ4-bT@VP*1Nj^K*;YbH;%ZMFdhdpT*)Ng
z{z&=%^iN1_mv}df@*jH0&0S}UR`PA9<tya!4dYj6`Nem(x$|fjx>_K0KzzW|r~j#)
zh5k4A5w9=_V9yw0*)Jl6p~2x`6JBqEExd0ef04x_`ji14GOAs7-L-3fef|DtzwwP{
z4O2XDtwm7E<=;1EDP%M%%;oA*6zW1qj$9pb&{+9f1w3wP^4dL$o64ZO8;vC<k^doe
zONiJe<+OT*U61-*cS|&ce{QyX<oYclddc^1T;HVGDESF6MC|?Kj|&K*&9dI1b)4E-
z$H!e?rT15Dy?>To*KWNod(POmUYBErm2JH~Ps_1vy*@#&w`{$BiC+Km*6UOB`tibb
zJz<C*v=-uNgjqo9Hw*r|5f}R4UKl-L4kTCdGflvqIiH^aT7s!i0zDgLn<U)TI4;Ha
zUE?ft_!OaFu)4Ym1u|Dc5)&$vv&mi97*Q)Rh(avSoCcJ0)=6wugp-9u5b`l5P=1?d
zI2zPrE1G``Zl5%L+9--p+e7O7bkPyrAP`<m?u|6!oqgtazDzaD^fUjJ+-GVN;qH6t
N_rHAX>;DJ&{{Yb7Q%e8<

literal 0
HcmV?d00001

diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 38f299e8c..2c61ffc14 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -1,22 +1,19 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
+import { fontFamily } from 'tailwindcss/defaultTheme'
 import tailwindcssAnimate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
+  darkMode: ['class'],
   content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     container: {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px',
+        '2xl': '1536px',
       },
     },
     extend: {
-      fontFamily: {
-        sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
-      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -32,8 +29,8 @@ export default {
           foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
         },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
@@ -68,33 +65,28 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
-      boxShadow: {
-        switch:
-					'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px',
+      fontFamily: {
+        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
+        mono: ['var(--font-geist-mono)', ...fontFamily.mono],
       },
       keyframes: {
         'accordion-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--reka-accordion-content-height)' },
-          to: { height: 0 },
-        },
-        'collapsible-down': {
-          from: { height: 0 },
-          to: { height: 'var(--reka-collapsible-content-height)' },
+          to: { height: '0' },
         },
-        'collapsible-up': {
-          from: { height: 'var(--reka-collapsible-content-height)' },
-          to: { height: 0 },
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-in-out',
-        'accordion-up': 'accordion-up 0.2s ease-in-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
       },
     },
   },

From 69279434775b2e24484c30e8082dc14081e7285d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 20 Nov 2024 12:54:16 +0800
Subject: [PATCH 09/39] docs: update content, styling

---
 apps/www/.vitepress/theme/components/Logo.vue | 12 +---
 .../www/.vitepress/theme/components/Steps.vue |  2 +-
 .../theme/components/TableOfContent.vue       | 14 ++--
 .../theme/components/TableOfContentTree.vue   |  4 +-
 .../.vitepress/theme/layout/DocsLayout.vue    | 38 ++++++-----
 apps/www/.vitepress/theme/style.css           | 10 ++-
 apps/www/.vitepress/theme/styles/vp-doc.css   |  9 ++-
 apps/www/src/content/docs/cli.md              | 67 +++++++++----------
 apps/www/src/content/docs/components-json.md  | 36 ++++++++++
 apps/www/src/content/docs/dark-mode.md        |  2 +-
 10 files changed, 115 insertions(+), 79 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/Logo.vue b/apps/www/.vitepress/theme/components/Logo.vue
index 9e6683929..0f29aa651 100644
--- a/apps/www/.vitepress/theme/components/Logo.vue
+++ b/apps/www/.vitepress/theme/components/Logo.vue
@@ -3,17 +3,7 @@
 
 <template>
   <a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
-    <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_102_1338)">
-        <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M192 40L40 192" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_102_1338">
-          <rect width="256" height="256" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-6 w-6 text-[#41B883]"><rect width="256" height="256" fill="none" /><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" /><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" /></svg>
 
     <span class="font-bold">
       shadcn/vue
diff --git a/apps/www/.vitepress/theme/components/Steps.vue b/apps/www/.vitepress/theme/components/Steps.vue
index a1d6cd8ea..03de4a09b 100644
--- a/apps/www/.vitepress/theme/components/Steps.vue
+++ b/apps/www/.vitepress/theme/components/Steps.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+    class="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
   >
     <slot />
   </div>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index 9a795caa2..ce277f6e3 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -61,14 +61,12 @@ onContentUpdated(() => {
 
 <template>
   <div class="hidden text-sm xl:block">
-    <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
-      <div class="no-scrollbar h-full overflow-auto pb-10">
-        <p class="font-medium">
-          On This Page
-        </p>
-        <TableOfContentTree :tree="headers" :level="1" />
-        <CarbonAds v-if="showCarbonAds" />
-      </div>
+    <div class="no-scrollbar h-full overflow-auto pb-10 space-y-2">
+      <p class="font-medium">
+        On This Page
+      </p>
+      <TableOfContentTree :tree="headers" :level="1" />
+      <CarbonAds v-if="showCarbonAds" />
     </div>
   </div>
 
diff --git a/apps/www/.vitepress/theme/components/TableOfContentTree.vue b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
index b0da4502f..97e5b9149 100644
--- a/apps/www/.vitepress/theme/components/TableOfContentTree.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
@@ -42,7 +42,9 @@ watch(() => route.path, () => {
                item.url === hash
                  ? 'font-medium text-foreground'
                  : 'text-muted-foreground')"
-        >{{ item.title }} </a>
+        >
+          {{ item.title }}
+        </a>
 
         <TableOfContentTree v-if="item.items?.length" :tree="item" :level="level + 1" />
       </li>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index b2b6f7b56..954af6d2a 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -18,7 +18,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
   <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
     <aside class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
       <div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
-        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title">
           <div class="pb-4">
             <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
               {{ docsGroup.title }}
@@ -28,22 +28,24 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
               </span>
             </h4>
 
-            <div
-              v-for="doc in docsGroup.items "
-              :key="doc.title"
-            >
-              <a
-                v-if="doc.href"
-                :disabled="doc.disabled"
-                :href="doc.href"
-                :class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
+            <div class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
+              <template
+                v-for="doc in docsGroup.items "
+                :key="doc.title"
               >
-                {{ doc.title }}
+                <a
+                  v-if="doc.href"
+                  :disabled="doc.disabled"
+                  :href="doc.href"
+                  :class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
+                >
+                  {{ doc.title }}
 
-                <span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                  {{ doc.label }}
-                </span>
-              </a>
+                  <span v-if="doc.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                    {{ doc.label }}
+                  </span>
+                </a>
+              </template>
             </div>
           </div>
         </div>
@@ -60,14 +62,14 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
 
         <div class="space-y-2">
           <div class="flex items-center space-x-4">
-            <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+            <h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
               {{ frontmatter.title }}
             </h1>
             <span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
               {{ frontmatter.label }}
             </span>
           </div>
-          <p class="text-lg text-muted-foreground">
+          <p class="text-base text-muted-foreground">
             {{ frontmatter.description }}
           </p>
         </div>
@@ -94,7 +96,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
       </div>
 
       <div class="hidden text-sm xl:block">
-        <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+        <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
           <TableOfContent show-carbon-ads />
         </div>
       </div>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index e8da4d6cb..770d7d6c4 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -231,10 +231,18 @@ pre code .line {
 }
 
 .line-number {
-	@apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];
+	@apply !text-sm !inline-block text-muted-foreground leading-[--vp-code-line-height];
 }
 
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: 0.3s;
 }
+
+.steps:first-child > h3:first-child {
+  @apply mt-0;
+}
+
+.steps > h3 {
+  @apply mt-8 mb-4 text-base font-semibold !important;
+}
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 08601861d..008137151 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -22,6 +22,10 @@
   outline: none;
 }
 
+.vp-doc h2:first-child {
+  @apply mt-0 pt-0;
+}
+
 .vp-doc h1:not(:where(.not-docs *)) {
   letter-spacing: -0.02em;
   line-height: 40px;
@@ -422,11 +426,12 @@
   left: 0;
   z-index: 3;
   border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 16px;
+  padding-top: 14px;
+  padding-left: 8px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
-  line-height: var(--vp-code-line-height);
+  /* line-height: var(--vp-code-line-height); */
   font-size: var(--vp-code-font-size);
   color: var(--vp-code-line-number-color);
   transition:
diff --git a/apps/www/src/content/docs/cli.md b/apps/www/src/content/docs/cli.md
index 51c3d81b0..015cb5d87 100644
--- a/apps/www/src/content/docs/cli.md
+++ b/apps/www/src/content/docs/cli.md
@@ -7,7 +7,7 @@ description: Use the CLI to add components to your project.
 
 Use the `init` command to initialize configuration and dependencies for a new project.
 
-The `init` command installs dependencies, adds the `cn`, `useEmitsAsProps` utils, configures `tailwind.config.cjs`, and creates CSS variables for the project.
+The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
 
 ```bash
 npx shadcn-vue@latest init
@@ -15,28 +15,27 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
-Would you like to use TypeScript (recommended)? no / yes
-Which framework are you using? Vite / Nuxt / Laravel
-Which style would you like to use? › Default
-Which color would you like to use as base color? › Slate
-Where is your global CSS file? › › src/index.css
+```:line-numbers
+Which style would you like to use? › New York
+Which color would you like to use as base color? › Zinc
 Do you want to use CSS variables for colors? › no / yes
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for utils: › @/lib/utils
 ```
 
 ### Options
 
-```ansi
-Usage: shadcn-vue init [options]
+```txt
+Usage: shadcn-vue init [options] [components...]
 
 initialize your project and install dependencies
 
+Arguments:
+  components         the components to add or a url to the component.
+
 Options:
-  -y, --yes        skip confirmation prompt. (default: false)
-  -c, --cwd <cwd>  the working directory. (default: the current directory)
+  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
+  -f, --force       force overwrite of existing components.json. (default: false)
+  -y, --yes         skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>   the working directory. defaults to the current directory.
   -h, --help       display help for command
 ```
 
@@ -50,8 +49,9 @@ npx shadcn-vue@latest add [component]
 
 You will be presented with a list of components to choose from:
 
-```ansi
-Which components would you like to add? › Space to select. Return to submit.
+```txt
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
 
 ◯  accordion
 ◯  alert
@@ -60,45 +60,40 @@ Which components would you like to add? › Space to select. Return to submit.
 ◯  avatar
 ◯  badge
 ◯  button
+◯  calendar
 ◯  card
 ◯  checkbox
-◯  collapsible
 ```
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue add [options] [components...]
 
-add components to your project
+add a component to your project
 
 Arguments:
-  components         name of components
+  components         the components to add or a url to the component.
 
 Options:
-  --nodep            disable adding & installing dependencies (advanced) (default: false)
-  -y, --yes          Skip confirmation prompt. (default: false)
+  -y, --yes          skip confirmation prompt. (default: false)
   -o, --overwrite    overwrite existing files. (default: false)
-  -c, --cwd <cwd>    the working directory. (default: the current directory)
+  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -a, --all          add all available components. (default: false)
   -p, --path <path>  the path to add the component to.
   -h, --help         display help for command
 ```
 
-## update
-
-Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.
+## Monorepo
 
-We plan on improving this command in the future to improve the update experience.
+In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
 
-```ansi
-Usage: shadcn-vue update [options] [components...]
-
-update components in your project
+```bash
+npx shadcn-vue@latest init -c ./apps/www
+```
 
-Arguments:
-  components       name of components
+or
 
-Options:
-  -c, --cwd <cwd>  the working directory. (default: the current directory)
-  -h, --help       display help for command
+```bash
+npx shadcn-vue@latest add alert-dialog -c ./apps/www
 ```
diff --git a/apps/www/src/content/docs/components-json.md b/apps/www/src/content/docs/components-json.md
index 84473bda0..b7d9f809b 100644
--- a/apps/www/src/content/docs/components-json.md
+++ b/apps/www/src/content/docs/components-json.md
@@ -108,6 +108,18 @@ For more information, see the [theming docs](/docs/theming).
 
 **This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
 
+### tailwind.prefix
+
+The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
+
+```json title="components.json"
+{
+  "tailwind": {
+    "prefix": "tw-"
+  }
+}
+```
+
 ## aliases
 
 The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
@@ -160,3 +172,27 @@ The CLI will use the `aliases.ui` value to determine where to place your `ui` co
   }
 }
 ```
+
+### aliases.lib
+
+Import alias for `lib` functions such as `format-date` or `generate-id`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "lib": "@/lib"
+  }
+}
+```
+
+### aliases.hooks
+
+Import alias for `hooks` such as `use-media-query` or `use-toast`.
+
+```json title="components.json"
+{
+  "aliases": {
+    "hooks": "@/hooks"
+  }
+}
+```
diff --git a/apps/www/src/content/docs/dark-mode.md b/apps/www/src/content/docs/dark-mode.md
index 41d2d34de..7d589cb6b 100644
--- a/apps/www/src/content/docs/dark-mode.md
+++ b/apps/www/src/content/docs/dark-mode.md
@@ -11,7 +11,7 @@ description: Adding dark mode to your site.
   import AstroIcon from '~icons/simple-icons/astro'
 </script>
 
-<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
+<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 not-docs">
   <LinkedCard href="/docs/dark-mode/vite">
     <ViteIcon class="w-10 h-10" />
     <p class="mt-2 font-medium">Vite</p>

From 8cd51af246440cb7a0ac34327bbb9ec8db912462 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 20 Nov 2024 18:07:34 +0800
Subject: [PATCH 10/39] refactor: new CLI

---
 packages/cli/package.json                     |   8 +
 packages/cli/src/commands/add.ts              | 311 +++++-----
 packages/cli/src/commands/diff.ts             | 100 ++--
 packages/cli/src/commands/info.ts             |  21 +
 packages/cli/src/commands/init.ts             | 411 ++++++-------
 packages/cli/src/commands/migrate.ts          |  89 +++
 packages/cli/src/index.ts                     |  19 +-
 .../cli/src/migrations/migrate-icons.test.ts  | 158 +++++
 packages/cli/src/migrations/migrate-icons.ts  | 201 +++++++
 packages/cli/src/preflights/preflight-add.ts  |  62 ++
 packages/cli/src/preflights/preflight-init.ts | 146 +++++
 .../cli/src/preflights/preflight-migrate.ts   |  65 +++
 packages/cli/src/utils/add-components.ts      |  56 ++
 packages/cli/src/utils/create-project.ts      | 118 ++++
 packages/cli/src/utils/errors.ts              |  12 +
 packages/cli/src/utils/frameworks.ts          |  36 ++
 packages/cli/src/utils/get-config.ts          | 100 ++--
 packages/cli/src/utils/get-package-info.ts    |  20 +-
 packages/cli/src/utils/get-project-info.ts    | 273 +++++++--
 packages/cli/src/utils/highlighter.ts         |   8 +
 packages/cli/src/utils/icon-libraries.ts      |  12 +
 packages/cli/src/utils/logger.ts              |  23 +
 packages/cli/src/utils/registry/index.ts      | 388 +++++++++++--
 packages/cli/src/utils/registry/schema.ts     |  74 ++-
 packages/cli/src/utils/spinner.ts             |  13 +
 .../cli/src/utils/updaters/update-css-vars.ts | 298 ++++++++++
 .../src/utils/updaters/update-dependencies.ts |  28 +
 .../cli/src/utils/updaters/update-files.ts    | 173 ++++++
 .../utils/updaters/update-tailwind-config.ts  | 545 ++++++++++++++++++
 .../utils/updaters/update-tailwind-content.ts | 122 ++++
 packages/cli/tsconfig.json                    |   1 +
 pnpm-lock.yaml                                |  85 +++
 32 files changed, 3412 insertions(+), 564 deletions(-)
 create mode 100644 packages/cli/src/commands/info.ts
 create mode 100644 packages/cli/src/commands/migrate.ts
 create mode 100644 packages/cli/src/migrations/migrate-icons.test.ts
 create mode 100644 packages/cli/src/migrations/migrate-icons.ts
 create mode 100644 packages/cli/src/preflights/preflight-add.ts
 create mode 100644 packages/cli/src/preflights/preflight-init.ts
 create mode 100644 packages/cli/src/preflights/preflight-migrate.ts
 create mode 100644 packages/cli/src/utils/add-components.ts
 create mode 100644 packages/cli/src/utils/create-project.ts
 create mode 100644 packages/cli/src/utils/errors.ts
 create mode 100644 packages/cli/src/utils/frameworks.ts
 create mode 100644 packages/cli/src/utils/highlighter.ts
 create mode 100644 packages/cli/src/utils/icon-libraries.ts
 create mode 100644 packages/cli/src/utils/logger.ts
 create mode 100644 packages/cli/src/utils/spinner.ts
 create mode 100644 packages/cli/src/utils/updaters/update-css-vars.ts
 create mode 100644 packages/cli/src/utils/updaters/update-dependencies.ts
 create mode 100644 packages/cli/src/utils/updaters/update-files.ts
 create mode 100644 packages/cli/src/utils/updaters/update-tailwind-config.ts
 create mode 100644 packages/cli/src/utils/updaters/update-tailwind-content.ts

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 8e5c16dcc..2f3b432ec 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -56,9 +56,12 @@
     "c12": "^2.0.1",
     "commander": "^12.1.0",
     "consola": "^3.2.3",
+    "deepmerge": "^4.3.1",
     "diff": "^7.0.0",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.5",
+    "kleur": "^4.1.5",
     "lodash-es": "^4.17.21",
     "magic-string": "^0.30.13",
     "nypm": "^0.3.12",
@@ -66,9 +69,13 @@
     "ora": "^8.1.1",
     "pathe": "^1.1.2",
     "pkg-types": "^1.2.1",
+    "postcss": "^8.4.49",
     "prompts": "^2.4.2",
     "reka-ui": "catalog:",
     "semver": "^7.6.3",
+    "stringify-object": "^5.0.0",
+    "tailwindcss": "^3.4.15",
+    "ts-morph": "^24.0.0",
     "tsconfig-paths": "^4.2.0",
     "vue-metamorph": "3.2.0",
     "zod": "^3.23.8"
@@ -79,6 +86,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.9.0",
     "@types/prompts": "^2.4.9",
+    "@types/stringify-object": "^4.0.5",
     "tsup": "^8.3.5",
     "type-fest": "^4.27.0",
     "typescript": "catalog:",
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index c0944827e..a9f897137 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -1,38 +1,35 @@
-import { existsSync, promises as fs, rmSync } from 'node:fs'
-import process from 'node:process'
-import { getConfig } from '@/src/utils/get-config'
+import path from 'node:path'
+import { runInit } from '@/src/commands/init'
+import { preFlightAdd } from '@/src/preflights/preflight-add'
+import { addComponents } from '@/src/utils/add-components'
+import * as ERRORS from '@/src/utils/errors'
 import { handleError } from '@/src/utils/handle-error'
-import {
-  fetchTree,
-  getItemTargetPath,
-  getRegistryBaseColor,
-  getRegistryIndex,
-  resolveTree,
-} from '@/src/utils/registry'
-import { transform } from '@/src/utils/transformers'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import { getRegistryIndex } from '@/src/utils/registry'
 import { Command } from 'commander'
-import { consola } from 'consola'
-import { colors } from 'consola/utils'
-import { addDependency, addDevDependency } from 'nypm'
-import ora from 'ora'
-import path from 'pathe'
 import prompts from 'prompts'
 import { z } from 'zod'
 
-const addOptionsSchema = z.object({
+export const addOptionsSchema = z.object({
   components: z.array(z.string()).optional(),
   yes: z.boolean(),
   overwrite: z.boolean(),
   cwd: z.string(),
   all: z.boolean(),
   path: z.string().optional(),
+  silent: z.boolean(),
+  srcDir: z.boolean().optional(),
 })
 
 export const add = new Command()
   .name('add')
   .description('add a component to your project')
-  .argument('[components...]', 'the components to add')
-  .option('-y, --yes', 'skip confirmation prompt.', true)
+  .argument(
+    '[components...]',
+    'the components to add or a url to the component.',
+  )
+  .option('-y, --yes', 'skip confirmation prompt.', false)
   .option('-o, --overwrite', 'overwrite existing files.', false)
   .option(
     '-c, --cwd <cwd>',
@@ -41,182 +38,158 @@ export const add = new Command()
   )
   .option('-a, --all', 'add all available components', false)
   .option('-p, --path <path>', 'the path to add the component to.')
+  .option('-s, --silent', 'mute output.', false)
+  .option(
+    '--src-dir',
+    'use the src directory when creating a new project.',
+    false,
+  )
   .action(async (components, opts) => {
     try {
       const options = addOptionsSchema.parse({
         components,
+        cwd: path.resolve(opts.cwd),
         ...opts,
       })
 
-      const cwd = path.resolve(options.cwd)
-
-      if (!existsSync(cwd)) {
-        consola.error(`The path ${cwd} does not exist. Please try again.`)
-        process.exit(1)
-      }
-
-      const config = await getConfig(cwd)
-
-      if (!config) {
-        consola.warn(`Configuration is missing. Please run ${colors.green('init')} to create a components.json file.`)
-
-        process.exit(1)
-      }
-
-      const registryIndex = await getRegistryIndex()
-
-      let selectedComponents = options.all
-        ? registryIndex.map(entry => entry.name)
-        : options.components
-      if (!options.components?.length && !options.all) {
-        const { components } = await prompts({
-          type: 'multiselect',
-          name: 'components',
-          message: 'Which components would you like to add?',
-          hint: 'Space to select. A to toggle all. Enter to submit.',
-          instructions: false,
-          choices: registryIndex.map(entry => ({
-            title: entry.name,
-            value: entry.name,
-            selected: options.all
-              ? true
-              : options.components?.includes(entry.name),
-          })),
+      // Confirm if user is installing themes.
+      // For now, we assume a theme is prefixed with "theme-".
+      const isTheme = options.components?.some(component =>
+        component.includes('theme-'),
+      )
+      if (!options.yes && isTheme) {
+        logger.break()
+        const { confirm } = await prompts({
+          type: 'confirm',
+          name: 'confirm',
+          message: highlighter.warn(
+            'You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?',
+          ),
         })
-        selectedComponents = components
+        if (!confirm) {
+          logger.break()
+          logger.log('Theme installation cancelled.')
+          logger.break()
+          process.exit(1)
+        }
       }
 
-      if (!selectedComponents?.length) {
-        consola.warn('No components selected. Exiting.')
-        process.exit(0)
+      if (!options.components?.length) {
+        options.components = await promptForRegistryComponents(options)
       }
 
-      const tree = await resolveTree(registryIndex, selectedComponents)
-      const payload = await fetchTree(config.style, tree)
-      const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
+      let { errors, config } = await preFlightAdd(options)
 
-      if (!payload.length) {
-        consola.warn('Selected components not found. Exiting.')
-        process.exit(0)
-      }
-
-      if (!options.yes) {
+      // No components.json file. Prompt the user to run init.
+      if (errors[ERRORS.MISSING_CONFIG]) {
         const { proceed } = await prompts({
           type: 'confirm',
           name: 'proceed',
-          message: 'Ready to install components and dependencies. Proceed?',
+          message: `You need to create a ${highlighter.info(
+            'components.json',
+          )} file to add components. Proceed?`,
           initial: true,
         })
 
-        if (!proceed)
-          process.exit(0)
-      }
-
-      const spinner = ora('Installing components...').start()
-      for (const item of payload) {
-        spinner.text = `Installing ${item.name}...`
-        const targetDir = getItemTargetPath(
-          config,
-          item,
-          options.path ? path.resolve(cwd, options.path) : undefined,
-        )
-
-        if (!targetDir)
-          continue
-
-        if (!existsSync(targetDir))
-          await fs.mkdir(targetDir, { recursive: true })
-
-        const existingComponent = item.files.filter(file =>
-          existsSync(path.resolve(targetDir, item.name, file.name)),
-        )
-
-        if (existingComponent.length && !options.overwrite) {
-          if (selectedComponents.includes(item.name)) {
-            spinner.stop()
-            const { overwrite } = await prompts({
-              type: 'confirm',
-              name: 'overwrite',
-              message: `Component ${item.name} already exists. Would you like to overwrite?`,
-              initial: false,
-            })
-
-            if (!overwrite) {
-              consola.info(
-                `Skipped ${item.name}. To overwrite, run with the ${colors.green(
-                  '--overwrite',
-                )} flag.`,
-              )
-              continue
-            }
-
-            spinner.start(`Installing ${item.name}...`)
-          }
-          else {
-            continue
-          }
+        if (!proceed) {
+          logger.break()
+          process.exit(1)
         }
 
-        // Install dependencies.
-        await Promise.allSettled(
-          [
-            item.dependencies?.length && await addDependency(item.dependencies, {
-              cwd,
-              silent: true,
-            }),
-            item.devDependencies?.length && await addDevDependency(item.devDependencies, {
-              cwd,
-              silent: true,
-            }),
-          ],
-        )
-
-        const componentDir = path.resolve(targetDir, item.name)
-        if (!existsSync(componentDir))
-          await fs.mkdir(componentDir, { recursive: true })
-
-        const files = item.files.map(file => ({
-          ...file,
-          path: path.resolve(
-            targetDir,
-            item.name,
-            file.name,
-          ),
-        }))
+        config = await runInit({
+          cwd: options.cwd,
+          yes: true,
+          force: true,
+          defaults: false,
+          skipPreflight: false,
+          silent: true,
+          isNewProject: false,
+          srcDir: options.srcDir,
+        })
+      }
 
-        // We need to write original files to disk if we're not using TypeScript.
-        // Rewrite or delete added files after transformed
-        if (!config.typescript) {
-          for (const file of files)
-            await fs.writeFile(file.path, file.content)
-        }
+      // if (errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+      //   const { projectPath } = await createProject({
+      //     cwd: options.cwd,
+      //     force: options.overwrite,
+      //     srcDir: options.srcDir,
+      //   })
+      //   if (!projectPath) {
+      //     logger.break()
+      //     process.exit(1)
+      //   }
+      //   options.cwd = projectPath
+
+      //   config = await runInit({
+      //     cwd: options.cwd,
+      //     yes: true,
+      //     force: true,
+      //     defaults: false,
+      //     skipPreflight: true,
+      //     silent: true,
+      //     isNewProject: true,
+      //     srcDir: options.srcDir,
+      //   })
+      // }
 
-        for (const file of files) {
-          // Run transformers.
-          const content = await transform({
-            filename: file.path,
-            raw: file.content,
-            config,
-            baseColor,
-          })
-
-          let filePath = file.path
-
-          if (!config.typescript) {
-            // remove original .ts file if we're not using TypeScript.
-            if (file.path.endsWith('.ts')) {
-              if (existsSync(file.path))
-                rmSync(file.path)
-            }
-            filePath = file.path.replace(/\.ts$/, '.js')
-          }
-
-          await fs.writeFile(filePath, content)
-        }
+      if (!config) {
+        throw new Error(
+          `Failed to read config at ${highlighter.info(options.cwd)}.`,
+        )
       }
-      spinner.succeed('Done.')
+
+      await addComponents(options.components, config, options)
     }
     catch (error) {
+      logger.break()
       handleError(error)
     }
   })
+
+async function promptForRegistryComponents(
+  options: z.infer<typeof addOptionsSchema>,
+) {
+  const registryIndex = await getRegistryIndex()
+  if (!registryIndex) {
+    logger.break()
+    handleError(new Error('Failed to fetch registry index.'))
+    return []
+  }
+
+  if (options.all) {
+    return registryIndex.map(entry => entry.name)
+  }
+
+  if (options.components?.length) {
+    return options.components
+  }
+
+  const { components } = await prompts({
+    type: 'multiselect',
+    name: 'components',
+    message: 'Which components would you like to add?',
+    hint: 'Space to select. A to toggle all. Enter to submit.',
+    instructions: false,
+    choices: registryIndex
+      .filter(entry => entry.type === 'registry:ui')
+      .map(entry => ({
+        title: entry.name,
+        value: entry.name,
+        selected: options.all ? true : options.components?.includes(entry.name),
+      })),
+  })
+
+  if (!components?.length) {
+    logger.warn('No components selected. Exiting.')
+    logger.info('')
+    process.exit(1)
+  }
+
+  const result = z.array(z.string()).safeParse(components)
+  if (!result.success) {
+    logger.error('')
+    handleError(new Error('Something went wrong. Please try again.'))
+    return []
+  }
+  return result.data
+}
diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts
index ccea75407..525c56437 100644
--- a/packages/cli/src/commands/diff.ts
+++ b/packages/cli/src/commands/diff.ts
@@ -1,9 +1,11 @@
 import type { Config } from '@/src/utils/get-config'
 import type { registryIndexSchema } from '@/src/utils/registry/schema'
 import { existsSync, promises as fs } from 'node:fs'
-import process from 'node:process'
+import path from 'node:path'
 import { getConfig } from '@/src/utils/get-config'
 import { handleError } from '@/src/utils/handle-error'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
 import {
   fetchTree,
   getItemTargetPath,
@@ -12,10 +14,7 @@ import {
 } from '@/src/utils/registry'
 import { transform } from '@/src/utils/transformers'
 import { Command } from 'commander'
-import { consola } from 'consola'
-import { colors } from 'consola/utils'
 import { type Change, diffLines } from 'diff'
-import path from 'pathe'
 import { z } from 'zod'
 
 const updateOptionsSchema = z.object({
@@ -45,15 +44,15 @@ export const diff = new Command()
       const cwd = path.resolve(options.cwd)
 
       if (!existsSync(cwd)) {
-        consola.error(`The path ${cwd} does not exist. Please try again.`)
+        logger.error(`The path ${cwd} does not exist. Please try again.`)
         process.exit(1)
       }
 
       const config = await getConfig(cwd)
       if (!config) {
-        consola.warn(
-          `Configuration is missing. Please run ${colors.green(
-            'init',
+        logger.warn(
+          `Configuration is missing. Please run ${highlighter.success(
+            `init`,
           )} to create a components.json file.`,
         )
         process.exit(1)
@@ -61,15 +60,24 @@ export const diff = new Command()
 
       const registryIndex = await getRegistryIndex()
 
+      if (!registryIndex) {
+        handleError(new Error('Failed to fetch registry index.'))
+        process.exit(1)
+      }
+
       if (!options.component) {
         const targetDir = config.resolvedPaths.components
 
         // Find all components that exist in the project.
         const projectComponents = registryIndex.filter((item) => {
-          for (const file of item.files) {
-            const filePath = path.resolve(targetDir, file)
-            if (existsSync(filePath))
+          for (const file of item.files ?? []) {
+            const filePath = path.resolve(
+              targetDir,
+              typeof file === 'string' ? file : file.path,
+            )
+            if (existsSync(filePath)) {
               return true
+            }
           }
 
           return false
@@ -88,20 +96,20 @@ export const diff = new Command()
         }
 
         if (!componentsWithUpdates.length) {
-          consola.info('No updates found.')
+          logger.info('No updates found.')
           process.exit(0)
         }
 
-        consola.info('The following components have updates available:')
+        logger.info('The following components have updates available:')
         for (const component of componentsWithUpdates) {
-          consola.info(`- ${component.name}`)
-          for (const change of component.changes)
-            consola.info(`  - ${change.filePath}`)
+          logger.info(`- ${component.name}`)
+          for (const change of component.changes) {
+            logger.info(`  - ${change.filePath}`)
+          }
         }
-
-        consola.log('')
-        consola.info(
-          `Run ${colors.green('diff <component>')} to see the changes.`,
+        logger.break()
+        logger.info(
+          `Run ${highlighter.success(`diff <component>`)} to see the changes.`,
         )
         process.exit(0)
       }
@@ -112,8 +120,10 @@ export const diff = new Command()
       )
 
       if (!component) {
-        consola.error(
-          `The component ${colors.green(options.component)} does not exist.`,
+        logger.error(
+          `The component ${highlighter.success(
+            options.component,
+          )} does not exist.`,
         )
         process.exit(1)
       }
@@ -121,14 +131,14 @@ export const diff = new Command()
       const changes = await diffComponent(component, config)
 
       if (!changes.length) {
-        consola.info(`No updates found for ${options.component}.`)
+        logger.info(`No updates found for ${options.component}.`)
         process.exit(0)
       }
 
       for (const change of changes) {
-        consola.info(`- ${change.filePath}`)
-        printDiff(change.patch)
-        consola.log('')
+        logger.info(`- ${change.filePath}`)
+        await printDiff(change.patch)
+        logger.info('')
       }
     }
     catch (error) {
@@ -143,24 +153,37 @@ async function diffComponent(
   const payload = await fetchTree(config.style, [component])
   const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
 
+  if (!payload) {
+    return []
+  }
+
   const changes = []
 
   for (const item of payload) {
     const targetDir = await getItemTargetPath(config, item)
 
-    if (!targetDir)
+    if (!targetDir) {
       continue
+    }
 
-    for (const file of item.files) {
-      const filePath = path.resolve(targetDir, file.name)
+    for (const file of item.files ?? []) {
+      const filePath = path.resolve(
+        targetDir,
+        typeof file === 'string' ? file : file.path,
+      )
 
-      if (!existsSync(filePath))
+      if (!existsSync(filePath)) {
         continue
+      }
 
       const fileContent = await fs.readFile(filePath, 'utf8')
 
+      if (typeof file === 'string' || !file.content) {
+        continue
+      }
+
       const registryContent = await transform({
-        filename: file.name,
+        filename: file.path,
         raw: file.content,
         config,
         baseColor,
@@ -169,7 +192,6 @@ async function diffComponent(
       const patch = diffLines(registryContent as string, fileContent)
       if (patch.length > 1) {
         changes.push({
-          file: file.name,
           filePath,
           patch,
         })
@@ -180,15 +202,15 @@ async function diffComponent(
   return changes
 }
 
-// TODO: Does is it need to async?
-function printDiff(diff: Change[]) {
+async function printDiff(diff: Change[]) {
   diff.forEach((part) => {
     if (part) {
-      if (part.added)
-        return process.stdout.write(colors.green(part.value))
-
-      if (part.removed)
-        return process.stdout.write(colors.red(part.value))
+      if (part.added) {
+        return process.stdout.write(highlighter.success(part.value))
+      }
+      if (part.removed) {
+        return process.stdout.write(highlighter.error(part.value))
+      }
 
       return process.stdout.write(part.value)
     }
diff --git a/packages/cli/src/commands/info.ts b/packages/cli/src/commands/info.ts
new file mode 100644
index 000000000..981e0338c
--- /dev/null
+++ b/packages/cli/src/commands/info.ts
@@ -0,0 +1,21 @@
+import { getConfig } from '@/src/utils/get-config'
+import { getProjectInfo } from '@/src/utils/get-project-info'
+import { logger } from '@/src/utils/logger'
+import { Command } from 'commander'
+import consola from 'consola'
+
+export const info = new Command()
+  .name('info')
+  .description('get information about your project')
+  .option(
+    '-c, --cwd <cwd>',
+    'the working directory. defaults to the current directory.',
+    process.cwd(),
+  )
+  .action(async (opts) => {
+    logger.info('> project info')
+    consola.log(await getProjectInfo(opts.cwd))
+    logger.break()
+    logger.info('> components.json')
+    consola.log(await getConfig(opts.cwd))
+  })
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index a88d96e07..d302c7093 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,122 +1,180 @@
-import { existsSync, promises as fs } from 'node:fs'
-import process from 'node:process'
-import { Command } from 'commander'
-import { consola } from 'consola'
-import { colors } from 'consola/utils'
-import { template } from 'lodash-es'
-import { addDependency } from 'nypm'
-import ora from 'ora'
-import path from 'pathe'
-import prompts from 'prompts'
-import { z } from 'zod'
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { preFlightInit } from '@/src/preflights/preflight-init'
+import { addComponents } from '@/src/utils/add-components'
 import {
   type Config,
   DEFAULT_COMPONENTS,
   DEFAULT_TAILWIND_CONFIG,
+  DEFAULT_TAILWIND_CSS,
   DEFAULT_UTILS,
   getConfig,
   rawConfigSchema,
   resolveConfigPaths,
-  TAILWIND_CSS_PATH,
-} from '../utils/get-config'
-import { getProjectInfo } from '../utils/get-project-info'
-import { handleError } from '../utils/handle-error'
-import {
-  getRegistryBaseColor,
-  getRegistryBaseColors,
-  getRegistryStyles,
-} from '../utils/registry'
-import * as templates from '../utils/templates'
-import { transformCJSToESM } from '../utils/transformers/transform-cjs-to-esm'
-import { transformByDetype } from '../utils/transformers/transform-sfc'
-import { applyPrefixesCss } from '../utils/transformers/transform-tw-prefix'
-
-const PROJECT_DEPENDENCIES = {
-  base: [
-    'tailwindcss-animate',
-    'class-variance-authority',
-    'clsx',
-    'tailwind-merge',
-    'reka-ui',
-  ],
-}
+} from '@/src/utils/get-config'
+import { getProjectConfig, getProjectInfo } from '@/src/utils/get-project-info'
+import { handleError } from '@/src/utils/handle-error'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import { getRegistryBaseColors, getRegistryStyles } from '@/src/utils/registry'
+import { spinner } from '@/src/utils/spinner'
+import { updateTailwindContent } from '@/src/utils/updaters/update-tailwind-content'
+import { Command } from 'commander'
+import prompts from 'prompts'
+import { z } from 'zod'
 
-const initOptionsSchema = z.object({
+export const initOptionsSchema = z.object({
   cwd: z.string(),
+  components: z.array(z.string()).optional(),
   yes: z.boolean(),
+  defaults: z.boolean(),
+  force: z.boolean(),
+  silent: z.boolean(),
+  isNewProject: z.boolean(),
+  srcDir: z.boolean().optional(),
 })
 
 export const init = new Command()
   .name('init')
   .description('initialize your project and install dependencies')
-  .option('-y, --yes', 'skip confirmation prompt.', false)
+  .argument(
+    '[components...]',
+    'the components to add or a url to the component.',
+  )
+  .option('-y, --yes', 'skip confirmation prompt.', true)
+  .option('-d, --defaults,', 'use default configuration.', false)
+  .option('-f, --force', 'force overwrite of existing configuration.', false)
   .option(
     '-c, --cwd <cwd>',
     'the working directory. defaults to the current directory.',
     process.cwd(),
   )
-  .action(async (opts) => {
+  .option('-s, --silent', 'mute output.', false)
+  .option(
+    '--src-dir',
+    'use the src directory when creating a new project.',
+    false,
+  )
+  .action(async (components, opts) => {
     try {
-      const options = initOptionsSchema.parse(opts)
-      const cwd = path.resolve(options.cwd)
-
-      // Ensure target directory exists.
-      if (!existsSync(cwd)) {
-        consola.error(`The path ${cwd} does not exist. Please try again.`)
-        process.exit(1)
-      }
-
-      // Read config.
-      const existingConfig = await getConfig(cwd)
-      const config = await promptForConfig(cwd, existingConfig, options.yes)
+      const options = initOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        isNewProject: false,
+        components,
+        ...opts,
+      })
 
-      await runInit(cwd, config)
+      await runInit(options)
 
-      consola.log('')
-      consola.info(
-        `${colors.green('Success!')} Project initialization completed.`,
+      logger.log(
+        `${highlighter.success(
+          'Success!',
+        )} Project initialization completed.\nYou may now add components.`,
       )
-      consola.log('')
+      logger.break()
     }
     catch (error) {
+      logger.break()
       handleError(error)
     }
   })
 
-export async function promptForConfig(
-  cwd: string,
-  defaultConfig: Config | null = null,
-  skip = false,
+export async function runInit(
+  options: z.infer<typeof initOptionsSchema> & {
+    skipPreflight?: boolean
+  },
 ) {
-  const highlight = (text: string) => colors.cyan(text)
+  let projectInfo
+  if (!options.skipPreflight) {
+    const preflight = await preFlightInit(options)
+    // if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+    //   const { projectPath } = await createProject(options)
+    //   if (!projectPath) {
+    //     process.exit(1)
+    //   }
+    //   options.cwd = projectPath
+    //   options.isNewProject = true
+    // }
+    projectInfo = preflight.projectInfo
+  }
+  else {
+    projectInfo = await getProjectInfo(options.cwd)
+  }
 
-  const styles = await getRegistryStyles()
-  const baseColors = await getRegistryBaseColors()
+  const projectConfig = await getProjectConfig(options.cwd, projectInfo)
+  const config = projectConfig
+    ? await promptForMinimalConfig(projectConfig, options)
+    : await promptForConfig(await getConfig(options.cwd))
 
+  if (!options.yes) {
+    const { proceed } = await prompts({
+      type: 'confirm',
+      name: 'proceed',
+      message: `Write configuration to ${highlighter.info(
+        'components.json',
+      )}. Proceed?`,
+      initial: true,
+    })
+
+    if (!proceed) {
+      process.exit(0)
+    }
+  }
+
+  // Write components.json.
+  const componentSpinner = spinner(`Writing components.json.`).start()
+  const targetPath = path.resolve(options.cwd, 'components.json')
+  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8')
+  componentSpinner.succeed()
+
+  // Add components.
+  const fullConfig = await resolveConfigPaths(options.cwd, config)
+  const components = ['index', ...(options.components || [])]
+  await addComponents(components, fullConfig, {
+    // Init will always overwrite files.
+    overwrite: true,
+    silent: options.silent,
+    isNewProject:
+      options.isNewProject || projectInfo?.framework.name === 'nuxt',
+  })
+
+  // If a new project is using src dir, let's update the tailwind content config.
+  // TODO: Handle this per framework.
+  if (options.isNewProject && options.srcDir) {
+    await updateTailwindContent(
+      ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+      fullConfig,
+      {
+        silent: options.silent,
+      },
+    )
+  }
+
+  return fullConfig
+}
+
+async function promptForConfig(defaultConfig: Config | null = null) {
+  const [styles, baseColors] = await Promise.all([
+    getRegistryStyles(),
+    getRegistryBaseColors(),
+  ])
+
+  logger.info('')
   const options = await prompts([
     {
       type: 'toggle',
       name: 'typescript',
-      message: `Would you like to use ${highlight('TypeScript')}? ${colors.gray('(recommended)')}?`,
+      message: `Would you like to use ${highlighter.info(
+        'TypeScript',
+      )} (recommended)?`,
       initial: defaultConfig?.typescript ?? true,
       active: 'yes',
       inactive: 'no',
     },
-    {
-      type: 'select',
-      name: 'framework',
-      message: `Which ${highlight('framework')} are you using?`,
-      choices: [
-        { title: 'Vite', value: 'vite' },
-        { title: 'Nuxt', value: 'nuxt' },
-        { title: 'Laravel', value: 'laravel' },
-        { title: 'Astro', value: 'astro' },
-      ],
-    },
     {
       type: 'select',
       name: 'style',
-      message: `Which ${highlight('style')} would you like to use?`,
+      message: `Which ${highlighter.info('style')} would you like to use?`,
       choices: styles.map(style => ({
         title: style.label,
         value: style.name,
@@ -125,7 +183,7 @@ export async function promptForConfig(
     {
       type: 'select',
       name: 'tailwindBaseColor',
-      message: `Which color would you like to use as ${highlight(
+      message: `Which color would you like to use as the ${highlighter.info(
         'base color',
       )}?`,
       choices: baseColors.map(color => ({
@@ -133,28 +191,18 @@ export async function promptForConfig(
         value: color.name,
       })),
     },
-    {
-      type: 'text',
-      name: 'tsConfigPath',
-      message: (prev, values) => `Where is your ${highlight(values.typescript ? 'tsconfig.json' : 'jsconfig.json')} file?`,
-      initial: (prev, values) => {
-        const prefix = values.framework === 'nuxt' ? '.nuxt/' : './'
-        const path = values.typescript ? 'tsconfig.json' : 'jsconfig.json'
-        return prefix + path
-      },
-    },
     {
       type: 'text',
       name: 'tailwindCss',
-      message: `Where is your ${highlight('global CSS')} file? ${colors.gray('(this file will be overwritten)')}`,
-      initial: (prev, values) => defaultConfig?.tailwind.css ?? TAILWIND_CSS_PATH[values.framework as 'vite' | 'nuxt' | 'laravel' | 'astro'],
+      message: `Where is your ${highlighter.info('global CSS')} file?`,
+      initial: defaultConfig?.tailwind.css ?? DEFAULT_TAILWIND_CSS,
     },
     {
       type: 'toggle',
       name: 'tailwindCssVariables',
-      message: `Would you like to use ${highlight(
+      message: `Would you like to use ${highlighter.info(
         'CSS variables',
-      )} for colors?`,
+      )} for theming?`,
       initial: defaultConfig?.tailwind.cssVariables ?? true,
       active: 'yes',
       inactive: 'no',
@@ -162,7 +210,7 @@ export async function promptForConfig(
     {
       type: 'text',
       name: 'tailwindPrefix',
-      message: `Are you using a custom ${highlight(
+      message: `Are you using a custom ${highlighter.info(
         'tailwind prefix eg. tw-',
       )}? (Leave blank if not)`,
       initial: '',
@@ -170,35 +218,30 @@ export async function promptForConfig(
     {
       type: 'text',
       name: 'tailwindConfig',
-      message: `Where is your ${highlight('tailwind.config')} located? ${colors.gray('(this file will be overwritten)')}`,
-      initial: (prev, values) => {
-        if (defaultConfig?.tailwind.config)
-          return defaultConfig?.tailwind.config
-        if (values.framework === 'astro')
-          return 'tailwind.config.mjs'
-        else return DEFAULT_TAILWIND_CONFIG
-      },
+      message: `Where is your ${highlighter.info(
+        'tailwind.config.js',
+      )} located?`,
+      initial: defaultConfig?.tailwind.config ?? DEFAULT_TAILWIND_CONFIG,
     },
     {
       type: 'text',
       name: 'components',
-      message: `Configure the import alias for ${highlight('components')}:`,
+      message: `Configure the import alias for ${highlighter.info(
+        'components',
+      )}:`,
       initial: defaultConfig?.aliases.components ?? DEFAULT_COMPONENTS,
     },
     {
       type: 'text',
       name: 'utils',
-      message: `Configure the import alias for ${highlight('utils')}:`,
+      message: `Configure the import alias for ${highlighter.info('utils')}:`,
       initial: defaultConfig?.aliases.utils ?? DEFAULT_UTILS,
     },
   ])
 
-  const config = rawConfigSchema.parse({
-    $schema: 'https://shadcn-vue.com/schema.json',
+  return rawConfigSchema.parse({
+    $schema: 'https://ui.shadcn.com/schema.json',
     style: options.style,
-    typescript: options.typescript,
-    tsConfigPath: options.tsConfigPath,
-    framework: options.framework,
     tailwind: {
       config: options.tailwindConfig,
       css: options.tailwindCss,
@@ -206,113 +249,79 @@ export async function promptForConfig(
       cssVariables: options.tailwindCssVariables,
       prefix: options.tailwindPrefix,
     },
+    typescript: options.typescript,
     aliases: {
       utils: options.utils,
       components: options.components,
+      // TODO: fix this.
+      lib: options.components.replace(/\/components$/, 'lib'),
+      hooks: options.components.replace(/\/components$/, 'hooks'),
     },
   })
-
-  if (!skip) {
-    const { proceed } = await prompts({
-      type: 'confirm',
-      name: 'proceed',
-      message: `Write configuration to ${highlight('components.json')}. Proceed?`,
-      initial: true,
-    })
-
-    if (!proceed)
-      process.exit(0)
-  }
-
-  // Write to file.
-  consola.log('')
-  const spinner = ora('Writing components.json...').start()
-  const targetPath = path.resolve(cwd, 'components.json')
-  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8')
-  spinner.succeed()
-
-  return await resolveConfigPaths(cwd, config)
 }
 
-export async function runInit(cwd: string, config: Config) {
-  const spinner = ora('Initializing project...')?.start()
-
-  // Check in in a Nuxt project.
-  const { isNuxt, shadcnNuxt } = await getProjectInfo()
-  if (isNuxt) {
-    consola.log('')
-    shadcnNuxt
-      ? consola.info(`Detected a Nuxt project with 'shadcn-nuxt' v${shadcnNuxt.version}...`)
-      : consola.warn(`Detected a Nuxt project without 'shadcn-nuxt' module. It's recommended to install it.`)
-  }
-
-  // Ensure all resolved paths directories exist.
-  for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) {
-    // Determine if the path is a file or directory.
-    // TODO: is there a better way to do this?
-    let dirname = path.extname(resolvedPath)
-      ? path.dirname(resolvedPath)
-      : resolvedPath
-
-    // If the utils alias is set to something like "@/lib/utils",
-    // assume this is a file and remove the "utils" file name.
-    // TODO: In future releases we should add support for individual utils.
-    if (key === 'utils' && resolvedPath.endsWith('/utils')) {
-      // Remove /utils at the end.
-      dirname = dirname.replace(/\/utils$/, '')
-    }
-
-    if (!existsSync(dirname))
-      await fs.mkdir(dirname, { recursive: true })
-  }
+async function promptForMinimalConfig(
+  defaultConfig: Config,
+  opts: z.infer<typeof initOptionsSchema>,
+) {
+  let style = defaultConfig.style
+  let baseColor = defaultConfig.tailwind.baseColor
+  let cssVariables = defaultConfig.tailwind.cssVariables
 
-  const extension = config.typescript ? 'ts' : 'js'
+  if (!opts.defaults) {
+    const [styles, baseColors] = await Promise.all([
+      getRegistryStyles(),
+      getRegistryBaseColors(),
+    ])
 
-  // Write tailwind config.
-  await fs.writeFile(
-    config.resolvedPaths.tailwindConfig,
-    transformCJSToESM(
-      config.resolvedPaths.tailwindConfig,
-      config.tailwind.cssVariables
-        ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension, framework: config.framework, prefix: config.tailwind.prefix })
-        : template(templates.TAILWIND_CONFIG)({ extension, framework: config.framework, prefix: config.tailwind.prefix }),
-    ),
-    'utf8',
-  )
+    const options = await prompts([
+      {
+        type: 'select',
+        name: 'style',
+        message: `Which ${highlighter.info('style')} would you like to use?`,
+        choices: styles.map(style => ({
+          title: style.label,
+          value: style.name,
+        })),
+        initial: styles.findIndex(s => s.name === style),
+      },
+      {
+        type: 'select',
+        name: 'tailwindBaseColor',
+        message: `Which color would you like to use as the ${highlighter.info(
+          'base color',
+        )}?`,
+        choices: baseColors.map(color => ({
+          title: color.label,
+          value: color.name,
+        })),
+      },
+      {
+        type: 'toggle',
+        name: 'tailwindCssVariables',
+        message: `Would you like to use ${highlighter.info(
+          'CSS variables',
+        )} for theming?`,
+        initial: defaultConfig?.tailwind.cssVariables,
+        active: 'yes',
+        inactive: 'no',
+      },
+    ])
 
-  // Write css file.
-  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
-  if (baseColor) {
-    await fs.writeFile(
-      config.resolvedPaths.tailwindCss,
-      config.tailwind.cssVariables
-        ? config.tailwind.prefix
-          ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
-          : baseColor.cssVarsTemplate
-        : baseColor.inlineColorsTemplate,
-      'utf8',
-    )
+    style = options.style
+    baseColor = options.tailwindBaseColor
+    cssVariables = options.tailwindCssVariables
   }
 
-  // Write cn file.
-  await fs.writeFile(
-    `${config.resolvedPaths.utils}.${extension}`,
-    extension === 'ts' ? templates.UTILS : await transformByDetype(templates.UTILS, '.ts'),
-    'utf8',
-  )
-
-  spinner?.succeed()
-
-  // Install dependencies.
-  const dependenciesSpinner = ora('Installing dependencies...')?.start()
-
-  const iconsDep = config.style === 'new-york' ? ['@radix-icons/vue'] : ['lucide-vue-next']
-  const deps = PROJECT_DEPENDENCIES.base.concat(iconsDep).filter(Boolean)
-
-  await addDependency(deps, {
-    cwd,
-    silent: true,
+  return rawConfigSchema.parse({
+    $schema: defaultConfig?.$schema,
+    style,
+    tailwind: {
+      ...defaultConfig?.tailwind,
+      baseColor,
+      cssVariables,
+    },
+    aliases: defaultConfig?.aliases,
+    iconLibrary: defaultConfig?.iconLibrary,
   })
-
-  dependenciesSpinner?.succeed()
 }
diff --git a/packages/cli/src/commands/migrate.ts b/packages/cli/src/commands/migrate.ts
new file mode 100644
index 000000000..751710473
--- /dev/null
+++ b/packages/cli/src/commands/migrate.ts
@@ -0,0 +1,89 @@
+import path from 'node:path'
+import { migrateIcons } from '@/src/migrations/migrate-icons'
+import { preFlightMigrate } from '@/src/preflights/preflight-migrate'
+import * as ERRORS from '@/src/utils/errors'
+import { handleError } from '@/src/utils/handle-error'
+import { Command } from 'commander'
+import consola from 'consola'
+import { z } from 'zod'
+
+export const migrations = [
+  {
+    name: 'icons',
+    description: 'migrate your ui components to a different icon library.',
+  },
+] as const
+
+export const migrateOptionsSchema = z.object({
+  cwd: z.string(),
+  list: z.boolean(),
+  migration: z
+    .string()
+    .refine(
+      value =>
+        value && migrations.some(migration => migration.name === value),
+      {
+        message:
+          'You must specify a valid migration. Run `shadcn migrate --list` to see available migrations.',
+      },
+    )
+    .optional(),
+})
+
+export const migrate = new Command()
+  .name('migrate')
+  .description('run a migration.')
+  .argument('[migration]', 'the migration to run.')
+  .option(
+    '-c, --cwd <cwd>',
+    'the working directory. defaults to the current directory.',
+    process.cwd(),
+  )
+  .option('-l, --list', 'list all migrations.', false)
+  .action(async (migration, opts) => {
+    try {
+      const options = migrateOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        migration,
+        list: opts.list,
+      })
+
+      if (options.list || !options.migration) {
+        consola.info('Available migrations:')
+        for (const migration of migrations) {
+          consola.info(`- ${migration.name}: ${migration.description}`)
+        }
+        return
+      }
+
+      if (!options.migration) {
+        throw new Error(
+          'You must specify a migration. Run `shadcn migrate --list` to see available migrations.',
+        )
+      }
+
+      const { errors, config } = await preFlightMigrate(options)
+
+      if (
+        errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]
+        || errors[ERRORS.MISSING_CONFIG]
+      ) {
+        throw new Error(
+          'No `components.json` file found. Ensure you are at the root of your project.',
+        )
+      }
+
+      if (!config) {
+        throw new Error(
+          'Something went wrong reading your `components.json` file. Please ensure you have a valid `components.json` file.',
+        )
+      }
+
+      if (options.migration === 'icons') {
+        await migrateIcons(config)
+      }
+    }
+    catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 89a45574e..b6eddac86 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,29 +1,32 @@
 #!/usr/bin/env node
-import process from 'node:process'
-
 import { add } from '@/src/commands/add'
-
 import { diff } from '@/src/commands/diff'
+import { info } from '@/src/commands/info'
 import { init } from '@/src/commands/init'
-import { getPackageInfo } from '@/src/utils/get-package-info'
+import { migrate } from '@/src/commands/migrate'
 import { Command } from 'commander'
 
+import packageJson from '../package.json'
+
 process.on('SIGINT', () => process.exit(0))
 process.on('SIGTERM', () => process.exit(0))
 
 async function main() {
-  const packageInfo = await getPackageInfo()
-
   const program = new Command()
     .name('shadcn-vue')
     .description('add components and dependencies to your project')
     .version(
-      packageInfo.version || '1.0.0',
+      packageJson.version || '1.0.0',
       '-v, --version',
       'display the version number',
     )
 
-  program.addCommand(init).addCommand(add).addCommand(diff)
+  program
+    .addCommand(init)
+    .addCommand(add)
+    .addCommand(diff)
+    .addCommand(migrate)
+    .addCommand(info)
 
   program.parse()
 }
diff --git a/packages/cli/src/migrations/migrate-icons.test.ts b/packages/cli/src/migrations/migrate-icons.test.ts
new file mode 100644
index 000000000..cb2b72c45
--- /dev/null
+++ b/packages/cli/src/migrations/migrate-icons.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, it } from 'vitest'
+
+import { migrateIconsFile } from './migrate-icons'
+
+describe('migrateIconsFile', () => {
+  it('should replace radix icons with lucide icons', async () => {
+    const input = `
+      import { CheckIcon, CloseIcon } from "@radix-ui/react-icons"
+      import { Something } from "other-package"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <CloseIcon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, 'radix', 'lucide', {
+        Check: {
+          lucide: 'Check',
+          radix: 'CheckIcon',
+        },
+        X: {
+          lucide: 'X',
+          radix: 'CloseIcon',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it('should return null if no radix icons are found', async () => {
+    const input = `
+      import { Something } from "other-package"
+
+      export function Component() {
+        return <div>No icons here</div>
+      }`
+
+    expect(await migrateIconsFile(input, 'lucide', 'radix', {}))
+      .toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+
+            export function Component() {
+              return <div>No icons here</div>
+            }"
+    `)
+  })
+
+  it('should handle mixed icon imports from different packages', async () => {
+    const input = `
+      import { CheckIcon } from "@radix-ui/react-icons"
+      import { AlertCircle } from "lucide-react"
+      import { Something } from "other-package"
+      import { Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <AlertCircle />
+            <Cross2Icon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, 'radix', 'lucide', {
+        Check: {
+          lucide: 'Check',
+          radix: 'CheckIcon',
+        },
+        X: {
+          lucide: 'X',
+          radix: 'Cross2Icon',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "import { AlertCircle } from "lucide-react"
+            import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <AlertCircle />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it('should preserve all props and children on icons', async () => {
+    const input = `
+      import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon
+              className="w-4 h-4"
+              onClick={handleClick}
+              data-testid="check-icon"
+            >
+              <span>Child content</span>
+            </CheckIcon>
+            <Cross2Icon style={{ color: 'red' }} aria-label="Close" />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, 'radix', 'lucide', {
+        Check: {
+          lucide: 'Check',
+          radix: 'CheckIcon',
+        },
+        X: {
+          lucide: 'X',
+          radix: 'Cross2Icon',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "import { Check, X } from "lucide-react";
+
+                  export function Component() {
+              return (
+                <div>
+                  <CheckIcon
+                    className="w-4 h-4"
+                    onClick={handleClick}
+                    data-testid="check-icon"
+                  >
+                    <span>Child content</span>
+                  </CheckIcon>
+                  <X style={{ color: 'red' }} aria-label="Close" />
+                </div>
+              )
+            }"
+    `)
+  })
+})
diff --git a/packages/cli/src/migrations/migrate-icons.ts b/packages/cli/src/migrations/migrate-icons.ts
new file mode 100644
index 000000000..83558fb2a
--- /dev/null
+++ b/packages/cli/src/migrations/migrate-icons.ts
@@ -0,0 +1,201 @@
+import type { Config } from '@/src/utils/get-config'
+import type { iconsSchema } from '@/src/utils/registry/schema'
+import type { z } from 'zod'
+import { randomBytes } from 'node:crypto'
+import { promises as fs } from 'node:fs'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { highlighter } from '@/src/utils/highlighter'
+import { ICON_LIBRARIES } from '@/src/utils/icon-libraries'
+import { logger } from '@/src/utils/logger'
+import { getRegistryIcons } from '@/src/utils/registry'
+import { spinner } from '@/src/utils/spinner'
+import { updateDependencies } from '@/src/utils/updaters/update-dependencies'
+import fg from 'fast-glob'
+import prompts from 'prompts'
+import { Project, ScriptKind, SyntaxKind } from 'ts-morph'
+
+export async function migrateIcons(config: Config) {
+  if (!config.resolvedPaths.ui) {
+    throw new Error(
+      'We could not find a valid `ui` path in your `components.json` file. Please ensure you have a valid `ui` path in your `components.json` file.',
+    )
+  }
+
+  const uiPath = config.resolvedPaths.ui
+  const [files, registryIcons] = await Promise.all([
+    fg('**/*.{js,ts,jsx,tsx}', {
+      cwd: uiPath,
+    }),
+    getRegistryIcons(),
+  ])
+
+  if (Object.keys(registryIcons).length === 0) {
+    throw new Error('Something went wrong fetching the registry icons.')
+  }
+
+  const libraryChoices = Object.entries(ICON_LIBRARIES).map(
+    ([name, iconLibrary]) => ({
+      title: iconLibrary.name,
+      value: name,
+    }),
+  )
+
+  const migrateOptions = await prompts([
+    {
+      type: 'select',
+      name: 'sourceLibrary',
+      message: `Which icon library would you like to ${highlighter.info(
+        'migrate from',
+      )}?`,
+      choices: libraryChoices,
+    },
+    {
+      type: 'select',
+      name: 'targetLibrary',
+      message: `Which icon library would you like to ${highlighter.info(
+        'migrate to',
+      )}?`,
+      choices: libraryChoices,
+    },
+  ])
+
+  if (migrateOptions.sourceLibrary === migrateOptions.targetLibrary) {
+    throw new Error(
+      'You cannot migrate to the same icon library. Please choose a different icon library.',
+    )
+  }
+
+  if (
+    !(
+      migrateOptions.sourceLibrary in ICON_LIBRARIES
+      && migrateOptions.targetLibrary in ICON_LIBRARIES
+    )
+  ) {
+    throw new Error('Invalid icon library. Please choose a valid icon library.')
+  }
+
+  const sourceLibrary
+    = ICON_LIBRARIES[migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES]
+  const targetLibrary
+    = ICON_LIBRARIES[migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES]
+  const { confirm } = await prompts({
+    type: 'confirm',
+    name: 'confirm',
+    initial: true,
+    message: `We will migrate ${highlighter.info(
+      files.length,
+    )} files in ${highlighter.info(
+      `./${path.relative(config.resolvedPaths.cwd, uiPath)}`,
+    )} from ${highlighter.info(sourceLibrary.name)} to ${highlighter.info(
+      targetLibrary.name,
+    )}. Continue?`,
+  })
+
+  if (!confirm) {
+    logger.info('Migration cancelled.')
+    process.exit(0)
+  }
+
+  if (targetLibrary.package) {
+    await updateDependencies([targetLibrary.package], config, {
+      silent: false,
+    })
+  }
+
+  const migrationSpinner = spinner(`Migrating icons...`)?.start()
+
+  await Promise.all(
+    files.map(async (file) => {
+      migrationSpinner.text = `Migrating ${file}...`
+
+      const filePath = path.join(uiPath, file)
+      const fileContent = await fs.readFile(filePath, 'utf-8')
+
+      const content = await migrateIconsFile(
+        fileContent,
+        migrateOptions.sourceLibrary,
+        migrateOptions.targetLibrary,
+        registryIcons,
+      )
+
+      await fs.writeFile(filePath, content)
+    }),
+  )
+
+  migrationSpinner.succeed('Migration complete.')
+}
+
+export async function migrateIconsFile(
+  content: string,
+  sourceLibrary: keyof typeof ICON_LIBRARIES,
+  targetLibrary: keyof typeof ICON_LIBRARIES,
+  iconsMapping: z.infer<typeof iconsSchema>,
+) {
+  const sourceLibraryImport = ICON_LIBRARIES[sourceLibrary]?.import
+  const targetLibraryImport = ICON_LIBRARIES[targetLibrary]?.import
+
+  const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = path.join(
+    dir,
+    `shadcn-icons-${randomBytes(4).toString('hex')}.tsx`,
+  )
+  const sourceFile = project.createSourceFile(tempFile, content, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Find all sourceLibrary imports.
+  const targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText()
+      !== `"${sourceLibraryImport}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      // TODO: this is O(n^2) but okay for now.
+      const targetedIcon = Object.values(iconsMapping).find(
+        icon => icon[sourceLibrary] === iconName,
+      )?.[targetLibrary]
+
+      if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter(node => node.getTagNameNode()?.getText() === iconName)
+        .forEach(node => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    sourceFile.addImportDeclaration({
+      moduleSpecifier: targetLibraryImport,
+      namedImports: targetedIcons.map(icon => ({
+        name: icon,
+      })),
+    })
+  }
+
+  return await sourceFile.getText()
+}
diff --git a/packages/cli/src/preflights/preflight-add.ts b/packages/cli/src/preflights/preflight-add.ts
new file mode 100644
index 000000000..7d79ef552
--- /dev/null
+++ b/packages/cli/src/preflights/preflight-add.ts
@@ -0,0 +1,62 @@
+import type { addOptionsSchema } from '@/src/commands/add'
+import type { z } from 'zod'
+import path from 'node:path'
+import * as ERRORS from '@/src/utils/errors'
+import { getConfig } from '@/src/utils/get-config'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import fs from 'fs-extra'
+
+export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
+  const errors: Record<string, boolean> = {}
+
+  // Ensure target directory exists.
+  // Check for empty project. We assume if no package.json exists, the project is empty.
+  if (
+    !fs.existsSync(options.cwd)
+    || !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  // Check for existing components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, 'components.json'))) {
+    errors[ERRORS.MISSING_CONFIG] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  try {
+    const config = await getConfig(options.cwd)
+
+    return {
+      errors,
+      config: config!,
+    }
+  }
+  catch (error) {
+    logger.break()
+    logger.error(
+      `An invalid ${highlighter.info(
+        'components.json',
+      )} file was found at ${highlighter.info(
+        options.cwd,
+      )}.\nBefore you can add components, you must create a valid ${highlighter.info(
+        'components.json',
+      )} file by running the ${highlighter.info('init')} command.`,
+    )
+    logger.error(
+      `Learn more at ${highlighter.info(
+        'https://ui.shadcn.com/docs/components-json',
+      )}.`,
+    )
+    logger.break()
+    process.exit(1)
+  }
+}
diff --git a/packages/cli/src/preflights/preflight-init.ts b/packages/cli/src/preflights/preflight-init.ts
new file mode 100644
index 000000000..51f21fbb3
--- /dev/null
+++ b/packages/cli/src/preflights/preflight-init.ts
@@ -0,0 +1,146 @@
+import type { initOptionsSchema } from '@/src/commands/init'
+import type { z } from 'zod'
+import path from 'node:path'
+import * as ERRORS from '@/src/utils/errors'
+import { getProjectInfo, type ProjectInfo } from '@/src/utils/get-project-info'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import { spinner } from '@/src/utils/spinner'
+import fs from 'fs-extra'
+
+export async function preFlightInit(options: z.infer<typeof initOptionsSchema>) {
+  const errors: Record<string, boolean> = {}
+
+  // Ensure target directory exists.
+  // Check for empty project. We assume if no package.json exists, the project is empty.
+  if (
+    !fs.existsSync(options.cwd)
+    || !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
+    return {
+      errors,
+      projectInfo: null,
+    }
+  }
+
+  const projectSpinner = spinner(`Preflight checks.`, {
+    silent: options.silent,
+  }).start()
+
+  if (
+    fs.existsSync(path.resolve(options.cwd, 'components.json'))
+    && !options.force
+  ) {
+    projectSpinner?.fail()
+    logger.break()
+    logger.error(
+      `A ${highlighter.info(
+        'components.json',
+      )} file already exists at ${highlighter.info(
+        options.cwd,
+      )}.\nTo start over, remove the ${highlighter.info(
+        'components.json',
+      )} file and run ${highlighter.info('init')} again.`,
+    )
+    logger.break()
+    process.exit(1)
+  }
+
+  projectSpinner?.succeed()
+
+  const frameworkSpinner = spinner(`Verifying framework.`, {
+    silent: options.silent,
+  }).start()
+  const projectInfo = await getProjectInfo(options.cwd) as ProjectInfo
+  // if (!projectInfo || projectInfo?.framework.name === 'manual') {
+  //   errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
+  //   frameworkSpinner?.fail()
+  //   logger.break()
+  //   if (projectInfo?.framework.links.installation) {
+  //     logger.error(
+  //       `We could not detect a supported framework at ${highlighter.info(
+  //         options.cwd,
+  //       )}.\n`
+  //       + `Visit ${highlighter.info(
+  //         projectInfo?.framework.links.installation,
+  //       )} to manually configure your project.\nOnce configured, you can use the cli to add components.`,
+  //     )
+  //   }
+  //   logger.break()
+  //   process.exit(1)
+  // }
+  if (!projectInfo) {
+    logger.break()
+    process.exit(1)
+  }
+  frameworkSpinner?.succeed(
+    `Verifying framework. Found ${highlighter.info(
+      projectInfo.framework.label,
+    )}.`,
+  )
+
+  const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
+    silent: options.silent,
+  }).start()
+  if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) {
+    errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
+    tailwindSpinner?.fail()
+  }
+  else {
+    tailwindSpinner?.succeed()
+  }
+
+  const tsConfigSpinner = spinner(`Validating import alias.`, {
+    silent: options.silent,
+  }).start()
+  if (!projectInfo?.aliasPrefix) {
+    errors[ERRORS.IMPORT_ALIAS_MISSING] = true
+    tsConfigSpinner?.fail()
+  }
+  else {
+    tsConfigSpinner?.succeed()
+  }
+
+  if (Object.keys(errors).length > 0) {
+    if (errors[ERRORS.TAILWIND_NOT_CONFIGURED]) {
+      logger.break()
+      logger.error(
+        `No Tailwind CSS configuration found at ${highlighter.info(
+          options.cwd,
+        )}.`,
+      )
+      logger.error(
+        `It is likely you do not have Tailwind CSS installed or have an invalid configuration.`,
+      )
+      logger.error(`Install Tailwind CSS then try again.`)
+      if (projectInfo?.framework.links.tailwind) {
+        logger.error(
+          `Visit ${highlighter.info(
+            projectInfo?.framework.links.tailwind,
+          )} to get started.`,
+        )
+      }
+    }
+
+    if (errors[ERRORS.IMPORT_ALIAS_MISSING]) {
+      logger.break()
+      logger.error(`No import alias found in your tsconfig.json file.`)
+      if (projectInfo?.framework.links.installation) {
+        logger.error(
+          `Visit ${highlighter.info(
+            projectInfo?.framework.links.installation,
+          )} to learn how to set an import alias.`,
+        )
+      }
+    }
+
+    logger.break()
+    process.exit(1)
+  }
+
+  return {
+    errors,
+    projectInfo,
+  }
+}
diff --git a/packages/cli/src/preflights/preflight-migrate.ts b/packages/cli/src/preflights/preflight-migrate.ts
new file mode 100644
index 000000000..519cbe127
--- /dev/null
+++ b/packages/cli/src/preflights/preflight-migrate.ts
@@ -0,0 +1,65 @@
+import type { migrateOptionsSchema } from '@/src/commands/migrate'
+import type { z } from 'zod'
+import path from 'node:path'
+// import { addOptionsSchema } from '@/src/commands/add'
+import * as ERRORS from '@/src/utils/errors'
+import { getConfig } from '@/src/utils/get-config'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import fs from 'fs-extra'
+
+export async function preFlightMigrate(
+  options: z.infer<typeof migrateOptionsSchema>,
+) {
+  const errors: Record<string, boolean> = {}
+
+  // Ensure target directory exists.
+  // Check for empty project. We assume if no package.json exists, the project is empty.
+  if (
+    !fs.existsSync(options.cwd)
+    || !fs.existsSync(path.resolve(options.cwd, 'package.json'))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  // Check for existing components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, 'components.json'))) {
+    errors[ERRORS.MISSING_CONFIG] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  try {
+    const config = await getConfig(options.cwd)
+
+    return {
+      errors,
+      config: config!,
+    }
+  }
+  catch (error) {
+    logger.break()
+    logger.error(
+      `An invalid ${highlighter.info(
+        'components.json',
+      )} file was found at ${highlighter.info(
+        options.cwd,
+      )}.\nBefore you can run a migration, you must create a valid ${highlighter.info(
+        'components.json',
+      )} file by running the ${highlighter.info('init')} command.`,
+    )
+    logger.error(
+      `Learn more at ${highlighter.info(
+        'https://ui.shadcn.com/docs/components-json',
+      )}.`,
+    )
+    logger.break()
+    process.exit(1)
+  }
+}
diff --git a/packages/cli/src/utils/add-components.ts b/packages/cli/src/utils/add-components.ts
new file mode 100644
index 000000000..3e75a53cd
--- /dev/null
+++ b/packages/cli/src/utils/add-components.ts
@@ -0,0 +1,56 @@
+import type { Config } from '@/src/utils/get-config'
+import { handleError } from '@/src/utils/handle-error'
+import { logger } from '@/src/utils/logger'
+import { registryResolveItemsTree } from '@/src/utils/registry'
+import { spinner } from '@/src/utils/spinner'
+import { updateCssVars } from '@/src/utils/updaters/update-css-vars'
+import { updateDependencies } from '@/src/utils/updaters/update-dependencies'
+import { updateFiles } from '@/src/utils/updaters/update-files'
+import { updateTailwindConfig } from '@/src/utils/updaters/update-tailwind-config'
+
+export async function addComponents(
+  components: string[],
+  config: Config,
+  options: {
+    overwrite?: boolean
+    silent?: boolean
+    isNewProject?: boolean
+  },
+) {
+  options = {
+    overwrite: false,
+    silent: false,
+    isNewProject: false,
+    ...options,
+  }
+
+  const registrySpinner = spinner(`Checking registry.`, {
+    silent: options.silent,
+  })?.start()
+  const tree = await registryResolveItemsTree(components, config)
+  if (!tree) {
+    registrySpinner?.fail()
+    return handleError(new Error('Failed to fetch components from registry.'))
+  }
+  registrySpinner?.succeed()
+
+  await updateTailwindConfig(tree.tailwind?.config, config, {
+    silent: options.silent,
+  })
+  await updateCssVars(tree.cssVars, config, {
+    cleanupDefaultNextStyles: options.isNewProject,
+    silent: options.silent,
+  })
+
+  await updateDependencies(tree.dependencies, config, {
+    silent: options.silent,
+  })
+  await updateFiles(tree.files, config, {
+    overwrite: options.overwrite,
+    silent: options.silent,
+  })
+
+  if (tree.docs) {
+    logger.info(tree.docs)
+  }
+}
diff --git a/packages/cli/src/utils/create-project.ts b/packages/cli/src/utils/create-project.ts
new file mode 100644
index 000000000..ed5ce254f
--- /dev/null
+++ b/packages/cli/src/utils/create-project.ts
@@ -0,0 +1,118 @@
+import type { initOptionsSchema } from '@/src/commands/init'
+import type { z } from 'zod'
+import path from 'node:path'
+import { getPackageManager } from '@/src/utils/get-package-manager'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import { spinner } from '@/src/utils/spinner'
+import { execa } from 'execa'
+import fs from 'fs-extra'
+import prompts from 'prompts'
+
+export async function createProject(options: Pick<z.infer<typeof initOptionsSchema>, 'cwd' | 'force' | 'srcDir'>) {
+  options = {
+    srcDir: false,
+    ...options,
+  }
+
+  if (!options.force) {
+    const { proceed } = await prompts({
+      type: 'confirm',
+      name: 'proceed',
+      message: `The path ${highlighter.info(
+        options.cwd,
+      )} does not contain a package.json file. Would you like to start a new ${highlighter.info(
+        'Next.js',
+      )} project?`,
+      initial: true,
+    })
+
+    if (!proceed) {
+      return {
+        projectPath: null,
+        projectName: null,
+      }
+    }
+  }
+
+  const packageManager = await getPackageManager(options.cwd, {
+    withFallback: true,
+  })
+
+  const { name } = await prompts({
+    type: 'text',
+    name: 'name',
+    message: `What is your project named?`,
+    initial: 'my-app',
+    format: (value: string) => value.trim(),
+    validate: (value: string) =>
+      value.length > 128 ? `Name should be less than 128 characters.` : true,
+  })
+
+  const projectPath = `${options.cwd}/${name}`
+
+  // Check if path is writable.
+  try {
+    await fs.access(options.cwd, fs.constants.W_OK)
+  }
+  catch (error) {
+    logger.break()
+    logger.error(`The path ${highlighter.info(options.cwd)} is not writable.`)
+    logger.error(
+      `It is likely you do not have write permissions for this folder or the path ${highlighter.info(
+        options.cwd,
+      )} does not exist.`,
+    )
+    logger.break()
+    process.exit(1)
+  }
+
+  if (fs.existsSync(path.resolve(options.cwd, name, 'package.json'))) {
+    logger.break()
+    logger.error(
+      `A project with the name ${highlighter.info(name)} already exists.`,
+    )
+    logger.error(`Please choose a different name and try again.`)
+    logger.break()
+    process.exit(1)
+  }
+
+  const createSpinner = spinner(
+    `Creating a new Next.js project. This may take a few minutes.`,
+  ).start()
+
+  // Note: pnpm fails here. Fallback to npx with --use-PACKAGE-MANAGER.
+  const args = [
+    '--tailwind',
+    '--eslint',
+    '--typescript',
+    '--app',
+    options.srcDir ? '--src-dir' : '--no-src-dir',
+    '--no-import-alias',
+    `--use-${packageManager}`,
+  ]
+
+  try {
+    await execa(
+      'npx',
+      ['create-next-app@14.2.16', projectPath, '--silent', ...args],
+      {
+        cwd: options.cwd,
+      },
+    )
+  }
+  catch (error) {
+    logger.break()
+    logger.error(
+      `Something went wrong creating a new Next.js project. Please try again.`,
+    )
+    process.exit(1)
+  }
+
+  createSpinner?.succeed('Creating a new Next.js project.')
+
+  return {
+    projectPath,
+    projectName: name,
+  }
+}
diff --git a/packages/cli/src/utils/errors.ts b/packages/cli/src/utils/errors.ts
new file mode 100644
index 000000000..dcacfd008
--- /dev/null
+++ b/packages/cli/src/utils/errors.ts
@@ -0,0 +1,12 @@
+export const MISSING_DIR_OR_EMPTY_PROJECT = '1'
+export const EXISTING_CONFIG = '2'
+export const MISSING_CONFIG = '3'
+export const FAILED_CONFIG_READ = '4'
+export const TAILWIND_NOT_CONFIGURED = '5'
+export const IMPORT_ALIAS_MISSING = '6'
+export const UNSUPPORTED_FRAMEWORK = '7'
+export const COMPONENT_URL_NOT_FOUND = '8'
+export const COMPONENT_URL_UNAUTHORIZED = '9'
+export const COMPONENT_URL_FORBIDDEN = '10'
+export const COMPONENT_URL_BAD_REQUEST = '11'
+export const COMPONENT_URL_INTERNAL_SERVER_ERROR = '12'
diff --git a/packages/cli/src/utils/frameworks.ts b/packages/cli/src/utils/frameworks.ts
new file mode 100644
index 000000000..706ce0827
--- /dev/null
+++ b/packages/cli/src/utils/frameworks.ts
@@ -0,0 +1,36 @@
+export const FRAMEWORKS = {
+  vite: {
+    name: 'vite',
+    label: 'Vite',
+    links: {
+      installation: 'https://shadcn-vue.com/docs/installation/vite',
+      tailwind: 'https://tailwindcss.com/docs/guides/vite',
+    },
+  },
+  nuxt: {
+    name: 'nuxt',
+    label: 'Nuxt',
+    links: {
+      installation: 'https://shadcn-vue.com/docs/installation/nuxt',
+      tailwind: 'https://tailwindcss.com/docs/guides/nuxtjs',
+    },
+  },
+  astro: {
+    name: 'astro',
+    label: 'Astro',
+    links: {
+      installation: 'https://shadcn-vue.com/docs/installation/astro',
+      tailwind: 'https://tailwindcss.com/docs/guides/astro',
+    },
+  },
+  laravel: {
+    name: 'laravel',
+    label: 'Laravel',
+    links: {
+      installation: 'https://shadcn-vue.com/docs/installation/laravel',
+      tailwind: 'https://tailwindcss.com/docs/guides/laravel',
+    },
+  },
+} as const
+
+export type Framework = (typeof FRAMEWORKS)[keyof typeof FRAMEWORKS]
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index 7902e7795..0d517f615 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -1,5 +1,3 @@
-import type { ConfigLoaderResult } from 'tsconfig-paths'
-import { existsSync } from 'node:fs'
 import { resolveImport } from '@/src/utils/resolve-import'
 import { loadConfig as c12LoadConfig } from 'c12'
 import path from 'pathe'
@@ -9,9 +7,10 @@ import { z } from 'zod'
 export const DEFAULT_STYLE = 'default'
 export const DEFAULT_COMPONENTS = '@/components'
 export const DEFAULT_UTILS = '@/lib/utils'
-export const DEFAULT_TYPESCRIPT_CONFIG = './tsconfig.json'
+export const DEFAULT_TAILWIND_CSS = 'app/globals.css'
 export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'
 export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'
+export const DEFAULT_TYPESCRIPT_CONFIG = './tsconfig.json'
 
 export const TAILWIND_CSS_PATH = {
   nuxt: 'assets/css/tailwind.css',
@@ -25,89 +24,102 @@ export const rawConfigSchema = z
     $schema: z.string().optional(),
     style: z.string(),
     typescript: z.boolean().default(true),
-    tsConfigPath: z.string().default(DEFAULT_TYPESCRIPT_CONFIG),
     tailwind: z.object({
       config: z.string(),
       css: z.string(),
       baseColor: z.string(),
       cssVariables: z.boolean().default(true),
-      prefix: z.string().optional(),
+      prefix: z.string().default('').optional(),
     }),
-    framework: z.string().default('Vite'),
     aliases: z.object({
       components: z.string(),
       utils: z.string(),
-      ui: z.string().default('').optional(),
+      ui: z.string().optional(),
+      lib: z.string().optional(),
+      hooks: z.string().optional(),
     }),
+    iconLibrary: z.string().optional(),
   })
   .strict()
 
 export type RawConfig = z.infer<typeof rawConfigSchema>
 
-export const configSchema = rawConfigSchema
-  .extend({
-    resolvedPaths: z.object({
-      tailwindConfig: z.string(),
-      tailwindCss: z.string(),
-      utils: z.string(),
-      components: z.string(),
-      ui: z.string(),
-    }),
-  })
+export const configSchema = rawConfigSchema.extend({
+  resolvedPaths: z.object({
+    cwd: z.string(),
+    tailwindConfig: z.string(),
+    tailwindCss: z.string(),
+    utils: z.string(),
+    components: z.string(),
+    lib: z.string(),
+    hooks: z.string(),
+    ui: z.string(),
+  }),
+})
 
 export type Config = z.infer<typeof configSchema>
 
 export async function getConfig(cwd: string) {
   const config = await getRawConfig(cwd)
 
-  if (!config)
+  if (!config) {
     return null
+  }
+
+  // Set default icon library if not provided.
+  if (!config.iconLibrary) {
+    config.iconLibrary = config.style === 'new-york' ? 'radix' : 'lucide'
+  }
 
   return await resolveConfigPaths(cwd, config)
 }
 
 export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  let tsConfig: ConfigLoaderResult | undefined
-  let tsConfigPath = path.resolve(
-    cwd,
-    config.tsConfigPath,
-  )
+  // Read tsconfig.json.
+  const tsConfig = await loadConfig(cwd)
 
-  if (config.typescript) {
-    // Read tsconfig.json.
-    tsConfig = loadConfig(tsConfigPath)
-    // In new Vue project, tsconfig has references to tsconfig.app.json, which is causing the path not resolving correctly
-    // If no paths were found, try to load tsconfig.app.json.
-    if ('paths' in tsConfig && Object.keys(tsConfig.paths).length === 0) {
-      tsConfigPath = path.resolve(cwd, './tsconfig.app.json')
-      if (existsSync(tsConfigPath))
-        tsConfig = loadConfig(tsConfigPath)
-    }
-  }
-  else {
-    tsConfigPath = config.tsConfigPath.includes('tsconfig.json') ? path.resolve(cwd, './jsconfig.json') : path.resolve(cwd, config.tsConfigPath)
-    tsConfig = loadConfig(tsConfigPath)
-  }
   if (tsConfig.resultType === 'failed') {
     throw new Error(
-      `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),
+      `Failed to load ${config.typescript ? 'tsconfig' : 'jsconfig'}.json. ${
+        tsConfig.message ?? ''
+      }`.trim(),
     )
   }
 
   return configSchema.parse({
     ...config,
     resolvedPaths: {
+      cwd,
       tailwindConfig: path.resolve(cwd, config.tailwind.config),
       tailwindCss: path.resolve(cwd, config.tailwind.css),
-      utils: resolveImport(config.aliases.utils, tsConfig),
-      components: resolveImport(config.aliases.components, tsConfig),
+      utils: await resolveImport(config.aliases.utils, tsConfig),
+      components: await resolveImport(config.aliases.components, tsConfig),
       ui: config.aliases.ui
-        ? resolveImport(config.aliases.ui, tsConfig)
-        : resolveImport(config.aliases.components, tsConfig),
+        ? await resolveImport(config.aliases.ui, tsConfig)
+        : path.resolve(
+          (await resolveImport(config.aliases.components, tsConfig))
+          ?? cwd,
+          'ui',
+        ),
+      // TODO: Make this configurable.
+      // For now, we assume the lib and hooks directories are one level up from the components directory.
+      lib: config.aliases.lib
+        ? await resolveImport(config.aliases.lib, tsConfig)
+        : path.resolve(
+          (await resolveImport(config.aliases.utils, tsConfig)) ?? cwd,
+          '..',
+        ),
+      hooks: config.aliases.hooks
+        ? await resolveImport(config.aliases.hooks, tsConfig)
+        : path.resolve(
+          (await resolveImport(config.aliases.components, tsConfig))
+          ?? cwd,
+          '..',
+          'hooks',
+        ),
     },
   })
 }
-
 export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
   try {
     const configResult = await c12LoadConfig({
diff --git a/packages/cli/src/utils/get-package-info.ts b/packages/cli/src/utils/get-package-info.ts
index a6394d42d..9c9f97980 100644
--- a/packages/cli/src/utils/get-package-info.ts
+++ b/packages/cli/src/utils/get-package-info.ts
@@ -1,16 +1,14 @@
 import type { PackageJson } from 'type-fest'
-import { fileURLToPath } from 'node:url'
+import path from 'node:path'
 import fs from 'fs-extra'
-import path from 'pathe'
 
-export function getPackageInfo() {
-  const packageJsonPath = getPackageFilePath('../package.json')
+export function getPackageInfo(
+  cwd: string = '',
+  shouldThrow: boolean = true,
+): PackageJson | null {
+  const packageJsonPath = path.join(cwd, 'package.json')
 
-  return fs.readJSONSync(packageJsonPath) as PackageJson
-}
-
-function getPackageFilePath(filePath: string) {
-  const distPath = fileURLToPath(new URL('.', import.meta.url))
-
-  return path.resolve(distPath, filePath)
+  return fs.readJSONSync(packageJsonPath, {
+    throws: shouldThrow,
+  }) as PackageJson
 }
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index dab52ce2d..2b047d889 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -1,64 +1,251 @@
-import type { PackageJson } from 'pkg-types'
-import { existsSync } from 'node:fs'
+import type { Framework } from '@/src/utils/frameworks'
+import type {
+  Config,
+  RawConfig,
+} from '@/src/utils/get-config'
+import path from 'node:path'
+import { FRAMEWORKS } from '@/src/utils/frameworks'
+import {
+  getConfig,
+  resolveConfigPaths,
+} from '@/src/utils/get-config'
+import { getPackageInfo } from '@/src/utils/get-package-info'
+import fg from 'fast-glob'
 import fs from 'fs-extra'
-import path from 'pathe'
-import { readPackageJSON } from 'pkg-types'
-
-export async function getProjectInfo() {
-  const info = {
-    tsconfig: null,
-    isNuxt: false,
-    shadcnNuxt: undefined,
-    isVueVite: false,
-    srcDir: false,
-    componentsUiDir: false,
-    srcComponentsUiDir: false,
+import { loadConfig } from 'tsconfig-paths'
+import { z } from 'zod'
+
+export interface ProjectInfo {
+  framework: Framework
+  isSrcDir: boolean
+  isRSC: boolean
+  isTsx: boolean
+  tailwindConfigFile: string | null
+  tailwindCssFile: string | null
+  aliasPrefix: string | null
+}
+
+const PROJECT_SHARED_IGNORE = [
+  '**/node_modules/**',
+  '.nuxt',
+  'public',
+  'dist',
+  'build',
+]
+
+const TS_CONFIG_SCHEMA = z.object({
+  compilerOptions: z.object({
+    paths: z.record(z.string().or(z.array(z.string()))),
+  }),
+})
+
+export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
+  const [
+    configFiles,
+    isSrcDir,
+    isTsx,
+    tailwindConfigFile,
+    tailwindCssFile,
+    aliasPrefix,
+    packageJson,
+  ] = await Promise.all([
+    fg.glob('**/{nuxt,vite,astro}.config.*|composer.json', {
+      cwd,
+      deep: 3,
+      ignore: PROJECT_SHARED_IGNORE,
+    }),
+    fs.pathExists(path.resolve(cwd, 'src')),
+    isTypeScriptProject(cwd),
+    getTailwindConfigFile(cwd),
+    getTailwindCssFile(cwd),
+    getTsConfigAliasPrefix(cwd),
+    getPackageInfo(cwd, false),
+  ])
+
+  const isUsingAppDir = await fs.pathExists(
+    path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`),
+  )
+
+  const type: ProjectInfo = {
+    framework: FRAMEWORKS.vite, // TODO: Maybe add a manual installation
+    isSrcDir,
+    isRSC: false,
+    isTsx,
+    tailwindConfigFile,
+    tailwindCssFile,
+    aliasPrefix,
+  }
+
+  // Nuxt.
+  if (configFiles.find(file => file.startsWith('nuxt.config.'))?.length) {
+    type.framework = FRAMEWORKS.nuxt
+    return type
+  }
+
+  // Astro.
+  if (configFiles.find(file => file.startsWith('astro.config.'))?.length) {
+    type.framework = FRAMEWORKS.astro
+    return type
   }
 
-  try {
-    const tsconfig = await getTsConfig()
+  // Laravel.
+  if (configFiles.find(file => file.startsWith('composer.json'))?.length) {
+    type.framework = FRAMEWORKS.laravel
+    return type
+  }
+
+  // Vite.
+  // We'll assume that it got caught by the Remix check above.
+  if (configFiles.find(file => file.startsWith('vite.config.'))?.length) {
+    type.framework = FRAMEWORKS.vite
+    return type
+  }
 
-    const isNuxt = existsSync(path.resolve('./nuxt.config.js')) || existsSync(path.resolve('./nuxt.config.ts'))
-    const shadcnNuxt = isNuxt ? await getShadcnNuxtInfo() : undefined
+  return type
+}
+
+export async function getTailwindCssFile(cwd: string) {
+  const files = await fg.glob(['**/*.css', '**/*.scss'], {
+    cwd,
+    deep: 5,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
 
-    return {
-      tsconfig,
-      isNuxt,
-      shadcnNuxt,
-      isVueVite: existsSync(path.resolve('./vite.config.js')) || existsSync(path.resolve('./vite.config.ts')),
-      srcDir: existsSync(path.resolve('./src')),
-      srcComponentsUiDir: existsSync(path.resolve('./src/components/ui')),
-      componentsUiDir: existsSync(path.resolve('./components/ui')),
+  if (!files.length) {
+    return null
+  }
+
+  for (const file of files) {
+    const contents = await fs.readFile(path.resolve(cwd, file), 'utf8')
+    // Assume that if the file contains `@tailwind base` it's the main css file.
+    if (contents.includes('@tailwind base')) {
+      return file
     }
   }
-  catch (error) {
-    return info
+
+  return null
+}
+
+export async function getTailwindConfigFile(cwd: string) {
+  const files = await fg.glob('tailwind.config.*', {
+    cwd,
+    deep: 3,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
+
+  if (!files.length) {
+    return null
   }
+
+  return files[0]
 }
 
-async function getShadcnNuxtInfo() {
-  let nuxtModule: PackageJson | undefined
-  try {
-    nuxtModule = await readPackageJSON('shadcn-nuxt')
+export async function getTsConfigAliasPrefix(cwd: string) {
+  const tsConfig = await loadConfig(cwd)
+
+  if (
+    tsConfig?.resultType === 'failed'
+    || !Object.entries(tsConfig?.paths).length
+  ) {
+    return null
   }
-  catch (error) {
-    nuxtModule = undefined
+
+  // This assume that the first alias is the prefix.
+  for (const [alias, paths] of Object.entries(tsConfig.paths)) {
+    if (
+      paths.includes('./*')
+      || paths.includes('./src/*')
+      || paths.includes('./app/*')
+      || paths.includes('./resources/js/*') // Laravel.
+    ) {
+      return alias.replace(/\/\*$/, '') ?? null
+    }
   }
 
-  return nuxtModule
+  // Use the first alias as the prefix.
+  return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, '') ?? null
 }
 
-export async function getTsConfig() {
-  try {
-    const tsconfigPath = path.join('tsconfig.json')
-    const tsconfig = await fs.readJSON(tsconfigPath)
+export async function isTypeScriptProject(cwd: string) {
+  const files = await fg.glob('tsconfig.*', {
+    cwd,
+    deep: 1,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
+
+  return files.length > 0
+}
+
+export async function getTsConfig(cwd: string) {
+  for (const fallback of [
+    'tsconfig.json',
+    'tsconfig.web.json',
+    'tsconfig.app.json',
+  ]) {
+    const filePath = path.resolve(cwd, fallback)
+    if (!(await fs.pathExists(filePath))) {
+      continue
+    }
+
+    // We can't use fs.readJSON because it doesn't support comments.
+    const contents = await fs.readFile(filePath, 'utf8')
+    const cleanedContents = contents.replace(/\/\*\s*\*\//g, '')
+    const result = TS_CONFIG_SCHEMA.safeParse(JSON.parse(cleanedContents))
 
-    if (!tsconfig)
-      throw new Error('tsconfig.json is missing')
+    if (result.error) {
+      continue
+    }
 
-    return tsconfig
+    return result.data
   }
-  catch (error) {
+
+  return null
+}
+
+export async function getProjectConfig(
+  cwd: string,
+  defaultProjectInfo: ProjectInfo | null = null,
+): Promise<Config | null> {
+  // Check for existing component config.
+  const [existingConfig, projectInfo] = await Promise.all([
+    getConfig(cwd),
+    !defaultProjectInfo
+      ? getProjectInfo(cwd)
+      : Promise.resolve(defaultProjectInfo),
+  ])
+
+  if (existingConfig) {
+    return existingConfig
+  }
+
+  if (
+    !projectInfo
+    || !projectInfo.tailwindConfigFile
+    || !projectInfo.tailwindCssFile
+  ) {
     return null
   }
+
+  const config: RawConfig = {
+    $schema: 'https://shadcn-vue.com/schema.json',
+    typescript: true,
+    style: 'new-york',
+    tailwind: {
+      config: projectInfo.tailwindConfigFile,
+      baseColor: 'zinc',
+      css: projectInfo.tailwindCssFile,
+      cssVariables: true,
+      prefix: '',
+    },
+    iconLibrary: 'lucide',
+    aliases: {
+      components: `${projectInfo.aliasPrefix}/components`,
+      ui: `${projectInfo.aliasPrefix}/components/ui`,
+      hooks: `${projectInfo.aliasPrefix}/hooks`,
+      lib: `${projectInfo.aliasPrefix}/lib`,
+      utils: `${projectInfo.aliasPrefix}/lib/utils`,
+    },
+  }
+
+  return await resolveConfigPaths(cwd, config)
 }
diff --git a/packages/cli/src/utils/highlighter.ts b/packages/cli/src/utils/highlighter.ts
new file mode 100644
index 000000000..febc88cd9
--- /dev/null
+++ b/packages/cli/src/utils/highlighter.ts
@@ -0,0 +1,8 @@
+import { cyan, green, red, yellow } from 'kleur/colors'
+
+export const highlighter = {
+  error: red,
+  warn: yellow,
+  info: cyan,
+  success: green,
+}
diff --git a/packages/cli/src/utils/icon-libraries.ts b/packages/cli/src/utils/icon-libraries.ts
new file mode 100644
index 000000000..56a345c54
--- /dev/null
+++ b/packages/cli/src/utils/icon-libraries.ts
@@ -0,0 +1,12 @@
+export const ICON_LIBRARIES = {
+  lucide: {
+    name: 'lucide-vue-next',
+    package: 'lucide-vue-next',
+    import: 'lucide-vue-next',
+  },
+  radix: {
+    name: '@radix-icons/vue',
+    package: '@radix-icons/vue',
+    import: '@radix-icons/vue',
+  },
+}
diff --git a/packages/cli/src/utils/logger.ts b/packages/cli/src/utils/logger.ts
new file mode 100644
index 000000000..c21b4f4a4
--- /dev/null
+++ b/packages/cli/src/utils/logger.ts
@@ -0,0 +1,23 @@
+import { highlighter } from '@/src/utils/highlighter'
+import consola from 'consola'
+
+export const logger = {
+  error(...args: unknown[]) {
+    consola.log(highlighter.error(args.join(' ')))
+  },
+  warn(...args: unknown[]) {
+    consola.log(highlighter.warn(args.join(' ')))
+  },
+  info(...args: unknown[]) {
+    consola.log(highlighter.info(args.join(' ')))
+  },
+  success(...args: unknown[]) {
+    consola.log(highlighter.success(args.join(' ')))
+  },
+  log(...args: unknown[]) {
+    consola.log(args.join(' '))
+  },
+  break() {
+    consola.log('')
+  },
+}
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 39fa27cd5..fb7dbbbe9 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -1,19 +1,27 @@
 import type { Config } from '@/src/utils/get-config'
-import type { registryItemWithContentSchema } from '@/src/utils/registry/schema'
-import type * as z from 'zod'
-import process from 'node:process'
+import type {
+  registryItemFileSchema,
+} from '@/src/utils/registry/schema'
+import path from 'node:path'
+import { handleError } from '@/src/utils/handle-error'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
 import {
+  iconsSchema,
   registryBaseColorSchema,
   registryIndexSchema,
-  registryWithContentSchema,
+  registryItemSchema,
+  registryResolvedItemsTreeSchema,
   stylesSchema,
 } from '@/src/utils/registry/schema'
-import consola from 'consola'
+import { buildTailwindThemeColorsFromCssVars } from '@/src/utils/updaters/update-tailwind-config'
+import deepmerge from 'deepmerge'
 import { HttpsProxyAgent } from 'https-proxy-agent'
 import { ofetch } from 'ofetch'
-import path from 'pathe'
+import { z } from 'zod'
+
+const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://shadcn-vue.com/r'
 
-const baseUrl = process.env.COMPONENTS_REGISTRY_URL ?? 'https://www.shadcn-vue.com'
 const agent = process.env.https_proxy
   ? new HttpsProxyAgent(process.env.https_proxy)
   : undefined
@@ -25,7 +33,8 @@ export async function getRegistryIndex() {
     return registryIndexSchema.parse(result)
   }
   catch (error) {
-    throw new Error('Failed to fetch components from registry.')
+    logger.error('\n')
+    handleError(error)
   }
 }
 
@@ -36,15 +45,43 @@ export async function getRegistryStyles() {
     return stylesSchema.parse(result)
   }
   catch (error) {
-    throw new Error('Failed to fetch styles from registry.')
+    logger.error('\n')
+    handleError(error)
+    return []
+  }
+}
+
+export async function getRegistryIcons() {
+  try {
+    const [result] = await fetchRegistry(['icons/index.json'])
+    return iconsSchema.parse(result)
+  }
+  catch (error) {
+    handleError(error)
+    return {}
+  }
+}
+
+export async function getRegistryItem(name: string, style: string) {
+  try {
+    const [result] = await fetchRegistry([
+      isUrl(name) ? name : `styles/${style}/${name}.json`,
+    ])
+
+    return registryItemSchema.parse(result)
+  }
+  catch (error) {
+    logger.break()
+    handleError(error)
+    return null
   }
 }
 
-export function getRegistryBaseColors() {
+export async function getRegistryBaseColors() {
   return [
     {
-      name: 'slate',
-      label: 'Slate',
+      name: 'neutral',
+      label: 'Neutral',
     },
     {
       name: 'gray',
@@ -54,14 +91,14 @@ export function getRegistryBaseColors() {
       name: 'zinc',
       label: 'Zinc',
     },
-    {
-      name: 'neutral',
-      label: 'Neutral',
-    },
     {
       name: 'stone',
       label: 'Stone',
     },
+    {
+      name: 'slate',
+      label: 'Slate',
+    },
   ]
 }
 
@@ -72,7 +109,7 @@ export async function getRegistryBaseColor(baseColor: string) {
     return registryBaseColorSchema.parse(result)
   }
   catch (error) {
-    throw new Error('Failed to fetch base color from registry.')
+    handleError(error)
   }
 }
 
@@ -85,8 +122,9 @@ export async function resolveTree(
   for (const name of names) {
     const entry = index.find(entry => entry.name === name)
 
-    if (!entry)
+    if (!entry) {
       continue
+    }
 
     tree.push(entry)
 
@@ -109,29 +147,30 @@ export async function fetchTree(
   try {
     const paths = tree.map(item => `styles/${style}/${item.name}.json`)
     const result = await fetchRegistry(paths)
-
-    return registryWithContentSchema.parse(result)
+    return registryIndexSchema.parse(result)
   }
   catch (error) {
-    throw new Error('Failed to fetch tree from registry.')
+    handleError(error)
   }
 }
 
-export function getItemTargetPath(
+export async function getItemTargetPath(
   config: Config,
-  item: Pick<z.infer<typeof registryItemWithContentSchema>, 'type'>,
+  item: Pick<z.infer<typeof registryItemSchema>, 'type'>,
   override?: string,
 ) {
-  // Allow overrides for all items but ui.
-  if (override)
+  if (override) {
     return override
+  }
 
-  if (item.type === 'components:ui' && config.aliases.ui)
-    return config.resolvedPaths.ui
+  if (item.type === 'registry:ui') {
+    return config.resolvedPaths.ui ?? config.resolvedPaths.components
+  }
 
-  const [parent, type] = item.type.split(':')
-  if (!(parent in config.resolvedPaths))
+  const [parent, type] = item.type?.split(':') ?? []
+  if (!(parent in config.resolvedPaths)) {
     return null
+  }
 
   return path.join(
     config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
@@ -143,18 +182,295 @@ async function fetchRegistry(paths: string[]) {
   try {
     const results = await Promise.all(
       paths.map(async (path) => {
-        const response = await ofetch(`${baseUrl}/registry/${path}`, {
-          // @ts-expect-error agent type
-          agent,
-        })
+        const url = getRegistryUrl(path)
+        const response = await ofetch(url, { agent })
+
+        if (!response.ok) {
+          const errorMessages: { [key: number]: string } = {
+            400: 'Bad request',
+            401: 'Unauthorized',
+            403: 'Forbidden',
+            404: 'Not found',
+            500: 'Internal server error',
+          }
+
+          if (response.status === 401) {
+            throw new Error(
+              `You are not authorized to access the component at ${highlighter.info(
+                url,
+              )}.\nIf this is a remote registry, you may need to authenticate.`,
+            )
+          }
+
+          if (response.status === 404) {
+            throw new Error(
+              `The component at ${highlighter.info(
+                url,
+              )} was not found.\nIt may not exist at the registry. Please make sure it is a valid component.`,
+            )
+          }
+
+          if (response.status === 403) {
+            throw new Error(
+              `You do not have access to the component at ${highlighter.info(
+                url,
+              )}.\nIf this is a remote registry, you may need to authenticate or a token.`,
+            )
+          }
 
-        return response
+          const result = await response.json()
+          const message
+            = result && typeof result === 'object' && 'error' in result
+              ? result.error
+              : response.statusText || errorMessages[response.status]
+          throw new Error(
+            `Failed to fetch from ${highlighter.info(url)}.\n${message}`,
+          )
+        }
+
+        return response.json()
       }),
     )
+
     return results
   }
   catch (error) {
-    consola.error(error)
-    throw new Error(`Failed to fetch registry from ${baseUrl}.`)
+    logger.error('\n')
+    handleError(error)
+    return []
+  }
+}
+
+export function getRegistryItemFileTargetPath(
+  file: z.infer<typeof registryItemFileSchema>,
+  config: Config,
+  override?: string,
+) {
+  if (override) {
+    return override
+  }
+
+  if (file.type === 'registry:ui') {
+    return config.resolvedPaths.ui
+  }
+
+  if (file.type === 'registry:lib') {
+    return config.resolvedPaths.lib
+  }
+
+  if (file.type === 'registry:block' || file.type === 'registry:component') {
+    return config.resolvedPaths.components
+  }
+
+  if (file.type === 'registry:hook') {
+    return config.resolvedPaths.hooks
+  }
+
+  // TODO: we put this in components for now.
+  // We should move this to pages as per framework.
+  if (file.type === 'registry:page') {
+    return config.resolvedPaths.components
+  }
+
+  return config.resolvedPaths.components
+}
+
+export async function registryResolveItemsTree(
+  names: z.infer<typeof registryItemSchema>['name'][],
+  config: Config,
+) {
+  try {
+    const index = await getRegistryIndex()
+    if (!index) {
+      return null
+    }
+
+    // If we're resolving the index, we want it to go first.
+    if (names.includes('index')) {
+      names.unshift('index')
+    }
+
+    const registryDependencies: string[] = []
+    for (const name of names) {
+      const itemRegistryDependencies = await resolveRegistryDependencies(
+        name,
+        config,
+      )
+      registryDependencies.push(...itemRegistryDependencies)
+    }
+
+    const uniqueRegistryDependencies = Array.from(new Set(registryDependencies))
+    const result = await fetchRegistry(uniqueRegistryDependencies)
+    const payload = z.array(registryItemSchema).parse(result)
+
+    if (!payload) {
+      return null
+    }
+
+    // If we're resolving the index, we want to fetch
+    // the theme item if a base color is provided.
+    // We do this for index only.
+    // Other components will ship with their theme tokens.
+    if (names.includes('index')) {
+      if (config.tailwind.baseColor) {
+        const theme = await registryGetTheme(config.tailwind.baseColor, config)
+        if (theme) {
+          payload.unshift(theme)
+        }
+      }
+    }
+
+    let tailwind = {}
+    payload.forEach((item) => {
+      tailwind = deepmerge(tailwind, item.tailwind ?? {})
+    })
+
+    let cssVars = {}
+    payload.forEach((item) => {
+      cssVars = deepmerge(cssVars, item.cssVars ?? {})
+    })
+
+    let docs = ''
+    payload.forEach((item) => {
+      if (item.docs) {
+        docs += `${item.docs}\n`
+      }
+    })
+
+    return registryResolvedItemsTreeSchema.parse({
+      dependencies: deepmerge.all(
+        payload.map(item => item.dependencies ?? []),
+      ),
+      devDependencies: deepmerge.all(
+        payload.map(item => item.devDependencies ?? []),
+      ),
+      files: deepmerge.all(payload.map(item => item.files ?? [])),
+      tailwind,
+      cssVars,
+      docs,
+    })
+  }
+  catch (error) {
+    handleError(error)
+    return null
+  }
+}
+
+async function resolveRegistryDependencies(
+  url: string,
+  config: Config,
+): Promise<string[]> {
+  const visited = new Set<string>()
+  const payload: string[] = []
+
+  async function resolveDependencies(itemUrl: string) {
+    const url = getRegistryUrl(
+      isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`,
+    )
+
+    if (visited.has(url)) {
+      return
+    }
+
+    visited.add(url)
+
+    try {
+      const [result] = await fetchRegistry([url])
+      const item = registryItemSchema.parse(result)
+      payload.push(url)
+
+      if (item.registryDependencies) {
+        for (const dependency of item.registryDependencies) {
+          await resolveDependencies(dependency)
+        }
+      }
+    }
+    catch (error) {
+      console.error(
+        `Error fetching or parsing registry item at ${itemUrl}:`,
+        error,
+      )
+    }
+  }
+
+  await resolveDependencies(url)
+  return Array.from(new Set(payload))
+}
+
+export async function registryGetTheme(name: string, config: Config) {
+  const baseColor = await getRegistryBaseColor(name)
+  if (!baseColor) {
+    return null
+  }
+
+  // TODO: Move this to the registry i.e registry:theme.
+  const theme = {
+    name,
+    type: 'registry:theme',
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            borderRadius: {
+              lg: 'var(--radius)',
+              md: 'calc(var(--radius) - 2px)',
+              sm: 'calc(var(--radius) - 4px)',
+            },
+            colors: {},
+          },
+        },
+      },
+    },
+    cssVars: {
+      light: {
+        radius: '0.5rem',
+      },
+      dark: {},
+    },
+  } satisfies z.infer<typeof registryItemSchema>
+
+  if (config.tailwind.cssVariables) {
+    theme.tailwind.config.theme.extend.colors = {
+      ...theme.tailwind.config.theme.extend.colors,
+      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark),
+    }
+    theme.cssVars = {
+      light: {
+        ...baseColor.cssVars.light,
+        ...theme.cssVars.light,
+      },
+      dark: {
+        ...baseColor.cssVars.dark,
+        ...theme.cssVars.dark,
+      },
+    }
+  }
+
+  return theme
+}
+
+function getRegistryUrl(path: string) {
+  if (isUrl(path)) {
+    // If the url contains /chat/b/, we assume it's the v0 registry.
+    // We need to add the /json suffix if it's missing.
+    const url = new URL(path)
+    if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith('/json')) {
+      url.pathname = `${url.pathname}/json`
+    }
+
+    return url.toString()
+  }
+
+  return `${REGISTRY_URL}/${path}`
+}
+
+function isUrl(path: string) {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(path)
+    return true
+  }
+  catch (error) {
+    return false
   }
 }
diff --git a/packages/cli/src/utils/registry/schema.ts b/packages/cli/src/utils/registry/schema.ts
index 14f0383cd..f1063841f 100644
--- a/packages/cli/src/utils/registry/schema.ts
+++ b/packages/cli/src/utils/registry/schema.ts
@@ -1,27 +1,61 @@
 import { z } from 'zod'
 
 // TODO: Extract this to a shared package.
+export const registryItemTypeSchema = z.enum([
+  'registry:style',
+  'registry:lib',
+  'registry:example',
+  'registry:block',
+  'registry:component',
+  'registry:ui',
+  'registry:hook',
+  'registry:theme',
+  'registry:page',
+])
+
+export const registryItemFileSchema = z.object({
+  path: z.string(),
+  content: z.string().optional(),
+  type: registryItemTypeSchema,
+  target: z.string().optional(),
+})
+
+export const registryItemTailwindSchema = z.object({
+  config: z
+    .object({
+      content: z.array(z.string()).optional(),
+      theme: z.record(z.string(), z.any()).optional(),
+      plugins: z.array(z.string()).optional(),
+    })
+    .optional(),
+})
+
+export const registryItemCssVarsSchema = z.object({
+  light: z.record(z.string(), z.string()).optional(),
+  dark: z.record(z.string(), z.string()).optional(),
+})
+
 export const registryItemSchema = z.object({
   name: z.string(),
+  type: registryItemTypeSchema,
+  description: z.string().optional(),
   dependencies: z.array(z.string()).optional(),
   devDependencies: z.array(z.string()).optional(),
   registryDependencies: z.array(z.string()).optional(),
-  files: z.array(z.string()),
-  type: z.enum(['components:ui', 'components:component', 'components:example']),
+  files: z.array(registryItemFileSchema).optional(),
+  tailwind: registryItemTailwindSchema.optional(),
+  cssVars: registryItemCssVarsSchema.optional(),
+  meta: z.record(z.string(), z.any()).optional(),
+  docs: z.string().optional(),
 })
 
-export const registryIndexSchema = z.array(registryItemSchema)
+export type RegistryItem = z.infer<typeof registryItemSchema>
 
-export const registryItemWithContentSchema = registryItemSchema.extend({
-  files: z.array(
-    z.object({
-      name: z.string(),
-      content: z.string(),
-    }),
-  ),
-})
-
-export const registryWithContentSchema = z.array(registryItemWithContentSchema)
+export const registryIndexSchema = z.array(
+  registryItemSchema.extend({
+    files: z.array(z.union([z.string(), registryItemFileSchema])).optional(),
+  }),
+)
 
 export const stylesSchema = z.array(
   z.object({
@@ -30,6 +64,11 @@ export const stylesSchema = z.array(
   }),
 )
 
+export const iconsSchema = z.record(
+  z.string(),
+  z.record(z.string(), z.string()),
+)
+
 export const registryBaseColorSchema = z.object({
   inlineColors: z.object({
     light: z.record(z.string(), z.string()),
@@ -42,3 +81,12 @@ export const registryBaseColorSchema = z.object({
   inlineColorsTemplate: z.string(),
   cssVarsTemplate: z.string(),
 })
+
+export const registryResolvedItemsTreeSchema = registryItemSchema.pick({
+  dependencies: true,
+  devDependencies: true,
+  files: true,
+  tailwind: true,
+  cssVars: true,
+  docs: true,
+})
diff --git a/packages/cli/src/utils/spinner.ts b/packages/cli/src/utils/spinner.ts
new file mode 100644
index 000000000..4af0c6bcf
--- /dev/null
+++ b/packages/cli/src/utils/spinner.ts
@@ -0,0 +1,13 @@
+import ora, { type Options } from 'ora'
+
+export function spinner(
+  text: Options['text'],
+  options?: {
+    silent?: boolean
+  },
+) {
+  return ora({
+    text,
+    isSilent: options?.silent,
+  })
+}
diff --git a/packages/cli/src/utils/updaters/update-css-vars.ts b/packages/cli/src/utils/updaters/update-css-vars.ts
new file mode 100644
index 000000000..f9dc61f86
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-css-vars.ts
@@ -0,0 +1,298 @@
+import type { Config } from '@/src/utils/get-config'
+import type { registryItemCssVarsSchema } from '@/src/utils/registry/schema'
+import type Root from 'postcss/lib/root'
+import type Rule from 'postcss/lib/rule'
+import type { z } from 'zod'
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { highlighter } from '@/src/utils/highlighter'
+import { spinner } from '@/src/utils/spinner'
+import postcss from 'postcss'
+import AtRule from 'postcss/lib/at-rule'
+
+export async function updateCssVars(
+  cssVars: z.infer<typeof registryItemCssVarsSchema> | undefined,
+  config: Config,
+  options: {
+    cleanupDefaultNextStyles?: boolean
+    silent?: boolean
+  },
+) {
+  if (
+    !cssVars
+    || !Object.keys(cssVars).length
+    || !config.resolvedPaths.tailwindCss
+  ) {
+    return
+  }
+
+  options = {
+    cleanupDefaultNextStyles: false,
+    silent: false,
+    ...options,
+  }
+  const cssFilepath = config.resolvedPaths.tailwindCss
+  const cssFilepathRelative = path.relative(
+    config.resolvedPaths.cwd,
+    cssFilepath,
+  )
+  const cssVarsSpinner = spinner(
+    `Updating ${highlighter.info(cssFilepathRelative)}`,
+    {
+      silent: options.silent,
+    },
+  ).start()
+  const raw = await fs.readFile(cssFilepath, 'utf8')
+  const output = await transformCssVars(raw, cssVars, config, {
+    cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
+  })
+  await fs.writeFile(cssFilepath, output, 'utf8')
+  cssVarsSpinner.succeed()
+}
+
+export async function transformCssVars(
+  input: string,
+  cssVars: z.infer<typeof registryItemCssVarsSchema>,
+  config: Config,
+  options: {
+    cleanupDefaultNextStyles?: boolean
+  },
+) {
+  options = {
+    cleanupDefaultNextStyles: false,
+    ...options,
+  }
+
+  const plugins = [updateCssVarsPlugin(cssVars)]
+  if (options.cleanupDefaultNextStyles) {
+    plugins.push(cleanupDefaultNextStylesPlugin())
+  }
+
+  // Only add the base layer plugin if we're using css variables.
+  if (config.tailwind.cssVariables) {
+    plugins.push(updateBaseLayerPlugin())
+  }
+
+  const result = await postcss(plugins).process(input, {
+    from: undefined,
+  })
+
+  return result.css
+}
+
+function updateBaseLayerPlugin() {
+  return {
+    postcssPlugin: 'update-base-layer',
+    Once(root: Root) {
+      const requiredRules = [
+        { selector: '*', apply: 'border-border' },
+        { selector: 'body', apply: 'bg-background text-foreground' },
+      ]
+
+      let baseLayer = root.nodes.find(
+        (node): node is AtRule =>
+          node.type === 'atrule'
+          && node.name === 'layer'
+          && node.params === 'base'
+          && requiredRules.every(({ selector, apply }) =>
+            node.nodes?.some(
+              (rule): rule is Rule =>
+                rule.type === 'rule'
+                && rule.selector === selector
+                && rule.nodes.some(
+                  (applyRule): applyRule is AtRule =>
+                    applyRule.type === 'atrule'
+                    && applyRule.name === 'apply'
+                    && applyRule.params === apply,
+                ),
+            ),
+          ),
+      ) as AtRule | undefined
+
+      if (!baseLayer) {
+        baseLayer = postcss.atRule({
+          name: 'layer',
+          params: 'base',
+          raws: { semicolon: true, between: ' ', before: '\n' },
+        })
+        root.append(baseLayer)
+      }
+
+      requiredRules.forEach(({ selector, apply }) => {
+        const existingRule = baseLayer?.nodes?.find(
+          (node): node is Rule =>
+            node.type === 'rule' && node.selector === selector,
+        )
+
+        if (!existingRule) {
+          baseLayer?.append(
+            postcss.rule({
+              selector,
+              nodes: [
+                postcss.atRule({
+                  name: 'apply',
+                  params: apply,
+                  raws: { semicolon: true, before: '\n    ' },
+                }),
+              ],
+              raws: { semicolon: true, between: ' ', before: '\n  ' },
+            }),
+          )
+        }
+      })
+    },
+  }
+}
+
+function updateCssVarsPlugin(
+  cssVars: z.infer<typeof registryItemCssVarsSchema>,
+) {
+  return {
+    postcssPlugin: 'update-css-vars',
+    Once(root: Root) {
+      let baseLayer = root.nodes.find(
+        node =>
+          node.type === 'atrule'
+          && node.name === 'layer'
+          && node.params === 'base',
+      ) as AtRule | undefined
+
+      if (!(baseLayer instanceof AtRule)) {
+        baseLayer = postcss.atRule({
+          name: 'layer',
+          params: 'base',
+          nodes: [],
+          raws: {
+            semicolon: true,
+            before: '\n',
+            between: ' ',
+          },
+        })
+        root.append(baseLayer)
+      }
+
+      if (baseLayer !== undefined) {
+        // Add variables for each key in cssVars
+        Object.entries(cssVars).forEach(([key, vars]) => {
+          const selector = key === 'light' ? ':root' : `.${key}`
+          // TODO: Fix typecheck.
+          addOrUpdateVars(baseLayer as AtRule, selector, vars)
+        })
+      }
+    },
+  }
+}
+
+function removeConflictVars(root: Rule | Root) {
+  const rootRule = root.nodes.find(
+    (node): node is Rule => node.type === 'rule' && node.selector === ':root',
+  )
+
+  if (rootRule) {
+    const propsToRemove = ['--background', '--foreground']
+
+    rootRule.nodes
+      .filter(
+        (node): node is postcss.Declaration =>
+          node.type === 'decl' && propsToRemove.includes(node.prop),
+      )
+      .forEach(node => node.remove())
+
+    if (rootRule.nodes.length === 0) {
+      rootRule.remove()
+    }
+  }
+}
+
+function cleanupDefaultNextStylesPlugin() {
+  return {
+    postcssPlugin: 'cleanup-default-next-styles',
+    Once(root: Root) {
+      const bodyRule = root.nodes.find(
+        (node): node is Rule => node.type === 'rule' && node.selector === 'body',
+      )
+      if (bodyRule) {
+        // Remove color from the body node.
+        bodyRule.nodes
+          .find(
+            (node): node is postcss.Declaration =>
+              node.type === 'decl'
+              && node.prop === 'color'
+              && ['rgb(var(--foreground-rgb))', 'var(--foreground)'].includes(
+                node.value,
+              ),
+          )
+          ?.remove()
+
+        // Remove background: linear-gradient.
+        bodyRule.nodes
+          .find((node): node is postcss.Declaration => {
+            return (
+              node.type === 'decl'
+              && node.prop === 'background'
+              // This is only going to run on create project, so all good.
+              && (node.value.startsWith('linear-gradient')
+                || node.value === 'var(--background)')
+            )
+          })
+          ?.remove()
+
+        // If the body rule is empty, remove it.
+        if (bodyRule.nodes.length === 0) {
+          bodyRule.remove()
+        }
+      }
+
+      removeConflictVars(root)
+
+      const darkRootRule = root.nodes.find(
+        (node): node is Rule =>
+          node.type === 'atrule'
+          && node.params === '(prefers-color-scheme: dark)',
+      )
+
+      if (darkRootRule) {
+        removeConflictVars(darkRootRule)
+        if (darkRootRule.nodes.length === 0) {
+          darkRootRule.remove()
+        }
+      }
+    },
+  }
+}
+
+function addOrUpdateVars(
+  baseLayer: AtRule,
+  selector: string,
+  vars: Record<string, string>,
+) {
+  let ruleNode = baseLayer.nodes?.find(
+    (node): node is Rule => node.type === 'rule' && node.selector === selector,
+  )
+
+  if (!ruleNode) {
+    if (Object.keys(vars).length > 0) {
+      ruleNode = postcss.rule({
+        selector,
+        raws: { between: ' ', before: '\n  ' },
+      })
+      baseLayer.append(ruleNode)
+    }
+  }
+
+  Object.entries(vars).forEach(([key, value]) => {
+    const prop = `--${key.replace(/^--/, '')}`
+    const newDecl = postcss.decl({
+      prop,
+      value,
+      raws: { semicolon: true },
+    })
+
+    const existingDecl = ruleNode?.nodes.find(
+      (node): node is postcss.Declaration =>
+        node.type === 'decl' && node.prop === prop,
+    )
+
+    existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl)
+  })
+}
diff --git a/packages/cli/src/utils/updaters/update-dependencies.ts b/packages/cli/src/utils/updaters/update-dependencies.ts
new file mode 100644
index 000000000..eb747505f
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-dependencies.ts
@@ -0,0 +1,28 @@
+import type { Config } from '@/src/utils/get-config'
+import type { RegistryItem } from '@/src/utils/registry/schema'
+import { spinner } from '@/src/utils/spinner'
+import { addDependency } from 'nypm'
+
+export async function updateDependencies(
+  dependencies: RegistryItem['dependencies'],
+  config: Config,
+  options: {
+    silent?: boolean
+  },
+) {
+  dependencies = Array.from(new Set(dependencies))
+  if (!dependencies?.length) {
+    return
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const dependenciesSpinner = spinner(`Installing dependencies.`, { silent: options.silent })?.start()
+  dependenciesSpinner?.start()
+
+  await addDependency(dependencies, { cwd: config.resolvedPaths.cwd })
+  dependenciesSpinner?.succeed()
+}
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
new file mode 100644
index 000000000..2b226afe7
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -0,0 +1,173 @@
+import type { Config } from '@/src/utils/get-config'
+import type { RegistryItem } from '@/src/utils/registry/schema'
+import { existsSync, promises as fs } from 'node:fs'
+import path, { basename } from 'node:path'
+import { getProjectInfo } from '@/src/utils/get-project-info'
+import { highlighter } from '@/src/utils/highlighter'
+import { logger } from '@/src/utils/logger'
+import {
+  getRegistryBaseColor,
+  getRegistryItemFileTargetPath,
+} from '@/src/utils/registry'
+import { spinner } from '@/src/utils/spinner'
+import { transform } from '@/src/utils/transformers'
+// import { transformIcons } from '@/src/utils/transformers/transform-icons'
+import prompts from 'prompts'
+
+export function resolveTargetDir(
+  projectInfo: Awaited<ReturnType<typeof getProjectInfo>>,
+  config: Config,
+  target: string,
+) {
+  if (target.startsWith('~/')) {
+    return path.join(config.resolvedPaths.cwd, target.replace('~/', ''))
+  }
+  return projectInfo?.isSrcDir
+    ? path.join(config.resolvedPaths.cwd, 'src', target)
+    : path.join(config.resolvedPaths.cwd, target)
+}
+
+export async function updateFiles(
+  files: RegistryItem['files'],
+  config: Config,
+  options: {
+    overwrite?: boolean
+    force?: boolean
+    silent?: boolean
+  },
+) {
+  if (!files?.length) {
+    return
+  }
+  options = {
+    overwrite: false,
+    force: false,
+    silent: false,
+    ...options,
+  }
+  const filesCreatedSpinner = spinner(`Updating files.`, {
+    silent: options.silent,
+  })?.start()
+
+  const [projectInfo, baseColor] = await Promise.all([
+    getProjectInfo(config.resolvedPaths.cwd),
+    getRegistryBaseColor(config.tailwind.baseColor),
+  ])
+
+  const filesCreated = []
+  const filesUpdated = []
+  const filesSkipped = []
+
+  for (const file of files) {
+    if (!file.content) {
+      continue
+    }
+
+    let targetDir = getRegistryItemFileTargetPath(file, config)
+    const fileName = basename(file.path)
+    let filePath = path.join(targetDir, fileName)
+
+    if (file.target) {
+      filePath = resolveTargetDir(projectInfo, config, file.target)
+      targetDir = path.dirname(filePath)
+    }
+
+    if (!config.typescript) {
+      filePath = filePath.replace(/\.ts?$/, match => '.js')
+    }
+
+    const existingFile = existsSync(filePath)
+    if (existingFile && !options.overwrite) {
+      filesCreatedSpinner.stop()
+      const { overwrite } = await prompts({
+        type: 'confirm',
+        name: 'overwrite',
+        message: `The file ${highlighter.info(
+          fileName,
+        )} already exists. Would you like to overwrite?`,
+        initial: false,
+      })
+
+      if (!overwrite) {
+        filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+        continue
+      }
+      filesCreatedSpinner?.start()
+    }
+
+    // Create the target directory if it doesn't exist.
+    if (!existsSync(targetDir)) {
+      await fs.mkdir(targetDir, { recursive: true })
+    }
+
+    // Run our transformers.
+    const content = await transform({
+      filename: file.path,
+      raw: file.content,
+      config,
+      baseColor,
+    })
+
+    await fs.writeFile(filePath, content, 'utf-8')
+    existingFile
+      ? filesUpdated.push(path.relative(config.resolvedPaths.cwd, filePath))
+      : filesCreated.push(path.relative(config.resolvedPaths.cwd, filePath))
+  }
+
+  const hasUpdatedFiles = filesCreated.length || filesUpdated.length
+  if (!hasUpdatedFiles && !filesSkipped.length) {
+    filesCreatedSpinner?.info('No files updated.')
+  }
+
+  if (filesCreated.length) {
+    filesCreatedSpinner?.succeed(
+      `Created ${filesCreated.length} ${
+        filesCreated.length === 1 ? 'file' : 'files'
+      }:`,
+    )
+    if (!options.silent) {
+      for (const file of filesCreated) {
+        logger.log(`  - ${file}`)
+      }
+    }
+  }
+  else {
+    filesCreatedSpinner?.stop()
+  }
+
+  if (filesUpdated.length) {
+    spinner(
+      `Updated ${filesUpdated.length} ${
+        filesUpdated.length === 1 ? 'file' : 'files'
+      }:`,
+      {
+        silent: options.silent,
+      },
+    )?.info()
+    if (!options.silent) {
+      for (const file of filesUpdated) {
+        logger.log(`  - ${file}`)
+      }
+    }
+  }
+
+  if (filesSkipped.length) {
+    spinner(
+      `Skipped ${filesSkipped.length} ${
+        filesUpdated.length === 1 ? 'file' : 'files'
+      }:`,
+      {
+        silent: options.silent,
+      },
+    )?.info()
+    if (!options.silent) {
+      for (const file of filesSkipped) {
+        logger.log(`  - ${file}`)
+      }
+    }
+  }
+
+  if (!options.silent) {
+    logger.break()
+  }
+}
diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.ts b/packages/cli/src/utils/updaters/update-tailwind-config.ts
new file mode 100644
index 000000000..633a3ebf4
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-tailwind-config.ts
@@ -0,0 +1,545 @@
+import type { Config } from '@/src/utils/get-config'
+import type { registryItemTailwindSchema } from '@/src/utils/registry/schema'
+import type { Config as TailwindConfig } from 'tailwindcss'
+import type {
+  ArrayLiteralExpression,
+  ObjectLiteralExpression,
+  PropertyAssignment,
+  VariableStatement,
+} from 'ts-morph'
+import type { z } from 'zod'
+import { promises as fs } from 'node:fs'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { highlighter } from '@/src/utils/highlighter'
+import { spinner } from '@/src/utils/spinner'
+import deepmerge from 'deepmerge'
+import objectToString from 'stringify-object'
+import {
+  Project,
+  QuoteKind,
+  ScriptKind,
+  SyntaxKind,
+} from 'ts-morph'
+
+export type UpdaterTailwindConfig = Omit<TailwindConfig, 'plugins'> & {
+  // We only want string plugins for now.
+  plugins?: string[]
+}
+
+export async function updateTailwindConfig(
+  tailwindConfig:
+    | z.infer<typeof registryItemTailwindSchema>['config']
+    | undefined,
+  config: Config,
+  options: {
+    silent?: boolean
+  },
+) {
+  if (!tailwindConfig) {
+    return
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const tailwindFileRelativePath = path.relative(
+    config.resolvedPaths.cwd,
+    config.resolvedPaths.tailwindConfig,
+  )
+  const tailwindSpinner = spinner(
+    `Updating ${highlighter.info(tailwindFileRelativePath)}`,
+    {
+      silent: options.silent,
+    },
+  ).start()
+  const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, 'utf8')
+  const output = await transformTailwindConfig(raw, tailwindConfig, config)
+  await fs.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8')
+  tailwindSpinner?.succeed()
+}
+
+export async function transformTailwindConfig(
+  input: string,
+  tailwindConfig: UpdaterTailwindConfig,
+  config: Config,
+) {
+  const sourceFile = await _createSourceFile(input, config)
+  // Find the object with content property.
+  // This is faster than traversing the default export.
+  // TODO: maybe we do need to traverse the default export?
+  const configObject = sourceFile
+    .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
+    .find(node =>
+      node
+        .getProperties()
+        .some(
+          property =>
+            property.isKind(SyntaxKind.PropertyAssignment)
+            && property.getName() === 'content',
+        ),
+    )
+
+  // We couldn't find the config object, so we return the input as is.
+  if (!configObject) {
+    return input
+  }
+
+  const quoteChar = _getQuoteChar(configObject)
+
+  // Add darkMode.
+  addTailwindConfigProperty(
+    configObject,
+    {
+      name: 'darkMode',
+      value: 'class',
+    },
+    { quoteChar },
+  )
+
+  // Add Tailwind config plugins.
+  tailwindConfig.plugins?.forEach((plugin) => {
+    addTailwindConfigPlugin(configObject, plugin)
+  })
+
+  // Add Tailwind config theme.
+  if (tailwindConfig.theme) {
+    await addTailwindConfigTheme(configObject, tailwindConfig.theme)
+  }
+
+  return sourceFile.getFullText()
+}
+
+function addTailwindConfigProperty(
+  configObject: ObjectLiteralExpression,
+  property: {
+    name: string
+    value: string
+  },
+  {
+    quoteChar,
+  }: {
+    quoteChar: string
+  },
+) {
+  const existingProperty = configObject.getProperty('darkMode')
+
+  if (!existingProperty) {
+    const newProperty = {
+      name: property.name,
+      initializer: `[${quoteChar}${property.value}${quoteChar}]`,
+    }
+
+    // We need to add darkMode as the first property.
+    if (property.name === 'darkMode') {
+      configObject.insertPropertyAssignment(0, newProperty)
+      return configObject
+    }
+
+    configObject.addPropertyAssignment(newProperty)
+
+    return configObject
+  }
+
+  if (existingProperty.isKind(SyntaxKind.PropertyAssignment)) {
+    const initializer = existingProperty.getInitializer()
+    const newValue = `${quoteChar}${property.value}${quoteChar}`
+
+    // If property is a string, change it to an array and append.
+    if (initializer?.isKind(SyntaxKind.StringLiteral)) {
+      const initializerText = initializer.getText()
+      initializer.replaceWithText(`[${initializerText}, ${newValue}]`)
+      return configObject
+    }
+
+    // If property is an array, append.
+    if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      // Check if the array already contains the value.
+      if (
+        initializer
+          .getElements()
+          .map(element => element.getText())
+          .includes(newValue)
+      ) {
+        return configObject
+      }
+      initializer.addElement(newValue)
+    }
+
+    return configObject
+  }
+
+  return configObject
+}
+
+async function addTailwindConfigTheme(
+  configObject: ObjectLiteralExpression,
+  theme: UpdaterTailwindConfig['theme'],
+) {
+  // Ensure there is a theme property.
+  if (!configObject.getProperty('theme')) {
+    configObject.addPropertyAssignment({
+      name: 'theme',
+      initializer: '{}',
+    })
+  }
+
+  // Nest all spread properties.
+  nestSpreadProperties(configObject)
+
+  const themeProperty = configObject
+    .getPropertyOrThrow('theme')
+    ?.asKindOrThrow(SyntaxKind.PropertyAssignment)
+
+  const themeInitializer = themeProperty.getInitializer()
+  if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+    const themeObjectString = themeInitializer.getText()
+    const themeObject = await parseObjectLiteral(themeObjectString)
+    const result = deepmerge(themeObject, theme, {
+      arrayMerge: (dst, src) => src,
+    })
+    const resultString = objectToString(result)
+      .replace(/'\.\.\.(.*)'/g, '...$1') // Remove quote around spread element
+      .replace(/'"/g, '\'') // Replace `\" with "
+      .replace(/"'/g, '\'') // Replace `\" with "
+      .replace(/'\[/g, '[') // Replace `[ with [
+      .replace(/\]'/g, ']') // Replace `] with ]
+      .replace(/'\\'/g, '\'') // Replace `\' with '
+      .replace(/\\'/g, '\'') // Replace \' with '
+      .replace(/\\''/g, '\'')
+      .replace(/''/g, '\'')
+    themeInitializer.replaceWithText(resultString)
+  }
+
+  // Unnest all spread properties.
+  unnestSpreadProperties(configObject)
+}
+
+function addTailwindConfigPlugin(
+  configObject: ObjectLiteralExpression,
+  plugin: string,
+) {
+  const existingPlugins = configObject.getProperty('plugins')
+
+  if (!existingPlugins) {
+    configObject.addPropertyAssignment({
+      name: 'plugins',
+      initializer: `[${plugin}]`,
+    })
+
+    return configObject
+  }
+
+  if (existingPlugins.isKind(SyntaxKind.PropertyAssignment)) {
+    const initializer = existingPlugins.getInitializer()
+
+    if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      if (
+        initializer
+          .getElements()
+          .map((element) => {
+            return element.getText().replace(/["']/g, '')
+          })
+          .includes(plugin.replace(/["']/g, ''))
+      ) {
+        return configObject
+      }
+      initializer.addElement(plugin)
+    }
+
+    return configObject
+  }
+
+  return configObject
+}
+
+export async function _createSourceFile(input: string, config: Config | null) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+  const resolvedPath
+    = config?.resolvedPaths?.tailwindConfig || 'tailwind.config.ts'
+  const tempFile = path.join(dir, `shadcn-${path.basename(resolvedPath)}`)
+
+  const project = new Project({
+    compilerOptions: {},
+  })
+  const sourceFile = project.createSourceFile(tempFile, input, {
+    // Note: .js and .mjs can still be valid for TS projects.
+    // We can't infer TypeScript from config.tsx.
+    scriptKind:
+      path.extname(resolvedPath) === '.ts' ? ScriptKind.TS : ScriptKind.JS,
+  })
+
+  return sourceFile
+}
+
+export function _getQuoteChar(configObject: ObjectLiteralExpression) {
+  return configObject
+    .getFirstDescendantByKind(SyntaxKind.StringLiteral)
+    ?.getQuoteKind() === QuoteKind.Single
+    ? '\''
+    : '"'
+}
+
+export function nestSpreadProperties(obj: ObjectLiteralExpression) {
+  const properties = obj.getProperties()
+
+  for (let i = 0; i < properties.length; i++) {
+    const prop = properties[i]
+    if (prop.isKind(SyntaxKind.SpreadAssignment)) {
+      const spreadAssignment = prop.asKindOrThrow(SyntaxKind.SpreadAssignment)
+      const spreadText = spreadAssignment.getExpression().getText()
+
+      // Replace spread with a property assignment
+      obj.insertPropertyAssignment(i, {
+        // Need to escape the name with " so that deepmerge doesn't mishandle the key
+        name: `"___${spreadText.replace(/^\.\.\./, '')}"`,
+        initializer: `"...${spreadText.replace(/^\.\.\./, '')}"`,
+      })
+
+      // Remove the original spread assignment
+      spreadAssignment.remove()
+    }
+    else if (prop.isKind(SyntaxKind.PropertyAssignment)) {
+      const propAssignment = prop.asKindOrThrow(SyntaxKind.PropertyAssignment)
+      const initializer = propAssignment.getInitializer()
+
+      if (
+        initializer
+        && initializer.isKind(SyntaxKind.ObjectLiteralExpression)
+      ) {
+        // Recursively process nested object literals
+        nestSpreadProperties(
+          initializer.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+        )
+      }
+      else if (
+        initializer
+        && initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        nestSpreadElements(
+          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
+        )
+      }
+    }
+  }
+}
+
+export function nestSpreadElements(arr: ArrayLiteralExpression) {
+  const elements = arr.getElements()
+  for (let j = 0; j < elements.length; j++) {
+    const element = elements[j]
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      // Recursive check on objects within arrays
+      nestSpreadProperties(
+        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+      )
+    }
+    else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      // Recursive check on nested arrays
+      nestSpreadElements(
+        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
+      )
+    }
+    else if (element.isKind(SyntaxKind.SpreadElement)) {
+      const spreadText = element.getText()
+      // Spread element within an array
+      arr.removeElement(j)
+      arr.insertElement(j, `"${spreadText}"`)
+    }
+  }
+}
+
+export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
+  const properties = obj.getProperties()
+
+  for (let i = 0; i < properties.length; i++) {
+    const prop = properties[i]
+    if (prop.isKind(SyntaxKind.PropertyAssignment)) {
+      const propAssignment = prop as PropertyAssignment
+      const initializer = propAssignment.getInitializer()
+
+      if (initializer && initializer.isKind(SyntaxKind.StringLiteral)) {
+        const value = initializer
+          .asKindOrThrow(SyntaxKind.StringLiteral)
+          .getLiteralValue()
+        if (value.startsWith('...')) {
+          obj.insertSpreadAssignment(i, { expression: value.slice(3) })
+          propAssignment.remove()
+        }
+      }
+      else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+        unnestSpreadProperties(initializer as ObjectLiteralExpression)
+      }
+      else if (
+        initializer
+        && initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        unnsetSpreadElements(
+          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
+        )
+      }
+    }
+  }
+}
+
+export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
+  const elements = arr.getElements()
+  for (let j = 0; j < elements.length; j++) {
+    const element = elements[j]
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      // Recursive check on objects within arrays
+      unnestSpreadProperties(
+        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+      )
+    }
+    else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      // Recursive check on nested arrays
+      unnsetSpreadElements(
+        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
+      )
+    }
+    else if (element.isKind(SyntaxKind.StringLiteral)) {
+      const spreadText = element.getText()
+      // check if spread element
+      const spreadTest = /^['"](\.\.\..*)['"]$/g
+      if (spreadTest.test(spreadText)) {
+        arr.removeElement(j)
+        arr.insertElement(j, spreadText.replace(spreadTest, '$1'))
+      }
+    }
+  }
+}
+
+async function parseObjectLiteral(objectLiteralString: string): Promise<any> {
+  const sourceFile = await _createSourceFile(
+    `const theme = ${objectLiteralString}`,
+    null,
+  )
+
+  const statement = sourceFile.getStatements()[0]
+  if (statement?.getKind() === SyntaxKind.VariableStatement) {
+    const declaration = (statement as VariableStatement)
+      .getDeclarationList()
+      ?.getDeclarations()[0]
+    const initializer = declaration.getInitializer()
+    if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      return await parseObjectLiteralExpression(initializer)
+    }
+  }
+
+  throw new Error('Invalid input: not an object literal')
+}
+
+function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
+  const result: any = {}
+  for (const property of node.getProperties()) {
+    if (property.isKind(SyntaxKind.PropertyAssignment)) {
+      const name = property.getName().replace(/'/g, '')
+      if (
+        property.getInitializer()?.isKind(SyntaxKind.ObjectLiteralExpression)
+      ) {
+        result[name] = parseObjectLiteralExpression(
+          property.getInitializer() as ObjectLiteralExpression,
+        )
+      }
+      else if (
+        property.getInitializer()?.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        result[name] = parseArrayLiteralExpression(
+          property.getInitializer() as ArrayLiteralExpression,
+        )
+      }
+      else {
+        result[name] = parseValue(property.getInitializer())
+      }
+    }
+  }
+  return result
+}
+
+function parseArrayLiteralExpression(node: ArrayLiteralExpression): any[] {
+  const result: any[] = []
+  for (const element of node.getElements()) {
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      result.push(
+        parseObjectLiteralExpression(
+          element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+        ),
+      )
+    }
+    else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      result.push(
+        parseArrayLiteralExpression(
+          element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression),
+        ),
+      )
+    }
+    else {
+      result.push(parseValue(element))
+    }
+  }
+  return result
+}
+
+function parseValue(node: any): any {
+  switch (node.getKind()) {
+    case SyntaxKind.StringLiteral:
+      return node.getText()
+    case SyntaxKind.NumericLiteral:
+      return Number(node.getText())
+    case SyntaxKind.TrueKeyword:
+      return true
+    case SyntaxKind.FalseKeyword:
+      return false
+    case SyntaxKind.NullKeyword:
+      return null
+    case SyntaxKind.ArrayLiteralExpression:
+      return node.getElements().map(parseValue)
+    case SyntaxKind.ObjectLiteralExpression:
+      return parseObjectLiteralExpression(node)
+    default:
+      return node.getText()
+  }
+}
+
+export function buildTailwindThemeColorsFromCssVars(
+  cssVars: Record<string, string>,
+) {
+  const result: Record<string, any> = {}
+
+  for (const key of Object.keys(cssVars)) {
+    const parts = key.split('-')
+    const colorName = parts[0]
+    const subType = parts.slice(1).join('-')
+
+    if (subType === '') {
+      if (typeof result[colorName] === 'object') {
+        result[colorName].DEFAULT = `hsl(var(--${key}))`
+      }
+      else {
+        result[colorName] = `hsl(var(--${key}))`
+      }
+    }
+    else {
+      if (typeof result[colorName] !== 'object') {
+        result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` }
+      }
+      result[colorName][subType] = `hsl(var(--${key}))`
+    }
+  }
+
+  // Remove DEFAULT if it's not in the original cssVars
+  for (const [colorName, value] of Object.entries(result)) {
+    if (
+      typeof value === 'object'
+      && value.DEFAULT === `hsl(var(--${colorName}))`
+      && !(colorName in cssVars)
+    ) {
+      delete value.DEFAULT
+    }
+  }
+
+  return result
+}
diff --git a/packages/cli/src/utils/updaters/update-tailwind-content.ts b/packages/cli/src/utils/updaters/update-tailwind-content.ts
new file mode 100644
index 000000000..999220e06
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-tailwind-content.ts
@@ -0,0 +1,122 @@
+import type { Config } from '@/src/utils/get-config'
+import type { ObjectLiteralExpression } from 'ts-morph'
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { highlighter } from '@/src/utils/highlighter'
+import { spinner } from '@/src/utils/spinner'
+import {
+  _createSourceFile,
+  _getQuoteChar,
+} from '@/src/utils/updaters/update-tailwind-config'
+import { SyntaxKind } from 'ts-morph'
+
+export async function updateTailwindContent(
+  content: string[],
+  config: Config,
+  options: {
+    silent?: boolean
+  },
+) {
+  if (!content) {
+    return
+  }
+
+  options = {
+    silent: false,
+    ...options,
+  }
+
+  const tailwindFileRelativePath = path.relative(
+    config.resolvedPaths.cwd,
+    config.resolvedPaths.tailwindConfig,
+  )
+  const tailwindSpinner = spinner(
+    `Updating ${highlighter.info(tailwindFileRelativePath)}`,
+    {
+      silent: options.silent,
+    },
+  ).start()
+  const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, 'utf8')
+  const output = await transformTailwindContent(raw, content, config)
+  await fs.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8')
+  tailwindSpinner?.succeed()
+}
+
+export async function transformTailwindContent(
+  input: string,
+  content: string[],
+  config: Config,
+) {
+  const sourceFile = await _createSourceFile(input, config)
+  // Find the object with content property.
+  // This is faster than traversing the default export.
+  // TODO: maybe we do need to traverse the default export?
+  const configObject = sourceFile
+    .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
+    .find(node =>
+      node
+        .getProperties()
+        .some(
+          property =>
+            property.isKind(SyntaxKind.PropertyAssignment)
+            && property.getName() === 'content',
+        ),
+    )
+
+  // We couldn't find the config object, so we return the input as is.
+  if (!configObject) {
+    return input
+  }
+
+  addTailwindConfigContent(configObject, content)
+
+  return sourceFile.getFullText()
+}
+
+async function addTailwindConfigContent(
+  configObject: ObjectLiteralExpression,
+  content: string[],
+) {
+  const quoteChar = _getQuoteChar(configObject)
+
+  const existingProperty = configObject.getProperty('content')
+
+  if (!existingProperty) {
+    const newProperty = {
+      name: 'content',
+      initializer: `[${quoteChar}${content.join(
+        `${quoteChar}, ${quoteChar}`,
+      )}${quoteChar}]`,
+    }
+    configObject.addPropertyAssignment(newProperty)
+
+    return configObject
+  }
+
+  if (existingProperty.isKind(SyntaxKind.PropertyAssignment)) {
+    const initializer = existingProperty.getInitializer()
+
+    // If property is an array, append.
+    if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      for (const contentItem of content) {
+        const newValue = `${quoteChar}${contentItem}${quoteChar}`
+
+        // Check if the array already contains the value.
+        if (
+          initializer
+            .getElements()
+            .map(element => element.getText())
+            .includes(newValue)
+        ) {
+          continue
+        }
+
+        initializer.addElement(newValue)
+      }
+    }
+
+    return configObject
+  }
+
+  return configObject
+}
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index fde349907..f1943d67b 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -7,6 +7,7 @@
     "paths": {
       "@/*": ["./*"]
     },
+    "resolveJsonModule": true,
     "isolatedModules": false
   },
   "include": ["src/**/*.ts"],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3121ff529..97350e403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -264,15 +264,24 @@ importers:
       consola:
         specifier: ^3.2.3
         version: 3.2.3
+      deepmerge:
+        specifier: ^4.3.1
+        version: 4.3.1
       diff:
         specifier: ^7.0.0
         version: 7.0.0
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
       https-proxy-agent:
         specifier: ^7.0.5
         version: 7.0.5(supports-color@9.4.0)
+      kleur:
+        specifier: ^4.1.5
+        version: 4.1.5
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -294,6 +303,9 @@ importers:
       pkg-types:
         specifier: ^1.2.1
         version: 1.2.1
+      postcss:
+        specifier: ^8.4.49
+        version: 8.4.49
       prompts:
         specifier: ^2.4.2
         version: 2.4.2
@@ -303,6 +315,15 @@ importers:
       semver:
         specifier: ^7.6.3
         version: 7.6.3
+      stringify-object:
+        specifier: ^5.0.0
+        version: 5.0.0
+      tailwindcss:
+        specifier: ^3.4.15
+        version: 3.4.15
+      ts-morph:
+        specifier: ^24.0.0
+        version: 24.0.0
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
@@ -331,6 +352,9 @@ importers:
       '@types/prompts':
         specifier: ^2.4.9
         version: 2.4.9
+      '@types/stringify-object':
+        specifier: ^4.0.5
+        version: 4.0.5
       tsup:
         specifier: ^8.3.5
         version: 8.3.5(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0)
@@ -2100,6 +2124,9 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@ts-morph/common@0.25.0':
+    resolution: {integrity: sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==}
+
   '@types/conventional-commits-parser@5.0.0':
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
 
@@ -2298,6 +2325,9 @@ packages:
   '@types/responselike@1.0.3':
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
 
+  '@types/stringify-object@4.0.5':
+    resolution: {integrity: sha512-TzX5V+njkbJ8iJ0mrj+Vqveep/1JBH4SSA3J2wYrE1eUrOhdsjTBCb0kao4EquSQ8KgPpqY4zSVP2vCPWKBElg==}
+
   '@types/supercluster@5.0.3':
     resolution: {integrity: sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==}
 
@@ -3142,6 +3172,9 @@ packages:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
   codesandbox-import-util-types@2.2.3:
     resolution: {integrity: sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==}
 
@@ -4374,6 +4407,10 @@ packages:
     resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
     engines: {node: '>=18'}
 
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
@@ -4824,6 +4861,10 @@ packages:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
 
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
   is-path-inside@1.0.1:
     resolution: {integrity: sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==}
     engines: {node: '>=0.10.0'}
@@ -4839,6 +4880,10 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-retry-allowed@1.2.0:
     resolution: {integrity: sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==}
     engines: {node: '>=0.10.0'}
@@ -5009,6 +5054,10 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   klona@2.0.6:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
@@ -6817,6 +6866,10 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
   strip-ansi@4.0.0:
     resolution: {integrity: sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==}
     engines: {node: '>=4'}
@@ -7097,6 +7150,9 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  ts-morph@24.0.0:
+    resolution: {integrity: sha512-2OAOg/Ob5yx9Et7ZX4CvTCc0UFoZHwLEJ+dpDPSUi5TgwwlTlX47w+iFRrEwzUZwYACjq83cgjS/Da50Ga37uw==}
+
   tsconfck@3.1.4:
     resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
@@ -9652,6 +9708,12 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@ts-morph/common@0.25.0':
+    dependencies:
+      minimatch: 9.0.5
+      path-browserify: 1.0.1
+      tinyglobby: 0.2.10
+
   '@types/conventional-commits-parser@5.0.0':
     dependencies:
       '@types/node': 22.9.0
@@ -9880,6 +9942,8 @@ snapshots:
     dependencies:
       '@types/node': 22.9.0
 
+  '@types/stringify-object@4.0.5': {}
+
   '@types/supercluster@5.0.3':
     dependencies:
       '@types/geojson': 7946.0.14
@@ -10979,6 +11043,8 @@ snapshots:
 
   co@4.6.0: {}
 
+  code-block-writer@13.0.3: {}
+
   codesandbox-import-util-types@2.2.3: {}
 
   codesandbox-import-utils@2.2.3:
@@ -12379,6 +12445,8 @@ snapshots:
 
   get-east-asian-width@1.3.0: {}
 
+  get-own-enumerable-keys@1.0.0: {}
+
   get-port-please@3.1.2: {}
 
   get-stream@3.0.0: {}
@@ -12875,6 +12943,8 @@ snapshots:
 
   is-obj@2.0.0: {}
 
+  is-obj@3.0.0: {}
+
   is-path-inside@1.0.1:
     dependencies:
       path-is-inside: 1.0.2
@@ -12887,6 +12957,8 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.6
 
+  is-regexp@3.1.0: {}
+
   is-retry-allowed@1.2.0: {}
 
   is-ssh@1.4.0:
@@ -13016,6 +13088,8 @@ snapshots:
 
   kleur@3.0.3: {}
 
+  kleur@4.1.5: {}
+
   klona@2.0.6: {}
 
   knitwork@1.1.0: {}
@@ -15301,6 +15375,12 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
   strip-ansi@4.0.0:
     dependencies:
       ansi-regex: 3.0.1
@@ -15611,6 +15691,11 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  ts-morph@24.0.0:
+    dependencies:
+      '@ts-morph/common': 0.25.0
+      code-block-writer: 13.0.3
+
   tsconfck@3.1.4(typescript@5.6.3):
     optionalDependencies:
       typescript: 5.6.3

From 5ff0b20ac2684ab718fd4b603fc39c2e7e587747 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 21 Nov 2024 11:52:31 +0800
Subject: [PATCH 11/39] refactor: build registry

---
 apps/www/registry/.eslintrc.json              |    6 +
 apps/www/registry/crawl-content.ts            |  320 +++++
 .../default/block/Authentication01.vue        |    0
 .../default/block/Authentication02.vue        |    0
 .../default/block/Authentication03.vue        |    0
 .../default/block/Authentication04.vue        |    0
 .../registry/default/block/Dashboard01.vue    |    0
 .../registry/default/block/Dashboard02.vue    |    0
 .../registry/default/block/Dashboard03.vue    |    0
 .../registry/default/block/Dashboard04.vue    |    0
 .../registry/default/block/Dashboard05.vue    |    0
 .../registry/default/block/Dashboard06.vue    |    0
 .../registry/default/block/Dashboard07.vue    |    0
 .../registry/default/block/Sidebar01.vue      |    0
 .../registry/default/block/Sidebar07.vue      |    0
 .../default/example/AccordionDemo.vue         |    0
 .../registry/default/example/AlertDemo.vue    |    0
 .../default/example/AlertDestructiveDemo.vue  |    0
 .../default/example/AlertDialogDemo.vue       |    0
 .../example/AreaChartCustomTooltip.vue        |    0
 .../default/example/AreaChartDemo.vue         |    0
 .../default/example/AreaChartSparkline.vue    |    0
 .../default/example/AspectRatioDemo.vue       |    0
 .../registry/default/example/AutoFormApi.vue  |    0
 .../default/example/AutoFormArray.vue         |    0
 .../default/example/AutoFormBasic.vue         |    0
 .../example/AutoFormConfirmPassword.vue       |    0
 .../default/example/AutoFormControlled.vue    |    0
 .../default/example/AutoFormDependencies.vue  |    0
 .../example/AutoFormInputWithoutLabel.vue     |    0
 .../default/example/AutoFormSubObject.vue     |    0
 .../registry/default/example/AvatarDemo.vue   |    0
 .../registry/default/example/BadgeDemo.vue    |    0
 .../default/example/BadgeDestructiveDemo.vue  |    0
 .../default/example/BadgeOutlineDemo.vue      |    0
 .../default/example/BadgeSecondaryDemo.vue    |    0
 .../default/example/BarChartCustomTooltip.vue |    0
 .../registry/default/example/BarChartDemo.vue |    0
 .../default/example/BarChartRounded.vue       |    0
 .../default/example/BarChartStacked.vue       |    0
 .../default/example/BreadcrumbDemo.vue        |    0
 .../default/example/BreadcrumbDropdown.vue    |    0
 .../example/BreadcrumbEllipsisDemo.vue        |    0
 .../default/example/BreadcrumbLinkDemo.vue    |    0
 .../default/example/BreadcrumbResponsive.vue  |    0
 .../example/BreadcrumbSeparatorDemo.vue       |    0
 .../default/example/ButtonAsChildDemo.vue     |    0
 .../registry/default/example/ButtonDemo.vue   |    0
 .../default/example/ButtonDestructiveDemo.vue |    0
 .../default/example/ButtonGhostDemo.vue       |    0
 .../default/example/ButtonIconDemo.vue        |    0
 .../default/example/ButtonLinkDemo.vue        |    0
 .../default/example/ButtonLoadingDemo.vue     |    0
 .../default/example/ButtonOutlineDemo.vue     |    0
 .../default/example/ButtonSecondaryDemo.vue   |    0
 .../default/example/ButtonWithIconDemo.vue    |    0
 .../registry/default/example/CalendarDemo.vue |    0
 .../registry/default/example/CalendarForm.vue |    0
 .../default/example/CalendarWithSelect.vue    |    0
 .../registry/default/example/CardChat.vue     |    0
 .../registry/default/example/CardDemo.vue     |    0
 .../registry/default/example/CardFormDemo.vue |    0
 .../registry/default/example/CardStats.vue    |    0
 .../registry/default/example/CardWithForm.vue |    0
 .../default/example/Cards/ActivityGoal.vue    |    0
 .../default/example/Cards/DataTable.vue       |    0
 .../registry/default/example/Cards/Metric.vue |    0
 .../registry/default/example/CarouselApi.vue  |    0
 .../registry/default/example/CarouselDemo.vue |    0
 .../default/example/CarouselOrientation.vue   |    0
 .../default/example/CarouselPlugin.vue        |    0
 .../registry/default/example/CarouselSize.vue |    0
 .../default/example/CarouselSpacing.vue       |    0
 .../default/example/CarouselThumbnails.vue    |    0
 .../registry/default/example/CheckboxDemo.vue |    0
 .../default/example/CheckboxDisabled.vue      |    0
 .../default/example/CheckboxFormMultiple.vue  |    0
 .../default/example/CheckboxFormSingle.vue    |    0
 .../default/example/CheckboxWithText.vue      |    0
 .../default/example/CollapsibleDemo.vue       |    0
 .../registry/default/example/ComboboxDemo.vue |    0
 .../default/example/ComboboxDropdownMenu.vue  |    0
 .../registry/default/example/ComboboxForm.vue |    0
 .../default/example/ComboboxPopover.vue       |    0
 .../default/example/ComboboxResponsive.vue    |    0
 .../registry/default/example/CommandDemo.vue  |    0
 .../default/example/CommandDialogDemo.vue     |    0
 .../default/example/ContextMenuDemo.vue       |    0
 .../default/example/CustomChartTooltip.vue    |    0
 .../example/DataTableColumnPinningDemo.vue    |    0
 .../default/example/DataTableDemo.vue         |    0
 .../default/example/DataTableDemoColumn.vue   |    0
 .../default/example/DataTableReactiveDemo.vue |    0
 .../default/example/DatePickerDemo.vue        |    0
 .../default/example/DatePickerForm.vue        |    0
 .../DatePickerWithIndependentMonths.vue       |    0
 .../default/example/DatePickerWithPresets.vue |    0
 .../default/example/DatePickerWithRange.vue   |    0
 .../example/DialogCustomCloseButton.vue       |    0
 .../registry/default/example/DialogDemo.vue   |    0
 .../registry/default/example/DialogForm.vue   |    0
 .../default/example/DialogScrollBodyDemo.vue  |    0
 .../example/DialogScrollOverlayDemo.vue       |    0
 .../default/example/DonutChartColor.vue       |    0
 .../example/DonutChartCustomTooltip.vue       |    0
 .../default/example/DonutChartDemo.vue        |    0
 .../default/example/DonutChartPie.vue         |    0
 .../registry/default/example/DrawerDemo.vue   |    0
 .../registry/default/example/DrawerDialog.vue |    0
 .../example/DropdownMenuCheckboxes.vue        |    0
 .../default/example/DropdownMenuDemo.vue      |    0
 .../example/DropdownMenuRadioGroup.vue        |    0
 .../default/example/HoverCardDemo.vue         |    0
 .../registry/default/example/InputDemo.vue    |    0
 .../default/example/InputDisabled.vue         |    0
 .../registry/default/example/InputFile.vue    |    0
 .../registry/default/example/InputForm.vue    |    0
 .../default/example/InputFormAutoAnimate.vue  |    0
 .../default/example/InputWithButton.vue       |    0
 .../default/example/InputWithIcon.vue         |    0
 .../default/example/InputWithLabel.vue        |    0
 .../registry/default/example/LabelDemo.vue    |    0
 .../example/LineChartCustomTooltip.vue        |    0
 .../default/example/LineChartDemo.vue         |    0
 .../default/example/LineChartSparkline.vue    |    0
 .../registry/default/example/MenubarDemo.vue  |    0
 .../default/example/NavigationMenuDemo.vue    |    0
 .../default/example/NumberFieldCurrency.vue   |    0
 .../default/example/NumberFieldDecimal.vue    |    0
 .../default/example/NumberFieldDemo.vue       |    0
 .../default/example/NumberFieldDisabled.vue   |    0
 .../default/example/NumberFieldForm.vue       |    0
 .../default/example/NumberFieldPercentage.vue |    0
 .../default/example/PaginationDemo.vue        |    0
 .../default/example/PinInputControlled.vue    |    0
 .../registry/default/example/PinInputDemo.vue |    0
 .../default/example/PinInputDisabled.vue      |    0
 .../default/example/PinInputFormDemo.vue      |    0
 .../default/example/PinInputSeparatorDemo.vue |    0
 .../registry/default/example/PopoverDemo.vue  |    0
 .../registry/default/example/ProgressDemo.vue |    0
 .../default/example/RadioGroupDemo.vue        |    0
 .../default/example/RadioGroupForm.vue        |    0
 .../default/example/RangeCalendarDemo.vue     |    0
 .../default/example/ResizableDemo.vue         |    0
 .../default/example/ResizableHandleDemo.vue   |    0
 .../default/example/ResizableVerticalDemo.vue |    0
 .../default/example/ScrollAreaDemo.vue        |    0
 .../example/ScrollAreaHorizontalDemo.vue      |    0
 .../registry/default/example/SelectDemo.vue   |    0
 .../registry/default/example/SelectForm.vue   |    0
 .../default/example/SelectScrollable.vue      |    0
 .../default/example/SeparatorDemo.vue         |    0
 .../registry/default/example/SheetDemo.vue    |    0
 .../default/example/SheetSideDemo.vue         |    0
 .../registry/default/example/SkeletonCard.vue |    0
 .../registry/default/example/SkeletonDemo.vue |    0
 .../registry/default/example/SliderDemo.vue   |    0
 .../registry/default/example/SliderForm.vue   |    0
 .../registry/default/example/SonnerDemo.vue   |    0
 .../default/example/SonnerWithDialog.vue      |    0
 .../registry/default/example/StepperDemo.vue  |    0
 .../registry/default/example/StepperForm.vue  |    0
 .../default/example/StepperHorizental.vue     |    0
 .../default/example/StepperVertical.vue       |    0
 .../registry/default/example/SwitchDemo.vue   |    0
 .../registry/default/example/SwitchForm.vue   |    0
 .../registry/default/example/TableDemo.vue    |    0
 .../registry/default/example/TabsDemo.vue     |    0
 .../default/example/TabsVerticalDemo.vue      |    0
 .../default/example/TagsInputComboboxDemo.vue |    0
 .../default/example/TagsInputDemo.vue         |    0
 .../default/example/TagsInputFormDemo.vue     |    0
 .../registry/default/example/TextareaDemo.vue |    0
 .../default/example/TextareaDisabled.vue      |    0
 .../registry/default/example/TextareaForm.vue |    0
 .../default/example/TextareaWithButton.vue    |    0
 .../default/example/TextareaWithLabel.vue     |    0
 .../default/example/TextareaWithText.vue      |    0
 .../registry/default/example/ToastDemo.vue    |    0
 .../default/example/ToastDestructive.vue      |    0
 .../registry/default/example/ToastSimple.vue  |    0
 .../default/example/ToastWithAction.vue       |    0
 .../default/example/ToastWithTitle.vue        |    0
 .../registry/default/example/ToggleDemo.vue   |    0
 .../default/example/ToggleDisabledDemo.vue    |    0
 .../default/example/ToggleGroupDemo.vue       |    0
 .../example/ToggleGroupDisabledDemo.vue       |    0
 .../default/example/ToggleGroupLargeDemo.vue  |    0
 .../example/ToggleGroupOutlineDemo.vue        |    0
 .../default/example/ToggleGroupSingleDemo.vue |    0
 .../default/example/ToggleGroupSmallDemo.vue  |    0
 .../default/example/ToggleItalicDemo.vue      |    0
 .../example/ToggleItalicWithTextDemo.vue      |    0
 .../default/example/ToggleLargeDemo.vue       |    0
 .../default/example/ToggleSmallDemo.vue       |    0
 .../registry/default/example/TooltipDemo.vue  |    0
 .../default/example/TypographyBlockquote.vue  |    0
 .../default/example/TypographyDemo.vue        |    0
 .../registry/default/example/TypographyH1.vue |    0
 .../registry/default/example/TypographyH2.vue |    0
 .../registry/default/example/TypographyH3.vue |    0
 .../registry/default/example/TypographyH4.vue |    0
 .../default/example/TypographyInlineCode.vue  |    0
 .../default/example/TypographyLarge.vue       |    0
 .../default/example/TypographyLead.vue        |    0
 .../default/example/TypographyList.vue        |    0
 .../default/example/TypographyMuted.vue       |    0
 .../registry/default/example/TypographyP.vue  |    0
 .../default/example/TypographySmall.vue       |    0
 .../default/example/TypographyTable.vue       |    0
 .../default/example/VCalendarDemo.vue         |    0
 .../default/example/VDatePickerDemo.vue       |    0
 .../default/example/VDatePickerForm.vue       |    0
 .../example/VDatePickerWithPresets.vue        |    0
 .../default/example/VDatePickerWithRange.vue  |    0
 .../default/example/VDateTimePickerDemo.vue   |    0
 .../default/example/VRangePickerWithSlot.vue  |    0
 .../{src => registry/default}/lib/utils.ts    |    0
 .../default/ui/accordion/Accordion.vue        |    0
 .../default/ui/accordion/AccordionContent.vue |    0
 .../default/ui/accordion/AccordionItem.vue    |    0
 .../default/ui/accordion/AccordionTrigger.vue |    0
 .../registry/default/ui/accordion/index.ts    |    0
 .../default/ui/alert-dialog/AlertDialog.vue   |    0
 .../ui/alert-dialog/AlertDialogAction.vue     |    0
 .../ui/alert-dialog/AlertDialogCancel.vue     |    0
 .../ui/alert-dialog/AlertDialogContent.vue    |    0
 .../alert-dialog/AlertDialogDescription.vue   |    0
 .../ui/alert-dialog/AlertDialogFooter.vue     |    0
 .../ui/alert-dialog/AlertDialogHeader.vue     |    0
 .../ui/alert-dialog/AlertDialogTitle.vue      |    0
 .../ui/alert-dialog/AlertDialogTrigger.vue    |    0
 .../registry/default/ui/alert-dialog/index.ts |    0
 .../registry/default/ui/alert/Alert.vue       |    0
 .../default/ui/alert/AlertDescription.vue     |    0
 .../registry/default/ui/alert/AlertTitle.vue  |    0
 .../registry/default/ui/alert/index.ts        |    0
 .../default/ui/aspect-ratio/AspectRatio.vue   |    0
 .../registry/default/ui/aspect-ratio/index.ts |    0
 .../default/ui/auto-form/AutoForm.vue         |    0
 .../default/ui/auto-form/AutoFormField.vue    |    0
 .../ui/auto-form/AutoFormFieldArray.vue       |    0
 .../ui/auto-form/AutoFormFieldBoolean.vue     |    0
 .../ui/auto-form/AutoFormFieldDate.vue        |    0
 .../ui/auto-form/AutoFormFieldEnum.vue        |    0
 .../ui/auto-form/AutoFormFieldFile.vue        |    0
 .../ui/auto-form/AutoFormFieldInput.vue       |    0
 .../ui/auto-form/AutoFormFieldNumber.vue      |    0
 .../ui/auto-form/AutoFormFieldObject.vue      |    0
 .../default/ui/auto-form/AutoFormLabel.vue    |    0
 .../registry/default/ui/auto-form/constant.ts |    0
 .../default/ui/auto-form/dependencies.ts      |    0
 .../registry/default/ui/auto-form/index.ts    |    0
 .../default/ui/auto-form/interface.ts         |    0
 .../registry/default/ui/auto-form/utils.ts    |    0
 .../registry/default/ui/avatar/Avatar.vue     |    0
 .../default/ui/avatar/AvatarFallback.vue      |    0
 .../default/ui/avatar/AvatarImage.vue         |    0
 .../registry/default/ui/avatar/index.ts       |    0
 .../registry/default/ui/badge/Badge.vue       |    0
 .../registry/default/ui/badge/index.ts        |    0
 .../default/ui/breadcrumb/Breadcrumb.vue      |    0
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |    0
 .../default/ui/breadcrumb/BreadcrumbItem.vue  |    0
 .../default/ui/breadcrumb/BreadcrumbLink.vue  |    0
 .../default/ui/breadcrumb/BreadcrumbList.vue  |    0
 .../default/ui/breadcrumb/BreadcrumbPage.vue  |    0
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |    0
 .../registry/default/ui/breadcrumb/index.ts   |    0
 .../registry/default/ui/button/Button.vue     |    0
 .../registry/default/ui/button/index.ts       |    0
 .../registry/default/ui/calendar/Calendar.vue |    0
 .../default/ui/calendar/CalendarCell.vue      |    0
 .../ui/calendar/CalendarCellTrigger.vue       |    0
 .../default/ui/calendar/CalendarGrid.vue      |    0
 .../default/ui/calendar/CalendarGridBody.vue  |    0
 .../default/ui/calendar/CalendarGridHead.vue  |    0
 .../default/ui/calendar/CalendarGridRow.vue   |    0
 .../default/ui/calendar/CalendarHeadCell.vue  |    0
 .../default/ui/calendar/CalendarHeader.vue    |    0
 .../default/ui/calendar/CalendarHeading.vue   |    0
 .../ui/calendar/CalendarNextButton.vue        |    0
 .../ui/calendar/CalendarPrevButton.vue        |    0
 .../registry/default/ui/calendar/index.ts     |    0
 .../registry/default/ui/card/Card.vue         |    0
 .../registry/default/ui/card/CardContent.vue  |    0
 .../default/ui/card/CardDescription.vue       |    0
 .../registry/default/ui/card/CardFooter.vue   |    0
 .../registry/default/ui/card/CardHeader.vue   |    0
 .../registry/default/ui/card/CardTitle.vue    |    0
 .../registry/default/ui/card/index.ts         |    0
 .../registry/default/ui/carousel/Carousel.vue |    0
 .../default/ui/carousel/CarouselContent.vue   |    0
 .../default/ui/carousel/CarouselItem.vue      |    0
 .../default/ui/carousel/CarouselNext.vue      |    0
 .../default/ui/carousel/CarouselPrevious.vue  |    0
 .../registry/default/ui/carousel/index.ts     |    0
 .../registry/default/ui/carousel/interface.ts |    0
 .../default/ui/carousel/useCarousel.ts        |    0
 .../default/ui/chart-area/AreaChart.vue       |    0
 .../registry/default/ui/chart-area/index.ts   |    0
 .../default/ui/chart-bar/BarChart.vue         |    0
 .../registry/default/ui/chart-bar/index.ts    |    0
 .../default/ui/chart-donut/DonutChart.vue     |    0
 .../registry/default/ui/chart-donut/index.ts  |    0
 .../default/ui/chart-line/LineChart.vue       |    0
 .../registry/default/ui/chart-line/index.ts   |    0
 .../default/ui/chart/ChartCrosshair.vue       |    0
 .../registry/default/ui/chart/ChartLegend.vue |    0
 .../default/ui/chart/ChartSingleTooltip.vue   |    0
 .../default/ui/chart/ChartTooltip.vue         |    0
 .../registry/default/ui/chart/index.ts        |    0
 .../registry/default/ui/chart/interface.ts    |    0
 .../registry/default/ui/checkbox/Checkbox.vue |    0
 .../registry/default/ui/checkbox/index.ts     |    0
 .../default/ui/collapsible/Collapsible.vue    |    0
 .../ui/collapsible/CollapsibleContent.vue     |    0
 .../ui/collapsible/CollapsibleTrigger.vue     |    0
 .../registry/default/ui/collapsible/index.ts  |    0
 .../registry/default/ui/command/Command.vue   |    0
 .../default/ui/command/CommandDialog.vue      |    0
 .../default/ui/command/CommandEmpty.vue       |    0
 .../default/ui/command/CommandGroup.vue       |    0
 .../default/ui/command/CommandInput.vue       |    0
 .../default/ui/command/CommandItem.vue        |    0
 .../default/ui/command/CommandList.vue        |    0
 .../default/ui/command/CommandSeparator.vue   |    0
 .../default/ui/command/CommandShortcut.vue    |    0
 .../registry/default/ui/command/index.ts      |    0
 .../default/ui/context-menu/ContextMenu.vue   |    0
 .../context-menu/ContextMenuCheckboxItem.vue  |    0
 .../ui/context-menu/ContextMenuContent.vue    |    0
 .../ui/context-menu/ContextMenuGroup.vue      |    0
 .../ui/context-menu/ContextMenuItem.vue       |    0
 .../ui/context-menu/ContextMenuLabel.vue      |    0
 .../ui/context-menu/ContextMenuPortal.vue     |    0
 .../ui/context-menu/ContextMenuRadioGroup.vue |    0
 .../ui/context-menu/ContextMenuRadioItem.vue  |    0
 .../ui/context-menu/ContextMenuSeparator.vue  |    0
 .../ui/context-menu/ContextMenuShortcut.vue   |    0
 .../ui/context-menu/ContextMenuSub.vue        |    0
 .../ui/context-menu/ContextMenuSubContent.vue |    0
 .../ui/context-menu/ContextMenuSubTrigger.vue |    0
 .../ui/context-menu/ContextMenuTrigger.vue    |    0
 .../registry/default/ui/context-menu/index.ts |    0
 .../registry/default/ui/dialog/Dialog.vue     |    0
 .../default/ui/dialog/DialogClose.vue         |    0
 .../default/ui/dialog/DialogContent.vue       |    0
 .../default/ui/dialog/DialogDescription.vue   |    0
 .../default/ui/dialog/DialogFooter.vue        |    0
 .../default/ui/dialog/DialogHeader.vue        |    0
 .../default/ui/dialog/DialogScrollContent.vue |    0
 .../default/ui/dialog/DialogTitle.vue         |    0
 .../default/ui/dialog/DialogTrigger.vue       |    0
 .../registry/default/ui/dialog/index.ts       |    0
 .../registry/default/ui/drawer/Drawer.vue     |    0
 .../default/ui/drawer/DrawerContent.vue       |    0
 .../default/ui/drawer/DrawerDescription.vue   |    0
 .../default/ui/drawer/DrawerFooter.vue        |    0
 .../default/ui/drawer/DrawerHeader.vue        |    0
 .../default/ui/drawer/DrawerOverlay.vue       |    0
 .../default/ui/drawer/DrawerTitle.vue         |    0
 .../registry/default/ui/drawer/index.ts       |    0
 .../default/ui/dropdown-menu/DropdownMenu.vue |    0
 .../DropdownMenuCheckboxItem.vue              |    0
 .../ui/dropdown-menu/DropdownMenuContent.vue  |    0
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |    0
 .../ui/dropdown-menu/DropdownMenuItem.vue     |    0
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |    0
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |    0
 .../dropdown-menu/DropdownMenuRadioItem.vue   |    0
 .../dropdown-menu/DropdownMenuSeparator.vue   |    0
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |    0
 .../ui/dropdown-menu/DropdownMenuSub.vue      |    0
 .../dropdown-menu/DropdownMenuSubContent.vue  |    0
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |    0
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |    0
 .../default/ui/dropdown-menu/index.ts         |    0
 .../registry/default/ui/form/FormControl.vue  |    0
 .../default/ui/form/FormDescription.vue       |    0
 .../registry/default/ui/form/FormItem.vue     |    0
 .../registry/default/ui/form/FormLabel.vue    |    0
 .../registry/default/ui/form/FormMessage.vue  |    0
 .../registry/default/ui/form/index.ts         |    0
 .../registry/default/ui/form/injectionKeys.ts |    0
 .../registry/default/ui/form/useFormField.ts  |    0
 .../default/ui/hover-card/HoverCard.vue       |    0
 .../ui/hover-card/HoverCardContent.vue        |    0
 .../ui/hover-card/HoverCardTrigger.vue        |    0
 .../registry/default/ui/hover-card/index.ts   |    0
 .../registry/default/ui/input/Input.vue       |    0
 .../registry/default/ui/input/index.ts        |    0
 .../registry/default/ui/label/Label.vue       |    0
 .../registry/default/ui/label/index.ts        |    0
 .../registry/default/ui/menubar/Menubar.vue   |    0
 .../ui/menubar/MenubarCheckboxItem.vue        |    0
 .../default/ui/menubar/MenubarContent.vue     |    0
 .../default/ui/menubar/MenubarGroup.vue       |    0
 .../default/ui/menubar/MenubarItem.vue        |    0
 .../default/ui/menubar/MenubarLabel.vue       |    0
 .../default/ui/menubar/MenubarMenu.vue        |    0
 .../default/ui/menubar/MenubarRadioGroup.vue  |    0
 .../default/ui/menubar/MenubarRadioItem.vue   |    0
 .../default/ui/menubar/MenubarSeparator.vue   |    0
 .../default/ui/menubar/MenubarShortcut.vue    |    0
 .../default/ui/menubar/MenubarSub.vue         |    0
 .../default/ui/menubar/MenubarSubContent.vue  |    0
 .../default/ui/menubar/MenubarSubTrigger.vue  |    0
 .../default/ui/menubar/MenubarTrigger.vue     |    0
 .../registry/default/ui/menubar/index.ts      |    0
 .../ui/navigation-menu/NavigationMenu.vue     |    0
 .../navigation-menu/NavigationMenuContent.vue |    0
 .../NavigationMenuIndicator.vue               |    0
 .../ui/navigation-menu/NavigationMenuItem.vue |    0
 .../ui/navigation-menu/NavigationMenuLink.vue |    0
 .../ui/navigation-menu/NavigationMenuList.vue |    0
 .../navigation-menu/NavigationMenuTrigger.vue |    0
 .../NavigationMenuViewport.vue                |    0
 .../default/ui/navigation-menu/index.ts       |    0
 .../default/ui/number-field/NumberField.vue   |    0
 .../ui/number-field/NumberFieldContent.vue    |    0
 .../ui/number-field/NumberFieldDecrement.vue  |    0
 .../ui/number-field/NumberFieldIncrement.vue  |    0
 .../ui/number-field/NumberFieldInput.vue      |    0
 .../registry/default/ui/number-field/index.ts |    0
 .../ui/pagination/PaginationEllipsis.vue      |    0
 .../default/ui/pagination/PaginationFirst.vue |    0
 .../default/ui/pagination/PaginationLast.vue  |    0
 .../default/ui/pagination/PaginationNext.vue  |    0
 .../default/ui/pagination/PaginationPrev.vue  |    0
 .../registry/default/ui/pagination/index.ts   |    0
 .../default/ui/pin-input/PinInput.vue         |    0
 .../default/ui/pin-input/PinInputGroup.vue    |    0
 .../default/ui/pin-input/PinInputInput.vue    |    0
 .../ui/pin-input/PinInputSeparator.vue        |    0
 .../registry/default/ui/pin-input/index.ts    |    0
 .../registry/default/ui/popover/Popover.vue   |    0
 .../default/ui/popover/PopoverContent.vue     |    0
 .../default/ui/popover/PopoverTrigger.vue     |    0
 .../registry/default/ui/popover/index.ts      |    0
 .../registry/default/ui/progress/Progress.vue |    0
 .../registry/default/ui/progress/index.ts     |    0
 .../default/ui/radio-group/RadioGroup.vue     |    0
 .../default/ui/radio-group/RadioGroupItem.vue |    0
 .../registry/default/ui/radio-group/index.ts  |    0
 .../ui/range-calendar/RangeCalendar.vue       |    0
 .../ui/range-calendar/RangeCalendarCell.vue   |    0
 .../RangeCalendarCellTrigger.vue              |    0
 .../ui/range-calendar/RangeCalendarGrid.vue   |    0
 .../range-calendar/RangeCalendarGridBody.vue  |    0
 .../range-calendar/RangeCalendarGridHead.vue  |    0
 .../range-calendar/RangeCalendarGridRow.vue   |    0
 .../range-calendar/RangeCalendarHeadCell.vue  |    0
 .../ui/range-calendar/RangeCalendarHeader.vue |    0
 .../range-calendar/RangeCalendarHeading.vue   |    0
 .../RangeCalendarNextButton.vue               |    0
 .../RangeCalendarPrevButton.vue               |    0
 .../default/ui/range-calendar/index.ts        |    0
 .../default/ui/resizable/ResizableHandle.vue  |    0
 .../ui/resizable/ResizablePanelGroup.vue      |    0
 .../registry/default/ui/resizable/index.ts    |    0
 .../default/ui/scroll-area/ScrollArea.vue     |    0
 .../default/ui/scroll-area/ScrollBar.vue      |    0
 .../registry/default/ui/scroll-area/index.ts  |    0
 .../registry/default/ui/select/Select.vue     |    0
 .../default/ui/select/SelectContent.vue       |    0
 .../default/ui/select/SelectGroup.vue         |    0
 .../registry/default/ui/select/SelectItem.vue |    0
 .../default/ui/select/SelectItemText.vue      |    0
 .../default/ui/select/SelectLabel.vue         |    0
 .../ui/select/SelectScrollDownButton.vue      |    0
 .../ui/select/SelectScrollUpButton.vue        |    0
 .../default/ui/select/SelectSeparator.vue     |    0
 .../default/ui/select/SelectTrigger.vue       |    0
 .../default/ui/select/SelectValue.vue         |    0
 .../registry/default/ui/select/index.ts       |    0
 .../default/ui/separator/Separator.vue        |    0
 .../registry/default/ui/separator/index.ts    |    0
 .../registry/default/ui/sheet/Sheet.vue       |    0
 .../registry/default/ui/sheet/SheetClose.vue  |    0
 .../default/ui/sheet/SheetContent.vue         |    0
 .../default/ui/sheet/SheetDescription.vue     |    0
 .../registry/default/ui/sheet/SheetFooter.vue |    0
 .../registry/default/ui/sheet/SheetHeader.vue |    0
 .../registry/default/ui/sheet/SheetTitle.vue  |    0
 .../default/ui/sheet/SheetTrigger.vue         |    0
 .../registry/default/ui/sheet/index.ts        |    0
 .../registry/default/ui/sidebar/Sidebar.vue   |    0
 .../default/ui/sidebar/SidebarContent.vue     |    0
 .../default/ui/sidebar/SidebarFooter.vue      |    0
 .../default/ui/sidebar/SidebarGroup.vue       |    0
 .../default/ui/sidebar/SidebarGroupAction.vue |    0
 .../ui/sidebar/SidebarGroupContent.vue        |    0
 .../default/ui/sidebar/SidebarGroupLabel.vue  |    0
 .../default/ui/sidebar/SidebarHeader.vue      |    0
 .../default/ui/sidebar/SidebarInput.vue       |    0
 .../default/ui/sidebar/SidebarInset.vue       |    0
 .../default/ui/sidebar/SidebarMenu.vue        |    0
 .../default/ui/sidebar/SidebarMenuAction.vue  |    0
 .../default/ui/sidebar/SidebarMenuBadge.vue   |    0
 .../default/ui/sidebar/SidebarMenuButton.vue  |    0
 .../ui/sidebar/SidebarMenuButtonChild.vue     |    0
 .../default/ui/sidebar/SidebarMenuItem.vue    |    0
 .../ui/sidebar/SidebarMenuSkeleton.vue        |    0
 .../default/ui/sidebar/SidebarMenuSub.vue     |    0
 .../ui/sidebar/SidebarMenuSubButton.vue       |    0
 .../default/ui/sidebar/SidebarMenuSubItem.vue |    0
 .../default/ui/sidebar/SidebarProvider.vue    |    0
 .../default/ui/sidebar/SidebarRail.vue        |    0
 .../default/ui/sidebar/SidebarSeparator.vue   |    0
 .../default/ui/sidebar/SidebarTrigger.vue     |    0
 .../registry/default/ui/sidebar/index.ts      |    0
 .../registry/default/ui/sidebar/utils.ts      |    0
 .../registry/default/ui/skeleton/Skeleton.vue |    0
 .../registry/default/ui/skeleton/index.ts     |    0
 .../registry/default/ui/slider/Slider.vue     |    0
 .../registry/default/ui/slider/index.ts       |    0
 .../registry/default/ui/sonner/Sonner.vue     |    0
 .../registry/default/ui/sonner/index.ts       |    0
 .../registry/default/ui/stepper/Stepper.vue   |    0
 .../default/ui/stepper/StepperDescription.vue |    0
 .../default/ui/stepper/StepperIndicator.vue   |    0
 .../default/ui/stepper/StepperItem.vue        |    0
 .../default/ui/stepper/StepperSeparator.vue   |    0
 .../default/ui/stepper/StepperTitle.vue       |    0
 .../default/ui/stepper/StepperTrigger.vue     |    0
 .../registry/default/ui/stepper/index.ts      |    0
 .../registry/default/ui/switch/Switch.vue     |    0
 .../registry/default/ui/switch/index.ts       |    0
 .../registry/default/ui/table/Table.vue       |    0
 .../registry/default/ui/table/TableBody.vue   |    0
 .../default/ui/table/TableCaption.vue         |    0
 .../registry/default/ui/table/TableCell.vue   |    0
 .../registry/default/ui/table/TableEmpty.vue  |    0
 .../registry/default/ui/table/TableFooter.vue |    0
 .../registry/default/ui/table/TableHead.vue   |    0
 .../registry/default/ui/table/TableHeader.vue |    0
 .../registry/default/ui/table/TableRow.vue    |    0
 .../registry/default/ui/table/index.ts        |    0
 .../registry/default/ui/tabs/Tabs.vue         |    0
 .../registry/default/ui/tabs/TabsContent.vue  |    0
 .../registry/default/ui/tabs/TabsList.vue     |    0
 .../registry/default/ui/tabs/TabsTrigger.vue  |    0
 .../registry/default/ui/tabs/index.ts         |    0
 .../default/ui/tags-input/TagsInput.vue       |    0
 .../default/ui/tags-input/TagsInputInput.vue  |    0
 .../default/ui/tags-input/TagsInputItem.vue   |    0
 .../ui/tags-input/TagsInputItemDelete.vue     |    0
 .../ui/tags-input/TagsInputItemText.vue       |    0
 .../registry/default/ui/tags-input/index.ts   |    0
 .../registry/default/ui/textarea/Textarea.vue |    0
 .../registry/default/ui/textarea/index.ts     |    0
 .../registry/default/ui/toast/Toast.vue       |    0
 .../registry/default/ui/toast/ToastAction.vue |    0
 .../registry/default/ui/toast/ToastClose.vue  |    0
 .../default/ui/toast/ToastDescription.vue     |    0
 .../default/ui/toast/ToastProvider.vue        |    0
 .../registry/default/ui/toast/ToastTitle.vue  |    0
 .../default/ui/toast/ToastViewport.vue        |    0
 .../registry/default/ui/toast/Toaster.vue     |    0
 .../registry/default/ui/toast/index.ts        |    0
 .../registry/default/ui/toast/use-toast.ts    |    0
 .../default/ui/toggle-group/ToggleGroup.vue   |    0
 .../ui/toggle-group/ToggleGroupItem.vue       |    0
 .../registry/default/ui/toggle-group/index.ts |    0
 .../registry/default/ui/toggle/Toggle.vue     |    0
 .../registry/default/ui/toggle/index.ts       |    0
 .../registry/default/ui/tooltip/Tooltip.vue   |    0
 .../default/ui/tooltip/TooltipContent.vue     |    0
 .../default/ui/tooltip/TooltipProvider.vue    |    0
 .../default/ui/tooltip/TooltipTrigger.vue     |    0
 .../registry/default/ui/tooltip/index.ts      |    0
 .../default/ui/v-calendar/Calendar.vue        |    0
 .../registry/default/ui/v-calendar/index.ts   |    0
 apps/www/registry/index.ts                    |   12 +
 .../new-york/block/Authentication01.vue       |    0
 .../new-york/block/Authentication02.vue       |    0
 .../new-york/block/Authentication03.vue       |    0
 .../new-york/block/Authentication04.vue       |    0
 .../registry/new-york/block/Dashboard01.vue   |    0
 .../registry/new-york/block/Dashboard02.vue   |    0
 .../registry/new-york/block/Dashboard03.vue   |    0
 .../registry/new-york/block/Dashboard04.vue   |    0
 .../registry/new-york/block/Dashboard05.vue   |    0
 .../registry/new-york/block/Dashboard06.vue   |    0
 .../registry/new-york/block/Dashboard07.vue   |    0
 .../registry/new-york/block/Sidebar01.vue     |    0
 .../registry/new-york/block/Sidebar07.vue     |    0
 .../new-york/example/AccordionDemo.vue        |    0
 .../registry/new-york/example/AlertDemo.vue   |    0
 .../new-york/example/AlertDestructiveDemo.vue |    0
 .../new-york/example/AlertDialogDemo.vue      |    0
 .../example/AreaChartCustomTooltip.vue        |    0
 .../new-york/example/AreaChartDemo.vue        |    0
 .../new-york/example/AreaChartSparkline.vue   |    0
 .../new-york/example/AspectRatioDemo.vue      |    0
 .../registry/new-york/example/AutoFormApi.vue |    0
 .../new-york/example/AutoFormArray.vue        |    0
 .../new-york/example/AutoFormBasic.vue        |    0
 .../example/AutoFormConfirmPassword.vue       |    0
 .../new-york/example/AutoFormControlled.vue   |    0
 .../new-york/example/AutoFormDependencies.vue |    0
 .../example/AutoFormInputWithoutLabel.vue     |    0
 .../new-york/example/AutoFormSubObject.vue    |    0
 .../registry/new-york/example/AvatarDemo.vue  |    0
 .../registry/new-york/example/BadgeDemo.vue   |    0
 .../new-york/example/BadgeDestructiveDemo.vue |    0
 .../new-york/example/BadgeOutlineDemo.vue     |    0
 .../new-york/example/BadgeSecondaryDemo.vue   |    0
 .../example/BarChartCustomTooltip.vue         |    0
 .../new-york/example/BarChartDemo.vue         |    0
 .../new-york/example/BarChartRounded.vue      |    0
 .../new-york/example/BarChartStacked.vue      |    0
 .../new-york/example/BreadcrumbDemo.vue       |    0
 .../new-york/example/BreadcrumbDropdown.vue   |    0
 .../example/BreadcrumbEllipsisDemo.vue        |    0
 .../new-york/example/BreadcrumbLinkDemo.vue   |    0
 .../new-york/example/BreadcrumbResponsive.vue |    0
 .../example/BreadcrumbSeparatorDemo.vue       |    0
 .../new-york/example/ButtonAsChildDemo.vue    |    0
 .../registry/new-york/example/ButtonDemo.vue  |    0
 .../example/ButtonDestructiveDemo.vue         |    0
 .../new-york/example/ButtonGhostDemo.vue      |    0
 .../new-york/example/ButtonIconDemo.vue       |    0
 .../new-york/example/ButtonLinkDemo.vue       |    0
 .../new-york/example/ButtonLoadingDemo.vue    |    0
 .../new-york/example/ButtonOutlineDemo.vue    |    0
 .../new-york/example/ButtonSecondaryDemo.vue  |    0
 .../new-york/example/ButtonWithIconDemo.vue   |    0
 .../new-york/example/CalendarDemo.vue         |    0
 .../new-york/example/CalendarForm.vue         |    0
 .../new-york/example/CalendarWithSelect.vue   |    0
 .../registry/new-york/example/CardChat.vue    |    0
 .../registry/new-york/example/CardDemo.vue    |    0
 .../new-york/example/CardFormDemo.vue         |    0
 .../registry/new-york/example/CardStats.vue   |    0
 .../new-york/example/CardWithForm.vue         |    0
 .../new-york/example/Cards/ActivityGoal.vue   |    0
 .../new-york/example/Cards/DataTable.vue      |    0
 .../new-york/example/Cards/Metric.vue         |    0
 .../registry/new-york/example/CarouselApi.vue |    0
 .../new-york/example/CarouselDemo.vue         |    0
 .../new-york/example/CarouselOrientation.vue  |    0
 .../new-york/example/CarouselPlugin.vue       |    0
 .../new-york/example/CarouselSize.vue         |    0
 .../new-york/example/CarouselSpacing.vue      |    0
 .../new-york/example/CarouselThumbnails.vue   |    0
 .../new-york/example/CheckboxDemo.vue         |    0
 .../new-york/example/CheckboxDisabled.vue     |    0
 .../new-york/example/CheckboxFormMultiple.vue |    0
 .../new-york/example/CheckboxFormSingle.vue   |    0
 .../new-york/example/CheckboxWithText.vue     |    0
 .../new-york/example/CollapsibleDemo.vue      |    0
 .../new-york/example/ComboboxDemo.vue         |    0
 .../new-york/example/ComboboxDropdownMenu.vue |    0
 .../new-york/example/ComboboxForm.vue         |    0
 .../new-york/example/ComboboxPopover.vue      |    0
 .../new-york/example/ComboboxResponsive.vue   |    0
 .../registry/new-york/example/CommandDemo.vue |    0
 .../new-york/example/CommandDialogDemo.vue    |    0
 .../new-york/example/ContextMenuDemo.vue      |    0
 .../new-york/example/CustomChartTooltip.vue   |    0
 .../example/DataTableColumnPinningDemo.vue    |    0
 .../new-york/example/DataTableDemo.vue        |    0
 .../new-york/example/DataTableDemoColumn.vue  |    0
 .../example/DataTableReactiveDemo.vue         |    0
 .../new-york/example/DatePickerDemo.vue       |    0
 .../new-york/example/DatePickerForm.vue       |    0
 .../DatePickerWithIndependentMonths.vue       |    0
 .../example/DatePickerWithPresets.vue         |    0
 .../new-york/example/DatePickerWithRange.vue  |    0
 .../example/DialogCustomCloseButton.vue       |    0
 .../registry/new-york/example/DialogDemo.vue  |    0
 .../registry/new-york/example/DialogForm.vue  |    0
 .../new-york/example/DialogScrollBodyDemo.vue |    0
 .../example/DialogScrollOverlayDemo.vue       |    0
 .../new-york/example/DonutChartColor.vue      |    0
 .../example/DonutChartCustomTooltip.vue       |    0
 .../new-york/example/DonutChartDemo.vue       |    0
 .../new-york/example/DonutChartPie.vue        |    0
 .../registry/new-york/example/DrawerDemo.vue  |    0
 .../new-york/example/DrawerDialog.vue         |    0
 .../example/DropdownMenuCheckboxes.vue        |    0
 .../new-york/example/DropdownMenuDemo.vue     |    0
 .../example/DropdownMenuRadioGroup.vue        |    0
 .../new-york/example/HoverCardDemo.vue        |    0
 .../registry/new-york/example/InputDemo.vue   |    0
 .../new-york/example/InputDisabled.vue        |    0
 .../registry/new-york/example/InputFile.vue   |    0
 .../registry/new-york/example/InputForm.vue   |    0
 .../new-york/example/InputFormAutoAnimate.vue |    0
 .../new-york/example/InputWithButton.vue      |    0
 .../new-york/example/InputWithIcon.vue        |    0
 .../new-york/example/InputWithLabel.vue       |    0
 .../registry/new-york/example/LabelDemo.vue   |    0
 .../example/LineChartCustomTooltip.vue        |    0
 .../new-york/example/LineChartDemo.vue        |    0
 .../new-york/example/LineChartSparkline.vue   |    0
 .../registry/new-york/example/MenubarDemo.vue |    0
 .../new-york/example/NavigationMenuDemo.vue   |    0
 .../new-york/example/NumberFieldCurrency.vue  |    0
 .../new-york/example/NumberFieldDecimal.vue   |    0
 .../new-york/example/NumberFieldDemo.vue      |    0
 .../new-york/example/NumberFieldDisabled.vue  |    0
 .../new-york/example/NumberFieldForm.vue      |    0
 .../example/NumberFieldPercentage.vue         |    0
 .../new-york/example/PaginationDemo.vue       |    0
 .../new-york/example/PinInputControlled.vue   |    0
 .../new-york/example/PinInputDemo.vue         |    0
 .../new-york/example/PinInputDisabled.vue     |    0
 .../new-york/example/PinInputFormDemo.vue     |    0
 .../example/PinInputSeparatorDemo.vue         |    0
 .../registry/new-york/example/PopoverDemo.vue |    0
 .../new-york/example/ProgressDemo.vue         |    0
 .../new-york/example/RadioGroupDemo.vue       |    0
 .../new-york/example/RadioGroupForm.vue       |    0
 .../new-york/example/RangeCalendarDemo.vue    |    0
 .../new-york/example/ResizableDemo.vue        |    0
 .../new-york/example/ResizableHandleDemo.vue  |    0
 .../example/ResizableVerticalDemo.vue         |    0
 .../new-york/example/ScrollAreaDemo.vue       |    0
 .../example/ScrollAreaHorizontalDemo.vue      |    0
 .../registry/new-york/example/SelectDemo.vue  |    0
 .../registry/new-york/example/SelectForm.vue  |    0
 .../new-york/example/SelectScrollable.vue     |    0
 .../new-york/example/SeparatorDemo.vue        |    0
 .../registry/new-york/example/SheetDemo.vue   |    0
 .../new-york/example/SheetSideDemo.vue        |    0
 .../new-york/example/SkeletonCard.vue         |    0
 .../new-york/example/SkeletonDemo.vue         |    0
 .../registry/new-york/example/SliderDemo.vue  |    0
 .../registry/new-york/example/SliderForm.vue  |    0
 .../registry/new-york/example/SonnerDemo.vue  |    0
 .../new-york/example/SonnerWithDialog.vue     |    0
 .../registry/new-york/example/StepperDemo.vue |    0
 .../registry/new-york/example/StepperForm.vue |    0
 .../new-york/example/StepperHorizental.vue    |    0
 .../new-york/example/StepperVertical.vue      |    0
 .../registry/new-york/example/SwitchDemo.vue  |    0
 .../registry/new-york/example/SwitchForm.vue  |    0
 .../registry/new-york/example/TableDemo.vue   |    0
 .../registry/new-york/example/TabsDemo.vue    |    0
 .../new-york/example/TabsVerticalDemo.vue     |    0
 .../example/TagsInputComboboxDemo.vue         |    0
 .../new-york/example/TagsInputDemo.vue        |    0
 .../new-york/example/TagsInputFormDemo.vue    |    0
 .../new-york/example/TextareaDemo.vue         |    0
 .../new-york/example/TextareaDisabled.vue     |    0
 .../new-york/example/TextareaForm.vue         |    0
 .../new-york/example/TextareaWithButton.vue   |    0
 .../new-york/example/TextareaWithLabel.vue    |    0
 .../new-york/example/TextareaWithText.vue     |    0
 .../registry/new-york/example/ToastDemo.vue   |    0
 .../new-york/example/ToastDestructive.vue     |    0
 .../registry/new-york/example/ToastSimple.vue |    0
 .../new-york/example/ToastWithAction.vue      |    0
 .../new-york/example/ToastWithTitle.vue       |    0
 .../registry/new-york/example/ToggleDemo.vue  |    0
 .../new-york/example/ToggleDisabledDemo.vue   |    0
 .../new-york/example/ToggleGroupDemo.vue      |    0
 .../example/ToggleGroupDisabledDemo.vue       |    0
 .../new-york/example/ToggleGroupLargeDemo.vue |    0
 .../example/ToggleGroupOutlineDemo.vue        |    0
 .../example/ToggleGroupSingleDemo.vue         |    0
 .../new-york/example/ToggleGroupSmallDemo.vue |    0
 .../new-york/example/ToggleItalicDemo.vue     |    0
 .../example/ToggleItalicWithTextDemo.vue      |    0
 .../new-york/example/ToggleLargeDemo.vue      |    0
 .../new-york/example/ToggleSmallDemo.vue      |    0
 .../registry/new-york/example/TooltipDemo.vue |    0
 .../new-york/example/TypographyBlockquote.vue |    0
 .../new-york/example/TypographyDemo.vue       |    0
 .../new-york/example/TypographyH1.vue         |    0
 .../new-york/example/TypographyH2.vue         |    0
 .../new-york/example/TypographyH3.vue         |    0
 .../new-york/example/TypographyH4.vue         |    0
 .../new-york/example/TypographyInlineCode.vue |    0
 .../new-york/example/TypographyLarge.vue      |    0
 .../new-york/example/TypographyLead.vue       |    0
 .../new-york/example/TypographyList.vue       |    0
 .../new-york/example/TypographyMuted.vue      |    0
 .../registry/new-york/example/TypographyP.vue |    0
 .../new-york/example/TypographySmall.vue      |    0
 .../new-york/example/TypographyTable.vue      |    0
 .../new-york/example/VCalendarDemo.vue        |    0
 .../new-york/example/VDatePickerDemo.vue      |    0
 .../new-york/example/VDatePickerForm.vue      |    0
 .../example/VDatePickerWithPresets.vue        |    0
 .../new-york/example/VDatePickerWithRange.vue |    0
 .../new-york/example/VDateTimePickerDemo.vue  |    0
 .../new-york/example/VRangePickerWithSlot.vue |    0
 apps/www/registry/new-york/lib/utils.ts       |   15 +
 .../new-york/ui/accordion/Accordion.vue       |    0
 .../ui/accordion/AccordionContent.vue         |    0
 .../new-york/ui/accordion/AccordionItem.vue   |    0
 .../ui/accordion/AccordionTrigger.vue         |    0
 .../registry/new-york/ui/accordion/index.ts   |    0
 .../new-york/ui/alert-dialog/AlertDialog.vue  |    0
 .../ui/alert-dialog/AlertDialogAction.vue     |    0
 .../ui/alert-dialog/AlertDialogCancel.vue     |    0
 .../ui/alert-dialog/AlertDialogContent.vue    |    0
 .../alert-dialog/AlertDialogDescription.vue   |    0
 .../ui/alert-dialog/AlertDialogFooter.vue     |    0
 .../ui/alert-dialog/AlertDialogHeader.vue     |    0
 .../ui/alert-dialog/AlertDialogTitle.vue      |    0
 .../ui/alert-dialog/AlertDialogTrigger.vue    |    0
 .../new-york/ui/alert-dialog/index.ts         |    0
 .../registry/new-york/ui/alert/Alert.vue      |    0
 .../new-york/ui/alert/AlertDescription.vue    |    0
 .../registry/new-york/ui/alert/AlertTitle.vue |    0
 .../registry/new-york/ui/alert/index.ts       |    0
 .../new-york/ui/aspect-ratio/AspectRatio.vue  |    0
 .../new-york/ui/aspect-ratio/index.ts         |    0
 .../new-york/ui/auto-form/AutoForm.vue        |    0
 .../new-york/ui/auto-form/AutoFormField.vue   |    0
 .../ui/auto-form/AutoFormFieldArray.vue       |    0
 .../ui/auto-form/AutoFormFieldBoolean.vue     |    0
 .../ui/auto-form/AutoFormFieldDate.vue        |    0
 .../ui/auto-form/AutoFormFieldEnum.vue        |    0
 .../ui/auto-form/AutoFormFieldFile.vue        |    0
 .../ui/auto-form/AutoFormFieldInput.vue       |    0
 .../ui/auto-form/AutoFormFieldNumber.vue      |    0
 .../ui/auto-form/AutoFormFieldObject.vue      |    0
 .../new-york/ui/auto-form/AutoFormLabel.vue   |    0
 .../new-york/ui/auto-form/constant.ts         |    0
 .../new-york/ui/auto-form/dependencies.ts     |    0
 .../registry/new-york/ui/auto-form/index.ts   |    0
 .../new-york/ui/auto-form/interface.ts        |    0
 .../registry/new-york/ui/auto-form/utils.ts   |    0
 .../registry/new-york/ui/avatar/Avatar.vue    |    0
 .../new-york/ui/avatar/AvatarFallback.vue     |    0
 .../new-york/ui/avatar/AvatarImage.vue        |    0
 .../registry/new-york/ui/avatar/index.ts      |    0
 .../registry/new-york/ui/badge/Badge.vue      |    0
 .../registry/new-york/ui/badge/index.ts       |    0
 .../new-york/ui/breadcrumb/Breadcrumb.vue     |    0
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |    0
 .../new-york/ui/breadcrumb/BreadcrumbItem.vue |    0
 .../new-york/ui/breadcrumb/BreadcrumbLink.vue |    0
 .../new-york/ui/breadcrumb/BreadcrumbList.vue |    0
 .../new-york/ui/breadcrumb/BreadcrumbPage.vue |    0
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |    0
 .../registry/new-york/ui/breadcrumb/index.ts  |    0
 .../registry/new-york/ui/button/Button.vue    |    0
 .../registry/new-york/ui/button/index.ts      |    0
 .../new-york/ui/calendar/Calendar.vue         |    0
 .../new-york/ui/calendar/CalendarCell.vue     |    0
 .../ui/calendar/CalendarCellTrigger.vue       |    0
 .../new-york/ui/calendar/CalendarGrid.vue     |    0
 .../new-york/ui/calendar/CalendarGridBody.vue |    0
 .../new-york/ui/calendar/CalendarGridHead.vue |    0
 .../new-york/ui/calendar/CalendarGridRow.vue  |    0
 .../new-york/ui/calendar/CalendarHeadCell.vue |    0
 .../new-york/ui/calendar/CalendarHeader.vue   |    0
 .../new-york/ui/calendar/CalendarHeading.vue  |    0
 .../ui/calendar/CalendarNextButton.vue        |    0
 .../ui/calendar/CalendarPrevButton.vue        |    0
 .../registry/new-york/ui/calendar/index.ts    |    0
 .../registry/new-york/ui/card/Card.vue        |    0
 .../registry/new-york/ui/card/CardContent.vue |    0
 .../new-york/ui/card/CardDescription.vue      |    0
 .../registry/new-york/ui/card/CardFooter.vue  |    0
 .../registry/new-york/ui/card/CardHeader.vue  |    0
 .../registry/new-york/ui/card/CardTitle.vue   |    0
 .../registry/new-york/ui/card/index.ts        |    0
 .../new-york/ui/carousel/Carousel.vue         |    0
 .../new-york/ui/carousel/CarouselContent.vue  |    0
 .../new-york/ui/carousel/CarouselItem.vue     |    0
 .../new-york/ui/carousel/CarouselNext.vue     |    0
 .../new-york/ui/carousel/CarouselPrevious.vue |    0
 .../registry/new-york/ui/carousel/index.ts    |    0
 .../new-york/ui/carousel/interface.ts         |    0
 .../new-york/ui/carousel/useCarousel.ts       |    0
 .../new-york/ui/chart-area/AreaChart.vue      |    0
 .../registry/new-york/ui/chart-area/index.ts  |    0
 .../new-york/ui/chart-bar/BarChart.vue        |    0
 .../registry/new-york/ui/chart-bar/index.ts   |    0
 .../new-york/ui/chart-donut/DonutChart.vue    |    0
 .../registry/new-york/ui/chart-donut/index.ts |    0
 .../new-york/ui/chart-line/LineChart.vue      |    0
 .../registry/new-york/ui/chart-line/index.ts  |    0
 .../new-york/ui/chart/ChartCrosshair.vue      |    0
 .../new-york/ui/chart/ChartLegend.vue         |    0
 .../new-york/ui/chart/ChartSingleTooltip.vue  |    0
 .../new-york/ui/chart/ChartTooltip.vue        |    0
 .../registry/new-york/ui/chart/index.ts       |    0
 .../registry/new-york/ui/chart/interface.ts   |    0
 .../new-york/ui/checkbox/Checkbox.vue         |    0
 .../registry/new-york/ui/checkbox/index.ts    |    0
 .../new-york/ui/collapsible/Collapsible.vue   |    0
 .../ui/collapsible/CollapsibleContent.vue     |    0
 .../ui/collapsible/CollapsibleTrigger.vue     |    0
 .../registry/new-york/ui/collapsible/index.ts |    0
 .../registry/new-york/ui/command/Command.vue  |    0
 .../new-york/ui/command/CommandDialog.vue     |    0
 .../new-york/ui/command/CommandEmpty.vue      |    0
 .../new-york/ui/command/CommandGroup.vue      |    0
 .../new-york/ui/command/CommandInput.vue      |    0
 .../new-york/ui/command/CommandItem.vue       |    0
 .../new-york/ui/command/CommandList.vue       |    0
 .../new-york/ui/command/CommandSeparator.vue  |    0
 .../new-york/ui/command/CommandShortcut.vue   |    0
 .../registry/new-york/ui/command/index.ts     |    0
 .../new-york/ui/context-menu/ContextMenu.vue  |    0
 .../context-menu/ContextMenuCheckboxItem.vue  |    0
 .../ui/context-menu/ContextMenuContent.vue    |    0
 .../ui/context-menu/ContextMenuGroup.vue      |    0
 .../ui/context-menu/ContextMenuItem.vue       |    0
 .../ui/context-menu/ContextMenuLabel.vue      |    0
 .../ui/context-menu/ContextMenuPortal.vue     |    0
 .../ui/context-menu/ContextMenuRadioGroup.vue |    0
 .../ui/context-menu/ContextMenuRadioItem.vue  |    0
 .../ui/context-menu/ContextMenuSeparator.vue  |    0
 .../ui/context-menu/ContextMenuShortcut.vue   |    0
 .../ui/context-menu/ContextMenuSub.vue        |    0
 .../ui/context-menu/ContextMenuSubContent.vue |    0
 .../ui/context-menu/ContextMenuSubTrigger.vue |    0
 .../ui/context-menu/ContextMenuTrigger.vue    |    0
 .../new-york/ui/context-menu/index.ts         |    0
 .../registry/new-york/ui/dialog/Dialog.vue    |    0
 .../new-york/ui/dialog/DialogClose.vue        |    0
 .../new-york/ui/dialog/DialogContent.vue      |    0
 .../new-york/ui/dialog/DialogDescription.vue  |    0
 .../new-york/ui/dialog/DialogFooter.vue       |    0
 .../new-york/ui/dialog/DialogHeader.vue       |    0
 .../ui/dialog/DialogScrollContent.vue         |    0
 .../new-york/ui/dialog/DialogTitle.vue        |    0
 .../new-york/ui/dialog/DialogTrigger.vue      |    0
 .../registry/new-york/ui/dialog/index.ts      |    0
 .../registry/new-york/ui/drawer/Drawer.vue    |    0
 .../new-york/ui/drawer/DrawerContent.vue      |    0
 .../new-york/ui/drawer/DrawerDescription.vue  |    0
 .../new-york/ui/drawer/DrawerFooter.vue       |    0
 .../new-york/ui/drawer/DrawerHeader.vue       |    0
 .../new-york/ui/drawer/DrawerOverlay.vue      |    0
 .../new-york/ui/drawer/DrawerTitle.vue        |    0
 .../registry/new-york/ui/drawer/index.ts      |    0
 .../ui/dropdown-menu/DropdownMenu.vue         |    0
 .../DropdownMenuCheckboxItem.vue              |    0
 .../ui/dropdown-menu/DropdownMenuContent.vue  |    0
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |    0
 .../ui/dropdown-menu/DropdownMenuItem.vue     |    0
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |    0
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |    0
 .../dropdown-menu/DropdownMenuRadioItem.vue   |    0
 .../dropdown-menu/DropdownMenuSeparator.vue   |    0
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |    0
 .../ui/dropdown-menu/DropdownMenuSub.vue      |    0
 .../dropdown-menu/DropdownMenuSubContent.vue  |    0
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |    0
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |    0
 .../new-york/ui/dropdown-menu/index.ts        |    0
 .../registry/new-york/ui/form/FormControl.vue |    0
 .../new-york/ui/form/FormDescription.vue      |    0
 .../registry/new-york/ui/form/FormItem.vue    |    0
 .../registry/new-york/ui/form/FormLabel.vue   |    0
 .../registry/new-york/ui/form/FormMessage.vue |    0
 .../registry/new-york/ui/form/index.ts        |    0
 .../new-york/ui/form/injectionKeys.ts         |    0
 .../registry/new-york/ui/form/useFormField.ts |    0
 .../new-york/ui/hover-card/HoverCard.vue      |    0
 .../ui/hover-card/HoverCardContent.vue        |    0
 .../ui/hover-card/HoverCardTrigger.vue        |    0
 .../registry/new-york/ui/hover-card/index.ts  |    0
 .../registry/new-york/ui/input/Input.vue      |    0
 .../registry/new-york/ui/input/index.ts       |    0
 .../registry/new-york/ui/label/Label.vue      |    0
 .../registry/new-york/ui/label/index.ts       |    0
 .../registry/new-york/ui/menubar/Menubar.vue  |    0
 .../ui/menubar/MenubarCheckboxItem.vue        |    0
 .../new-york/ui/menubar/MenubarContent.vue    |    0
 .../new-york/ui/menubar/MenubarGroup.vue      |    0
 .../new-york/ui/menubar/MenubarItem.vue       |    0
 .../new-york/ui/menubar/MenubarLabel.vue      |    0
 .../new-york/ui/menubar/MenubarMenu.vue       |    0
 .../new-york/ui/menubar/MenubarRadioGroup.vue |    0
 .../new-york/ui/menubar/MenubarRadioItem.vue  |    0
 .../new-york/ui/menubar/MenubarSeparator.vue  |    0
 .../new-york/ui/menubar/MenubarShortcut.vue   |    0
 .../new-york/ui/menubar/MenubarSub.vue        |    0
 .../new-york/ui/menubar/MenubarSubContent.vue |    0
 .../new-york/ui/menubar/MenubarSubTrigger.vue |    0
 .../new-york/ui/menubar/MenubarTrigger.vue    |    0
 .../registry/new-york/ui/menubar/index.ts     |    0
 .../ui/navigation-menu/NavigationMenu.vue     |    0
 .../navigation-menu/NavigationMenuContent.vue |    0
 .../NavigationMenuIndicator.vue               |    0
 .../ui/navigation-menu/NavigationMenuItem.vue |    0
 .../ui/navigation-menu/NavigationMenuLink.vue |    0
 .../ui/navigation-menu/NavigationMenuList.vue |    0
 .../navigation-menu/NavigationMenuTrigger.vue |    0
 .../NavigationMenuViewport.vue                |    0
 .../new-york/ui/navigation-menu/index.ts      |    0
 .../new-york/ui/number-field/NumberField.vue  |    0
 .../ui/number-field/NumberFieldContent.vue    |    0
 .../ui/number-field/NumberFieldDecrement.vue  |    0
 .../ui/number-field/NumberFieldIncrement.vue  |    0
 .../ui/number-field/NumberFieldInput.vue      |    0
 .../new-york/ui/number-field/index.ts         |    0
 .../ui/pagination/PaginationEllipsis.vue      |    0
 .../ui/pagination/PaginationFirst.vue         |    0
 .../new-york/ui/pagination/PaginationLast.vue |    0
 .../new-york/ui/pagination/PaginationNext.vue |    0
 .../new-york/ui/pagination/PaginationPrev.vue |    0
 .../registry/new-york/ui/pagination/index.ts  |    0
 .../new-york/ui/pin-input/PinInput.vue        |    0
 .../new-york/ui/pin-input/PinInputGroup.vue   |    0
 .../new-york/ui/pin-input/PinInputInput.vue   |    0
 .../ui/pin-input/PinInputSeparator.vue        |    0
 .../registry/new-york/ui/pin-input/index.ts   |    0
 .../registry/new-york/ui/popover/Popover.vue  |    0
 .../new-york/ui/popover/PopoverContent.vue    |    0
 .../new-york/ui/popover/PopoverTrigger.vue    |    0
 .../registry/new-york/ui/popover/index.ts     |    0
 .../new-york/ui/progress/Progress.vue         |    0
 .../registry/new-york/ui/progress/index.ts    |    0
 .../new-york/ui/radio-group/RadioGroup.vue    |    0
 .../ui/radio-group/RadioGroupItem.vue         |    0
 .../registry/new-york/ui/radio-group/index.ts |    0
 .../ui/range-calendar/RangeCalendar.vue       |    0
 .../ui/range-calendar/RangeCalendarCell.vue   |    0
 .../RangeCalendarCellTrigger.vue              |    0
 .../ui/range-calendar/RangeCalendarGrid.vue   |    0
 .../range-calendar/RangeCalendarGridBody.vue  |    0
 .../range-calendar/RangeCalendarGridHead.vue  |    0
 .../range-calendar/RangeCalendarGridRow.vue   |    0
 .../range-calendar/RangeCalendarHeadCell.vue  |    0
 .../ui/range-calendar/RangeCalendarHeader.vue |    0
 .../range-calendar/RangeCalendarHeading.vue   |    0
 .../RangeCalendarNextButton.vue               |    0
 .../RangeCalendarPrevButton.vue               |    0
 .../new-york/ui/range-calendar/index.ts       |    0
 .../new-york/ui/resizable/ResizableHandle.vue |    0
 .../ui/resizable/ResizablePanelGroup.vue      |    0
 .../registry/new-york/ui/resizable/index.ts   |    0
 .../new-york/ui/scroll-area/ScrollArea.vue    |    0
 .../new-york/ui/scroll-area/ScrollBar.vue     |    0
 .../registry/new-york/ui/scroll-area/index.ts |    0
 .../registry/new-york/ui/select/Select.vue    |    0
 .../new-york/ui/select/SelectContent.vue      |    0
 .../new-york/ui/select/SelectGroup.vue        |    0
 .../new-york/ui/select/SelectItem.vue         |    0
 .../new-york/ui/select/SelectItemText.vue     |    0
 .../new-york/ui/select/SelectLabel.vue        |    0
 .../ui/select/SelectScrollDownButton.vue      |    0
 .../ui/select/SelectScrollUpButton.vue        |    0
 .../new-york/ui/select/SelectSeparator.vue    |    0
 .../new-york/ui/select/SelectTrigger.vue      |    0
 .../new-york/ui/select/SelectValue.vue        |    0
 .../registry/new-york/ui/select/index.ts      |    0
 .../new-york/ui/separator/Separator.vue       |    0
 .../registry/new-york/ui/separator/index.ts   |    0
 .../registry/new-york/ui/sheet/Sheet.vue      |    0
 .../registry/new-york/ui/sheet/SheetClose.vue |    0
 .../new-york/ui/sheet/SheetContent.vue        |    0
 .../new-york/ui/sheet/SheetDescription.vue    |    0
 .../new-york/ui/sheet/SheetFooter.vue         |    0
 .../new-york/ui/sheet/SheetHeader.vue         |    0
 .../registry/new-york/ui/sheet/SheetTitle.vue |    0
 .../new-york/ui/sheet/SheetTrigger.vue        |    0
 .../registry/new-york/ui/sheet/index.ts       |    0
 .../registry/new-york/ui/sidebar/Sidebar.vue  |    0
 .../new-york/ui/sidebar/SidebarContent.vue    |    0
 .../new-york/ui/sidebar/SidebarFooter.vue     |    0
 .../new-york/ui/sidebar/SidebarGroup.vue      |    0
 .../ui/sidebar/SidebarGroupAction.vue         |    0
 .../ui/sidebar/SidebarGroupContent.vue        |    0
 .../new-york/ui/sidebar/SidebarGroupLabel.vue |    0
 .../new-york/ui/sidebar/SidebarHeader.vue     |    0
 .../new-york/ui/sidebar/SidebarInput.vue      |    0
 .../new-york/ui/sidebar/SidebarInset.vue      |    0
 .../new-york/ui/sidebar/SidebarMenu.vue       |    0
 .../new-york/ui/sidebar/SidebarMenuAction.vue |    0
 .../new-york/ui/sidebar/SidebarMenuBadge.vue  |    0
 .../new-york/ui/sidebar/SidebarMenuButton.vue |    0
 .../ui/sidebar/SidebarMenuButtonChild.vue     |    0
 .../new-york/ui/sidebar/SidebarMenuItem.vue   |    0
 .../ui/sidebar/SidebarMenuSkeleton.vue        |    0
 .../new-york/ui/sidebar/SidebarMenuSub.vue    |    0
 .../ui/sidebar/SidebarMenuSubButton.vue       |    0
 .../ui/sidebar/SidebarMenuSubItem.vue         |    0
 .../new-york/ui/sidebar/SidebarProvider.vue   |    0
 .../new-york/ui/sidebar/SidebarRail.vue       |    0
 .../new-york/ui/sidebar/SidebarSeparator.vue  |    0
 .../new-york/ui/sidebar/SidebarTrigger.vue    |    0
 .../registry/new-york/ui/sidebar/index.ts     |    0
 .../registry/new-york/ui/sidebar/utils.ts     |    0
 .../new-york/ui/skeleton/Skeleton.vue         |    0
 .../registry/new-york/ui/skeleton/index.ts    |    0
 .../registry/new-york/ui/slider/Slider.vue    |    0
 .../registry/new-york/ui/slider/index.ts      |    0
 .../registry/new-york/ui/sonner/Sonner.vue    |    0
 .../registry/new-york/ui/sonner/index.ts      |    0
 .../registry/new-york/ui/stepper/Stepper.vue  |    0
 .../ui/stepper/StepperDescription.vue         |    0
 .../new-york/ui/stepper/StepperIndicator.vue  |    0
 .../new-york/ui/stepper/StepperItem.vue       |    0
 .../new-york/ui/stepper/StepperSeparator.vue  |    0
 .../new-york/ui/stepper/StepperTitle.vue      |    0
 .../new-york/ui/stepper/StepperTrigger.vue    |    0
 .../registry/new-york/ui/stepper/index.ts     |    0
 .../registry/new-york/ui/switch/Switch.vue    |    0
 .../registry/new-york/ui/switch/index.ts      |    0
 .../registry/new-york/ui/table/Table.vue      |    0
 .../registry/new-york/ui/table/TableBody.vue  |    0
 .../new-york/ui/table/TableCaption.vue        |    0
 .../registry/new-york/ui/table/TableCell.vue  |    0
 .../registry/new-york/ui/table/TableEmpty.vue |    0
 .../new-york/ui/table/TableFooter.vue         |    0
 .../registry/new-york/ui/table/TableHead.vue  |    0
 .../new-york/ui/table/TableHeader.vue         |    0
 .../registry/new-york/ui/table/TableRow.vue   |    0
 .../registry/new-york/ui/table/index.ts       |    0
 .../registry/new-york/ui/tabs/Tabs.vue        |    0
 .../registry/new-york/ui/tabs/TabsContent.vue |    0
 .../registry/new-york/ui/tabs/TabsList.vue    |    0
 .../registry/new-york/ui/tabs/TabsTrigger.vue |    0
 .../registry/new-york/ui/tabs/index.ts        |    0
 .../new-york/ui/tags-input/TagsInput.vue      |    0
 .../new-york/ui/tags-input/TagsInputInput.vue |    0
 .../new-york/ui/tags-input/TagsInputItem.vue  |    0
 .../ui/tags-input/TagsInputItemDelete.vue     |    0
 .../ui/tags-input/TagsInputItemText.vue       |    0
 .../registry/new-york/ui/tags-input/index.ts  |    0
 .../new-york/ui/textarea/Textarea.vue         |    0
 .../registry/new-york/ui/textarea/index.ts    |    0
 .../registry/new-york/ui/toast/Toast.vue      |    0
 .../new-york/ui/toast/ToastAction.vue         |    0
 .../registry/new-york/ui/toast/ToastClose.vue |    0
 .../new-york/ui/toast/ToastDescription.vue    |    0
 .../new-york/ui/toast/ToastProvider.vue       |    0
 .../registry/new-york/ui/toast/ToastTitle.vue |    0
 .../new-york/ui/toast/ToastViewport.vue       |    0
 .../registry/new-york/ui/toast/Toaster.vue    |    0
 .../registry/new-york/ui/toast/index.ts       |    0
 .../registry/new-york/ui/toast/use-toast.ts   |    0
 .../new-york/ui/toggle-group/ToggleGroup.vue  |    0
 .../ui/toggle-group/ToggleGroupItem.vue       |    0
 .../new-york/ui/toggle-group/index.ts         |    0
 .../registry/new-york/ui/toggle/Toggle.vue    |    0
 .../registry/new-york/ui/toggle/index.ts      |    0
 .../registry/new-york/ui/tooltip/Tooltip.vue  |    0
 .../new-york/ui/tooltip/TooltipContent.vue    |    0
 .../new-york/ui/tooltip/TooltipProvider.vue   |    0
 .../new-york/ui/tooltip/TooltipTrigger.vue    |    0
 .../registry/new-york/ui/tooltip/index.ts     |    0
 .../new-york/ui/v-calendar/Calendar.vue       |    0
 .../registry/new-york/ui/v-calendar/index.ts  |    0
 .../registry-base-colors.ts}                  |  124 +-
 .../colors.ts => registry/registry-colors.ts} |   10 +
 apps/www/registry/registry-icons.ts           |  166 +++
 apps/www/registry/registry-lib.ts             |   15 +
 .../styles.ts => registry/registry-styles.ts} |   11 +-
 apps/www/registry/registry-themes.ts          |  178 +++
 apps/www/registry/schema.ts                   |   91 ++
 apps/www/scripts/build-registry.ts            | 1049 ++++++++++++-----
 apps/www/scripts/fix-import.ts                |   28 +
 apps/www/src/lib/registry/index.ts            |    4 -
 apps/www/src/lib/registry/registry.ts         |  188 ---
 apps/www/src/lib/registry/schema.ts           |   18 -
 eslint.config.js                              |    2 +-
 1162 files changed, 1749 insertions(+), 488 deletions(-)
 create mode 100644 apps/www/registry/.eslintrc.json
 create mode 100644 apps/www/registry/crawl-content.ts
 rename apps/www/{src/lib => }/registry/default/block/Authentication01.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Authentication02.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Authentication03.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Authentication04.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard01.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard02.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard03.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard04.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard05.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard06.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Dashboard07.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Sidebar01.vue (100%)
 rename apps/www/{src/lib => }/registry/default/block/Sidebar07.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AccordionDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AlertDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AlertDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AlertDialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AreaChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AreaChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AreaChartSparkline.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AspectRatioDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormApi.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormArray.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormBasic.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormConfirmPassword.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormControlled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormDependencies.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormInputWithoutLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AutoFormSubObject.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/AvatarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BadgeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BadgeDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BadgeOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BadgeSecondaryDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BarChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BarChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BarChartRounded.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BarChartStacked.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbDropdown.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbEllipsisDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbLinkDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbResponsive.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/BreadcrumbSeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonAsChildDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonGhostDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonIconDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonLinkDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonLoadingDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonSecondaryDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ButtonWithIconDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CalendarForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CalendarWithSelect.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CardChat.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CardDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CardFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CardStats.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CardWithForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/Cards/ActivityGoal.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/Cards/DataTable.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/Cards/Metric.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselApi.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselOrientation.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselPlugin.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselSize.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselSpacing.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CarouselThumbnails.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CheckboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CheckboxDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CheckboxFormMultiple.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CheckboxFormSingle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CheckboxWithText.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CollapsibleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ComboboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ComboboxDropdownMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ComboboxForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ComboboxPopover.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ComboboxResponsive.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CommandDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CommandDialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ContextMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/CustomChartTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DataTableColumnPinningDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DataTableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DataTableDemoColumn.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DataTableReactiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DatePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DatePickerForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DatePickerWithIndependentMonths.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DatePickerWithPresets.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DatePickerWithRange.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DialogCustomCloseButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DialogForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DialogScrollBodyDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DialogScrollOverlayDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DonutChartColor.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DonutChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DonutChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DonutChartPie.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DrawerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DrawerDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DropdownMenuCheckboxes.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DropdownMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/HoverCardDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputFile.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputFormAutoAnimate.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputWithButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputWithIcon.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/InputWithLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/LabelDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/LineChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/LineChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/LineChartSparkline.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/MenubarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NavigationMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldCurrency.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldDecimal.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/NumberFieldPercentage.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PaginationDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PinInputControlled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PinInputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PinInputDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PinInputFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PinInputSeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/PopoverDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ProgressDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/RadioGroupDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/RadioGroupForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/RangeCalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ResizableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ResizableHandleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ResizableVerticalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ScrollAreaDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ScrollAreaHorizontalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SelectDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SelectForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SelectScrollable.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SheetDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SheetSideDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SkeletonCard.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SkeletonDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SliderDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SliderForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SonnerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SonnerWithDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/StepperDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/StepperForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/StepperHorizental.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/StepperVertical.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SwitchDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/SwitchForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TabsDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TabsVerticalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TagsInputComboboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TagsInputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TagsInputFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaWithButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaWithLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TextareaWithText.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToastDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToastDestructive.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToastSimple.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToastWithAction.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToastWithTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleDisabledDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupDisabledDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupLargeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupSingleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleGroupSmallDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleItalicDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleItalicWithTextDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleLargeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/ToggleSmallDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TooltipDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyBlockquote.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyH1.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyH2.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyH3.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyH4.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyInlineCode.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyLarge.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyLead.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyList.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyMuted.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyP.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographySmall.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/TypographyTable.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VCalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VDatePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VDatePickerForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VDatePickerWithPresets.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VDatePickerWithRange.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VDateTimePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/default/example/VRangePickerWithSlot.vue (100%)
 rename apps/www/{src => registry/default}/lib/utils.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/accordion/Accordion.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/accordion/AccordionContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/accordion/AccordionItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/accordion/AccordionTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/accordion/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogAction.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogCancel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/AlertDialogTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert-dialog/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert/Alert.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert/AlertDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert/AlertTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/alert/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/aspect-ratio/AspectRatio.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/aspect-ratio/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoForm.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormField.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldArray.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldBoolean.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldDate.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldEnum.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldFile.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldNumber.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormFieldObject.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/AutoFormLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/constant.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/dependencies.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/auto-form/utils.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/avatar/Avatar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/avatar/AvatarFallback.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/avatar/AvatarImage.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/avatar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/badge/Badge.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/badge/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/Breadcrumb.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbLink.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbList.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbPage.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/breadcrumb/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/button/Button.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/button/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/Calendar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarCell.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarCellTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarGrid.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarGridBody.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarGridHead.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarGridRow.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarHeadCell.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarHeading.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarNextButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/CalendarPrevButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/calendar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/Card.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/CardContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/CardDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/CardFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/CardHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/CardTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/card/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/Carousel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/CarouselContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/CarouselItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/CarouselNext.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/CarouselPrevious.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/carousel/useCarousel.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-area/AreaChart.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-area/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-bar/BarChart.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-bar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-donut/DonutChart.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-donut/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-line/LineChart.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart-line/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/ChartCrosshair.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/ChartLegend.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/ChartSingleTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/ChartTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/chart/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/checkbox/Checkbox.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/checkbox/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/collapsible/Collapsible.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/collapsible/CollapsibleContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/collapsible/CollapsibleTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/collapsible/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/Command.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandEmpty.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandList.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/CommandShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/command/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuPortal.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/ContextMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/context-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/Dialog.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogClose.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogScrollContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/DialogTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dialog/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/Drawer.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerOverlay.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/DrawerTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/drawer/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/dropdown-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/FormControl.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/FormDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/FormItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/FormLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/FormMessage.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/injectionKeys.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/form/useFormField.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/hover-card/HoverCard.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/hover-card/HoverCardContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/hover-card/HoverCardTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/hover-card/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/input/Input.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/label/Label.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/label/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/Menubar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarSub.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/MenubarTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/menubar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuLink.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuList.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/NavigationMenuViewport.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/navigation-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/NumberField.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/NumberFieldContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/NumberFieldDecrement.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/NumberFieldIncrement.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/NumberFieldInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/number-field/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/PaginationEllipsis.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/PaginationFirst.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/PaginationLast.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/PaginationNext.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/PaginationPrev.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pagination/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pin-input/PinInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pin-input/PinInputGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pin-input/PinInputInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pin-input/PinInputSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/pin-input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/popover/Popover.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/popover/PopoverContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/popover/PopoverTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/popover/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/progress/Progress.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/progress/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/radio-group/RadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/radio-group/RadioGroupItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/radio-group/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarCell.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarGrid.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarGridBody.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarGridHead.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarGridRow.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarHeading.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarNextButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/range-calendar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/resizable/ResizableHandle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/resizable/ResizablePanelGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/resizable/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/scroll-area/ScrollArea.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/scroll-area/ScrollBar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/scroll-area/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/Select.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectItemText.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectScrollDownButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectScrollUpButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/SelectValue.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/select/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/separator/Separator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/separator/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/Sheet.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetClose.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/SheetTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sheet/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/Sidebar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarGroupAction.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarGroupContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarGroupLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarInset.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuAction.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuBadge.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuButtonChild.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuSkeleton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuSubButton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarMenuSubItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarRail.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/SidebarTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sidebar/utils.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/skeleton/Skeleton.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/skeleton/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/slider/Slider.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/slider/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sonner/Sonner.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/sonner/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/Stepper.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperIndicator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/StepperTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/stepper/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/switch/Switch.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/switch/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/Table.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableBody.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableCaption.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableCell.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableEmpty.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableHead.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/TableRow.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/table/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tabs/Tabs.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tabs/TabsContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tabs/TabsList.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tabs/TabsTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tabs/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/TagsInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/TagsInputInput.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/TagsInputItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/TagsInputItemDelete.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/TagsInputItemText.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tags-input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/textarea/Textarea.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/textarea/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/Toast.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastAction.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastClose.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/ToastViewport.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/Toaster.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toast/use-toast.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toggle-group/ToggleGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toggle-group/ToggleGroupItem.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toggle-group/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toggle/Toggle.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/toggle/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tooltip/Tooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tooltip/TooltipContent.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tooltip/TooltipProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tooltip/TooltipTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/tooltip/index.ts (100%)
 rename apps/www/{src/lib => }/registry/default/ui/v-calendar/Calendar.vue (100%)
 rename apps/www/{src/lib => }/registry/default/ui/v-calendar/index.ts (100%)
 create mode 100644 apps/www/registry/index.ts
 rename apps/www/{src/lib => }/registry/new-york/block/Authentication01.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Authentication02.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Authentication03.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Authentication04.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard01.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard02.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard03.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard04.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard05.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard06.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Dashboard07.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Sidebar01.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/block/Sidebar07.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AccordionDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AlertDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AlertDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AlertDialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AreaChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AreaChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AreaChartSparkline.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AspectRatioDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormApi.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormArray.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormBasic.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormConfirmPassword.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormControlled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormDependencies.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormInputWithoutLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AutoFormSubObject.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/AvatarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BadgeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BadgeDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BadgeOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BadgeSecondaryDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BarChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BarChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BarChartRounded.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BarChartStacked.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbDropdown.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbEllipsisDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbLinkDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbResponsive.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/BreadcrumbSeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonAsChildDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonDestructiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonGhostDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonIconDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonLinkDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonLoadingDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonSecondaryDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ButtonWithIconDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CalendarForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CalendarWithSelect.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CardChat.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CardDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CardFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CardStats.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CardWithForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/Cards/ActivityGoal.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/Cards/DataTable.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/Cards/Metric.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselApi.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselOrientation.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselPlugin.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselSize.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselSpacing.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CarouselThumbnails.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CheckboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CheckboxDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CheckboxFormMultiple.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CheckboxFormSingle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CheckboxWithText.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CollapsibleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ComboboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ComboboxDropdownMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ComboboxForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ComboboxPopover.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ComboboxResponsive.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CommandDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CommandDialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ContextMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/CustomChartTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DataTableColumnPinningDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DataTableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DataTableDemoColumn.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DataTableReactiveDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DatePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DatePickerForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DatePickerWithIndependentMonths.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DatePickerWithPresets.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DatePickerWithRange.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DialogCustomCloseButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DialogDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DialogForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DialogScrollBodyDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DialogScrollOverlayDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DonutChartColor.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DonutChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DonutChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DonutChartPie.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DrawerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DrawerDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DropdownMenuCheckboxes.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DropdownMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/HoverCardDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputFile.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputFormAutoAnimate.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputWithButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputWithIcon.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/InputWithLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/LabelDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/LineChartCustomTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/LineChartDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/LineChartSparkline.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/MenubarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NavigationMenuDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldCurrency.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldDecimal.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/NumberFieldPercentage.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PaginationDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PinInputControlled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PinInputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PinInputDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PinInputFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PinInputSeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/PopoverDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ProgressDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/RadioGroupDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/RadioGroupForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/RangeCalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ResizableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ResizableHandleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ResizableVerticalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ScrollAreaDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ScrollAreaHorizontalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SelectDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SelectForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SelectScrollable.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SeparatorDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SheetDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SheetSideDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SkeletonCard.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SkeletonDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SliderDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SliderForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SonnerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SonnerWithDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/StepperDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/StepperForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/StepperHorizental.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/StepperVertical.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SwitchDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/SwitchForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TableDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TabsDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TabsVerticalDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TagsInputComboboxDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TagsInputDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TagsInputFormDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaDisabled.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaWithButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaWithLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TextareaWithText.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToastDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToastDestructive.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToastSimple.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToastWithAction.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToastWithTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleDisabledDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupDisabledDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupLargeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupOutlineDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupSingleDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleGroupSmallDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleItalicDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleItalicWithTextDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleLargeDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/ToggleSmallDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TooltipDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyBlockquote.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyH1.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyH2.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyH3.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyH4.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyInlineCode.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyLarge.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyLead.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyList.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyMuted.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyP.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographySmall.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/TypographyTable.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VCalendarDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VDatePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VDatePickerForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VDatePickerWithPresets.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VDatePickerWithRange.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VDateTimePickerDemo.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/example/VRangePickerWithSlot.vue (100%)
 create mode 100644 apps/www/registry/new-york/lib/utils.ts
 rename apps/www/{src/lib => }/registry/new-york/ui/accordion/Accordion.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/accordion/AccordionContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/accordion/AccordionItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/accordion/AccordionTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/accordion/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogAction.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert-dialog/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert/Alert.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert/AlertDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert/AlertTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/alert/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/aspect-ratio/AspectRatio.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/aspect-ratio/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoForm.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormField.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldArray.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldDate.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldFile.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormFieldObject.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/AutoFormLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/constant.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/dependencies.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/auto-form/utils.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/avatar/Avatar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/avatar/AvatarFallback.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/avatar/AvatarImage.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/avatar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/badge/Badge.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/badge/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/Breadcrumb.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbList.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/breadcrumb/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/button/Button.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/button/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/Calendar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarCell.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarCellTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarGrid.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarGridBody.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarGridHead.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarGridRow.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarHeadCell.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarHeading.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarNextButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/CalendarPrevButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/calendar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/Card.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/CardContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/CardDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/CardFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/CardHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/CardTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/card/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/Carousel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/CarouselContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/CarouselItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/CarouselNext.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/CarouselPrevious.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/carousel/useCarousel.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-area/AreaChart.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-area/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-bar/BarChart.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-bar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-donut/DonutChart.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-donut/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-line/LineChart.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart-line/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/ChartCrosshair.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/ChartLegend.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/ChartSingleTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/ChartTooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/chart/interface.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/checkbox/Checkbox.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/checkbox/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/collapsible/Collapsible.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/collapsible/CollapsibleContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/collapsible/CollapsibleTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/collapsible/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/Command.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandDialog.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandEmpty.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandList.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/CommandShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/command/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuPortal.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/ContextMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/context-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/Dialog.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogClose.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogScrollContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/DialogTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dialog/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/Drawer.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerOverlay.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/DrawerTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/drawer/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/dropdown-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/FormControl.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/FormDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/FormItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/FormLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/FormMessage.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/injectionKeys.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/form/useFormField.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/hover-card/HoverCard.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/hover-card/HoverCardContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/hover-card/HoverCardTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/hover-card/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/input/Input.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/label/Label.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/label/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/Menubar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarCheckboxItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarRadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarRadioItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarShortcut.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarSub.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarSubContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarSubTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/MenubarTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/menubar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuList.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/navigation-menu/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/NumberField.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/NumberFieldContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/NumberFieldDecrement.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/NumberFieldIncrement.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/NumberFieldInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/number-field/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/PaginationEllipsis.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/PaginationFirst.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/PaginationLast.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/PaginationNext.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/PaginationPrev.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pagination/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pin-input/PinInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pin-input/PinInputGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pin-input/PinInputInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pin-input/PinInputSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/pin-input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/popover/Popover.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/popover/PopoverContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/popover/PopoverTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/popover/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/progress/Progress.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/progress/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/radio-group/RadioGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/radio-group/RadioGroupItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/radio-group/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarCell.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/range-calendar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/resizable/ResizableHandle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/resizable/ResizablePanelGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/resizable/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/scroll-area/ScrollArea.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/scroll-area/ScrollBar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/scroll-area/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/Select.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectItemText.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectScrollDownButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectScrollUpButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/SelectValue.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/select/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/separator/Separator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/separator/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/Sheet.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetClose.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/SheetTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sheet/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/Sidebar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarGroupAction.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarGroupContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarGroupLabel.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarInset.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenu.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuAction.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuBadge.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuSub.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarRail.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/SidebarTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sidebar/utils.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/skeleton/Skeleton.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/skeleton/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/slider/Slider.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/slider/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sonner/Sonner.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/sonner/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/Stepper.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperIndicator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperSeparator.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/StepperTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/stepper/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/switch/Switch.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/switch/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/Table.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableBody.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableCaption.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableCell.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableEmpty.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableFooter.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableHead.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableHeader.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/TableRow.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/table/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tabs/Tabs.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tabs/TabsContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tabs/TabsList.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tabs/TabsTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tabs/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/TagsInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/TagsInputInput.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/TagsInputItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/TagsInputItemDelete.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/TagsInputItemText.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tags-input/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/textarea/Textarea.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/textarea/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/Toast.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastAction.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastClose.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastDescription.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastTitle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/ToastViewport.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/Toaster.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toast/use-toast.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toggle-group/ToggleGroup.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toggle-group/ToggleGroupItem.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toggle-group/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toggle/Toggle.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/toggle/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tooltip/Tooltip.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tooltip/TooltipContent.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tooltip/TooltipProvider.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tooltip/TooltipTrigger.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/tooltip/index.ts (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/v-calendar/Calendar.vue (100%)
 rename apps/www/{src/lib => }/registry/new-york/ui/v-calendar/index.ts (100%)
 rename apps/www/{src/lib/registry/themes.ts => registry/registry-base-colors.ts} (83%)
 rename apps/www/{src/lib/registry/colors.ts => registry/registry-colors.ts} (99%)
 create mode 100644 apps/www/registry/registry-icons.ts
 create mode 100644 apps/www/registry/registry-lib.ts
 rename apps/www/{src/lib/registry/styles.ts => registry/registry-styles.ts} (62%)
 create mode 100644 apps/www/registry/registry-themes.ts
 create mode 100644 apps/www/registry/schema.ts
 create mode 100644 apps/www/scripts/fix-import.ts
 delete mode 100644 apps/www/src/lib/registry/index.ts
 delete mode 100644 apps/www/src/lib/registry/registry.ts
 delete mode 100644 apps/www/src/lib/registry/schema.ts

diff --git a/apps/www/registry/.eslintrc.json b/apps/www/registry/.eslintrc.json
new file mode 100644
index 000000000..6579e1b26
--- /dev/null
+++ b/apps/www/registry/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}
diff --git a/apps/www/registry/crawl-content.ts b/apps/www/registry/crawl-content.ts
new file mode 100644
index 000000000..0943812c3
--- /dev/null
+++ b/apps/www/registry/crawl-content.ts
@@ -0,0 +1,320 @@
+import type { Registry, RegistryFiles } from './schema'
+import { readdir, readFile } from 'node:fs/promises'
+import { parseSync } from '@oxc-parser/wasm'
+import { join, resolve } from 'pathe'
+import { compileScript, parse } from 'vue/compiler-sfc'
+import { type RegistryStyle, styles } from './registry-styles'
+
+// [Dependency, [...PeerDependencies]]
+const DEPENDENCIES = new Map<string, string[]>([
+  ['@vueuse/core', []],
+  ['vue-sonner', []],
+  ['vaul-vue', []],
+  ['v-calendar', []],
+  ['@tanstack/vue-table', []],
+  ['@unovis/vue', ['@unovis/ts']],
+  ['embla-carousel-vue', []],
+  ['vee-validate', ['@vee-validate/zod', 'zod']],
+])
+// Some dependencies latest tag were not compatible with Vue3.
+const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
+  ['v-calendar', 'v-calendar@next'],
+])
+const REGISTRY_DEPENDENCY = '@/'
+
+type ArrayItem<T> = T extends Array<infer X> ? X : never
+type RegistryItem = ArrayItem<Registry>
+
+export async function buildRegistry() {
+  const registryRootPath = resolve('lib', 'registry')
+  const registry: Registry = []
+
+  for (const { name: style } of styles) {
+    const uiPath = resolve(registryRootPath, style, 'ui')
+    const examplePath = resolve(registryRootPath, style, 'example')
+    const blockPath = resolve(registryRootPath, style, 'block')
+    const hookPath = resolve(registryRootPath, style, 'hook')
+
+    const [ui, example, block, hook] = await Promise.all([
+      crawlUI(uiPath, style),
+      crawlExample(examplePath, style),
+      crawlBlock(blockPath, style),
+      crawlHook(hookPath, style),
+    ])
+
+    registry.push(...ui, ...example, ...block, ...hook)
+  }
+
+  return registry
+}
+
+async function crawlUI(rootPath: string, style: RegistryStyle) {
+  const dir = await readdir(rootPath, { recursive: true, withFileTypes: true })
+
+  const uiRegistry: Registry = []
+
+  for (const dirent of dir) {
+    if (!dirent.isDirectory())
+      continue
+
+    const componentPath = resolve(rootPath, dirent.name)
+    const ui = await buildUIRegistry(componentPath, dirent.name, style)
+    uiRegistry.push(ui)
+  }
+
+  return uiRegistry
+}
+
+async function crawlExample(rootPath: string, style: RegistryStyle) {
+  const type = `registry:example` as const
+
+  const dir = await readdir(rootPath, { withFileTypes: true })
+
+  const registry: Registry = []
+
+  for (const dirent of dir) {
+    if (!dirent.name.endsWith('.vue') || !dirent.isFile())
+      continue
+
+    const [name] = dirent.name.split('.vue')
+
+    const filepath = join(rootPath, dirent.name)
+    const source = await readFile(filepath, { encoding: 'utf8' })
+    const relativePath = join('example', dirent.name)
+
+    const file = {
+      name: dirent.name,
+      content: source,
+      path: relativePath,
+      style,
+      target: dirent.name,
+      type,
+    }
+    const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
+
+    registry.push({
+      name,
+      type,
+      // style,
+      files: [file],
+      registryDependencies: Array.from(registryDependencies),
+      dependencies: Array.from(dependencies),
+    })
+  }
+
+  return registry
+}
+
+async function crawlBlock(rootPath: string, style: RegistryStyle) {
+  const type = `registry:block` as const
+
+  const dir = await readdir(rootPath, { withFileTypes: true })
+
+  const registry: Registry = []
+
+  for (const dirent of dir) {
+    if (!dirent.isFile()) {
+      const result = await buildBlockRegistry(
+        `${rootPath}/${dirent.name}`,
+        dirent.name,
+        style,
+      )
+      registry.push(result)
+      continue
+    }
+    if (!dirent.name.endsWith('.vue') || !dirent.isFile())
+      continue
+
+    const [name] = dirent.name.split('.vue')
+
+    const filepath = join(rootPath, dirent.name)
+    const source = await readFile(filepath, { encoding: 'utf8' })
+    const relativePath = join('example', dirent.name)
+
+    const file = {
+      name: dirent.name,
+      content: source,
+      path: relativePath,
+      style,
+      target: dirent.name,
+      type,
+    }
+    const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
+
+    registry.push({
+      name,
+      type,
+      files: [file],
+      registryDependencies: Array.from(registryDependencies),
+      dependencies: Array.from(dependencies),
+    })
+  }
+
+  return registry
+}
+
+async function crawlHook(rootPath: string, style: RegistryStyle) {
+  const type = `registry:hook` as const
+
+  const dir = await readdir(rootPath, { withFileTypes: true })
+
+  const registry: Registry = []
+
+  for (const dirent of dir) {
+    if (!dirent.isFile())
+      continue
+
+    const [name] = dirent.name.split('.vue.ts')
+
+    const filepath = join(rootPath, dirent.name)
+    const source = await readFile(filepath, { encoding: 'utf8' })
+    const relativePath = join('hook', dirent.name)
+
+    const file = {
+      name: dirent.name,
+      content: source,
+      path: relativePath,
+      style,
+      target: dirent.name,
+      type,
+    }
+    const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
+
+    registry.push({
+      name,
+      type,
+      files: [file],
+      registryDependencies: Array.from(registryDependencies),
+      dependencies: Array.from(dependencies),
+    })
+  }
+
+  return registry
+}
+
+async function buildUIRegistry(componentPath: string, componentName: string, style: RegistryStyle) {
+  const dir = await readdir(componentPath, {
+    withFileTypes: true,
+  })
+
+  const files: RegistryFiles[] = []
+  const dependencies = new Set<string>()
+  const registryDependencies = new Set<string>()
+  const type = 'registry:ui'
+
+  for (const dirent of dir) {
+    if (!dirent.isFile())
+      continue
+
+    const filepath = join(componentPath, dirent.name)
+    const relativePath = join('ui', componentName, dirent.name)
+    const source = await readFile(filepath, { encoding: 'utf8' })
+    const target = `${componentName}/${dirent.name}`
+
+    files.push({ content: source, path: relativePath, type, target })
+
+    // only grab deps from the vue files
+    if (dirent.name === 'index.ts')
+      continue
+
+    const deps = await getFileDependencies(filepath, source)
+    if (!deps)
+      continue
+
+    deps.dependencies.forEach(dep => dependencies.add(dep))
+    deps.registryDependencies.forEach(dep => registryDependencies.add(dep))
+  }
+
+  return {
+    name: componentName,
+    type,
+    files,
+    registryDependencies: Array.from(registryDependencies),
+    dependencies: Array.from(dependencies),
+  } satisfies RegistryItem
+}
+
+async function buildBlockRegistry(blockPath: string, blockName: string, style: RegistryStyle) {
+  const dir = await readdir(blockPath, { withFileTypes: true, recursive: true })
+
+  const files: RegistryFiles[] = []
+  const dependencies = new Set<string>()
+  const registryDependencies = new Set<string>()
+
+  for (const dirent of dir) {
+    if (!dirent.isFile())
+      continue
+    const isPage = dirent.name === '+page.vue'
+    const type = isPage ? 'registry:page' : 'registry:component'
+
+    // TODO: fix
+    const compPath = isPage ? dirent.name : `components/${dirent.name}`
+    const filepath = join(blockPath, compPath)
+    const relativePath = join('block', blockName, compPath)
+    const source = await readFile(filepath, { encoding: 'utf8' })
+    const target = isPage ? `${blockName}Page.vue` : dirent.name
+
+    files.push({ content: source, path: relativePath, type, target })
+
+    const deps = await getFileDependencies(filepath, source)
+    if (!deps)
+      continue
+
+    deps.dependencies.forEach(dep => dependencies.add(dep))
+    deps.registryDependencies.forEach(dep => registryDependencies.add(dep))
+  }
+
+  return {
+    type: 'registry:block',
+    files,
+    name: blockName,
+    registryDependencies: Array.from(registryDependencies),
+    dependencies: Array.from(dependencies),
+  } satisfies RegistryItem
+}
+
+async function getFileDependencies(filename: string, sourceCode: string) {
+  const registryDependencies = new Set<string>()
+  const dependencies = new Set<string>()
+
+  const populateDeps = (source: string) => {
+    const peerDeps = DEPENDENCIES.get(source)
+    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
+    if (peerDeps !== undefined) {
+      if (taggedDeps !== undefined)
+        dependencies.add(taggedDeps)
+      else
+        dependencies.add(source)
+      peerDeps.forEach(dep => dependencies.add(dep))
+    }
+
+    if (source.startsWith(REGISTRY_DEPENDENCY)) {
+      const component = source.split('/').at(-1)!
+      registryDependencies.add(component)
+    }
+  }
+
+  if (filename.endsWith('.ts')) {
+    const ast = parseSync(sourceCode, {
+      sourceType: 'module',
+      sourceFilename: filename,
+    })
+
+    const sources = ast.program.body.filter((i: any) => i.type === 'ImportDeclaration').map((i: any) => i.source)
+    sources.forEach((source: any) => {
+      populateDeps(source.value)
+    })
+  }
+  else {
+    const parsed = parse(sourceCode, { filename })
+    if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
+      const compiled = compileScript(parsed.descriptor, { id: '' })
+
+      Object.values(compiled.imports!).forEach((value) => {
+        populateDeps(value.source)
+      })
+    }
+  }
+
+  return { registryDependencies, dependencies }
+}
diff --git a/apps/www/src/lib/registry/default/block/Authentication01.vue b/apps/www/registry/default/block/Authentication01.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Authentication01.vue
rename to apps/www/registry/default/block/Authentication01.vue
diff --git a/apps/www/src/lib/registry/default/block/Authentication02.vue b/apps/www/registry/default/block/Authentication02.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Authentication02.vue
rename to apps/www/registry/default/block/Authentication02.vue
diff --git a/apps/www/src/lib/registry/default/block/Authentication03.vue b/apps/www/registry/default/block/Authentication03.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Authentication03.vue
rename to apps/www/registry/default/block/Authentication03.vue
diff --git a/apps/www/src/lib/registry/default/block/Authentication04.vue b/apps/www/registry/default/block/Authentication04.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Authentication04.vue
rename to apps/www/registry/default/block/Authentication04.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard01.vue b/apps/www/registry/default/block/Dashboard01.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard01.vue
rename to apps/www/registry/default/block/Dashboard01.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard02.vue b/apps/www/registry/default/block/Dashboard02.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard02.vue
rename to apps/www/registry/default/block/Dashboard02.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard03.vue b/apps/www/registry/default/block/Dashboard03.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard03.vue
rename to apps/www/registry/default/block/Dashboard03.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard04.vue b/apps/www/registry/default/block/Dashboard04.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard04.vue
rename to apps/www/registry/default/block/Dashboard04.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/registry/default/block/Dashboard05.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard05.vue
rename to apps/www/registry/default/block/Dashboard05.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/registry/default/block/Dashboard06.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard06.vue
rename to apps/www/registry/default/block/Dashboard06.vue
diff --git a/apps/www/src/lib/registry/default/block/Dashboard07.vue b/apps/www/registry/default/block/Dashboard07.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Dashboard07.vue
rename to apps/www/registry/default/block/Dashboard07.vue
diff --git a/apps/www/src/lib/registry/default/block/Sidebar01.vue b/apps/www/registry/default/block/Sidebar01.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Sidebar01.vue
rename to apps/www/registry/default/block/Sidebar01.vue
diff --git a/apps/www/src/lib/registry/default/block/Sidebar07.vue b/apps/www/registry/default/block/Sidebar07.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/block/Sidebar07.vue
rename to apps/www/registry/default/block/Sidebar07.vue
diff --git a/apps/www/src/lib/registry/default/example/AccordionDemo.vue b/apps/www/registry/default/example/AccordionDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AccordionDemo.vue
rename to apps/www/registry/default/example/AccordionDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AlertDemo.vue b/apps/www/registry/default/example/AlertDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AlertDemo.vue
rename to apps/www/registry/default/example/AlertDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue b/apps/www/registry/default/example/AlertDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
rename to apps/www/registry/default/example/AlertDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AlertDialogDemo.vue b/apps/www/registry/default/example/AlertDialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AlertDialogDemo.vue
rename to apps/www/registry/default/example/AlertDialogDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue b/apps/www/registry/default/example/AreaChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
rename to apps/www/registry/default/example/AreaChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/default/example/AreaChartDemo.vue b/apps/www/registry/default/example/AreaChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AreaChartDemo.vue
rename to apps/www/registry/default/example/AreaChartDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue b/apps/www/registry/default/example/AreaChartSparkline.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
rename to apps/www/registry/default/example/AreaChartSparkline.vue
diff --git a/apps/www/src/lib/registry/default/example/AspectRatioDemo.vue b/apps/www/registry/default/example/AspectRatioDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AspectRatioDemo.vue
rename to apps/www/registry/default/example/AspectRatioDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormApi.vue b/apps/www/registry/default/example/AutoFormApi.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormApi.vue
rename to apps/www/registry/default/example/AutoFormApi.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormArray.vue b/apps/www/registry/default/example/AutoFormArray.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormArray.vue
rename to apps/www/registry/default/example/AutoFormArray.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormBasic.vue b/apps/www/registry/default/example/AutoFormBasic.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormBasic.vue
rename to apps/www/registry/default/example/AutoFormBasic.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue b/apps/www/registry/default/example/AutoFormConfirmPassword.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue
rename to apps/www/registry/default/example/AutoFormConfirmPassword.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormControlled.vue b/apps/www/registry/default/example/AutoFormControlled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormControlled.vue
rename to apps/www/registry/default/example/AutoFormControlled.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormDependencies.vue b/apps/www/registry/default/example/AutoFormDependencies.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormDependencies.vue
rename to apps/www/registry/default/example/AutoFormDependencies.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue b/apps/www/registry/default/example/AutoFormInputWithoutLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue
rename to apps/www/registry/default/example/AutoFormInputWithoutLabel.vue
diff --git a/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue b/apps/www/registry/default/example/AutoFormSubObject.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
rename to apps/www/registry/default/example/AutoFormSubObject.vue
diff --git a/apps/www/src/lib/registry/default/example/AvatarDemo.vue b/apps/www/registry/default/example/AvatarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/AvatarDemo.vue
rename to apps/www/registry/default/example/AvatarDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BadgeDemo.vue b/apps/www/registry/default/example/BadgeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BadgeDemo.vue
rename to apps/www/registry/default/example/BadgeDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue b/apps/www/registry/default/example/BadgeDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue
rename to apps/www/registry/default/example/BadgeDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue b/apps/www/registry/default/example/BadgeOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue
rename to apps/www/registry/default/example/BadgeOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue b/apps/www/registry/default/example/BadgeSecondaryDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue
rename to apps/www/registry/default/example/BadgeSecondaryDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue b/apps/www/registry/default/example/BarChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
rename to apps/www/registry/default/example/BarChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/default/example/BarChartDemo.vue b/apps/www/registry/default/example/BarChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BarChartDemo.vue
rename to apps/www/registry/default/example/BarChartDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BarChartRounded.vue b/apps/www/registry/default/example/BarChartRounded.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BarChartRounded.vue
rename to apps/www/registry/default/example/BarChartRounded.vue
diff --git a/apps/www/src/lib/registry/default/example/BarChartStacked.vue b/apps/www/registry/default/example/BarChartStacked.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BarChartStacked.vue
rename to apps/www/registry/default/example/BarChartStacked.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue b/apps/www/registry/default/example/BreadcrumbDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue
rename to apps/www/registry/default/example/BreadcrumbDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue b/apps/www/registry/default/example/BreadcrumbDropdown.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue
rename to apps/www/registry/default/example/BreadcrumbDropdown.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue b/apps/www/registry/default/example/BreadcrumbEllipsisDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue
rename to apps/www/registry/default/example/BreadcrumbEllipsisDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue b/apps/www/registry/default/example/BreadcrumbLinkDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue
rename to apps/www/registry/default/example/BreadcrumbLinkDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue b/apps/www/registry/default/example/BreadcrumbResponsive.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue
rename to apps/www/registry/default/example/BreadcrumbResponsive.vue
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue b/apps/www/registry/default/example/BreadcrumbSeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue
rename to apps/www/registry/default/example/BreadcrumbSeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue b/apps/www/registry/default/example/ButtonAsChildDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue
rename to apps/www/registry/default/example/ButtonAsChildDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonDemo.vue b/apps/www/registry/default/example/ButtonDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonDemo.vue
rename to apps/www/registry/default/example/ButtonDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue b/apps/www/registry/default/example/ButtonDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue
rename to apps/www/registry/default/example/ButtonDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue b/apps/www/registry/default/example/ButtonGhostDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue
rename to apps/www/registry/default/example/ButtonGhostDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/registry/default/example/ButtonIconDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
rename to apps/www/registry/default/example/ButtonIconDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue b/apps/www/registry/default/example/ButtonLinkDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue
rename to apps/www/registry/default/example/ButtonLinkDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue b/apps/www/registry/default/example/ButtonLoadingDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
rename to apps/www/registry/default/example/ButtonLoadingDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue b/apps/www/registry/default/example/ButtonOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue
rename to apps/www/registry/default/example/ButtonOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue b/apps/www/registry/default/example/ButtonSecondaryDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue
rename to apps/www/registry/default/example/ButtonSecondaryDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue b/apps/www/registry/default/example/ButtonWithIconDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
rename to apps/www/registry/default/example/ButtonWithIconDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CalendarDemo.vue b/apps/www/registry/default/example/CalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CalendarDemo.vue
rename to apps/www/registry/default/example/CalendarDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/registry/default/example/CalendarForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CalendarForm.vue
rename to apps/www/registry/default/example/CalendarForm.vue
diff --git a/apps/www/src/lib/registry/default/example/CalendarWithSelect.vue b/apps/www/registry/default/example/CalendarWithSelect.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CalendarWithSelect.vue
rename to apps/www/registry/default/example/CalendarWithSelect.vue
diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/registry/default/example/CardChat.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CardChat.vue
rename to apps/www/registry/default/example/CardChat.vue
diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/registry/default/example/CardDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CardDemo.vue
rename to apps/www/registry/default/example/CardDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CardFormDemo.vue b/apps/www/registry/default/example/CardFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CardFormDemo.vue
rename to apps/www/registry/default/example/CardFormDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/registry/default/example/CardStats.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CardStats.vue
rename to apps/www/registry/default/example/CardStats.vue
diff --git a/apps/www/src/lib/registry/default/example/CardWithForm.vue b/apps/www/registry/default/example/CardWithForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CardWithForm.vue
rename to apps/www/registry/default/example/CardWithForm.vue
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/registry/default/example/Cards/ActivityGoal.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
rename to apps/www/registry/default/example/Cards/ActivityGoal.vue
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/registry/default/example/Cards/DataTable.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/Cards/DataTable.vue
rename to apps/www/registry/default/example/Cards/DataTable.vue
diff --git a/apps/www/src/lib/registry/default/example/Cards/Metric.vue b/apps/www/registry/default/example/Cards/Metric.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/Cards/Metric.vue
rename to apps/www/registry/default/example/Cards/Metric.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/registry/default/example/CarouselApi.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselApi.vue
rename to apps/www/registry/default/example/CarouselApi.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselDemo.vue b/apps/www/registry/default/example/CarouselDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselDemo.vue
rename to apps/www/registry/default/example/CarouselDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/registry/default/example/CarouselOrientation.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselOrientation.vue
rename to apps/www/registry/default/example/CarouselOrientation.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue b/apps/www/registry/default/example/CarouselPlugin.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselPlugin.vue
rename to apps/www/registry/default/example/CarouselPlugin.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselSize.vue b/apps/www/registry/default/example/CarouselSize.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselSize.vue
rename to apps/www/registry/default/example/CarouselSize.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/registry/default/example/CarouselSpacing.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselSpacing.vue
rename to apps/www/registry/default/example/CarouselSpacing.vue
diff --git a/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue b/apps/www/registry/default/example/CarouselThumbnails.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
rename to apps/www/registry/default/example/CarouselThumbnails.vue
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue b/apps/www/registry/default/example/CheckboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CheckboxDemo.vue
rename to apps/www/registry/default/example/CheckboxDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue b/apps/www/registry/default/example/CheckboxDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
rename to apps/www/registry/default/example/CheckboxDisabled.vue
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/registry/default/example/CheckboxFormMultiple.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
rename to apps/www/registry/default/example/CheckboxFormMultiple.vue
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue b/apps/www/registry/default/example/CheckboxFormSingle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
rename to apps/www/registry/default/example/CheckboxFormSingle.vue
diff --git a/apps/www/src/lib/registry/default/example/CheckboxWithText.vue b/apps/www/registry/default/example/CheckboxWithText.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CheckboxWithText.vue
rename to apps/www/registry/default/example/CheckboxWithText.vue
diff --git a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue b/apps/www/registry/default/example/CollapsibleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
rename to apps/www/registry/default/example/CollapsibleDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/registry/default/example/ComboboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ComboboxDemo.vue
rename to apps/www/registry/default/example/ComboboxDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/registry/default/example/ComboboxDropdownMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
rename to apps/www/registry/default/example/ComboboxDropdownMenu.vue
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/registry/default/example/ComboboxForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ComboboxForm.vue
rename to apps/www/registry/default/example/ComboboxForm.vue
diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/registry/default/example/ComboboxPopover.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ComboboxPopover.vue
rename to apps/www/registry/default/example/ComboboxPopover.vue
diff --git a/apps/www/src/lib/registry/default/example/ComboboxResponsive.vue b/apps/www/registry/default/example/ComboboxResponsive.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ComboboxResponsive.vue
rename to apps/www/registry/default/example/ComboboxResponsive.vue
diff --git a/apps/www/src/lib/registry/default/example/CommandDemo.vue b/apps/www/registry/default/example/CommandDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CommandDemo.vue
rename to apps/www/registry/default/example/CommandDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue b/apps/www/registry/default/example/CommandDialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
rename to apps/www/registry/default/example/CommandDialogDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ContextMenuDemo.vue b/apps/www/registry/default/example/ContextMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ContextMenuDemo.vue
rename to apps/www/registry/default/example/ContextMenuDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue b/apps/www/registry/default/example/CustomChartTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
rename to apps/www/registry/default/example/CustomChartTooltip.vue
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/registry/default/example/DataTableColumnPinningDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
rename to apps/www/registry/default/example/DataTableColumnPinningDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/registry/default/example/DataTableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DataTableDemo.vue
rename to apps/www/registry/default/example/DataTableDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemoColumn.vue b/apps/www/registry/default/example/DataTableDemoColumn.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DataTableDemoColumn.vue
rename to apps/www/registry/default/example/DataTableDemoColumn.vue
diff --git a/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue b/apps/www/registry/default/example/DataTableReactiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
rename to apps/www/registry/default/example/DataTableReactiveDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/registry/default/example/DatePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DatePickerDemo.vue
rename to apps/www/registry/default/example/DatePickerDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/registry/default/example/DatePickerForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DatePickerForm.vue
rename to apps/www/registry/default/example/DatePickerForm.vue
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue b/apps/www/registry/default/example/DatePickerWithIndependentMonths.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
rename to apps/www/registry/default/example/DatePickerWithIndependentMonths.vue
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/registry/default/example/DatePickerWithPresets.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
rename to apps/www/registry/default/example/DatePickerWithPresets.vue
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/registry/default/example/DatePickerWithRange.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
rename to apps/www/registry/default/example/DatePickerWithRange.vue
diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/registry/default/example/DialogCustomCloseButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
rename to apps/www/registry/default/example/DialogCustomCloseButton.vue
diff --git a/apps/www/src/lib/registry/default/example/DialogDemo.vue b/apps/www/registry/default/example/DialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DialogDemo.vue
rename to apps/www/registry/default/example/DialogDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DialogForm.vue b/apps/www/registry/default/example/DialogForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DialogForm.vue
rename to apps/www/registry/default/example/DialogForm.vue
diff --git a/apps/www/src/lib/registry/default/example/DialogScrollBodyDemo.vue b/apps/www/registry/default/example/DialogScrollBodyDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DialogScrollBodyDemo.vue
rename to apps/www/registry/default/example/DialogScrollBodyDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DialogScrollOverlayDemo.vue b/apps/www/registry/default/example/DialogScrollOverlayDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DialogScrollOverlayDemo.vue
rename to apps/www/registry/default/example/DialogScrollOverlayDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DonutChartColor.vue b/apps/www/registry/default/example/DonutChartColor.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DonutChartColor.vue
rename to apps/www/registry/default/example/DonutChartColor.vue
diff --git a/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue b/apps/www/registry/default/example/DonutChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
rename to apps/www/registry/default/example/DonutChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/default/example/DonutChartDemo.vue b/apps/www/registry/default/example/DonutChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DonutChartDemo.vue
rename to apps/www/registry/default/example/DonutChartDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DonutChartPie.vue b/apps/www/registry/default/example/DonutChartPie.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DonutChartPie.vue
rename to apps/www/registry/default/example/DonutChartPie.vue
diff --git a/apps/www/src/lib/registry/default/example/DrawerDemo.vue b/apps/www/registry/default/example/DrawerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DrawerDemo.vue
rename to apps/www/registry/default/example/DrawerDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/registry/default/example/DrawerDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DrawerDialog.vue
rename to apps/www/registry/default/example/DrawerDialog.vue
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/registry/default/example/DropdownMenuCheckboxes.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
rename to apps/www/registry/default/example/DropdownMenuCheckboxes.vue
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue b/apps/www/registry/default/example/DropdownMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
rename to apps/www/registry/default/example/DropdownMenuDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue b/apps/www/registry/default/example/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
rename to apps/www/registry/default/example/DropdownMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/registry/default/example/HoverCardDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/HoverCardDemo.vue
rename to apps/www/registry/default/example/HoverCardDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/InputDemo.vue b/apps/www/registry/default/example/InputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputDemo.vue
rename to apps/www/registry/default/example/InputDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/InputDisabled.vue b/apps/www/registry/default/example/InputDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputDisabled.vue
rename to apps/www/registry/default/example/InputDisabled.vue
diff --git a/apps/www/src/lib/registry/default/example/InputFile.vue b/apps/www/registry/default/example/InputFile.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputFile.vue
rename to apps/www/registry/default/example/InputFile.vue
diff --git a/apps/www/src/lib/registry/default/example/InputForm.vue b/apps/www/registry/default/example/InputForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputForm.vue
rename to apps/www/registry/default/example/InputForm.vue
diff --git a/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue b/apps/www/registry/default/example/InputFormAutoAnimate.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
rename to apps/www/registry/default/example/InputFormAutoAnimate.vue
diff --git a/apps/www/src/lib/registry/default/example/InputWithButton.vue b/apps/www/registry/default/example/InputWithButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputWithButton.vue
rename to apps/www/registry/default/example/InputWithButton.vue
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/registry/default/example/InputWithIcon.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputWithIcon.vue
rename to apps/www/registry/default/example/InputWithIcon.vue
diff --git a/apps/www/src/lib/registry/default/example/InputWithLabel.vue b/apps/www/registry/default/example/InputWithLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/InputWithLabel.vue
rename to apps/www/registry/default/example/InputWithLabel.vue
diff --git a/apps/www/src/lib/registry/default/example/LabelDemo.vue b/apps/www/registry/default/example/LabelDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/LabelDemo.vue
rename to apps/www/registry/default/example/LabelDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue b/apps/www/registry/default/example/LineChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
rename to apps/www/registry/default/example/LineChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/default/example/LineChartDemo.vue b/apps/www/registry/default/example/LineChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/LineChartDemo.vue
rename to apps/www/registry/default/example/LineChartDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/LineChartSparkline.vue b/apps/www/registry/default/example/LineChartSparkline.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/LineChartSparkline.vue
rename to apps/www/registry/default/example/LineChartSparkline.vue
diff --git a/apps/www/src/lib/registry/default/example/MenubarDemo.vue b/apps/www/registry/default/example/MenubarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/MenubarDemo.vue
rename to apps/www/registry/default/example/MenubarDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue b/apps/www/registry/default/example/NavigationMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
rename to apps/www/registry/default/example/NavigationMenuDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue b/apps/www/registry/default/example/NumberFieldCurrency.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
rename to apps/www/registry/default/example/NumberFieldCurrency.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue b/apps/www/registry/default/example/NumberFieldDecimal.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
rename to apps/www/registry/default/example/NumberFieldDecimal.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue b/apps/www/registry/default/example/NumberFieldDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
rename to apps/www/registry/default/example/NumberFieldDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue b/apps/www/registry/default/example/NumberFieldDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
rename to apps/www/registry/default/example/NumberFieldDisabled.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldForm.vue b/apps/www/registry/default/example/NumberFieldForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldForm.vue
rename to apps/www/registry/default/example/NumberFieldForm.vue
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue b/apps/www/registry/default/example/NumberFieldPercentage.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
rename to apps/www/registry/default/example/NumberFieldPercentage.vue
diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/registry/default/example/PaginationDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PaginationDemo.vue
rename to apps/www/registry/default/example/PaginationDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/PinInputControlled.vue b/apps/www/registry/default/example/PinInputControlled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PinInputControlled.vue
rename to apps/www/registry/default/example/PinInputControlled.vue
diff --git a/apps/www/src/lib/registry/default/example/PinInputDemo.vue b/apps/www/registry/default/example/PinInputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PinInputDemo.vue
rename to apps/www/registry/default/example/PinInputDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/PinInputDisabled.vue b/apps/www/registry/default/example/PinInputDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PinInputDisabled.vue
rename to apps/www/registry/default/example/PinInputDisabled.vue
diff --git a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue b/apps/www/registry/default/example/PinInputFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
rename to apps/www/registry/default/example/PinInputFormDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue b/apps/www/registry/default/example/PinInputSeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
rename to apps/www/registry/default/example/PinInputSeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/PopoverDemo.vue b/apps/www/registry/default/example/PopoverDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/PopoverDemo.vue
rename to apps/www/registry/default/example/PopoverDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ProgressDemo.vue b/apps/www/registry/default/example/ProgressDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ProgressDemo.vue
rename to apps/www/registry/default/example/ProgressDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue b/apps/www/registry/default/example/RadioGroupDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
rename to apps/www/registry/default/example/RadioGroupDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue b/apps/www/registry/default/example/RadioGroupForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/RadioGroupForm.vue
rename to apps/www/registry/default/example/RadioGroupForm.vue
diff --git a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue b/apps/www/registry/default/example/RangeCalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
rename to apps/www/registry/default/example/RangeCalendarDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ResizableDemo.vue b/apps/www/registry/default/example/ResizableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ResizableDemo.vue
rename to apps/www/registry/default/example/ResizableDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue b/apps/www/registry/default/example/ResizableHandleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
rename to apps/www/registry/default/example/ResizableHandleDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue b/apps/www/registry/default/example/ResizableVerticalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
rename to apps/www/registry/default/example/ResizableVerticalDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaDemo.vue b/apps/www/registry/default/example/ScrollAreaDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ScrollAreaDemo.vue
rename to apps/www/registry/default/example/ScrollAreaDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/registry/default/example/ScrollAreaHorizontalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
rename to apps/www/registry/default/example/ScrollAreaHorizontalDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SelectDemo.vue b/apps/www/registry/default/example/SelectDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SelectDemo.vue
rename to apps/www/registry/default/example/SelectDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SelectForm.vue b/apps/www/registry/default/example/SelectForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SelectForm.vue
rename to apps/www/registry/default/example/SelectForm.vue
diff --git a/apps/www/src/lib/registry/default/example/SelectScrollable.vue b/apps/www/registry/default/example/SelectScrollable.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SelectScrollable.vue
rename to apps/www/registry/default/example/SelectScrollable.vue
diff --git a/apps/www/src/lib/registry/default/example/SeparatorDemo.vue b/apps/www/registry/default/example/SeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SeparatorDemo.vue
rename to apps/www/registry/default/example/SeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SheetDemo.vue b/apps/www/registry/default/example/SheetDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SheetDemo.vue
rename to apps/www/registry/default/example/SheetDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SheetSideDemo.vue b/apps/www/registry/default/example/SheetSideDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SheetSideDemo.vue
rename to apps/www/registry/default/example/SheetSideDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SkeletonCard.vue b/apps/www/registry/default/example/SkeletonCard.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SkeletonCard.vue
rename to apps/www/registry/default/example/SkeletonCard.vue
diff --git a/apps/www/src/lib/registry/default/example/SkeletonDemo.vue b/apps/www/registry/default/example/SkeletonDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SkeletonDemo.vue
rename to apps/www/registry/default/example/SkeletonDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SliderDemo.vue b/apps/www/registry/default/example/SliderDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SliderDemo.vue
rename to apps/www/registry/default/example/SliderDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SliderForm.vue b/apps/www/registry/default/example/SliderForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SliderForm.vue
rename to apps/www/registry/default/example/SliderForm.vue
diff --git a/apps/www/src/lib/registry/default/example/SonnerDemo.vue b/apps/www/registry/default/example/SonnerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SonnerDemo.vue
rename to apps/www/registry/default/example/SonnerDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SonnerWithDialog.vue b/apps/www/registry/default/example/SonnerWithDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SonnerWithDialog.vue
rename to apps/www/registry/default/example/SonnerWithDialog.vue
diff --git a/apps/www/src/lib/registry/default/example/StepperDemo.vue b/apps/www/registry/default/example/StepperDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/StepperDemo.vue
rename to apps/www/registry/default/example/StepperDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/StepperForm.vue b/apps/www/registry/default/example/StepperForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/StepperForm.vue
rename to apps/www/registry/default/example/StepperForm.vue
diff --git a/apps/www/src/lib/registry/default/example/StepperHorizental.vue b/apps/www/registry/default/example/StepperHorizental.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/StepperHorizental.vue
rename to apps/www/registry/default/example/StepperHorizental.vue
diff --git a/apps/www/src/lib/registry/default/example/StepperVertical.vue b/apps/www/registry/default/example/StepperVertical.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/StepperVertical.vue
rename to apps/www/registry/default/example/StepperVertical.vue
diff --git a/apps/www/src/lib/registry/default/example/SwitchDemo.vue b/apps/www/registry/default/example/SwitchDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SwitchDemo.vue
rename to apps/www/registry/default/example/SwitchDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/SwitchForm.vue b/apps/www/registry/default/example/SwitchForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/SwitchForm.vue
rename to apps/www/registry/default/example/SwitchForm.vue
diff --git a/apps/www/src/lib/registry/default/example/TableDemo.vue b/apps/www/registry/default/example/TableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TableDemo.vue
rename to apps/www/registry/default/example/TableDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TabsDemo.vue b/apps/www/registry/default/example/TabsDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TabsDemo.vue
rename to apps/www/registry/default/example/TabsDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue b/apps/www/registry/default/example/TabsVerticalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue
rename to apps/www/registry/default/example/TabsVerticalDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/registry/default/example/TagsInputComboboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
rename to apps/www/registry/default/example/TagsInputComboboxDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TagsInputDemo.vue b/apps/www/registry/default/example/TagsInputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TagsInputDemo.vue
rename to apps/www/registry/default/example/TagsInputDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue b/apps/www/registry/default/example/TagsInputFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue
rename to apps/www/registry/default/example/TagsInputFormDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaDemo.vue b/apps/www/registry/default/example/TextareaDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaDemo.vue
rename to apps/www/registry/default/example/TextareaDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaDisabled.vue b/apps/www/registry/default/example/TextareaDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaDisabled.vue
rename to apps/www/registry/default/example/TextareaDisabled.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaForm.vue b/apps/www/registry/default/example/TextareaForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaForm.vue
rename to apps/www/registry/default/example/TextareaForm.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithButton.vue b/apps/www/registry/default/example/TextareaWithButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaWithButton.vue
rename to apps/www/registry/default/example/TextareaWithButton.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue b/apps/www/registry/default/example/TextareaWithLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
rename to apps/www/registry/default/example/TextareaWithLabel.vue
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithText.vue b/apps/www/registry/default/example/TextareaWithText.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TextareaWithText.vue
rename to apps/www/registry/default/example/TextareaWithText.vue
diff --git a/apps/www/src/lib/registry/default/example/ToastDemo.vue b/apps/www/registry/default/example/ToastDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToastDemo.vue
rename to apps/www/registry/default/example/ToastDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToastDestructive.vue b/apps/www/registry/default/example/ToastDestructive.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToastDestructive.vue
rename to apps/www/registry/default/example/ToastDestructive.vue
diff --git a/apps/www/src/lib/registry/default/example/ToastSimple.vue b/apps/www/registry/default/example/ToastSimple.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToastSimple.vue
rename to apps/www/registry/default/example/ToastSimple.vue
diff --git a/apps/www/src/lib/registry/default/example/ToastWithAction.vue b/apps/www/registry/default/example/ToastWithAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToastWithAction.vue
rename to apps/www/registry/default/example/ToastWithAction.vue
diff --git a/apps/www/src/lib/registry/default/example/ToastWithTitle.vue b/apps/www/registry/default/example/ToastWithTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToastWithTitle.vue
rename to apps/www/registry/default/example/ToastWithTitle.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleDemo.vue b/apps/www/registry/default/example/ToggleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleDemo.vue
rename to apps/www/registry/default/example/ToggleDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue b/apps/www/registry/default/example/ToggleDisabledDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
rename to apps/www/registry/default/example/ToggleDisabledDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue b/apps/www/registry/default/example/ToggleGroupDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue
rename to apps/www/registry/default/example/ToggleGroupDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue b/apps/www/registry/default/example/ToggleGroupDisabledDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue
rename to apps/www/registry/default/example/ToggleGroupDisabledDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue b/apps/www/registry/default/example/ToggleGroupLargeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue
rename to apps/www/registry/default/example/ToggleGroupLargeDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue b/apps/www/registry/default/example/ToggleGroupOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue
rename to apps/www/registry/default/example/ToggleGroupOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue b/apps/www/registry/default/example/ToggleGroupSingleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue
rename to apps/www/registry/default/example/ToggleGroupSingleDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue b/apps/www/registry/default/example/ToggleGroupSmallDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue
rename to apps/www/registry/default/example/ToggleGroupSmallDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue b/apps/www/registry/default/example/ToggleItalicDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
rename to apps/www/registry/default/example/ToggleItalicDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue b/apps/www/registry/default/example/ToggleItalicWithTextDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
rename to apps/www/registry/default/example/ToggleItalicWithTextDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue b/apps/www/registry/default/example/ToggleLargeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
rename to apps/www/registry/default/example/ToggleLargeDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue b/apps/www/registry/default/example/ToggleSmallDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
rename to apps/www/registry/default/example/ToggleSmallDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TooltipDemo.vue b/apps/www/registry/default/example/TooltipDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TooltipDemo.vue
rename to apps/www/registry/default/example/TooltipDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue b/apps/www/registry/default/example/TypographyBlockquote.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyBlockquote.vue
rename to apps/www/registry/default/example/TypographyBlockquote.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/registry/default/example/TypographyDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyDemo.vue
rename to apps/www/registry/default/example/TypographyDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyH1.vue b/apps/www/registry/default/example/TypographyH1.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyH1.vue
rename to apps/www/registry/default/example/TypographyH1.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyH2.vue b/apps/www/registry/default/example/TypographyH2.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyH2.vue
rename to apps/www/registry/default/example/TypographyH2.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyH3.vue b/apps/www/registry/default/example/TypographyH3.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyH3.vue
rename to apps/www/registry/default/example/TypographyH3.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyH4.vue b/apps/www/registry/default/example/TypographyH4.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyH4.vue
rename to apps/www/registry/default/example/TypographyH4.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyInlineCode.vue b/apps/www/registry/default/example/TypographyInlineCode.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyInlineCode.vue
rename to apps/www/registry/default/example/TypographyInlineCode.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyLarge.vue b/apps/www/registry/default/example/TypographyLarge.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyLarge.vue
rename to apps/www/registry/default/example/TypographyLarge.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyLead.vue b/apps/www/registry/default/example/TypographyLead.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyLead.vue
rename to apps/www/registry/default/example/TypographyLead.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyList.vue b/apps/www/registry/default/example/TypographyList.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyList.vue
rename to apps/www/registry/default/example/TypographyList.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyMuted.vue b/apps/www/registry/default/example/TypographyMuted.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyMuted.vue
rename to apps/www/registry/default/example/TypographyMuted.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyP.vue b/apps/www/registry/default/example/TypographyP.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyP.vue
rename to apps/www/registry/default/example/TypographyP.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographySmall.vue b/apps/www/registry/default/example/TypographySmall.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographySmall.vue
rename to apps/www/registry/default/example/TypographySmall.vue
diff --git a/apps/www/src/lib/registry/default/example/TypographyTable.vue b/apps/www/registry/default/example/TypographyTable.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/TypographyTable.vue
rename to apps/www/registry/default/example/TypographyTable.vue
diff --git a/apps/www/src/lib/registry/default/example/VCalendarDemo.vue b/apps/www/registry/default/example/VCalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VCalendarDemo.vue
rename to apps/www/registry/default/example/VCalendarDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue b/apps/www/registry/default/example/VDatePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
rename to apps/www/registry/default/example/VDatePickerDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerForm.vue b/apps/www/registry/default/example/VDatePickerForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VDatePickerForm.vue
rename to apps/www/registry/default/example/VDatePickerForm.vue
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue b/apps/www/registry/default/example/VDatePickerWithPresets.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
rename to apps/www/registry/default/example/VDatePickerWithPresets.vue
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue b/apps/www/registry/default/example/VDatePickerWithRange.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
rename to apps/www/registry/default/example/VDatePickerWithRange.vue
diff --git a/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue b/apps/www/registry/default/example/VDateTimePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
rename to apps/www/registry/default/example/VDateTimePickerDemo.vue
diff --git a/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue b/apps/www/registry/default/example/VRangePickerWithSlot.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
rename to apps/www/registry/default/example/VRangePickerWithSlot.vue
diff --git a/apps/www/src/lib/utils.ts b/apps/www/registry/default/lib/utils.ts
similarity index 100%
rename from apps/www/src/lib/utils.ts
rename to apps/www/registry/default/lib/utils.ts
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/registry/default/ui/accordion/Accordion.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
rename to apps/www/registry/default/ui/accordion/Accordion.vue
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/registry/default/ui/accordion/AccordionContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
rename to apps/www/registry/default/ui/accordion/AccordionContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/registry/default/ui/accordion/AccordionItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
rename to apps/www/registry/default/ui/accordion/AccordionItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/registry/default/ui/accordion/AccordionTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
rename to apps/www/registry/default/ui/accordion/AccordionTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/accordion/index.ts b/apps/www/registry/default/ui/accordion/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/accordion/index.ts
rename to apps/www/registry/default/ui/accordion/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialog.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogAction.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogCancel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogCancel.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
rename to apps/www/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts b/apps/www/registry/default/ui/alert-dialog/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
rename to apps/www/registry/default/ui/alert-dialog/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/registry/default/ui/alert/Alert.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert/Alert.vue
rename to apps/www/registry/default/ui/alert/Alert.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue b/apps/www/registry/default/ui/alert/AlertDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
rename to apps/www/registry/default/ui/alert/AlertDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue b/apps/www/registry/default/ui/alert/AlertTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
rename to apps/www/registry/default/ui/alert/AlertTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/registry/default/ui/alert/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/alert/index.ts
rename to apps/www/registry/default/ui/alert/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue b/apps/www/registry/default/ui/aspect-ratio/AspectRatio.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
rename to apps/www/registry/default/ui/aspect-ratio/AspectRatio.vue
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/index.ts b/apps/www/registry/default/ui/aspect-ratio/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/aspect-ratio/index.ts
rename to apps/www/registry/default/ui/aspect-ratio/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoForm.vue b/apps/www/registry/default/ui/auto-form/AutoForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoForm.vue
rename to apps/www/registry/default/ui/auto-form/AutoForm.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue b/apps/www/registry/default/ui/auto-form/AutoFormField.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormField.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldArray.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldArray.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldDate.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldDate.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldEnum.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldEnum.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldFile.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldFile.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldNumber.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldNumber.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue b/apps/www/registry/default/ui/auto-form/AutoFormFieldObject.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormFieldObject.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormLabel.vue b/apps/www/registry/default/ui/auto-form/AutoFormLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/AutoFormLabel.vue
rename to apps/www/registry/default/ui/auto-form/AutoFormLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/constant.ts b/apps/www/registry/default/ui/auto-form/constant.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/constant.ts
rename to apps/www/registry/default/ui/auto-form/constant.ts
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts b/apps/www/registry/default/ui/auto-form/dependencies.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/dependencies.ts
rename to apps/www/registry/default/ui/auto-form/dependencies.ts
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/index.ts b/apps/www/registry/default/ui/auto-form/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/index.ts
rename to apps/www/registry/default/ui/auto-form/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/interface.ts b/apps/www/registry/default/ui/auto-form/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/interface.ts
rename to apps/www/registry/default/ui/auto-form/interface.ts
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/utils.ts b/apps/www/registry/default/ui/auto-form/utils.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/auto-form/utils.ts
rename to apps/www/registry/default/ui/auto-form/utils.ts
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/registry/default/ui/avatar/Avatar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
rename to apps/www/registry/default/ui/avatar/Avatar.vue
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue b/apps/www/registry/default/ui/avatar/AvatarFallback.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
rename to apps/www/registry/default/ui/avatar/AvatarFallback.vue
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue b/apps/www/registry/default/ui/avatar/AvatarImage.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
rename to apps/www/registry/default/ui/avatar/AvatarImage.vue
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/registry/default/ui/avatar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/avatar/index.ts
rename to apps/www/registry/default/ui/avatar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/registry/default/ui/badge/Badge.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/badge/Badge.vue
rename to apps/www/registry/default/ui/badge/Badge.vue
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/registry/default/ui/badge/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/badge/index.ts
rename to apps/www/registry/default/ui/badge/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue b/apps/www/registry/default/ui/breadcrumb/Breadcrumb.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue
rename to apps/www/registry/default/ui/breadcrumb/Breadcrumb.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbLink.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbLink.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbList.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbList.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbPage.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbPage.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
rename to apps/www/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts b/apps/www/registry/default/ui/breadcrumb/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
rename to apps/www/registry/default/ui/breadcrumb/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/registry/default/ui/button/Button.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/button/Button.vue
rename to apps/www/registry/default/ui/button/Button.vue
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/registry/default/ui/button/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/button/index.ts
rename to apps/www/registry/default/ui/button/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/registry/default/ui/calendar/Calendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
rename to apps/www/registry/default/ui/calendar/Calendar.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue b/apps/www/registry/default/ui/calendar/CalendarCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarCell.vue
rename to apps/www/registry/default/ui/calendar/CalendarCell.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue b/apps/www/registry/default/ui/calendar/CalendarCellTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarCellTrigger.vue
rename to apps/www/registry/default/ui/calendar/CalendarCellTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue b/apps/www/registry/default/ui/calendar/CalendarGrid.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
rename to apps/www/registry/default/ui/calendar/CalendarGrid.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue b/apps/www/registry/default/ui/calendar/CalendarGridBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarGridBody.vue
rename to apps/www/registry/default/ui/calendar/CalendarGridBody.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue b/apps/www/registry/default/ui/calendar/CalendarGridHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarGridHead.vue
rename to apps/www/registry/default/ui/calendar/CalendarGridHead.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue b/apps/www/registry/default/ui/calendar/CalendarGridRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
rename to apps/www/registry/default/ui/calendar/CalendarGridRow.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue b/apps/www/registry/default/ui/calendar/CalendarHeadCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
rename to apps/www/registry/default/ui/calendar/CalendarHeadCell.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue b/apps/www/registry/default/ui/calendar/CalendarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
rename to apps/www/registry/default/ui/calendar/CalendarHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue b/apps/www/registry/default/ui/calendar/CalendarHeading.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
rename to apps/www/registry/default/ui/calendar/CalendarHeading.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue b/apps/www/registry/default/ui/calendar/CalendarNextButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
rename to apps/www/registry/default/ui/calendar/CalendarNextButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue b/apps/www/registry/default/ui/calendar/CalendarPrevButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
rename to apps/www/registry/default/ui/calendar/CalendarPrevButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/calendar/index.ts b/apps/www/registry/default/ui/calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/calendar/index.ts
rename to apps/www/registry/default/ui/calendar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/card/Card.vue b/apps/www/registry/default/ui/card/Card.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/Card.vue
rename to apps/www/registry/default/ui/card/Card.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/CardContent.vue b/apps/www/registry/default/ui/card/CardContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/CardContent.vue
rename to apps/www/registry/default/ui/card/CardContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue b/apps/www/registry/default/ui/card/CardDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/CardDescription.vue
rename to apps/www/registry/default/ui/card/CardDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue b/apps/www/registry/default/ui/card/CardFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/CardFooter.vue
rename to apps/www/registry/default/ui/card/CardFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue b/apps/www/registry/default/ui/card/CardHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/CardHeader.vue
rename to apps/www/registry/default/ui/card/CardHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue b/apps/www/registry/default/ui/card/CardTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/CardTitle.vue
rename to apps/www/registry/default/ui/card/CardTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/card/index.ts b/apps/www/registry/default/ui/card/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/card/index.ts
rename to apps/www/registry/default/ui/card/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/registry/default/ui/carousel/Carousel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
rename to apps/www/registry/default/ui/carousel/Carousel.vue
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/registry/default/ui/carousel/CarouselContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
rename to apps/www/registry/default/ui/carousel/CarouselContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/registry/default/ui/carousel/CarouselItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
rename to apps/www/registry/default/ui/carousel/CarouselItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/registry/default/ui/carousel/CarouselNext.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
rename to apps/www/registry/default/ui/carousel/CarouselNext.vue
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/registry/default/ui/carousel/CarouselPrevious.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
rename to apps/www/registry/default/ui/carousel/CarouselPrevious.vue
diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/registry/default/ui/carousel/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/index.ts
rename to apps/www/registry/default/ui/carousel/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/registry/default/ui/carousel/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/interface.ts
rename to apps/www/registry/default/ui/carousel/interface.ts
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/registry/default/ui/carousel/useCarousel.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
rename to apps/www/registry/default/ui/carousel/useCarousel.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/registry/default/ui/chart-area/AreaChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
rename to apps/www/registry/default/ui/chart-area/AreaChart.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/index.ts b/apps/www/registry/default/ui/chart-area/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-area/index.ts
rename to apps/www/registry/default/ui/chart-area/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/registry/default/ui/chart-bar/BarChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
rename to apps/www/registry/default/ui/chart-bar/BarChart.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/index.ts b/apps/www/registry/default/ui/chart-bar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-bar/index.ts
rename to apps/www/registry/default/ui/chart-bar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/registry/default/ui/chart-donut/DonutChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
rename to apps/www/registry/default/ui/chart-donut/DonutChart.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/index.ts b/apps/www/registry/default/ui/chart-donut/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-donut/index.ts
rename to apps/www/registry/default/ui/chart-donut/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue b/apps/www/registry/default/ui/chart-line/LineChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
rename to apps/www/registry/default/ui/chart-line/LineChart.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/index.ts b/apps/www/registry/default/ui/chart-line/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart-line/index.ts
rename to apps/www/registry/default/ui/chart-line/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/registry/default/ui/chart/ChartCrosshair.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
rename to apps/www/registry/default/ui/chart/ChartCrosshair.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue b/apps/www/registry/default/ui/chart/ChartLegend.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
rename to apps/www/registry/default/ui/chart/ChartLegend.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue b/apps/www/registry/default/ui/chart/ChartSingleTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
rename to apps/www/registry/default/ui/chart/ChartSingleTooltip.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue b/apps/www/registry/default/ui/chart/ChartTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue
rename to apps/www/registry/default/ui/chart/ChartTooltip.vue
diff --git a/apps/www/src/lib/registry/default/ui/chart/index.ts b/apps/www/registry/default/ui/chart/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/index.ts
rename to apps/www/registry/default/ui/chart/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/chart/interface.ts b/apps/www/registry/default/ui/chart/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/chart/interface.ts
rename to apps/www/registry/default/ui/chart/interface.ts
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/registry/default/ui/checkbox/Checkbox.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
rename to apps/www/registry/default/ui/checkbox/Checkbox.vue
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/index.ts b/apps/www/registry/default/ui/checkbox/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/checkbox/index.ts
rename to apps/www/registry/default/ui/checkbox/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/registry/default/ui/collapsible/Collapsible.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
rename to apps/www/registry/default/ui/collapsible/Collapsible.vue
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue b/apps/www/registry/default/ui/collapsible/CollapsibleContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
rename to apps/www/registry/default/ui/collapsible/CollapsibleContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue b/apps/www/registry/default/ui/collapsible/CollapsibleTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
rename to apps/www/registry/default/ui/collapsible/CollapsibleTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/index.ts b/apps/www/registry/default/ui/collapsible/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/collapsible/index.ts
rename to apps/www/registry/default/ui/collapsible/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/command/Command.vue b/apps/www/registry/default/ui/command/Command.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/Command.vue
rename to apps/www/registry/default/ui/command/Command.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/registry/default/ui/command/CommandDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
rename to apps/www/registry/default/ui/command/CommandDialog.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue b/apps/www/registry/default/ui/command/CommandEmpty.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
rename to apps/www/registry/default/ui/command/CommandEmpty.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue b/apps/www/registry/default/ui/command/CommandGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
rename to apps/www/registry/default/ui/command/CommandGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/registry/default/ui/command/CommandInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandInput.vue
rename to apps/www/registry/default/ui/command/CommandInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue b/apps/www/registry/default/ui/command/CommandItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandItem.vue
rename to apps/www/registry/default/ui/command/CommandItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/registry/default/ui/command/CommandList.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandList.vue
rename to apps/www/registry/default/ui/command/CommandList.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue b/apps/www/registry/default/ui/command/CommandSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
rename to apps/www/registry/default/ui/command/CommandSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue b/apps/www/registry/default/ui/command/CommandShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
rename to apps/www/registry/default/ui/command/CommandShortcut.vue
diff --git a/apps/www/src/lib/registry/default/ui/command/index.ts b/apps/www/registry/default/ui/command/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/command/index.ts
rename to apps/www/registry/default/ui/command/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue b/apps/www/registry/default/ui/context-menu/ContextMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenu.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/registry/default/ui/context-menu/ContextMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue b/apps/www/registry/default/ui/context-menu/ContextMenuGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/registry/default/ui/context-menu/ContextMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/registry/default/ui/context-menu/ContextMenuLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue b/apps/www/registry/default/ui/context-menu/ContextMenuPortal.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuPortal.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuPortal.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/registry/default/ui/context-menu/ContextMenuRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuRadioItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/registry/default/ui/context-menu/ContextMenuSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/registry/default/ui/context-menu/ContextMenuShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuShortcut.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue b/apps/www/registry/default/ui/context-menu/ContextMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuSub.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/registry/default/ui/context-menu/ContextMenuSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuSubContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue b/apps/www/registry/default/ui/context-menu/ContextMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
rename to apps/www/registry/default/ui/context-menu/ContextMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/index.ts b/apps/www/registry/default/ui/context-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/context-menu/index.ts
rename to apps/www/registry/default/ui/context-menu/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue b/apps/www/registry/default/ui/dialog/Dialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
rename to apps/www/registry/default/ui/dialog/Dialog.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue b/apps/www/registry/default/ui/dialog/DialogClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogClose.vue
rename to apps/www/registry/default/ui/dialog/DialogClose.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/registry/default/ui/dialog/DialogContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
rename to apps/www/registry/default/ui/dialog/DialogContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue b/apps/www/registry/default/ui/dialog/DialogDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
rename to apps/www/registry/default/ui/dialog/DialogDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue b/apps/www/registry/default/ui/dialog/DialogFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
rename to apps/www/registry/default/ui/dialog/DialogFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/registry/default/ui/dialog/DialogHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
rename to apps/www/registry/default/ui/dialog/DialogHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/registry/default/ui/dialog/DialogScrollContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
rename to apps/www/registry/default/ui/dialog/DialogScrollContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue b/apps/www/registry/default/ui/dialog/DialogTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
rename to apps/www/registry/default/ui/dialog/DialogTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue b/apps/www/registry/default/ui/dialog/DialogTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
rename to apps/www/registry/default/ui/dialog/DialogTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/dialog/index.ts b/apps/www/registry/default/ui/dialog/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dialog/index.ts
rename to apps/www/registry/default/ui/dialog/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue b/apps/www/registry/default/ui/drawer/Drawer.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
rename to apps/www/registry/default/ui/drawer/Drawer.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue b/apps/www/registry/default/ui/drawer/DrawerContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
rename to apps/www/registry/default/ui/drawer/DrawerContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue b/apps/www/registry/default/ui/drawer/DrawerDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue
rename to apps/www/registry/default/ui/drawer/DrawerDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerFooter.vue b/apps/www/registry/default/ui/drawer/DrawerFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerFooter.vue
rename to apps/www/registry/default/ui/drawer/DrawerFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue b/apps/www/registry/default/ui/drawer/DrawerHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
rename to apps/www/registry/default/ui/drawer/DrawerHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue b/apps/www/registry/default/ui/drawer/DrawerOverlay.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
rename to apps/www/registry/default/ui/drawer/DrawerOverlay.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue b/apps/www/registry/default/ui/drawer/DrawerTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue
rename to apps/www/registry/default/ui/drawer/DrawerTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/drawer/index.ts b/apps/www/registry/default/ui/drawer/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/drawer/index.ts
rename to apps/www/registry/default/ui/drawer/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenu.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
rename to apps/www/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts b/apps/www/registry/default/ui/dropdown-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
rename to apps/www/registry/default/ui/dropdown-menu/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/form/FormControl.vue b/apps/www/registry/default/ui/form/FormControl.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/FormControl.vue
rename to apps/www/registry/default/ui/form/FormControl.vue
diff --git a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue b/apps/www/registry/default/ui/form/FormDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/FormDescription.vue
rename to apps/www/registry/default/ui/form/FormDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/registry/default/ui/form/FormItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/FormItem.vue
rename to apps/www/registry/default/ui/form/FormItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/registry/default/ui/form/FormLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/FormLabel.vue
rename to apps/www/registry/default/ui/form/FormLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/form/FormMessage.vue b/apps/www/registry/default/ui/form/FormMessage.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/FormMessage.vue
rename to apps/www/registry/default/ui/form/FormMessage.vue
diff --git a/apps/www/src/lib/registry/default/ui/form/index.ts b/apps/www/registry/default/ui/form/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/index.ts
rename to apps/www/registry/default/ui/form/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/form/injectionKeys.ts b/apps/www/registry/default/ui/form/injectionKeys.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/injectionKeys.ts
rename to apps/www/registry/default/ui/form/injectionKeys.ts
diff --git a/apps/www/src/lib/registry/default/ui/form/useFormField.ts b/apps/www/registry/default/ui/form/useFormField.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/form/useFormField.ts
rename to apps/www/registry/default/ui/form/useFormField.ts
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue b/apps/www/registry/default/ui/hover-card/HoverCard.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
rename to apps/www/registry/default/ui/hover-card/HoverCard.vue
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/registry/default/ui/hover-card/HoverCardContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
rename to apps/www/registry/default/ui/hover-card/HoverCardContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue b/apps/www/registry/default/ui/hover-card/HoverCardTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
rename to apps/www/registry/default/ui/hover-card/HoverCardTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/index.ts b/apps/www/registry/default/ui/hover-card/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/hover-card/index.ts
rename to apps/www/registry/default/ui/hover-card/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/registry/default/ui/input/Input.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/input/Input.vue
rename to apps/www/registry/default/ui/input/Input.vue
diff --git a/apps/www/src/lib/registry/default/ui/input/index.ts b/apps/www/registry/default/ui/input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/input/index.ts
rename to apps/www/registry/default/ui/input/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/registry/default/ui/label/Label.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/label/Label.vue
rename to apps/www/registry/default/ui/label/Label.vue
diff --git a/apps/www/src/lib/registry/default/ui/label/index.ts b/apps/www/registry/default/ui/label/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/label/index.ts
rename to apps/www/registry/default/ui/label/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue b/apps/www/registry/default/ui/menubar/Menubar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
rename to apps/www/registry/default/ui/menubar/Menubar.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/registry/default/ui/menubar/MenubarCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
rename to apps/www/registry/default/ui/menubar/MenubarCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/registry/default/ui/menubar/MenubarContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
rename to apps/www/registry/default/ui/menubar/MenubarContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue b/apps/www/registry/default/ui/menubar/MenubarGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
rename to apps/www/registry/default/ui/menubar/MenubarGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/registry/default/ui/menubar/MenubarItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
rename to apps/www/registry/default/ui/menubar/MenubarItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/registry/default/ui/menubar/MenubarLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
rename to apps/www/registry/default/ui/menubar/MenubarLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue b/apps/www/registry/default/ui/menubar/MenubarMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
rename to apps/www/registry/default/ui/menubar/MenubarMenu.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue b/apps/www/registry/default/ui/menubar/MenubarRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
rename to apps/www/registry/default/ui/menubar/MenubarRadioGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/registry/default/ui/menubar/MenubarRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
rename to apps/www/registry/default/ui/menubar/MenubarRadioItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue b/apps/www/registry/default/ui/menubar/MenubarSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
rename to apps/www/registry/default/ui/menubar/MenubarSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/registry/default/ui/menubar/MenubarShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
rename to apps/www/registry/default/ui/menubar/MenubarShortcut.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue b/apps/www/registry/default/ui/menubar/MenubarSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
rename to apps/www/registry/default/ui/menubar/MenubarSub.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/registry/default/ui/menubar/MenubarSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
rename to apps/www/registry/default/ui/menubar/MenubarSubContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/registry/default/ui/menubar/MenubarSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
rename to apps/www/registry/default/ui/menubar/MenubarSubTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue b/apps/www/registry/default/ui/menubar/MenubarTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
rename to apps/www/registry/default/ui/menubar/MenubarTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/menubar/index.ts b/apps/www/registry/default/ui/menubar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/menubar/index.ts
rename to apps/www/registry/default/ui/menubar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenu.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuLink.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuLink.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuList.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuList.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
rename to apps/www/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts b/apps/www/registry/default/ui/navigation-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
rename to apps/www/registry/default/ui/navigation-menu/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberField.vue b/apps/www/registry/default/ui/number-field/NumberField.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/NumberField.vue
rename to apps/www/registry/default/ui/number-field/NumberField.vue
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue b/apps/www/registry/default/ui/number-field/NumberFieldContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
rename to apps/www/registry/default/ui/number-field/NumberFieldContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue b/apps/www/registry/default/ui/number-field/NumberFieldDecrement.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
rename to apps/www/registry/default/ui/number-field/NumberFieldDecrement.vue
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue b/apps/www/registry/default/ui/number-field/NumberFieldIncrement.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
rename to apps/www/registry/default/ui/number-field/NumberFieldIncrement.vue
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue b/apps/www/registry/default/ui/number-field/NumberFieldInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
rename to apps/www/registry/default/ui/number-field/NumberFieldInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/number-field/index.ts b/apps/www/registry/default/ui/number-field/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/number-field/index.ts
rename to apps/www/registry/default/ui/number-field/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/registry/default/ui/pagination/PaginationEllipsis.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
rename to apps/www/registry/default/ui/pagination/PaginationEllipsis.vue
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/registry/default/ui/pagination/PaginationFirst.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
rename to apps/www/registry/default/ui/pagination/PaginationFirst.vue
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue b/apps/www/registry/default/ui/pagination/PaginationLast.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
rename to apps/www/registry/default/ui/pagination/PaginationLast.vue
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/registry/default/ui/pagination/PaginationNext.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
rename to apps/www/registry/default/ui/pagination/PaginationNext.vue
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/registry/default/ui/pagination/PaginationPrev.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
rename to apps/www/registry/default/ui/pagination/PaginationPrev.vue
diff --git a/apps/www/src/lib/registry/default/ui/pagination/index.ts b/apps/www/registry/default/ui/pagination/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pagination/index.ts
rename to apps/www/registry/default/ui/pagination/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue b/apps/www/registry/default/ui/pin-input/PinInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue
rename to apps/www/registry/default/ui/pin-input/PinInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue b/apps/www/registry/default/ui/pin-input/PinInputGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
rename to apps/www/registry/default/ui/pin-input/PinInputGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue b/apps/www/registry/default/ui/pin-input/PinInputInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
rename to apps/www/registry/default/ui/pin-input/PinInputInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue b/apps/www/registry/default/ui/pin-input/PinInputSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
rename to apps/www/registry/default/ui/pin-input/PinInputSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/index.ts b/apps/www/registry/default/ui/pin-input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/pin-input/index.ts
rename to apps/www/registry/default/ui/pin-input/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/popover/Popover.vue b/apps/www/registry/default/ui/popover/Popover.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/popover/Popover.vue
rename to apps/www/registry/default/ui/popover/Popover.vue
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue b/apps/www/registry/default/ui/popover/PopoverContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
rename to apps/www/registry/default/ui/popover/PopoverContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue b/apps/www/registry/default/ui/popover/PopoverTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
rename to apps/www/registry/default/ui/popover/PopoverTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/popover/index.ts b/apps/www/registry/default/ui/popover/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/popover/index.ts
rename to apps/www/registry/default/ui/popover/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/progress/Progress.vue b/apps/www/registry/default/ui/progress/Progress.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/progress/Progress.vue
rename to apps/www/registry/default/ui/progress/Progress.vue
diff --git a/apps/www/src/lib/registry/default/ui/progress/index.ts b/apps/www/registry/default/ui/progress/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/progress/index.ts
rename to apps/www/registry/default/ui/progress/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/registry/default/ui/radio-group/RadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
rename to apps/www/registry/default/ui/radio-group/RadioGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/registry/default/ui/radio-group/RadioGroupItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
rename to apps/www/registry/default/ui/radio-group/RadioGroupItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/index.ts b/apps/www/registry/default/ui/radio-group/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/radio-group/index.ts
rename to apps/www/registry/default/ui/radio-group/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendar.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendar.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCell.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarCell.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarGrid.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGrid.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarGrid.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarHeading.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeading.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarHeading.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
rename to apps/www/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/range-calendar/index.ts b/apps/www/registry/default/ui/range-calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/range-calendar/index.ts
rename to apps/www/registry/default/ui/range-calendar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue b/apps/www/registry/default/ui/resizable/ResizableHandle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
rename to apps/www/registry/default/ui/resizable/ResizableHandle.vue
diff --git a/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue b/apps/www/registry/default/ui/resizable/ResizablePanelGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
rename to apps/www/registry/default/ui/resizable/ResizablePanelGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/resizable/index.ts b/apps/www/registry/default/ui/resizable/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/resizable/index.ts
rename to apps/www/registry/default/ui/resizable/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue b/apps/www/registry/default/ui/scroll-area/ScrollArea.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
rename to apps/www/registry/default/ui/scroll-area/ScrollArea.vue
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/registry/default/ui/scroll-area/ScrollBar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
rename to apps/www/registry/default/ui/scroll-area/ScrollBar.vue
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/index.ts b/apps/www/registry/default/ui/scroll-area/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/scroll-area/index.ts
rename to apps/www/registry/default/ui/scroll-area/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/select/Select.vue b/apps/www/registry/default/ui/select/Select.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/Select.vue
rename to apps/www/registry/default/ui/select/Select.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/registry/default/ui/select/SelectContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectContent.vue
rename to apps/www/registry/default/ui/select/SelectContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue b/apps/www/registry/default/ui/select/SelectGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
rename to apps/www/registry/default/ui/select/SelectGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/registry/default/ui/select/SelectItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectItem.vue
rename to apps/www/registry/default/ui/select/SelectItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue b/apps/www/registry/default/ui/select/SelectItemText.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
rename to apps/www/registry/default/ui/select/SelectItemText.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/registry/default/ui/select/SelectLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
rename to apps/www/registry/default/ui/select/SelectLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue b/apps/www/registry/default/ui/select/SelectScrollDownButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
rename to apps/www/registry/default/ui/select/SelectScrollDownButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue b/apps/www/registry/default/ui/select/SelectScrollUpButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
rename to apps/www/registry/default/ui/select/SelectScrollUpButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue b/apps/www/registry/default/ui/select/SelectSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
rename to apps/www/registry/default/ui/select/SelectSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue b/apps/www/registry/default/ui/select/SelectTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
rename to apps/www/registry/default/ui/select/SelectTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectValue.vue b/apps/www/registry/default/ui/select/SelectValue.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/SelectValue.vue
rename to apps/www/registry/default/ui/select/SelectValue.vue
diff --git a/apps/www/src/lib/registry/default/ui/select/index.ts b/apps/www/registry/default/ui/select/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/select/index.ts
rename to apps/www/registry/default/ui/select/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/separator/Separator.vue b/apps/www/registry/default/ui/separator/Separator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/separator/Separator.vue
rename to apps/www/registry/default/ui/separator/Separator.vue
diff --git a/apps/www/src/lib/registry/default/ui/separator/index.ts b/apps/www/registry/default/ui/separator/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/separator/index.ts
rename to apps/www/registry/default/ui/separator/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/sheet/Sheet.vue b/apps/www/registry/default/ui/sheet/Sheet.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/Sheet.vue
rename to apps/www/registry/default/ui/sheet/Sheet.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue b/apps/www/registry/default/ui/sheet/SheetClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetClose.vue
rename to apps/www/registry/default/ui/sheet/SheetClose.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue b/apps/www/registry/default/ui/sheet/SheetContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
rename to apps/www/registry/default/ui/sheet/SheetContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue b/apps/www/registry/default/ui/sheet/SheetDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
rename to apps/www/registry/default/ui/sheet/SheetDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue b/apps/www/registry/default/ui/sheet/SheetFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetFooter.vue
rename to apps/www/registry/default/ui/sheet/SheetFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue b/apps/www/registry/default/ui/sheet/SheetHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
rename to apps/www/registry/default/ui/sheet/SheetHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue b/apps/www/registry/default/ui/sheet/SheetTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
rename to apps/www/registry/default/ui/sheet/SheetTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue b/apps/www/registry/default/ui/sheet/SheetTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/SheetTrigger.vue
rename to apps/www/registry/default/ui/sheet/SheetTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/sheet/index.ts b/apps/www/registry/default/ui/sheet/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sheet/index.ts
rename to apps/www/registry/default/ui/sheet/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue b/apps/www/registry/default/ui/sidebar/Sidebar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue
rename to apps/www/registry/default/ui/sidebar/Sidebar.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarContent.vue b/apps/www/registry/default/ui/sidebar/SidebarContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarContent.vue
rename to apps/www/registry/default/ui/sidebar/SidebarContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarFooter.vue b/apps/www/registry/default/ui/sidebar/SidebarFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarFooter.vue
rename to apps/www/registry/default/ui/sidebar/SidebarFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroup.vue b/apps/www/registry/default/ui/sidebar/SidebarGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarGroup.vue
rename to apps/www/registry/default/ui/sidebar/SidebarGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue b/apps/www/registry/default/ui/sidebar/SidebarGroupAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue
rename to apps/www/registry/default/ui/sidebar/SidebarGroupAction.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupContent.vue b/apps/www/registry/default/ui/sidebar/SidebarGroupContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupContent.vue
rename to apps/www/registry/default/ui/sidebar/SidebarGroupContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue b/apps/www/registry/default/ui/sidebar/SidebarGroupLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue
rename to apps/www/registry/default/ui/sidebar/SidebarGroupLabel.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarHeader.vue b/apps/www/registry/default/ui/sidebar/SidebarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarHeader.vue
rename to apps/www/registry/default/ui/sidebar/SidebarHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarInput.vue b/apps/www/registry/default/ui/sidebar/SidebarInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarInput.vue
rename to apps/www/registry/default/ui/sidebar/SidebarInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarInset.vue b/apps/www/registry/default/ui/sidebar/SidebarInset.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarInset.vue
rename to apps/www/registry/default/ui/sidebar/SidebarInset.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenu.vue b/apps/www/registry/default/ui/sidebar/SidebarMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenu.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenu.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuAction.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuBadge.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuBadge.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuBadge.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuBadge.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButton.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButton.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuItem.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuItem.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSub.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSub.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuSub.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuSubButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuSubButton.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubItem.vue b/apps/www/registry/default/ui/sidebar/SidebarMenuSubItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubItem.vue
rename to apps/www/registry/default/ui/sidebar/SidebarMenuSubItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue b/apps/www/registry/default/ui/sidebar/SidebarProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
rename to apps/www/registry/default/ui/sidebar/SidebarProvider.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarRail.vue b/apps/www/registry/default/ui/sidebar/SidebarRail.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarRail.vue
rename to apps/www/registry/default/ui/sidebar/SidebarRail.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarSeparator.vue b/apps/www/registry/default/ui/sidebar/SidebarSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarSeparator.vue
rename to apps/www/registry/default/ui/sidebar/SidebarSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/SidebarTrigger.vue b/apps/www/registry/default/ui/sidebar/SidebarTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/SidebarTrigger.vue
rename to apps/www/registry/default/ui/sidebar/SidebarTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/index.ts b/apps/www/registry/default/ui/sidebar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/index.ts
rename to apps/www/registry/default/ui/sidebar/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/sidebar/utils.ts b/apps/www/registry/default/ui/sidebar/utils.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sidebar/utils.ts
rename to apps/www/registry/default/ui/sidebar/utils.ts
diff --git a/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue b/apps/www/registry/default/ui/skeleton/Skeleton.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
rename to apps/www/registry/default/ui/skeleton/Skeleton.vue
diff --git a/apps/www/src/lib/registry/default/ui/skeleton/index.ts b/apps/www/registry/default/ui/skeleton/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/skeleton/index.ts
rename to apps/www/registry/default/ui/skeleton/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/slider/Slider.vue b/apps/www/registry/default/ui/slider/Slider.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/slider/Slider.vue
rename to apps/www/registry/default/ui/slider/Slider.vue
diff --git a/apps/www/src/lib/registry/default/ui/slider/index.ts b/apps/www/registry/default/ui/slider/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/slider/index.ts
rename to apps/www/registry/default/ui/slider/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/sonner/Sonner.vue b/apps/www/registry/default/ui/sonner/Sonner.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sonner/Sonner.vue
rename to apps/www/registry/default/ui/sonner/Sonner.vue
diff --git a/apps/www/src/lib/registry/default/ui/sonner/index.ts b/apps/www/registry/default/ui/sonner/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/sonner/index.ts
rename to apps/www/registry/default/ui/sonner/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/stepper/Stepper.vue b/apps/www/registry/default/ui/stepper/Stepper.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/Stepper.vue
rename to apps/www/registry/default/ui/stepper/Stepper.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue b/apps/www/registry/default/ui/stepper/StepperDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperDescription.vue
rename to apps/www/registry/default/ui/stepper/StepperDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue b/apps/www/registry/default/ui/stepper/StepperIndicator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperIndicator.vue
rename to apps/www/registry/default/ui/stepper/StepperIndicator.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue b/apps/www/registry/default/ui/stepper/StepperItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperItem.vue
rename to apps/www/registry/default/ui/stepper/StepperItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue b/apps/www/registry/default/ui/stepper/StepperSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperSeparator.vue
rename to apps/www/registry/default/ui/stepper/StepperSeparator.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue b/apps/www/registry/default/ui/stepper/StepperTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperTitle.vue
rename to apps/www/registry/default/ui/stepper/StepperTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue b/apps/www/registry/default/ui/stepper/StepperTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/StepperTrigger.vue
rename to apps/www/registry/default/ui/stepper/StepperTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/stepper/index.ts b/apps/www/registry/default/ui/stepper/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/stepper/index.ts
rename to apps/www/registry/default/ui/stepper/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/registry/default/ui/switch/Switch.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/switch/Switch.vue
rename to apps/www/registry/default/ui/switch/Switch.vue
diff --git a/apps/www/src/lib/registry/default/ui/switch/index.ts b/apps/www/registry/default/ui/switch/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/switch/index.ts
rename to apps/www/registry/default/ui/switch/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/table/Table.vue b/apps/www/registry/default/ui/table/Table.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/Table.vue
rename to apps/www/registry/default/ui/table/Table.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableBody.vue b/apps/www/registry/default/ui/table/TableBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableBody.vue
rename to apps/www/registry/default/ui/table/TableBody.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCaption.vue b/apps/www/registry/default/ui/table/TableCaption.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableCaption.vue
rename to apps/www/registry/default/ui/table/TableCaption.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCell.vue b/apps/www/registry/default/ui/table/TableCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableCell.vue
rename to apps/www/registry/default/ui/table/TableCell.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue b/apps/www/registry/default/ui/table/TableEmpty.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
rename to apps/www/registry/default/ui/table/TableEmpty.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableFooter.vue b/apps/www/registry/default/ui/table/TableFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableFooter.vue
rename to apps/www/registry/default/ui/table/TableFooter.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/registry/default/ui/table/TableHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableHead.vue
rename to apps/www/registry/default/ui/table/TableHead.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHeader.vue b/apps/www/registry/default/ui/table/TableHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableHeader.vue
rename to apps/www/registry/default/ui/table/TableHeader.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/TableRow.vue b/apps/www/registry/default/ui/table/TableRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/TableRow.vue
rename to apps/www/registry/default/ui/table/TableRow.vue
diff --git a/apps/www/src/lib/registry/default/ui/table/index.ts b/apps/www/registry/default/ui/table/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/table/index.ts
rename to apps/www/registry/default/ui/table/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue b/apps/www/registry/default/ui/tabs/Tabs.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
rename to apps/www/registry/default/ui/tabs/Tabs.vue
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue b/apps/www/registry/default/ui/tabs/TabsContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
rename to apps/www/registry/default/ui/tabs/TabsContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue b/apps/www/registry/default/ui/tabs/TabsList.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
rename to apps/www/registry/default/ui/tabs/TabsList.vue
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/registry/default/ui/tabs/TabsTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
rename to apps/www/registry/default/ui/tabs/TabsTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/tabs/index.ts b/apps/www/registry/default/ui/tabs/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tabs/index.ts
rename to apps/www/registry/default/ui/tabs/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue b/apps/www/registry/default/ui/tags-input/TagsInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
rename to apps/www/registry/default/ui/tags-input/TagsInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue b/apps/www/registry/default/ui/tags-input/TagsInputInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
rename to apps/www/registry/default/ui/tags-input/TagsInputInput.vue
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue b/apps/www/registry/default/ui/tags-input/TagsInputItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
rename to apps/www/registry/default/ui/tags-input/TagsInputItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/registry/default/ui/tags-input/TagsInputItemDelete.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
rename to apps/www/registry/default/ui/tags-input/TagsInputItemDelete.vue
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue b/apps/www/registry/default/ui/tags-input/TagsInputItemText.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
rename to apps/www/registry/default/ui/tags-input/TagsInputItemText.vue
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/index.ts b/apps/www/registry/default/ui/tags-input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tags-input/index.ts
rename to apps/www/registry/default/ui/tags-input/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/registry/default/ui/textarea/Textarea.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
rename to apps/www/registry/default/ui/textarea/Textarea.vue
diff --git a/apps/www/src/lib/registry/default/ui/textarea/index.ts b/apps/www/registry/default/ui/textarea/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/textarea/index.ts
rename to apps/www/registry/default/ui/textarea/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toast.vue b/apps/www/registry/default/ui/toast/Toast.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/Toast.vue
rename to apps/www/registry/default/ui/toast/Toast.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue b/apps/www/registry/default/ui/toast/ToastAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
rename to apps/www/registry/default/ui/toast/ToastAction.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue b/apps/www/registry/default/ui/toast/ToastClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
rename to apps/www/registry/default/ui/toast/ToastClose.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue b/apps/www/registry/default/ui/toast/ToastDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
rename to apps/www/registry/default/ui/toast/ToastDescription.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue b/apps/www/registry/default/ui/toast/ToastProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastProvider.vue
rename to apps/www/registry/default/ui/toast/ToastProvider.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue b/apps/www/registry/default/ui/toast/ToastTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
rename to apps/www/registry/default/ui/toast/ToastTitle.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue b/apps/www/registry/default/ui/toast/ToastViewport.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
rename to apps/www/registry/default/ui/toast/ToastViewport.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toaster.vue b/apps/www/registry/default/ui/toast/Toaster.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/Toaster.vue
rename to apps/www/registry/default/ui/toast/Toaster.vue
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/registry/default/ui/toast/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/index.ts
rename to apps/www/registry/default/ui/toast/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts b/apps/www/registry/default/ui/toast/use-toast.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toast/use-toast.ts
rename to apps/www/registry/default/ui/toast/use-toast.ts
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue b/apps/www/registry/default/ui/toggle-group/ToggleGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroup.vue
rename to apps/www/registry/default/ui/toggle-group/ToggleGroup.vue
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue b/apps/www/registry/default/ui/toggle-group/ToggleGroupItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toggle-group/ToggleGroupItem.vue
rename to apps/www/registry/default/ui/toggle-group/ToggleGroupItem.vue
diff --git a/apps/www/src/lib/registry/default/ui/toggle-group/index.ts b/apps/www/registry/default/ui/toggle-group/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toggle-group/index.ts
rename to apps/www/registry/default/ui/toggle-group/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/registry/default/ui/toggle/Toggle.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
rename to apps/www/registry/default/ui/toggle/Toggle.vue
diff --git a/apps/www/src/lib/registry/default/ui/toggle/index.ts b/apps/www/registry/default/ui/toggle/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/toggle/index.ts
rename to apps/www/registry/default/ui/toggle/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue b/apps/www/registry/default/ui/tooltip/Tooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tooltip/Tooltip.vue
rename to apps/www/registry/default/ui/tooltip/Tooltip.vue
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue b/apps/www/registry/default/ui/tooltip/TooltipContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
rename to apps/www/registry/default/ui/tooltip/TooltipContent.vue
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue b/apps/www/registry/default/ui/tooltip/TooltipProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tooltip/TooltipProvider.vue
rename to apps/www/registry/default/ui/tooltip/TooltipProvider.vue
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue b/apps/www/registry/default/ui/tooltip/TooltipTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tooltip/TooltipTrigger.vue
rename to apps/www/registry/default/ui/tooltip/TooltipTrigger.vue
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/index.ts b/apps/www/registry/default/ui/tooltip/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/tooltip/index.ts
rename to apps/www/registry/default/ui/tooltip/index.ts
diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue b/apps/www/registry/default/ui/v-calendar/Calendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
rename to apps/www/registry/default/ui/v-calendar/Calendar.vue
diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/index.ts b/apps/www/registry/default/ui/v-calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/default/ui/v-calendar/index.ts
rename to apps/www/registry/default/ui/v-calendar/index.ts
diff --git a/apps/www/registry/index.ts b/apps/www/registry/index.ts
new file mode 100644
index 000000000..d52b98c27
--- /dev/null
+++ b/apps/www/registry/index.ts
@@ -0,0 +1,12 @@
+import type { Registry } from '../registry/schema'
+import { hooks } from '../registry/registry-hooks'
+import { lib } from '../registry/registry-lib'
+import { themes } from '../registry/registry-themes'
+import { ui } from '../registry/registry-ui'
+
+export const registry: Registry = [
+  ...ui,
+  ...lib,
+  ...hooks,
+  ...themes,
+]
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication01.vue b/apps/www/registry/new-york/block/Authentication01.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Authentication01.vue
rename to apps/www/registry/new-york/block/Authentication01.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication02.vue b/apps/www/registry/new-york/block/Authentication02.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Authentication02.vue
rename to apps/www/registry/new-york/block/Authentication02.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication03.vue b/apps/www/registry/new-york/block/Authentication03.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Authentication03.vue
rename to apps/www/registry/new-york/block/Authentication03.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication04.vue b/apps/www/registry/new-york/block/Authentication04.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Authentication04.vue
rename to apps/www/registry/new-york/block/Authentication04.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard01.vue b/apps/www/registry/new-york/block/Dashboard01.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard01.vue
rename to apps/www/registry/new-york/block/Dashboard01.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard02.vue b/apps/www/registry/new-york/block/Dashboard02.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard02.vue
rename to apps/www/registry/new-york/block/Dashboard02.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard03.vue b/apps/www/registry/new-york/block/Dashboard03.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard03.vue
rename to apps/www/registry/new-york/block/Dashboard03.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard04.vue b/apps/www/registry/new-york/block/Dashboard04.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard04.vue
rename to apps/www/registry/new-york/block/Dashboard04.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue b/apps/www/registry/new-york/block/Dashboard05.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard05.vue
rename to apps/www/registry/new-york/block/Dashboard05.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/registry/new-york/block/Dashboard06.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard06.vue
rename to apps/www/registry/new-york/block/Dashboard06.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue b/apps/www/registry/new-york/block/Dashboard07.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Dashboard07.vue
rename to apps/www/registry/new-york/block/Dashboard07.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar01.vue b/apps/www/registry/new-york/block/Sidebar01.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Sidebar01.vue
rename to apps/www/registry/new-york/block/Sidebar01.vue
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar07.vue b/apps/www/registry/new-york/block/Sidebar07.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/block/Sidebar07.vue
rename to apps/www/registry/new-york/block/Sidebar07.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue b/apps/www/registry/new-york/example/AccordionDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
rename to apps/www/registry/new-york/example/AccordionDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue b/apps/www/registry/new-york/example/AlertDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AlertDemo.vue
rename to apps/www/registry/new-york/example/AlertDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue b/apps/www/registry/new-york/example/AlertDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue
rename to apps/www/registry/new-york/example/AlertDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue b/apps/www/registry/new-york/example/AlertDialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue
rename to apps/www/registry/new-york/example/AlertDialogDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue b/apps/www/registry/new-york/example/AreaChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
rename to apps/www/registry/new-york/example/AreaChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue b/apps/www/registry/new-york/example/AreaChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
rename to apps/www/registry/new-york/example/AreaChartDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue b/apps/www/registry/new-york/example/AreaChartSparkline.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
rename to apps/www/registry/new-york/example/AreaChartSparkline.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue b/apps/www/registry/new-york/example/AspectRatioDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue
rename to apps/www/registry/new-york/example/AspectRatioDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue b/apps/www/registry/new-york/example/AutoFormApi.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
rename to apps/www/registry/new-york/example/AutoFormApi.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormArray.vue b/apps/www/registry/new-york/example/AutoFormArray.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormArray.vue
rename to apps/www/registry/new-york/example/AutoFormArray.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue b/apps/www/registry/new-york/example/AutoFormBasic.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
rename to apps/www/registry/new-york/example/AutoFormBasic.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue b/apps/www/registry/new-york/example/AutoFormConfirmPassword.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue
rename to apps/www/registry/new-york/example/AutoFormConfirmPassword.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue b/apps/www/registry/new-york/example/AutoFormControlled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue
rename to apps/www/registry/new-york/example/AutoFormControlled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue b/apps/www/registry/new-york/example/AutoFormDependencies.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue
rename to apps/www/registry/new-york/example/AutoFormDependencies.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue b/apps/www/registry/new-york/example/AutoFormInputWithoutLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue
rename to apps/www/registry/new-york/example/AutoFormInputWithoutLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue b/apps/www/registry/new-york/example/AutoFormSubObject.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
rename to apps/www/registry/new-york/example/AutoFormSubObject.vue
diff --git a/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue b/apps/www/registry/new-york/example/AvatarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
rename to apps/www/registry/new-york/example/AvatarDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BadgeDemo.vue b/apps/www/registry/new-york/example/BadgeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
rename to apps/www/registry/new-york/example/BadgeDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BadgeDestructiveDemo.vue b/apps/www/registry/new-york/example/BadgeDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BadgeDestructiveDemo.vue
rename to apps/www/registry/new-york/example/BadgeDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BadgeOutlineDemo.vue b/apps/www/registry/new-york/example/BadgeOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BadgeOutlineDemo.vue
rename to apps/www/registry/new-york/example/BadgeOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BadgeSecondaryDemo.vue b/apps/www/registry/new-york/example/BadgeSecondaryDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BadgeSecondaryDemo.vue
rename to apps/www/registry/new-york/example/BadgeSecondaryDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue b/apps/www/registry/new-york/example/BarChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
rename to apps/www/registry/new-york/example/BarChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue b/apps/www/registry/new-york/example/BarChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
rename to apps/www/registry/new-york/example/BarChartDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue b/apps/www/registry/new-york/example/BarChartRounded.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BarChartRounded.vue
rename to apps/www/registry/new-york/example/BarChartRounded.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue b/apps/www/registry/new-york/example/BarChartStacked.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BarChartStacked.vue
rename to apps/www/registry/new-york/example/BarChartStacked.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue b/apps/www/registry/new-york/example/BreadcrumbDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue
rename to apps/www/registry/new-york/example/BreadcrumbDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/registry/new-york/example/BreadcrumbDropdown.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue
rename to apps/www/registry/new-york/example/BreadcrumbDropdown.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue b/apps/www/registry/new-york/example/BreadcrumbEllipsisDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue
rename to apps/www/registry/new-york/example/BreadcrumbEllipsisDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue b/apps/www/registry/new-york/example/BreadcrumbLinkDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue
rename to apps/www/registry/new-york/example/BreadcrumbLinkDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue b/apps/www/registry/new-york/example/BreadcrumbResponsive.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue
rename to apps/www/registry/new-york/example/BreadcrumbResponsive.vue
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue b/apps/www/registry/new-york/example/BreadcrumbSeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue
rename to apps/www/registry/new-york/example/BreadcrumbSeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonAsChildDemo.vue b/apps/www/registry/new-york/example/ButtonAsChildDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonAsChildDemo.vue
rename to apps/www/registry/new-york/example/ButtonAsChildDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonDemo.vue b/apps/www/registry/new-york/example/ButtonDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonDemo.vue
rename to apps/www/registry/new-york/example/ButtonDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonDestructiveDemo.vue b/apps/www/registry/new-york/example/ButtonDestructiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonDestructiveDemo.vue
rename to apps/www/registry/new-york/example/ButtonDestructiveDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonGhostDemo.vue b/apps/www/registry/new-york/example/ButtonGhostDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonGhostDemo.vue
rename to apps/www/registry/new-york/example/ButtonGhostDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue b/apps/www/registry/new-york/example/ButtonIconDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
rename to apps/www/registry/new-york/example/ButtonIconDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonLinkDemo.vue b/apps/www/registry/new-york/example/ButtonLinkDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonLinkDemo.vue
rename to apps/www/registry/new-york/example/ButtonLinkDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/registry/new-york/example/ButtonLoadingDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
rename to apps/www/registry/new-york/example/ButtonLoadingDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonOutlineDemo.vue b/apps/www/registry/new-york/example/ButtonOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonOutlineDemo.vue
rename to apps/www/registry/new-york/example/ButtonOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonSecondaryDemo.vue b/apps/www/registry/new-york/example/ButtonSecondaryDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonSecondaryDemo.vue
rename to apps/www/registry/new-york/example/ButtonSecondaryDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/registry/new-york/example/ButtonWithIconDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
rename to apps/www/registry/new-york/example/ButtonWithIconDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue b/apps/www/registry/new-york/example/CalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
rename to apps/www/registry/new-york/example/CalendarDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue b/apps/www/registry/new-york/example/CalendarForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CalendarForm.vue
rename to apps/www/registry/new-york/example/CalendarForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue b/apps/www/registry/new-york/example/CalendarWithSelect.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CalendarWithSelect.vue
rename to apps/www/registry/new-york/example/CalendarWithSelect.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CardChat.vue b/apps/www/registry/new-york/example/CardChat.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CardChat.vue
rename to apps/www/registry/new-york/example/CardChat.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/registry/new-york/example/CardDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CardDemo.vue
rename to apps/www/registry/new-york/example/CardDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue b/apps/www/registry/new-york/example/CardFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
rename to apps/www/registry/new-york/example/CardFormDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/registry/new-york/example/CardStats.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CardStats.vue
rename to apps/www/registry/new-york/example/CardStats.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CardWithForm.vue b/apps/www/registry/new-york/example/CardWithForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CardWithForm.vue
rename to apps/www/registry/new-york/example/CardWithForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/registry/new-york/example/Cards/ActivityGoal.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
rename to apps/www/registry/new-york/example/Cards/ActivityGoal.vue
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/registry/new-york/example/Cards/DataTable.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
rename to apps/www/registry/new-york/example/Cards/DataTable.vue
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue b/apps/www/registry/new-york/example/Cards/Metric.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
rename to apps/www/registry/new-york/example/Cards/Metric.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue b/apps/www/registry/new-york/example/CarouselApi.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselApi.vue
rename to apps/www/registry/new-york/example/CarouselApi.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue b/apps/www/registry/new-york/example/CarouselDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
rename to apps/www/registry/new-york/example/CarouselDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue b/apps/www/registry/new-york/example/CarouselOrientation.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
rename to apps/www/registry/new-york/example/CarouselOrientation.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue b/apps/www/registry/new-york/example/CarouselPlugin.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
rename to apps/www/registry/new-york/example/CarouselPlugin.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue b/apps/www/registry/new-york/example/CarouselSize.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselSize.vue
rename to apps/www/registry/new-york/example/CarouselSize.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/registry/new-york/example/CarouselSpacing.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
rename to apps/www/registry/new-york/example/CarouselSpacing.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue b/apps/www/registry/new-york/example/CarouselThumbnails.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
rename to apps/www/registry/new-york/example/CarouselThumbnails.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue b/apps/www/registry/new-york/example/CheckboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
rename to apps/www/registry/new-york/example/CheckboxDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue b/apps/www/registry/new-york/example/CheckboxDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue
rename to apps/www/registry/new-york/example/CheckboxDisabled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/registry/new-york/example/CheckboxFormMultiple.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
rename to apps/www/registry/new-york/example/CheckboxFormMultiple.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue b/apps/www/registry/new-york/example/CheckboxFormSingle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
rename to apps/www/registry/new-york/example/CheckboxFormSingle.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxWithText.vue b/apps/www/registry/new-york/example/CheckboxWithText.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CheckboxWithText.vue
rename to apps/www/registry/new-york/example/CheckboxWithText.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/registry/new-york/example/CollapsibleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
rename to apps/www/registry/new-york/example/CollapsibleDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue b/apps/www/registry/new-york/example/ComboboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
rename to apps/www/registry/new-york/example/ComboboxDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/registry/new-york/example/ComboboxDropdownMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
rename to apps/www/registry/new-york/example/ComboboxDropdownMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/registry/new-york/example/ComboboxForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
rename to apps/www/registry/new-york/example/ComboboxForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/registry/new-york/example/ComboboxPopover.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
rename to apps/www/registry/new-york/example/ComboboxPopover.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue b/apps/www/registry/new-york/example/ComboboxResponsive.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue
rename to apps/www/registry/new-york/example/ComboboxResponsive.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue b/apps/www/registry/new-york/example/CommandDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CommandDemo.vue
rename to apps/www/registry/new-york/example/CommandDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue b/apps/www/registry/new-york/example/CommandDialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
rename to apps/www/registry/new-york/example/CommandDialogDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue b/apps/www/registry/new-york/example/ContextMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue
rename to apps/www/registry/new-york/example/ContextMenuDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue b/apps/www/registry/new-york/example/CustomChartTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
rename to apps/www/registry/new-york/example/CustomChartTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/registry/new-york/example/DataTableColumnPinningDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
rename to apps/www/registry/new-york/example/DataTableColumnPinningDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/registry/new-york/example/DataTableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
rename to apps/www/registry/new-york/example/DataTableDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue b/apps/www/registry/new-york/example/DataTableDemoColumn.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
rename to apps/www/registry/new-york/example/DataTableDemoColumn.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue b/apps/www/registry/new-york/example/DataTableReactiveDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
rename to apps/www/registry/new-york/example/DataTableReactiveDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/registry/new-york/example/DatePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
rename to apps/www/registry/new-york/example/DatePickerDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue b/apps/www/registry/new-york/example/DatePickerForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
rename to apps/www/registry/new-york/example/DatePickerForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue b/apps/www/registry/new-york/example/DatePickerWithIndependentMonths.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
rename to apps/www/registry/new-york/example/DatePickerWithIndependentMonths.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/registry/new-york/example/DatePickerWithPresets.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
rename to apps/www/registry/new-york/example/DatePickerWithPresets.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/registry/new-york/example/DatePickerWithRange.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
rename to apps/www/registry/new-york/example/DatePickerWithRange.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/registry/new-york/example/DialogCustomCloseButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
rename to apps/www/registry/new-york/example/DialogCustomCloseButton.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DialogDemo.vue b/apps/www/registry/new-york/example/DialogDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DialogDemo.vue
rename to apps/www/registry/new-york/example/DialogDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DialogForm.vue b/apps/www/registry/new-york/example/DialogForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DialogForm.vue
rename to apps/www/registry/new-york/example/DialogForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DialogScrollBodyDemo.vue b/apps/www/registry/new-york/example/DialogScrollBodyDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DialogScrollBodyDemo.vue
rename to apps/www/registry/new-york/example/DialogScrollBodyDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue b/apps/www/registry/new-york/example/DialogScrollOverlayDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue
rename to apps/www/registry/new-york/example/DialogScrollOverlayDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue b/apps/www/registry/new-york/example/DonutChartColor.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DonutChartColor.vue
rename to apps/www/registry/new-york/example/DonutChartColor.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue b/apps/www/registry/new-york/example/DonutChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
rename to apps/www/registry/new-york/example/DonutChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartDemo.vue b/apps/www/registry/new-york/example/DonutChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DonutChartDemo.vue
rename to apps/www/registry/new-york/example/DonutChartDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue b/apps/www/registry/new-york/example/DonutChartPie.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DonutChartPie.vue
rename to apps/www/registry/new-york/example/DonutChartPie.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/registry/new-york/example/DrawerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
rename to apps/www/registry/new-york/example/DrawerDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/registry/new-york/example/DrawerDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
rename to apps/www/registry/new-york/example/DrawerDialog.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/registry/new-york/example/DropdownMenuCheckboxes.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
rename to apps/www/registry/new-york/example/DropdownMenuCheckboxes.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue b/apps/www/registry/new-york/example/DropdownMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue
rename to apps/www/registry/new-york/example/DropdownMenuDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue b/apps/www/registry/new-york/example/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
rename to apps/www/registry/new-york/example/DropdownMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/registry/new-york/example/HoverCardDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
rename to apps/www/registry/new-york/example/HoverCardDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputDemo.vue b/apps/www/registry/new-york/example/InputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputDemo.vue
rename to apps/www/registry/new-york/example/InputDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputDisabled.vue b/apps/www/registry/new-york/example/InputDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputDisabled.vue
rename to apps/www/registry/new-york/example/InputDisabled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputFile.vue b/apps/www/registry/new-york/example/InputFile.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputFile.vue
rename to apps/www/registry/new-york/example/InputFile.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputForm.vue b/apps/www/registry/new-york/example/InputForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputForm.vue
rename to apps/www/registry/new-york/example/InputForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue b/apps/www/registry/new-york/example/InputFormAutoAnimate.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
rename to apps/www/registry/new-york/example/InputFormAutoAnimate.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithButton.vue b/apps/www/registry/new-york/example/InputWithButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputWithButton.vue
rename to apps/www/registry/new-york/example/InputWithButton.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/registry/new-york/example/InputWithIcon.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
rename to apps/www/registry/new-york/example/InputWithIcon.vue
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithLabel.vue b/apps/www/registry/new-york/example/InputWithLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/InputWithLabel.vue
rename to apps/www/registry/new-york/example/InputWithLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue b/apps/www/registry/new-york/example/LabelDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/LabelDemo.vue
rename to apps/www/registry/new-york/example/LabelDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue b/apps/www/registry/new-york/example/LineChartCustomTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
rename to apps/www/registry/new-york/example/LineChartCustomTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue b/apps/www/registry/new-york/example/LineChartDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
rename to apps/www/registry/new-york/example/LineChartDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue b/apps/www/registry/new-york/example/LineChartSparkline.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue
rename to apps/www/registry/new-york/example/LineChartSparkline.vue
diff --git a/apps/www/src/lib/registry/new-york/example/MenubarDemo.vue b/apps/www/registry/new-york/example/MenubarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
rename to apps/www/registry/new-york/example/MenubarDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/registry/new-york/example/NavigationMenuDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
rename to apps/www/registry/new-york/example/NavigationMenuDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue b/apps/www/registry/new-york/example/NumberFieldCurrency.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
rename to apps/www/registry/new-york/example/NumberFieldCurrency.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue b/apps/www/registry/new-york/example/NumberFieldDecimal.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
rename to apps/www/registry/new-york/example/NumberFieldDecimal.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue b/apps/www/registry/new-york/example/NumberFieldDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
rename to apps/www/registry/new-york/example/NumberFieldDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue b/apps/www/registry/new-york/example/NumberFieldDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
rename to apps/www/registry/new-york/example/NumberFieldDisabled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue b/apps/www/registry/new-york/example/NumberFieldForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue
rename to apps/www/registry/new-york/example/NumberFieldForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue b/apps/www/registry/new-york/example/NumberFieldPercentage.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
rename to apps/www/registry/new-york/example/NumberFieldPercentage.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue b/apps/www/registry/new-york/example/PaginationDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
rename to apps/www/registry/new-york/example/PaginationDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue b/apps/www/registry/new-york/example/PinInputControlled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
rename to apps/www/registry/new-york/example/PinInputControlled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue b/apps/www/registry/new-york/example/PinInputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
rename to apps/www/registry/new-york/example/PinInputDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue b/apps/www/registry/new-york/example/PinInputDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
rename to apps/www/registry/new-york/example/PinInputDisabled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue b/apps/www/registry/new-york/example/PinInputFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
rename to apps/www/registry/new-york/example/PinInputFormDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue b/apps/www/registry/new-york/example/PinInputSeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
rename to apps/www/registry/new-york/example/PinInputSeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue b/apps/www/registry/new-york/example/PopoverDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
rename to apps/www/registry/new-york/example/PopoverDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue b/apps/www/registry/new-york/example/ProgressDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
rename to apps/www/registry/new-york/example/ProgressDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue b/apps/www/registry/new-york/example/RadioGroupDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
rename to apps/www/registry/new-york/example/RadioGroupDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue b/apps/www/registry/new-york/example/RadioGroupForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
rename to apps/www/registry/new-york/example/RadioGroupForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue b/apps/www/registry/new-york/example/RangeCalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
rename to apps/www/registry/new-york/example/RangeCalendarDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableDemo.vue b/apps/www/registry/new-york/example/ResizableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
rename to apps/www/registry/new-york/example/ResizableDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue b/apps/www/registry/new-york/example/ResizableHandleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue
rename to apps/www/registry/new-york/example/ResizableHandleDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue b/apps/www/registry/new-york/example/ResizableVerticalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue
rename to apps/www/registry/new-york/example/ResizableVerticalDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue b/apps/www/registry/new-york/example/ScrollAreaDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue
rename to apps/www/registry/new-york/example/ScrollAreaDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue b/apps/www/registry/new-york/example/ScrollAreaHorizontalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
rename to apps/www/registry/new-york/example/ScrollAreaHorizontalDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SelectDemo.vue b/apps/www/registry/new-york/example/SelectDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SelectDemo.vue
rename to apps/www/registry/new-york/example/SelectDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SelectForm.vue b/apps/www/registry/new-york/example/SelectForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SelectForm.vue
rename to apps/www/registry/new-york/example/SelectForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SelectScrollable.vue b/apps/www/registry/new-york/example/SelectScrollable.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SelectScrollable.vue
rename to apps/www/registry/new-york/example/SelectScrollable.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue b/apps/www/registry/new-york/example/SeparatorDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
rename to apps/www/registry/new-york/example/SeparatorDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SheetDemo.vue b/apps/www/registry/new-york/example/SheetDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SheetDemo.vue
rename to apps/www/registry/new-york/example/SheetDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue b/apps/www/registry/new-york/example/SheetSideDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
rename to apps/www/registry/new-york/example/SheetSideDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonCard.vue b/apps/www/registry/new-york/example/SkeletonCard.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SkeletonCard.vue
rename to apps/www/registry/new-york/example/SkeletonCard.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue b/apps/www/registry/new-york/example/SkeletonDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
rename to apps/www/registry/new-york/example/SkeletonDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue b/apps/www/registry/new-york/example/SliderDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SliderDemo.vue
rename to apps/www/registry/new-york/example/SliderDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SliderForm.vue b/apps/www/registry/new-york/example/SliderForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SliderForm.vue
rename to apps/www/registry/new-york/example/SliderForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue b/apps/www/registry/new-york/example/SonnerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
rename to apps/www/registry/new-york/example/SonnerDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue b/apps/www/registry/new-york/example/SonnerWithDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue
rename to apps/www/registry/new-york/example/SonnerWithDialog.vue
diff --git a/apps/www/src/lib/registry/new-york/example/StepperDemo.vue b/apps/www/registry/new-york/example/StepperDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/StepperDemo.vue
rename to apps/www/registry/new-york/example/StepperDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/StepperForm.vue b/apps/www/registry/new-york/example/StepperForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/StepperForm.vue
rename to apps/www/registry/new-york/example/StepperForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/StepperHorizental.vue b/apps/www/registry/new-york/example/StepperHorizental.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/StepperHorizental.vue
rename to apps/www/registry/new-york/example/StepperHorizental.vue
diff --git a/apps/www/src/lib/registry/new-york/example/StepperVertical.vue b/apps/www/registry/new-york/example/StepperVertical.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/StepperVertical.vue
rename to apps/www/registry/new-york/example/StepperVertical.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue b/apps/www/registry/new-york/example/SwitchDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
rename to apps/www/registry/new-york/example/SwitchDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue b/apps/www/registry/new-york/example/SwitchForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/SwitchForm.vue
rename to apps/www/registry/new-york/example/SwitchForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TableDemo.vue b/apps/www/registry/new-york/example/TableDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TableDemo.vue
rename to apps/www/registry/new-york/example/TableDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TabsDemo.vue b/apps/www/registry/new-york/example/TabsDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TabsDemo.vue
rename to apps/www/registry/new-york/example/TabsDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue b/apps/www/registry/new-york/example/TabsVerticalDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue
rename to apps/www/registry/new-york/example/TabsVerticalDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/registry/new-york/example/TagsInputComboboxDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
rename to apps/www/registry/new-york/example/TagsInputComboboxDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue b/apps/www/registry/new-york/example/TagsInputDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
rename to apps/www/registry/new-york/example/TagsInputDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue b/apps/www/registry/new-york/example/TagsInputFormDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue
rename to apps/www/registry/new-york/example/TagsInputFormDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaDemo.vue b/apps/www/registry/new-york/example/TextareaDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaDemo.vue
rename to apps/www/registry/new-york/example/TextareaDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaDisabled.vue b/apps/www/registry/new-york/example/TextareaDisabled.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaDisabled.vue
rename to apps/www/registry/new-york/example/TextareaDisabled.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaForm.vue b/apps/www/registry/new-york/example/TextareaForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaForm.vue
rename to apps/www/registry/new-york/example/TextareaForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue b/apps/www/registry/new-york/example/TextareaWithButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
rename to apps/www/registry/new-york/example/TextareaWithButton.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue b/apps/www/registry/new-york/example/TextareaWithLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
rename to apps/www/registry/new-york/example/TextareaWithLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue b/apps/www/registry/new-york/example/TextareaWithText.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
rename to apps/www/registry/new-york/example/TextareaWithText.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToastDemo.vue b/apps/www/registry/new-york/example/ToastDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToastDemo.vue
rename to apps/www/registry/new-york/example/ToastDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToastDestructive.vue b/apps/www/registry/new-york/example/ToastDestructive.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToastDestructive.vue
rename to apps/www/registry/new-york/example/ToastDestructive.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToastSimple.vue b/apps/www/registry/new-york/example/ToastSimple.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToastSimple.vue
rename to apps/www/registry/new-york/example/ToastSimple.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToastWithAction.vue b/apps/www/registry/new-york/example/ToastWithAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToastWithAction.vue
rename to apps/www/registry/new-york/example/ToastWithAction.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToastWithTitle.vue b/apps/www/registry/new-york/example/ToastWithTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToastWithTitle.vue
rename to apps/www/registry/new-york/example/ToastWithTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue b/apps/www/registry/new-york/example/ToggleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
rename to apps/www/registry/new-york/example/ToggleDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue b/apps/www/registry/new-york/example/ToggleDisabledDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue
rename to apps/www/registry/new-york/example/ToggleDisabledDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue b/apps/www/registry/new-york/example/ToggleGroupDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue b/apps/www/registry/new-york/example/ToggleGroupDisabledDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupDisabledDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue b/apps/www/registry/new-york/example/ToggleGroupLargeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupLargeDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue b/apps/www/registry/new-york/example/ToggleGroupOutlineDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupOutlineDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue b/apps/www/registry/new-york/example/ToggleGroupSingleDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupSingleDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue b/apps/www/registry/new-york/example/ToggleGroupSmallDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue
rename to apps/www/registry/new-york/example/ToggleGroupSmallDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue b/apps/www/registry/new-york/example/ToggleItalicDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue
rename to apps/www/registry/new-york/example/ToggleItalicDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue b/apps/www/registry/new-york/example/ToggleItalicWithTextDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
rename to apps/www/registry/new-york/example/ToggleItalicWithTextDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue b/apps/www/registry/new-york/example/ToggleLargeDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue
rename to apps/www/registry/new-york/example/ToggleLargeDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue b/apps/www/registry/new-york/example/ToggleSmallDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue
rename to apps/www/registry/new-york/example/ToggleSmallDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TooltipDemo.vue b/apps/www/registry/new-york/example/TooltipDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
rename to apps/www/registry/new-york/example/TooltipDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue b/apps/www/registry/new-york/example/TypographyBlockquote.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
rename to apps/www/registry/new-york/example/TypographyBlockquote.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/registry/new-york/example/TypographyDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
rename to apps/www/registry/new-york/example/TypographyDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH1.vue b/apps/www/registry/new-york/example/TypographyH1.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyH1.vue
rename to apps/www/registry/new-york/example/TypographyH1.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH2.vue b/apps/www/registry/new-york/example/TypographyH2.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyH2.vue
rename to apps/www/registry/new-york/example/TypographyH2.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH3.vue b/apps/www/registry/new-york/example/TypographyH3.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyH3.vue
rename to apps/www/registry/new-york/example/TypographyH3.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH4.vue b/apps/www/registry/new-york/example/TypographyH4.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyH4.vue
rename to apps/www/registry/new-york/example/TypographyH4.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue b/apps/www/registry/new-york/example/TypographyInlineCode.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
rename to apps/www/registry/new-york/example/TypographyInlineCode.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyLarge.vue b/apps/www/registry/new-york/example/TypographyLarge.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyLarge.vue
rename to apps/www/registry/new-york/example/TypographyLarge.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyLead.vue b/apps/www/registry/new-york/example/TypographyLead.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyLead.vue
rename to apps/www/registry/new-york/example/TypographyLead.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyList.vue b/apps/www/registry/new-york/example/TypographyList.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyList.vue
rename to apps/www/registry/new-york/example/TypographyList.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyMuted.vue b/apps/www/registry/new-york/example/TypographyMuted.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyMuted.vue
rename to apps/www/registry/new-york/example/TypographyMuted.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyP.vue b/apps/www/registry/new-york/example/TypographyP.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyP.vue
rename to apps/www/registry/new-york/example/TypographyP.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographySmall.vue b/apps/www/registry/new-york/example/TypographySmall.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographySmall.vue
rename to apps/www/registry/new-york/example/TypographySmall.vue
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue b/apps/www/registry/new-york/example/TypographyTable.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/TypographyTable.vue
rename to apps/www/registry/new-york/example/TypographyTable.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue b/apps/www/registry/new-york/example/VCalendarDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
rename to apps/www/registry/new-york/example/VCalendarDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue b/apps/www/registry/new-york/example/VDatePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
rename to apps/www/registry/new-york/example/VDatePickerDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue b/apps/www/registry/new-york/example/VDatePickerForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
rename to apps/www/registry/new-york/example/VDatePickerForm.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue b/apps/www/registry/new-york/example/VDatePickerWithPresets.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
rename to apps/www/registry/new-york/example/VDatePickerWithPresets.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue b/apps/www/registry/new-york/example/VDatePickerWithRange.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
rename to apps/www/registry/new-york/example/VDatePickerWithRange.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue b/apps/www/registry/new-york/example/VDateTimePickerDemo.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
rename to apps/www/registry/new-york/example/VDateTimePickerDemo.vue
diff --git a/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue b/apps/www/registry/new-york/example/VRangePickerWithSlot.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
rename to apps/www/registry/new-york/example/VRangePickerWithSlot.vue
diff --git a/apps/www/registry/new-york/lib/utils.ts b/apps/www/registry/new-york/lib/utils.ts
new file mode 100644
index 000000000..4c5199236
--- /dev/null
+++ b/apps/www/registry/new-york/lib/utils.ts
@@ -0,0 +1,15 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue b/apps/www/registry/new-york/ui/accordion/Accordion.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/accordion/Accordion.vue
rename to apps/www/registry/new-york/ui/accordion/Accordion.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/registry/new-york/ui/accordion/AccordionContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/accordion/AccordionContent.vue
rename to apps/www/registry/new-york/ui/accordion/AccordionContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/registry/new-york/ui/accordion/AccordionItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/accordion/AccordionItem.vue
rename to apps/www/registry/new-york/ui/accordion/AccordionItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/registry/new-york/ui/accordion/AccordionTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
rename to apps/www/registry/new-york/ui/accordion/AccordionTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/index.ts b/apps/www/registry/new-york/ui/accordion/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/accordion/index.ts
rename to apps/www/registry/new-york/ui/accordion/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialog.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialog.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
rename to apps/www/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/index.ts b/apps/www/registry/new-york/ui/alert-dialog/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert-dialog/index.ts
rename to apps/www/registry/new-york/ui/alert-dialog/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/registry/new-york/ui/alert/Alert.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
rename to apps/www/registry/new-york/ui/alert/Alert.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue b/apps/www/registry/new-york/ui/alert/AlertDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
rename to apps/www/registry/new-york/ui/alert/AlertDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue b/apps/www/registry/new-york/ui/alert/AlertTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
rename to apps/www/registry/new-york/ui/alert/AlertTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/registry/new-york/ui/alert/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/alert/index.ts
rename to apps/www/registry/new-york/ui/alert/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue b/apps/www/registry/new-york/ui/aspect-ratio/AspectRatio.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/aspect-ratio/AspectRatio.vue
rename to apps/www/registry/new-york/ui/aspect-ratio/AspectRatio.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/aspect-ratio/index.ts b/apps/www/registry/new-york/ui/aspect-ratio/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/aspect-ratio/index.ts
rename to apps/www/registry/new-york/ui/aspect-ratio/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue b/apps/www/registry/new-york/ui/auto-form/AutoForm.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoForm.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormField.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormField.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormLabel.vue b/apps/www/registry/new-york/ui/auto-form/AutoFormLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormLabel.vue
rename to apps/www/registry/new-york/ui/auto-form/AutoFormLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts b/apps/www/registry/new-york/ui/auto-form/constant.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/constant.ts
rename to apps/www/registry/new-york/ui/auto-form/constant.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts b/apps/www/registry/new-york/ui/auto-form/dependencies.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/dependencies.ts
rename to apps/www/registry/new-york/ui/auto-form/dependencies.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/index.ts b/apps/www/registry/new-york/ui/auto-form/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/index.ts
rename to apps/www/registry/new-york/ui/auto-form/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts b/apps/www/registry/new-york/ui/auto-form/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
rename to apps/www/registry/new-york/ui/auto-form/interface.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/utils.ts b/apps/www/registry/new-york/ui/auto-form/utils.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/auto-form/utils.ts
rename to apps/www/registry/new-york/ui/auto-form/utils.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue b/apps/www/registry/new-york/ui/avatar/Avatar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/avatar/Avatar.vue
rename to apps/www/registry/new-york/ui/avatar/Avatar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue b/apps/www/registry/new-york/ui/avatar/AvatarFallback.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/avatar/AvatarFallback.vue
rename to apps/www/registry/new-york/ui/avatar/AvatarFallback.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue b/apps/www/registry/new-york/ui/avatar/AvatarImage.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/avatar/AvatarImage.vue
rename to apps/www/registry/new-york/ui/avatar/AvatarImage.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts b/apps/www/registry/new-york/ui/avatar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/avatar/index.ts
rename to apps/www/registry/new-york/ui/avatar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue b/apps/www/registry/new-york/ui/badge/Badge.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
rename to apps/www/registry/new-york/ui/badge/Badge.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/index.ts b/apps/www/registry/new-york/ui/badge/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/badge/index.ts
rename to apps/www/registry/new-york/ui/badge/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue b/apps/www/registry/new-york/ui/breadcrumb/Breadcrumb.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue
rename to apps/www/registry/new-york/ui/breadcrumb/Breadcrumb.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
rename to apps/www/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts b/apps/www/registry/new-york/ui/breadcrumb/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts
rename to apps/www/registry/new-york/ui/breadcrumb/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/button/Button.vue b/apps/www/registry/new-york/ui/button/Button.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/button/Button.vue
rename to apps/www/registry/new-york/ui/button/Button.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/registry/new-york/ui/button/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/button/index.ts
rename to apps/www/registry/new-york/ui/button/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/registry/new-york/ui/calendar/Calendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
rename to apps/www/registry/new-york/ui/calendar/Calendar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue b/apps/www/registry/new-york/ui/calendar/CalendarCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarCell.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarCell.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue b/apps/www/registry/new-york/ui/calendar/CalendarCellTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarCellTrigger.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarCellTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue b/apps/www/registry/new-york/ui/calendar/CalendarGrid.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarGrid.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarGrid.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue b/apps/www/registry/new-york/ui/calendar/CalendarGridBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridBody.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarGridBody.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue b/apps/www/registry/new-york/ui/calendar/CalendarGridHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridHead.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarGridHead.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue b/apps/www/registry/new-york/ui/calendar/CalendarGridRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarGridRow.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue b/apps/www/registry/new-york/ui/calendar/CalendarHeadCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeadCell.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarHeadCell.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue b/apps/www/registry/new-york/ui/calendar/CalendarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeader.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue b/apps/www/registry/new-york/ui/calendar/CalendarHeading.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarHeading.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarHeading.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue b/apps/www/registry/new-york/ui/calendar/CalendarNextButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarNextButton.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarNextButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue b/apps/www/registry/new-york/ui/calendar/CalendarPrevButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/CalendarPrevButton.vue
rename to apps/www/registry/new-york/ui/calendar/CalendarPrevButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/index.ts b/apps/www/registry/new-york/ui/calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/calendar/index.ts
rename to apps/www/registry/new-york/ui/calendar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/card/Card.vue b/apps/www/registry/new-york/ui/card/Card.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/Card.vue
rename to apps/www/registry/new-york/ui/card/Card.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardContent.vue b/apps/www/registry/new-york/ui/card/CardContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/CardContent.vue
rename to apps/www/registry/new-york/ui/card/CardContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue b/apps/www/registry/new-york/ui/card/CardDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/CardDescription.vue
rename to apps/www/registry/new-york/ui/card/CardDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue b/apps/www/registry/new-york/ui/card/CardFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/CardFooter.vue
rename to apps/www/registry/new-york/ui/card/CardFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue b/apps/www/registry/new-york/ui/card/CardHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/CardHeader.vue
rename to apps/www/registry/new-york/ui/card/CardHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue b/apps/www/registry/new-york/ui/card/CardTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/CardTitle.vue
rename to apps/www/registry/new-york/ui/card/CardTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/card/index.ts b/apps/www/registry/new-york/ui/card/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/card/index.ts
rename to apps/www/registry/new-york/ui/card/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/registry/new-york/ui/carousel/Carousel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
rename to apps/www/registry/new-york/ui/carousel/Carousel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/registry/new-york/ui/carousel/CarouselContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
rename to apps/www/registry/new-york/ui/carousel/CarouselContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/registry/new-york/ui/carousel/CarouselItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
rename to apps/www/registry/new-york/ui/carousel/CarouselItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/registry/new-york/ui/carousel/CarouselNext.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
rename to apps/www/registry/new-york/ui/carousel/CarouselNext.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/registry/new-york/ui/carousel/CarouselPrevious.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
rename to apps/www/registry/new-york/ui/carousel/CarouselPrevious.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/registry/new-york/ui/carousel/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/index.ts
rename to apps/www/registry/new-york/ui/carousel/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/registry/new-york/ui/carousel/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
rename to apps/www/registry/new-york/ui/carousel/interface.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/registry/new-york/ui/carousel/useCarousel.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
rename to apps/www/registry/new-york/ui/carousel/useCarousel.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/registry/new-york/ui/chart-area/AreaChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
rename to apps/www/registry/new-york/ui/chart-area/AreaChart.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/index.ts b/apps/www/registry/new-york/ui/chart-area/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-area/index.ts
rename to apps/www/registry/new-york/ui/chart-area/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/registry/new-york/ui/chart-bar/BarChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
rename to apps/www/registry/new-york/ui/chart-bar/BarChart.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/index.ts b/apps/www/registry/new-york/ui/chart-bar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-bar/index.ts
rename to apps/www/registry/new-york/ui/chart-bar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/registry/new-york/ui/chart-donut/DonutChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
rename to apps/www/registry/new-york/ui/chart-donut/DonutChart.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/index.ts b/apps/www/registry/new-york/ui/chart-donut/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-donut/index.ts
rename to apps/www/registry/new-york/ui/chart-donut/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/registry/new-york/ui/chart-line/LineChart.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
rename to apps/www/registry/new-york/ui/chart-line/LineChart.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/index.ts b/apps/www/registry/new-york/ui/chart-line/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart-line/index.ts
rename to apps/www/registry/new-york/ui/chart-line/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue b/apps/www/registry/new-york/ui/chart/ChartCrosshair.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
rename to apps/www/registry/new-york/ui/chart/ChartCrosshair.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue b/apps/www/registry/new-york/ui/chart/ChartLegend.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
rename to apps/www/registry/new-york/ui/chart/ChartLegend.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue b/apps/www/registry/new-york/ui/chart/ChartSingleTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
rename to apps/www/registry/new-york/ui/chart/ChartSingleTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue b/apps/www/registry/new-york/ui/chart/ChartTooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue
rename to apps/www/registry/new-york/ui/chart/ChartTooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/index.ts b/apps/www/registry/new-york/ui/chart/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/index.ts
rename to apps/www/registry/new-york/ui/chart/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/interface.ts b/apps/www/registry/new-york/ui/chart/interface.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/chart/interface.ts
rename to apps/www/registry/new-york/ui/chart/interface.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/registry/new-york/ui/checkbox/Checkbox.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
rename to apps/www/registry/new-york/ui/checkbox/Checkbox.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/index.ts b/apps/www/registry/new-york/ui/checkbox/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
rename to apps/www/registry/new-york/ui/checkbox/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue b/apps/www/registry/new-york/ui/collapsible/Collapsible.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/collapsible/Collapsible.vue
rename to apps/www/registry/new-york/ui/collapsible/Collapsible.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue b/apps/www/registry/new-york/ui/collapsible/CollapsibleContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleContent.vue
rename to apps/www/registry/new-york/ui/collapsible/CollapsibleContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue b/apps/www/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
rename to apps/www/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/index.ts b/apps/www/registry/new-york/ui/collapsible/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/collapsible/index.ts
rename to apps/www/registry/new-york/ui/collapsible/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/command/Command.vue b/apps/www/registry/new-york/ui/command/Command.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/Command.vue
rename to apps/www/registry/new-york/ui/command/Command.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue b/apps/www/registry/new-york/ui/command/CommandDialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandDialog.vue
rename to apps/www/registry/new-york/ui/command/CommandDialog.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/registry/new-york/ui/command/CommandEmpty.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandEmpty.vue
rename to apps/www/registry/new-york/ui/command/CommandEmpty.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue b/apps/www/registry/new-york/ui/command/CommandGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandGroup.vue
rename to apps/www/registry/new-york/ui/command/CommandGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/registry/new-york/ui/command/CommandInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
rename to apps/www/registry/new-york/ui/command/CommandInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue b/apps/www/registry/new-york/ui/command/CommandItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandItem.vue
rename to apps/www/registry/new-york/ui/command/CommandItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandList.vue b/apps/www/registry/new-york/ui/command/CommandList.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandList.vue
rename to apps/www/registry/new-york/ui/command/CommandList.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/registry/new-york/ui/command/CommandSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandSeparator.vue
rename to apps/www/registry/new-york/ui/command/CommandSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/registry/new-york/ui/command/CommandShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
rename to apps/www/registry/new-york/ui/command/CommandShortcut.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/command/index.ts b/apps/www/registry/new-york/ui/command/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/command/index.ts
rename to apps/www/registry/new-york/ui/command/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenu.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuGroup.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuPortal.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuPortal.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuPortal.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSub.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuSub.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue b/apps/www/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
rename to apps/www/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/index.ts b/apps/www/registry/new-york/ui/context-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/context-menu/index.ts
rename to apps/www/registry/new-york/ui/context-menu/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue b/apps/www/registry/new-york/ui/dialog/Dialog.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/Dialog.vue
rename to apps/www/registry/new-york/ui/dialog/Dialog.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue b/apps/www/registry/new-york/ui/dialog/DialogClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogClose.vue
rename to apps/www/registry/new-york/ui/dialog/DialogClose.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/registry/new-york/ui/dialog/DialogContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
rename to apps/www/registry/new-york/ui/dialog/DialogContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/registry/new-york/ui/dialog/DialogDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogDescription.vue
rename to apps/www/registry/new-york/ui/dialog/DialogDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue b/apps/www/registry/new-york/ui/dialog/DialogFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogFooter.vue
rename to apps/www/registry/new-york/ui/dialog/DialogFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/registry/new-york/ui/dialog/DialogHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
rename to apps/www/registry/new-york/ui/dialog/DialogHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/registry/new-york/ui/dialog/DialogScrollContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
rename to apps/www/registry/new-york/ui/dialog/DialogScrollContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/registry/new-york/ui/dialog/DialogTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
rename to apps/www/registry/new-york/ui/dialog/DialogTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue b/apps/www/registry/new-york/ui/dialog/DialogTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/DialogTrigger.vue
rename to apps/www/registry/new-york/ui/dialog/DialogTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/index.ts b/apps/www/registry/new-york/ui/dialog/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dialog/index.ts
rename to apps/www/registry/new-york/ui/dialog/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue b/apps/www/registry/new-york/ui/drawer/Drawer.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/Drawer.vue
rename to apps/www/registry/new-york/ui/drawer/Drawer.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue b/apps/www/registry/new-york/ui/drawer/DrawerContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerContent.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue b/apps/www/registry/new-york/ui/drawer/DrawerDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerFooter.vue b/apps/www/registry/new-york/ui/drawer/DrawerFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerFooter.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue b/apps/www/registry/new-york/ui/drawer/DrawerHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue b/apps/www/registry/new-york/ui/drawer/DrawerOverlay.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerOverlay.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerOverlay.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue b/apps/www/registry/new-york/ui/drawer/DrawerTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue
rename to apps/www/registry/new-york/ui/drawer/DrawerTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/index.ts b/apps/www/registry/new-york/ui/drawer/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/drawer/index.ts
rename to apps/www/registry/new-york/ui/drawer/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
rename to apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts b/apps/www/registry/new-york/ui/dropdown-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts
rename to apps/www/registry/new-york/ui/dropdown-menu/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue b/apps/www/registry/new-york/ui/form/FormControl.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
rename to apps/www/registry/new-york/ui/form/FormControl.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue b/apps/www/registry/new-york/ui/form/FormDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
rename to apps/www/registry/new-york/ui/form/FormDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/registry/new-york/ui/form/FormItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
rename to apps/www/registry/new-york/ui/form/FormItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/registry/new-york/ui/form/FormLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
rename to apps/www/registry/new-york/ui/form/FormLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue b/apps/www/registry/new-york/ui/form/FormMessage.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/FormMessage.vue
rename to apps/www/registry/new-york/ui/form/FormMessage.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/form/index.ts b/apps/www/registry/new-york/ui/form/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/index.ts
rename to apps/www/registry/new-york/ui/form/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts b/apps/www/registry/new-york/ui/form/injectionKeys.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts
rename to apps/www/registry/new-york/ui/form/injectionKeys.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts b/apps/www/registry/new-york/ui/form/useFormField.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
rename to apps/www/registry/new-york/ui/form/useFormField.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue b/apps/www/registry/new-york/ui/hover-card/HoverCard.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/hover-card/HoverCard.vue
rename to apps/www/registry/new-york/ui/hover-card/HoverCard.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/registry/new-york/ui/hover-card/HoverCardContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
rename to apps/www/registry/new-york/ui/hover-card/HoverCardContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue b/apps/www/registry/new-york/ui/hover-card/HoverCardTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardTrigger.vue
rename to apps/www/registry/new-york/ui/hover-card/HoverCardTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/index.ts b/apps/www/registry/new-york/ui/hover-card/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/hover-card/index.ts
rename to apps/www/registry/new-york/ui/hover-card/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/input/Input.vue b/apps/www/registry/new-york/ui/input/Input.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/input/Input.vue
rename to apps/www/registry/new-york/ui/input/Input.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/input/index.ts b/apps/www/registry/new-york/ui/input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/input/index.ts
rename to apps/www/registry/new-york/ui/input/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/registry/new-york/ui/label/Label.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/label/Label.vue
rename to apps/www/registry/new-york/ui/label/Label.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/label/index.ts b/apps/www/registry/new-york/ui/label/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/label/index.ts
rename to apps/www/registry/new-york/ui/label/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/registry/new-york/ui/menubar/Menubar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
rename to apps/www/registry/new-york/ui/menubar/Menubar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/registry/new-york/ui/menubar/MenubarContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue b/apps/www/registry/new-york/ui/menubar/MenubarGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarGroup.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/registry/new-york/ui/menubar/MenubarItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/registry/new-york/ui/menubar/MenubarLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue b/apps/www/registry/new-york/ui/menubar/MenubarMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarMenu.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue b/apps/www/registry/new-york/ui/menubar/MenubarRadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioGroup.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarRadioGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/registry/new-york/ui/menubar/MenubarRadioItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarRadioItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/registry/new-york/ui/menubar/MenubarSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarSeparator.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/registry/new-york/ui/menubar/MenubarShortcut.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarShortcut.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue b/apps/www/registry/new-york/ui/menubar/MenubarSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarSub.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarSub.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/registry/new-york/ui/menubar/MenubarSubContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarSubContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/registry/new-york/ui/menubar/MenubarSubTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarSubTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/registry/new-york/ui/menubar/MenubarTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/MenubarTrigger.vue
rename to apps/www/registry/new-york/ui/menubar/MenubarTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/index.ts b/apps/www/registry/new-york/ui/menubar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/menubar/index.ts
rename to apps/www/registry/new-york/ui/menubar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenu.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
rename to apps/www/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts b/apps/www/registry/new-york/ui/navigation-menu/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
rename to apps/www/registry/new-york/ui/navigation-menu/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue b/apps/www/registry/new-york/ui/number-field/NumberField.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/NumberField.vue
rename to apps/www/registry/new-york/ui/number-field/NumberField.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue b/apps/www/registry/new-york/ui/number-field/NumberFieldContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
rename to apps/www/registry/new-york/ui/number-field/NumberFieldContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue b/apps/www/registry/new-york/ui/number-field/NumberFieldDecrement.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
rename to apps/www/registry/new-york/ui/number-field/NumberFieldDecrement.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue b/apps/www/registry/new-york/ui/number-field/NumberFieldIncrement.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
rename to apps/www/registry/new-york/ui/number-field/NumberFieldIncrement.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue b/apps/www/registry/new-york/ui/number-field/NumberFieldInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
rename to apps/www/registry/new-york/ui/number-field/NumberFieldInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/index.ts b/apps/www/registry/new-york/ui/number-field/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/number-field/index.ts
rename to apps/www/registry/new-york/ui/number-field/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/registry/new-york/ui/pagination/PaginationEllipsis.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
rename to apps/www/registry/new-york/ui/pagination/PaginationEllipsis.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/registry/new-york/ui/pagination/PaginationFirst.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
rename to apps/www/registry/new-york/ui/pagination/PaginationFirst.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/registry/new-york/ui/pagination/PaginationLast.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
rename to apps/www/registry/new-york/ui/pagination/PaginationLast.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/registry/new-york/ui/pagination/PaginationNext.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
rename to apps/www/registry/new-york/ui/pagination/PaginationNext.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/registry/new-york/ui/pagination/PaginationPrev.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
rename to apps/www/registry/new-york/ui/pagination/PaginationPrev.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/index.ts b/apps/www/registry/new-york/ui/pagination/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pagination/index.ts
rename to apps/www/registry/new-york/ui/pagination/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue b/apps/www/registry/new-york/ui/pin-input/PinInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue
rename to apps/www/registry/new-york/ui/pin-input/PinInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue b/apps/www/registry/new-york/ui/pin-input/PinInputGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
rename to apps/www/registry/new-york/ui/pin-input/PinInputGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue b/apps/www/registry/new-york/ui/pin-input/PinInputInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
rename to apps/www/registry/new-york/ui/pin-input/PinInputInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue b/apps/www/registry/new-york/ui/pin-input/PinInputSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
rename to apps/www/registry/new-york/ui/pin-input/PinInputSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts b/apps/www/registry/new-york/ui/pin-input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
rename to apps/www/registry/new-york/ui/pin-input/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/Popover.vue b/apps/www/registry/new-york/ui/popover/Popover.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/popover/Popover.vue
rename to apps/www/registry/new-york/ui/popover/Popover.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/registry/new-york/ui/popover/PopoverContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
rename to apps/www/registry/new-york/ui/popover/PopoverContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue b/apps/www/registry/new-york/ui/popover/PopoverTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/popover/PopoverTrigger.vue
rename to apps/www/registry/new-york/ui/popover/PopoverTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/popover/index.ts b/apps/www/registry/new-york/ui/popover/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/popover/index.ts
rename to apps/www/registry/new-york/ui/popover/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/Progress.vue b/apps/www/registry/new-york/ui/progress/Progress.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
rename to apps/www/registry/new-york/ui/progress/Progress.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/progress/index.ts b/apps/www/registry/new-york/ui/progress/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/progress/index.ts
rename to apps/www/registry/new-york/ui/progress/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/registry/new-york/ui/radio-group/RadioGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
rename to apps/www/registry/new-york/ui/radio-group/RadioGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/registry/new-york/ui/radio-group/RadioGroupItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
rename to apps/www/registry/new-york/ui/radio-group/RadioGroupItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/index.ts b/apps/www/registry/new-york/ui/radio-group/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/radio-group/index.ts
rename to apps/www/registry/new-york/ui/radio-group/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendar.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
rename to apps/www/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts b/apps/www/registry/new-york/ui/range-calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/range-calendar/index.ts
rename to apps/www/registry/new-york/ui/range-calendar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue b/apps/www/registry/new-york/ui/resizable/ResizableHandle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue
rename to apps/www/registry/new-york/ui/resizable/ResizableHandle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue b/apps/www/registry/new-york/ui/resizable/ResizablePanelGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue
rename to apps/www/registry/new-york/ui/resizable/ResizablePanelGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/index.ts b/apps/www/registry/new-york/ui/resizable/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/resizable/index.ts
rename to apps/www/registry/new-york/ui/resizable/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue b/apps/www/registry/new-york/ui/scroll-area/ScrollArea.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollArea.vue
rename to apps/www/registry/new-york/ui/scroll-area/ScrollArea.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/registry/new-york/ui/scroll-area/ScrollBar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
rename to apps/www/registry/new-york/ui/scroll-area/ScrollBar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/index.ts b/apps/www/registry/new-york/ui/scroll-area/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/scroll-area/index.ts
rename to apps/www/registry/new-york/ui/scroll-area/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/select/Select.vue b/apps/www/registry/new-york/ui/select/Select.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/Select.vue
rename to apps/www/registry/new-york/ui/select/Select.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/registry/new-york/ui/select/SelectContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
rename to apps/www/registry/new-york/ui/select/SelectContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue b/apps/www/registry/new-york/ui/select/SelectGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectGroup.vue
rename to apps/www/registry/new-york/ui/select/SelectGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/registry/new-york/ui/select/SelectItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
rename to apps/www/registry/new-york/ui/select/SelectItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue b/apps/www/registry/new-york/ui/select/SelectItemText.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectItemText.vue
rename to apps/www/registry/new-york/ui/select/SelectItemText.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue b/apps/www/registry/new-york/ui/select/SelectLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
rename to apps/www/registry/new-york/ui/select/SelectLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/registry/new-york/ui/select/SelectScrollDownButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectScrollDownButton.vue
rename to apps/www/registry/new-york/ui/select/SelectScrollDownButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/registry/new-york/ui/select/SelectScrollUpButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectScrollUpButton.vue
rename to apps/www/registry/new-york/ui/select/SelectScrollUpButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue b/apps/www/registry/new-york/ui/select/SelectSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectSeparator.vue
rename to apps/www/registry/new-york/ui/select/SelectSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/registry/new-york/ui/select/SelectTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
rename to apps/www/registry/new-york/ui/select/SelectTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue b/apps/www/registry/new-york/ui/select/SelectValue.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/SelectValue.vue
rename to apps/www/registry/new-york/ui/select/SelectValue.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/select/index.ts b/apps/www/registry/new-york/ui/select/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/select/index.ts
rename to apps/www/registry/new-york/ui/select/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/Separator.vue b/apps/www/registry/new-york/ui/separator/Separator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
rename to apps/www/registry/new-york/ui/separator/Separator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/separator/index.ts b/apps/www/registry/new-york/ui/separator/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/separator/index.ts
rename to apps/www/registry/new-york/ui/separator/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue b/apps/www/registry/new-york/ui/sheet/Sheet.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/Sheet.vue
rename to apps/www/registry/new-york/ui/sheet/Sheet.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue b/apps/www/registry/new-york/ui/sheet/SheetClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetClose.vue
rename to apps/www/registry/new-york/ui/sheet/SheetClose.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/registry/new-york/ui/sheet/SheetContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
rename to apps/www/registry/new-york/ui/sheet/SheetContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue b/apps/www/registry/new-york/ui/sheet/SheetDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetDescription.vue
rename to apps/www/registry/new-york/ui/sheet/SheetDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue b/apps/www/registry/new-york/ui/sheet/SheetFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetFooter.vue
rename to apps/www/registry/new-york/ui/sheet/SheetFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/registry/new-york/ui/sheet/SheetHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
rename to apps/www/registry/new-york/ui/sheet/SheetHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue b/apps/www/registry/new-york/ui/sheet/SheetTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetTitle.vue
rename to apps/www/registry/new-york/ui/sheet/SheetTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue b/apps/www/registry/new-york/ui/sheet/SheetTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/SheetTrigger.vue
rename to apps/www/registry/new-york/ui/sheet/SheetTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts b/apps/www/registry/new-york/ui/sheet/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sheet/index.ts
rename to apps/www/registry/new-york/ui/sheet/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/registry/new-york/ui/sidebar/Sidebar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue
rename to apps/www/registry/new-york/ui/sidebar/Sidebar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarContent.vue b/apps/www/registry/new-york/ui/sidebar/SidebarContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarContent.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarFooter.vue b/apps/www/registry/new-york/ui/sidebar/SidebarFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarFooter.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroup.vue b/apps/www/registry/new-york/ui/sidebar/SidebarGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroup.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue b/apps/www/registry/new-york/ui/sidebar/SidebarGroupAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarGroupAction.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupContent.vue b/apps/www/registry/new-york/ui/sidebar/SidebarGroupContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupContent.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarGroupContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue b/apps/www/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarHeader.vue b/apps/www/registry/new-york/ui/sidebar/SidebarHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarHeader.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInput.vue b/apps/www/registry/new-york/ui/sidebar/SidebarInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInput.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInset.vue b/apps/www/registry/new-york/ui/sidebar/SidebarInset.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInset.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarInset.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenu.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenu.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenu.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenu.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuAction.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuBadge.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButton.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButton.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuItem.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuItem.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSub.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuSub.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSub.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuSub.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue b/apps/www/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue b/apps/www/registry/new-york/ui/sidebar/SidebarProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarProvider.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarRail.vue b/apps/www/registry/new-york/ui/sidebar/SidebarRail.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarRail.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarRail.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarSeparator.vue b/apps/www/registry/new-york/ui/sidebar/SidebarSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarSeparator.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/SidebarTrigger.vue b/apps/www/registry/new-york/ui/sidebar/SidebarTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/SidebarTrigger.vue
rename to apps/www/registry/new-york/ui/sidebar/SidebarTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/index.ts b/apps/www/registry/new-york/ui/sidebar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/index.ts
rename to apps/www/registry/new-york/ui/sidebar/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts b/apps/www/registry/new-york/ui/sidebar/utils.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts
rename to apps/www/registry/new-york/ui/sidebar/utils.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue b/apps/www/registry/new-york/ui/skeleton/Skeleton.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/skeleton/Skeleton.vue
rename to apps/www/registry/new-york/ui/skeleton/Skeleton.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/skeleton/index.ts b/apps/www/registry/new-york/ui/skeleton/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/skeleton/index.ts
rename to apps/www/registry/new-york/ui/skeleton/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/registry/new-york/ui/slider/Slider.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
rename to apps/www/registry/new-york/ui/slider/Slider.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/slider/index.ts b/apps/www/registry/new-york/ui/slider/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/slider/index.ts
rename to apps/www/registry/new-york/ui/slider/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue b/apps/www/registry/new-york/ui/sonner/Sonner.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sonner/Sonner.vue
rename to apps/www/registry/new-york/ui/sonner/Sonner.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/sonner/index.ts b/apps/www/registry/new-york/ui/sonner/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/sonner/index.ts
rename to apps/www/registry/new-york/ui/sonner/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue b/apps/www/registry/new-york/ui/stepper/Stepper.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/Stepper.vue
rename to apps/www/registry/new-york/ui/stepper/Stepper.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue b/apps/www/registry/new-york/ui/stepper/StepperDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperDescription.vue
rename to apps/www/registry/new-york/ui/stepper/StepperDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue b/apps/www/registry/new-york/ui/stepper/StepperIndicator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperIndicator.vue
rename to apps/www/registry/new-york/ui/stepper/StepperIndicator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue b/apps/www/registry/new-york/ui/stepper/StepperItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperItem.vue
rename to apps/www/registry/new-york/ui/stepper/StepperItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue b/apps/www/registry/new-york/ui/stepper/StepperSeparator.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperSeparator.vue
rename to apps/www/registry/new-york/ui/stepper/StepperSeparator.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue b/apps/www/registry/new-york/ui/stepper/StepperTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperTitle.vue
rename to apps/www/registry/new-york/ui/stepper/StepperTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue b/apps/www/registry/new-york/ui/stepper/StepperTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/StepperTrigger.vue
rename to apps/www/registry/new-york/ui/stepper/StepperTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/stepper/index.ts b/apps/www/registry/new-york/ui/stepper/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/stepper/index.ts
rename to apps/www/registry/new-york/ui/stepper/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/registry/new-york/ui/switch/Switch.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
rename to apps/www/registry/new-york/ui/switch/Switch.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/index.ts b/apps/www/registry/new-york/ui/switch/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/switch/index.ts
rename to apps/www/registry/new-york/ui/switch/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/table/Table.vue b/apps/www/registry/new-york/ui/table/Table.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/Table.vue
rename to apps/www/registry/new-york/ui/table/Table.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableBody.vue b/apps/www/registry/new-york/ui/table/TableBody.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableBody.vue
rename to apps/www/registry/new-york/ui/table/TableBody.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue b/apps/www/registry/new-york/ui/table/TableCaption.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableCaption.vue
rename to apps/www/registry/new-york/ui/table/TableCaption.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/registry/new-york/ui/table/TableCell.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
rename to apps/www/registry/new-york/ui/table/TableCell.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue b/apps/www/registry/new-york/ui/table/TableEmpty.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
rename to apps/www/registry/new-york/ui/table/TableEmpty.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue b/apps/www/registry/new-york/ui/table/TableFooter.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableFooter.vue
rename to apps/www/registry/new-york/ui/table/TableFooter.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/registry/new-york/ui/table/TableHead.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
rename to apps/www/registry/new-york/ui/table/TableHead.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue b/apps/www/registry/new-york/ui/table/TableHeader.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableHeader.vue
rename to apps/www/registry/new-york/ui/table/TableHeader.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableRow.vue b/apps/www/registry/new-york/ui/table/TableRow.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/TableRow.vue
rename to apps/www/registry/new-york/ui/table/TableRow.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/table/index.ts b/apps/www/registry/new-york/ui/table/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/table/index.ts
rename to apps/www/registry/new-york/ui/table/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue b/apps/www/registry/new-york/ui/tabs/Tabs.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tabs/Tabs.vue
rename to apps/www/registry/new-york/ui/tabs/Tabs.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue b/apps/www/registry/new-york/ui/tabs/TabsContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tabs/TabsContent.vue
rename to apps/www/registry/new-york/ui/tabs/TabsContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/registry/new-york/ui/tabs/TabsList.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
rename to apps/www/registry/new-york/ui/tabs/TabsList.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/registry/new-york/ui/tabs/TabsTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
rename to apps/www/registry/new-york/ui/tabs/TabsTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/index.ts b/apps/www/registry/new-york/ui/tabs/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tabs/index.ts
rename to apps/www/registry/new-york/ui/tabs/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue b/apps/www/registry/new-york/ui/tags-input/TagsInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
rename to apps/www/registry/new-york/ui/tags-input/TagsInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue b/apps/www/registry/new-york/ui/tags-input/TagsInputInput.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
rename to apps/www/registry/new-york/ui/tags-input/TagsInputInput.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue b/apps/www/registry/new-york/ui/tags-input/TagsInputItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
rename to apps/www/registry/new-york/ui/tags-input/TagsInputItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
rename to apps/www/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue b/apps/www/registry/new-york/ui/tags-input/TagsInputItemText.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
rename to apps/www/registry/new-york/ui/tags-input/TagsInputItemText.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts b/apps/www/registry/new-york/ui/tags-input/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tags-input/index.ts
rename to apps/www/registry/new-york/ui/tags-input/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue b/apps/www/registry/new-york/ui/textarea/Textarea.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
rename to apps/www/registry/new-york/ui/textarea/Textarea.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/textarea/index.ts b/apps/www/registry/new-york/ui/textarea/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/textarea/index.ts
rename to apps/www/registry/new-york/ui/textarea/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/registry/new-york/ui/toast/Toast.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
rename to apps/www/registry/new-york/ui/toast/Toast.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue b/apps/www/registry/new-york/ui/toast/ToastAction.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastAction.vue
rename to apps/www/registry/new-york/ui/toast/ToastAction.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/registry/new-york/ui/toast/ToastClose.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
rename to apps/www/registry/new-york/ui/toast/ToastClose.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/registry/new-york/ui/toast/ToastDescription.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
rename to apps/www/registry/new-york/ui/toast/ToastDescription.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue b/apps/www/registry/new-york/ui/toast/ToastProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastProvider.vue
rename to apps/www/registry/new-york/ui/toast/ToastProvider.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue b/apps/www/registry/new-york/ui/toast/ToastTitle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
rename to apps/www/registry/new-york/ui/toast/ToastTitle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/registry/new-york/ui/toast/ToastViewport.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
rename to apps/www/registry/new-york/ui/toast/ToastViewport.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue b/apps/www/registry/new-york/ui/toast/Toaster.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
rename to apps/www/registry/new-york/ui/toast/Toaster.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/registry/new-york/ui/toast/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/index.ts
rename to apps/www/registry/new-york/ui/toast/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts b/apps/www/registry/new-york/ui/toast/use-toast.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
rename to apps/www/registry/new-york/ui/toast/use-toast.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue b/apps/www/registry/new-york/ui/toggle-group/ToggleGroup.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroup.vue
rename to apps/www/registry/new-york/ui/toggle-group/ToggleGroup.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue b/apps/www/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
rename to apps/www/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle-group/index.ts b/apps/www/registry/new-york/ui/toggle-group/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toggle-group/index.ts
rename to apps/www/registry/new-york/ui/toggle-group/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue b/apps/www/registry/new-york/ui/toggle/Toggle.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
rename to apps/www/registry/new-york/ui/toggle/Toggle.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts b/apps/www/registry/new-york/ui/toggle/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/toggle/index.ts
rename to apps/www/registry/new-york/ui/toggle/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue b/apps/www/registry/new-york/ui/tooltip/Tooltip.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tooltip/Tooltip.vue
rename to apps/www/registry/new-york/ui/tooltip/Tooltip.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/registry/new-york/ui/tooltip/TooltipContent.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
rename to apps/www/registry/new-york/ui/tooltip/TooltipContent.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue b/apps/www/registry/new-york/ui/tooltip/TooltipProvider.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tooltip/TooltipProvider.vue
rename to apps/www/registry/new-york/ui/tooltip/TooltipProvider.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue b/apps/www/registry/new-york/ui/tooltip/TooltipTrigger.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue
rename to apps/www/registry/new-york/ui/tooltip/TooltipTrigger.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/index.ts b/apps/www/registry/new-york/ui/tooltip/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/tooltip/index.ts
rename to apps/www/registry/new-york/ui/tooltip/index.ts
diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue b/apps/www/registry/new-york/ui/v-calendar/Calendar.vue
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
rename to apps/www/registry/new-york/ui/v-calendar/Calendar.vue
diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts b/apps/www/registry/new-york/ui/v-calendar/index.ts
similarity index 100%
rename from apps/www/src/lib/registry/new-york/ui/v-calendar/index.ts
rename to apps/www/registry/new-york/ui/v-calendar/index.ts
diff --git a/apps/www/src/lib/registry/themes.ts b/apps/www/registry/registry-base-colors.ts
similarity index 83%
rename from apps/www/src/lib/registry/themes.ts
rename to apps/www/registry/registry-base-colors.ts
index cdc2103ec..b03d549a2 100644
--- a/apps/www/src/lib/registry/themes.ts
+++ b/apps/www/registry/registry-base-colors.ts
@@ -1,4 +1,4 @@
-export const themes = [
+export const baseColors = [
   {
     name: 'zinc',
     label: 'Zinc',
@@ -28,6 +28,11 @@ export const themes = [
         'input': '240 5.9% 90%',
         'ring': '240 5.9% 10%',
         'radius': '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '240 10% 3.9%',
@@ -49,6 +54,11 @@ export const themes = [
         'border': '240 3.7% 15.9%',
         'input': '240 3.7% 15.9%',
         'ring': '240 4.9% 83.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -81,6 +91,11 @@ export const themes = [
         'input': '214.3 31.8% 91.4%',
         'ring': '222.2 84% 4.9%',
         'radius': '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '222.2 84% 4.9%',
@@ -102,6 +117,11 @@ export const themes = [
         'border': '217.2 32.6% 17.5%',
         'input': '217.2 32.6% 17.5%',
         'ring': '212.7 26.8% 83.9',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -134,6 +154,11 @@ export const themes = [
         'input': '20 5.9% 90%',
         'ring': '20 14.3% 4.1%',
         'radius': '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '20 14.3% 4.1%',
@@ -155,6 +180,11 @@ export const themes = [
         'border': '12 6.5% 15.1%',
         'input': '12 6.5% 15.1%',
         'ring': '24 5.7% 82.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -187,6 +217,11 @@ export const themes = [
         'input': '220 13% 91%',
         'ring': '224 71.4% 4.1%',
         'radius': '0.35rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '224 71.4% 4.1%',
@@ -208,6 +243,11 @@ export const themes = [
         'border': '215 27.9% 16.9%',
         'input': '215 27.9% 16.9%',
         'ring': '216 12.2% 83.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -239,6 +279,11 @@ export const themes = [
         'border': '0 0% 89.8%',
         'input': '0 0% 89.8%',
         'ring': '0 0% 3.9%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '0 0% 3.9%',
@@ -260,6 +305,11 @@ export const themes = [
         'border': '0 0% 14.9%',
         'input': '0 0% 14.9%',
         'ring': '0 0% 83.1%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -292,6 +342,11 @@ export const themes = [
         'input': '0 0% 89.8%',
         'ring': '0 72.2% 50.6%',
         'radius': '0.4rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '0 0% 3.9%',
@@ -313,6 +368,11 @@ export const themes = [
         'border': '0 0% 14.9%',
         'input': '0 0% 14.9%',
         'ring': '0 72.2% 50.6%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -345,6 +405,11 @@ export const themes = [
         'input': '240 5.9% 90%',
         'ring': '346.8 77.2% 49.8%',
         'radius': '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '20 14.3% 4.1%',
@@ -366,6 +431,11 @@ export const themes = [
         'border': '240 3.7% 15.9%',
         'input': '240 3.7% 15.9%',
         'ring': '346.8 77.2% 49.8%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -398,6 +468,11 @@ export const themes = [
         'input': '20 5.9% 90%',
         'ring': '24.6 95% 53.1%',
         'radius': '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '20 14.3% 4.1%',
@@ -419,6 +494,11 @@ export const themes = [
         'border': '12 6.5% 15.1%',
         'input': '12 6.5% 15.1%',
         'ring': '20.5 90.2% 48.2%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -450,6 +530,11 @@ export const themes = [
         'border': '240 5.9% 90%',
         'input': '240 5.9% 90%',
         'ring': '142.1 76.2% 36.3%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '20 14.3% 4.1%',
@@ -471,6 +556,11 @@ export const themes = [
         'border': '240 3.7% 15.9%',
         'input': '240 3.7% 15.9%',
         'ring': '142.4 71.8% 29.2%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -502,6 +592,11 @@ export const themes = [
         'border': '214.3 31.8% 91.4%',
         'input': '214.3 31.8% 91.4%',
         'ring': '221.2 83.2% 53.3%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '222.2 84% 4.9%',
@@ -523,6 +618,11 @@ export const themes = [
         'border': '217.2 32.6% 17.5%',
         'input': '217.2 32.6% 17.5%',
         'ring': '224.3 76.3% 48%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -555,6 +655,11 @@ export const themes = [
         'input': '20 5.9% 90%',
         'ring': '20 14.3% 4.1%',
         'radius': '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '20 14.3% 4.1%',
@@ -576,6 +681,11 @@ export const themes = [
         'border': '12 6.5% 15.1%',
         'input': '12 6.5% 15.1%',
         'ring': '35.5 91.7% 32.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
@@ -607,6 +717,11 @@ export const themes = [
         'border': '220 13% 91%',
         'input': '220 13% 91%',
         'ring': '262.1 83.3% 57.8%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
         'background': '224 71.4% 4.1%',
@@ -628,9 +743,14 @@ export const themes = [
         'border': '215 27.9% 16.9%',
         'input': '215 27.9% 16.9%',
         'ring': '263.4 70% 50.4%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
 ] as const
 
-export type Theme = (typeof themes)[number]
+export type BaseColor = (typeof baseColors)[number]
diff --git a/apps/www/src/lib/registry/colors.ts b/apps/www/registry/registry-colors.ts
similarity index 99%
rename from apps/www/src/lib/registry/colors.ts
rename to apps/www/registry/registry-colors.ts
index e089777fb..866b8eaca 100644
--- a/apps/www/src/lib/registry/colors.ts
+++ b/apps/www/registry/registry-colors.ts
@@ -1531,6 +1531,11 @@ export const colorMapping = {
     'border': '{{base}}-200',
     'input': '{{base}}-200',
     'ring': '{{base}}-950',
+    'chart-1': '12 76% 61%',
+    'chart-2': '173 58% 39%',
+    'chart-3': '197 37% 24%',
+    'chart-4': '43 74% 66%',
+    'chart-5': '27 87% 67%',
   },
   dark: {
     'background': '{{base}}-950',
@@ -1552,5 +1557,10 @@ export const colorMapping = {
     'border': '{{base}}-800',
     'input': '{{base}}-800',
     'ring': '{{base}}-300',
+    'chart-1': '220 70% 50%',
+    'chart-2': '160 60% 45%',
+    'chart-3': '30 80% 55%',
+    'chart-4': '280 65% 60%',
+    'chart-5': '340 75% 55%',
   },
 } as const
diff --git a/apps/www/registry/registry-icons.ts b/apps/www/registry/registry-icons.ts
new file mode 100644
index 000000000..d3428a296
--- /dev/null
+++ b/apps/www/registry/registry-icons.ts
@@ -0,0 +1,166 @@
+export const iconLibraries = {
+  lucide: {
+    name: 'lucide-vue-next',
+    package: 'lucide-vue-next',
+    import: 'lucide-vue-next',
+  },
+  radix: {
+    name: '@radix-icons/vue',
+    package: '@radix-icons/vue',
+    import: '@radix-icons/vue',
+  },
+} as const
+
+export const icons: Record<
+  string,
+  Record<keyof typeof iconLibraries, string>
+> = {
+  AlertCircle: {
+    lucide: 'AlertCircle',
+    radix: 'ExclamationTriangleIcon',
+  },
+  ArrowLeft: {
+    lucide: 'ArrowLeft',
+    radix: 'ArrowLeftIcon',
+  },
+  ArrowRight: {
+    lucide: 'ArrowRight',
+    radix: 'ArrowRightIcon',
+  },
+  ArrowUpDown: {
+    lucide: 'ArrowUpDown',
+    radix: 'CaretSortIcon',
+  },
+  BellRing: {
+    lucide: 'BellRing',
+    radix: 'BellIcon',
+  },
+  Bold: {
+    lucide: 'Bold',
+    radix: 'FontBoldIcon',
+  },
+  Calculator: {
+    lucide: 'Calculator',
+    radix: 'ComponentPlaceholderIcon',
+  },
+  Calendar: {
+    lucide: 'Calendar',
+    radix: 'CalendarIcon',
+  },
+  Check: {
+    lucide: 'Check',
+    radix: 'CheckIcon',
+  },
+  ChevronDown: {
+    lucide: 'ChevronDown',
+    radix: 'ChevronDownIcon',
+  },
+  ChevronLeft: {
+    lucide: 'ChevronLeft',
+    radix: 'ChevronLeftIcon',
+  },
+  ChevronRight: {
+    lucide: 'ChevronRight',
+    radix: 'ChevronRightIcon',
+  },
+  ChevronUp: {
+    lucide: 'ChevronUp',
+    radix: 'ChevronUpIcon',
+  },
+  ChevronsUpDown: {
+    lucide: 'ChevronsUpDown',
+    radix: 'CaretSortIcon',
+  },
+  Circle: {
+    lucide: 'Circle',
+    radix: 'DotFilledIcon',
+  },
+  Copy: {
+    lucide: 'Copy',
+    radix: 'CopyIcon',
+  },
+  CreditCard: {
+    lucide: 'CreditCard',
+    radix: 'ComponentPlaceholderIcon',
+  },
+  GripVertical: {
+    lucide: 'GripVertical',
+    radix: 'DragHandleDots2Icon',
+  },
+  Italic: {
+    lucide: 'Italic',
+    radix: 'FontItalicIcon',
+  },
+  Loader2: {
+    lucide: 'Loader2',
+    radix: 'ReloadIcon',
+  },
+  Mail: {
+    lucide: 'Mail',
+    radix: 'EnvelopeClosedIcon',
+  },
+  MailOpen: {
+    lucide: 'MailOpen',
+    radix: 'EnvelopeOpenIcon',
+  },
+  Minus: {
+    lucide: 'Minus',
+    radix: 'MinusIcon',
+  },
+  Moon: {
+    lucide: 'Moon',
+    radix: 'MoonIcon',
+  },
+  MoreHorizontal: {
+    lucide: 'MoreHorizontal',
+    radix: 'DotsHorizontalIcon',
+  },
+  PanelLeft: {
+    lucide: 'PanelLeft',
+    radix: 'ViewVerticalIcon',
+  },
+  Plus: {
+    lucide: 'Plus',
+    radix: 'PlusIcon',
+  },
+  Search: {
+    lucide: 'Search',
+    radix: 'MagnifyingGlassIcon',
+  },
+  Send: {
+    lucide: 'Send',
+    radix: 'PaperPlaneIcon',
+  },
+  Settings: {
+    lucide: 'Settings',
+    radix: 'GearIcon',
+  },
+  Slash: {
+    lucide: 'Slash',
+    radix: 'SlashIcon',
+  },
+  Smile: {
+    lucide: 'Smile',
+    radix: 'FaceIcon',
+  },
+  Sun: {
+    lucide: 'Sun',
+    radix: 'SunIcon',
+  },
+  Terminal: {
+    lucide: 'Terminal',
+    radix: 'RocketIcon',
+  },
+  Underline: {
+    lucide: 'Underline',
+    radix: 'UnderlineIcon',
+  },
+  User: {
+    lucide: 'User',
+    radix: 'PersonIcon',
+  },
+  X: {
+    lucide: 'X',
+    radix: 'Cross2Icon',
+  },
+} as const
diff --git a/apps/www/registry/registry-lib.ts b/apps/www/registry/registry-lib.ts
new file mode 100644
index 000000000..ddc40c9ea
--- /dev/null
+++ b/apps/www/registry/registry-lib.ts
@@ -0,0 +1,15 @@
+import type { Registry } from '../registry/schema'
+
+export const lib: Registry = [
+  {
+    name: 'utils',
+    type: 'registry:lib',
+    dependencies: ['clsx', 'tailwind-merge'],
+    files: [
+      {
+        path: 'lib/utils.ts',
+        type: 'registry:lib',
+      },
+    ],
+  },
+]
diff --git a/apps/www/src/lib/registry/styles.ts b/apps/www/registry/registry-styles.ts
similarity index 62%
rename from apps/www/src/lib/registry/styles.ts
rename to apps/www/registry/registry-styles.ts
index a934ea0bb..36f267489 100644
--- a/apps/www/src/lib/registry/styles.ts
+++ b/apps/www/registry/registry-styles.ts
@@ -1,12 +1,13 @@
 export const styles = [
-  {
-    name: 'default',
-    label: 'Default',
-  },
   {
     name: 'new-york',
     label: 'New York',
   },
+  {
+    name: 'default',
+    label: 'Default',
+  },
 ] as const
 
-export type Style = typeof styles[number]['name']
+export type Style = (typeof styles)[number]
+export type RegistryStyle = Style['name']
diff --git a/apps/www/registry/registry-themes.ts b/apps/www/registry/registry-themes.ts
new file mode 100644
index 000000000..5923eaf59
--- /dev/null
+++ b/apps/www/registry/registry-themes.ts
@@ -0,0 +1,178 @@
+import type { Registry } from './schema'
+
+export const themes: Registry = [
+  {
+    name: 'theme-daylight',
+    type: 'registry:theme',
+    cssVars: {
+      light: {
+        'background': '36 39% 88%',
+        'foreground': '36 45% 15%',
+        'primary': '36 45% 70%',
+        'primary-foreground': '36 45% 11%',
+        'secondary': '40 35% 77%',
+        'secondary-foreground': '36 45% 25%',
+        'accent': '36 64% 57%',
+        'accent-foreground': '36 72% 17%',
+        'destructive': '0 84% 37%',
+        'destructive-foreground': '0 0% 98%',
+        'muted': '36 33% 75%',
+        'muted-foreground': '36 45% 25%',
+        'card': '36 46% 82%',
+        'card-foreground': '36 45% 20%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'border': '36 45% 60%',
+        'input': '36 45% 60%',
+        'ring': '36 45% 30%',
+        'chart-1': '25 34% 28%',
+        'chart-2': '26 36% 34%',
+        'chart-3': '28 40% 40%',
+        'chart-4': '31 41% 48%',
+        'chart-5': '35 43% 53%',
+      },
+      dark: {
+        'background': '36 39% 88%',
+        'foreground': '36 45% 15%',
+        'primary': '36 45% 70%',
+        'primary-foreground': '36 45% 11%',
+        'secondary': '40 35% 77%',
+        'secondary-foreground': '36 45% 25%',
+        'accent': '36 64% 57%',
+        'accent-foreground': '36 72% 17%',
+        'destructive': '0 84% 37%',
+        'destructive-foreground': '0 0% 98%',
+        'muted': '36 33% 75%',
+        'muted-foreground': '36 45% 25%',
+        'card': '36 46% 82%',
+        'card-foreground': '36 45% 20%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'border': '36 45% 60%',
+        'input': '36 45% 60%',
+        'ring': '36 45% 30%',
+        'chart-1': '25 34% 28%',
+        'chart-2': '26 36% 34%',
+        'chart-3': '28 40% 40%',
+        'chart-4': '31 41% 48%',
+        'chart-5': '35 43% 53%',
+      },
+    },
+  },
+  {
+    name: 'theme-midnight',
+    type: 'registry:theme',
+    cssVars: {
+      light: {
+        'background': '240 5% 6%',
+        'foreground': '60 5% 90%',
+        'primary': '240 0% 90%',
+        'primary-foreground': '60 0% 0%',
+        'secondary': '240 4% 15%',
+        'secondary-foreground': '60 5% 85%',
+        'accent': '240 0% 13%',
+        'accent-foreground': '60 0% 100%',
+        'destructive': '0 60% 50%',
+        'destructive-foreground': '0 0% 98%',
+        'muted': '240 5% 25%',
+        'muted-foreground': '60 5% 85%',
+        'card': '240 4% 10%',
+        'card-foreground': '60 5% 90%',
+        'popover': '240 5% 15%',
+        'popover-foreground': '60 5% 85%',
+        'border': '240 6% 20%',
+        'input': '240 6% 20%',
+        'ring': '240 5% 90%',
+        'chart-1': '359 2% 90%',
+        'chart-2': '240 1% 74%',
+        'chart-3': '240 1% 58%',
+        'chart-4': '240 1% 42%',
+        'chart-5': '240 2% 26%',
+      },
+      dark: {
+        'background': '240 5% 6%',
+        'foreground': '60 5% 90%',
+        'primary': '240 0% 90%',
+        'primary-foreground': '60 0% 0%',
+        'secondary': '240 4% 15%',
+        'secondary-foreground': '60 5% 85%',
+        'accent': '240 0% 13%',
+        'accent-foreground': '60 0% 100%',
+        'destructive': '0 60% 50%',
+        'destructive-foreground': '0 0% 98%',
+        'muted': '240 5% 25%',
+        'muted-foreground': '60 5% 85%',
+        'card': '240 4% 10%',
+        'card-foreground': '60 5% 90%',
+        'popover': '240 5% 15%',
+        'popover-foreground': '60 5% 85%',
+        'border': '240 6% 20%',
+        'input': '240 6% 20%',
+        'ring': '240 5% 90%',
+        'chart-1': '359 2% 90%',
+        'chart-2': '240 1% 74%',
+        'chart-3': '240 1% 58%',
+        'chart-4': '240 1% 42%',
+        'chart-5': '240 2% 26%',
+      },
+    },
+  },
+  {
+    name: 'theme-emerald',
+    type: 'registry:theme',
+    cssVars: {
+      light: {
+        'background': '0 0% 100%',
+        'foreground': '240 10% 3.9%',
+        'card': '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        'primary': '142 86% 28%',
+        'primary-foreground': '356 29% 98%',
+        'secondary': '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        'muted': '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 45%',
+        'accent': '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        'destructive': '0 72% 51%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 5.9% 90%',
+        'input': '240 5.9% 90%',
+        'ring': '142 86% 28%',
+        'chart-1': '139 65% 20%',
+        'chart-2': '140 74% 44%',
+        'chart-3': '142 88% 28%',
+        'chart-4': '137 55% 15%',
+        'chart-5': '141 40% 9%',
+      },
+      dark: {
+        'background': '240 10% 3.9%',
+        'foreground': '0 0% 98%',
+        'card': '240 10% 3.9%',
+        'card-foreground': '0 0% 98%',
+        'popover': '240 10% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        'primary': '142 86% 28%',
+        'primary-foreground': '356 29% 98%',
+        'secondary': '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        'muted': '240 3.7% 15.9%',
+        'muted-foreground': '240 5% 64.9%',
+        'accent': '240 3.7% 15.9%',
+        'accent-foreground': '0 0% 98%',
+        'destructive': '0 72% 51%',
+        'destructive-foreground': '0 0% 98%',
+        'border': '240 3.7% 15.9%',
+        'input': '240 3.7% 15.9%',
+        'ring': '142 86% 28%',
+        'chart-1': '142 88% 28%',
+        'chart-2': '139 65% 20%',
+        'chart-3': '140 74% 24%',
+        'chart-4': '137 55% 15%',
+        'chart-5': '141 40% 9%',
+      },
+    },
+  },
+]
diff --git a/apps/www/registry/schema.ts b/apps/www/registry/schema.ts
new file mode 100644
index 000000000..4dfbf2fd4
--- /dev/null
+++ b/apps/www/registry/schema.ts
@@ -0,0 +1,91 @@
+import { z } from 'zod'
+
+export const blockChunkSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+  component: z.any(),
+  file: z.string(),
+  code: z.string().optional(),
+  container: z
+    .object({
+      className: z.string().nullish(),
+    })
+    .optional(),
+})
+
+export const registryItemTypeSchema = z.enum([
+  'registry:style',
+  'registry:lib',
+  'registry:example',
+  'registry:block',
+  'registry:component',
+  'registry:ui',
+  'registry:hook',
+  'registry:theme',
+  'registry:page',
+])
+
+export const registryItemFileSchema = z.object({
+  path: z.string(),
+  content: z.string().optional(),
+  type: registryItemTypeSchema,
+  target: z.string().optional(),
+})
+
+export const registryItemTailwindSchema = z.object({
+  config: z.object({
+    content: z.array(z.string()).optional(),
+    theme: z.record(z.string(), z.any()).optional(),
+    plugins: z.array(z.string()).optional(),
+  }),
+})
+
+export const registryItemCssVarsSchema = z.object({
+  light: z.record(z.string(), z.string()).optional(),
+  dark: z.record(z.string(), z.string()).optional(),
+})
+
+export const registryItemSchema = z.object({
+  name: z.string(),
+  type: registryItemTypeSchema,
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  registryDependencies: z.array(z.string()).optional(),
+  files: z.array(registryItemFileSchema).optional(),
+  tailwind: registryItemTailwindSchema.optional(),
+  cssVars: registryItemCssVarsSchema.optional(),
+  meta: z.record(z.string(), z.any()).optional(),
+  docs: z.string().optional(),
+})
+
+export const registryEntrySchema = registryItemSchema.extend({
+  category: z.string().optional(),
+  subcategory: z.string().optional(),
+})
+
+export const registrySchema = z.array(registryEntrySchema)
+
+export type RegistryEntry = z.infer<typeof registryEntrySchema>
+
+export type Registry = z.infer<typeof registrySchema>
+
+export type RegistryFiles = z.infer<typeof registryItemFileSchema>
+
+export const blockSchema = registryEntrySchema.extend({
+  type: z.literal('registry:block'),
+  style: z.enum(['default', 'new-york']),
+  component: z.any(),
+  container: z
+    .object({
+      height: z.string().nullish(),
+      className: z.string().nullish(),
+    })
+    .optional(),
+  code: z.string(),
+  highlightedCode: z.string(),
+})
+
+export type Block = z.infer<typeof blockSchema>
+
+export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index e974cf362..52ef035bd 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -1,205 +1,592 @@
-import fs from 'node:fs'
-import path, { basename } from 'node:path'
+import type { z } from 'zod'
+import type {
+  Registry,
+  RegistryEntry,
+  registryItemTypeSchema,
+} from '../registry/schema'
+// @sts-nocheck
+import { existsSync, promises as fs } from 'node:fs'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
 import { template } from 'lodash-es'
 import { rimraf } from 'rimraf'
 
-import { colorMapping, colors } from '../src/lib/registry/colors'
-import { buildRegistry } from '../src/lib/registry/registry'
-import { registrySchema } from '../src/lib/registry/schema'
-import { styles } from '../src/lib/registry/styles'
-import { themes } from '../src/lib/registry/themes'
-
-const REGISTRY_PATH = path.join(process.cwd(), 'src/public/registry')
-
-const registry = await buildRegistry()
-const result = registrySchema.safeParse(registry)
-
-if (!result.success) {
-  console.error(result.error)
-  process.exit(1)
+import { registry } from '../registry'
+import { buildRegistry as crawlContent } from '../registry/crawl-content'
+import { baseColors } from '../registry/registry-base-colors'
+import { colorMapping, colors } from '../registry/registry-colors'
+import { iconLibraries, icons } from '../registry/registry-icons'
+import { styles } from '../registry/registry-styles'
+import {
+  registryEntrySchema,
+  registrySchema,
+} from '../registry/schema'
+import { fixImport } from './fix-import'
+
+const REGISTRY_PATH = path.join(process.cwd(), 'src/public/r')
+
+const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
+  'registry:ui',
+  'registry:lib',
+  'registry:hook',
+  'registry:theme',
+  'registry:block',
+  'registry:example',
+]
+
+// const project = new Project({
+//   compilerOptions: {},
+// })
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+  return path.join(dir, filename)
 }
 
 // ----------------------------------------------------------------------------
 // Build __registry__/index.ts.
 // ----------------------------------------------------------------------------
-let index = `
+async function buildRegistry(registry: Registry) {
+  let index = `// @ts-nocheck
 // This file is autogenerated by scripts/build-registry.ts
 // Do not edit this file directly.
-export const Index = {
+
+export const Index: Record<string, any> = {
 `
 
-for (const style of styles) {
-  index += `  "${style.name}": {`
+  for (const style of styles) {
+    index += `  "${style.name}": {`
+
+    // Build style index.
+    for (const item of registry) {
+      const resolveFiles = item.files?.map(
+        file =>
+          `registry/${style.name}/${
+            typeof file === 'string' ? file : file.path
+          }`,
+      )
+      if (!resolveFiles) {
+        continue
+      }
 
-  // Build style index.
-  for (const item of result.data) {
-    if (item.type === 'components:ui')
-      continue
+      const type = item.type.split(':')[1]
+      let sourceFilename = ''
+
+      // const chunks: any = []
+      if (item.type === 'registry:block') {
+        const file = resolveFiles[0]
+        const filename = path.basename(file)
+        let raw: string
+        try {
+          raw = await fs.readFile(file, 'utf8')
+        }
+        catch (error) {
+          continue
+        }
+        // const tempFile = await createTempSourceFile(filename)
+        // const sourceFile = project.createSourceFile(tempFile, raw, {
+        //   scriptKind: ScriptKind.TS,
+        // })
+
+        // const description = sourceFile
+        //   .getVariableDeclaration('description')
+        //   ?.getInitializerOrThrow()
+        //   .asKindOrThrow(SyntaxKind.StringLiteral)
+        //   .getLiteralValue()
+
+        // item.description = description ?? ''
+
+        // // Find all imports.
+        // const imports = new Map<
+        //   string,
+        //   {
+        //     module: string
+        //     text: string
+        //     isDefault?: boolean
+        //   }
+        // >()
+        // sourceFile.getImportDeclarations().forEach((node) => {
+        //   const module = node.getModuleSpecifier().getLiteralValue()
+        //   node.getNamedImports().forEach((item) => {
+        //     imports.set(item.getText(), {
+        //       module,
+        //       text: node.getText(),
+        //     })
+        //   })
+
+        //   const defaultImport = node.getDefaultImport()
+        //   if (defaultImport) {
+        //     imports.set(defaultImport.getText(), {
+        //       module,
+        //       text: defaultImport.getText(),
+        //       isDefault: true,
+        //     })
+        //   }
+        // })
+
+        // Find all opening tags with x-chunk attribute.
+        // const components = sourceFile
+        //   .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+        //   .filter((node) => {
+        //     return node.getAttribute('x-chunk') !== undefined
+        //   })
+
+        // chunks = await Promise.all(
+        //   components.map(async (component, index) => {
+        //     const chunkName = `${item.name}-chunk-${index}`
+
+        //     // Get the value of x-chunk attribute.
+        //     const attr = component
+        //       .getAttributeOrThrow('x-chunk')
+        //       .asKindOrThrow(SyntaxKind.JsxAttribute)
+
+        //     const description = attr
+        //       .getInitializerOrThrow()
+        //       .asKindOrThrow(SyntaxKind.StringLiteral)
+        //       .getLiteralValue()
+
+        //     // Delete the x-chunk attribute.
+        //     attr.remove()
+
+        //     // Add a new attribute to the component.
+        //     component.addAttribute({
+        //       name: 'x-chunk',
+        //       initializer: `"${chunkName}"`,
+        //     })
+
+        //     // Get the value of x-chunk-container attribute.
+        //     const containerAttr = component
+        //       .getAttribute('x-chunk-container')
+        //       ?.asKindOrThrow(SyntaxKind.JsxAttribute)
+
+        //     const containerClassName = containerAttr
+        //       ?.getInitializer()
+        //       ?.asKindOrThrow(SyntaxKind.StringLiteral)
+        //       .getLiteralValue()
+
+        //     containerAttr?.remove()
+
+        //     const parentJsxElement = component.getParentIfKindOrThrow(
+        //       SyntaxKind.JsxElement,
+        //     )
+
+        //     // Find all opening tags on component.
+        //     const children = parentJsxElement
+        //       .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+        //       .map((node) => {
+        //         return node.getTagNameNode().getText()
+        //       })
+        //       .concat(
+        //         parentJsxElement
+        //           .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        //           .map((node) => {
+        //             return node.getTagNameNode().getText()
+        //           }),
+        //       )
+
+        //     const componentImports = new Map<
+        //       string,
+        //       string | string[] | Set<string>
+        //     >()
+        //     children.forEach((child) => {
+        //       const importLine = imports.get(child)
+        //       if (importLine) {
+        //         const imports = componentImports.get(importLine.module) || []
+
+        //         const newImports = importLine.isDefault
+        //           ? importLine.text
+        //           : new Set([...imports, child])
+
+        //         componentImports.set(
+        //           importLine.module,
+        //           importLine?.isDefault ? newImports : Array.from(newImports),
+        //         )
+        //       }
+        //     })
+
+        //     const componnetImportLines = Array.from(
+        //       componentImports.keys(),
+        //     ).map((key) => {
+        //       const values = componentImports.get(key)
+        //       const specifier = Array.isArray(values)
+        //         ? `{${values.join(',')}}`
+        //         : values
+
+        //       return `import ${specifier} from "${key}"`
+        //     })
+
+        //     const code = `
+        //     'use client'
+
+        //     ${componnetImportLines.join('\n')}
+
+        //     export default function Component() {
+        //       return (${parentJsxElement.getText()})
+        //     }`
+
+        //     const targetFile = file.replace(item.name, `${chunkName}`)
+        //     const targetFilePath = path.join(
+        //       cwd(),
+        //       `registry/${style.name}/${type}/${chunkName}.ts`,
+        //     )
+
+        //     // Write component file.
+        //     rimraf.sync(targetFilePath)
+        //     await fs.writeFile(targetFilePath, code, 'utf8')
+
+        //     return {
+        //       name: chunkName,
+        //       description,
+        //       component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`,
+        //       file: targetFile,
+        //       container: {
+        //         className: containerClassName,
+        //       },
+        //     }
+        //   }),
+        // )
+
+        // // Write the source file for blocks only.
+        sourceFilename = `__registry__/${style.name}/${type}/${item.name}.ts`
+
+        if (item.files) {
+          const files = item.files.map(file =>
+            typeof file === 'string'
+              ? { type: 'registry:page', path: file }
+              : file,
+          )
+          if (files?.length) {
+            sourceFilename = `__registry__/${style.name}/${files[0].path}`
+          }
+        }
+
+        const sourcePath = path.join(process.cwd(), sourceFilename)
+        if (!existsSync(sourcePath)) {
+          await fs.mkdir(sourcePath, { recursive: true })
+        }
+
+        rimraf.sync(sourcePath)
+        // await fs.writeFile(sourcePath, sourceFile.getText())
+        await fs.writeFile(sourcePath, raw)
+      }
 
-    const resolveFiles = item.files.map(
-      file => `../src/lib/registry/${style.name}/${file}`,
-    )
+      let componentPath = `@/registry/${style.name}/${type}/${item.name}`
 
-    // const type = item.type.split(':')[1]
-    index += `
+      if (item.files) {
+        const files = item.files.map(file =>
+          typeof file === 'string'
+            ? { type: 'registry:page', path: file }
+            : file,
+        )
+        if (files?.length) {
+          componentPath = `@/registry/${style.name}/${files[0].path}`
+        }
+      }
+
+      index += `
     "${item.name}": {
       name: "${item.name}",
+      description: "${item.description ?? ''}",
       type: "${item.type}",
       registryDependencies: ${JSON.stringify(item.registryDependencies)},
-      component: () => import("${resolveFiles[0]}").then((m) => m.default),
-      files: [${resolveFiles.map(file => `"${file}"`)}],
+      files: [${item.files?.map((file) => {
+        const filePath = `registry/${style.name}/${
+          typeof file === 'string' ? file : file.path
+        }`
+        const resolvedFilePath = path.resolve(filePath)
+        return typeof file === 'string'
+          ? `"${resolvedFilePath}"`
+          : `{
+        path: "${filePath}",
+        type: "${file.type}",
+        target: "${file.target ?? ''}"
+      }`
+      })}],
+      component: React.lazy(() => import("${componentPath}")),
+      source: "${sourceFilename}",
+      category: "${item.category ?? ''}",
+      subcategory: "${item.subcategory ?? ''}"
     },`
-  }
+    }
 
-  index += `
+    //  TODO: maybe implement chunk?
+    // chunks: [${chunks.map(
+    //   chunk => `{
+    //   name: "${chunk.name}",
+    //   description: "${chunk.description ?? 'No description'}",
+    //   component: ${chunk.component}
+    //   file: "${chunk.file}",
+    //   container: {
+    //     className: "${chunk.container.className}"
+    //   }
+    // }`,
+    // )}]
+
+    index += `
   },`
-}
+  }
 
-index += `
+  index += `
 }
 `
 
-// Write style index.
-rimraf.sync(path.join(process.cwd(), '__registry__/index.ts'))
-fs.writeFileSync(path.join(process.cwd(), '__registry__/index.ts'), index)
+  // ----------------------------------------------------------------------------
+  // Build registry/index.json.
+  // ----------------------------------------------------------------------------
+  const items = registry
+    .filter(item => ['registry:ui'].includes(item.type))
+    .map((item) => {
+      return {
+        ...item,
+        files: item.files?.map((_file) => {
+          const file
+            = typeof _file === 'string'
+              ? {
+                  path: _file,
+                  type: item.type,
+                }
+              : _file
+
+          return file
+        }),
+      }
+    })
+  const registryJson = JSON.stringify(items, null, 2)
+  rimraf.sync(path.join(REGISTRY_PATH, 'index.json'))
+  await fs.writeFile(
+    path.join(REGISTRY_PATH, 'index.json'),
+    registryJson,
+    'utf8',
+  )
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), '__registry__/index.ts'))
+  await fs.writeFile(path.join(process.cwd(), '__registry__/index.ts'), index)
+}
 
 // ----------------------------------------------------------------------------
 // Build registry/styles/[style]/[name].json.
 // ----------------------------------------------------------------------------
-const newLine = '\n'
+async function buildStyles(registry: Registry) {
+  for (const style of styles) {
+    const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
 
-for (const style of styles) {
-  const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
-
-  // Create directory if it doesn't exist.
-  if (!fs.existsSync(targetPath))
-    fs.mkdirSync(targetPath, { recursive: true })
+    // Create directory if it doesn't exist.
+    if (!existsSync(targetPath)) {
+      await fs.mkdir(targetPath, { recursive: true })
+    }
 
-  for (const item of result.data) {
-    if (item.type !== 'components:ui')
-      continue
+    for (const item of registry) {
+      if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) {
+        continue
+      }
 
-    const files = item.files?.map((file) => {
-      let content: string = ''
+      let files
+      if (item.files) {
+        files = await Promise.all(
+          item.files.map(async (_file) => {
+            const file
+              = typeof _file === 'string'
+                ? {
+                    path: _file,
+                    type: item.type,
+                    content: '',
+                    target: '',
+                  }
+                : _file
+
+            let content: string
+            try {
+              content = await fs.readFile(
+                path.join(process.cwd(), 'registry', style.name, file.path),
+                'utf8',
+              )
+
+              // Only fix imports for v0- blocks.
+              if (item.name.startsWith('v0-')) {
+                content = fixImport(content)
+              }
+            }
+            catch (error) {
+              return
+            }
+
+            // TODO: remove meta content
+            // const tempFile = await createTempSourceFile(file.path)
+            // const sourceFile = project.createSourceFile(tempFile, content, {
+            //   scriptKind: ScriptKind.TS,
+            // })
+
+            // sourceFile.getVariableDeclaration('iframeHeight')?.remove()
+            // sourceFile.getVariableDeclaration('containerClassName')?.remove()
+            // sourceFile.getVariableDeclaration('description')?.remove()
+
+            let target = file.target || ''
+
+            if ((!target || target === '') && item.name.startsWith('v0-')) {
+              const fileName = file.path.split('/').pop()
+              if (
+                file.type === 'registry:block'
+                || file.type === 'registry:component'
+                || file.type === 'registry:example'
+              ) {
+                target = `components/${fileName}`
+              }
+
+              if (file.type === 'registry:ui') {
+                target = `components/ui/${fileName}`
+              }
+
+              if (file.type === 'registry:hook') {
+                target = `hooks/${fileName}`
+              }
+
+              if (file.type === 'registry:lib') {
+                target = `lib/${fileName}`
+              }
+            }
+
+            return {
+              path: file.path,
+              type: file.type,
+              // content: sourceFile.getText(),
+              content,
+              target,
+            }
+          }),
+        )
+      }
 
-      try {
-        content = fs.readFileSync(
-          path.join(process.cwd(), 'src/lib/registry', style.name, file),
+      const payload = registryEntrySchema
+        .omit({
+          // source: true,
+          category: true,
+          subcategory: true,
+          // chunks: true,
+        })
+        .safeParse({
+          ...item,
+          files,
+        })
+
+      if (payload.success) {
+        await fs.writeFile(
+          path.join(targetPath, `${item.name}.json`),
+          JSON.stringify(payload.data, null, 2),
           'utf8',
         )
       }
-      catch (err) {
-        console.log(`'${file}' is missing`)
-      }
-
-      // Replace Windows-style newlines with Unix-style newlines
-      content = content.replace(/\r\n/g, newLine)
+    }
+  }
 
-      return {
-        name: basename(file),
-        content,
-      }
-    })
+  // ----------------------------------------------------------------------------
+  // Build registry/styles/index.json.
+  // ----------------------------------------------------------------------------
+  const stylesJson = JSON.stringify(styles, null, 2)
+  await fs.writeFile(
+    path.join(REGISTRY_PATH, 'styles/index.json'),
+    stylesJson,
+    'utf8',
+  )
+}
 
-    const payload = {
-      ...item,
-      files,
+// ----------------------------------------------------------------------------
+// Build registry/styles/[name]/index.json.
+// ----------------------------------------------------------------------------
+async function buildStylesIndex() {
+  for (const style of styles) {
+    const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
+
+    const dependencies = [
+      'tailwindcss-animate',
+      'class-variance-authority',
+      'lucide-react',
+    ]
+
+    // TODO: Remove this when we migrate to lucide-react.
+    // if (style.name === "new-york") {
+    //   dependencies.push("@radix-ui/react-icons")
+    // }
+
+    const payload: RegistryEntry = {
+      name: style.name,
+      type: 'registry:style',
+      dependencies,
+      registryDependencies: ['utils'],
+      tailwind: {
+        config: {
+          plugins: [`require("tailwindcss-animate")`],
+        },
+      },
+      cssVars: {},
+      files: [],
     }
 
-    const payloadStr = `${JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)}\n`
-
-    fs.writeFileSync(
-      path.join(targetPath, `${item.name}.json`),
-      payloadStr,
+    await fs.writeFile(
+      path.join(targetPath, 'index.json'),
+      JSON.stringify(payload, null, 2),
       'utf8',
     )
   }
 }
 
-// ----------------------------------------------------------------------------
-// Build registry/styles/index.json.
-// ----------------------------------------------------------------------------
-const stylesJson = JSON.stringify(styles, null, 2)
-fs.writeFileSync(
-  path.join(REGISTRY_PATH, 'styles/index.json'),
-  stylesJson,
-  'utf8',
-)
-
-const REGISTRY_IGNORE = ['super-form']
-
-// ----------------------------------------------------------------------------
-// Build registry/index.json.
-// ----------------------------------------------------------------------------
-const names = result.data.filter(
-  item =>
-    item.type === 'components:ui' && !REGISTRY_IGNORE.includes(item.name),
-)
-const registryJson = JSON.stringify(names, null, 2)
-rimraf.sync(path.join(REGISTRY_PATH, 'index.json'))
-fs.writeFileSync(path.join(REGISTRY_PATH, 'index.json'), registryJson, 'utf8')
-
 // ----------------------------------------------------------------------------
 // Build registry/colors/index.json.
 // ----------------------------------------------------------------------------
-const colorsTargetPath = path.join(REGISTRY_PATH, 'colors')
-rimraf.sync(colorsTargetPath)
-if (!fs.existsSync(colorsTargetPath))
-  fs.mkdirSync(colorsTargetPath, { recursive: true })
-
-const colorsData: Record<string, any> = {}
-for (const [color, value] of Object.entries(colors)) {
-  if (typeof value === 'string') {
-    colorsData[color] = value
-    continue
+async function buildThemes() {
+  const colorsTargetPath = path.join(REGISTRY_PATH, 'colors')
+  rimraf.sync(colorsTargetPath)
+  if (!existsSync(colorsTargetPath)) {
+    await fs.mkdir(colorsTargetPath, { recursive: true })
   }
 
-  if (Array.isArray(value)) {
-    colorsData[color] = value.map(item => ({
-      ...item,
-      rgbChannel: item.rgb.replace(
-        /^rgb\((\d+),(\d+),(\d+)\)$/,
-        '$1 $2 $3',
-      ),
-      hslChannel: item.hsl.replace(
-        /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-        '$1 $2 $3',
-      ),
-    }))
-    continue
-  }
+  const colorsData: Record<string, any> = {}
+  for (const [color, value] of Object.entries(colors)) {
+    if (typeof value === 'string') {
+      colorsData[color] = value
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      colorsData[color] = value.map(item => ({
+        ...item,
+        rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+        hslChannel: item.hsl.replace(
+          /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+          '$1 $2 $3',
+        ),
+      }))
+      continue
+    }
 
-  if (typeof value === 'object') {
-    colorsData[color] = {
-      ...value,
-      rgbChannel: value.rgb.replace(
-        /^rgb\((\d+),(\d+),(\d+)\)$/,
-        '$1 $2 $3',
-      ),
-      hslChannel: value.hsl.replace(
-        /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-        '$1 $2 $3',
-      ),
+    if (typeof value === 'object') {
+      colorsData[color] = {
+        ...value,
+        rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+        hslChannel: value.hsl.replace(
+          /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+          '$1 $2 $3',
+        ),
+      }
+      continue
     }
-    continue
   }
-}
 
-fs.writeFileSync(
-  path.join(colorsTargetPath, 'index.json'),
-  JSON.stringify(colorsData, null, 2),
-  'utf8',
-)
+  await fs.writeFile(
+    path.join(colorsTargetPath, 'index.json'),
+    JSON.stringify(colorsData, null, 2),
+    'utf8',
+  )
 
-// ----------------------------------------------------------------------------
-// Build registry/colors/[base].json.
-// ----------------------------------------------------------------------------
-export const BASE_STYLES = `@tailwind base;
+  // ----------------------------------------------------------------------------
+  // Build registry/colors/[base].json.
+  // ----------------------------------------------------------------------------
+  const BASE_STYLES = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
-`
+  `
 
-export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
+  const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -207,65 +594,56 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
-
-    --muted: <%- colors.light["muted"] %>;
-    --muted-foreground: <%- colors.light["muted-foreground"] %>;
-
-    --popover: <%- colors.light["popover"] %>;
-    --popover-foreground: <%- colors.light["popover-foreground"] %>;
-
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
-
-    --border: <%- colors.light["border"] %>;
-    --input: <%- colors.light["input"] %>;
-
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
-
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
-
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
-
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
-
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
     --ring: <%- colors.light["ring"] %>;
-
     --radius: 0.5rem;
+    --chart-1: <%- colors.light["chart-1"] %>;
+    --chart-2: <%- colors.light["chart-2"] %>;
+    --chart-3: <%- colors.light["chart-3"] %>;
+    --chart-4: <%- colors.light["chart-4"] %>;
+    --chart-5: <%- colors.light["chart-5"] %>;
   }
 
   .dark {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
-
-    --muted: <%- colors.dark["muted"] %>;
-    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
-
-    --popover: <%- colors.dark["popover"] %>;
-    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
-
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
-
-    --border: <%- colors.dark["border"] %>;
-    --input: <%- colors.dark["input"] %>;
-
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
-
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
-
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
-
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
-
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
     --ring: <%- colors.dark["ring"] %>;
+    --chart-1: <%- colors.dark["chart-1"] %>;
+    --chart-2: <%- colors.dark["chart-2"] %>;
+    --chart-3: <%- colors.dark["chart-3"] %>;
+    --chart-4: <%- colors.dark["chart-4"] %>;
+    --chart-5: <%- colors.dark["chart-5"] %>;
   }
 }
 
@@ -278,129 +656,260 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   }
 }`
 
-for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone', 'lime']) {
-  const base: Record<string, any> = {
-    inlineColors: {},
-    cssVars: {},
-  }
-  for (const [mode, values] of Object.entries(colorMapping)) {
-    base.inlineColors[mode] = {}
-    base.cssVars[mode] = {}
-    for (const [key, value] of Object.entries(values)) {
-      if (typeof value === 'string') {
-        const resolvedColor = value.replace(
-          /\{\{base\}\}-/g,
-          `${baseColor}-`,
-        )
-        base.inlineColors[mode][key] = resolvedColor
-
-        const [resolvedBase, scale] = resolvedColor.split('-')
-        const color = scale
-          ? colorsData[resolvedBase].find(
-            (item: any) => item.scale === Number.parseInt(scale),
-          )
-          : colorsData[resolvedBase]
-        if (color)
-          base.cssVars[mode][key] = color.hslChannel
+  for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone']) {
+    const base: Record<string, any> = {
+      inlineColors: {},
+      cssVars: {},
+    }
+    for (const [mode, values] of Object.entries(colorMapping)) {
+      base.inlineColors[mode] = {}
+      base.cssVars[mode] = {}
+      for (const [key, value] of Object.entries(values)) {
+        if (typeof value === 'string') {
+          // Chart colors do not have a 1-to-1 mapping with tailwind colors.
+          if (key.startsWith('chart-')) {
+            base.cssVars[mode][key] = value
+            continue
+          }
+
+          const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`)
+          base.inlineColors[mode][key] = resolvedColor
+
+          const [resolvedBase, scale] = resolvedColor.split('-')
+          const color = scale
+            ? colorsData[resolvedBase].find(
+              (item: any) => item.scale === Number.parseInt(scale),
+            )
+            : colorsData[resolvedBase]
+          if (color) {
+            base.cssVars[mode][key] = color.hslChannel
+          }
+        }
       }
     }
-  }
 
-  // Build css vars.
-  base.inlineColorsTemplate = template(BASE_STYLES)({})
-  base.cssVarsTemplate = template(BASE_STYLES_WITH_VARIABLES)({
-    colors: base.cssVars,
-  })
+    // Build css vars.
+    base.inlineColorsTemplate = template(BASE_STYLES)({})
+    base.cssVarsTemplate = template(BASE_STYLES_WITH_VARIABLES)({
+      colors: base.cssVars,
+    })
 
-  fs.writeFileSync(
-    path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
-    JSON.stringify(base, null, 2),
-    'utf8',
-  )
+    await fs.writeFile(
+      path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
+      JSON.stringify(base, null, 2),
+      'utf8',
+    )
+
+    // ----------------------------------------------------------------------------
+    // Build registry/themes.css
+    // ----------------------------------------------------------------------------
+    const THEME_STYLES_WITH_VARIABLES = `
+.theme-<%- theme %> {
+  --background: <%- colors.light["background"] %>;
+  --foreground: <%- colors.light["foreground"] %>;
+
+  --muted: <%- colors.light["muted"] %>;
+  --muted-foreground: <%- colors.light["muted-foreground"] %>;
+
+  --popover: <%- colors.light["popover"] %>;
+  --popover-foreground: <%- colors.light["popover-foreground"] %>;
+
+  --card: <%- colors.light["card"] %>;
+  --card-foreground: <%- colors.light["card-foreground"] %>;
+
+  --border: <%- colors.light["border"] %>;
+  --input: <%- colors.light["input"] %>;
+
+  --primary: <%- colors.light["primary"] %>;
+  --primary-foreground: <%- colors.light["primary-foreground"] %>;
+
+  --secondary: <%- colors.light["secondary"] %>;
+  --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+
+  --accent: <%- colors.light["accent"] %>;
+  --accent-foreground: <%- colors.light["accent-foreground"] %>;
+
+  --destructive: <%- colors.light["destructive"] %>;
+  --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+
+  --ring: <%- colors.light["ring"] %>;
+
+  --radius: <%- colors.light["radius"] %>;
 }
 
-// ----------------------------------------------------------------------------
-// Build registry/themes.css
-// ----------------------------------------------------------------------------
-export const THEME_STYLES_WITH_VARIABLES = `
-  .theme-<%- theme %> {
-    --background: <%- colors.light["background"] %>;
-    --foreground: <%- colors.light["foreground"] %>;
+.dark .theme-<%- theme %> {
+  --background: <%- colors.dark["background"] %>;
+  --foreground: <%- colors.dark["foreground"] %>;
 
-    --muted: <%- colors.light["muted"] %>;
-    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+  --muted: <%- colors.dark["muted"] %>;
+  --muted-foreground: <%- colors.dark["muted-foreground"] %>;
 
-    --popover: <%- colors.light["popover"] %>;
-    --popover-foreground: <%- colors.light["popover-foreground"] %>;
+  --popover: <%- colors.dark["popover"] %>;
+  --popover-foreground: <%- colors.dark["popover-foreground"] %>;
 
-    --card: <%- colors.light["card"] %>;
-    --card-foreground: <%- colors.light["card-foreground"] %>;
+  --card: <%- colors.dark["card"] %>;
+  --card-foreground: <%- colors.dark["card-foreground"] %>;
 
-    --border: <%- colors.light["border"] %>;
-    --input: <%- colors.light["input"] %>;
+  --border: <%- colors.dark["border"] %>;
+  --input: <%- colors.dark["input"] %>;
 
-    --primary: <%- colors.light["primary"] %>;
-    --primary-foreground: <%- colors.light["primary-foreground"] %>;
+  --primary: <%- colors.dark["primary"] %>;
+  --primary-foreground: <%- colors.dark["primary-foreground"] %>;
 
-    --secondary: <%- colors.light["secondary"] %>;
-    --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+  --secondary: <%- colors.dark["secondary"] %>;
+  --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
 
-    --accent: <%- colors.light["accent"] %>;
-    --accent-foreground: <%- colors.light["accent-foreground"] %>;
+  --accent: <%- colors.dark["accent"] %>;
+  --accent-foreground: <%- colors.dark["accent-foreground"] %>;
 
-    --destructive: <%- colors.light["destructive"] %>;
-    --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+  --destructive: <%- colors.dark["destructive"] %>;
+  --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
 
-    --ring: <%- colors.light["ring"] %>;
+  --ring: <%- colors.dark["ring"] %>;
+}`
 
-    --radius: 0.5rem;
-  }
+    const themeCSS = []
+    for (const theme of baseColors) {
+      themeCSS.push(
+        template(THEME_STYLES_WITH_VARIABLES)({
+          colors: theme.cssVars,
+          theme: theme.name,
+        }),
+      )
+    }
 
-  .dark .theme-<%- theme %> {
-    --background: <%- colors.dark["background"] %>;
-    --foreground: <%- colors.dark["foreground"] %>;
+    await fs.writeFile(
+      path.join(REGISTRY_PATH, `themes.css`),
+      themeCSS.join('\n'),
+      'utf8',
+    )
 
-    --muted: <%- colors.dark["muted"] %>;
-    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+    // ----------------------------------------------------------------------------
+    // Build registry/themes/[theme].json
+    // ----------------------------------------------------------------------------
+    rimraf.sync(path.join(REGISTRY_PATH, 'themes'))
+    for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone']) {
+      const payload: Record<string, any> = {
+        name: baseColor,
+        label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
+        cssVars: {},
+      }
+      for (const [mode, values] of Object.entries(colorMapping)) {
+        payload.cssVars[mode] = {}
+        for (const [key, value] of Object.entries(values)) {
+          if (typeof value === 'string') {
+            const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`)
+            payload.cssVars[mode][key] = resolvedColor
+
+            const [resolvedBase, scale] = resolvedColor.split('-')
+            const color = scale
+              ? colorsData[resolvedBase].find(
+                (item: any) => item.scale === Number.parseInt(scale),
+              )
+              : colorsData[resolvedBase]
+            if (color) {
+              payload.cssVars[mode][key] = color.hslChannel
+            }
+          }
+        }
+      }
 
-    --popover: <%- colors.dark["popover"] %>;
-    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+      const targetPath = path.join(REGISTRY_PATH, 'themes')
 
-    --card: <%- colors.dark["card"] %>;
-    --card-foreground: <%- colors.dark["card-foreground"] %>;
+      // Create directory if it doesn't exist.
+      if (!existsSync(targetPath)) {
+        await fs.mkdir(targetPath, { recursive: true })
+      }
 
-    --border: <%- colors.dark["border"] %>;
-    --input: <%- colors.dark["input"] %>;
+      await fs.writeFile(
+        path.join(targetPath, `${payload.name}.json`),
+        JSON.stringify(payload, null, 2),
+        'utf8',
+      )
+    }
+  }
+}
 
-    --primary: <%- colors.dark["primary"] %>;
-    --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+// ----------------------------------------------------------------------------
+// Build registry/icons/index.json.
+// ----------------------------------------------------------------------------
+async function buildIcons() {
+  const iconsTargetPath = path.join(REGISTRY_PATH, 'icons')
+  rimraf.sync(iconsTargetPath)
+  if (!existsSync(iconsTargetPath)) {
+    await fs.mkdir(iconsTargetPath, { recursive: true })
+  }
 
-    --secondary: <%- colors.dark["secondary"] %>;
-    --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+  const iconsData = icons
 
-    --accent: <%- colors.dark["accent"] %>;
-    --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+  await fs.writeFile(
+    path.join(iconsTargetPath, 'index.json'),
+    JSON.stringify(iconsData, null, 2),
+    'utf8',
+  )
+}
 
-    --destructive: <%- colors.dark["destructive"] %>;
-    --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+// ----------------------------------------------------------------------------
+// Build __registry__/icons.ts.
+// ----------------------------------------------------------------------------
+async function buildRegistryIcons() {
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
 
-    --ring: <%- colors.dark["ring"] %>;
-  }`
-
-const themeCSS: Array<string> = []
-for (const theme of themes) {
-  themeCSS.push(
-    template(THEME_STYLES_WITH_VARIABLES)({
-      colors: theme.cssVars,
-      theme: theme.name,
-    }),
+export const Icons = {
+`
+
+  for (const [icon, libraries] of Object.entries(icons)) {
+    index += `  "${icon}": {`
+    for (const [library, componentName] of Object.entries(libraries)) {
+      const packageName = iconLibraries[library as keyof typeof iconLibraries].package
+      if (packageName) {
+        index += `
+  ${library}: React.lazy(() => import("${packageName}").then(mod => ({
+    default: mod.${componentName}
+  }))),`
+      }
+    }
+    index += `
+},`
+  }
+
+  index += `
+}
+`
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), '__registry__/icons.ts'))
+  await fs.writeFile(
+    path.join(process.cwd(), '__registry__/icons.ts'),
+    index,
+    'utf8',
   )
 }
 
-fs.writeFileSync(
-  path.join(REGISTRY_PATH, 'themes.css'),
-  themeCSS.join('\n'),
-  'utf8',
-)
+try {
+  const content = await crawlContent()
+  const result = registrySchema.safeParse([...registry, ...content])
 
-console.log('✅ Done!!')
+  if (!result.success) {
+    console.error(result.error)
+    process.exit(1)
+  }
+
+  await buildRegistry(result.data)
+  await buildStyles(result.data)
+  await buildStylesIndex()
+  await buildThemes()
+
+  await buildRegistryIcons()
+  await buildIcons()
+
+  // eslint-disable-next-line no-console
+  console.log('✅ Done!')
+}
+catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/www/scripts/fix-import.ts b/apps/www/scripts/fix-import.ts
new file mode 100644
index 000000000..4b1b17c9b
--- /dev/null
+++ b/apps/www/scripts/fix-import.ts
@@ -0,0 +1,28 @@
+export function fixImport(content: string) {
+  // eslint-disable-next-line regexp/no-super-linear-backtracking
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string,
+  ) => {
+    if (type.endsWith('components')) {
+      return `@/components/${component}`
+    }
+    else if (type.endsWith('ui')) {
+      return `@/components/ui/${component}`
+    }
+    else if (type.endsWith('hooks')) {
+      return `@/hooks/${component}`
+    }
+    else if (type.endsWith('lib')) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
diff --git a/apps/www/src/lib/registry/index.ts b/apps/www/src/lib/registry/index.ts
deleted file mode 100644
index 636bfa42e..000000000
--- a/apps/www/src/lib/registry/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './colors'
-export * from './schema'
-export * from './styles'
-export * from './themes'
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
deleted file mode 100644
index b4b156119..000000000
--- a/apps/www/src/lib/registry/registry.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import type { Registry } from '../../lib/registry'
-import { readdir, readFile } from 'node:fs/promises'
-import { parseSync } from '@oxc-parser/wasm'
-import { join, normalize, resolve } from 'pathe'
-
-import { compileScript, parse } from 'vue/compiler-sfc'
-
-const DEPENDENCIES = new Map<string, string[]>([
-  ['@vueuse/core', []],
-  ['vue-sonner', []],
-  ['vaul-vue', []],
-  ['v-calendar', []],
-  ['@tanstack/vue-table', []],
-  ['@unovis/vue', ['@unovis/ts']],
-  ['embla-carousel-vue', []],
-  ['vee-validate', ['@vee-validate/zod', 'zod']],
-])
-// Some dependencies latest tag were not compatible with Vue3.
-const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
-  ['v-calendar', 'v-calendar@next'],
-])
-const REGISTRY_DEPENDENCY = '@/'
-
-type ArrayItem<T> = T extends Array<infer X> ? X : never
-type RegistryItem = ArrayItem<Registry>
-
-export async function buildRegistry() {
-  const ui_path = resolve('./src/lib/registry/default/ui')
-  const uiRegistry = await crawlUI(ui_path)
-
-  const example_path = resolve('./src/lib/registry/default/example')
-  const exampleRegistry = await crawlDirectory(example_path, 'example')
-
-  const block_path = resolve('./src/lib/registry/default/block')
-  const blockRegistry = await crawlDirectory(block_path, 'block')
-
-  return uiRegistry.concat(exampleRegistry).concat(blockRegistry)
-}
-
-async function crawlUI(rootPath: string) {
-  const dir = await readdir(rootPath, {
-    recursive: true,
-    withFileTypes: true,
-  })
-
-  const uiRegistry: Registry = []
-
-  for (const dirent of dir) {
-    if (!dirent.isDirectory())
-      continue
-
-    const componentPath = resolve(rootPath, dirent.name)
-
-    const ui = await buildUIRegistry(componentPath, dirent.name)
-    uiRegistry.push(ui)
-  }
-
-  return uiRegistry
-}
-
-async function crawlDirectory(rootPath: string, typeName: 'example' | 'block') {
-  const type = `components:${typeName}` as const
-
-  const dir = await readdir(rootPath, {
-    recursive: true,
-    withFileTypes: true,
-  })
-
-  const registry: Registry = []
-
-  for (const dirent of dir) {
-    if (dirent.name === 'index.ts')
-      continue
-
-    if (dirent.isFile()) {
-      const [name] = dirent.name.split('.vue')
-      const file_path = join(typeName, normalize(dirent.path).split(`/${typeName}`)[1], dirent.name)
-      const { dependencies, registryDependencies }
-      = await getDependencies(join(dirent.path, dirent.name))
-
-      registry.push({
-        name,
-        type,
-        files: [file_path],
-        registryDependencies: Array.from(registryDependencies),
-        dependencies: Array.from(dependencies),
-      })
-    }
-
-    // ignoring examples with directories for now...
-
-    // if (dirent.isDirectory()) {
-    // 	const componentPath = resolve(rootPath, dirent.name);
-    // 	const ui = await buildUIRegistry(componentPath, dirent.name);
-    // 	registry.push({
-    // 		...ui,
-    // 		type
-    // 	});
-    // }
-  }
-
-  return registry
-}
-
-async function buildUIRegistry(componentPath: string, componentName: string) {
-  const dir = await readdir(componentPath, {
-    withFileTypes: true,
-  })
-
-  const files: string[] = []
-  const dependencies = new Set<string>()
-  const registryDependencies = new Set<string>()
-  const type = 'components:ui'
-
-  for (const dirent of dir) {
-    if (!dirent.isFile())
-      continue
-
-    const file_path = join('ui', componentName, dirent.name)
-    files.push(file_path)
-    files.sort()
-
-    // only grab deps from the vue files
-    if (dirent.name === 'index.ts')
-      continue
-    const deps = await getDependencies(join(componentPath, dirent.name))
-    deps.dependencies.forEach(dep => dependencies.add(dep))
-    deps.registryDependencies.forEach(dep =>
-      registryDependencies.add(dep),
-    )
-  }
-
-  return {
-    name: componentName,
-    type,
-    files,
-    registryDependencies: Array.from(registryDependencies),
-    dependencies: Array.from(dependencies),
-  } satisfies RegistryItem
-}
-
-async function getDependencies(filename: string) {
-  const code = await readFile(filename, { encoding: 'utf8' })
-
-  const registryDependencies = new Set<string>()
-  const dependencies = new Set<string>()
-
-  const populateDeps = (source: string) => {
-    const peerDeps = DEPENDENCIES.get(source)
-    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
-    if (peerDeps !== undefined) {
-      if (taggedDeps !== undefined)
-        dependencies.add(taggedDeps)
-      else
-        dependencies.add(source)
-      peerDeps.forEach(dep => dependencies.add(dep))
-    }
-
-    if (source.startsWith(REGISTRY_DEPENDENCY)) {
-      const component = source.split('/').at(-1)!
-      registryDependencies.add(component)
-    }
-  }
-
-  if (filename.endsWith('.ts')) {
-    const ast = parseSync(code, {
-      sourceType: 'module',
-      sourceFilename: filename,
-    })
-
-    const sources = ast.program.body.filter((i: any) => i.type === 'ImportDeclaration').map((i: any) => i.source)
-    sources.forEach((source: any) => {
-      populateDeps(source.value)
-    })
-  }
-  else {
-    const parsed = parse(code, { filename })
-    if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
-      const compiled = compileScript(parsed.descriptor, { id: '' })
-
-      Object.values(compiled.imports!).forEach((value) => {
-        populateDeps(value.source)
-      })
-    }
-  }
-
-  return { registryDependencies, dependencies }
-}
diff --git a/apps/www/src/lib/registry/schema.ts b/apps/www/src/lib/registry/schema.ts
deleted file mode 100644
index 94387a372..000000000
--- a/apps/www/src/lib/registry/schema.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as z from 'zod'
-
-export const registrySchema = z.array(
-  z.object({
-    name: z.string(),
-    dependencies: z.array(z.string()).optional(),
-    registryDependencies: z.array(z.string()).optional(),
-    files: z.array(z.string()),
-    type: z.enum([
-      'components:ui',
-      'components:component',
-      'components:example',
-      'components:block',
-    ]),
-  }),
-)
-
-export type Registry = z.infer<typeof registrySchema>
diff --git a/eslint.config.js b/eslint.config.js
index 5306f5712..899451111 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -17,7 +17,7 @@ export default antfu(
     },
   },
   {
-    files: ['**/lib/registry/default/example/*.vue', '**/lib/registry/new-york/example/*.vue'],
+    files: ['**/registry/default/example/*.vue', '**/registry/new-york/example/*.vue'],
     rules: {
       'no-alert': 0,
       'no-console': 0,

From ac14ca835a4e7fc08e1faa65e8a2365724b072ae Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 21 Nov 2024 12:40:47 +0800
Subject: [PATCH 12/39] chore: move registry, update import path, run app

---
 .../theme/components/BlockContainer.vue       |    14 +-
 .../theme/components/BlockCopyButton.vue      |     4 +-
 .../.vitepress/theme/components/Blocks.vue    |     2 +-
 .../.vitepress/theme/components/Callout.vue   |     2 +-
 .../theme/components/CodeConfigCustomizer.vue |     8 +-
 .../theme/components/CodeSandbox.vue          |     4 +-
 .../theme/components/ComponentPreview.vue     |     4 +-
 .../theme/components/CustomizerCode.vue       |     4 +-
 .../theme/components/DocsBreadcrumb.vue       |     2 +-
 .../.vitepress/theme/components/EditLink.vue  |     2 +-
 .../theme/components/ExamplesNav.vue          |     2 +-
 .../theme/components/InlineThemePicker.vue    |     4 +-
 .../theme/components/LandingExample.vue       |    14 +-
 .../theme/components/LandingPage.vue          |     2 +-
 .../theme/components/ManualInstall.vue        |     2 +-
 .../.vitepress/theme/components/MobileNav.vue |     6 +-
 .../theme/components/Stackblitz.vue           |     4 +-
 .../theme/components/StyleSwitcher.vue        |     8 +-
 .../theme/components/TabMarkdown.vue          |     2 +-
 .../theme/components/TabPreview.vue           |     2 +-
 .../theme/components/TableOfContent.vue       |     4 +-
 .../theme/components/TabsMarkdown.vue         |     2 +-
 .../theme/components/ThemeCustomizer.vue      |     6 +-
 .../theme/components/ThemePopover.vue         |     4 +-
 .../.vitepress/theme/components/Tooltip.vue   |     2 +-
 .../theme/components/theming/Theming.vue      |    14 +-
 .../theme/layout/ExamplesLayout.vue           |     2 +-
 .../.vitepress/theme/layout/MainLayout.vue    |    16 +-
 .../.vitepress/theme/layout/ThemingLayout.vue |     8 +-
 apps/www/.vitepress/theme/utils/codeeditor.ts |     4 +-
 apps/www/__registry__/index.ts                | 20071 ++++++++++++++--
 apps/www/registry/index.ts                    |    12 -
 .../new-york/example/DonutChartDemo.vue       |    23 -
 .../registry/new-york/example/SonnerDemo.vue  |    20 -
 apps/www/scripts/build-registry.ts            |    35 +-
 .../content/docs/components/aspect-ratio.md   |     2 +-
 apps/www/src/content/docs/components/form.md  |    12 +-
 apps/www/src/content/docs/components/input.md |     2 +-
 apps/www/src/content/docs/components/label.md |     2 +-
 .../src/content/docs/components/progress.md   |     2 +-
 .../src/content/docs/components/resizable.md  |     6 +-
 .../src/content/docs/components/separator.md  |     2 +-
 .../src/content/docs/components/skeleton.md   |     2 +-
 .../www/src/content/docs/components/switch.md |     2 +-
 .../src/content/docs/components/textarea.md   |     2 +-
 .../content/docs/components/toggle-group.md   |     2 +-
 .../www/src/content/docs/components/toggle.md |     2 +-
 .../src/content/docs/components/v-calendar.md |     2 +-
 apps/www/src/content/docs/contribution.md     |     2 +-
 .../src/content/docs/dark-mode/vitepress.md   |     2 +-
 apps/www/src/content/docs/figma.md            |     2 +-
 apps/www/src/content/docs/introduction.md     |     2 +-
 .../src/examples/authentication/Example.vue   |     2 +-
 .../components/UserAuthForm.vue               |     8 +-
 .../cards/components/CookieSettings.vue       |     8 +-
 .../cards/components/CreateAccount.vue        |     8 +-
 .../examples/cards/components/DatePicker.vue  |     6 +-
 .../examples/cards/components/GitHubCard.vue  |     8 +-
 .../cards/components/Notifications.vue        |     2 +-
 .../cards/components/PaymentMethod.vue        |    12 +-
 .../cards/components/ReportAnIssue.vue        |    12 +-
 .../cards/components/ShareDocument.vue        |    12 +-
 .../examples/cards/components/TeamMembers.vue |    10 +-
 apps/www/src/examples/dashboard/Example.vue   |     6 +-
 .../dashboard/components/DateRangePicker.vue  |    10 +-
 .../dashboard/components/Overview.vue         |     2 +-
 .../dashboard/components/RecentSales.vue      |     2 +-
 .../examples/dashboard/components/Search.vue  |     2 +-
 .../dashboard/components/TeamSwitcher.vue     |    20 +-
 .../examples/dashboard/components/UserNav.vue |     6 +-
 .../examples/forms/components/AccountForm.vue |    18 +-
 .../forms/components/AppearanceForm.vue       |    12 +-
 .../examples/forms/components/DisplayForm.vue |    10 +-
 .../forms/components/NotificationsForm.vue    |    14 +-
 .../examples/forms/components/ProfileForm.vue |    16 +-
 .../examples/forms/components/SidebarNav.vue  |     2 +-
 .../examples/forms/layouts/FormsLayout.vue    |     2 +-
 .../mail/components/AccountSwitcher.vue       |     2 +-
 .../www/src/examples/mail/components/Mail.vue |    12 +-
 .../examples/mail/components/MailDisplay.vue  |    20 +-
 .../src/examples/mail/components/MailList.vue |     4 +-
 apps/www/src/examples/mail/components/Nav.vue |     6 +-
 apps/www/src/examples/music/Example.vue       |     8 +-
 .../music/components/AlbumArtwork.vue         |     4 +-
 .../src/examples/music/components/Menu.vue    |     2 +-
 .../components/PodcastEmptyPlaceholder.vue    |     8 +-
 .../src/examples/music/components/Sidebar.vue |     4 +-
 apps/www/src/examples/playground/Example.vue  |    12 +-
 .../playground/components/CodeViewer.vue      |     4 +-
 .../components/MaxLengthSelector.vue          |     6 +-
 .../playground/components/PresetActions.vue   |    14 +-
 .../playground/components/PresetSave.vue      |     8 +-
 .../playground/components/PresetShare.vue     |     8 +-
 .../components/TemperatureSelector.vue        |     6 +-
 .../playground/components/TopPSelector.vue    |     6 +-
 .../examples/tasks/components/DataTable.vue   |     4 +-
 .../components/DataTableColumnHeader.vue      |     6 +-
 .../components/DataTableFacetedFilter.vue     |    12 +-
 .../tasks/components/DataTablePagination.vue  |     4 +-
 .../tasks/components/DataTableRowActions.vue  |     4 +-
 .../tasks/components/DataTableToolbar.vue     |     4 +-
 .../tasks/components/DataTableViewOptions.vue |     4 +-
 .../src/examples/tasks/components/UserNav.vue |     6 +-
 .../src/examples/tasks/components/columns.ts  |     4 +-
 .../{registry/default => src}/lib/utils.ts    |     0
 apps/www/src/public/r/colors/gray.json        |   102 +
 apps/www/src/public/r/colors/index.json       |  1999 ++
 apps/www/src/public/r/colors/neutral.json     |   102 +
 apps/www/src/public/r/colors/slate.json       |   102 +
 apps/www/src/public/r/colors/stone.json       |   102 +
 apps/www/src/public/r/colors/zinc.json        |   102 +
 apps/www/src/public/r/icons/index.json        |   150 +
 apps/www/src/public/r/index.json              |  5560 +++++
 .../r/styles/default/AccordionDemo.json       |    16 +
 .../public/r/styles/default/AlertDemo.json    |    16 +
 .../styles/default/AlertDestructiveDemo.json  |    16 +
 .../r/styles/default/AlertDialogDemo.json     |    17 +
 .../default/AreaChartCustomTooltip.json       |    16 +
 .../r/styles/default/AreaChartDemo.json       |    16 +
 .../r/styles/default/AreaChartSparkline.json  |    16 +
 .../r/styles/default/AspectRatioDemo.json     |    16 +
 .../r/styles/default/Authentication01.json    |     7 +
 .../r/styles/default/Authentication02.json    |     7 +
 .../r/styles/default/Authentication03.json    |     7 +
 .../r/styles/default/Authentication04.json    |     7 +
 .../public/r/styles/default/AutoFormApi.json  |    18 +
 .../r/styles/default/AutoFormArray.json       |    18 +
 .../r/styles/default/AutoFormBasic.json       |    18 +
 .../default/AutoFormConfirmPassword.json      |    18 +
 .../r/styles/default/AutoFormControlled.json  |    22 +
 .../styles/default/AutoFormDependencies.json  |    18 +
 .../default/AutoFormInputWithoutLabel.json    |    18 +
 .../r/styles/default/AutoFormSubObject.json   |    18 +
 .../public/r/styles/default/AvatarDemo.json   |    16 +
 .../public/r/styles/default/BadgeDemo.json    |    16 +
 .../styles/default/BadgeDestructiveDemo.json  |    16 +
 .../r/styles/default/BadgeOutlineDemo.json    |    16 +
 .../r/styles/default/BadgeSecondaryDemo.json  |    16 +
 .../styles/default/BarChartCustomTooltip.json |    16 +
 .../public/r/styles/default/BarChartDemo.json |    16 +
 .../r/styles/default/BarChartRounded.json     |    16 +
 .../r/styles/default/BarChartStacked.json     |    16 +
 .../r/styles/default/BreadcrumbDemo.json      |    17 +
 .../r/styles/default/BreadcrumbDropdown.json  |    17 +
 .../default/BreadcrumbEllipsisDemo.json       |    16 +
 .../r/styles/default/BreadcrumbLinkDemo.json  |    16 +
 .../styles/default/BreadcrumbResponsive.json  |    21 +
 .../default/BreadcrumbSeparatorDemo.json      |    16 +
 .../r/styles/default/ButtonAsChildDemo.json   |    16 +
 .../public/r/styles/default/ButtonDemo.json   |    16 +
 .../styles/default/ButtonDestructiveDemo.json |    16 +
 .../r/styles/default/ButtonGhostDemo.json     |    16 +
 .../r/styles/default/ButtonIconDemo.json      |    16 +
 .../r/styles/default/ButtonLinkDemo.json      |    16 +
 .../r/styles/default/ButtonLoadingDemo.json   |    16 +
 .../r/styles/default/ButtonOutlineDemo.json   |    16 +
 .../r/styles/default/ButtonSecondaryDemo.json |    16 +
 .../r/styles/default/ButtonWithIconDemo.json  |    16 +
 .../public/r/styles/default/CalendarDemo.json |    16 +
 .../public/r/styles/default/CalendarForm.json |    25 +
 .../r/styles/default/CalendarWithSelect.json  |    20 +
 .../src/public/r/styles/default/CardChat.json |    23 +
 .../src/public/r/styles/default/CardDemo.json |    19 +
 .../public/r/styles/default/CardFormDemo.json |    20 +
 .../public/r/styles/default/CardStats.json    |    21 +
 .../public/r/styles/default/CardWithForm.json |    20 +
 .../public/r/styles/default/CarouselApi.json  |    19 +
 .../public/r/styles/default/CarouselDemo.json |    17 +
 .../r/styles/default/CarouselOrientation.json |    17 +
 .../r/styles/default/CarouselPlugin.json      |    17 +
 .../public/r/styles/default/CarouselSize.json |    17 +
 .../r/styles/default/CarouselSpacing.json     |    17 +
 .../r/styles/default/CarouselThumbnails.json  |    19 +
 .../public/r/styles/default/CheckboxDemo.json |    16 +
 .../r/styles/default/CheckboxDisabled.json    |    16 +
 .../styles/default/CheckboxFormMultiple.json  |    23 +
 .../r/styles/default/CheckboxFormSingle.json  |    23 +
 .../r/styles/default/CheckboxWithText.json    |    16 +
 .../r/styles/default/CollapsibleDemo.json     |    17 +
 .../public/r/styles/default/ComboboxDemo.json |    19 +
 .../styles/default/ComboboxDropdownMenu.json  |    18 +
 .../public/r/styles/default/ComboboxForm.json |    25 +
 .../r/styles/default/ComboboxPopover.json     |    19 +
 .../r/styles/default/ComboboxResponsive.json  |    21 +
 .../public/r/styles/default/CommandDemo.json  |    16 +
 .../r/styles/default/CommandDialogDemo.json   |    18 +
 .../r/styles/default/ContextMenuDemo.json     |    16 +
 .../r/styles/default/CustomChartTooltip.json  |    16 +
 .../public/r/styles/default/Dashboard01.json  |     7 +
 .../public/r/styles/default/Dashboard02.json  |     7 +
 .../public/r/styles/default/Dashboard03.json  |     7 +
 .../public/r/styles/default/Dashboard04.json  |     7 +
 .../public/r/styles/default/Dashboard05.json  |     7 +
 .../public/r/styles/default/Dashboard06.json  |     7 +
 .../public/r/styles/default/Dashboard07.json  |     7 +
 .../default/DataTableColumnPinningDemo.json   |    23 +
 .../r/styles/default/DataTableDemo.json       |    23 +
 .../r/styles/default/DataTableDemoColumn.json |    17 +
 .../styles/default/DataTableReactiveDemo.json |    23 +
 .../r/styles/default/DatePickerDemo.json      |    19 +
 .../r/styles/default/DatePickerForm.json      |    25 +
 .../DatePickerWithIndependentMonths.json      |    19 +
 .../styles/default/DatePickerWithPresets.json |    20 +
 .../r/styles/default/DatePickerWithRange.json |    19 +
 .../default/DialogCustomCloseButton.json      |    19 +
 .../public/r/styles/default/DialogDemo.json   |    19 +
 .../public/r/styles/default/DialogForm.json   |    20 +
 .../styles/default/DialogScrollBodyDemo.json  |    17 +
 .../default/DialogScrollOverlayDemo.json      |    17 +
 .../r/styles/default/DonutChartColor.json     |    16 +
 .../default/DonutChartCustomTooltip.json      |    16 +
 .../r/styles/default/DonutChartDemo.json      |    16 +
 .../r/styles/default/DonutChartPie.json       |    16 +
 .../public/r/styles/default/DrawerDemo.json   |    20 +
 .../public/r/styles/default/DrawerDialog.json |    22 +
 .../default/DropdownMenuCheckboxes.json       |    17 +
 .../r/styles/default/DropdownMenuDemo.json    |    17 +
 .../default/DropdownMenuRadioGroup.json       |    17 +
 .../r/styles/default/HoverCardDemo.json       |    18 +
 .../public/r/styles/default/InputDemo.json    |    16 +
 .../r/styles/default/InputDisabled.json       |    16 +
 .../public/r/styles/default/InputFile.json    |    17 +
 .../public/r/styles/default/InputForm.json    |    23 +
 .../styles/default/InputFormAutoAnimate.json  |    23 +
 .../r/styles/default/InputWithButton.json     |    17 +
 .../r/styles/default/InputWithIcon.json       |    16 +
 .../r/styles/default/InputWithLabel.json      |    17 +
 .../public/r/styles/default/LabelDemo.json    |    17 +
 .../default/LineChartCustomTooltip.json       |    16 +
 .../r/styles/default/LineChartDemo.json       |    16 +
 .../r/styles/default/LineChartSparkline.json  |    16 +
 .../public/r/styles/default/MenubarDemo.json  |    16 +
 .../r/styles/default/NavigationMenuDemo.json  |    16 +
 .../r/styles/default/NumberFieldCurrency.json |    17 +
 .../r/styles/default/NumberFieldDecimal.json  |    17 +
 .../r/styles/default/NumberFieldDemo.json     |    17 +
 .../r/styles/default/NumberFieldDisabled.json |    17 +
 .../r/styles/default/NumberFieldForm.json     |    23 +
 .../styles/default/NumberFieldPercentage.json |    17 +
 .../r/styles/default/PaginationDemo.json      |    17 +
 .../r/styles/default/PinInputControlled.json  |    16 +
 .../public/r/styles/default/PinInputDemo.json |    16 +
 .../r/styles/default/PinInputDisabled.json    |    16 +
 .../r/styles/default/PinInputFormDemo.json    |    23 +
 .../styles/default/PinInputSeparatorDemo.json |    16 +
 .../public/r/styles/default/PopoverDemo.json  |    19 +
 .../public/r/styles/default/ProgressDemo.json |    16 +
 .../r/styles/default/RadioGroupDemo.json      |    17 +
 .../r/styles/default/RadioGroupForm.json      |    23 +
 .../r/styles/default/RangeCalendarDemo.json   |    16 +
 .../r/styles/default/ResizableDemo.json       |    16 +
 .../r/styles/default/ResizableHandleDemo.json |    16 +
 .../styles/default/ResizableVerticalDemo.json |    16 +
 .../r/styles/default/ScrollAreaDemo.json      |    17 +
 .../default/ScrollAreaHorizontalDemo.json     |    16 +
 .../public/r/styles/default/SelectDemo.json   |    16 +
 .../public/r/styles/default/SelectForm.json   |    23 +
 .../r/styles/default/SelectScrollable.json    |    16 +
 .../r/styles/default/SeparatorDemo.json       |    16 +
 .../public/r/styles/default/SheetDemo.json    |    19 +
 .../r/styles/default/SheetSideDemo.json       |    19 +
 .../public/r/styles/default/SkeletonCard.json |    16 +
 .../public/r/styles/default/SkeletonDemo.json |    16 +
 .../public/r/styles/default/SliderDemo.json   |    17 +
 .../public/r/styles/default/SliderForm.json   |    23 +
 .../public/r/styles/default/SonnerDemo.json   |    18 +
 .../r/styles/default/SonnerWithDialog.json    |    19 +
 .../public/r/styles/default/StepperDemo.json  |    16 +
 .../public/r/styles/default/StepperForm.json  |    21 +
 .../r/styles/default/StepperHorizental.json   |    17 +
 .../r/styles/default/StepperVertical.json     |    17 +
 .../public/r/styles/default/SwitchDemo.json   |    17 +
 .../public/r/styles/default/SwitchForm.json   |    23 +
 .../public/r/styles/default/TableDemo.json    |    16 +
 .../src/public/r/styles/default/TabsDemo.json |    20 +
 .../r/styles/default/TabsVerticalDemo.json    |    20 +
 .../styles/default/TagsInputComboboxDemo.json |    17 +
 .../r/styles/default/TagsInputDemo.json       |    16 +
 .../r/styles/default/TagsInputFormDemo.json   |    23 +
 .../public/r/styles/default/TextareaDemo.json |    16 +
 .../r/styles/default/TextareaDisabled.json    |    16 +
 .../public/r/styles/default/TextareaForm.json |    23 +
 .../r/styles/default/TextareaWithButton.json  |    17 +
 .../r/styles/default/TextareaWithLabel.json   |    17 +
 .../r/styles/default/TextareaWithText.json    |    17 +
 .../public/r/styles/default/ToastDemo.json    |    17 +
 .../r/styles/default/ToastDestructive.json    |    18 +
 .../public/r/styles/default/ToastSimple.json  |    17 +
 .../r/styles/default/ToastWithAction.json     |    18 +
 .../r/styles/default/ToastWithTitle.json      |    17 +
 .../public/r/styles/default/ToggleDemo.json   |    16 +
 .../r/styles/default/ToggleDisabledDemo.json  |    16 +
 .../r/styles/default/ToggleGroupDemo.json     |    16 +
 .../default/ToggleGroupDisabledDemo.json      |    16 +
 .../styles/default/ToggleGroupLargeDemo.json  |    16 +
 .../default/ToggleGroupOutlineDemo.json       |    16 +
 .../styles/default/ToggleGroupSingleDemo.json |    16 +
 .../styles/default/ToggleGroupSmallDemo.json  |    16 +
 .../r/styles/default/ToggleItalicDemo.json    |    16 +
 .../default/ToggleItalicWithTextDemo.json     |    16 +
 .../r/styles/default/ToggleLargeDemo.json     |    16 +
 .../r/styles/default/ToggleSmallDemo.json     |    16 +
 .../public/r/styles/default/TooltipDemo.json  |    17 +
 .../styles/default/TypographyBlockquote.json  |    14 +
 .../r/styles/default/TypographyDemo.json      |    14 +
 .../public/r/styles/default/TypographyH1.json |    14 +
 .../public/r/styles/default/TypographyH2.json |    14 +
 .../public/r/styles/default/TypographyH3.json |    14 +
 .../public/r/styles/default/TypographyH4.json |    14 +
 .../styles/default/TypographyInlineCode.json  |    14 +
 .../r/styles/default/TypographyLarge.json     |    14 +
 .../r/styles/default/TypographyLead.json      |    14 +
 .../r/styles/default/TypographyList.json      |    14 +
 .../r/styles/default/TypographyMuted.json     |    14 +
 .../public/r/styles/default/TypographyP.json  |    14 +
 .../r/styles/default/TypographySmall.json     |    14 +
 .../r/styles/default/TypographyTable.json     |    14 +
 .../r/styles/default/VCalendarDemo.json       |    16 +
 .../r/styles/default/VDatePickerDemo.json     |    19 +
 .../r/styles/default/VDatePickerForm.json     |    25 +
 .../default/VDatePickerWithPresets.json       |    20 +
 .../styles/default/VDatePickerWithRange.json  |    19 +
 .../r/styles/default/VDateTimePickerDemo.json |    19 +
 .../styles/default/VRangePickerWithSlot.json  |    19 +
 .../public/r/styles/default/accordion.json    |    40 +
 .../public/r/styles/default/alert-dialog.json |    71 +
 .../src/public/r/styles/default/alert.json    |    34 +
 .../public/r/styles/default/aspect-ratio.json |    20 +
 .../public/r/styles/default/auto-form.json    |   123 +
 .../src/public/r/styles/default/avatar.json   |    34 +
 .../src/public/r/styles/default/badge.json    |    22 +
 .../public/r/styles/default/breadcrumb.json   |    58 +
 .../src/public/r/styles/default/button.json   |    22 +
 .../src/public/r/styles/default/calendar.json |    89 +
 .../www/src/public/r/styles/default/card.json |    52 +
 .../src/public/r/styles/default/carousel.json |    62 +
 .../public/r/styles/default/chart-area.json   |    27 +
 .../public/r/styles/default/chart-bar.json    |    27 +
 .../public/r/styles/default/chart-donut.json  |    27 +
 .../public/r/styles/default/chart-line.json   |    27 +
 .../src/public/r/styles/default/chart.json    |    50 +
 .../src/public/r/styles/default/checkbox.json |    22 +
 .../public/r/styles/default/collapsible.json  |    32 +
 .../src/public/r/styles/default/command.json  |    71 +
 .../public/r/styles/default/context-menu.json |   106 +
 .../src/public/r/styles/default/dialog.json   |    70 +
 .../src/public/r/styles/default/drawer.json   |    60 +
 .../r/styles/default/dropdown-menu.json       |   100 +
 .../www/src/public/r/styles/default/form.json |    63 +
 .../public/r/styles/default/hover-card.json   |    34 +
 .../src/public/r/styles/default/index.json    |    21 +
 .../src/public/r/styles/default/input.json    |    24 +
 .../src/public/r/styles/default/label.json    |    22 +
 .../src/public/r/styles/default/menubar.json  |   106 +
 .../r/styles/default/navigation-menu.json     |    64 +
 .../public/r/styles/default/number-field.json |    46 +
 .../public/r/styles/default/pagination.json   |    47 +
 .../public/r/styles/default/pin-input.json    |    40 +
 .../src/public/r/styles/default/popover.json  |    34 +
 .../src/public/r/styles/default/progress.json |    22 +
 .../public/r/styles/default/radio-group.json  |    28 +
 .../r/styles/default/range-calendar.json      |    89 +
 .../public/r/styles/default/resizable.json    |    28 +
 .../public/r/styles/default/scroll-area.json  |    28 +
 .../src/public/r/styles/default/select.json   |    82 +
 .../public/r/styles/default/separator.json    |    22 +
 .../src/public/r/styles/default/sheet.json    |    64 +
 .../src/public/r/styles/default/sidebar.json  |   177 +
 .../src/public/r/styles/default/skeleton.json |    22 +
 .../src/public/r/styles/default/slider.json   |    22 +
 .../src/public/r/styles/default/sonner.json   |    22 +
 .../src/public/r/styles/default/stepper.json  |    58 +
 .../src/public/r/styles/default/switch.json   |    22 +
 .../src/public/r/styles/default/table.json    |    70 +
 .../www/src/public/r/styles/default/tabs.json |    40 +
 .../public/r/styles/default/tags-input.json   |    46 +
 .../src/public/r/styles/default/textarea.json |    24 +
 .../r/styles/default/theme-daylight.json      |    58 +
 .../r/styles/default/theme-emerald.json       |    58 +
 .../r/styles/default/theme-midnight.json      |    58 +
 .../src/public/r/styles/default/toast.json    |    70 +
 .../public/r/styles/default/toggle-group.json |    29 +
 .../src/public/r/styles/default/toggle.json   |    22 +
 .../src/public/r/styles/default/tooltip.json  |    40 +
 .../src/public/r/styles/default/utils.json    |    16 +
 .../public/r/styles/default/v-calendar.json   |    26 +
 apps/www/src/public/r/styles/index.json       |    10 +
 .../r/styles/new-york/AccordionDemo.json      |    16 +
 .../public/r/styles/new-york/AlertDemo.json   |    16 +
 .../styles/new-york/AlertDestructiveDemo.json |    16 +
 .../r/styles/new-york/AlertDialogDemo.json    |    17 +
 .../new-york/AreaChartCustomTooltip.json      |    16 +
 .../r/styles/new-york/AreaChartDemo.json      |    16 +
 .../r/styles/new-york/AreaChartSparkline.json |    16 +
 .../r/styles/new-york/AspectRatioDemo.json    |    16 +
 .../r/styles/new-york/Authentication01.json   |     7 +
 .../r/styles/new-york/Authentication02.json   |     7 +
 .../r/styles/new-york/Authentication03.json   |     7 +
 .../r/styles/new-york/Authentication04.json   |     7 +
 .../public/r/styles/new-york/AutoFormApi.json |    18 +
 .../r/styles/new-york/AutoFormArray.json      |    18 +
 .../r/styles/new-york/AutoFormBasic.json      |    18 +
 .../new-york/AutoFormConfirmPassword.json     |    18 +
 .../r/styles/new-york/AutoFormControlled.json |    22 +
 .../styles/new-york/AutoFormDependencies.json |    18 +
 .../new-york/AutoFormInputWithoutLabel.json   |    18 +
 .../r/styles/new-york/AutoFormSubObject.json  |    18 +
 .../public/r/styles/new-york/AvatarDemo.json  |    16 +
 .../public/r/styles/new-york/BadgeDemo.json   |    16 +
 .../styles/new-york/BadgeDestructiveDemo.json |    16 +
 .../r/styles/new-york/BadgeOutlineDemo.json   |    16 +
 .../r/styles/new-york/BadgeSecondaryDemo.json |    16 +
 .../new-york/BarChartCustomTooltip.json       |    16 +
 .../r/styles/new-york/BarChartDemo.json       |    16 +
 .../r/styles/new-york/BarChartRounded.json    |    16 +
 .../r/styles/new-york/BarChartStacked.json    |    16 +
 .../r/styles/new-york/BreadcrumbDemo.json     |    17 +
 .../r/styles/new-york/BreadcrumbDropdown.json |    17 +
 .../new-york/BreadcrumbEllipsisDemo.json      |    16 +
 .../r/styles/new-york/BreadcrumbLinkDemo.json |    16 +
 .../styles/new-york/BreadcrumbResponsive.json |    21 +
 .../new-york/BreadcrumbSeparatorDemo.json     |    16 +
 .../r/styles/new-york/ButtonAsChildDemo.json  |    16 +
 .../public/r/styles/new-york/ButtonDemo.json  |    16 +
 .../new-york/ButtonDestructiveDemo.json       |    16 +
 .../r/styles/new-york/ButtonGhostDemo.json    |    16 +
 .../r/styles/new-york/ButtonIconDemo.json     |    16 +
 .../r/styles/new-york/ButtonLinkDemo.json     |    16 +
 .../r/styles/new-york/ButtonLoadingDemo.json  |    16 +
 .../r/styles/new-york/ButtonOutlineDemo.json  |    16 +
 .../styles/new-york/ButtonSecondaryDemo.json  |    16 +
 .../r/styles/new-york/ButtonWithIconDemo.json |    16 +
 .../r/styles/new-york/CalendarDemo.json       |    16 +
 .../r/styles/new-york/CalendarForm.json       |    25 +
 .../r/styles/new-york/CalendarWithSelect.json |    20 +
 .../public/r/styles/new-york/CardChat.json    |    23 +
 .../public/r/styles/new-york/CardDemo.json    |    19 +
 .../r/styles/new-york/CardFormDemo.json       |    20 +
 .../public/r/styles/new-york/CardStats.json   |    21 +
 .../r/styles/new-york/CardWithForm.json       |    20 +
 .../public/r/styles/new-york/CarouselApi.json |    19 +
 .../r/styles/new-york/CarouselDemo.json       |    17 +
 .../styles/new-york/CarouselOrientation.json  |    17 +
 .../r/styles/new-york/CarouselPlugin.json     |    17 +
 .../r/styles/new-york/CarouselSize.json       |    17 +
 .../r/styles/new-york/CarouselSpacing.json    |    17 +
 .../r/styles/new-york/CarouselThumbnails.json |    19 +
 .../r/styles/new-york/CheckboxDemo.json       |    16 +
 .../r/styles/new-york/CheckboxDisabled.json   |    16 +
 .../styles/new-york/CheckboxFormMultiple.json |    23 +
 .../r/styles/new-york/CheckboxFormSingle.json |    23 +
 .../r/styles/new-york/CheckboxWithText.json   |    16 +
 .../r/styles/new-york/CollapsibleDemo.json    |    17 +
 .../r/styles/new-york/ComboboxDemo.json       |    19 +
 .../styles/new-york/ComboboxDropdownMenu.json |    18 +
 .../r/styles/new-york/ComboboxForm.json       |    25 +
 .../r/styles/new-york/ComboboxPopover.json    |    19 +
 .../r/styles/new-york/ComboboxResponsive.json |    21 +
 .../public/r/styles/new-york/CommandDemo.json |    16 +
 .../r/styles/new-york/CommandDialogDemo.json  |    18 +
 .../r/styles/new-york/ContextMenuDemo.json    |    16 +
 .../r/styles/new-york/CustomChartTooltip.json |    16 +
 .../public/r/styles/new-york/Dashboard01.json |     7 +
 .../public/r/styles/new-york/Dashboard02.json |     7 +
 .../public/r/styles/new-york/Dashboard03.json |     7 +
 .../public/r/styles/new-york/Dashboard04.json |     7 +
 .../public/r/styles/new-york/Dashboard05.json |     7 +
 .../public/r/styles/new-york/Dashboard06.json |     7 +
 .../public/r/styles/new-york/Dashboard07.json |     7 +
 .../new-york/DataTableColumnPinningDemo.json  |    23 +
 .../r/styles/new-york/DataTableDemo.json      |    23 +
 .../styles/new-york/DataTableDemoColumn.json  |    17 +
 .../new-york/DataTableReactiveDemo.json       |    23 +
 .../r/styles/new-york/DatePickerDemo.json     |    19 +
 .../r/styles/new-york/DatePickerForm.json     |    25 +
 .../DatePickerWithIndependentMonths.json      |    19 +
 .../new-york/DatePickerWithPresets.json       |    20 +
 .../styles/new-york/DatePickerWithRange.json  |    19 +
 .../new-york/DialogCustomCloseButton.json     |    19 +
 .../public/r/styles/new-york/DialogDemo.json  |    19 +
 .../public/r/styles/new-york/DialogForm.json  |    20 +
 .../styles/new-york/DialogScrollBodyDemo.json |    17 +
 .../new-york/DialogScrollOverlayDemo.json     |    17 +
 .../r/styles/new-york/DonutChartColor.json    |    16 +
 .../new-york/DonutChartCustomTooltip.json     |    16 +
 .../r/styles/new-york/DonutChartDemo.json     |    16 +
 .../r/styles/new-york/DonutChartPie.json      |    16 +
 .../public/r/styles/new-york/DrawerDemo.json  |    20 +
 .../r/styles/new-york/DrawerDialog.json       |    22 +
 .../new-york/DropdownMenuCheckboxes.json      |    17 +
 .../r/styles/new-york/DropdownMenuDemo.json   |    17 +
 .../new-york/DropdownMenuRadioGroup.json      |    17 +
 .../r/styles/new-york/HoverCardDemo.json      |    18 +
 .../public/r/styles/new-york/InputDemo.json   |    16 +
 .../r/styles/new-york/InputDisabled.json      |    16 +
 .../public/r/styles/new-york/InputFile.json   |    17 +
 .../public/r/styles/new-york/InputForm.json   |    23 +
 .../styles/new-york/InputFormAutoAnimate.json |    23 +
 .../r/styles/new-york/InputWithButton.json    |    17 +
 .../r/styles/new-york/InputWithIcon.json      |    16 +
 .../r/styles/new-york/InputWithLabel.json     |    17 +
 .../public/r/styles/new-york/LabelDemo.json   |    17 +
 .../new-york/LineChartCustomTooltip.json      |    16 +
 .../r/styles/new-york/LineChartDemo.json      |    16 +
 .../r/styles/new-york/LineChartSparkline.json |    16 +
 .../public/r/styles/new-york/MenubarDemo.json |    16 +
 .../r/styles/new-york/NavigationMenuDemo.json |    16 +
 .../styles/new-york/NumberFieldCurrency.json  |    17 +
 .../r/styles/new-york/NumberFieldDecimal.json |    17 +
 .../r/styles/new-york/NumberFieldDemo.json    |    17 +
 .../styles/new-york/NumberFieldDisabled.json  |    17 +
 .../r/styles/new-york/NumberFieldForm.json    |    23 +
 .../new-york/NumberFieldPercentage.json       |    17 +
 .../r/styles/new-york/PaginationDemo.json     |    17 +
 .../r/styles/new-york/PinInputControlled.json |    16 +
 .../r/styles/new-york/PinInputDemo.json       |    16 +
 .../r/styles/new-york/PinInputDisabled.json   |    16 +
 .../r/styles/new-york/PinInputFormDemo.json   |    23 +
 .../new-york/PinInputSeparatorDemo.json       |    16 +
 .../public/r/styles/new-york/PopoverDemo.json |    19 +
 .../r/styles/new-york/ProgressDemo.json       |    16 +
 .../r/styles/new-york/RadioGroupDemo.json     |    17 +
 .../r/styles/new-york/RadioGroupForm.json     |    23 +
 .../r/styles/new-york/RangeCalendarDemo.json  |    16 +
 .../r/styles/new-york/ResizableDemo.json      |    16 +
 .../styles/new-york/ResizableHandleDemo.json  |    16 +
 .../new-york/ResizableVerticalDemo.json       |    16 +
 .../r/styles/new-york/ScrollAreaDemo.json     |    17 +
 .../new-york/ScrollAreaHorizontalDemo.json    |    16 +
 .../public/r/styles/new-york/SelectDemo.json  |    16 +
 .../public/r/styles/new-york/SelectForm.json  |    23 +
 .../r/styles/new-york/SelectScrollable.json   |    16 +
 .../r/styles/new-york/SeparatorDemo.json      |    16 +
 .../public/r/styles/new-york/SheetDemo.json   |    19 +
 .../r/styles/new-york/SheetSideDemo.json      |    19 +
 .../r/styles/new-york/SkeletonCard.json       |    16 +
 .../r/styles/new-york/SkeletonDemo.json       |    16 +
 .../public/r/styles/new-york/SliderDemo.json  |    17 +
 .../public/r/styles/new-york/SliderForm.json  |    23 +
 .../public/r/styles/new-york/SonnerDemo.json  |    18 +
 .../r/styles/new-york/SonnerWithDialog.json   |    19 +
 .../public/r/styles/new-york/StepperDemo.json |    16 +
 .../public/r/styles/new-york/StepperForm.json |    21 +
 .../r/styles/new-york/StepperHorizental.json  |    17 +
 .../r/styles/new-york/StepperVertical.json    |    17 +
 .../public/r/styles/new-york/SwitchDemo.json  |    17 +
 .../public/r/styles/new-york/SwitchForm.json  |    23 +
 .../public/r/styles/new-york/TableDemo.json   |    16 +
 .../public/r/styles/new-york/TabsDemo.json    |    20 +
 .../r/styles/new-york/TabsVerticalDemo.json   |    20 +
 .../new-york/TagsInputComboboxDemo.json       |    17 +
 .../r/styles/new-york/TagsInputDemo.json      |    16 +
 .../r/styles/new-york/TagsInputFormDemo.json  |    23 +
 .../r/styles/new-york/TextareaDemo.json       |    16 +
 .../r/styles/new-york/TextareaDisabled.json   |    16 +
 .../r/styles/new-york/TextareaForm.json       |    23 +
 .../r/styles/new-york/TextareaWithButton.json |    17 +
 .../r/styles/new-york/TextareaWithLabel.json  |    17 +
 .../r/styles/new-york/TextareaWithText.json   |    17 +
 .../public/r/styles/new-york/ToastDemo.json   |    17 +
 .../r/styles/new-york/ToastDestructive.json   |    18 +
 .../public/r/styles/new-york/ToastSimple.json |    17 +
 .../r/styles/new-york/ToastWithAction.json    |    18 +
 .../r/styles/new-york/ToastWithTitle.json     |    17 +
 .../public/r/styles/new-york/ToggleDemo.json  |    16 +
 .../r/styles/new-york/ToggleDisabledDemo.json |    16 +
 .../r/styles/new-york/ToggleGroupDemo.json    |    16 +
 .../new-york/ToggleGroupDisabledDemo.json     |    16 +
 .../styles/new-york/ToggleGroupLargeDemo.json |    16 +
 .../new-york/ToggleGroupOutlineDemo.json      |    16 +
 .../new-york/ToggleGroupSingleDemo.json       |    16 +
 .../styles/new-york/ToggleGroupSmallDemo.json |    16 +
 .../r/styles/new-york/ToggleItalicDemo.json   |    16 +
 .../new-york/ToggleItalicWithTextDemo.json    |    16 +
 .../r/styles/new-york/ToggleLargeDemo.json    |    16 +
 .../r/styles/new-york/ToggleSmallDemo.json    |    16 +
 .../public/r/styles/new-york/TooltipDemo.json |    17 +
 .../styles/new-york/TypographyBlockquote.json |    14 +
 .../r/styles/new-york/TypographyDemo.json     |    14 +
 .../r/styles/new-york/TypographyH1.json       |    14 +
 .../r/styles/new-york/TypographyH2.json       |    14 +
 .../r/styles/new-york/TypographyH3.json       |    14 +
 .../r/styles/new-york/TypographyH4.json       |    14 +
 .../styles/new-york/TypographyInlineCode.json |    14 +
 .../r/styles/new-york/TypographyLarge.json    |    14 +
 .../r/styles/new-york/TypographyLead.json     |    14 +
 .../r/styles/new-york/TypographyList.json     |    14 +
 .../r/styles/new-york/TypographyMuted.json    |    14 +
 .../public/r/styles/new-york/TypographyP.json |    14 +
 .../r/styles/new-york/TypographySmall.json    |    14 +
 .../r/styles/new-york/TypographyTable.json    |    14 +
 .../r/styles/new-york/VCalendarDemo.json      |    16 +
 .../r/styles/new-york/VDatePickerDemo.json    |    19 +
 .../r/styles/new-york/VDatePickerForm.json    |    25 +
 .../new-york/VDatePickerWithPresets.json      |    20 +
 .../styles/new-york/VDatePickerWithRange.json |    19 +
 .../styles/new-york/VDateTimePickerDemo.json  |    19 +
 .../styles/new-york/VRangePickerWithSlot.json |    19 +
 .../public/r/styles/new-york/accordion.json   |    40 +
 .../r/styles/new-york/alert-dialog.json       |    71 +
 .../src/public/r/styles/new-york/alert.json   |    34 +
 .../r/styles/new-york/aspect-ratio.json       |    20 +
 .../public/r/styles/new-york/auto-form.json   |   123 +
 .../src/public/r/styles/new-york/avatar.json  |    34 +
 .../src/public/r/styles/new-york/badge.json   |    22 +
 .../public/r/styles/new-york/breadcrumb.json  |    58 +
 .../src/public/r/styles/new-york/button.json  |    22 +
 .../public/r/styles/new-york/calendar.json    |    89 +
 .../src/public/r/styles/new-york/card.json    |    52 +
 .../public/r/styles/new-york/carousel.json    |    62 +
 .../public/r/styles/new-york/chart-area.json  |    27 +
 .../public/r/styles/new-york/chart-bar.json   |    27 +
 .../public/r/styles/new-york/chart-donut.json |    27 +
 .../public/r/styles/new-york/chart-line.json  |    27 +
 .../src/public/r/styles/new-york/chart.json   |    50 +
 .../public/r/styles/new-york/checkbox.json    |    22 +
 .../public/r/styles/new-york/collapsible.json |    32 +
 .../src/public/r/styles/new-york/command.json |    71 +
 .../r/styles/new-york/context-menu.json       |   106 +
 .../src/public/r/styles/new-york/dialog.json  |    70 +
 .../src/public/r/styles/new-york/drawer.json  |    60 +
 .../r/styles/new-york/dropdown-menu.json      |   100 +
 .../src/public/r/styles/new-york/form.json    |    63 +
 .../public/r/styles/new-york/hover-card.json  |    34 +
 .../src/public/r/styles/new-york/index.json   |    21 +
 .../src/public/r/styles/new-york/input.json   |    24 +
 .../src/public/r/styles/new-york/label.json   |    22 +
 .../src/public/r/styles/new-york/menubar.json |   106 +
 .../r/styles/new-york/navigation-menu.json    |    64 +
 .../r/styles/new-york/number-field.json       |    46 +
 .../public/r/styles/new-york/pagination.json  |    47 +
 .../public/r/styles/new-york/pin-input.json   |    40 +
 .../src/public/r/styles/new-york/popover.json |    34 +
 .../public/r/styles/new-york/progress.json    |    22 +
 .../public/r/styles/new-york/radio-group.json |    28 +
 .../r/styles/new-york/range-calendar.json     |    89 +
 .../public/r/styles/new-york/resizable.json   |    28 +
 .../public/r/styles/new-york/scroll-area.json |    28 +
 .../src/public/r/styles/new-york/select.json  |    82 +
 .../public/r/styles/new-york/separator.json   |    22 +
 .../src/public/r/styles/new-york/sheet.json   |    64 +
 .../src/public/r/styles/new-york/sidebar.json |   177 +
 .../public/r/styles/new-york/skeleton.json    |    22 +
 .../src/public/r/styles/new-york/slider.json  |    22 +
 .../src/public/r/styles/new-york/sonner.json  |    22 +
 .../src/public/r/styles/new-york/stepper.json |    58 +
 .../src/public/r/styles/new-york/switch.json  |    22 +
 .../src/public/r/styles/new-york/table.json   |    70 +
 .../src/public/r/styles/new-york/tabs.json    |    40 +
 .../public/r/styles/new-york/tags-input.json  |    46 +
 .../public/r/styles/new-york/textarea.json    |    24 +
 .../r/styles/new-york/theme-daylight.json     |    58 +
 .../r/styles/new-york/theme-emerald.json      |    58 +
 .../r/styles/new-york/theme-midnight.json     |    58 +
 .../src/public/r/styles/new-york/toast.json   |    70 +
 .../r/styles/new-york/toggle-group.json       |    29 +
 .../src/public/r/styles/new-york/toggle.json  |    22 +
 .../src/public/r/styles/new-york/tooltip.json |    40 +
 .../src/public/r/styles/new-york/utils.json   |    16 +
 .../public/r/styles/new-york/v-calendar.json  |    20 +
 apps/www/src/public/r/temp.json               | 13487 +++++++++++
 apps/www/src/public/r/themes.css              |   768 +
 apps/www/src/public/r/themes/gray.json        |    58 +
 apps/www/src/public/r/themes/neutral.json     |    58 +
 apps/www/src/public/r/themes/slate.json       |    58 +
 apps/www/src/public/r/themes/stone.json       |    58 +
 apps/www/src/public/r/themes/zinc.json        |    58 +
 .../registry/styles/default/alert-dialog.json |     4 +-
 .../registry/styles/default/auto-form.json    |    20 +-
 .../registry/styles/default/calendar.json     |     6 +-
 .../registry/styles/default/carousel.json     |     4 +-
 .../registry/styles/default/chart-area.json   |     2 +-
 .../registry/styles/default/chart-bar.json    |     2 +-
 .../registry/styles/default/chart-donut.json  |     2 +-
 .../registry/styles/default/chart-line.json   |     2 +-
 .../public/registry/styles/default/chart.json |     4 +-
 .../registry/styles/default/command.json      |     2 +-
 .../public/registry/styles/default/form.json  |     2 +-
 .../registry/styles/default/pagination.json   |     8 +-
 .../styles/default/range-calendar.json        |     6 +-
 .../registry/styles/default/sidebar.json      |    12 +-
 .../registry/styles/default/toggle-group.json |     4 +-
 .../registry/styles/default/v-calendar.json   |     2 +-
 .../styles/new-york/alert-dialog.json         |     4 +-
 .../registry/styles/new-york/auto-form.json   |    20 +-
 .../registry/styles/new-york/calendar.json    |     6 +-
 .../registry/styles/new-york/carousel.json    |     4 +-
 .../registry/styles/new-york/chart-area.json  |     2 +-
 .../registry/styles/new-york/chart-bar.json   |     2 +-
 .../registry/styles/new-york/chart-donut.json |     2 +-
 .../registry/styles/new-york/chart-line.json  |     2 +-
 .../registry/styles/new-york/chart.json       |     4 +-
 .../registry/styles/new-york/command.json     |     2 +-
 .../public/registry/styles/new-york/form.json |     2 +-
 .../registry/styles/new-york/pagination.json  |     8 +-
 .../styles/new-york/range-calendar.json       |     6 +-
 .../registry/styles/new-york/sidebar.json     |    12 +-
 .../styles/new-york/toggle-group.json         |     4 +-
 .../registry/styles/new-york/v-calendar.json  |     2 +-
 apps/www/{ => src}/registry/.eslintrc.json    |     0
 apps/www/{ => src}/registry/crawl-content.ts  |    10 +-
 .../default/block/Authentication01.vue        |     8 +-
 .../default/block/Authentication02.vue        |     8 +-
 .../default/block/Authentication03.vue        |     8 +-
 .../default/block/Authentication04.vue        |     6 +-
 .../registry/default/block/Dashboard01.vue    |    16 +-
 .../registry/default/block/Dashboard02.vue    |    12 +-
 .../registry/default/block/Dashboard03.vue    |    16 +-
 .../registry/default/block/Dashboard04.vue    |    12 +-
 .../registry/default/block/Dashboard05.vue    |    28 +-
 .../registry/default/block/Dashboard06.vue    |    20 +-
 .../registry/default/block/Dashboard07.vue    |    26 +-
 .../registry/default/block/Sidebar01.vue      |    10 +-
 .../registry/default/block/Sidebar07.vue      |    12 +-
 .../default/example/AccordionDemo.vue         |     2 +-
 .../registry/default/example/AlertDemo.vue    |     2 +-
 .../default/example/AlertDestructiveDemo.vue  |     2 +-
 .../default/example/AlertDialogDemo.vue       |     4 +-
 .../example/AreaChartCustomTooltip.vue        |     2 +-
 .../default/example/AreaChartDemo.vue         |     2 +-
 .../default/example/AreaChartSparkline.vue    |     2 +-
 .../default/example/AspectRatioDemo.vue       |     2 +-
 .../registry/default/example/AutoFormApi.vue  |     6 +-
 .../default/example/AutoFormArray.vue         |     6 +-
 .../default/example/AutoFormBasic.vue         |     6 +-
 .../example/AutoFormConfirmPassword.vue       |     6 +-
 .../default/example/AutoFormControlled.vue    |     6 +-
 .../default/example/AutoFormDependencies.vue  |     6 +-
 .../example/AutoFormInputWithoutLabel.vue     |     6 +-
 .../default/example/AutoFormSubObject.vue     |     6 +-
 .../registry/default/example/AvatarDemo.vue   |     2 +-
 .../registry/default/example/BadgeDemo.vue    |     2 +-
 .../default/example/BadgeDestructiveDemo.vue  |     2 +-
 .../default/example/BadgeOutlineDemo.vue      |     2 +-
 .../default/example/BadgeSecondaryDemo.vue    |     2 +-
 .../default/example/BarChartCustomTooltip.vue |     2 +-
 .../registry/default/example/BarChartDemo.vue |     2 +-
 .../default/example/BarChartRounded.vue       |     2 +-
 .../default/example/BarChartStacked.vue       |     2 +-
 .../default/example/BreadcrumbDemo.vue        |     4 +-
 .../default/example/BreadcrumbDropdown.vue    |     4 +-
 .../example/BreadcrumbEllipsisDemo.vue        |     2 +-
 .../default/example/BreadcrumbLinkDemo.vue    |     2 +-
 .../default/example/BreadcrumbResponsive.vue  |     8 +-
 .../example/BreadcrumbSeparatorDemo.vue       |     2 +-
 .../default/example/ButtonAsChildDemo.vue     |     2 +-
 .../registry/default/example/ButtonDemo.vue   |     2 +-
 .../default/example/ButtonDestructiveDemo.vue |     2 +-
 .../default/example/ButtonGhostDemo.vue       |     2 +-
 .../default/example/ButtonIconDemo.vue        |     2 +-
 .../default/example/ButtonLinkDemo.vue        |     2 +-
 .../default/example/ButtonLoadingDemo.vue     |     2 +-
 .../default/example/ButtonOutlineDemo.vue     |     2 +-
 .../default/example/ButtonSecondaryDemo.vue   |     2 +-
 .../default/example/ButtonWithIconDemo.vue    |     2 +-
 .../registry/default/example/CalendarDemo.vue |     2 +-
 .../registry/default/example/CalendarForm.vue |    12 +-
 .../default/example/CalendarWithSelect.vue    |     6 +-
 .../registry/default/example/CardChat.vue     |    16 +-
 .../registry/default/example/CardDemo.vue     |     8 +-
 .../registry/default/example/CardFormDemo.vue |    10 +-
 .../registry/default/example/CardStats.vue    |     4 +-
 .../registry/default/example/CardWithForm.vue |    10 +-
 .../default/example/Cards/ActivityGoal.vue    |     4 +-
 .../default/example/Cards/DataTable.vue       |    16 +-
 .../registry/default/example/Cards/Metric.vue |     2 +-
 .../registry/default/example/CarouselApi.vue  |     6 +-
 .../registry/default/example/CarouselDemo.vue |     4 +-
 .../default/example/CarouselOrientation.vue   |     4 +-
 .../default/example/CarouselPlugin.vue        |     4 +-
 .../registry/default/example/CarouselSize.vue |     4 +-
 .../default/example/CarouselSpacing.vue       |     4 +-
 .../default/example/CarouselThumbnails.vue    |     4 +-
 .../registry/default/example/CheckboxDemo.vue |     2 +-
 .../default/example/CheckboxDisabled.vue      |     2 +-
 .../default/example/CheckboxFormMultiple.vue  |     8 +-
 .../default/example/CheckboxFormSingle.vue    |     8 +-
 .../default/example/CheckboxWithText.vue      |     2 +-
 .../default/example/CollapsibleDemo.vue       |     4 +-
 .../registry/default/example/ComboboxDemo.vue |    10 +-
 .../default/example/ComboboxDropdownMenu.vue  |     6 +-
 .../registry/default/example/ComboboxForm.vue |    14 +-
 .../default/example/ComboboxPopover.vue       |    10 +-
 .../default/example/ComboboxResponsive.vue    |     8 +-
 .../registry/default/example/CommandDemo.vue  |     2 +-
 .../default/example/CommandDialogDemo.vue     |     2 +-
 .../default/example/ContextMenuDemo.vue       |     2 +-
 .../default/example/CustomChartTooltip.vue    |     2 +-
 .../example/DataTableColumnPinningDemo.vue    |    12 +-
 .../default/example/DataTableDemo.vue         |    12 +-
 .../default/example/DataTableDemoColumn.vue   |     4 +-
 .../default/example/DataTableReactiveDemo.vue |    12 +-
 .../default/example/DatePickerDemo.vue        |     8 +-
 .../default/example/DatePickerForm.vue        |    12 +-
 .../DatePickerWithIndependentMonths.vue       |    10 +-
 .../default/example/DatePickerWithPresets.vue |    10 +-
 .../default/example/DatePickerWithRange.vue   |     8 +-
 .../example/DialogCustomCloseButton.vue       |     8 +-
 .../registry/default/example/DialogDemo.vue   |     8 +-
 .../registry/default/example/DialogForm.vue   |    10 +-
 .../default/example/DialogScrollBodyDemo.vue  |     4 +-
 .../example/DialogScrollOverlayDemo.vue       |     4 +-
 .../default/example/DonutChartColor.vue       |     2 +-
 .../example/DonutChartCustomTooltip.vue       |     2 +-
 .../default/example/DonutChartDemo.vue        |     2 +-
 .../default/example/DonutChartPie.vue         |     2 +-
 .../registry/default/example/DrawerDemo.vue   |     4 +-
 .../registry/default/example/DrawerDialog.vue |    10 +-
 .../example/DropdownMenuCheckboxes.vue        |     4 +-
 .../default/example/DropdownMenuDemo.vue      |     4 +-
 .../example/DropdownMenuRadioGroup.vue        |     4 +-
 .../default/example/HoverCardDemo.vue         |     6 +-
 .../registry/default/example/InputDemo.vue    |     2 +-
 .../default/example/InputDisabled.vue         |     2 +-
 .../registry/default/example/InputFile.vue    |     4 +-
 .../registry/default/example/InputForm.vue    |     8 +-
 .../default/example/InputFormAutoAnimate.vue  |     8 +-
 .../default/example/InputWithButton.vue       |     4 +-
 .../default/example/InputWithIcon.vue         |     2 +-
 .../default/example/InputWithLabel.vue        |     4 +-
 .../registry/default/example/LabelDemo.vue    |     4 +-
 .../example/LineChartCustomTooltip.vue        |     2 +-
 .../default/example/LineChartDemo.vue         |     2 +-
 .../default/example/LineChartSparkline.vue    |     2 +-
 .../registry/default/example/MenubarDemo.vue  |     2 +-
 .../default/example/NavigationMenuDemo.vue    |     2 +-
 .../default/example/NumberFieldCurrency.vue   |     4 +-
 .../default/example/NumberFieldDecimal.vue    |     4 +-
 .../default/example/NumberFieldDemo.vue       |     4 +-
 .../default/example/NumberFieldDisabled.vue   |     4 +-
 .../default/example/NumberFieldForm.vue       |     8 +-
 .../default/example/NumberFieldPercentage.vue |     4 +-
 .../default/example/PaginationDemo.vue        |     4 +-
 .../default/example/PinInputControlled.vue    |     2 +-
 .../registry/default/example/PinInputDemo.vue |     2 +-
 .../default/example/PinInputDisabled.vue      |     2 +-
 .../default/example/PinInputFormDemo.vue      |     8 +-
 .../default/example/PinInputSeparatorDemo.vue |     2 +-
 .../registry/default/example/PopoverDemo.vue  |     8 +-
 .../registry/default/example/ProgressDemo.vue |     2 +-
 .../default/example/RadioGroupDemo.vue        |     4 +-
 .../default/example/RadioGroupForm.vue        |     8 +-
 .../default/example/RangeCalendarDemo.vue     |     2 +-
 .../default/example/ResizableDemo.vue         |     2 +-
 .../default/example/ResizableHandleDemo.vue   |     2 +-
 .../default/example/ResizableVerticalDemo.vue |     2 +-
 .../default/example/ScrollAreaDemo.vue        |     4 +-
 .../example/ScrollAreaHorizontalDemo.vue      |     2 +-
 .../registry/default/example/SelectDemo.vue   |     2 +-
 .../registry/default/example/SelectForm.vue   |     8 +-
 .../default/example/SelectScrollable.vue      |     2 +-
 .../default/example/SeparatorDemo.vue         |     2 +-
 .../registry/default/example/SheetDemo.vue    |     8 +-
 .../default/example/SheetSideDemo.vue         |     8 +-
 .../registry/default/example/SkeletonCard.vue |     2 +-
 .../registry/default/example/SkeletonDemo.vue |     2 +-
 .../registry/default/example/SliderDemo.vue   |     2 +-
 .../registry/default/example/SliderForm.vue   |     8 +-
 .../registry/default/example/SonnerDemo.vue   |    23 +
 .../default/example/SonnerWithDialog.vue      |     4 +-
 .../registry/default/example/StepperDemo.vue  |     2 +-
 .../registry/default/example/StepperForm.vue  |    12 +-
 .../default/example/StepperHorizental.vue     |     4 +-
 .../default/example/StepperVertical.vue       |     4 +-
 .../registry/default/example/SwitchDemo.vue   |     4 +-
 .../registry/default/example/SwitchForm.vue   |     8 +-
 .../registry/default/example/TableDemo.vue    |     2 +-
 .../registry/default/example/TabsDemo.vue     |    10 +-
 .../default/example/TabsVerticalDemo.vue      |    10 +-
 .../default/example/TagsInputComboboxDemo.vue |     4 +-
 .../default/example/TagsInputDemo.vue         |     2 +-
 .../default/example/TagsInputFormDemo.vue     |     8 +-
 .../registry/default/example/TextareaDemo.vue |     2 +-
 .../default/example/TextareaDisabled.vue      |     2 +-
 .../registry/default/example/TextareaForm.vue |     8 +-
 .../default/example/TextareaWithButton.vue    |     4 +-
 .../default/example/TextareaWithLabel.vue     |     4 +-
 .../default/example/TextareaWithText.vue      |     4 +-
 .../registry/default/example/ToastDemo.vue    |     4 +-
 .../default/example/ToastDestructive.vue      |     6 +-
 .../registry/default/example/ToastSimple.vue  |     4 +-
 .../default/example/ToastWithAction.vue       |     6 +-
 .../default/example/ToastWithTitle.vue        |     4 +-
 .../registry/default/example/ToggleDemo.vue   |     2 +-
 .../default/example/ToggleDisabledDemo.vue    |     2 +-
 .../default/example/ToggleGroupDemo.vue       |     2 +-
 .../example/ToggleGroupDisabledDemo.vue       |     2 +-
 .../default/example/ToggleGroupLargeDemo.vue  |     2 +-
 .../example/ToggleGroupOutlineDemo.vue        |     2 +-
 .../default/example/ToggleGroupSingleDemo.vue |     2 +-
 .../default/example/ToggleGroupSmallDemo.vue  |     2 +-
 .../default/example/ToggleItalicDemo.vue      |     2 +-
 .../example/ToggleItalicWithTextDemo.vue      |     2 +-
 .../default/example/ToggleLargeDemo.vue       |     2 +-
 .../default/example/ToggleSmallDemo.vue       |     2 +-
 .../registry/default/example/TooltipDemo.vue  |     4 +-
 .../default/example/TypographyBlockquote.vue  |     0
 .../default/example/TypographyDemo.vue        |     0
 .../registry/default/example/TypographyH1.vue |     0
 .../registry/default/example/TypographyH2.vue |     0
 .../registry/default/example/TypographyH3.vue |     0
 .../registry/default/example/TypographyH4.vue |     0
 .../default/example/TypographyInlineCode.vue  |     0
 .../default/example/TypographyLarge.vue       |     0
 .../default/example/TypographyLead.vue        |     0
 .../default/example/TypographyList.vue        |     0
 .../default/example/TypographyMuted.vue       |     0
 .../registry/default/example/TypographyP.vue  |     0
 .../default/example/TypographySmall.vue       |     0
 .../default/example/TypographyTable.vue       |     0
 .../default/example/VCalendarDemo.vue         |     2 +-
 .../default/example/VDatePickerDemo.vue       |    10 +-
 .../default/example/VDatePickerForm.vue       |    12 +-
 .../example/VDatePickerWithPresets.vue        |    12 +-
 .../default/example/VDatePickerWithRange.vue  |    10 +-
 .../default/example/VDateTimePickerDemo.vue   |    10 +-
 .../default/example/VRangePickerWithSlot.vue  |    10 +-
 .../registry/default}/lib/utils.ts            |     0
 .../default/ui/accordion/Accordion.vue        |     0
 .../default/ui/accordion/AccordionContent.vue |     0
 .../default/ui/accordion/AccordionItem.vue    |     0
 .../default/ui/accordion/AccordionTrigger.vue |     0
 .../registry/default/ui/accordion/index.ts    |     0
 .../default/ui/alert-dialog/AlertDialog.vue   |     0
 .../ui/alert-dialog/AlertDialogAction.vue     |     2 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |     2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |     0
 .../alert-dialog/AlertDialogDescription.vue   |     0
 .../ui/alert-dialog/AlertDialogFooter.vue     |     0
 .../ui/alert-dialog/AlertDialogHeader.vue     |     0
 .../ui/alert-dialog/AlertDialogTitle.vue      |     0
 .../ui/alert-dialog/AlertDialogTrigger.vue    |     0
 .../registry/default/ui/alert-dialog/index.ts |     0
 .../registry/default/ui/alert/Alert.vue       |     0
 .../default/ui/alert/AlertDescription.vue     |     0
 .../registry/default/ui/alert/AlertTitle.vue  |     0
 .../registry/default/ui/alert/index.ts        |     0
 .../default/ui/aspect-ratio/AspectRatio.vue   |     0
 .../registry/default/ui/aspect-ratio/index.ts |     0
 .../default/ui/auto-form/AutoForm.vue         |     2 +-
 .../default/ui/auto-form/AutoFormField.vue    |     0
 .../ui/auto-form/AutoFormFieldArray.vue       |     8 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |     6 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |     8 +-
 .../ui/auto-form/AutoFormFieldEnum.vue        |     8 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |     6 +-
 .../ui/auto-form/AutoFormFieldInput.vue       |     6 +-
 .../ui/auto-form/AutoFormFieldNumber.vue      |     4 +-
 .../ui/auto-form/AutoFormFieldObject.vue      |     4 +-
 .../default/ui/auto-form/AutoFormLabel.vue    |     2 +-
 .../registry/default/ui/auto-form/constant.ts |     0
 .../default/ui/auto-form/dependencies.ts      |     0
 .../registry/default/ui/auto-form/index.ts    |     0
 .../default/ui/auto-form/interface.ts         |     0
 .../registry/default/ui/auto-form/utils.ts    |     0
 .../registry/default/ui/avatar/Avatar.vue     |     0
 .../default/ui/avatar/AvatarFallback.vue      |     0
 .../default/ui/avatar/AvatarImage.vue         |     0
 .../registry/default/ui/avatar/index.ts       |     0
 .../registry/default/ui/badge/Badge.vue       |     0
 .../registry/default/ui/badge/index.ts        |     0
 .../default/ui/breadcrumb/Breadcrumb.vue      |     0
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |     0
 .../default/ui/breadcrumb/BreadcrumbItem.vue  |     0
 .../default/ui/breadcrumb/BreadcrumbLink.vue  |     0
 .../default/ui/breadcrumb/BreadcrumbList.vue  |     0
 .../default/ui/breadcrumb/BreadcrumbPage.vue  |     0
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |     0
 .../registry/default/ui/breadcrumb/index.ts   |     0
 .../registry/default/ui/button/Button.vue     |     0
 .../registry/default/ui/button/index.ts       |     0
 .../registry/default/ui/calendar/Calendar.vue |     0
 .../default/ui/calendar/CalendarCell.vue      |     0
 .../ui/calendar/CalendarCellTrigger.vue       |     2 +-
 .../default/ui/calendar/CalendarGrid.vue      |     0
 .../default/ui/calendar/CalendarGridBody.vue  |     0
 .../default/ui/calendar/CalendarGridHead.vue  |     0
 .../default/ui/calendar/CalendarGridRow.vue   |     0
 .../default/ui/calendar/CalendarHeadCell.vue  |     0
 .../default/ui/calendar/CalendarHeader.vue    |     0
 .../default/ui/calendar/CalendarHeading.vue   |     0
 .../ui/calendar/CalendarNextButton.vue        |     2 +-
 .../ui/calendar/CalendarPrevButton.vue        |     2 +-
 .../registry/default/ui/calendar/index.ts     |     0
 .../registry/default/ui/card/Card.vue         |     0
 .../registry/default/ui/card/CardContent.vue  |     0
 .../default/ui/card/CardDescription.vue       |     0
 .../registry/default/ui/card/CardFooter.vue   |     0
 .../registry/default/ui/card/CardHeader.vue   |     0
 .../registry/default/ui/card/CardTitle.vue    |     0
 .../registry/default/ui/card/index.ts         |     0
 .../registry/default/ui/carousel/Carousel.vue |     0
 .../default/ui/carousel/CarouselContent.vue   |     0
 .../default/ui/carousel/CarouselItem.vue      |     0
 .../default/ui/carousel/CarouselNext.vue      |     2 +-
 .../default/ui/carousel/CarouselPrevious.vue  |     2 +-
 .../registry/default/ui/carousel/index.ts     |     0
 .../registry/default/ui/carousel/interface.ts |     0
 .../default/ui/carousel/useCarousel.ts        |     0
 .../default/ui/chart-area/AreaChart.vue       |     2 +-
 .../registry/default/ui/chart-area/index.ts   |     0
 .../default/ui/chart-bar/BarChart.vue         |     2 +-
 .../registry/default/ui/chart-bar/index.ts    |     0
 .../default/ui/chart-donut/DonutChart.vue     |     2 +-
 .../registry/default/ui/chart-donut/index.ts  |     0
 .../default/ui/chart-line/LineChart.vue       |     2 +-
 .../registry/default/ui/chart-line/index.ts   |     0
 .../default/ui/chart/ChartCrosshair.vue       |     0
 .../registry/default/ui/chart/ChartLegend.vue |     2 +-
 .../default/ui/chart/ChartSingleTooltip.vue   |     0
 .../default/ui/chart/ChartTooltip.vue         |     2 +-
 .../registry/default/ui/chart/index.ts        |     0
 .../registry/default/ui/chart/interface.ts    |     0
 .../registry/default/ui/checkbox/Checkbox.vue |     0
 .../registry/default/ui/checkbox/index.ts     |     0
 .../default/ui/collapsible/Collapsible.vue    |     0
 .../ui/collapsible/CollapsibleContent.vue     |     0
 .../ui/collapsible/CollapsibleTrigger.vue     |     0
 .../registry/default/ui/collapsible/index.ts  |     0
 .../registry/default/ui/command/Command.vue   |     0
 .../default/ui/command/CommandDialog.vue      |     2 +-
 .../default/ui/command/CommandEmpty.vue       |     0
 .../default/ui/command/CommandGroup.vue       |     0
 .../default/ui/command/CommandInput.vue       |     0
 .../default/ui/command/CommandItem.vue        |     0
 .../default/ui/command/CommandList.vue        |     0
 .../default/ui/command/CommandSeparator.vue   |     0
 .../default/ui/command/CommandShortcut.vue    |     0
 .../registry/default/ui/command/index.ts      |     0
 .../default/ui/context-menu/ContextMenu.vue   |     0
 .../context-menu/ContextMenuCheckboxItem.vue  |     0
 .../ui/context-menu/ContextMenuContent.vue    |     0
 .../ui/context-menu/ContextMenuGroup.vue      |     0
 .../ui/context-menu/ContextMenuItem.vue       |     0
 .../ui/context-menu/ContextMenuLabel.vue      |     0
 .../ui/context-menu/ContextMenuPortal.vue     |     0
 .../ui/context-menu/ContextMenuRadioGroup.vue |     0
 .../ui/context-menu/ContextMenuRadioItem.vue  |     0
 .../ui/context-menu/ContextMenuSeparator.vue  |     0
 .../ui/context-menu/ContextMenuShortcut.vue   |     0
 .../ui/context-menu/ContextMenuSub.vue        |     0
 .../ui/context-menu/ContextMenuSubContent.vue |     0
 .../ui/context-menu/ContextMenuSubTrigger.vue |     0
 .../ui/context-menu/ContextMenuTrigger.vue    |     0
 .../registry/default/ui/context-menu/index.ts |     0
 .../registry/default/ui/dialog/Dialog.vue     |     0
 .../default/ui/dialog/DialogClose.vue         |     0
 .../default/ui/dialog/DialogContent.vue       |     0
 .../default/ui/dialog/DialogDescription.vue   |     0
 .../default/ui/dialog/DialogFooter.vue        |     0
 .../default/ui/dialog/DialogHeader.vue        |     0
 .../default/ui/dialog/DialogScrollContent.vue |     0
 .../default/ui/dialog/DialogTitle.vue         |     0
 .../default/ui/dialog/DialogTrigger.vue       |     0
 .../registry/default/ui/dialog/index.ts       |     0
 .../registry/default/ui/drawer/Drawer.vue     |     0
 .../default/ui/drawer/DrawerContent.vue       |     0
 .../default/ui/drawer/DrawerDescription.vue   |     0
 .../default/ui/drawer/DrawerFooter.vue        |     0
 .../default/ui/drawer/DrawerHeader.vue        |     0
 .../default/ui/drawer/DrawerOverlay.vue       |     0
 .../default/ui/drawer/DrawerTitle.vue         |     0
 .../registry/default/ui/drawer/index.ts       |     0
 .../default/ui/dropdown-menu/DropdownMenu.vue |     0
 .../DropdownMenuCheckboxItem.vue              |     0
 .../ui/dropdown-menu/DropdownMenuContent.vue  |     0
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |     0
 .../ui/dropdown-menu/DropdownMenuItem.vue     |     0
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |     0
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |     0
 .../dropdown-menu/DropdownMenuRadioItem.vue   |     0
 .../dropdown-menu/DropdownMenuSeparator.vue   |     0
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |     0
 .../ui/dropdown-menu/DropdownMenuSub.vue      |     0
 .../dropdown-menu/DropdownMenuSubContent.vue  |     0
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |     0
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |     0
 .../default/ui/dropdown-menu/index.ts         |     0
 .../registry/default/ui/form/FormControl.vue  |     0
 .../default/ui/form/FormDescription.vue       |     0
 .../registry/default/ui/form/FormItem.vue     |     0
 .../registry/default/ui/form/FormLabel.vue    |     2 +-
 .../registry/default/ui/form/FormMessage.vue  |     0
 .../registry/default/ui/form/index.ts         |     0
 .../registry/default/ui/form/injectionKeys.ts |     0
 .../registry/default/ui/form/useFormField.ts  |     0
 .../default/ui/hover-card/HoverCard.vue       |     0
 .../ui/hover-card/HoverCardContent.vue        |     0
 .../ui/hover-card/HoverCardTrigger.vue        |     0
 .../registry/default/ui/hover-card/index.ts   |     0
 .../registry/default/ui/input/Input.vue       |     0
 .../registry/default/ui/input/index.ts        |     0
 .../registry/default/ui/label/Label.vue       |     0
 .../registry/default/ui/label/index.ts        |     0
 .../registry/default/ui/menubar/Menubar.vue   |     0
 .../ui/menubar/MenubarCheckboxItem.vue        |     0
 .../default/ui/menubar/MenubarContent.vue     |     0
 .../default/ui/menubar/MenubarGroup.vue       |     0
 .../default/ui/menubar/MenubarItem.vue        |     0
 .../default/ui/menubar/MenubarLabel.vue       |     0
 .../default/ui/menubar/MenubarMenu.vue        |     0
 .../default/ui/menubar/MenubarRadioGroup.vue  |     0
 .../default/ui/menubar/MenubarRadioItem.vue   |     0
 .../default/ui/menubar/MenubarSeparator.vue   |     0
 .../default/ui/menubar/MenubarShortcut.vue    |     0
 .../default/ui/menubar/MenubarSub.vue         |     0
 .../default/ui/menubar/MenubarSubContent.vue  |     0
 .../default/ui/menubar/MenubarSubTrigger.vue  |     0
 .../default/ui/menubar/MenubarTrigger.vue     |     0
 .../registry/default/ui/menubar/index.ts      |     0
 .../ui/navigation-menu/NavigationMenu.vue     |     0
 .../navigation-menu/NavigationMenuContent.vue |     0
 .../NavigationMenuIndicator.vue               |     0
 .../ui/navigation-menu/NavigationMenuItem.vue |     0
 .../ui/navigation-menu/NavigationMenuLink.vue |     0
 .../ui/navigation-menu/NavigationMenuList.vue |     0
 .../navigation-menu/NavigationMenuTrigger.vue |     0
 .../NavigationMenuViewport.vue                |     0
 .../default/ui/navigation-menu/index.ts       |     0
 .../default/ui/number-field/NumberField.vue   |     0
 .../ui/number-field/NumberFieldContent.vue    |     0
 .../ui/number-field/NumberFieldDecrement.vue  |     0
 .../ui/number-field/NumberFieldIncrement.vue  |     0
 .../ui/number-field/NumberFieldInput.vue      |     0
 .../registry/default/ui/number-field/index.ts |     0
 .../ui/pagination/PaginationEllipsis.vue      |     0
 .../default/ui/pagination/PaginationFirst.vue |     4 +-
 .../default/ui/pagination/PaginationLast.vue  |     4 +-
 .../default/ui/pagination/PaginationNext.vue  |     4 +-
 .../default/ui/pagination/PaginationPrev.vue  |     4 +-
 .../registry/default/ui/pagination/index.ts   |     0
 .../default/ui/pin-input/PinInput.vue         |     0
 .../default/ui/pin-input/PinInputGroup.vue    |     0
 .../default/ui/pin-input/PinInputInput.vue    |     0
 .../ui/pin-input/PinInputSeparator.vue        |     0
 .../registry/default/ui/pin-input/index.ts    |     0
 .../registry/default/ui/popover/Popover.vue   |     0
 .../default/ui/popover/PopoverContent.vue     |     0
 .../default/ui/popover/PopoverTrigger.vue     |     0
 .../registry/default/ui/popover/index.ts      |     0
 .../registry/default/ui/progress/Progress.vue |     0
 .../registry/default/ui/progress/index.ts     |     0
 .../default/ui/radio-group/RadioGroup.vue     |     0
 .../default/ui/radio-group/RadioGroupItem.vue |     0
 .../registry/default/ui/radio-group/index.ts  |     0
 .../ui/range-calendar/RangeCalendar.vue       |     0
 .../ui/range-calendar/RangeCalendarCell.vue   |     0
 .../RangeCalendarCellTrigger.vue              |     2 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |     0
 .../range-calendar/RangeCalendarGridBody.vue  |     0
 .../range-calendar/RangeCalendarGridHead.vue  |     0
 .../range-calendar/RangeCalendarGridRow.vue   |     0
 .../range-calendar/RangeCalendarHeadCell.vue  |     0
 .../ui/range-calendar/RangeCalendarHeader.vue |     0
 .../range-calendar/RangeCalendarHeading.vue   |     0
 .../RangeCalendarNextButton.vue               |     2 +-
 .../RangeCalendarPrevButton.vue               |     2 +-
 .../default/ui/range-calendar/index.ts        |     0
 .../default/ui/resizable/ResizableHandle.vue  |     0
 .../ui/resizable/ResizablePanelGroup.vue      |     0
 .../registry/default/ui/resizable/index.ts    |     0
 .../default/ui/scroll-area/ScrollArea.vue     |     0
 .../default/ui/scroll-area/ScrollBar.vue      |     0
 .../registry/default/ui/scroll-area/index.ts  |     0
 .../registry/default/ui/select/Select.vue     |     0
 .../default/ui/select/SelectContent.vue       |     0
 .../default/ui/select/SelectGroup.vue         |     0
 .../registry/default/ui/select/SelectItem.vue |     0
 .../default/ui/select/SelectItemText.vue      |     0
 .../default/ui/select/SelectLabel.vue         |     0
 .../ui/select/SelectScrollDownButton.vue      |     0
 .../ui/select/SelectScrollUpButton.vue        |     0
 .../default/ui/select/SelectSeparator.vue     |     0
 .../default/ui/select/SelectTrigger.vue       |     0
 .../default/ui/select/SelectValue.vue         |     0
 .../registry/default/ui/select/index.ts       |     0
 .../default/ui/separator/Separator.vue        |     0
 .../registry/default/ui/separator/index.ts    |     0
 .../registry/default/ui/sheet/Sheet.vue       |     0
 .../registry/default/ui/sheet/SheetClose.vue  |     0
 .../default/ui/sheet/SheetContent.vue         |     0
 .../default/ui/sheet/SheetDescription.vue     |     0
 .../registry/default/ui/sheet/SheetFooter.vue |     0
 .../registry/default/ui/sheet/SheetHeader.vue |     0
 .../registry/default/ui/sheet/SheetTitle.vue  |     0
 .../default/ui/sheet/SheetTrigger.vue         |     0
 .../registry/default/ui/sheet/index.ts        |     0
 .../registry/default/ui/sidebar/Sidebar.vue   |     4 +-
 .../default/ui/sidebar/SidebarContent.vue     |     0
 .../default/ui/sidebar/SidebarFooter.vue      |     0
 .../default/ui/sidebar/SidebarGroup.vue       |     0
 .../default/ui/sidebar/SidebarGroupAction.vue |     0
 .../ui/sidebar/SidebarGroupContent.vue        |     0
 .../default/ui/sidebar/SidebarGroupLabel.vue  |     0
 .../default/ui/sidebar/SidebarHeader.vue      |     0
 .../default/ui/sidebar/SidebarInput.vue       |     2 +-
 .../default/ui/sidebar/SidebarInset.vue       |     0
 .../default/ui/sidebar/SidebarMenu.vue        |     0
 .../default/ui/sidebar/SidebarMenuAction.vue  |     0
 .../default/ui/sidebar/SidebarMenuBadge.vue   |     0
 .../default/ui/sidebar/SidebarMenuButton.vue  |     6 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |     0
 .../default/ui/sidebar/SidebarMenuItem.vue    |     0
 .../ui/sidebar/SidebarMenuSkeleton.vue        |     2 +-
 .../default/ui/sidebar/SidebarMenuSub.vue     |     0
 .../ui/sidebar/SidebarMenuSubButton.vue       |     0
 .../default/ui/sidebar/SidebarMenuSubItem.vue |     0
 .../default/ui/sidebar/SidebarProvider.vue    |     0
 .../default/ui/sidebar/SidebarRail.vue        |     0
 .../default/ui/sidebar/SidebarSeparator.vue   |     2 +-
 .../default/ui/sidebar/SidebarTrigger.vue     |     2 +-
 .../registry/default/ui/sidebar/index.ts      |     0
 .../registry/default/ui/sidebar/utils.ts      |     0
 .../registry/default/ui/skeleton/Skeleton.vue |     0
 .../registry/default/ui/skeleton/index.ts     |     0
 .../registry/default/ui/slider/Slider.vue     |     0
 .../registry/default/ui/slider/index.ts       |     0
 .../registry/default/ui/sonner/Sonner.vue     |     0
 .../registry/default/ui/sonner/index.ts       |     0
 .../registry/default/ui/stepper/Stepper.vue   |     0
 .../default/ui/stepper/StepperDescription.vue |     0
 .../default/ui/stepper/StepperIndicator.vue   |     0
 .../default/ui/stepper/StepperItem.vue        |     0
 .../default/ui/stepper/StepperSeparator.vue   |     0
 .../default/ui/stepper/StepperTitle.vue       |     0
 .../default/ui/stepper/StepperTrigger.vue     |     0
 .../registry/default/ui/stepper/index.ts      |     0
 .../registry/default/ui/switch/Switch.vue     |     0
 .../registry/default/ui/switch/index.ts       |     0
 .../registry/default/ui/table/Table.vue       |     0
 .../registry/default/ui/table/TableBody.vue   |     0
 .../default/ui/table/TableCaption.vue         |     0
 .../registry/default/ui/table/TableCell.vue   |     0
 .../registry/default/ui/table/TableEmpty.vue  |     0
 .../registry/default/ui/table/TableFooter.vue |     0
 .../registry/default/ui/table/TableHead.vue   |     0
 .../registry/default/ui/table/TableHeader.vue |     0
 .../registry/default/ui/table/TableRow.vue    |     0
 .../registry/default/ui/table/index.ts        |     0
 .../registry/default/ui/tabs/Tabs.vue         |     0
 .../registry/default/ui/tabs/TabsContent.vue  |     0
 .../registry/default/ui/tabs/TabsList.vue     |     0
 .../registry/default/ui/tabs/TabsTrigger.vue  |     0
 .../registry/default/ui/tabs/index.ts         |     0
 .../default/ui/tags-input/TagsInput.vue       |     0
 .../default/ui/tags-input/TagsInputInput.vue  |     0
 .../default/ui/tags-input/TagsInputItem.vue   |     0
 .../ui/tags-input/TagsInputItemDelete.vue     |     0
 .../ui/tags-input/TagsInputItemText.vue       |     0
 .../registry/default/ui/tags-input/index.ts   |     0
 .../registry/default/ui/textarea/Textarea.vue |     0
 .../registry/default/ui/textarea/index.ts     |     0
 .../registry/default/ui/toast/Toast.vue       |     0
 .../registry/default/ui/toast/ToastAction.vue |     0
 .../registry/default/ui/toast/ToastClose.vue  |     0
 .../default/ui/toast/ToastDescription.vue     |     0
 .../default/ui/toast/ToastProvider.vue        |     0
 .../registry/default/ui/toast/ToastTitle.vue  |     0
 .../default/ui/toast/ToastViewport.vue        |     0
 .../registry/default/ui/toast/Toaster.vue     |     0
 .../registry/default/ui/toast/index.ts        |     0
 .../registry/default/ui/toast/use-toast.ts    |     0
 .../default/ui/toggle-group/ToggleGroup.vue   |     2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |     2 +-
 .../registry/default/ui/toggle-group/index.ts |     0
 .../registry/default/ui/toggle/Toggle.vue     |     0
 .../registry/default/ui/toggle/index.ts       |     0
 .../registry/default/ui/tooltip/Tooltip.vue   |     0
 .../default/ui/tooltip/TooltipContent.vue     |     0
 .../default/ui/tooltip/TooltipProvider.vue    |     0
 .../default/ui/tooltip/TooltipTrigger.vue     |     0
 .../registry/default/ui/tooltip/index.ts      |     0
 .../default/ui/v-calendar/Calendar.vue        |     2 +-
 .../registry/default/ui/v-calendar/index.ts   |     0
 apps/www/src/registry/index.ts                |     8 +
 .../new-york/block/Authentication01.vue       |     8 +-
 .../new-york/block/Authentication02.vue       |     8 +-
 .../new-york/block/Authentication03.vue       |     8 +-
 .../new-york/block/Authentication04.vue       |     6 +-
 .../registry/new-york/block/Dashboard01.vue   |    16 +-
 .../registry/new-york/block/Dashboard02.vue   |    12 +-
 .../registry/new-york/block/Dashboard03.vue   |    16 +-
 .../registry/new-york/block/Dashboard04.vue   |    12 +-
 .../registry/new-york/block/Dashboard05.vue   |    28 +-
 .../registry/new-york/block/Dashboard06.vue   |    20 +-
 .../registry/new-york/block/Dashboard07.vue   |    26 +-
 .../registry/new-york/block/Sidebar01.vue     |    10 +-
 .../registry/new-york/block/Sidebar07.vue     |    12 +-
 .../new-york/example/AccordionDemo.vue        |     2 +-
 .../registry/new-york/example/AlertDemo.vue   |     2 +-
 .../new-york/example/AlertDestructiveDemo.vue |     2 +-
 .../new-york/example/AlertDialogDemo.vue      |     4 +-
 .../example/AreaChartCustomTooltip.vue        |     2 +-
 .../new-york/example/AreaChartDemo.vue        |     2 +-
 .../new-york/example/AreaChartSparkline.vue   |     2 +-
 .../new-york/example/AspectRatioDemo.vue      |     2 +-
 .../registry/new-york/example/AutoFormApi.vue |     6 +-
 .../new-york/example/AutoFormArray.vue        |     6 +-
 .../new-york/example/AutoFormBasic.vue        |     6 +-
 .../example/AutoFormConfirmPassword.vue       |     6 +-
 .../new-york/example/AutoFormControlled.vue   |     6 +-
 .../new-york/example/AutoFormDependencies.vue |     6 +-
 .../example/AutoFormInputWithoutLabel.vue     |     6 +-
 .../new-york/example/AutoFormSubObject.vue    |     6 +-
 .../registry/new-york/example/AvatarDemo.vue  |     2 +-
 .../registry/new-york/example/BadgeDemo.vue   |     2 +-
 .../new-york/example/BadgeDestructiveDemo.vue |     2 +-
 .../new-york/example/BadgeOutlineDemo.vue     |     2 +-
 .../new-york/example/BadgeSecondaryDemo.vue   |     2 +-
 .../example/BarChartCustomTooltip.vue         |     2 +-
 .../new-york/example/BarChartDemo.vue         |     2 +-
 .../new-york/example/BarChartRounded.vue      |     2 +-
 .../new-york/example/BarChartStacked.vue      |     2 +-
 .../new-york/example/BreadcrumbDemo.vue       |     4 +-
 .../new-york/example/BreadcrumbDropdown.vue   |     4 +-
 .../example/BreadcrumbEllipsisDemo.vue        |     2 +-
 .../new-york/example/BreadcrumbLinkDemo.vue   |     2 +-
 .../new-york/example/BreadcrumbResponsive.vue |     8 +-
 .../example/BreadcrumbSeparatorDemo.vue       |     2 +-
 .../new-york/example/ButtonAsChildDemo.vue    |     2 +-
 .../registry/new-york/example/ButtonDemo.vue  |     2 +-
 .../example/ButtonDestructiveDemo.vue         |     2 +-
 .../new-york/example/ButtonGhostDemo.vue      |     2 +-
 .../new-york/example/ButtonIconDemo.vue       |     2 +-
 .../new-york/example/ButtonLinkDemo.vue       |     2 +-
 .../new-york/example/ButtonLoadingDemo.vue    |     2 +-
 .../new-york/example/ButtonOutlineDemo.vue    |     2 +-
 .../new-york/example/ButtonSecondaryDemo.vue  |     2 +-
 .../new-york/example/ButtonWithIconDemo.vue   |     2 +-
 .../new-york/example/CalendarDemo.vue         |     2 +-
 .../new-york/example/CalendarForm.vue         |    12 +-
 .../new-york/example/CalendarWithSelect.vue   |     6 +-
 .../registry/new-york/example/CardChat.vue    |    16 +-
 .../registry/new-york/example/CardDemo.vue    |     8 +-
 .../new-york/example/CardFormDemo.vue         |    10 +-
 .../registry/new-york/example/CardStats.vue   |     6 +-
 .../new-york/example/CardWithForm.vue         |    10 +-
 .../new-york/example/Cards/ActivityGoal.vue   |     4 +-
 .../new-york/example/Cards/DataTable.vue      |    16 +-
 .../new-york/example/Cards/Metric.vue         |     2 +-
 .../registry/new-york/example/CarouselApi.vue |     6 +-
 .../new-york/example/CarouselDemo.vue         |     4 +-
 .../new-york/example/CarouselOrientation.vue  |     4 +-
 .../new-york/example/CarouselPlugin.vue       |     4 +-
 .../new-york/example/CarouselSize.vue         |     4 +-
 .../new-york/example/CarouselSpacing.vue      |     4 +-
 .../new-york/example/CarouselThumbnails.vue   |     4 +-
 .../new-york/example/CheckboxDemo.vue         |     2 +-
 .../new-york/example/CheckboxDisabled.vue     |     2 +-
 .../new-york/example/CheckboxFormMultiple.vue |     8 +-
 .../new-york/example/CheckboxFormSingle.vue   |     8 +-
 .../new-york/example/CheckboxWithText.vue     |     2 +-
 .../new-york/example/CollapsibleDemo.vue      |     4 +-
 .../new-york/example/ComboboxDemo.vue         |    10 +-
 .../new-york/example/ComboboxDropdownMenu.vue |     6 +-
 .../new-york/example/ComboboxForm.vue         |    14 +-
 .../new-york/example/ComboboxPopover.vue      |     6 +-
 .../new-york/example/ComboboxResponsive.vue   |     8 +-
 .../registry/new-york/example/CommandDemo.vue |     2 +-
 .../new-york/example/CommandDialogDemo.vue    |     2 +-
 .../new-york/example/ContextMenuDemo.vue      |     2 +-
 .../new-york/example/CustomChartTooltip.vue   |     2 +-
 .../example/DataTableColumnPinningDemo.vue    |    12 +-
 .../new-york/example/DataTableDemo.vue        |    12 +-
 .../new-york/example/DataTableDemoColumn.vue  |     4 +-
 .../example/DataTableReactiveDemo.vue         |    12 +-
 .../new-york/example/DatePickerDemo.vue       |     8 +-
 .../new-york/example/DatePickerForm.vue       |    12 +-
 .../DatePickerWithIndependentMonths.vue       |    10 +-
 .../example/DatePickerWithPresets.vue         |    10 +-
 .../new-york/example/DatePickerWithRange.vue  |     8 +-
 .../example/DialogCustomCloseButton.vue       |     8 +-
 .../registry/new-york/example/DialogDemo.vue  |     8 +-
 .../registry/new-york/example/DialogForm.vue  |    10 +-
 .../new-york/example/DialogScrollBodyDemo.vue |     4 +-
 .../example/DialogScrollOverlayDemo.vue       |     4 +-
 .../new-york/example/DonutChartColor.vue      |     2 +-
 .../example/DonutChartCustomTooltip.vue       |     2 +-
 .../new-york/example/DonutChartDemo.vue       |    51 +
 .../new-york/example/DonutChartPie.vue        |     2 +-
 .../registry/new-york/example/DrawerDemo.vue  |     4 +-
 .../new-york/example/DrawerDialog.vue         |    10 +-
 .../example/DropdownMenuCheckboxes.vue        |     4 +-
 .../new-york/example/DropdownMenuDemo.vue     |     4 +-
 .../example/DropdownMenuRadioGroup.vue        |     4 +-
 .../new-york/example/HoverCardDemo.vue        |     6 +-
 .../registry/new-york/example/InputDemo.vue   |     2 +-
 .../new-york/example/InputDisabled.vue        |     2 +-
 .../registry/new-york/example/InputFile.vue   |     4 +-
 .../registry/new-york/example/InputForm.vue   |     8 +-
 .../new-york/example/InputFormAutoAnimate.vue |     8 +-
 .../new-york/example/InputWithButton.vue      |     4 +-
 .../new-york/example/InputWithIcon.vue        |     2 +-
 .../new-york/example/InputWithLabel.vue       |     4 +-
 .../registry/new-york/example/LabelDemo.vue   |     4 +-
 .../example/LineChartCustomTooltip.vue        |     2 +-
 .../new-york/example/LineChartDemo.vue        |     2 +-
 .../new-york/example/LineChartSparkline.vue   |     2 +-
 .../registry/new-york/example/MenubarDemo.vue |     2 +-
 .../new-york/example/NavigationMenuDemo.vue   |     2 +-
 .../new-york/example/NumberFieldCurrency.vue  |     4 +-
 .../new-york/example/NumberFieldDecimal.vue   |     4 +-
 .../new-york/example/NumberFieldDemo.vue      |     4 +-
 .../new-york/example/NumberFieldDisabled.vue  |     4 +-
 .../new-york/example/NumberFieldForm.vue      |     8 +-
 .../example/NumberFieldPercentage.vue         |     4 +-
 .../new-york/example/PaginationDemo.vue       |     4 +-
 .../new-york/example/PinInputControlled.vue   |     2 +-
 .../new-york/example/PinInputDemo.vue         |     2 +-
 .../new-york/example/PinInputDisabled.vue     |     2 +-
 .../new-york/example/PinInputFormDemo.vue     |     8 +-
 .../example/PinInputSeparatorDemo.vue         |     2 +-
 .../registry/new-york/example/PopoverDemo.vue |     8 +-
 .../new-york/example/ProgressDemo.vue         |     2 +-
 .../new-york/example/RadioGroupDemo.vue       |     4 +-
 .../new-york/example/RadioGroupForm.vue       |     8 +-
 .../new-york/example/RangeCalendarDemo.vue    |     2 +-
 .../new-york/example/ResizableDemo.vue        |     2 +-
 .../new-york/example/ResizableHandleDemo.vue  |     2 +-
 .../example/ResizableVerticalDemo.vue         |     2 +-
 .../new-york/example/ScrollAreaDemo.vue       |     4 +-
 .../example/ScrollAreaHorizontalDemo.vue      |     2 +-
 .../registry/new-york/example/SelectDemo.vue  |     2 +-
 .../registry/new-york/example/SelectForm.vue  |     8 +-
 .../new-york/example/SelectScrollable.vue     |     2 +-
 .../new-york/example/SeparatorDemo.vue        |     2 +-
 .../registry/new-york/example/SheetDemo.vue   |     8 +-
 .../new-york/example/SheetSideDemo.vue        |     8 +-
 .../new-york/example/SkeletonCard.vue         |     2 +-
 .../new-york/example/SkeletonDemo.vue         |     2 +-
 .../registry/new-york/example/SliderDemo.vue  |     2 +-
 .../registry/new-york/example/SliderForm.vue  |     8 +-
 .../registry/new-york}/example/SonnerDemo.vue |     2 +-
 .../new-york/example/SonnerWithDialog.vue     |     4 +-
 .../registry/new-york/example/StepperDemo.vue |     2 +-
 .../registry/new-york/example/StepperForm.vue |    12 +-
 .../new-york/example/StepperHorizental.vue    |     4 +-
 .../new-york/example/StepperVertical.vue      |     4 +-
 .../registry/new-york/example/SwitchDemo.vue  |     4 +-
 .../registry/new-york/example/SwitchForm.vue  |     8 +-
 .../registry/new-york/example/TableDemo.vue   |     2 +-
 .../registry/new-york/example/TabsDemo.vue    |    10 +-
 .../new-york/example/TabsVerticalDemo.vue     |    10 +-
 .../example/TagsInputComboboxDemo.vue         |     4 +-
 .../new-york/example/TagsInputDemo.vue        |     2 +-
 .../new-york/example/TagsInputFormDemo.vue    |     8 +-
 .../new-york/example/TextareaDemo.vue         |     2 +-
 .../new-york/example/TextareaDisabled.vue     |     2 +-
 .../new-york/example/TextareaForm.vue         |     8 +-
 .../new-york/example/TextareaWithButton.vue   |     4 +-
 .../new-york/example/TextareaWithLabel.vue    |     4 +-
 .../new-york/example/TextareaWithText.vue     |     4 +-
 .../registry/new-york/example/ToastDemo.vue   |     4 +-
 .../new-york/example/ToastDestructive.vue     |     6 +-
 .../registry/new-york/example/ToastSimple.vue |     4 +-
 .../new-york/example/ToastWithAction.vue      |     6 +-
 .../new-york/example/ToastWithTitle.vue       |     4 +-
 .../registry/new-york/example/ToggleDemo.vue  |     2 +-
 .../new-york/example/ToggleDisabledDemo.vue   |     2 +-
 .../new-york/example/ToggleGroupDemo.vue      |     2 +-
 .../example/ToggleGroupDisabledDemo.vue       |     2 +-
 .../new-york/example/ToggleGroupLargeDemo.vue |     2 +-
 .../example/ToggleGroupOutlineDemo.vue        |     2 +-
 .../example/ToggleGroupSingleDemo.vue         |     2 +-
 .../new-york/example/ToggleGroupSmallDemo.vue |     2 +-
 .../new-york/example/ToggleItalicDemo.vue     |     2 +-
 .../example/ToggleItalicWithTextDemo.vue      |     2 +-
 .../new-york/example/ToggleLargeDemo.vue      |     2 +-
 .../new-york/example/ToggleSmallDemo.vue      |     2 +-
 .../registry/new-york/example/TooltipDemo.vue |     4 +-
 .../new-york/example/TypographyBlockquote.vue |     0
 .../new-york/example/TypographyDemo.vue       |     0
 .../new-york/example/TypographyH1.vue         |     0
 .../new-york/example/TypographyH2.vue         |     0
 .../new-york/example/TypographyH3.vue         |     0
 .../new-york/example/TypographyH4.vue         |     0
 .../new-york/example/TypographyInlineCode.vue |     0
 .../new-york/example/TypographyLarge.vue      |     0
 .../new-york/example/TypographyLead.vue       |     0
 .../new-york/example/TypographyList.vue       |     0
 .../new-york/example/TypographyMuted.vue      |     0
 .../registry/new-york/example/TypographyP.vue |     0
 .../new-york/example/TypographySmall.vue      |     0
 .../new-york/example/TypographyTable.vue      |     0
 .../new-york/example/VCalendarDemo.vue        |     2 +-
 .../new-york/example/VDatePickerDemo.vue      |     8 +-
 .../new-york/example/VDatePickerForm.vue      |    12 +-
 .../example/VDatePickerWithPresets.vue        |    12 +-
 .../new-york/example/VDatePickerWithRange.vue |     8 +-
 .../new-york/example/VDateTimePickerDemo.vue  |    10 +-
 .../new-york/example/VRangePickerWithSlot.vue |     8 +-
 apps/www/src/registry/new-york/lib/utils.ts   |    15 +
 .../new-york/ui/accordion/Accordion.vue       |     0
 .../ui/accordion/AccordionContent.vue         |     0
 .../new-york/ui/accordion/AccordionItem.vue   |     0
 .../ui/accordion/AccordionTrigger.vue         |     0
 .../registry/new-york/ui/accordion/index.ts   |     0
 .../new-york/ui/alert-dialog/AlertDialog.vue  |     0
 .../ui/alert-dialog/AlertDialogAction.vue     |     2 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |     2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |     0
 .../alert-dialog/AlertDialogDescription.vue   |     0
 .../ui/alert-dialog/AlertDialogFooter.vue     |     0
 .../ui/alert-dialog/AlertDialogHeader.vue     |     0
 .../ui/alert-dialog/AlertDialogTitle.vue      |     0
 .../ui/alert-dialog/AlertDialogTrigger.vue    |     0
 .../new-york/ui/alert-dialog/index.ts         |     0
 .../registry/new-york/ui/alert/Alert.vue      |     0
 .../new-york/ui/alert/AlertDescription.vue    |     0
 .../registry/new-york/ui/alert/AlertTitle.vue |     0
 .../registry/new-york/ui/alert/index.ts       |     0
 .../new-york/ui/aspect-ratio/AspectRatio.vue  |     0
 .../new-york/ui/aspect-ratio/index.ts         |     0
 .../new-york/ui/auto-form/AutoForm.vue        |     2 +-
 .../new-york/ui/auto-form/AutoFormField.vue   |     0
 .../ui/auto-form/AutoFormFieldArray.vue       |     8 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |     6 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |     8 +-
 .../ui/auto-form/AutoFormFieldEnum.vue        |     8 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |     6 +-
 .../ui/auto-form/AutoFormFieldInput.vue       |     6 +-
 .../ui/auto-form/AutoFormFieldNumber.vue      |     4 +-
 .../ui/auto-form/AutoFormFieldObject.vue      |     4 +-
 .../new-york/ui/auto-form/AutoFormLabel.vue   |     2 +-
 .../new-york/ui/auto-form/constant.ts         |     0
 .../new-york/ui/auto-form/dependencies.ts     |     0
 .../registry/new-york/ui/auto-form/index.ts   |     0
 .../new-york/ui/auto-form/interface.ts        |     0
 .../registry/new-york/ui/auto-form/utils.ts   |     0
 .../registry/new-york/ui/avatar/Avatar.vue    |     0
 .../new-york/ui/avatar/AvatarFallback.vue     |     0
 .../new-york/ui/avatar/AvatarImage.vue        |     0
 .../registry/new-york/ui/avatar/index.ts      |     0
 .../registry/new-york/ui/badge/Badge.vue      |     0
 .../registry/new-york/ui/badge/index.ts       |     0
 .../new-york/ui/breadcrumb/Breadcrumb.vue     |     0
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |     0
 .../new-york/ui/breadcrumb/BreadcrumbItem.vue |     0
 .../new-york/ui/breadcrumb/BreadcrumbLink.vue |     0
 .../new-york/ui/breadcrumb/BreadcrumbList.vue |     0
 .../new-york/ui/breadcrumb/BreadcrumbPage.vue |     0
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |     0
 .../registry/new-york/ui/breadcrumb/index.ts  |     0
 .../registry/new-york/ui/button/Button.vue    |     0
 .../registry/new-york/ui/button/index.ts      |     0
 .../new-york/ui/calendar/Calendar.vue         |     0
 .../new-york/ui/calendar/CalendarCell.vue     |     0
 .../ui/calendar/CalendarCellTrigger.vue       |     2 +-
 .../new-york/ui/calendar/CalendarGrid.vue     |     0
 .../new-york/ui/calendar/CalendarGridBody.vue |     0
 .../new-york/ui/calendar/CalendarGridHead.vue |     0
 .../new-york/ui/calendar/CalendarGridRow.vue  |     0
 .../new-york/ui/calendar/CalendarHeadCell.vue |     0
 .../new-york/ui/calendar/CalendarHeader.vue   |     0
 .../new-york/ui/calendar/CalendarHeading.vue  |     0
 .../ui/calendar/CalendarNextButton.vue        |     2 +-
 .../ui/calendar/CalendarPrevButton.vue        |     2 +-
 .../registry/new-york/ui/calendar/index.ts    |     0
 .../registry/new-york/ui/card/Card.vue        |     0
 .../registry/new-york/ui/card/CardContent.vue |     0
 .../new-york/ui/card/CardDescription.vue      |     0
 .../registry/new-york/ui/card/CardFooter.vue  |     0
 .../registry/new-york/ui/card/CardHeader.vue  |     0
 .../registry/new-york/ui/card/CardTitle.vue   |     0
 .../registry/new-york/ui/card/index.ts        |     0
 .../new-york/ui/carousel/Carousel.vue         |     0
 .../new-york/ui/carousel/CarouselContent.vue  |     0
 .../new-york/ui/carousel/CarouselItem.vue     |     0
 .../new-york/ui/carousel/CarouselNext.vue     |     2 +-
 .../new-york/ui/carousel/CarouselPrevious.vue |     2 +-
 .../registry/new-york/ui/carousel/index.ts    |     0
 .../new-york/ui/carousel/interface.ts         |     0
 .../new-york/ui/carousel/useCarousel.ts       |     0
 .../new-york/ui/chart-area/AreaChart.vue      |     2 +-
 .../registry/new-york/ui/chart-area/index.ts  |     0
 .../new-york/ui/chart-bar/BarChart.vue        |     2 +-
 .../registry/new-york/ui/chart-bar/index.ts   |     0
 .../new-york/ui/chart-donut/DonutChart.vue    |     2 +-
 .../registry/new-york/ui/chart-donut/index.ts |     0
 .../new-york/ui/chart-line/LineChart.vue      |     2 +-
 .../registry/new-york/ui/chart-line/index.ts  |     0
 .../new-york/ui/chart/ChartCrosshair.vue      |     0
 .../new-york/ui/chart/ChartLegend.vue         |     2 +-
 .../new-york/ui/chart/ChartSingleTooltip.vue  |     0
 .../new-york/ui/chart/ChartTooltip.vue        |     2 +-
 .../registry/new-york/ui/chart/index.ts       |     0
 .../registry/new-york/ui/chart/interface.ts   |     0
 .../new-york/ui/checkbox/Checkbox.vue         |     0
 .../registry/new-york/ui/checkbox/index.ts    |     0
 .../new-york/ui/collapsible/Collapsible.vue   |     0
 .../ui/collapsible/CollapsibleContent.vue     |     0
 .../ui/collapsible/CollapsibleTrigger.vue     |     0
 .../registry/new-york/ui/collapsible/index.ts |     0
 .../registry/new-york/ui/command/Command.vue  |     0
 .../new-york/ui/command/CommandDialog.vue     |     2 +-
 .../new-york/ui/command/CommandEmpty.vue      |     0
 .../new-york/ui/command/CommandGroup.vue      |     0
 .../new-york/ui/command/CommandInput.vue      |     0
 .../new-york/ui/command/CommandItem.vue       |     0
 .../new-york/ui/command/CommandList.vue       |     0
 .../new-york/ui/command/CommandSeparator.vue  |     0
 .../new-york/ui/command/CommandShortcut.vue   |     0
 .../registry/new-york/ui/command/index.ts     |     0
 .../new-york/ui/context-menu/ContextMenu.vue  |     0
 .../context-menu/ContextMenuCheckboxItem.vue  |     0
 .../ui/context-menu/ContextMenuContent.vue    |     0
 .../ui/context-menu/ContextMenuGroup.vue      |     0
 .../ui/context-menu/ContextMenuItem.vue       |     0
 .../ui/context-menu/ContextMenuLabel.vue      |     0
 .../ui/context-menu/ContextMenuPortal.vue     |     0
 .../ui/context-menu/ContextMenuRadioGroup.vue |     0
 .../ui/context-menu/ContextMenuRadioItem.vue  |     0
 .../ui/context-menu/ContextMenuSeparator.vue  |     0
 .../ui/context-menu/ContextMenuShortcut.vue   |     0
 .../ui/context-menu/ContextMenuSub.vue        |     0
 .../ui/context-menu/ContextMenuSubContent.vue |     0
 .../ui/context-menu/ContextMenuSubTrigger.vue |     0
 .../ui/context-menu/ContextMenuTrigger.vue    |     0
 .../new-york/ui/context-menu/index.ts         |     0
 .../registry/new-york/ui/dialog/Dialog.vue    |     0
 .../new-york/ui/dialog/DialogClose.vue        |     0
 .../new-york/ui/dialog/DialogContent.vue      |     0
 .../new-york/ui/dialog/DialogDescription.vue  |     0
 .../new-york/ui/dialog/DialogFooter.vue       |     0
 .../new-york/ui/dialog/DialogHeader.vue       |     0
 .../ui/dialog/DialogScrollContent.vue         |     0
 .../new-york/ui/dialog/DialogTitle.vue        |     0
 .../new-york/ui/dialog/DialogTrigger.vue      |     0
 .../registry/new-york/ui/dialog/index.ts      |     0
 .../registry/new-york/ui/drawer/Drawer.vue    |     0
 .../new-york/ui/drawer/DrawerContent.vue      |     0
 .../new-york/ui/drawer/DrawerDescription.vue  |     0
 .../new-york/ui/drawer/DrawerFooter.vue       |     0
 .../new-york/ui/drawer/DrawerHeader.vue       |     0
 .../new-york/ui/drawer/DrawerOverlay.vue      |     0
 .../new-york/ui/drawer/DrawerTitle.vue        |     0
 .../registry/new-york/ui/drawer/index.ts      |     0
 .../ui/dropdown-menu/DropdownMenu.vue         |     0
 .../DropdownMenuCheckboxItem.vue              |     0
 .../ui/dropdown-menu/DropdownMenuContent.vue  |     0
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |     0
 .../ui/dropdown-menu/DropdownMenuItem.vue     |     0
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |     0
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |     0
 .../dropdown-menu/DropdownMenuRadioItem.vue   |     0
 .../dropdown-menu/DropdownMenuSeparator.vue   |     0
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |     0
 .../ui/dropdown-menu/DropdownMenuSub.vue      |     0
 .../dropdown-menu/DropdownMenuSubContent.vue  |     0
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |     0
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |     0
 .../new-york/ui/dropdown-menu/index.ts        |     0
 .../registry/new-york/ui/form/FormControl.vue |     0
 .../new-york/ui/form/FormDescription.vue      |     0
 .../registry/new-york/ui/form/FormItem.vue    |     0
 .../registry/new-york/ui/form/FormLabel.vue   |     2 +-
 .../registry/new-york/ui/form/FormMessage.vue |     0
 .../registry/new-york/ui/form/index.ts        |     0
 .../new-york/ui/form/injectionKeys.ts         |     0
 .../registry/new-york/ui/form/useFormField.ts |     0
 .../new-york/ui/hover-card/HoverCard.vue      |     0
 .../ui/hover-card/HoverCardContent.vue        |     0
 .../ui/hover-card/HoverCardTrigger.vue        |     0
 .../registry/new-york/ui/hover-card/index.ts  |     0
 .../registry/new-york/ui/input/Input.vue      |     0
 .../registry/new-york/ui/input/index.ts       |     0
 .../registry/new-york/ui/label/Label.vue      |     0
 .../registry/new-york/ui/label/index.ts       |     0
 .../registry/new-york/ui/menubar/Menubar.vue  |     0
 .../ui/menubar/MenubarCheckboxItem.vue        |     0
 .../new-york/ui/menubar/MenubarContent.vue    |     0
 .../new-york/ui/menubar/MenubarGroup.vue      |     0
 .../new-york/ui/menubar/MenubarItem.vue       |     0
 .../new-york/ui/menubar/MenubarLabel.vue      |     0
 .../new-york/ui/menubar/MenubarMenu.vue       |     0
 .../new-york/ui/menubar/MenubarRadioGroup.vue |     0
 .../new-york/ui/menubar/MenubarRadioItem.vue  |     0
 .../new-york/ui/menubar/MenubarSeparator.vue  |     0
 .../new-york/ui/menubar/MenubarShortcut.vue   |     0
 .../new-york/ui/menubar/MenubarSub.vue        |     0
 .../new-york/ui/menubar/MenubarSubContent.vue |     0
 .../new-york/ui/menubar/MenubarSubTrigger.vue |     0
 .../new-york/ui/menubar/MenubarTrigger.vue    |     0
 .../registry/new-york/ui/menubar/index.ts     |     0
 .../ui/navigation-menu/NavigationMenu.vue     |     0
 .../navigation-menu/NavigationMenuContent.vue |     0
 .../NavigationMenuIndicator.vue               |     0
 .../ui/navigation-menu/NavigationMenuItem.vue |     0
 .../ui/navigation-menu/NavigationMenuLink.vue |     0
 .../ui/navigation-menu/NavigationMenuList.vue |     0
 .../navigation-menu/NavigationMenuTrigger.vue |     0
 .../NavigationMenuViewport.vue                |     0
 .../new-york/ui/navigation-menu/index.ts      |     0
 .../new-york/ui/number-field/NumberField.vue  |     0
 .../ui/number-field/NumberFieldContent.vue    |     0
 .../ui/number-field/NumberFieldDecrement.vue  |     0
 .../ui/number-field/NumberFieldIncrement.vue  |     0
 .../ui/number-field/NumberFieldInput.vue      |     0
 .../new-york/ui/number-field/index.ts         |     0
 .../ui/pagination/PaginationEllipsis.vue      |     0
 .../ui/pagination/PaginationFirst.vue         |     4 +-
 .../new-york/ui/pagination/PaginationLast.vue |     4 +-
 .../new-york/ui/pagination/PaginationNext.vue |     4 +-
 .../new-york/ui/pagination/PaginationPrev.vue |     4 +-
 .../registry/new-york/ui/pagination/index.ts  |     0
 .../new-york/ui/pin-input/PinInput.vue        |     0
 .../new-york/ui/pin-input/PinInputGroup.vue   |     0
 .../new-york/ui/pin-input/PinInputInput.vue   |     0
 .../ui/pin-input/PinInputSeparator.vue        |     0
 .../registry/new-york/ui/pin-input/index.ts   |     0
 .../registry/new-york/ui/popover/Popover.vue  |     0
 .../new-york/ui/popover/PopoverContent.vue    |     0
 .../new-york/ui/popover/PopoverTrigger.vue    |     0
 .../registry/new-york/ui/popover/index.ts     |     0
 .../new-york/ui/progress/Progress.vue         |     0
 .../registry/new-york/ui/progress/index.ts    |     0
 .../new-york/ui/radio-group/RadioGroup.vue    |     0
 .../ui/radio-group/RadioGroupItem.vue         |     0
 .../registry/new-york/ui/radio-group/index.ts |     0
 .../ui/range-calendar/RangeCalendar.vue       |     0
 .../ui/range-calendar/RangeCalendarCell.vue   |     0
 .../RangeCalendarCellTrigger.vue              |     2 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |     0
 .../range-calendar/RangeCalendarGridBody.vue  |     0
 .../range-calendar/RangeCalendarGridHead.vue  |     0
 .../range-calendar/RangeCalendarGridRow.vue   |     0
 .../range-calendar/RangeCalendarHeadCell.vue  |     0
 .../ui/range-calendar/RangeCalendarHeader.vue |     0
 .../range-calendar/RangeCalendarHeading.vue   |     0
 .../RangeCalendarNextButton.vue               |     2 +-
 .../RangeCalendarPrevButton.vue               |     2 +-
 .../new-york/ui/range-calendar/index.ts       |     0
 .../new-york/ui/resizable/ResizableHandle.vue |     0
 .../ui/resizable/ResizablePanelGroup.vue      |     0
 .../registry/new-york/ui/resizable/index.ts   |     0
 .../new-york/ui/scroll-area/ScrollArea.vue    |     0
 .../new-york/ui/scroll-area/ScrollBar.vue     |     0
 .../registry/new-york/ui/scroll-area/index.ts |     0
 .../registry/new-york/ui/select/Select.vue    |     0
 .../new-york/ui/select/SelectContent.vue      |     0
 .../new-york/ui/select/SelectGroup.vue        |     0
 .../new-york/ui/select/SelectItem.vue         |     0
 .../new-york/ui/select/SelectItemText.vue     |     0
 .../new-york/ui/select/SelectLabel.vue        |     0
 .../ui/select/SelectScrollDownButton.vue      |     0
 .../ui/select/SelectScrollUpButton.vue        |     0
 .../new-york/ui/select/SelectSeparator.vue    |     0
 .../new-york/ui/select/SelectTrigger.vue      |     0
 .../new-york/ui/select/SelectValue.vue        |     0
 .../registry/new-york/ui/select/index.ts      |     0
 .../new-york/ui/separator/Separator.vue       |     0
 .../registry/new-york/ui/separator/index.ts   |     0
 .../registry/new-york/ui/sheet/Sheet.vue      |     0
 .../registry/new-york/ui/sheet/SheetClose.vue |     0
 .../new-york/ui/sheet/SheetContent.vue        |     0
 .../new-york/ui/sheet/SheetDescription.vue    |     0
 .../new-york/ui/sheet/SheetFooter.vue         |     0
 .../new-york/ui/sheet/SheetHeader.vue         |     0
 .../registry/new-york/ui/sheet/SheetTitle.vue |     0
 .../new-york/ui/sheet/SheetTrigger.vue        |     0
 .../registry/new-york/ui/sheet/index.ts       |     0
 .../registry/new-york/ui/sidebar/Sidebar.vue  |     4 +-
 .../new-york/ui/sidebar/SidebarContent.vue    |     0
 .../new-york/ui/sidebar/SidebarFooter.vue     |     0
 .../new-york/ui/sidebar/SidebarGroup.vue      |     0
 .../ui/sidebar/SidebarGroupAction.vue         |     0
 .../ui/sidebar/SidebarGroupContent.vue        |     0
 .../new-york/ui/sidebar/SidebarGroupLabel.vue |     0
 .../new-york/ui/sidebar/SidebarHeader.vue     |     0
 .../new-york/ui/sidebar/SidebarInput.vue      |     2 +-
 .../new-york/ui/sidebar/SidebarInset.vue      |     0
 .../new-york/ui/sidebar/SidebarMenu.vue       |     0
 .../new-york/ui/sidebar/SidebarMenuAction.vue |     0
 .../new-york/ui/sidebar/SidebarMenuBadge.vue  |     0
 .../new-york/ui/sidebar/SidebarMenuButton.vue |     6 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |     0
 .../new-york/ui/sidebar/SidebarMenuItem.vue   |     0
 .../ui/sidebar/SidebarMenuSkeleton.vue        |     2 +-
 .../new-york/ui/sidebar/SidebarMenuSub.vue    |     0
 .../ui/sidebar/SidebarMenuSubButton.vue       |     0
 .../ui/sidebar/SidebarMenuSubItem.vue         |     0
 .../new-york/ui/sidebar/SidebarProvider.vue   |     0
 .../new-york/ui/sidebar/SidebarRail.vue       |     0
 .../new-york/ui/sidebar/SidebarSeparator.vue  |     2 +-
 .../new-york/ui/sidebar/SidebarTrigger.vue    |     2 +-
 .../registry/new-york/ui/sidebar/index.ts     |     0
 .../registry/new-york/ui/sidebar/utils.ts     |     0
 .../new-york/ui/skeleton/Skeleton.vue         |     0
 .../registry/new-york/ui/skeleton/index.ts    |     0
 .../registry/new-york/ui/slider/Slider.vue    |     0
 .../registry/new-york/ui/slider/index.ts      |     0
 .../registry/new-york/ui/sonner/Sonner.vue    |     0
 .../registry/new-york/ui/sonner/index.ts      |     0
 .../registry/new-york/ui/stepper/Stepper.vue  |     0
 .../ui/stepper/StepperDescription.vue         |     0
 .../new-york/ui/stepper/StepperIndicator.vue  |     0
 .../new-york/ui/stepper/StepperItem.vue       |     0
 .../new-york/ui/stepper/StepperSeparator.vue  |     0
 .../new-york/ui/stepper/StepperTitle.vue      |     0
 .../new-york/ui/stepper/StepperTrigger.vue    |     0
 .../registry/new-york/ui/stepper/index.ts     |     0
 .../registry/new-york/ui/switch/Switch.vue    |     0
 .../registry/new-york/ui/switch/index.ts      |     0
 .../registry/new-york/ui/table/Table.vue      |     0
 .../registry/new-york/ui/table/TableBody.vue  |     0
 .../new-york/ui/table/TableCaption.vue        |     0
 .../registry/new-york/ui/table/TableCell.vue  |     0
 .../registry/new-york/ui/table/TableEmpty.vue |     0
 .../new-york/ui/table/TableFooter.vue         |     0
 .../registry/new-york/ui/table/TableHead.vue  |     0
 .../new-york/ui/table/TableHeader.vue         |     0
 .../registry/new-york/ui/table/TableRow.vue   |     0
 .../registry/new-york/ui/table/index.ts       |     0
 .../registry/new-york/ui/tabs/Tabs.vue        |     0
 .../registry/new-york/ui/tabs/TabsContent.vue |     0
 .../registry/new-york/ui/tabs/TabsList.vue    |     0
 .../registry/new-york/ui/tabs/TabsTrigger.vue |     0
 .../registry/new-york/ui/tabs/index.ts        |     0
 .../new-york/ui/tags-input/TagsInput.vue      |     0
 .../new-york/ui/tags-input/TagsInputInput.vue |     0
 .../new-york/ui/tags-input/TagsInputItem.vue  |     0
 .../ui/tags-input/TagsInputItemDelete.vue     |     0
 .../ui/tags-input/TagsInputItemText.vue       |     0
 .../registry/new-york/ui/tags-input/index.ts  |     0
 .../new-york/ui/textarea/Textarea.vue         |     0
 .../registry/new-york/ui/textarea/index.ts    |     0
 .../registry/new-york/ui/toast/Toast.vue      |     0
 .../new-york/ui/toast/ToastAction.vue         |     0
 .../registry/new-york/ui/toast/ToastClose.vue |     0
 .../new-york/ui/toast/ToastDescription.vue    |     0
 .../new-york/ui/toast/ToastProvider.vue       |     0
 .../registry/new-york/ui/toast/ToastTitle.vue |     0
 .../new-york/ui/toast/ToastViewport.vue       |     0
 .../registry/new-york/ui/toast/Toaster.vue    |     0
 .../registry/new-york/ui/toast/index.ts       |     0
 .../registry/new-york/ui/toast/use-toast.ts   |     0
 .../new-york/ui/toggle-group/ToggleGroup.vue  |     2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |     2 +-
 .../new-york/ui/toggle-group/index.ts         |     0
 .../registry/new-york/ui/toggle/Toggle.vue    |     0
 .../registry/new-york/ui/toggle/index.ts      |     0
 .../registry/new-york/ui/tooltip/Tooltip.vue  |     0
 .../new-york/ui/tooltip/TooltipContent.vue    |     0
 .../new-york/ui/tooltip/TooltipProvider.vue   |     0
 .../new-york/ui/tooltip/TooltipTrigger.vue    |     0
 .../registry/new-york/ui/tooltip/index.ts     |     0
 .../new-york/ui/v-calendar/Calendar.vue       |     2 +-
 .../registry/new-york/ui/v-calendar/index.ts  |     0
 .../registry/registry-base-colors.ts          |     0
 .../www/{ => src}/registry/registry-colors.ts |     0
 apps/www/{ => src}/registry/registry-icons.ts |     0
 apps/www/{ => src}/registry/registry-lib.ts   |     2 +-
 .../www/{ => src}/registry/registry-styles.ts |     0
 .../www/{ => src}/registry/registry-themes.ts |     0
 apps/www/{ => src}/registry/schema.ts         |     0
 apps/www/src/stores/config.ts                 |     4 +-
 apps/www/tsconfig.json                        |     2 +-
 .../utils/transformers/transform-import.ts    |     4 +-
 .../cli/test/utils/transform-import.test.ts   |    12 +-
 1859 files changed, 56261 insertions(+), 3085 deletions(-)
 delete mode 100644 apps/www/registry/index.ts
 delete mode 100644 apps/www/registry/new-york/example/DonutChartDemo.vue
 delete mode 100644 apps/www/registry/new-york/example/SonnerDemo.vue
 rename apps/www/{registry/default => src}/lib/utils.ts (100%)
 create mode 100644 apps/www/src/public/r/colors/gray.json
 create mode 100644 apps/www/src/public/r/colors/index.json
 create mode 100644 apps/www/src/public/r/colors/neutral.json
 create mode 100644 apps/www/src/public/r/colors/slate.json
 create mode 100644 apps/www/src/public/r/colors/stone.json
 create mode 100644 apps/www/src/public/r/colors/zinc.json
 create mode 100644 apps/www/src/public/r/icons/index.json
 create mode 100644 apps/www/src/public/r/index.json
 create mode 100644 apps/www/src/public/r/styles/default/AccordionDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/AlertDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/AlertDialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/AreaChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/AreaChartSparkline.json
 create mode 100644 apps/www/src/public/r/styles/default/AspectRatioDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/Authentication01.json
 create mode 100644 apps/www/src/public/r/styles/default/Authentication02.json
 create mode 100644 apps/www/src/public/r/styles/default/Authentication03.json
 create mode 100644 apps/www/src/public/r/styles/default/Authentication04.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormApi.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormArray.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormBasic.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormControlled.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormDependencies.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
 create mode 100644 apps/www/src/public/r/styles/default/AutoFormSubObject.json
 create mode 100644 apps/www/src/public/r/styles/default/AvatarDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BadgeDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/BarChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BarChartRounded.json
 create mode 100644 apps/www/src/public/r/styles/default/BarChartStacked.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
 create mode 100644 apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonGhostDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonIconDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonLinkDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CalendarForm.json
 create mode 100644 apps/www/src/public/r/styles/default/CalendarWithSelect.json
 create mode 100644 apps/www/src/public/r/styles/default/CardChat.json
 create mode 100644 apps/www/src/public/r/styles/default/CardDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CardFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CardStats.json
 create mode 100644 apps/www/src/public/r/styles/default/CardWithForm.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselApi.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselOrientation.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselPlugin.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselSize.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselSpacing.json
 create mode 100644 apps/www/src/public/r/styles/default/CarouselThumbnails.json
 create mode 100644 apps/www/src/public/r/styles/default/CheckboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CheckboxDisabled.json
 create mode 100644 apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
 create mode 100644 apps/www/src/public/r/styles/default/CheckboxFormSingle.json
 create mode 100644 apps/www/src/public/r/styles/default/CheckboxWithText.json
 create mode 100644 apps/www/src/public/r/styles/default/CollapsibleDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxForm.json
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxPopover.json
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxResponsive.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandDialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ContextMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/CustomChartTooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard01.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard02.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard03.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard04.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard05.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard06.json
 create mode 100644 apps/www/src/public/r/styles/default/Dashboard07.json
 create mode 100644 apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DataTableDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DataTableDemoColumn.json
 create mode 100644 apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DatePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DatePickerForm.json
 create mode 100644 apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
 create mode 100644 apps/www/src/public/r/styles/default/DatePickerWithPresets.json
 create mode 100644 apps/www/src/public/r/styles/default/DatePickerWithRange.json
 create mode 100644 apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
 create mode 100644 apps/www/src/public/r/styles/default/DialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DialogForm.json
 create mode 100644 apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DonutChartColor.json
 create mode 100644 apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/DonutChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DonutChartPie.json
 create mode 100644 apps/www/src/public/r/styles/default/DrawerDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DrawerDialog.json
 create mode 100644 apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
 create mode 100644 apps/www/src/public/r/styles/default/DropdownMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
 create mode 100644 apps/www/src/public/r/styles/default/HoverCardDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/InputDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/InputDisabled.json
 create mode 100644 apps/www/src/public/r/styles/default/InputFile.json
 create mode 100644 apps/www/src/public/r/styles/default/InputForm.json
 create mode 100644 apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
 create mode 100644 apps/www/src/public/r/styles/default/InputWithButton.json
 create mode 100644 apps/www/src/public/r/styles/default/InputWithIcon.json
 create mode 100644 apps/www/src/public/r/styles/default/InputWithLabel.json
 create mode 100644 apps/www/src/public/r/styles/default/LabelDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/LineChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/LineChartSparkline.json
 create mode 100644 apps/www/src/public/r/styles/default/MenubarDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/NavigationMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldCurrency.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldDecimal.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldDisabled.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldForm.json
 create mode 100644 apps/www/src/public/r/styles/default/NumberFieldPercentage.json
 create mode 100644 apps/www/src/public/r/styles/default/PaginationDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/PinInputControlled.json
 create mode 100644 apps/www/src/public/r/styles/default/PinInputDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/PinInputDisabled.json
 create mode 100644 apps/www/src/public/r/styles/default/PinInputFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/PopoverDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ProgressDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/RadioGroupDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/RadioGroupForm.json
 create mode 100644 apps/www/src/public/r/styles/default/RangeCalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ResizableDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ResizableHandleDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ScrollAreaDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SelectDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SelectForm.json
 create mode 100644 apps/www/src/public/r/styles/default/SelectScrollable.json
 create mode 100644 apps/www/src/public/r/styles/default/SeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SheetDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SheetSideDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SkeletonCard.json
 create mode 100644 apps/www/src/public/r/styles/default/SkeletonDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SliderDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SliderForm.json
 create mode 100644 apps/www/src/public/r/styles/default/SonnerDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SonnerWithDialog.json
 create mode 100644 apps/www/src/public/r/styles/default/StepperDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/StepperForm.json
 create mode 100644 apps/www/src/public/r/styles/default/StepperHorizental.json
 create mode 100644 apps/www/src/public/r/styles/default/StepperVertical.json
 create mode 100644 apps/www/src/public/r/styles/default/SwitchDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/SwitchForm.json
 create mode 100644 apps/www/src/public/r/styles/default/TableDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TabsDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TabsVerticalDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TagsInputDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TagsInputFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaDisabled.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaForm.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaWithButton.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaWithLabel.json
 create mode 100644 apps/www/src/public/r/styles/default/TextareaWithText.json
 create mode 100644 apps/www/src/public/r/styles/default/ToastDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToastDestructive.json
 create mode 100644 apps/www/src/public/r/styles/default/ToastSimple.json
 create mode 100644 apps/www/src/public/r/styles/default/ToastWithAction.json
 create mode 100644 apps/www/src/public/r/styles/default/ToastWithTitle.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleItalicDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleLargeDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/ToggleSmallDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TooltipDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyBlockquote.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyH1.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyH2.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyH3.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyH4.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyInlineCode.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyLarge.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyLead.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyList.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyMuted.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyP.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographySmall.json
 create mode 100644 apps/www/src/public/r/styles/default/TypographyTable.json
 create mode 100644 apps/www/src/public/r/styles/default/VCalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/VDatePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/VDatePickerForm.json
 create mode 100644 apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
 create mode 100644 apps/www/src/public/r/styles/default/VDatePickerWithRange.json
 create mode 100644 apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
 create mode 100644 apps/www/src/public/r/styles/default/accordion.json
 create mode 100644 apps/www/src/public/r/styles/default/alert-dialog.json
 create mode 100644 apps/www/src/public/r/styles/default/alert.json
 create mode 100644 apps/www/src/public/r/styles/default/aspect-ratio.json
 create mode 100644 apps/www/src/public/r/styles/default/auto-form.json
 create mode 100644 apps/www/src/public/r/styles/default/avatar.json
 create mode 100644 apps/www/src/public/r/styles/default/badge.json
 create mode 100644 apps/www/src/public/r/styles/default/breadcrumb.json
 create mode 100644 apps/www/src/public/r/styles/default/button.json
 create mode 100644 apps/www/src/public/r/styles/default/calendar.json
 create mode 100644 apps/www/src/public/r/styles/default/card.json
 create mode 100644 apps/www/src/public/r/styles/default/carousel.json
 create mode 100644 apps/www/src/public/r/styles/default/chart-area.json
 create mode 100644 apps/www/src/public/r/styles/default/chart-bar.json
 create mode 100644 apps/www/src/public/r/styles/default/chart-donut.json
 create mode 100644 apps/www/src/public/r/styles/default/chart-line.json
 create mode 100644 apps/www/src/public/r/styles/default/chart.json
 create mode 100644 apps/www/src/public/r/styles/default/checkbox.json
 create mode 100644 apps/www/src/public/r/styles/default/collapsible.json
 create mode 100644 apps/www/src/public/r/styles/default/command.json
 create mode 100644 apps/www/src/public/r/styles/default/context-menu.json
 create mode 100644 apps/www/src/public/r/styles/default/dialog.json
 create mode 100644 apps/www/src/public/r/styles/default/drawer.json
 create mode 100644 apps/www/src/public/r/styles/default/dropdown-menu.json
 create mode 100644 apps/www/src/public/r/styles/default/form.json
 create mode 100644 apps/www/src/public/r/styles/default/hover-card.json
 create mode 100644 apps/www/src/public/r/styles/default/index.json
 create mode 100644 apps/www/src/public/r/styles/default/input.json
 create mode 100644 apps/www/src/public/r/styles/default/label.json
 create mode 100644 apps/www/src/public/r/styles/default/menubar.json
 create mode 100644 apps/www/src/public/r/styles/default/navigation-menu.json
 create mode 100644 apps/www/src/public/r/styles/default/number-field.json
 create mode 100644 apps/www/src/public/r/styles/default/pagination.json
 create mode 100644 apps/www/src/public/r/styles/default/pin-input.json
 create mode 100644 apps/www/src/public/r/styles/default/popover.json
 create mode 100644 apps/www/src/public/r/styles/default/progress.json
 create mode 100644 apps/www/src/public/r/styles/default/radio-group.json
 create mode 100644 apps/www/src/public/r/styles/default/range-calendar.json
 create mode 100644 apps/www/src/public/r/styles/default/resizable.json
 create mode 100644 apps/www/src/public/r/styles/default/scroll-area.json
 create mode 100644 apps/www/src/public/r/styles/default/select.json
 create mode 100644 apps/www/src/public/r/styles/default/separator.json
 create mode 100644 apps/www/src/public/r/styles/default/sheet.json
 create mode 100644 apps/www/src/public/r/styles/default/sidebar.json
 create mode 100644 apps/www/src/public/r/styles/default/skeleton.json
 create mode 100644 apps/www/src/public/r/styles/default/slider.json
 create mode 100644 apps/www/src/public/r/styles/default/sonner.json
 create mode 100644 apps/www/src/public/r/styles/default/stepper.json
 create mode 100644 apps/www/src/public/r/styles/default/switch.json
 create mode 100644 apps/www/src/public/r/styles/default/table.json
 create mode 100644 apps/www/src/public/r/styles/default/tabs.json
 create mode 100644 apps/www/src/public/r/styles/default/tags-input.json
 create mode 100644 apps/www/src/public/r/styles/default/textarea.json
 create mode 100644 apps/www/src/public/r/styles/default/theme-daylight.json
 create mode 100644 apps/www/src/public/r/styles/default/theme-emerald.json
 create mode 100644 apps/www/src/public/r/styles/default/theme-midnight.json
 create mode 100644 apps/www/src/public/r/styles/default/toast.json
 create mode 100644 apps/www/src/public/r/styles/default/toggle-group.json
 create mode 100644 apps/www/src/public/r/styles/default/toggle.json
 create mode 100644 apps/www/src/public/r/styles/default/tooltip.json
 create mode 100644 apps/www/src/public/r/styles/default/utils.json
 create mode 100644 apps/www/src/public/r/styles/default/v-calendar.json
 create mode 100644 apps/www/src/public/r/styles/index.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AccordionDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AlertDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AreaChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Authentication01.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Authentication02.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Authentication03.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Authentication04.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormApi.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormArray.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormBasic.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormControlled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
 create mode 100644 apps/www/src/public/r/styles/new-york/AvatarDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BadgeDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BarChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BarChartRounded.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BarChartStacked.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
 create mode 100644 apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CalendarForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CardChat.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CardDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CardFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CardStats.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CardWithForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselApi.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselOrientation.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselPlugin.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselSize.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselSpacing.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CheckboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CheckboxWithText.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxPopover.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard01.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard02.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard03.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard04.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard05.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard06.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Dashboard07.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DataTableDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DatePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DatePickerForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DialogDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DialogForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DonutChartColor.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DonutChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DonutChartPie.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DrawerDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DrawerDialog.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
 create mode 100644 apps/www/src/public/r/styles/new-york/HoverCardDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputDisabled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputFile.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputWithButton.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputWithIcon.json
 create mode 100644 apps/www/src/public/r/styles/new-york/InputWithLabel.json
 create mode 100644 apps/www/src/public/r/styles/new-york/LabelDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/LineChartDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/LineChartSparkline.json
 create mode 100644 apps/www/src/public/r/styles/new-york/MenubarDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PaginationDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PinInputControlled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PinInputDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PinInputDisabled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/PopoverDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ProgressDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/RadioGroupForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ResizableDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SelectDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SelectForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SelectScrollable.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SeparatorDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SheetDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SheetSideDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SkeletonCard.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SkeletonDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SliderDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SliderForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SonnerDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
 create mode 100644 apps/www/src/public/r/styles/new-york/StepperDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/StepperForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/StepperHorizental.json
 create mode 100644 apps/www/src/public/r/styles/new-york/StepperVertical.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SwitchDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/SwitchForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TableDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TabsDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TagsInputDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaDisabled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaWithButton.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TextareaWithText.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToastDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToastDestructive.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToastSimple.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToastWithAction.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToastWithTitle.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TooltipDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyH1.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyH2.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyH3.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyH4.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyLarge.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyLead.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyList.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyMuted.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyP.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographySmall.json
 create mode 100644 apps/www/src/public/r/styles/new-york/TypographyTable.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VCalendarDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
 create mode 100644 apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
 create mode 100644 apps/www/src/public/r/styles/new-york/accordion.json
 create mode 100644 apps/www/src/public/r/styles/new-york/alert-dialog.json
 create mode 100644 apps/www/src/public/r/styles/new-york/alert.json
 create mode 100644 apps/www/src/public/r/styles/new-york/aspect-ratio.json
 create mode 100644 apps/www/src/public/r/styles/new-york/auto-form.json
 create mode 100644 apps/www/src/public/r/styles/new-york/avatar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/badge.json
 create mode 100644 apps/www/src/public/r/styles/new-york/breadcrumb.json
 create mode 100644 apps/www/src/public/r/styles/new-york/button.json
 create mode 100644 apps/www/src/public/r/styles/new-york/calendar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/card.json
 create mode 100644 apps/www/src/public/r/styles/new-york/carousel.json
 create mode 100644 apps/www/src/public/r/styles/new-york/chart-area.json
 create mode 100644 apps/www/src/public/r/styles/new-york/chart-bar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/chart-donut.json
 create mode 100644 apps/www/src/public/r/styles/new-york/chart-line.json
 create mode 100644 apps/www/src/public/r/styles/new-york/chart.json
 create mode 100644 apps/www/src/public/r/styles/new-york/checkbox.json
 create mode 100644 apps/www/src/public/r/styles/new-york/collapsible.json
 create mode 100644 apps/www/src/public/r/styles/new-york/command.json
 create mode 100644 apps/www/src/public/r/styles/new-york/context-menu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/dialog.json
 create mode 100644 apps/www/src/public/r/styles/new-york/drawer.json
 create mode 100644 apps/www/src/public/r/styles/new-york/dropdown-menu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/form.json
 create mode 100644 apps/www/src/public/r/styles/new-york/hover-card.json
 create mode 100644 apps/www/src/public/r/styles/new-york/index.json
 create mode 100644 apps/www/src/public/r/styles/new-york/input.json
 create mode 100644 apps/www/src/public/r/styles/new-york/label.json
 create mode 100644 apps/www/src/public/r/styles/new-york/menubar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/navigation-menu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/number-field.json
 create mode 100644 apps/www/src/public/r/styles/new-york/pagination.json
 create mode 100644 apps/www/src/public/r/styles/new-york/pin-input.json
 create mode 100644 apps/www/src/public/r/styles/new-york/popover.json
 create mode 100644 apps/www/src/public/r/styles/new-york/progress.json
 create mode 100644 apps/www/src/public/r/styles/new-york/radio-group.json
 create mode 100644 apps/www/src/public/r/styles/new-york/range-calendar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/resizable.json
 create mode 100644 apps/www/src/public/r/styles/new-york/scroll-area.json
 create mode 100644 apps/www/src/public/r/styles/new-york/select.json
 create mode 100644 apps/www/src/public/r/styles/new-york/separator.json
 create mode 100644 apps/www/src/public/r/styles/new-york/sheet.json
 create mode 100644 apps/www/src/public/r/styles/new-york/sidebar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/skeleton.json
 create mode 100644 apps/www/src/public/r/styles/new-york/slider.json
 create mode 100644 apps/www/src/public/r/styles/new-york/sonner.json
 create mode 100644 apps/www/src/public/r/styles/new-york/stepper.json
 create mode 100644 apps/www/src/public/r/styles/new-york/switch.json
 create mode 100644 apps/www/src/public/r/styles/new-york/table.json
 create mode 100644 apps/www/src/public/r/styles/new-york/tabs.json
 create mode 100644 apps/www/src/public/r/styles/new-york/tags-input.json
 create mode 100644 apps/www/src/public/r/styles/new-york/textarea.json
 create mode 100644 apps/www/src/public/r/styles/new-york/theme-daylight.json
 create mode 100644 apps/www/src/public/r/styles/new-york/theme-emerald.json
 create mode 100644 apps/www/src/public/r/styles/new-york/theme-midnight.json
 create mode 100644 apps/www/src/public/r/styles/new-york/toast.json
 create mode 100644 apps/www/src/public/r/styles/new-york/toggle-group.json
 create mode 100644 apps/www/src/public/r/styles/new-york/toggle.json
 create mode 100644 apps/www/src/public/r/styles/new-york/tooltip.json
 create mode 100644 apps/www/src/public/r/styles/new-york/utils.json
 create mode 100644 apps/www/src/public/r/styles/new-york/v-calendar.json
 create mode 100644 apps/www/src/public/r/temp.json
 create mode 100644 apps/www/src/public/r/themes.css
 create mode 100644 apps/www/src/public/r/themes/gray.json
 create mode 100644 apps/www/src/public/r/themes/neutral.json
 create mode 100644 apps/www/src/public/r/themes/slate.json
 create mode 100644 apps/www/src/public/r/themes/stone.json
 create mode 100644 apps/www/src/public/r/themes/zinc.json
 rename apps/www/{ => src}/registry/.eslintrc.json (100%)
 rename apps/www/{ => src}/registry/crawl-content.ts (97%)
 rename apps/www/{ => src}/registry/default/block/Authentication01.vue (83%)
 rename apps/www/{ => src}/registry/default/block/Authentication02.vue (88%)
 rename apps/www/{ => src}/registry/default/block/Authentication03.vue (90%)
 rename apps/www/{ => src}/registry/default/block/Authentication04.vue (92%)
 rename apps/www/{ => src}/registry/default/block/Dashboard01.vue (97%)
 rename apps/www/{ => src}/registry/default/block/Dashboard02.vue (96%)
 rename apps/www/{ => src}/registry/default/block/Dashboard03.vue (97%)
 rename apps/www/{ => src}/registry/default/block/Dashboard04.vue (95%)
 rename apps/www/{ => src}/registry/default/block/Dashboard05.vue (97%)
 rename apps/www/{ => src}/registry/default/block/Dashboard06.vue (98%)
 rename apps/www/{ => src}/registry/default/block/Dashboard07.vue (97%)
 rename apps/www/{ => src}/registry/default/block/Sidebar01.vue (96%)
 rename apps/www/{ => src}/registry/default/block/Sidebar07.vue (97%)
 rename apps/www/{ => src}/registry/default/example/AccordionDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/AlertDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/AlertDestructiveDemo.vue (78%)
 rename apps/www/{ => src}/registry/default/example/AlertDialogDemo.vue (90%)
 rename apps/www/{ => src}/registry/default/example/AreaChartCustomTooltip.vue (94%)
 rename apps/www/{ => src}/registry/default/example/AreaChartDemo.vue (93%)
 rename apps/www/{ => src}/registry/default/example/AreaChartSparkline.vue (94%)
 rename apps/www/{ => src}/registry/default/example/AspectRatioDemo.vue (82%)
 rename apps/www/{ => src}/registry/default/example/AutoFormApi.vue (85%)
 rename apps/www/{ => src}/registry/default/example/AutoFormArray.vue (81%)
 rename apps/www/{ => src}/registry/default/example/AutoFormBasic.vue (94%)
 rename apps/www/{ => src}/registry/default/example/AutoFormConfirmPassword.vue (80%)
 rename apps/www/{ => src}/registry/default/example/AutoFormControlled.vue (81%)
 rename apps/www/{ => src}/registry/default/example/AutoFormDependencies.vue (91%)
 rename apps/www/{ => src}/registry/default/example/AutoFormInputWithoutLabel.vue (82%)
 rename apps/www/{ => src}/registry/default/example/AutoFormSubObject.vue (86%)
 rename apps/www/{ => src}/registry/default/example/AvatarDemo.vue (68%)
 rename apps/www/{ => src}/registry/default/example/BadgeDemo.vue (59%)
 rename apps/www/{ => src}/registry/default/example/BadgeDestructiveDemo.vue (67%)
 rename apps/www/{ => src}/registry/default/example/BadgeOutlineDemo.vue (66%)
 rename apps/www/{ => src}/registry/default/example/BadgeSecondaryDemo.vue (67%)
 rename apps/www/{ => src}/registry/default/example/BarChartCustomTooltip.vue (95%)
 rename apps/www/{ => src}/registry/default/example/BarChartDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/BarChartRounded.vue (94%)
 rename apps/www/{ => src}/registry/default/example/BarChartStacked.vue (94%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbDemo.vue (93%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbDropdown.vue (93%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbEllipsisDemo.vue (95%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbLinkDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbResponsive.vue (94%)
 rename apps/www/{ => src}/registry/default/example/BreadcrumbSeparatorDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/ButtonAsChildDemo.vue (69%)
 rename apps/www/{ => src}/registry/default/example/ButtonDemo.vue (59%)
 rename apps/www/{ => src}/registry/default/example/ButtonDestructiveDemo.vue (67%)
 rename apps/www/{ => src}/registry/default/example/ButtonGhostDemo.vue (65%)
 rename apps/www/{ => src}/registry/default/example/ButtonIconDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/ButtonLinkDemo.vue (64%)
 rename apps/www/{ => src}/registry/default/example/ButtonLoadingDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/ButtonOutlineDemo.vue (65%)
 rename apps/www/{ => src}/registry/default/example/ButtonSecondaryDemo.vue (66%)
 rename apps/www/{ => src}/registry/default/example/ButtonWithIconDemo.vue (74%)
 rename apps/www/{ => src}/registry/default/example/CalendarDemo.vue (83%)
 rename apps/www/{ => src}/registry/default/example/CalendarForm.vue (90%)
 rename apps/www/{ => src}/registry/default/example/CalendarWithSelect.vue (97%)
 rename apps/www/{ => src}/registry/default/example/CardChat.vue (93%)
 rename apps/www/{ => src}/registry/default/example/CardDemo.vue (92%)
 rename apps/www/{ => src}/registry/default/example/CardFormDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/CardStats.vue (95%)
 rename apps/www/{ => src}/registry/default/example/CardWithForm.vue (86%)
 rename apps/www/{ => src}/registry/default/example/Cards/ActivityGoal.vue (95%)
 rename apps/www/{ => src}/registry/default/example/Cards/DataTable.vue (96%)
 rename apps/www/{ => src}/registry/default/example/Cards/Metric.vue (98%)
 rename apps/www/{ => src}/registry/default/example/CarouselApi.vue (86%)
 rename apps/www/{ => src}/registry/default/example/CarouselDemo.vue (83%)
 rename apps/www/{ => src}/registry/default/example/CarouselOrientation.vue (85%)
 rename apps/www/{ => src}/registry/default/example/CarouselPlugin.vue (87%)
 rename apps/www/{ => src}/registry/default/example/CarouselSize.vue (84%)
 rename apps/www/{ => src}/registry/default/example/CarouselSpacing.vue (84%)
 rename apps/www/{ => src}/registry/default/example/CarouselThumbnails.vue (93%)
 rename apps/www/{ => src}/registry/default/example/CheckboxDemo.vue (84%)
 rename apps/www/{ => src}/registry/default/example/CheckboxDisabled.vue (84%)
 rename apps/www/{ => src}/registry/default/example/CheckboxFormMultiple.vue (91%)
 rename apps/www/{ => src}/registry/default/example/CheckboxFormSingle.vue (87%)
 rename apps/www/{ => src}/registry/default/example/CheckboxWithText.vue (89%)
 rename apps/www/{ => src}/registry/default/example/CollapsibleDemo.vue (91%)
 rename apps/www/{ => src}/registry/default/example/ComboboxDemo.vue (93%)
 rename apps/www/{ => src}/registry/default/example/ComboboxDropdownMenu.vue (95%)
 rename apps/www/{ => src}/registry/default/example/ComboboxForm.vue (93%)
 rename apps/www/{ => src}/registry/default/example/ComboboxPopover.vue (94%)
 rename apps/www/{ => src}/registry/default/example/ComboboxResponsive.vue (88%)
 rename apps/www/{ => src}/registry/default/example/CommandDemo.vue (97%)
 rename apps/www/{ => src}/registry/default/example/CommandDialogDemo.vue (97%)
 rename apps/www/{ => src}/registry/default/example/ContextMenuDemo.vue (97%)
 rename apps/www/{ => src}/registry/default/example/CustomChartTooltip.vue (90%)
 rename apps/www/{ => src}/registry/default/example/DataTableColumnPinningDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/DataTableDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/DataTableDemoColumn.vue (91%)
 rename apps/www/{ => src}/registry/default/example/DataTableReactiveDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/DatePickerDemo.vue (80%)
 rename apps/www/{ => src}/registry/default/example/DatePickerForm.vue (90%)
 rename apps/www/{ => src}/registry/default/example/DatePickerWithIndependentMonths.vue (98%)
 rename apps/www/{ => src}/registry/default/example/DatePickerWithPresets.vue (85%)
 rename apps/www/{ => src}/registry/default/example/DatePickerWithRange.vue (86%)
 rename apps/www/{ => src}/registry/default/example/DialogCustomCloseButton.vue (86%)
 rename apps/www/{ => src}/registry/default/example/DialogDemo.vue (85%)
 rename apps/www/{ => src}/registry/default/example/DialogForm.vue (88%)
 rename apps/www/{ => src}/registry/default/example/DialogScrollBodyDemo.vue (93%)
 rename apps/www/{ => src}/registry/default/example/DialogScrollOverlayDemo.vue (92%)
 rename apps/www/{ => src}/registry/default/example/DonutChartColor.vue (94%)
 rename apps/www/{ => src}/registry/default/example/DonutChartCustomTooltip.vue (93%)
 rename apps/www/{ => src}/registry/default/example/DonutChartDemo.vue (92%)
 rename apps/www/{ => src}/registry/default/example/DonutChartPie.vue (92%)
 rename apps/www/{ => src}/registry/default/example/DrawerDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/DrawerDialog.vue (89%)
 rename apps/www/{ => src}/registry/default/example/DropdownMenuCheckboxes.vue (91%)
 rename apps/www/{ => src}/registry/default/example/DropdownMenuDemo.vue (97%)
 rename apps/www/{ => src}/registry/default/example/DropdownMenuRadioGroup.vue (90%)
 rename apps/www/{ => src}/registry/default/example/HoverCardDemo.vue (88%)
 rename apps/www/{ => src}/registry/default/example/InputDemo.vue (65%)
 rename apps/www/{ => src}/registry/default/example/InputDisabled.vue (66%)
 rename apps/www/{ => src}/registry/default/example/InputFile.vue (64%)
 rename apps/www/{ => src}/registry/default/example/InputForm.vue (85%)
 rename apps/www/{ => src}/registry/default/example/InputFormAutoAnimate.vue (86%)
 rename apps/www/{ => src}/registry/default/example/InputWithButton.vue (67%)
 rename apps/www/{ => src}/registry/default/example/InputWithIcon.vue (87%)
 rename apps/www/{ => src}/registry/default/example/InputWithLabel.vue (66%)
 rename apps/www/{ => src}/registry/default/example/LabelDemo.vue (65%)
 rename apps/www/{ => src}/registry/default/example/LineChartCustomTooltip.vue (98%)
 rename apps/www/{ => src}/registry/default/example/LineChartDemo.vue (98%)
 rename apps/www/{ => src}/registry/default/example/LineChartSparkline.vue (98%)
 rename apps/www/{ => src}/registry/default/example/MenubarDemo.vue (98%)
 rename apps/www/{ => src}/registry/default/example/NavigationMenuDemo.vue (99%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldCurrency.vue (84%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldDecimal.vue (83%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldDemo.vue (80%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldDisabled.vue (80%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldForm.vue (91%)
 rename apps/www/{ => src}/registry/default/example/NumberFieldPercentage.vue (82%)
 rename apps/www/{ => src}/registry/default/example/PaginationDemo.vue (91%)
 rename apps/www/{ => src}/registry/default/example/PinInputControlled.vue (92%)
 rename apps/www/{ => src}/registry/default/example/PinInputDemo.vue (92%)
 rename apps/www/{ => src}/registry/default/example/PinInputDisabled.vue (91%)
 rename apps/www/{ => src}/registry/default/example/PinInputFormDemo.vue (91%)
 rename apps/www/{ => src}/registry/default/example/PinInputSeparatorDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/PopoverDemo.vue (89%)
 rename apps/www/{ => src}/registry/default/example/ProgressDemo.vue (83%)
 rename apps/www/{ => src}/registry/default/example/RadioGroupDemo.vue (80%)
 rename apps/www/{ => src}/registry/default/example/RadioGroupForm.vue (90%)
 rename apps/www/{ => src}/registry/default/example/RangeCalendarDemo.vue (84%)
 rename apps/www/{ => src}/registry/default/example/ResizableDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/ResizableHandleDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/ResizableVerticalDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/ScrollAreaDemo.vue (78%)
 rename apps/www/{ => src}/registry/default/example/ScrollAreaHorizontalDemo.vue (94%)
 rename apps/www/{ => src}/registry/default/example/SelectDemo.vue (95%)
 rename apps/www/{ => src}/registry/default/example/SelectForm.vue (91%)
 rename apps/www/{ => src}/registry/default/example/SelectScrollable.vue (98%)
 rename apps/www/{ => src}/registry/default/example/SeparatorDemo.vue (89%)
 rename apps/www/{ => src}/registry/default/example/SheetDemo.vue (85%)
 rename apps/www/{ => src}/registry/default/example/SheetSideDemo.vue (87%)
 rename apps/www/{ => src}/registry/default/example/SkeletonCard.vue (82%)
 rename apps/www/{ => src}/registry/default/example/SkeletonDemo.vue (81%)
 rename apps/www/{ => src}/registry/default/example/SliderDemo.vue (81%)
 rename apps/www/{ => src}/registry/default/example/SliderForm.vue (87%)
 create mode 100644 apps/www/src/registry/default/example/SonnerDemo.vue
 rename apps/www/{ => src}/registry/default/example/SonnerWithDialog.vue (92%)
 rename apps/www/{ => src}/registry/default/example/StepperDemo.vue (93%)
 rename apps/www/{ => src}/registry/default/example/StepperForm.vue (95%)
 rename apps/www/{ => src}/registry/default/example/StepperHorizental.vue (93%)
 rename apps/www/{ => src}/registry/default/example/StepperVertical.vue (94%)
 rename apps/www/{ => src}/registry/default/example/SwitchDemo.vue (63%)
 rename apps/www/{ => src}/registry/default/example/SwitchForm.vue (92%)
 rename apps/www/{ => src}/registry/default/example/TableDemo.vue (97%)
 rename apps/www/{ => src}/registry/default/example/TabsDemo.vue (88%)
 rename apps/www/{ => src}/registry/default/example/TabsVerticalDemo.vue (88%)
 rename apps/www/{ => src}/registry/default/example/TagsInputComboboxDemo.vue (96%)
 rename apps/www/{ => src}/registry/default/example/TagsInputDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/TagsInputFormDemo.vue (87%)
 rename apps/www/{ => src}/registry/default/example/TextareaDemo.vue (64%)
 rename apps/www/{ => src}/registry/default/example/TextareaDisabled.vue (66%)
 rename apps/www/{ => src}/registry/default/example/TextareaForm.vue (87%)
 rename apps/www/{ => src}/registry/default/example/TextareaWithButton.vue (61%)
 rename apps/www/{ => src}/registry/default/example/TextareaWithLabel.vue (64%)
 rename apps/www/{ => src}/registry/default/example/TextareaWithText.vue (73%)
 rename apps/www/{ => src}/registry/default/example/ToastDemo.vue (70%)
 rename apps/www/{ => src}/registry/default/example/ToastDestructive.vue (72%)
 rename apps/www/{ => src}/registry/default/example/ToastSimple.vue (66%)
 rename apps/www/{ => src}/registry/default/example/ToastWithAction.vue (70%)
 rename apps/www/{ => src}/registry/default/example/ToastWithTitle.vue (70%)
 rename apps/www/{ => src}/registry/default/example/ToggleDemo.vue (75%)
 rename apps/www/{ => src}/registry/default/example/ToggleDisabledDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupDisabledDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupLargeDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupOutlineDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupSingleDemo.vue (85%)
 rename apps/www/{ => src}/registry/default/example/ToggleGroupSmallDemo.vue (86%)
 rename apps/www/{ => src}/registry/default/example/ToggleItalicDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/ToggleItalicWithTextDemo.vue (77%)
 rename apps/www/{ => src}/registry/default/example/ToggleLargeDemo.vue (76%)
 rename apps/www/{ => src}/registry/default/example/ToggleSmallDemo.vue (76%)
 rename apps/www/{ => src}/registry/default/example/TooltipDemo.vue (80%)
 rename apps/www/{ => src}/registry/default/example/TypographyBlockquote.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyDemo.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyH1.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyH2.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyH3.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyH4.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyInlineCode.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyLarge.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyLead.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyList.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyMuted.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyP.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographySmall.vue (100%)
 rename apps/www/{ => src}/registry/default/example/TypographyTable.vue (100%)
 rename apps/www/{ => src}/registry/default/example/VCalendarDemo.vue (72%)
 rename apps/www/{ => src}/registry/default/example/VDatePickerDemo.vue (82%)
 rename apps/www/{ => src}/registry/default/example/VDatePickerForm.vue (88%)
 rename apps/www/{ => src}/registry/default/example/VDatePickerWithPresets.vue (89%)
 rename apps/www/{ => src}/registry/default/example/VDatePickerWithRange.vue (88%)
 rename apps/www/{ => src}/registry/default/example/VDateTimePickerDemo.vue (83%)
 rename apps/www/{ => src}/registry/default/example/VRangePickerWithSlot.vue (91%)
 rename apps/www/{registry/new-york => src/registry/default}/lib/utils.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/accordion/Accordion.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/accordion/AccordionContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/accordion/AccordionItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/accordion/AccordionTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/accordion/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialog.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogAction.vue (89%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogCancel.vue (90%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/AlertDialogTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert-dialog/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/alert/Alert.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert/AlertDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert/AlertTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/alert/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/aspect-ratio/AspectRatio.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/aspect-ratio/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoForm.vue (98%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormField.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldArray.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldBoolean.vue (88%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldDate.vue (87%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldEnum.vue (88%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldFile.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldInput.vue (87%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldNumber.vue (89%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormFieldObject.vue (96%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/AutoFormLabel.vue (77%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/constant.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/dependencies.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/interface.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/auto-form/utils.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/avatar/Avatar.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/avatar/AvatarFallback.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/avatar/AvatarImage.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/avatar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/badge/Badge.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/badge/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/Breadcrumb.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbLink.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbList.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbPage.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/breadcrumb/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/button/Button.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/button/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/Calendar.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarCell.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarCellTrigger.vue (95%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarGrid.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarGridBody.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarGridHead.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarGridRow.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarHeadCell.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarHeading.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarNextButton.vue (92%)
 rename apps/www/{ => src}/registry/default/ui/calendar/CalendarPrevButton.vue (92%)
 rename apps/www/{ => src}/registry/default/ui/calendar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/card/Card.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/CardContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/CardDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/CardFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/CardHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/CardTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/card/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/Carousel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/CarouselContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/CarouselItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/CarouselNext.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/carousel/CarouselPrevious.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/carousel/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/interface.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/carousel/useCarousel.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart-area/AreaChart.vue (97%)
 rename apps/www/{ => src}/registry/default/ui/chart-area/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart-bar/BarChart.vue (97%)
 rename apps/www/{ => src}/registry/default/ui/chart-bar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart-donut/DonutChart.vue (97%)
 rename apps/www/{ => src}/registry/default/ui/chart-donut/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart-line/LineChart.vue (97%)
 rename apps/www/{ => src}/registry/default/ui/chart-line/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart/ChartCrosshair.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/chart/ChartLegend.vue (95%)
 rename apps/www/{ => src}/registry/default/ui/chart/ChartSingleTooltip.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/chart/ChartTooltip.vue (91%)
 rename apps/www/{ => src}/registry/default/ui/chart/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/chart/interface.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/checkbox/Checkbox.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/checkbox/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/collapsible/Collapsible.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/collapsible/CollapsibleContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/collapsible/CollapsibleTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/collapsible/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/command/Command.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandDialog.vue (92%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandEmpty.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandList.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/CommandShortcut.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/command/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenu.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuLabel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuPortal.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuShortcut.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuSubContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/ContextMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/context-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/Dialog.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogClose.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogScrollContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/DialogTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dialog/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/Drawer.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerOverlay.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/DrawerTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/drawer/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenu.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/dropdown-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/form/FormControl.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/form/FormDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/form/FormItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/form/FormLabel.vue (89%)
 rename apps/www/{ => src}/registry/default/ui/form/FormMessage.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/form/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/form/injectionKeys.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/form/useFormField.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/hover-card/HoverCard.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/hover-card/HoverCardContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/hover-card/HoverCardTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/hover-card/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/input/Input.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/input/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/label/Label.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/label/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/Menubar.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarLabel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarMenu.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarShortcut.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarSub.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarSubContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/MenubarTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/menubar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenu.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuLink.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuList.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/NavigationMenuViewport.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/navigation-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/NumberField.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/NumberFieldContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/NumberFieldDecrement.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/NumberFieldIncrement.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/NumberFieldInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/number-field/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/pagination/PaginationEllipsis.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/pagination/PaginationFirst.vue (94%)
 rename apps/www/{ => src}/registry/default/ui/pagination/PaginationLast.vue (94%)
 rename apps/www/{ => src}/registry/default/ui/pagination/PaginationNext.vue (94%)
 rename apps/www/{ => src}/registry/default/ui/pagination/PaginationPrev.vue (94%)
 rename apps/www/{ => src}/registry/default/ui/pagination/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/pin-input/PinInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/pin-input/PinInputGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/pin-input/PinInputInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/pin-input/PinInputSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/pin-input/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/popover/Popover.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/popover/PopoverContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/popover/PopoverTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/popover/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/progress/Progress.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/progress/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/radio-group/RadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/radio-group/RadioGroupItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/radio-group/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendar.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarCell.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue (96%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarGrid.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarGridBody.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarGridHead.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarGridRow.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarHeading.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarNextButton.vue (92%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue (92%)
 rename apps/www/{ => src}/registry/default/ui/range-calendar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/resizable/ResizableHandle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/resizable/ResizablePanelGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/resizable/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/scroll-area/ScrollArea.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/scroll-area/ScrollBar.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/scroll-area/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/select/Select.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectItemText.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectLabel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectScrollDownButton.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectScrollUpButton.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/SelectValue.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/select/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/separator/Separator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/separator/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/Sheet.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetClose.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/SheetTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sheet/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/Sidebar.vue (95%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarGroup.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarGroupAction.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarGroupContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarGroupLabel.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarInput.vue (86%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarInset.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenu.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuAction.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuBadge.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuButton.vue (83%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuButtonChild.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuSkeleton.vue (91%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuSubButton.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarMenuSubItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarProvider.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarRail.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarSeparator.vue (82%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/SidebarTrigger.vue (89%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/sidebar/utils.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/skeleton/Skeleton.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/skeleton/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/slider/Slider.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/slider/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/sonner/Sonner.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/sonner/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/Stepper.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperIndicator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperSeparator.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/StepperTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/stepper/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/switch/Switch.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/switch/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/table/Table.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableBody.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableCaption.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableCell.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableEmpty.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableFooter.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableHead.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableHeader.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/TableRow.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/table/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/tabs/Tabs.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tabs/TabsContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tabs/TabsList.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tabs/TabsTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tabs/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/TagsInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/TagsInputInput.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/TagsInputItem.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/TagsInputItemDelete.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/TagsInputItemText.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tags-input/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/textarea/Textarea.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/textarea/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/Toast.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastAction.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastClose.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastDescription.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastProvider.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastTitle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/ToastViewport.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/Toaster.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/toast/use-toast.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/toggle-group/ToggleGroup.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/toggle-group/ToggleGroupItem.vue (93%)
 rename apps/www/{ => src}/registry/default/ui/toggle-group/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/toggle/Toggle.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/toggle/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/tooltip/Tooltip.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tooltip/TooltipContent.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tooltip/TooltipProvider.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tooltip/TooltipTrigger.vue (100%)
 rename apps/www/{ => src}/registry/default/ui/tooltip/index.ts (100%)
 rename apps/www/{ => src}/registry/default/ui/v-calendar/Calendar.vue (99%)
 rename apps/www/{ => src}/registry/default/ui/v-calendar/index.ts (100%)
 create mode 100644 apps/www/src/registry/index.ts
 rename apps/www/{ => src}/registry/new-york/block/Authentication01.vue (82%)
 rename apps/www/{ => src}/registry/new-york/block/Authentication02.vue (88%)
 rename apps/www/{ => src}/registry/new-york/block/Authentication03.vue (89%)
 rename apps/www/{ => src}/registry/new-york/block/Authentication04.vue (92%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard01.vue (97%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard02.vue (96%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard03.vue (97%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard04.vue (95%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard05.vue (97%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard06.vue (97%)
 rename apps/www/{ => src}/registry/new-york/block/Dashboard07.vue (97%)
 rename apps/www/{ => src}/registry/new-york/block/Sidebar01.vue (96%)
 rename apps/www/{ => src}/registry/new-york/block/Sidebar07.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/AccordionDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/AlertDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/AlertDestructiveDemo.vue (79%)
 rename apps/www/{ => src}/registry/new-york/example/AlertDialogDemo.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/AreaChartCustomTooltip.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/AreaChartDemo.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/AreaChartSparkline.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/AspectRatioDemo.vue (81%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormApi.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormArray.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormBasic.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormConfirmPassword.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormControlled.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormDependencies.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormInputWithoutLabel.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/AutoFormSubObject.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/AvatarDemo.vue (68%)
 rename apps/www/{ => src}/registry/new-york/example/BadgeDemo.vue (58%)
 rename apps/www/{ => src}/registry/new-york/example/BadgeDestructiveDemo.vue (67%)
 rename apps/www/{ => src}/registry/new-york/example/BadgeOutlineDemo.vue (65%)
 rename apps/www/{ => src}/registry/new-york/example/BadgeSecondaryDemo.vue (66%)
 rename apps/www/{ => src}/registry/new-york/example/BarChartCustomTooltip.vue (95%)
 rename apps/www/{ => src}/registry/new-york/example/BarChartDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/BarChartRounded.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/BarChartStacked.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbDemo.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbDropdown.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbEllipsisDemo.vue (95%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbLinkDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbResponsive.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/BreadcrumbSeparatorDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonAsChildDemo.vue (69%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonDemo.vue (59%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonDestructiveDemo.vue (67%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonGhostDemo.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonIconDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonLinkDemo.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonLoadingDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonOutlineDemo.vue (65%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonSecondaryDemo.vue (66%)
 rename apps/www/{ => src}/registry/new-york/example/ButtonWithIconDemo.vue (76%)
 rename apps/www/{ => src}/registry/new-york/example/CalendarDemo.vue (83%)
 rename apps/www/{ => src}/registry/new-york/example/CalendarForm.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/CalendarWithSelect.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/CardChat.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/CardDemo.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/CardFormDemo.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/CardStats.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/CardWithForm.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/Cards/ActivityGoal.vue (95%)
 rename apps/www/{ => src}/registry/new-york/example/Cards/DataTable.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/Cards/Metric.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselApi.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselDemo.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselOrientation.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselPlugin.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselSize.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselSpacing.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/CarouselThumbnails.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/CheckboxDemo.vue (83%)
 rename apps/www/{ => src}/registry/new-york/example/CheckboxDisabled.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/CheckboxFormMultiple.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/CheckboxFormSingle.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/CheckboxWithText.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/CollapsibleDemo.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/ComboboxDemo.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/ComboboxDropdownMenu.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/ComboboxForm.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/ComboboxPopover.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/ComboboxResponsive.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/CommandDemo.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/CommandDialogDemo.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/ContextMenuDemo.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/CustomChartTooltip.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/DataTableColumnPinningDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/DataTableDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/DataTableDemoColumn.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/DataTableReactiveDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/DatePickerDemo.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/DatePickerForm.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/DatePickerWithIndependentMonths.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/DatePickerWithPresets.vue (85%)
 rename apps/www/{ => src}/registry/new-york/example/DatePickerWithRange.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/DialogCustomCloseButton.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/DialogDemo.vue (85%)
 rename apps/www/{ => src}/registry/new-york/example/DialogForm.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/DialogScrollBodyDemo.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/DialogScrollOverlayDemo.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/DonutChartColor.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/DonutChartCustomTooltip.vue (93%)
 create mode 100644 apps/www/src/registry/new-york/example/DonutChartDemo.vue
 rename apps/www/{ => src}/registry/new-york/example/DonutChartPie.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/DrawerDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/DrawerDialog.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/DropdownMenuCheckboxes.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/DropdownMenuDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/DropdownMenuRadioGroup.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/HoverCardDemo.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/InputDemo.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/InputDisabled.vue (66%)
 rename apps/www/{ => src}/registry/new-york/example/InputFile.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/InputForm.vue (85%)
 rename apps/www/{ => src}/registry/new-york/example/InputFormAutoAnimate.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/InputWithButton.vue (67%)
 rename apps/www/{ => src}/registry/new-york/example/InputWithIcon.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/InputWithLabel.vue (65%)
 rename apps/www/{ => src}/registry/new-york/example/LabelDemo.vue (65%)
 rename apps/www/{ => src}/registry/new-york/example/LineChartCustomTooltip.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/LineChartDemo.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/LineChartSparkline.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/MenubarDemo.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/NavigationMenuDemo.vue (99%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldCurrency.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldDecimal.vue (83%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldDemo.vue (79%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldDisabled.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldForm.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/NumberFieldPercentage.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/PaginationDemo.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/PinInputControlled.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/PinInputDemo.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/PinInputDisabled.vue (91%)
 rename apps/www/{ => src}/registry/new-york/example/PinInputFormDemo.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/PinInputSeparatorDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/PopoverDemo.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/ProgressDemo.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/RadioGroupDemo.vue (80%)
 rename apps/www/{ => src}/registry/new-york/example/RadioGroupForm.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/RangeCalendarDemo.vue (84%)
 rename apps/www/{ => src}/registry/new-york/example/ResizableDemo.vue (96%)
 rename apps/www/{ => src}/registry/new-york/example/ResizableHandleDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/ResizableVerticalDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/ScrollAreaDemo.vue (78%)
 rename apps/www/{ => src}/registry/new-york/example/ScrollAreaHorizontalDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/SelectDemo.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/SelectForm.vue (90%)
 rename apps/www/{ => src}/registry/new-york/example/SelectScrollable.vue (98%)
 rename apps/www/{ => src}/registry/new-york/example/SeparatorDemo.vue (89%)
 rename apps/www/{ => src}/registry/new-york/example/SheetDemo.vue (85%)
 rename apps/www/{ => src}/registry/new-york/example/SheetSideDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/SkeletonCard.vue (81%)
 rename apps/www/{ => src}/registry/new-york/example/SkeletonDemo.vue (81%)
 rename apps/www/{ => src}/registry/new-york/example/SliderDemo.vue (81%)
 rename apps/www/{ => src}/registry/new-york/example/SliderForm.vue (87%)
 rename apps/www/{registry/default => src/registry/new-york}/example/SonnerDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/SonnerWithDialog.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/StepperDemo.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/StepperForm.vue (95%)
 rename apps/www/{ => src}/registry/new-york/example/StepperHorizental.vue (93%)
 rename apps/www/{ => src}/registry/new-york/example/StepperVertical.vue (94%)
 rename apps/www/{ => src}/registry/new-york/example/SwitchDemo.vue (63%)
 rename apps/www/{ => src}/registry/new-york/example/SwitchForm.vue (92%)
 rename apps/www/{ => src}/registry/new-york/example/TableDemo.vue (97%)
 rename apps/www/{ => src}/registry/new-york/example/TabsDemo.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/TabsVerticalDemo.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/TagsInputComboboxDemo.vue (95%)
 rename apps/www/{ => src}/registry/new-york/example/TagsInputDemo.vue (85%)
 rename apps/www/{ => src}/registry/new-york/example/TagsInputFormDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaDemo.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaDisabled.vue (65%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaForm.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaWithButton.vue (61%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaWithLabel.vue (64%)
 rename apps/www/{ => src}/registry/new-york/example/TextareaWithText.vue (73%)
 rename apps/www/{ => src}/registry/new-york/example/ToastDemo.vue (70%)
 rename apps/www/{ => src}/registry/new-york/example/ToastDestructive.vue (71%)
 rename apps/www/{ => src}/registry/new-york/example/ToastSimple.vue (66%)
 rename apps/www/{ => src}/registry/new-york/example/ToastWithAction.vue (70%)
 rename apps/www/{ => src}/registry/new-york/example/ToastWithTitle.vue (70%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleDemo.vue (76%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleDisabledDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupDemo.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupDisabledDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupLargeDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupOutlineDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupSingleDemo.vue (86%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleGroupSmallDemo.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleItalicDemo.vue (78%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleItalicWithTextDemo.vue (78%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleLargeDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/ToggleSmallDemo.vue (77%)
 rename apps/www/{ => src}/registry/new-york/example/TooltipDemo.vue (79%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyBlockquote.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyDemo.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyH1.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyH2.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyH3.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyH4.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyInlineCode.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyLarge.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyLead.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyList.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyMuted.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyP.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographySmall.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/TypographyTable.vue (100%)
 rename apps/www/{ => src}/registry/new-york/example/VCalendarDemo.vue (72%)
 rename apps/www/{ => src}/registry/new-york/example/VDatePickerDemo.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/VDatePickerForm.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/VDatePickerWithPresets.vue (88%)
 rename apps/www/{ => src}/registry/new-york/example/VDatePickerWithRange.vue (87%)
 rename apps/www/{ => src}/registry/new-york/example/VDateTimePickerDemo.vue (82%)
 rename apps/www/{ => src}/registry/new-york/example/VRangePickerWithSlot.vue (91%)
 create mode 100644 apps/www/src/registry/new-york/lib/utils.ts
 rename apps/www/{ => src}/registry/new-york/ui/accordion/Accordion.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/accordion/AccordionContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/accordion/AccordionItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/accordion/AccordionTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/accordion/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialog.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogAction.vue (88%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue (90%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert-dialog/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert/Alert.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert/AlertDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert/AlertTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/alert/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/aspect-ratio/AspectRatio.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/aspect-ratio/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoForm.vue (98%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormField.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldArray.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue (88%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldDate.vue (87%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue (88%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldFile.vue (93%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldInput.vue (86%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue (89%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormFieldObject.vue (95%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/AutoFormLabel.vue (77%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/constant.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/dependencies.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/interface.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/auto-form/utils.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/avatar/Avatar.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/avatar/AvatarFallback.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/avatar/AvatarImage.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/avatar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/badge/Badge.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/badge/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/Breadcrumb.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbList.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/breadcrumb/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/button/Button.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/button/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/Calendar.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarCell.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarCellTrigger.vue (95%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarGrid.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarGridBody.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarGridHead.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarGridRow.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarHeadCell.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarHeading.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarNextButton.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/CalendarPrevButton.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/calendar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/Card.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/CardContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/CardDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/CardFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/CardHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/CardTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/card/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/Carousel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/CarouselContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/CarouselItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/CarouselNext.vue (93%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/CarouselPrevious.vue (93%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/interface.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/carousel/useCarousel.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-area/AreaChart.vue (97%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-area/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-bar/BarChart.vue (97%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-bar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-donut/DonutChart.vue (97%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-donut/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-line/LineChart.vue (97%)
 rename apps/www/{ => src}/registry/new-york/ui/chart-line/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/ChartCrosshair.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/ChartLegend.vue (95%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/ChartSingleTooltip.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/ChartTooltip.vue (91%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/chart/interface.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/checkbox/Checkbox.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/checkbox/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/collapsible/Collapsible.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/collapsible/CollapsibleContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/collapsible/CollapsibleTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/collapsible/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/Command.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandDialog.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandEmpty.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandList.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/CommandShortcut.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/command/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenu.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuLabel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuPortal.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuShortcut.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuSubContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/ContextMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/context-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/Dialog.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogClose.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogScrollContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/DialogTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dialog/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/Drawer.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerOverlay.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/DrawerTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/drawer/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenu.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/dropdown-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/FormControl.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/FormDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/FormItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/FormLabel.vue (89%)
 rename apps/www/{ => src}/registry/new-york/ui/form/FormMessage.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/injectionKeys.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/form/useFormField.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/hover-card/HoverCard.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/hover-card/HoverCardContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/hover-card/HoverCardTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/hover-card/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/input/Input.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/input/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/label/Label.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/label/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/Menubar.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarCheckboxItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarLabel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarMenu.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarRadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarRadioItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarShortcut.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarSub.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarSubContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarSubTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/MenubarTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/menubar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenu.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuList.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/navigation-menu/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/NumberField.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/NumberFieldContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/NumberFieldDecrement.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/NumberFieldIncrement.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/NumberFieldInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/number-field/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/PaginationEllipsis.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/PaginationFirst.vue (94%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/PaginationLast.vue (94%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/PaginationNext.vue (94%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/PaginationPrev.vue (94%)
 rename apps/www/{ => src}/registry/new-york/ui/pagination/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pin-input/PinInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pin-input/PinInputGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pin-input/PinInputInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pin-input/PinInputSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/pin-input/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/popover/Popover.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/popover/PopoverContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/popover/PopoverTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/popover/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/progress/Progress.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/progress/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/radio-group/RadioGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/radio-group/RadioGroupItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/radio-group/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendar.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarCell.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue (96%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue (92%)
 rename apps/www/{ => src}/registry/new-york/ui/range-calendar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/resizable/ResizableHandle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/resizable/ResizablePanelGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/resizable/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/scroll-area/ScrollArea.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/scroll-area/ScrollBar.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/scroll-area/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/Select.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectItemText.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectLabel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectScrollDownButton.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectScrollUpButton.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/SelectValue.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/select/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/separator/Separator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/separator/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/Sheet.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetClose.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/SheetTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sheet/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/Sidebar.vue (95%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarGroup.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarGroupAction.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarGroupContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarGroupLabel.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarInput.vue (86%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarInset.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenu.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuAction.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuBadge.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuButton.vue (83%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue (90%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuSub.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarProvider.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarRail.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarSeparator.vue (81%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/SidebarTrigger.vue (89%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sidebar/utils.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/skeleton/Skeleton.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/skeleton/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/slider/Slider.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/slider/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sonner/Sonner.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/sonner/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/Stepper.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperIndicator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperSeparator.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/StepperTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/stepper/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/switch/Switch.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/switch/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/Table.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableBody.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableCaption.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableCell.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableEmpty.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableFooter.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableHead.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableHeader.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/TableRow.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/table/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tabs/Tabs.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tabs/TabsContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tabs/TabsList.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tabs/TabsTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tabs/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/TagsInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/TagsInputInput.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/TagsInputItem.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/TagsInputItemDelete.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/TagsInputItemText.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tags-input/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/textarea/Textarea.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/textarea/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/Toast.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastAction.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastClose.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastDescription.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastProvider.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastTitle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/ToastViewport.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/Toaster.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toast/use-toast.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toggle-group/ToggleGroup.vue (93%)
 rename apps/www/{ => src}/registry/new-york/ui/toggle-group/ToggleGroupItem.vue (93%)
 rename apps/www/{ => src}/registry/new-york/ui/toggle-group/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toggle/Toggle.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/toggle/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tooltip/Tooltip.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tooltip/TooltipContent.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tooltip/TooltipProvider.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tooltip/TooltipTrigger.vue (100%)
 rename apps/www/{ => src}/registry/new-york/ui/tooltip/index.ts (100%)
 rename apps/www/{ => src}/registry/new-york/ui/v-calendar/Calendar.vue (99%)
 rename apps/www/{ => src}/registry/new-york/ui/v-calendar/index.ts (100%)
 rename apps/www/{ => src}/registry/registry-base-colors.ts (100%)
 rename apps/www/{ => src}/registry/registry-colors.ts (100%)
 rename apps/www/{ => src}/registry/registry-icons.ts (100%)
 rename apps/www/{ => src}/registry/registry-lib.ts (81%)
 rename apps/www/{ => src}/registry/registry-styles.ts (100%)
 rename apps/www/{ => src}/registry/registry-themes.ts (100%)
 rename apps/www/{ => src}/registry/schema.ts (100%)

diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 250a77bfe..586e133ec 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -9,12 +9,12 @@ import BlockCopyButton from './BlockCopyButton.vue'
 import StyleSwitcher from './StyleSwitcher.vue'
 
 // import { V0Button } from '@/components/v0-button'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { Badge } from '@/registry/new-york/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
+import { Separator } from '@/registry/new-york/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import BlockPreview from './BlockPreview.vue'
 
 const props = defineProps<{
@@ -50,7 +50,7 @@ function removeScript(code: string) {
 
 function transformImportPath(code: string) {
   const s = new MagicString(code)
-  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
+  s.replaceAll(`@/registry/${style.value}`, codeConfig.value.componentsPath)
   s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
   return s.toString()
 }
diff --git a/apps/www/.vitepress/theme/components/BlockCopyButton.vue b/apps/www/.vitepress/theme/components/BlockCopyButton.vue
index ff344b38c..4f770e66f 100644
--- a/apps/www/.vitepress/theme/components/BlockCopyButton.vue
+++ b/apps/www/.vitepress/theme/components/BlockCopyButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
+} from '@/registry/new-york/ui/tooltip'
 import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
 import { useClipboard } from '@vueuse/core'
 import { toRefs } from 'vue'
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 33490a8a1..e71cd2c10 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import GitHubIcon from '~icons/radix-icons/github-logo'
 import { ref } from 'vue'
 import Announcement from '../components/Announcement.vue'
diff --git a/apps/www/.vitepress/theme/components/Callout.vue b/apps/www/.vitepress/theme/components/Callout.vue
index d0381be01..53f789eb9 100644
--- a/apps/www/.vitepress/theme/components/Callout.vue
+++ b/apps/www/.vitepress/theme/components/Callout.vue
@@ -3,7 +3,7 @@ import {
   Alert,
   AlertDescription,
   AlertTitle,
-} from '@/lib/registry/default/ui/alert'
+} from '@/registry/default/ui/alert'
 
 interface CalloutProps {
   icon?: string
diff --git a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
index f00ff6bc9..ebc312d62 100644
--- a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import { Button } from '@/registry/new-york/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import { useConfigStore } from '@/stores/config'
 import { toTypedSchema } from '@vee-validate/zod'
 import RadixIconsGear from '~icons/radix-icons/gear'
diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue
index 04b95504b..89f20b516 100644
--- a/apps/www/.vitepress/theme/components/CodeSandbox.vue
+++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/registry/registry-styles'
+import { Button } from '@/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index dbcf8e920..febe7ad6d 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 import { cn } from '@/lib/utils'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/default/ui/tabs'
 import { useConfigStore } from '@/stores/config'
 import { useClipboard } from '@vueuse/core'
 import MagicString from 'magic-string'
@@ -28,7 +28,7 @@ const transformedRawString = computed(() => transformImportPath(rawString.value)
 
 function transformImportPath(code: string) {
   const s = new MagicString(code)
-  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
+  s.replaceAll(`@/registry/${style.value}`, codeConfig.value.componentsPath)
   s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
   return s.toString()
 }
diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index c6f935375..970ffa31e 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { themes } from '@/lib/registry'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { themes } from '@/registry'
+import { Button } from '@/registry/new-york/ui/button'
 import { useConfigStore } from '@/stores/config'
 import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
diff --git a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
index 57fb9143d..829e83b90 100644
--- a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
+++ b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
@@ -5,7 +5,7 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 import { useRoute } from 'vitepress'
 import { computed } from 'vue'
 
diff --git a/apps/www/.vitepress/theme/components/EditLink.vue b/apps/www/.vitepress/theme/components/EditLink.vue
index c6e705a3d..6e2f0d36e 100644
--- a/apps/www/.vitepress/theme/components/EditLink.vue
+++ b/apps/www/.vitepress/theme/components/EditLink.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import Pencil2Icon from '~icons/radix-icons/pencil-2'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue
index 3554f29a0..c3eb403b6 100644
--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 import { cn } from '@/lib/utils'
+import { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
 
diff --git a/apps/www/.vitepress/theme/components/InlineThemePicker.vue b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
index d610157db..0fbdc3971 100644
--- a/apps/www/.vitepress/theme/components/InlineThemePicker.vue
+++ b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
-import { colors } from '@/lib/registry'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { colors } from '@/registry'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
 import { useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 
diff --git a/apps/www/.vitepress/theme/components/LandingExample.vue b/apps/www/.vitepress/theme/components/LandingExample.vue
index f573e3795..28876729a 100644
--- a/apps/www/.vitepress/theme/components/LandingExample.vue
+++ b/apps/www/.vitepress/theme/components/LandingExample.vue
@@ -8,14 +8,14 @@ import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
 import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
 import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
 import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
-import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
-import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
-import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
+import CardChat from '@/registry/new-york/example/CardChat.vue'
+import ActivityGoal from '@/registry/new-york/example/Cards/ActivityGoal.vue'
+import DataTable from '@/registry/new-york/example/Cards/DataTable.vue'
 
-import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
-import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
-import { Card } from '@/lib/registry/new-york/ui/card'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import Metric from '@/registry/new-york/example/Cards/Metric.vue'
+import CardStats from '@/registry/new-york/example/CardStats.vue'
+import { Card } from '@/registry/new-york/ui/card'
+import { RangeCalendar } from '@/registry/new-york/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 
 import { type Ref, ref } from 'vue'
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index aca01e170..8914dfb7b 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Button from '@/lib/registry/new-york/ui/button/Button.vue'
+import Button from '@/registry/new-york/ui/button/Button.vue'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
diff --git a/apps/www/.vitepress/theme/components/ManualInstall.vue b/apps/www/.vitepress/theme/components/ManualInstall.vue
index b6c276cab..b751146b9 100644
--- a/apps/www/.vitepress/theme/components/ManualInstall.vue
+++ b/apps/www/.vitepress/theme/components/ManualInstall.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 10de01c15..4ef4a05d2 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Button } from '@/registry/default/ui/button'
+import { ScrollArea } from '@/registry/default/ui/scroll-area'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import { ref } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from './Logo.vue'
diff --git a/apps/www/.vitepress/theme/components/Stackblitz.vue b/apps/www/.vitepress/theme/components/Stackblitz.vue
index c45c85a80..cf183b556 100644
--- a/apps/www/.vitepress/theme/components/Stackblitz.vue
+++ b/apps/www/.vitepress/theme/components/Stackblitz.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/registry/registry-styles'
+import { Button } from '@/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
diff --git a/apps/www/.vitepress/theme/components/StyleSwitcher.vue b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
index ac4614f68..80d19ff00 100644
--- a/apps/www/.vitepress/theme/components/StyleSwitcher.vue
+++ b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { SelectTriggerProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-
-import { styles } from '@/lib/registry/styles'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/select'
+import { styles } from '@/registry/registry-styles'
 import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<SelectTriggerProps & { class?: string }>()
diff --git a/apps/www/.vitepress/theme/components/TabMarkdown.vue b/apps/www/.vitepress/theme/components/TabMarkdown.vue
index fcceb93f3..a7da8ae8c 100644
--- a/apps/www/.vitepress/theme/components/TabMarkdown.vue
+++ b/apps/www/.vitepress/theme/components/TabMarkdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabsContent } from '@/lib/registry/default/ui/tabs'
+import { TabsContent } from '@/registry/default/ui/tabs'
 
 withDefaults(defineProps<{
   title?: string
diff --git a/apps/www/.vitepress/theme/components/TabPreview.vue b/apps/www/.vitepress/theme/components/TabPreview.vue
index 46bb64eeb..7f3fc50fb 100644
--- a/apps/www/.vitepress/theme/components/TabPreview.vue
+++ b/apps/www/.vitepress/theme/components/TabPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/default/ui/tabs'
 
 const props = withDefaults(defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index ce277f6e3..d441caaca 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableOfContents, TableOfContentsItem } from '../types/docs'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
+import { buttonVariants } from '@/registry/default/ui/button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/registry/default/ui/collapsible'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
 import CarbonAds from '../components/CarbonAds.vue'
diff --git a/apps/www/.vitepress/theme/components/TabsMarkdown.vue b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
index ac893c0ab..fabcec43d 100644
--- a/apps/www/.vitepress/theme/components/TabsMarkdown.vue
+++ b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { Tabs, TabsList, TabsTrigger } from '@/registry/default/ui/tabs'
 import { computed, useSlots } from 'vue'
 
 const slots = useSlots()
diff --git a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
index 5a7315dea..8e8d66914 100644
--- a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
-import { colors } from '@/lib/registry'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Label } from '@/registry/new-york/ui/label'
+import { colors } from '@/registry/registry-colors'
 import { RADII, useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 import RadixIconsMoon from '~icons/radix-icons/moon'
diff --git a/apps/www/.vitepress/theme/components/ThemePopover.vue b/apps/www/.vitepress/theme/components/ThemePopover.vue
index d98d199d0..499c3f322 100644
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Button } from '@/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { useConfigStore } from '@/stores/config'
 import { Paintbrush } from 'lucide-vue-next'
 import { onMounted, watch } from 'vue'
diff --git a/apps/www/.vitepress/theme/components/Tooltip.vue b/apps/www/.vitepress/theme/components/Tooltip.vue
index 73f07a3e0..95b1f3f1f 100644
--- a/apps/www/.vitepress/theme/components/Tooltip.vue
+++ b/apps/www/.vitepress/theme/components/Tooltip.vue
@@ -4,7 +4,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/registry/default/ui/tooltip'
 
 defineProps<{
   content: string
diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index 66a53d581..89d3d80db 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -8,14 +8,14 @@ import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
 import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
 import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
 import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
-import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
-import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
-import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
+import CardChat from '@/registry/new-york/example/CardChat.vue'
+import ActivityGoal from '@/registry/new-york/example/Cards/ActivityGoal.vue'
+import DataTable from '@/registry/new-york/example/Cards/DataTable.vue'
 
-import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
-import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
-import { Card } from '@/lib/registry/new-york/ui/card'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import Metric from '@/registry/new-york/example/Cards/Metric.vue'
+import CardStats from '@/registry/new-york/example/CardStats.vue'
+import { Card } from '@/registry/new-york/ui/card'
+import { RangeCalendar } from '@/registry/new-york/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 
 import { type Ref, ref } from 'vue'
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index 4acbf9888..7b2b27682 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Button from '@/lib/registry/new-york/ui/button/Button.vue'
+import Button from '@/registry/new-york/ui/button/Button.vue'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index e0ba03f2d..759c40dd4 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
-import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
-import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
-import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
-import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
-import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
-
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/registry/default/ui/command'
+import { Dialog, DialogContent } from '@/registry/default/ui/dialog'
+import { Toaster as DefaultToaster } from '@/registry/default/ui/toast'
+import { Toaster as NewYorkSonner } from '@/registry/new-york/ui/sonner'
+import { Toaster as NewYorkToaster } from '@/registry/new-york/ui/toast'
+
+import { TooltipProvider } from '@/registry/new-york/ui/tooltip'
 import { useConfigStore } from '@/stores/config'
 import { useMagicKeys, useToggle } from '@vueuse/core'
 
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index d0ac6abd4..94e8b8fb4 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Color } from '../types/colors'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Button } from '@/registry/new-york/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/registry/new-york/ui/dialog'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { useConfigStore } from '@/stores/config'
 import { Paintbrush } from 'lucide-vue-next'
 import { onMounted, watch } from 'vue'
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index 3c9e9e37c..98839602c 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -1,4 +1,4 @@
-import type { Style } from '@/lib/registry/styles'
+import type { Style } from '@/registry/registry-styles'
 import sdk from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
 import { Index as demoIndex } from '../../../../www/__registry__'
@@ -117,7 +117,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
   // We have static replace here as this is only showing for code reproduction, doesn't need dynamic codeConfig
   const transformImportPath = (code: string) => {
     let parsed = code
-    parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components')
+    parsed = parsed.replaceAll(`@/registry/${style}`, '@/components')
     parsed = parsed.replaceAll('@/lib/utils', '@/utils')
     return parsed
   }
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6ee3d3953..1b9234724 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1,3032 +1,20243 @@
-
+// @ts-nocheck
 // This file is autogenerated by scripts/build-registry.ts
 // Do not edit this file directly.
-export const Index = {
-  "default": {
+
+export const Index: Record<string, any> = {
+  "new-york": {
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/lib/utils.ts").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/new-york/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/new-york/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/new-york/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/new-york/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogCancel.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogContent.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogContent.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogDescription.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogDescription.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogFooter.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogFooter.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogHeader.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogHeader.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogTitle.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTitle.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTrigger.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/index.ts",
+        type: "registry:ui",
+        target: "alert-dialog/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/aspect-ratio/AspectRatio.vue",
+        type: "registry:ui",
+        target: "aspect-ratio/AspectRatio.vue"
+      },{
+        path: "registry/new-york/ui/aspect-ratio/index.ts",
+        type: "registry:ui",
+        target: "aspect-ratio/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "auto-form": {
+      name: "auto-form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      files: [{
+        path: "registry/new-york/ui/auto-form/AutoForm.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoForm.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormField.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormField.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldArray.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldArray.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldBoolean.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldDate.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldDate.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldEnum.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldEnum.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldFile.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldFile.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldInput.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldInput.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldNumber.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldNumber.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldObject.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldObject.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormLabel.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormLabel.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/constant.ts",
+        type: "registry:ui",
+        target: "auto-form/constant.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/dependencies.ts",
+        type: "registry:ui",
+        target: "auto-form/dependencies.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/index.ts",
+        type: "registry:ui",
+        target: "auto-form/index.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/interface.ts",
+        type: "registry:ui",
+        target: "auto-form/interface.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/utils.ts",
+        type: "registry:ui",
+        target: "auto-form/utils.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "avatar": {
+      name: "avatar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/avatar/Avatar.vue",
+        type: "registry:ui",
+        target: "avatar/Avatar.vue"
+      },{
+        path: "registry/new-york/ui/avatar/AvatarFallback.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarFallback.vue"
+      },{
+        path: "registry/new-york/ui/avatar/AvatarImage.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarImage.vue"
+      },{
+        path: "registry/new-york/ui/avatar/index.ts",
+        type: "registry:ui",
+        target: "avatar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "badge": {
+      name: "badge",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/badge/Badge.vue",
+        type: "registry:ui",
+        target: "badge/Badge.vue"
+      },{
+        path: "registry/new-york/ui/badge/index.ts",
+        type: "registry:ui",
+        target: "badge/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "breadcrumb": {
+      name: "breadcrumb",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/breadcrumb/Breadcrumb.vue",
+        type: "registry:ui",
+        target: "breadcrumb/Breadcrumb.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbEllipsis.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbItem.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbItem.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbLink.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbLink.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbList.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbList.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbPage.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbPage.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbSeparator.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/index.ts",
+        type: "registry:ui",
+        target: "breadcrumb/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "button": {
+      name: "button",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/button/Button.vue",
+        type: "registry:ui",
+        target: "button/Button.vue"
+      },{
+        path: "registry/new-york/ui/button/index.ts",
+        type: "registry:ui",
+        target: "button/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "calendar": {
+      name: "calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "calendar/Calendar.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCell.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCellTrigger.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGrid.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGrid.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridBody.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridBody.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridHead.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridHead.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridRow.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridRow.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeadCell.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeader.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeader.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeading.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeading.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarNextButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarNextButton.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarPrevButton.vue"
+      },{
+        path: "registry/new-york/ui/calendar/index.ts",
+        type: "registry:ui",
+        target: "calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "card": {
+      name: "card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/card/Card.vue",
+        type: "registry:ui",
+        target: "card/Card.vue"
+      },{
+        path: "registry/new-york/ui/card/CardContent.vue",
+        type: "registry:ui",
+        target: "card/CardContent.vue"
+      },{
+        path: "registry/new-york/ui/card/CardDescription.vue",
+        type: "registry:ui",
+        target: "card/CardDescription.vue"
+      },{
+        path: "registry/new-york/ui/card/CardFooter.vue",
+        type: "registry:ui",
+        target: "card/CardFooter.vue"
+      },{
+        path: "registry/new-york/ui/card/CardHeader.vue",
+        type: "registry:ui",
+        target: "card/CardHeader.vue"
+      },{
+        path: "registry/new-york/ui/card/CardTitle.vue",
+        type: "registry:ui",
+        target: "card/CardTitle.vue"
+      },{
+        path: "registry/new-york/ui/card/index.ts",
+        type: "registry:ui",
+        target: "card/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "carousel": {
+      name: "carousel",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/carousel/Carousel.vue",
+        type: "registry:ui",
+        target: "carousel/Carousel.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselContent.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselContent.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselItem.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselItem.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselNext.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselNext.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselPrevious.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselPrevious.vue"
+      },{
+        path: "registry/new-york/ui/carousel/index.ts",
+        type: "registry:ui",
+        target: "carousel/index.ts"
+      },{
+        path: "registry/new-york/ui/carousel/interface.ts",
+        type: "registry:ui",
+        target: "carousel/interface.ts"
+      },{
+        path: "registry/new-york/ui/carousel/useCarousel.ts",
+        type: "registry:ui",
+        target: "carousel/useCarousel.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart": {
+      name: "chart",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","card"],
+      files: [{
+        path: "registry/new-york/ui/chart/ChartCrosshair.vue",
+        type: "registry:ui",
+        target: "chart/ChartCrosshair.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartLegend.vue",
+        type: "registry:ui",
+        target: "chart/ChartLegend.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartSingleTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartSingleTooltip.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartTooltip.vue"
+      },{
+        path: "registry/new-york/ui/chart/index.ts",
+        type: "registry:ui",
+        target: "chart/index.ts"
+      },{
+        path: "registry/new-york/ui/chart/interface.ts",
+        type: "registry:ui",
+        target: "chart/interface.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-area": {
+      name: "chart-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-area/AreaChart.vue",
+        type: "registry:ui",
+        target: "chart-area/AreaChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-area/index.ts",
+        type: "registry:ui",
+        target: "chart-area/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-bar": {
+      name: "chart-bar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-bar/BarChart.vue",
+        type: "registry:ui",
+        target: "chart-bar/BarChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-bar/index.ts",
+        type: "registry:ui",
+        target: "chart-bar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-donut": {
+      name: "chart-donut",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-donut/DonutChart.vue",
+        type: "registry:ui",
+        target: "chart-donut/DonutChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-donut/index.ts",
+        type: "registry:ui",
+        target: "chart-donut/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-line": {
+      name: "chart-line",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-line/LineChart.vue",
+        type: "registry:ui",
+        target: "chart-line/LineChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-line/index.ts",
+        type: "registry:ui",
+        target: "chart-line/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "checkbox": {
+      name: "checkbox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/checkbox/Checkbox.vue",
+        type: "registry:ui",
+        target: "checkbox/Checkbox.vue"
+      },{
+        path: "registry/new-york/ui/checkbox/index.ts",
+        type: "registry:ui",
+        target: "checkbox/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "collapsible": {
+      name: "collapsible",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/collapsible/Collapsible.vue",
+        type: "registry:ui",
+        target: "collapsible/Collapsible.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/CollapsibleContent.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleContent.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/CollapsibleTrigger.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleTrigger.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/index.ts",
+        type: "registry:ui",
+        target: "collapsible/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "command": {
+      name: "command",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","dialog"],
+      files: [{
+        path: "registry/new-york/ui/command/Command.vue",
+        type: "registry:ui",
+        target: "command/Command.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandDialog.vue",
+        type: "registry:ui",
+        target: "command/CommandDialog.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandEmpty.vue",
+        type: "registry:ui",
+        target: "command/CommandEmpty.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandGroup.vue",
+        type: "registry:ui",
+        target: "command/CommandGroup.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandInput.vue",
+        type: "registry:ui",
+        target: "command/CommandInput.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandItem.vue",
+        type: "registry:ui",
+        target: "command/CommandItem.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandList.vue",
+        type: "registry:ui",
+        target: "command/CommandList.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandSeparator.vue",
+        type: "registry:ui",
+        target: "command/CommandSeparator.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandShortcut.vue",
+        type: "registry:ui",
+        target: "command/CommandShortcut.vue"
+      },{
+        path: "registry/new-york/ui/command/index.ts",
+        type: "registry:ui",
+        target: "command/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/context-menu/ContextMenu.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenu.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuGroup.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuLabel.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuLabel.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuPortal.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuPortal.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSeparator.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSeparator.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuShortcut.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuShortcut.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSub.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSubContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubContent.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/index.ts",
+        type: "registry:ui",
+        target: "context-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dialog": {
+      name: "dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/dialog/Dialog.vue",
+        type: "registry:ui",
+        target: "dialog/Dialog.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogClose.vue",
+        type: "registry:ui",
+        target: "dialog/DialogClose.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogContent.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogDescription.vue",
+        type: "registry:ui",
+        target: "dialog/DialogDescription.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogFooter.vue",
+        type: "registry:ui",
+        target: "dialog/DialogFooter.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogHeader.vue",
+        type: "registry:ui",
+        target: "dialog/DialogHeader.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogScrollContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogScrollContent.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogTitle.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTitle.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogTrigger.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dialog/index.ts",
+        type: "registry:ui",
+        target: "dialog/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "drawer": {
+      name: "drawer",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/drawer/Drawer.vue",
+        type: "registry:ui",
+        target: "drawer/Drawer.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerContent.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerContent.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerDescription.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerDescription.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerFooter.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerFooter.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerHeader.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerHeader.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerOverlay.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerOverlay.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerTitle.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerTitle.vue"
+      },{
+        path: "registry/new-york/ui/drawer/index.ts",
+        type: "registry:ui",
+        target: "drawer/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenu.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenu.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuGroup.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuLabel.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSeparator.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuShortcut.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubContent.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/index.ts",
+        type: "registry:ui",
+        target: "dropdown-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "form": {
+      name: "form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","label"],
+      files: [{
+        path: "registry/new-york/ui/form/FormControl.vue",
+        type: "registry:ui",
+        target: "form/FormControl.vue"
+      },{
+        path: "registry/new-york/ui/form/FormDescription.vue",
+        type: "registry:ui",
+        target: "form/FormDescription.vue"
+      },{
+        path: "registry/new-york/ui/form/FormItem.vue",
+        type: "registry:ui",
+        target: "form/FormItem.vue"
+      },{
+        path: "registry/new-york/ui/form/FormLabel.vue",
+        type: "registry:ui",
+        target: "form/FormLabel.vue"
+      },{
+        path: "registry/new-york/ui/form/FormMessage.vue",
+        type: "registry:ui",
+        target: "form/FormMessage.vue"
+      },{
+        path: "registry/new-york/ui/form/index.ts",
+        type: "registry:ui",
+        target: "form/index.ts"
+      },{
+        path: "registry/new-york/ui/form/injectionKeys.ts",
+        type: "registry:ui",
+        target: "form/injectionKeys.ts"
+      },{
+        path: "registry/new-york/ui/form/useFormField.ts",
+        type: "registry:ui",
+        target: "form/useFormField.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "hover-card": {
+      name: "hover-card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/hover-card/HoverCard.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCard.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/HoverCardContent.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardContent.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/HoverCardTrigger.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardTrigger.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/index.ts",
+        type: "registry:ui",
+        target: "hover-card/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "input": {
+      name: "input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/input/Input.vue",
+        type: "registry:ui",
+        target: "input/Input.vue"
+      },{
+        path: "registry/new-york/ui/input/index.ts",
+        type: "registry:ui",
+        target: "input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "label": {
+      name: "label",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/label/Label.vue",
+        type: "registry:ui",
+        target: "label/Label.vue"
+      },{
+        path: "registry/new-york/ui/label/index.ts",
+        type: "registry:ui",
+        target: "label/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "menubar": {
+      name: "menubar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/menubar/Menubar.vue",
+        type: "registry:ui",
+        target: "menubar/Menubar.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarCheckboxItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarContent.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarGroup.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarLabel.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarLabel.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarMenu.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarMenu.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarRadioGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarRadioItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSeparator.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSeparator.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarShortcut.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarShortcut.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSub.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSub.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSubContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubContent.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSubTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarTrigger.vue"
+      },{
+        path: "registry/new-york/ui/menubar/index.ts",
+        type: "registry:ui",
+        target: "menubar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenu.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenu.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuContent.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuIndicator.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuItem.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuLink.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuLink.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuList.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuList.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuViewport.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/index.ts",
+        type: "registry:ui",
+        target: "navigation-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "number-field": {
+      name: "number-field",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/number-field/NumberField.vue",
+        type: "registry:ui",
+        target: "number-field/NumberField.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldContent.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldContent.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldDecrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldDecrement.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldIncrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldIncrement.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldInput.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldInput.vue"
+      },{
+        path: "registry/new-york/ui/number-field/index.ts",
+        type: "registry:ui",
+        target: "number-field/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pagination": {
+      name: "pagination",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/pagination/PaginationEllipsis.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationEllipsis.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationFirst.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationFirst.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationLast.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationLast.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationNext.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationNext.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationPrev.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationPrev.vue"
+      },{
+        path: "registry/new-york/ui/pagination/index.ts",
+        type: "registry:ui",
+        target: "pagination/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pin-input": {
+      name: "pin-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/pin-input/PinInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInput.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputGroup.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputGroup.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputInput.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputSeparator.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputSeparator.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/index.ts",
+        type: "registry:ui",
+        target: "pin-input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "popover": {
+      name: "popover",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/popover/Popover.vue",
+        type: "registry:ui",
+        target: "popover/Popover.vue"
+      },{
+        path: "registry/new-york/ui/popover/PopoverContent.vue",
+        type: "registry:ui",
+        target: "popover/PopoverContent.vue"
+      },{
+        path: "registry/new-york/ui/popover/PopoverTrigger.vue",
+        type: "registry:ui",
+        target: "popover/PopoverTrigger.vue"
+      },{
+        path: "registry/new-york/ui/popover/index.ts",
+        type: "registry:ui",
+        target: "popover/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "progress": {
+      name: "progress",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/progress/Progress.vue",
+        type: "registry:ui",
+        target: "progress/Progress.vue"
+      },{
+        path: "registry/new-york/ui/progress/index.ts",
+        type: "registry:ui",
+        target: "progress/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "radio-group": {
+      name: "radio-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/radio-group/RadioGroup.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/radio-group/RadioGroupItem.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroupItem.vue"
+      },{
+        path: "registry/new-york/ui/radio-group/index.ts",
+        type: "registry:ui",
+        target: "radio-group/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "range-calendar": {
+      name: "range-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/range-calendar/RangeCalendar.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendar.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCell.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCellTrigger.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGrid.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGrid.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridBody.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridHead.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridRow.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeadCell.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeader.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeader.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeading.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeading.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarNextButton.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarPrevButton.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/index.ts",
+        type: "registry:ui",
+        target: "range-calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "resizable": {
+      name: "resizable",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/resizable/ResizableHandle.vue",
+        type: "registry:ui",
+        target: "resizable/ResizableHandle.vue"
+      },{
+        path: "registry/new-york/ui/resizable/ResizablePanelGroup.vue",
+        type: "registry:ui",
+        target: "resizable/ResizablePanelGroup.vue"
+      },{
+        path: "registry/new-york/ui/resizable/index.ts",
+        type: "registry:ui",
+        target: "resizable/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/scroll-area/ScrollArea.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollArea.vue"
+      },{
+        path: "registry/new-york/ui/scroll-area/ScrollBar.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollBar.vue"
+      },{
+        path: "registry/new-york/ui/scroll-area/index.ts",
+        type: "registry:ui",
+        target: "scroll-area/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "select": {
+      name: "select",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/select/Select.vue",
+        type: "registry:ui",
+        target: "select/Select.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectContent.vue",
+        type: "registry:ui",
+        target: "select/SelectContent.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectGroup.vue",
+        type: "registry:ui",
+        target: "select/SelectGroup.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectItem.vue",
+        type: "registry:ui",
+        target: "select/SelectItem.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectItemText.vue",
+        type: "registry:ui",
+        target: "select/SelectItemText.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectLabel.vue",
+        type: "registry:ui",
+        target: "select/SelectLabel.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectScrollDownButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollDownButton.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectScrollUpButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollUpButton.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectSeparator.vue",
+        type: "registry:ui",
+        target: "select/SelectSeparator.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectTrigger.vue",
+        type: "registry:ui",
+        target: "select/SelectTrigger.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectValue.vue",
+        type: "registry:ui",
+        target: "select/SelectValue.vue"
+      },{
+        path: "registry/new-york/ui/select/index.ts",
+        type: "registry:ui",
+        target: "select/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "separator": {
+      name: "separator",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/separator/Separator.vue",
+        type: "registry:ui",
+        target: "separator/Separator.vue"
+      },{
+        path: "registry/new-york/ui/separator/index.ts",
+        type: "registry:ui",
+        target: "separator/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sheet": {
+      name: "sheet",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/sheet/Sheet.vue",
+        type: "registry:ui",
+        target: "sheet/Sheet.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetClose.vue",
+        type: "registry:ui",
+        target: "sheet/SheetClose.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetContent.vue",
+        type: "registry:ui",
+        target: "sheet/SheetContent.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetDescription.vue",
+        type: "registry:ui",
+        target: "sheet/SheetDescription.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetFooter.vue",
+        type: "registry:ui",
+        target: "sheet/SheetFooter.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetHeader.vue",
+        type: "registry:ui",
+        target: "sheet/SheetHeader.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetTitle.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTitle.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetTrigger.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTrigger.vue"
+      },{
+        path: "registry/new-york/ui/sheet/index.ts",
+        type: "registry:ui",
+        target: "sheet/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      files: [{
+        path: "registry/new-york/ui/sidebar/Sidebar.vue",
+        type: "registry:ui",
+        target: "sidebar/Sidebar.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarContent.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarFooter.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarFooter.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroup.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroup.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupAction.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupContent.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupLabel.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupLabel.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarHeader.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarHeader.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarInput.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInput.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarInset.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInset.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenu.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenu.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuAction.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuBadge.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuBadge.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButtonChild.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSkeleton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSub.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSubButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubButton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSubItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubItem.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarProvider.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarProvider.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarRail.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarRail.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarSeparator.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarSeparator.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarTrigger.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarTrigger.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/index.ts",
+        type: "registry:ui",
+        target: "sidebar/index.ts"
+      },{
+        path: "registry/new-york/ui/sidebar/utils.ts",
+        type: "registry:ui",
+        target: "sidebar/utils.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "skeleton": {
+      name: "skeleton",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/skeleton/Skeleton.vue",
+        type: "registry:ui",
+        target: "skeleton/Skeleton.vue"
+      },{
+        path: "registry/new-york/ui/skeleton/index.ts",
+        type: "registry:ui",
+        target: "skeleton/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "slider": {
+      name: "slider",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/slider/Slider.vue",
+        type: "registry:ui",
+        target: "slider/Slider.vue"
+      },{
+        path: "registry/new-york/ui/slider/index.ts",
+        type: "registry:ui",
+        target: "slider/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sonner": {
+      name: "sonner",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/sonner/Sonner.vue",
+        type: "registry:ui",
+        target: "sonner/Sonner.vue"
+      },{
+        path: "registry/new-york/ui/sonner/index.ts",
+        type: "registry:ui",
+        target: "sonner/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "stepper": {
+      name: "stepper",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/stepper/Stepper.vue",
+        type: "registry:ui",
+        target: "stepper/Stepper.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperDescription.vue",
+        type: "registry:ui",
+        target: "stepper/StepperDescription.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperIndicator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperIndicator.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperItem.vue",
+        type: "registry:ui",
+        target: "stepper/StepperItem.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperSeparator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperSeparator.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperTitle.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTitle.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperTrigger.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTrigger.vue"
+      },{
+        path: "registry/new-york/ui/stepper/index.ts",
+        type: "registry:ui",
+        target: "stepper/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "switch": {
+      name: "switch",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/switch/Switch.vue",
+        type: "registry:ui",
+        target: "switch/Switch.vue"
+      },{
+        path: "registry/new-york/ui/switch/index.ts",
+        type: "registry:ui",
+        target: "switch/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "table": {
+      name: "table",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/table/Table.vue",
+        type: "registry:ui",
+        target: "table/Table.vue"
+      },{
+        path: "registry/new-york/ui/table/TableBody.vue",
+        type: "registry:ui",
+        target: "table/TableBody.vue"
+      },{
+        path: "registry/new-york/ui/table/TableCaption.vue",
+        type: "registry:ui",
+        target: "table/TableCaption.vue"
+      },{
+        path: "registry/new-york/ui/table/TableCell.vue",
+        type: "registry:ui",
+        target: "table/TableCell.vue"
+      },{
+        path: "registry/new-york/ui/table/TableEmpty.vue",
+        type: "registry:ui",
+        target: "table/TableEmpty.vue"
+      },{
+        path: "registry/new-york/ui/table/TableFooter.vue",
+        type: "registry:ui",
+        target: "table/TableFooter.vue"
+      },{
+        path: "registry/new-york/ui/table/TableHead.vue",
+        type: "registry:ui",
+        target: "table/TableHead.vue"
+      },{
+        path: "registry/new-york/ui/table/TableHeader.vue",
+        type: "registry:ui",
+        target: "table/TableHeader.vue"
+      },{
+        path: "registry/new-york/ui/table/TableRow.vue",
+        type: "registry:ui",
+        target: "table/TableRow.vue"
+      },{
+        path: "registry/new-york/ui/table/index.ts",
+        type: "registry:ui",
+        target: "table/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tabs": {
+      name: "tabs",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tabs/Tabs.vue",
+        type: "registry:ui",
+        target: "tabs/Tabs.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsContent.vue",
+        type: "registry:ui",
+        target: "tabs/TabsContent.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsList.vue",
+        type: "registry:ui",
+        target: "tabs/TabsList.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsTrigger.vue",
+        type: "registry:ui",
+        target: "tabs/TabsTrigger.vue"
+      },{
+        path: "registry/new-york/ui/tabs/index.ts",
+        type: "registry:ui",
+        target: "tabs/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tags-input": {
+      name: "tags-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tags-input/TagsInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInput.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputInput.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItem.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItem.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItemDelete.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemDelete.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItemText.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemText.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/index.ts",
+        type: "registry:ui",
+        target: "tags-input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "textarea": {
+      name: "textarea",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/textarea/Textarea.vue",
+        type: "registry:ui",
+        target: "textarea/Textarea.vue"
+      },{
+        path: "registry/new-york/ui/textarea/index.ts",
+        type: "registry:ui",
+        target: "textarea/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toast": {
+      name: "toast",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/toast/Toast.vue",
+        type: "registry:ui",
+        target: "toast/Toast.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastAction.vue",
+        type: "registry:ui",
+        target: "toast/ToastAction.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastClose.vue",
+        type: "registry:ui",
+        target: "toast/ToastClose.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastDescription.vue",
+        type: "registry:ui",
+        target: "toast/ToastDescription.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastProvider.vue",
+        type: "registry:ui",
+        target: "toast/ToastProvider.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastTitle.vue",
+        type: "registry:ui",
+        target: "toast/ToastTitle.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastViewport.vue",
+        type: "registry:ui",
+        target: "toast/ToastViewport.vue"
+      },{
+        path: "registry/new-york/ui/toast/Toaster.vue",
+        type: "registry:ui",
+        target: "toast/Toaster.vue"
+      },{
+        path: "registry/new-york/ui/toast/index.ts",
+        type: "registry:ui",
+        target: "toast/index.ts"
+      },{
+        path: "registry/new-york/ui/toast/use-toast.ts",
+        type: "registry:ui",
+        target: "toast/use-toast.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle": {
+      name: "toggle",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/toggle/Toggle.vue",
+        type: "registry:ui",
+        target: "toggle/Toggle.vue"
+      },{
+        path: "registry/new-york/ui/toggle/index.ts",
+        type: "registry:ui",
+        target: "toggle/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toggle","utils"],
+      files: [{
+        path: "registry/new-york/ui/toggle-group/ToggleGroup.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroup.vue"
+      },{
+        path: "registry/new-york/ui/toggle-group/ToggleGroupItem.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroupItem.vue"
+      },{
+        path: "registry/new-york/ui/toggle-group/index.ts",
+        type: "registry:ui",
+        target: "toggle-group/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tooltip/Tooltip.vue",
+        type: "registry:ui",
+        target: "tooltip/Tooltip.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipContent.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipContent.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipProvider.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipProvider.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipTrigger.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipTrigger.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/index.ts",
+        type: "registry:ui",
+        target: "tooltip/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "v-calendar": {
+      name: "v-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/new-york/ui/v-calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "v-calendar/Calendar.vue"
+      },{
+        path: "registry/new-york/ui/v-calendar/index.ts",
+        type: "registry:ui",
+        target: "v-calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "AccordionDemo": {
       name: "AccordionDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["accordion"],
-      component: () => import("../src/lib/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AccordionDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AccordionDemo.vue",
+        type: "registry:example",
+        target: "AccordionDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDemo": {
       name: "AlertDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDemo.vue",
+        type: "registry:example",
+        target: "AlertDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDestructiveDemo": {
       name: "AlertDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDestructiveDemo.vue",
+        type: "registry:example",
+        target: "AlertDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDialogDemo": {
       name: "AlertDialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert-dialog","button"],
-      component: () => import("../src/lib/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDialogDemo.vue",
+        type: "registry:example",
+        target: "AlertDialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartCustomTooltip": {
       name: "AreaChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AreaChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "AreaChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartDemo": {
       name: "AreaChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AreaChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartDemo.vue",
+        type: "registry:example",
+        target: "AreaChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartSparkline": {
       name: "AreaChartSparkline",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AreaChartSparkline.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartSparkline.vue",
+        type: "registry:example",
+        target: "AreaChartSparkline.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["aspect-ratio"],
-      component: () => import("../src/lib/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AspectRatioDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AspectRatioDemo.vue",
+        type: "registry:example",
+        target: "AspectRatioDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormApi": {
       name: "AutoFormApi",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormApi.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormApi.vue",
+        type: "registry:example",
+        target: "AutoFormApi.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormArray": {
       name: "AutoFormArray",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormArray.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormArray.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormArray.vue",
+        type: "registry:example",
+        target: "AutoFormArray.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormBasic.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormBasic.vue",
+        type: "registry:example",
+        target: "AutoFormBasic.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormConfirmPassword.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormConfirmPassword.vue",
+        type: "registry:example",
+        target: "AutoFormConfirmPassword.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormControlled.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormControlled.vue",
+        type: "registry:example",
+        target: "AutoFormControlled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormDependencies.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormDependencies.vue",
+        type: "registry:example",
+        target: "AutoFormDependencies.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
+        type: "registry:example",
+        target: "AutoFormInputWithoutLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AutoFormSubObject.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormSubObject.vue",
+        type: "registry:example",
+        target: "AutoFormSubObject.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AvatarDemo": {
       name: "AvatarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar"],
-      component: () => import("../src/lib/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AvatarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AvatarDemo.vue",
+        type: "registry:example",
+        target: "AvatarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeDemo": {
       name: "BadgeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeDemo.vue",
+        type: "registry:example",
+        target: "BadgeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeDestructiveDemo": {
       name: "BadgeDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeDestructiveDemo.vue",
+        type: "registry:example",
+        target: "BadgeDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeOutlineDemo": {
       name: "BadgeOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeOutlineDemo.vue",
+        type: "registry:example",
+        target: "BadgeOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeSecondaryDemo": {
       name: "BadgeSecondaryDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeSecondaryDemo.vue",
+        type: "registry:example",
+        target: "BadgeSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartCustomTooltip": {
       name: "BarChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BarChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "BarChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartDemo": {
       name: "BarChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/default/example/BarChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BarChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartDemo.vue",
+        type: "registry:example",
+        target: "BarChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartRounded": {
       name: "BarChartRounded",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/default/example/BarChartRounded.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BarChartRounded.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartRounded.vue",
+        type: "registry:example",
+        target: "BarChartRounded.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartStacked": {
       name: "BarChartStacked",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/default/example/BarChartStacked.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BarChartStacked.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartStacked.vue",
+        type: "registry:example",
+        target: "BarChartStacked.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbDropdown": {
       name: "BreadcrumbDropdown",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbDropdown.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbDropdown.vue",
+        type: "registry:example",
+        target: "BreadcrumbDropdown.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbEllipsisDemo": {
       name: "BreadcrumbEllipsisDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbEllipsisDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbLinkDemo": {
       name: "BreadcrumbLinkDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbLinkDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbLinkDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbResponsive": {
       name: "BreadcrumbResponsive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbResponsive.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbResponsive.vue",
+        type: "registry:example",
+        target: "BreadcrumbResponsive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbSeparatorDemo": {
       name: "BreadcrumbSeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonAsChildDemo": {
       name: "ButtonAsChildDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonAsChildDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonAsChildDemo.vue",
+        type: "registry:example",
+        target: "ButtonAsChildDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonDemo": {
       name: "ButtonDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonDemo.vue",
+        type: "registry:example",
+        target: "ButtonDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonDestructiveDemo": {
       name: "ButtonDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonDestructiveDemo.vue",
+        type: "registry:example",
+        target: "ButtonDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonGhostDemo": {
       name: "ButtonGhostDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonGhostDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonGhostDemo.vue",
+        type: "registry:example",
+        target: "ButtonGhostDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonIconDemo": {
       name: "ButtonIconDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonIconDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonIconDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonLinkDemo": {
       name: "ButtonLinkDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonLinkDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonLinkDemo.vue",
+        type: "registry:example",
+        target: "ButtonLinkDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonLoadingDemo": {
       name: "ButtonLoadingDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonLoadingDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonLoadingDemo.vue",
+        type: "registry:example",
+        target: "ButtonLoadingDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonOutlineDemo": {
       name: "ButtonOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonOutlineDemo.vue",
+        type: "registry:example",
+        target: "ButtonOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonSecondaryDemo": {
       name: "ButtonSecondaryDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonSecondaryDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonSecondaryDemo.vue",
+        type: "registry:example",
+        target: "ButtonSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonWithIconDemo": {
       name: "ButtonWithIconDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonWithIconDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonWithIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonWithIconDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarDemo": {
       name: "CalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["calendar"],
-      component: () => import("../src/lib/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarDemo.vue",
+        type: "registry:example",
+        target: "CalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarForm": {
       name: "CalendarForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/default/example/CalendarForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CalendarForm.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarForm.vue",
+        type: "registry:example",
+        target: "CalendarForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarWithSelect": {
       name: "CalendarWithSelect",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["calendar","select","utils"],
-      component: () => import("../src/lib/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CalendarWithSelect.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarWithSelect.vue",
+        type: "registry:example",
+        target: "CalendarWithSelect.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardChat": {
       name: "CardChat",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
-      component: () => import("../src/lib/registry/default/example/CardChat.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardChat.vue"],
+      files: [{
+        path: "registry/new-york/example/CardChat.vue",
+        type: "registry:example",
+        target: "CardChat.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardDemo": {
       name: "CardDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","switch","utils"],
-      component: () => import("../src/lib/registry/default/example/CardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CardDemo.vue",
+        type: "registry:example",
+        target: "CardDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardFormDemo": {
       name: "CardFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/default/example/CardFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CardFormDemo.vue",
+        type: "registry:example",
+        target: "CardFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardStats": {
       name: "CardStats",
-      type: "components:example",
-      registryDependencies: ["card","themes","config"],
-      component: () => import("../src/lib/registry/default/example/CardStats.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardStats.vue"],
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","chart-bar","chart-line"],
+      files: [{
+        path: "registry/new-york/example/CardStats.vue",
+        type: "registry:example",
+        target: "CardStats.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardWithForm": {
       name: "CardWithForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardWithForm.vue"],
+      files: [{
+        path: "registry/new-york/example/CardWithForm.vue",
+        type: "registry:example",
+        target: "CardWithForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselApi": {
       name: "CarouselApi",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["carousel","card"],
-      component: () => import("../src/lib/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselApi.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselApi.vue",
+        type: "registry:example",
+        target: "CarouselApi.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselDemo": {
       name: "CarouselDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselDemo.vue",
+        type: "registry:example",
+        target: "CarouselDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselOrientation.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselOrientation.vue",
+        type: "registry:example",
+        target: "CarouselOrientation.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselPlugin.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselPlugin.vue",
+        type: "registry:example",
+        target: "CarouselPlugin.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselSize": {
       name: "CarouselSize",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselSize.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselSize.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselSize.vue",
+        type: "registry:example",
+        target: "CarouselSize.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselSpacing.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselSpacing.vue",
+        type: "registry:example",
+        target: "CarouselSpacing.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselThumbnails.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselThumbnails.vue",
+        type: "registry:example",
+        target: "CarouselThumbnails.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxDemo": {
       name: "CheckboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxDemo.vue",
+        type: "registry:example",
+        target: "CheckboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxDisabled": {
       name: "CheckboxDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxDisabled.vue",
+        type: "registry:example",
+        target: "CheckboxDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","form","toast"],
-      component: () => import("../src/lib/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxFormMultiple.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxFormMultiple.vue",
+        type: "registry:example",
+        target: "CheckboxFormMultiple.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","form","toast"],
-      component: () => import("../src/lib/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxFormSingle.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxFormSingle.vue",
+        type: "registry:example",
+        target: "CheckboxFormSingle.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxWithText": {
       name: "CheckboxWithText",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxWithText.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxWithText.vue",
+        type: "registry:example",
+        target: "CheckboxWithText.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CollapsibleDemo": {
       name: "CollapsibleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","collapsible"],
-      component: () => import("../src/lib/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CollapsibleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CollapsibleDemo.vue",
+        type: "registry:example",
+        target: "CollapsibleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxDemo": {
       name: "ComboboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","popover","utils"],
-      component: () => import("../src/lib/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxDemo.vue",
+        type: "registry:example",
+        target: "ComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxDropdownMenu": {
       name: "ComboboxDropdownMenu",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxDropdownMenu.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxDropdownMenu.vue",
+        type: "registry:example",
+        target: "ComboboxDropdownMenu.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxForm": {
       name: "ComboboxForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/default/example/ComboboxForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxForm.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxForm.vue",
+        type: "registry:example",
+        target: "ComboboxForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
-      type: "components:example",
-      registryDependencies: ["button","command","popover","utils"],
-      component: () => import("../src/lib/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxPopover.vue"],
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/new-york/example/ComboboxPopover.vue",
+        type: "registry:example",
+        target: "ComboboxPopover.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxResponsive": {
       name: "ComboboxResponsive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","drawer","popover"],
-      component: () => import("../src/lib/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxResponsive.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxResponsive.vue",
+        type: "registry:example",
+        target: "ComboboxResponsive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CommandDemo": {
       name: "CommandDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CommandDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CommandDemo.vue",
+        type: "registry:example",
+        target: "CommandDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CommandDialogDemo": {
       name: "CommandDialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CommandDialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CommandDialogDemo.vue",
+        type: "registry:example",
+        target: "CommandDialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["context-menu"],
-      component: () => import("../src/lib/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ContextMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ContextMenuDemo.vue",
+        type: "registry:example",
+        target: "ContextMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CustomChartTooltip": {
       name: "CustomChartTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card"],
-      component: () => import("../src/lib/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CustomChartTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/CustomChartTooltip.vue",
+        type: "registry:example",
+        target: "CustomChartTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableColumnPinningDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
+        type: "registry:example",
+        target: "DataTableColumnPinningDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableDemo": {
       name: "DataTableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableDemo.vue",
+        type: "registry:example",
+        target: "DataTableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableDemoColumn.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableDemoColumn.vue",
+        type: "registry:example",
+        target: "DataTableDemoColumn.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableReactiveDemo": {
       name: "DataTableReactiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableReactiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableReactiveDemo.vue",
+        type: "registry:example",
+        target: "DataTableReactiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerDemo": {
       name: "DatePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","utils"],
-      component: () => import("../src/lib/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerDemo.vue",
+        type: "registry:example",
+        target: "DatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerForm": {
       name: "DatePickerForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerForm.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerForm.vue",
+        type: "registry:example",
+        target: "DatePickerForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","range-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
+        type: "registry:example",
+        target: "DatePickerWithIndependentMonths.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","select","utils"],
-      component: () => import("../src/lib/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerWithPresets.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "DatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","range-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerWithRange.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithRange.vue",
+        type: "registry:example",
+        target: "DatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogCustomCloseButton": {
       name: "DialogCustomCloseButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogCustomCloseButton.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogCustomCloseButton.vue",
+        type: "registry:example",
+        target: "DialogCustomCloseButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogDemo": {
       name: "DialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogDemo.vue",
+        type: "registry:example",
+        target: "DialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogForm": {
       name: "DialogForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","form","input","toast"],
-      component: () => import("../src/lib/registry/default/example/DialogForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogForm.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogForm.vue",
+        type: "registry:example",
+        target: "DialogForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogScrollBodyDemo": {
       name: "DialogScrollBodyDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogScrollBodyDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogScrollBodyDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollBodyDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogScrollOverlayDemo": {
       name: "DialogScrollOverlayDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogScrollOverlayDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollOverlayDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartColor": {
       name: "DonutChartColor",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/default/example/DonutChartColor.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DonutChartColor.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartColor.vue",
+        type: "registry:example",
+        target: "DonutChartColor.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartCustomTooltip": {
       name: "DonutChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DonutChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "DonutChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartDemo": {
       name: "DonutChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DonutChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartDemo.vue",
+        type: "registry:example",
+        target: "DonutChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartPie": {
       name: "DonutChartPie",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/default/example/DonutChartPie.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DonutChartPie.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartPie.vue",
+        type: "registry:example",
+        target: "DonutChartPie.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DrawerDemo": {
       name: "DrawerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","drawer"],
-      component: () => import("../src/lib/registry/default/example/DrawerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DrawerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DrawerDemo.vue",
+        type: "registry:example",
+        target: "DrawerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DrawerDialog": {
       name: "DrawerDialog",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","drawer","input","label"],
-      component: () => import("../src/lib/registry/default/example/DrawerDialog.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DrawerDialog.vue"],
+      files: [{
+        path: "registry/new-york/example/DrawerDialog.vue",
+        type: "registry:example",
+        target: "DrawerDialog.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuCheckboxes": {
       name: "DropdownMenuCheckboxes",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DropdownMenuCheckboxes.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
+        type: "registry:example",
+        target: "DropdownMenuCheckboxes.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuDemo": {
       name: "DropdownMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DropdownMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuDemo.vue",
+        type: "registry:example",
+        target: "DropdownMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuRadioGroup": {
       name: "DropdownMenuRadioGroup",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DropdownMenuRadioGroup.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
+        type: "registry:example",
+        target: "DropdownMenuRadioGroup.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "HoverCardDemo": {
       name: "HoverCardDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar","button","hover-card"],
-      component: () => import("../src/lib/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/HoverCardDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/HoverCardDemo.vue",
+        type: "registry:example",
+        target: "HoverCardDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputDemo": {
       name: "InputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/default/example/InputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/InputDemo.vue",
+        type: "registry:example",
+        target: "InputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputDisabled": {
       name: "InputDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/InputDisabled.vue",
+        type: "registry:example",
+        target: "InputDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputFile": {
       name: "InputFile",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/default/example/InputFile.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputFile.vue"],
+      files: [{
+        path: "registry/new-york/example/InputFile.vue",
+        type: "registry:example",
+        target: "InputFile.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputForm": {
       name: "InputForm",
-      type: "components:example",
-      registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/default/example/InputForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputForm.vue"],
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","use-toast"],
+      files: [{
+        path: "registry/new-york/example/InputForm.vue",
+        type: "registry:example",
+        target: "InputForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputFormAutoAnimate": {
       name: "InputFormAutoAnimate",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputFormAutoAnimate.vue"],
+      files: [{
+        path: "registry/new-york/example/InputFormAutoAnimate.vue",
+        type: "registry:example",
+        target: "InputFormAutoAnimate.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithButton": {
       name: "InputWithButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input"],
-      component: () => import("../src/lib/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputWithButton.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithButton.vue",
+        type: "registry:example",
+        target: "InputWithButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithIcon": {
       name: "InputWithIcon",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/default/example/InputWithIcon.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputWithIcon.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithIcon.vue",
+        type: "registry:example",
+        target: "InputWithIcon.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithLabel": {
       name: "InputWithLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputWithLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithLabel.vue",
+        type: "registry:example",
+        target: "InputWithLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LabelDemo": {
       name: "LabelDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox","label"],
-      component: () => import("../src/lib/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/LabelDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/LabelDemo.vue",
+        type: "registry:example",
+        target: "LabelDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartCustomTooltip": {
       name: "LineChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/LineChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "LineChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartDemo": {
       name: "LineChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/default/example/LineChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/LineChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartDemo.vue",
+        type: "registry:example",
+        target: "LineChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartSparkline": {
       name: "LineChartSparkline",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/LineChartSparkline.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartSparkline.vue",
+        type: "registry:example",
+        target: "LineChartSparkline.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "MenubarDemo": {
       name: "MenubarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["menubar"],
-      component: () => import("../src/lib/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/MenubarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/MenubarDemo.vue",
+        type: "registry:example",
+        target: "MenubarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NavigationMenuDemo": {
       name: "NavigationMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/NavigationMenuDemo.vue",
+        type: "registry:example",
+        target: "NavigationMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldCurrency.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldCurrency.vue",
+        type: "registry:example",
+        target: "NumberFieldCurrency.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldDecimal.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDecimal.vue",
+        type: "registry:example",
+        target: "NumberFieldDecimal.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDemo.vue",
+        type: "registry:example",
+        target: "NumberFieldDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDisabled.vue",
+        type: "registry:example",
+        target: "NumberFieldDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldForm": {
       name: "NumberFieldForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","number-field","toast"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldForm.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldForm.vue",
+        type: "registry:example",
+        target: "NumberFieldForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NumberFieldPercentage.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldPercentage.vue",
+        type: "registry:example",
+        target: "NumberFieldPercentage.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PaginationDemo": {
       name: "PaginationDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","pagination"],
-      component: () => import("../src/lib/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PaginationDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PaginationDemo.vue",
+        type: "registry:example",
+        target: "PaginationDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputControlled": {
       name: "PinInputControlled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/default/example/PinInputControlled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputControlled.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputControlled.vue",
+        type: "registry:example",
+        target: "PinInputControlled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputDemo": {
       name: "PinInputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputDemo.vue",
+        type: "registry:example",
+        target: "PinInputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputDisabled": {
       name: "PinInputDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputDisabled.vue",
+        type: "registry:example",
+        target: "PinInputDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","pin-input","toast"],
-      component: () => import("../src/lib/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputFormDemo.vue",
+        type: "registry:example",
+        target: "PinInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputSeparatorDemo": {
       name: "PinInputSeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputSeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputSeparatorDemo.vue",
+        type: "registry:example",
+        target: "PinInputSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PopoverDemo": {
       name: "PopoverDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","popover"],
-      component: () => import("../src/lib/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PopoverDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PopoverDemo.vue",
+        type: "registry:example",
+        target: "PopoverDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ProgressDemo": {
       name: "ProgressDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["progress"],
-      component: () => import("../src/lib/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ProgressDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ProgressDemo.vue",
+        type: "registry:example",
+        target: "ProgressDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RadioGroupDemo": {
       name: "RadioGroupDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","radio-group"],
-      component: () => import("../src/lib/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RadioGroupDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/RadioGroupDemo.vue",
+        type: "registry:example",
+        target: "RadioGroupDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RadioGroupForm": {
       name: "RadioGroupForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","radio-group","toast"],
-      component: () => import("../src/lib/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RadioGroupForm.vue"],
+      files: [{
+        path: "registry/new-york/example/RadioGroupForm.vue",
+        type: "registry:example",
+        target: "RadioGroupForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RangeCalendarDemo": {
       name: "RangeCalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["range-calendar"],
-      component: () => import("../src/lib/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RangeCalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/RangeCalendarDemo.vue",
+        type: "registry:example",
+        target: "RangeCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableDemo": {
       name: "ResizableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/default/example/ResizableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ResizableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableDemo.vue",
+        type: "registry:example",
+        target: "ResizableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableHandleDemo": {
       name: "ResizableHandleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ResizableHandleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableHandleDemo.vue",
+        type: "registry:example",
+        target: "ResizableHandleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableVerticalDemo": {
       name: "ResizableVerticalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ResizableVerticalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableVerticalDemo.vue",
+        type: "registry:example",
+        target: "ResizableVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ScrollAreaDemo": {
       name: "ScrollAreaDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["scroll-area","separator"],
-      component: () => import("../src/lib/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ScrollAreaDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ScrollAreaDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ScrollAreaHorizontalDemo": {
       name: "ScrollAreaHorizontalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
-      component: () => import("../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaHorizontalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectDemo": {
       name: "SelectDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SelectDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectDemo.vue",
+        type: "registry:example",
+        target: "SelectDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectForm": {
       name: "SelectForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","select","toast"],
-      component: () => import("../src/lib/registry/default/example/SelectForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SelectForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectForm.vue",
+        type: "registry:example",
+        target: "SelectForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectScrollable": {
       name: "SelectScrollable",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/default/example/SelectScrollable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SelectScrollable.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectScrollable.vue",
+        type: "registry:example",
+        target: "SelectScrollable.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SeparatorDemo": {
       name: "SeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["separator"],
-      component: () => import("../src/lib/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SeparatorDemo.vue",
+        type: "registry:example",
+        target: "SeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SheetDemo": {
       name: "SheetDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SheetDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SheetDemo.vue",
+        type: "registry:example",
+        target: "SheetDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SheetSideDemo": {
       name: "SheetSideDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SheetSideDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SheetSideDemo.vue",
+        type: "registry:example",
+        target: "SheetSideDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SkeletonCard": {
       name: "SkeletonCard",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/default/example/SkeletonCard.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SkeletonCard.vue"],
+      files: [{
+        path: "registry/new-york/example/SkeletonCard.vue",
+        type: "registry:example",
+        target: "SkeletonCard.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SkeletonDemo": {
       name: "SkeletonDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SkeletonDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SkeletonDemo.vue",
+        type: "registry:example",
+        target: "SkeletonDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SliderDemo": {
       name: "SliderDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["slider","utils"],
-      component: () => import("../src/lib/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SliderDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SliderDemo.vue",
+        type: "registry:example",
+        target: "SliderDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SliderForm": {
       name: "SliderForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","slider","toast"],
-      component: () => import("../src/lib/registry/default/example/SliderForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SliderForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SliderForm.vue",
+        type: "registry:example",
+        target: "SliderForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SonnerDemo": {
       name: "SonnerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SonnerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SonnerDemo.vue",
+        type: "registry:example",
+        target: "SonnerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SonnerWithDialog": {
       name: "SonnerWithDialog",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
+      files: [{
+        path: "registry/new-york/example/SonnerWithDialog.vue",
+        type: "registry:example",
+        target: "SonnerWithDialog.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperDemo": {
       name: "StepperDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["stepper"],
-      component: () => import("../src/lib/registry/default/example/StepperDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/StepperDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperDemo.vue",
+        type: "registry:example",
+        target: "StepperDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperForm": {
       name: "StepperForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","input","select","stepper","toast"],
-      component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/StepperForm.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperForm.vue",
+        type: "registry:example",
+        target: "StepperForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperHorizental": {
       name: "StepperHorizental",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","stepper"],
-      component: () => import("../src/lib/registry/default/example/StepperHorizental.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/StepperHorizental.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperHorizental.vue",
+        type: "registry:example",
+        target: "StepperHorizental.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperVertical": {
       name: "StepperVertical",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","stepper"],
-      component: () => import("../src/lib/registry/default/example/StepperVertical.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/StepperVertical.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperVertical.vue",
+        type: "registry:example",
+        target: "StepperVertical.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SwitchDemo": {
       name: "SwitchDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","switch"],
-      component: () => import("../src/lib/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SwitchDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SwitchDemo.vue",
+        type: "registry:example",
+        target: "SwitchDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SwitchForm": {
       name: "SwitchForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","switch","toast"],
-      component: () => import("../src/lib/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SwitchForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SwitchForm.vue",
+        type: "registry:example",
+        target: "SwitchForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TableDemo": {
       name: "TableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["table"],
-      component: () => import("../src/lib/registry/default/example/TableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TableDemo.vue",
+        type: "registry:example",
+        target: "TableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TabsDemo": {
       name: "TabsDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TabsDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TabsDemo.vue",
+        type: "registry:example",
+        target: "TabsDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TabsVerticalDemo": {
       name: "TabsVerticalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TabsVerticalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TabsVerticalDemo.vue",
+        type: "registry:example",
+        target: "TabsVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command","tags-input"],
-      component: () => import("../src/lib/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TagsInputComboboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputComboboxDemo.vue",
+        type: "registry:example",
+        target: "TagsInputComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputDemo": {
       name: "TagsInputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["tags-input"],
-      component: () => import("../src/lib/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TagsInputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputDemo.vue",
+        type: "registry:example",
+        target: "TagsInputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","tags-input","toast"],
-      component: () => import("../src/lib/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TagsInputFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputFormDemo.vue",
+        type: "registry:example",
+        target: "TagsInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaDemo": {
       name: "TextareaDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaDemo.vue",
+        type: "registry:example",
+        target: "TextareaDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaDisabled": {
       name: "TextareaDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaDisabled.vue",
+        type: "registry:example",
+        target: "TextareaDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaForm": {
       name: "TextareaForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","textarea","toast"],
-      component: () => import("../src/lib/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaForm.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaForm.vue",
+        type: "registry:example",
+        target: "TextareaForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithButton": {
       name: "TextareaWithButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaWithButton.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithButton.vue",
+        type: "registry:example",
+        target: "TextareaWithButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaWithLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithLabel.vue",
+        type: "registry:example",
+        target: "TextareaWithLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithText": {
       name: "TextareaWithText",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaWithText.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithText.vue",
+        type: "registry:example",
+        target: "TextareaWithText.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastDemo": {
       name: "ToastDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastDemo.vue",
+        type: "registry:example",
+        target: "ToastDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastDestructive": {
       name: "ToastDestructive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","toast","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastDestructive.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastDestructive.vue",
+        type: "registry:example",
+        target: "ToastDestructive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastSimple": {
       name: "ToastSimple",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastSimple.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastSimple.vue",
+        type: "registry:example",
+        target: "ToastSimple.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastWithAction": {
       name: "ToastWithAction",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","toast","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastWithAction.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastWithAction.vue",
+        type: "registry:example",
+        target: "ToastWithAction.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastWithTitle": {
       name: "ToastWithTitle",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastWithTitle.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastWithTitle.vue",
+        type: "registry:example",
+        target: "ToastWithTitle.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleDemo": {
       name: "ToggleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleDemo.vue",
+        type: "registry:example",
+        target: "ToggleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleDisabledDemo": {
       name: "ToggleDisabledDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleDisabledDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupDemo": {
       name: "ToggleGroupDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupDisabledDemo": {
       name: "ToggleGroupDisabledDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupLargeDemo": {
       name: "ToggleGroupLargeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupLargeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupLargeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupOutlineDemo": {
       name: "ToggleGroupOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupSingleDemo": {
       name: "ToggleGroupSingleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupSingleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSingleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupSmallDemo": {
       name: "ToggleGroupSmallDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupSmallDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSmallDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleItalicDemo": {
       name: "ToggleItalicDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleItalicDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleItalicDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleItalicWithTextDemo": {
       name: "ToggleItalicWithTextDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicWithTextDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleLargeDemo": {
       name: "ToggleLargeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleLargeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleLargeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleSmallDemo": {
       name: "ToggleSmallDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleSmallDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleSmallDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TooltipDemo": {
       name: "TooltipDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","tooltip"],
-      component: () => import("../src/lib/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TooltipDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TooltipDemo.vue",
+        type: "registry:example",
+        target: "TooltipDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyBlockquote": {
       name: "TypographyBlockquote",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyBlockquote.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyBlockquote.vue",
+        type: "registry:example",
+        target: "TypographyBlockquote.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyDemo": {
       name: "TypographyDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyDemo.vue",
+        type: "registry:example",
+        target: "TypographyDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH1": {
       name: "TypographyH1",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyH1.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyH1.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH1.vue",
+        type: "registry:example",
+        target: "TypographyH1.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH2": {
       name: "TypographyH2",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyH2.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyH2.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH2.vue",
+        type: "registry:example",
+        target: "TypographyH2.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH3": {
       name: "TypographyH3",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyH3.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyH3.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH3.vue",
+        type: "registry:example",
+        target: "TypographyH3.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH4": {
       name: "TypographyH4",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyH4.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyH4.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH4.vue",
+        type: "registry:example",
+        target: "TypographyH4.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyInlineCode": {
       name: "TypographyInlineCode",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyInlineCode.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyInlineCode.vue",
+        type: "registry:example",
+        target: "TypographyInlineCode.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyLarge": {
       name: "TypographyLarge",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyLarge.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyLarge.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyLarge.vue",
+        type: "registry:example",
+        target: "TypographyLarge.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyLead": {
       name: "TypographyLead",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyLead.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyLead.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyLead.vue",
+        type: "registry:example",
+        target: "TypographyLead.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyList": {
       name: "TypographyList",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyList.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyList.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyList.vue",
+        type: "registry:example",
+        target: "TypographyList.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyMuted": {
       name: "TypographyMuted",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyMuted.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyMuted.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyMuted.vue",
+        type: "registry:example",
+        target: "TypographyMuted.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyP": {
       name: "TypographyP",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyP.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyP.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyP.vue",
+        type: "registry:example",
+        target: "TypographyP.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographySmall": {
       name: "TypographySmall",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographySmall.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographySmall.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographySmall.vue",
+        type: "registry:example",
+        target: "TypographySmall.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyTable": {
       name: "TypographyTable",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyTable.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyTable.vue",
+        type: "registry:example",
+        target: "TypographyTable.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VCalendarDemo": {
       name: "VCalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["v-calendar"],
-      component: () => import("../src/lib/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VCalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VCalendarDemo.vue",
+        type: "registry:example",
+        target: "VCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VDatePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerDemo.vue",
+        type: "registry:example",
+        target: "VDatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VDatePickerForm.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: "VDatePickerForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","select","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VDatePickerWithPresets.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "VDatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VDatePickerWithRange.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: "VDatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VDateTimePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: "VDateTimePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/VRangePickerWithSlot.vue"],
-    },
-    "ActivityGoal": {
-      name: "ActivityGoal",
-      type: "components:example",
+      files: [{
+        path: "registry/new-york/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: "VRangePickerWithSlot.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/new-york/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/new-york/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/new-york/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/new-york/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/new-york/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogCancel.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogContent.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogContent.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogDescription.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogDescription.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogFooter.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogFooter.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogHeader.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogHeader.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogTitle.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTitle.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTrigger.vue"
+      },{
+        path: "registry/new-york/ui/alert-dialog/index.ts",
+        type: "registry:ui",
+        target: "alert-dialog/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/aspect-ratio/AspectRatio.vue",
+        type: "registry:ui",
+        target: "aspect-ratio/AspectRatio.vue"
+      },{
+        path: "registry/new-york/ui/aspect-ratio/index.ts",
+        type: "registry:ui",
+        target: "aspect-ratio/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "auto-form": {
+      name: "auto-form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      files: [{
+        path: "registry/new-york/ui/auto-form/AutoForm.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoForm.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormField.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormField.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldArray.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldArray.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldBoolean.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldDate.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldDate.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldEnum.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldEnum.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldFile.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldFile.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldInput.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldInput.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldNumber.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldNumber.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormFieldObject.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldObject.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/AutoFormLabel.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormLabel.vue"
+      },{
+        path: "registry/new-york/ui/auto-form/constant.ts",
+        type: "registry:ui",
+        target: "auto-form/constant.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/dependencies.ts",
+        type: "registry:ui",
+        target: "auto-form/dependencies.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/index.ts",
+        type: "registry:ui",
+        target: "auto-form/index.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/interface.ts",
+        type: "registry:ui",
+        target: "auto-form/interface.ts"
+      },{
+        path: "registry/new-york/ui/auto-form/utils.ts",
+        type: "registry:ui",
+        target: "auto-form/utils.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "avatar": {
+      name: "avatar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/avatar/Avatar.vue",
+        type: "registry:ui",
+        target: "avatar/Avatar.vue"
+      },{
+        path: "registry/new-york/ui/avatar/AvatarFallback.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarFallback.vue"
+      },{
+        path: "registry/new-york/ui/avatar/AvatarImage.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarImage.vue"
+      },{
+        path: "registry/new-york/ui/avatar/index.ts",
+        type: "registry:ui",
+        target: "avatar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "badge": {
+      name: "badge",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/badge/Badge.vue",
+        type: "registry:ui",
+        target: "badge/Badge.vue"
+      },{
+        path: "registry/new-york/ui/badge/index.ts",
+        type: "registry:ui",
+        target: "badge/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "breadcrumb": {
+      name: "breadcrumb",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/breadcrumb/Breadcrumb.vue",
+        type: "registry:ui",
+        target: "breadcrumb/Breadcrumb.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbEllipsis.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbItem.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbItem.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbLink.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbLink.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbList.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbList.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbPage.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbPage.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbSeparator.vue"
+      },{
+        path: "registry/new-york/ui/breadcrumb/index.ts",
+        type: "registry:ui",
+        target: "breadcrumb/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "button": {
+      name: "button",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/button/Button.vue",
+        type: "registry:ui",
+        target: "button/Button.vue"
+      },{
+        path: "registry/new-york/ui/button/index.ts",
+        type: "registry:ui",
+        target: "button/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "calendar": {
+      name: "calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "calendar/Calendar.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCell.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCellTrigger.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGrid.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGrid.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridBody.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridBody.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridHead.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridHead.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarGridRow.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridRow.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeadCell.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeader.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeader.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarHeading.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeading.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarNextButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarNextButton.vue"
+      },{
+        path: "registry/new-york/ui/calendar/CalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarPrevButton.vue"
+      },{
+        path: "registry/new-york/ui/calendar/index.ts",
+        type: "registry:ui",
+        target: "calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "card": {
+      name: "card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/card/Card.vue",
+        type: "registry:ui",
+        target: "card/Card.vue"
+      },{
+        path: "registry/new-york/ui/card/CardContent.vue",
+        type: "registry:ui",
+        target: "card/CardContent.vue"
+      },{
+        path: "registry/new-york/ui/card/CardDescription.vue",
+        type: "registry:ui",
+        target: "card/CardDescription.vue"
+      },{
+        path: "registry/new-york/ui/card/CardFooter.vue",
+        type: "registry:ui",
+        target: "card/CardFooter.vue"
+      },{
+        path: "registry/new-york/ui/card/CardHeader.vue",
+        type: "registry:ui",
+        target: "card/CardHeader.vue"
+      },{
+        path: "registry/new-york/ui/card/CardTitle.vue",
+        type: "registry:ui",
+        target: "card/CardTitle.vue"
+      },{
+        path: "registry/new-york/ui/card/index.ts",
+        type: "registry:ui",
+        target: "card/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "carousel": {
+      name: "carousel",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/carousel/Carousel.vue",
+        type: "registry:ui",
+        target: "carousel/Carousel.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselContent.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselContent.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselItem.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselItem.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselNext.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselNext.vue"
+      },{
+        path: "registry/new-york/ui/carousel/CarouselPrevious.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselPrevious.vue"
+      },{
+        path: "registry/new-york/ui/carousel/index.ts",
+        type: "registry:ui",
+        target: "carousel/index.ts"
+      },{
+        path: "registry/new-york/ui/carousel/interface.ts",
+        type: "registry:ui",
+        target: "carousel/interface.ts"
+      },{
+        path: "registry/new-york/ui/carousel/useCarousel.ts",
+        type: "registry:ui",
+        target: "carousel/useCarousel.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart": {
+      name: "chart",
+      description: "",
+      type: "registry:ui",
       registryDependencies: ["button","card"],
-      component: () => import("../src/lib/registry/default/example/Cards/ActivityGoal.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/ActivityGoal.vue"],
-    },
-    "DataTable": {
-      name: "DataTable",
-      type: "components:example",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/Cards/DataTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/DataTable.vue"],
-    },
-    "Metric": {
-      name: "Metric",
-      type: "components:example",
-      registryDependencies: ["card"],
-      component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
-    },
-    "Authentication01": {
-      name: "Authentication01",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/default/block/Authentication01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Authentication01.vue"],
-    },
-    "Authentication02": {
-      name: "Authentication02",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/default/block/Authentication02.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Authentication02.vue"],
-    },
-    "Authentication03": {
-      name: "Authentication03",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/default/block/Authentication03.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Authentication03.vue"],
-    },
-    "Authentication04": {
-      name: "Authentication04",
-      type: "components:block",
-      registryDependencies: ["button","input","label"],
-      component: () => import("../src/lib/registry/default/block/Authentication04.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Authentication04.vue"],
-    },
-    "Dashboard01": {
-      name: "Dashboard01",
-      type: "components:block",
-      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
-      component: () => import("../src/lib/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard01.vue"],
-    },
-    "Dashboard02": {
-      name: "Dashboard02",
-      type: "components:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
-      component: () => import("../src/lib/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard02.vue"],
-    },
-    "Dashboard03": {
-      name: "Dashboard03",
-      type: "components:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
-      component: () => import("../src/lib/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard03.vue"],
-    },
-    "Dashboard04": {
-      name: "Dashboard04",
-      type: "components:block",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
-      component: () => import("../src/lib/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard04.vue"],
-    },
-    "Dashboard05": {
-      name: "Dashboard05",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      component: () => import("../src/lib/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard05.vue"],
-    },
-    "Dashboard06": {
-      name: "Dashboard06",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
-      component: () => import("../src/lib/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard06.vue"],
-    },
-    "Dashboard07": {
-      name: "Dashboard07",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
-      component: () => import("../src/lib/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Dashboard07.vue"],
-    },
-    "Sidebar01": {
-      name: "Sidebar01",
-      type: "components:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
-      component: () => import("../src/lib/registry/default/block/Sidebar01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Sidebar01.vue"],
-    },
-    "Sidebar07": {
-      name: "Sidebar07",
-      type: "components:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
-      component: () => import("../src/lib/registry/default/block/Sidebar07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Sidebar07.vue"],
-    },
-  },  "new-york": {
+      files: [{
+        path: "registry/new-york/ui/chart/ChartCrosshair.vue",
+        type: "registry:ui",
+        target: "chart/ChartCrosshair.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartLegend.vue",
+        type: "registry:ui",
+        target: "chart/ChartLegend.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartSingleTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartSingleTooltip.vue"
+      },{
+        path: "registry/new-york/ui/chart/ChartTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartTooltip.vue"
+      },{
+        path: "registry/new-york/ui/chart/index.ts",
+        type: "registry:ui",
+        target: "chart/index.ts"
+      },{
+        path: "registry/new-york/ui/chart/interface.ts",
+        type: "registry:ui",
+        target: "chart/interface.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-area": {
+      name: "chart-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-area/AreaChart.vue",
+        type: "registry:ui",
+        target: "chart-area/AreaChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-area/index.ts",
+        type: "registry:ui",
+        target: "chart-area/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-bar": {
+      name: "chart-bar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-bar/BarChart.vue",
+        type: "registry:ui",
+        target: "chart-bar/BarChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-bar/index.ts",
+        type: "registry:ui",
+        target: "chart-bar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-donut": {
+      name: "chart-donut",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-donut/DonutChart.vue",
+        type: "registry:ui",
+        target: "chart-donut/DonutChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-donut/index.ts",
+        type: "registry:ui",
+        target: "chart-donut/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-line": {
+      name: "chart-line",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/new-york/ui/chart-line/LineChart.vue",
+        type: "registry:ui",
+        target: "chart-line/LineChart.vue"
+      },{
+        path: "registry/new-york/ui/chart-line/index.ts",
+        type: "registry:ui",
+        target: "chart-line/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "checkbox": {
+      name: "checkbox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/checkbox/Checkbox.vue",
+        type: "registry:ui",
+        target: "checkbox/Checkbox.vue"
+      },{
+        path: "registry/new-york/ui/checkbox/index.ts",
+        type: "registry:ui",
+        target: "checkbox/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "collapsible": {
+      name: "collapsible",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/collapsible/Collapsible.vue",
+        type: "registry:ui",
+        target: "collapsible/Collapsible.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/CollapsibleContent.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleContent.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/CollapsibleTrigger.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleTrigger.vue"
+      },{
+        path: "registry/new-york/ui/collapsible/index.ts",
+        type: "registry:ui",
+        target: "collapsible/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "command": {
+      name: "command",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","dialog"],
+      files: [{
+        path: "registry/new-york/ui/command/Command.vue",
+        type: "registry:ui",
+        target: "command/Command.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandDialog.vue",
+        type: "registry:ui",
+        target: "command/CommandDialog.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandEmpty.vue",
+        type: "registry:ui",
+        target: "command/CommandEmpty.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandGroup.vue",
+        type: "registry:ui",
+        target: "command/CommandGroup.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandInput.vue",
+        type: "registry:ui",
+        target: "command/CommandInput.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandItem.vue",
+        type: "registry:ui",
+        target: "command/CommandItem.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandList.vue",
+        type: "registry:ui",
+        target: "command/CommandList.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandSeparator.vue",
+        type: "registry:ui",
+        target: "command/CommandSeparator.vue"
+      },{
+        path: "registry/new-york/ui/command/CommandShortcut.vue",
+        type: "registry:ui",
+        target: "command/CommandShortcut.vue"
+      },{
+        path: "registry/new-york/ui/command/index.ts",
+        type: "registry:ui",
+        target: "command/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/context-menu/ContextMenu.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenu.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuGroup.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuLabel.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuLabel.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuPortal.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuPortal.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSeparator.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSeparator.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuShortcut.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuShortcut.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSub.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSubContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubContent.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/ContextMenuTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/context-menu/index.ts",
+        type: "registry:ui",
+        target: "context-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dialog": {
+      name: "dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/dialog/Dialog.vue",
+        type: "registry:ui",
+        target: "dialog/Dialog.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogClose.vue",
+        type: "registry:ui",
+        target: "dialog/DialogClose.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogContent.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogDescription.vue",
+        type: "registry:ui",
+        target: "dialog/DialogDescription.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogFooter.vue",
+        type: "registry:ui",
+        target: "dialog/DialogFooter.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogHeader.vue",
+        type: "registry:ui",
+        target: "dialog/DialogHeader.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogScrollContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogScrollContent.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogTitle.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTitle.vue"
+      },{
+        path: "registry/new-york/ui/dialog/DialogTrigger.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dialog/index.ts",
+        type: "registry:ui",
+        target: "dialog/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "drawer": {
+      name: "drawer",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/drawer/Drawer.vue",
+        type: "registry:ui",
+        target: "drawer/Drawer.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerContent.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerContent.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerDescription.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerDescription.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerFooter.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerFooter.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerHeader.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerHeader.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerOverlay.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerOverlay.vue"
+      },{
+        path: "registry/new-york/ui/drawer/DrawerTitle.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerTitle.vue"
+      },{
+        path: "registry/new-york/ui/drawer/index.ts",
+        type: "registry:ui",
+        target: "drawer/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenu.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenu.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuGroup.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuLabel.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSeparator.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuShortcut.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubContent.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/dropdown-menu/index.ts",
+        type: "registry:ui",
+        target: "dropdown-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "form": {
+      name: "form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","label"],
+      files: [{
+        path: "registry/new-york/ui/form/FormControl.vue",
+        type: "registry:ui",
+        target: "form/FormControl.vue"
+      },{
+        path: "registry/new-york/ui/form/FormDescription.vue",
+        type: "registry:ui",
+        target: "form/FormDescription.vue"
+      },{
+        path: "registry/new-york/ui/form/FormItem.vue",
+        type: "registry:ui",
+        target: "form/FormItem.vue"
+      },{
+        path: "registry/new-york/ui/form/FormLabel.vue",
+        type: "registry:ui",
+        target: "form/FormLabel.vue"
+      },{
+        path: "registry/new-york/ui/form/FormMessage.vue",
+        type: "registry:ui",
+        target: "form/FormMessage.vue"
+      },{
+        path: "registry/new-york/ui/form/index.ts",
+        type: "registry:ui",
+        target: "form/index.ts"
+      },{
+        path: "registry/new-york/ui/form/injectionKeys.ts",
+        type: "registry:ui",
+        target: "form/injectionKeys.ts"
+      },{
+        path: "registry/new-york/ui/form/useFormField.ts",
+        type: "registry:ui",
+        target: "form/useFormField.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "hover-card": {
+      name: "hover-card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/hover-card/HoverCard.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCard.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/HoverCardContent.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardContent.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/HoverCardTrigger.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardTrigger.vue"
+      },{
+        path: "registry/new-york/ui/hover-card/index.ts",
+        type: "registry:ui",
+        target: "hover-card/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "input": {
+      name: "input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/input/Input.vue",
+        type: "registry:ui",
+        target: "input/Input.vue"
+      },{
+        path: "registry/new-york/ui/input/index.ts",
+        type: "registry:ui",
+        target: "input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "label": {
+      name: "label",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/label/Label.vue",
+        type: "registry:ui",
+        target: "label/Label.vue"
+      },{
+        path: "registry/new-york/ui/label/index.ts",
+        type: "registry:ui",
+        target: "label/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "menubar": {
+      name: "menubar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/menubar/Menubar.vue",
+        type: "registry:ui",
+        target: "menubar/Menubar.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarCheckboxItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarCheckboxItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarContent.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarGroup.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarLabel.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarLabel.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarMenu.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarMenu.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarRadioGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarRadioItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioItem.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSeparator.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSeparator.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarShortcut.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarShortcut.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSub.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSub.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSubContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubContent.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarSubTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubTrigger.vue"
+      },{
+        path: "registry/new-york/ui/menubar/MenubarTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarTrigger.vue"
+      },{
+        path: "registry/new-york/ui/menubar/index.ts",
+        type: "registry:ui",
+        target: "menubar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenu.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenu.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuContent.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuContent.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuIndicator.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuItem.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuLink.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuLink.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuList.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuList.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuTrigger.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuViewport.vue"
+      },{
+        path: "registry/new-york/ui/navigation-menu/index.ts",
+        type: "registry:ui",
+        target: "navigation-menu/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "number-field": {
+      name: "number-field",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/number-field/NumberField.vue",
+        type: "registry:ui",
+        target: "number-field/NumberField.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldContent.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldContent.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldDecrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldDecrement.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldIncrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldIncrement.vue"
+      },{
+        path: "registry/new-york/ui/number-field/NumberFieldInput.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldInput.vue"
+      },{
+        path: "registry/new-york/ui/number-field/index.ts",
+        type: "registry:ui",
+        target: "number-field/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pagination": {
+      name: "pagination",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/pagination/PaginationEllipsis.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationEllipsis.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationFirst.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationFirst.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationLast.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationLast.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationNext.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationNext.vue"
+      },{
+        path: "registry/new-york/ui/pagination/PaginationPrev.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationPrev.vue"
+      },{
+        path: "registry/new-york/ui/pagination/index.ts",
+        type: "registry:ui",
+        target: "pagination/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pin-input": {
+      name: "pin-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/pin-input/PinInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInput.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputGroup.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputGroup.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputInput.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/PinInputSeparator.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputSeparator.vue"
+      },{
+        path: "registry/new-york/ui/pin-input/index.ts",
+        type: "registry:ui",
+        target: "pin-input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "popover": {
+      name: "popover",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/popover/Popover.vue",
+        type: "registry:ui",
+        target: "popover/Popover.vue"
+      },{
+        path: "registry/new-york/ui/popover/PopoverContent.vue",
+        type: "registry:ui",
+        target: "popover/PopoverContent.vue"
+      },{
+        path: "registry/new-york/ui/popover/PopoverTrigger.vue",
+        type: "registry:ui",
+        target: "popover/PopoverTrigger.vue"
+      },{
+        path: "registry/new-york/ui/popover/index.ts",
+        type: "registry:ui",
+        target: "popover/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "progress": {
+      name: "progress",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/progress/Progress.vue",
+        type: "registry:ui",
+        target: "progress/Progress.vue"
+      },{
+        path: "registry/new-york/ui/progress/index.ts",
+        type: "registry:ui",
+        target: "progress/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "radio-group": {
+      name: "radio-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/radio-group/RadioGroup.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroup.vue"
+      },{
+        path: "registry/new-york/ui/radio-group/RadioGroupItem.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroupItem.vue"
+      },{
+        path: "registry/new-york/ui/radio-group/index.ts",
+        type: "registry:ui",
+        target: "radio-group/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "range-calendar": {
+      name: "range-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/new-york/ui/range-calendar/RangeCalendar.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendar.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCell.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCellTrigger.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGrid.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGrid.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridBody.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridHead.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridRow.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeadCell.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeader.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeader.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarHeading.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeading.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarNextButton.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarPrevButton.vue"
+      },{
+        path: "registry/new-york/ui/range-calendar/index.ts",
+        type: "registry:ui",
+        target: "range-calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "resizable": {
+      name: "resizable",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/resizable/ResizableHandle.vue",
+        type: "registry:ui",
+        target: "resizable/ResizableHandle.vue"
+      },{
+        path: "registry/new-york/ui/resizable/ResizablePanelGroup.vue",
+        type: "registry:ui",
+        target: "resizable/ResizablePanelGroup.vue"
+      },{
+        path: "registry/new-york/ui/resizable/index.ts",
+        type: "registry:ui",
+        target: "resizable/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/scroll-area/ScrollArea.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollArea.vue"
+      },{
+        path: "registry/new-york/ui/scroll-area/ScrollBar.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollBar.vue"
+      },{
+        path: "registry/new-york/ui/scroll-area/index.ts",
+        type: "registry:ui",
+        target: "scroll-area/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "select": {
+      name: "select",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/select/Select.vue",
+        type: "registry:ui",
+        target: "select/Select.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectContent.vue",
+        type: "registry:ui",
+        target: "select/SelectContent.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectGroup.vue",
+        type: "registry:ui",
+        target: "select/SelectGroup.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectItem.vue",
+        type: "registry:ui",
+        target: "select/SelectItem.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectItemText.vue",
+        type: "registry:ui",
+        target: "select/SelectItemText.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectLabel.vue",
+        type: "registry:ui",
+        target: "select/SelectLabel.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectScrollDownButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollDownButton.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectScrollUpButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollUpButton.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectSeparator.vue",
+        type: "registry:ui",
+        target: "select/SelectSeparator.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectTrigger.vue",
+        type: "registry:ui",
+        target: "select/SelectTrigger.vue"
+      },{
+        path: "registry/new-york/ui/select/SelectValue.vue",
+        type: "registry:ui",
+        target: "select/SelectValue.vue"
+      },{
+        path: "registry/new-york/ui/select/index.ts",
+        type: "registry:ui",
+        target: "select/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "separator": {
+      name: "separator",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/separator/Separator.vue",
+        type: "registry:ui",
+        target: "separator/Separator.vue"
+      },{
+        path: "registry/new-york/ui/separator/index.ts",
+        type: "registry:ui",
+        target: "separator/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sheet": {
+      name: "sheet",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/sheet/Sheet.vue",
+        type: "registry:ui",
+        target: "sheet/Sheet.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetClose.vue",
+        type: "registry:ui",
+        target: "sheet/SheetClose.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetContent.vue",
+        type: "registry:ui",
+        target: "sheet/SheetContent.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetDescription.vue",
+        type: "registry:ui",
+        target: "sheet/SheetDescription.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetFooter.vue",
+        type: "registry:ui",
+        target: "sheet/SheetFooter.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetHeader.vue",
+        type: "registry:ui",
+        target: "sheet/SheetHeader.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetTitle.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTitle.vue"
+      },{
+        path: "registry/new-york/ui/sheet/SheetTrigger.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTrigger.vue"
+      },{
+        path: "registry/new-york/ui/sheet/index.ts",
+        type: "registry:ui",
+        target: "sheet/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      files: [{
+        path: "registry/new-york/ui/sidebar/Sidebar.vue",
+        type: "registry:ui",
+        target: "sidebar/Sidebar.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarContent.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarFooter.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarFooter.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroup.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroup.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupAction.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupContent.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarGroupLabel.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupLabel.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarHeader.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarHeader.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarInput.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInput.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarInset.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInset.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenu.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenu.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuAction.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuBadge.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuBadge.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButtonChild.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuItem.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSkeleton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSub.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSub.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSubButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubButton.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarMenuSubItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubItem.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarProvider.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarProvider.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarRail.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarRail.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarSeparator.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarSeparator.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/SidebarTrigger.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarTrigger.vue"
+      },{
+        path: "registry/new-york/ui/sidebar/index.ts",
+        type: "registry:ui",
+        target: "sidebar/index.ts"
+      },{
+        path: "registry/new-york/ui/sidebar/utils.ts",
+        type: "registry:ui",
+        target: "sidebar/utils.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "skeleton": {
+      name: "skeleton",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/skeleton/Skeleton.vue",
+        type: "registry:ui",
+        target: "skeleton/Skeleton.vue"
+      },{
+        path: "registry/new-york/ui/skeleton/index.ts",
+        type: "registry:ui",
+        target: "skeleton/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "slider": {
+      name: "slider",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/slider/Slider.vue",
+        type: "registry:ui",
+        target: "slider/Slider.vue"
+      },{
+        path: "registry/new-york/ui/slider/index.ts",
+        type: "registry:ui",
+        target: "slider/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sonner": {
+      name: "sonner",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/new-york/ui/sonner/Sonner.vue",
+        type: "registry:ui",
+        target: "sonner/Sonner.vue"
+      },{
+        path: "registry/new-york/ui/sonner/index.ts",
+        type: "registry:ui",
+        target: "sonner/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "stepper": {
+      name: "stepper",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/stepper/Stepper.vue",
+        type: "registry:ui",
+        target: "stepper/Stepper.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperDescription.vue",
+        type: "registry:ui",
+        target: "stepper/StepperDescription.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperIndicator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperIndicator.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperItem.vue",
+        type: "registry:ui",
+        target: "stepper/StepperItem.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperSeparator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperSeparator.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperTitle.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTitle.vue"
+      },{
+        path: "registry/new-york/ui/stepper/StepperTrigger.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTrigger.vue"
+      },{
+        path: "registry/new-york/ui/stepper/index.ts",
+        type: "registry:ui",
+        target: "stepper/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "switch": {
+      name: "switch",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/switch/Switch.vue",
+        type: "registry:ui",
+        target: "switch/Switch.vue"
+      },{
+        path: "registry/new-york/ui/switch/index.ts",
+        type: "registry:ui",
+        target: "switch/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "table": {
+      name: "table",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/table/Table.vue",
+        type: "registry:ui",
+        target: "table/Table.vue"
+      },{
+        path: "registry/new-york/ui/table/TableBody.vue",
+        type: "registry:ui",
+        target: "table/TableBody.vue"
+      },{
+        path: "registry/new-york/ui/table/TableCaption.vue",
+        type: "registry:ui",
+        target: "table/TableCaption.vue"
+      },{
+        path: "registry/new-york/ui/table/TableCell.vue",
+        type: "registry:ui",
+        target: "table/TableCell.vue"
+      },{
+        path: "registry/new-york/ui/table/TableEmpty.vue",
+        type: "registry:ui",
+        target: "table/TableEmpty.vue"
+      },{
+        path: "registry/new-york/ui/table/TableFooter.vue",
+        type: "registry:ui",
+        target: "table/TableFooter.vue"
+      },{
+        path: "registry/new-york/ui/table/TableHead.vue",
+        type: "registry:ui",
+        target: "table/TableHead.vue"
+      },{
+        path: "registry/new-york/ui/table/TableHeader.vue",
+        type: "registry:ui",
+        target: "table/TableHeader.vue"
+      },{
+        path: "registry/new-york/ui/table/TableRow.vue",
+        type: "registry:ui",
+        target: "table/TableRow.vue"
+      },{
+        path: "registry/new-york/ui/table/index.ts",
+        type: "registry:ui",
+        target: "table/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tabs": {
+      name: "tabs",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tabs/Tabs.vue",
+        type: "registry:ui",
+        target: "tabs/Tabs.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsContent.vue",
+        type: "registry:ui",
+        target: "tabs/TabsContent.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsList.vue",
+        type: "registry:ui",
+        target: "tabs/TabsList.vue"
+      },{
+        path: "registry/new-york/ui/tabs/TabsTrigger.vue",
+        type: "registry:ui",
+        target: "tabs/TabsTrigger.vue"
+      },{
+        path: "registry/new-york/ui/tabs/index.ts",
+        type: "registry:ui",
+        target: "tabs/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tags-input": {
+      name: "tags-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tags-input/TagsInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInput.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputInput.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItem.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItem.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItemDelete.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemDelete.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/TagsInputItemText.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemText.vue"
+      },{
+        path: "registry/new-york/ui/tags-input/index.ts",
+        type: "registry:ui",
+        target: "tags-input/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "textarea": {
+      name: "textarea",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/textarea/Textarea.vue",
+        type: "registry:ui",
+        target: "textarea/Textarea.vue"
+      },{
+        path: "registry/new-york/ui/textarea/index.ts",
+        type: "registry:ui",
+        target: "textarea/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toast": {
+      name: "toast",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/toast/Toast.vue",
+        type: "registry:ui",
+        target: "toast/Toast.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastAction.vue",
+        type: "registry:ui",
+        target: "toast/ToastAction.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastClose.vue",
+        type: "registry:ui",
+        target: "toast/ToastClose.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastDescription.vue",
+        type: "registry:ui",
+        target: "toast/ToastDescription.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastProvider.vue",
+        type: "registry:ui",
+        target: "toast/ToastProvider.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastTitle.vue",
+        type: "registry:ui",
+        target: "toast/ToastTitle.vue"
+      },{
+        path: "registry/new-york/ui/toast/ToastViewport.vue",
+        type: "registry:ui",
+        target: "toast/ToastViewport.vue"
+      },{
+        path: "registry/new-york/ui/toast/Toaster.vue",
+        type: "registry:ui",
+        target: "toast/Toaster.vue"
+      },{
+        path: "registry/new-york/ui/toast/index.ts",
+        type: "registry:ui",
+        target: "toast/index.ts"
+      },{
+        path: "registry/new-york/ui/toast/use-toast.ts",
+        type: "registry:ui",
+        target: "toast/use-toast.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle": {
+      name: "toggle",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/toggle/Toggle.vue",
+        type: "registry:ui",
+        target: "toggle/Toggle.vue"
+      },{
+        path: "registry/new-york/ui/toggle/index.ts",
+        type: "registry:ui",
+        target: "toggle/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toggle","utils"],
+      files: [{
+        path: "registry/new-york/ui/toggle-group/ToggleGroup.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroup.vue"
+      },{
+        path: "registry/new-york/ui/toggle-group/ToggleGroupItem.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroupItem.vue"
+      },{
+        path: "registry/new-york/ui/toggle-group/index.ts",
+        type: "registry:ui",
+        target: "toggle-group/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/tooltip/Tooltip.vue",
+        type: "registry:ui",
+        target: "tooltip/Tooltip.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipContent.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipContent.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipProvider.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipProvider.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/TooltipTrigger.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipTrigger.vue"
+      },{
+        path: "registry/new-york/ui/tooltip/index.ts",
+        type: "registry:ui",
+        target: "tooltip/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "v-calendar": {
+      name: "v-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/new-york/ui/v-calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "v-calendar/Calendar.vue"
+      },{
+        path: "registry/new-york/ui/v-calendar/index.ts",
+        type: "registry:ui",
+        target: "v-calendar/index.ts"
+      }],
+      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "AccordionDemo": {
       name: "AccordionDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["accordion"],
-      component: () => import("../src/lib/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AccordionDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AccordionDemo.vue",
+        type: "registry:example",
+        target: "AccordionDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDemo": {
       name: "AlertDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDemo.vue",
+        type: "registry:example",
+        target: "AlertDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDestructiveDemo": {
       name: "AlertDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDestructiveDemo.vue",
+        type: "registry:example",
+        target: "AlertDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AlertDialogDemo": {
       name: "AlertDialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["alert-dialog","button"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AlertDialogDemo.vue",
+        type: "registry:example",
+        target: "AlertDialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartCustomTooltip": {
       name: "AreaChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "AreaChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartDemo": {
       name: "AreaChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AreaChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartDemo.vue",
+        type: "registry:example",
+        target: "AreaChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AreaChartSparkline": {
       name: "AreaChartSparkline",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-area"],
-      component: () => import("../src/lib/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AreaChartSparkline.vue"],
+      files: [{
+        path: "registry/new-york/example/AreaChartSparkline.vue",
+        type: "registry:example",
+        target: "AreaChartSparkline.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["aspect-ratio"],
-      component: () => import("../src/lib/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AspectRatioDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AspectRatioDemo.vue",
+        type: "registry:example",
+        target: "AspectRatioDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormApi": {
       name: "AutoFormApi",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormApi.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormApi.vue",
+        type: "registry:example",
+        target: "AutoFormApi.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormArray": {
       name: "AutoFormArray",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormArray.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormArray.vue",
+        type: "registry:example",
+        target: "AutoFormArray.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormBasic.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormBasic.vue",
+        type: "registry:example",
+        target: "AutoFormBasic.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormConfirmPassword.vue",
+        type: "registry:example",
+        target: "AutoFormConfirmPassword.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormControlled.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormControlled.vue",
+        type: "registry:example",
+        target: "AutoFormControlled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormDependencies.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormDependencies.vue",
+        type: "registry:example",
+        target: "AutoFormDependencies.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
+        type: "registry:example",
+        target: "AutoFormInputWithoutLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["auto-form","button","toast"],
-      component: () => import("../src/lib/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AutoFormSubObject.vue"],
+      files: [{
+        path: "registry/new-york/example/AutoFormSubObject.vue",
+        type: "registry:example",
+        target: "AutoFormSubObject.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "AvatarDemo": {
       name: "AvatarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar"],
-      component: () => import("../src/lib/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AvatarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/AvatarDemo.vue",
+        type: "registry:example",
+        target: "AvatarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeDemo": {
       name: "BadgeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeDemo.vue",
+        type: "registry:example",
+        target: "BadgeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeDestructiveDemo": {
       name: "BadgeDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeDestructiveDemo.vue",
+        type: "registry:example",
+        target: "BadgeDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeOutlineDemo": {
       name: "BadgeOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeOutlineDemo.vue",
+        type: "registry:example",
+        target: "BadgeOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BadgeSecondaryDemo": {
       name: "BadgeSecondaryDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BadgeSecondaryDemo.vue",
+        type: "registry:example",
+        target: "BadgeSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartCustomTooltip": {
       name: "BarChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BarChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "BarChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartDemo": {
       name: "BarChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BarChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartDemo.vue",
+        type: "registry:example",
+        target: "BarChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartRounded": {
       name: "BarChartRounded",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BarChartRounded.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartRounded.vue",
+        type: "registry:example",
+        target: "BarChartRounded.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BarChartStacked": {
       name: "BarChartStacked",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-bar"],
-      component: () => import("../src/lib/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BarChartStacked.vue"],
+      files: [{
+        path: "registry/new-york/example/BarChartStacked.vue",
+        type: "registry:example",
+        target: "BarChartStacked.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbDropdown": {
       name: "BreadcrumbDropdown",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbDropdown.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbDropdown.vue",
+        type: "registry:example",
+        target: "BreadcrumbDropdown.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbEllipsisDemo": {
       name: "BreadcrumbEllipsisDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbEllipsisDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbLinkDemo": {
       name: "BreadcrumbLinkDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbLinkDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbResponsive": {
       name: "BreadcrumbResponsive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbResponsive.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbResponsive.vue",
+        type: "registry:example",
+        target: "BreadcrumbResponsive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "BreadcrumbSeparatorDemo": {
       name: "BreadcrumbSeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
-      component: () => import("../src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonAsChildDemo": {
       name: "ButtonAsChildDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonAsChildDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonAsChildDemo.vue",
+        type: "registry:example",
+        target: "ButtonAsChildDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonDemo": {
       name: "ButtonDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonDemo.vue",
+        type: "registry:example",
+        target: "ButtonDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonDestructiveDemo": {
       name: "ButtonDestructiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonDestructiveDemo.vue",
+        type: "registry:example",
+        target: "ButtonDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonGhostDemo": {
       name: "ButtonGhostDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonGhostDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonGhostDemo.vue",
+        type: "registry:example",
+        target: "ButtonGhostDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonIconDemo": {
       name: "ButtonIconDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonIconDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonIconDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonLinkDemo": {
       name: "ButtonLinkDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonLinkDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonLinkDemo.vue",
+        type: "registry:example",
+        target: "ButtonLinkDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonLoadingDemo": {
       name: "ButtonLoadingDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonLoadingDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonLoadingDemo.vue",
+        type: "registry:example",
+        target: "ButtonLoadingDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonOutlineDemo": {
       name: "ButtonOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonOutlineDemo.vue",
+        type: "registry:example",
+        target: "ButtonOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonSecondaryDemo": {
       name: "ButtonSecondaryDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonSecondaryDemo.vue",
+        type: "registry:example",
+        target: "ButtonSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ButtonWithIconDemo": {
       name: "ButtonWithIconDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonWithIconDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ButtonWithIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonWithIconDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarDemo": {
       name: "CalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["calendar"],
-      component: () => import("../src/lib/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarDemo.vue",
+        type: "registry:example",
+        target: "CalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarForm": {
       name: "CalendarForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CalendarForm.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarForm.vue",
+        type: "registry:example",
+        target: "CalendarForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CalendarWithSelect": {
       name: "CalendarWithSelect",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["calendar","select","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CalendarWithSelect.vue"],
+      files: [{
+        path: "registry/new-york/example/CalendarWithSelect.vue",
+        type: "registry:example",
+        target: "CalendarWithSelect.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardChat": {
       name: "CardChat",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardChat.vue"],
+      files: [{
+        path: "registry/new-york/example/CardChat.vue",
+        type: "registry:example",
+        target: "CardChat.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardDemo": {
       name: "CardDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","switch","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CardDemo.vue",
+        type: "registry:example",
+        target: "CardDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardFormDemo": {
       name: "CardFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CardFormDemo.vue",
+        type: "registry:example",
+        target: "CardFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardStats": {
       name: "CardStats",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","themes","config"],
-      component: () => import("../src/lib/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardStats.vue"],
+      files: [{
+        path: "registry/new-york/example/CardStats.vue",
+        type: "registry:example",
+        target: "CardStats.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CardWithForm": {
       name: "CardWithForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardWithForm.vue"],
+      files: [{
+        path: "registry/new-york/example/CardWithForm.vue",
+        type: "registry:example",
+        target: "CardWithForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselApi": {
       name: "CarouselApi",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["carousel","card"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselApi.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselApi.vue",
+        type: "registry:example",
+        target: "CarouselApi.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselDemo": {
       name: "CarouselDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselDemo.vue",
+        type: "registry:example",
+        target: "CarouselDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselOrientation.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselOrientation.vue",
+        type: "registry:example",
+        target: "CarouselOrientation.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselPlugin.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselPlugin.vue",
+        type: "registry:example",
+        target: "CarouselPlugin.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselSize": {
       name: "CarouselSize",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselSize.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselSize.vue",
+        type: "registry:example",
+        target: "CarouselSize.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselSpacing.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselSpacing.vue",
+        type: "registry:example",
+        target: "CarouselSpacing.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card","carousel"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselThumbnails.vue"],
+      files: [{
+        path: "registry/new-york/example/CarouselThumbnails.vue",
+        type: "registry:example",
+        target: "CarouselThumbnails.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxDemo": {
       name: "CheckboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxDemo.vue",
+        type: "registry:example",
+        target: "CheckboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxDisabled": {
       name: "CheckboxDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxDisabled.vue",
+        type: "registry:example",
+        target: "CheckboxDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","form","toast"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxFormMultiple.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxFormMultiple.vue",
+        type: "registry:example",
+        target: "CheckboxFormMultiple.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","form","toast"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxFormSingle.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxFormSingle.vue",
+        type: "registry:example",
+        target: "CheckboxFormSingle.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CheckboxWithText": {
       name: "CheckboxWithText",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxWithText.vue"],
+      files: [{
+        path: "registry/new-york/example/CheckboxWithText.vue",
+        type: "registry:example",
+        target: "CheckboxWithText.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CollapsibleDemo": {
       name: "CollapsibleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","collapsible"],
-      component: () => import("../src/lib/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CollapsibleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CollapsibleDemo.vue",
+        type: "registry:example",
+        target: "CollapsibleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxDemo": {
       name: "ComboboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","popover","utils"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxDemo.vue",
+        type: "registry:example",
+        target: "ComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxDropdownMenu": {
       name: "ComboboxDropdownMenu",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxDropdownMenu.vue",
+        type: "registry:example",
+        target: "ComboboxDropdownMenu.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxForm": {
       name: "ComboboxForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxForm.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxForm.vue",
+        type: "registry:example",
+        target: "ComboboxForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","popover","utils"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxPopover.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxPopover.vue",
+        type: "registry:example",
+        target: "ComboboxPopover.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ComboboxResponsive": {
       name: "ComboboxResponsive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","command","drawer","popover"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxResponsive.vue"],
+      files: [{
+        path: "registry/new-york/example/ComboboxResponsive.vue",
+        type: "registry:example",
+        target: "ComboboxResponsive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CommandDemo": {
       name: "CommandDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CommandDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CommandDemo.vue",
+        type: "registry:example",
+        target: "CommandDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CommandDialogDemo": {
       name: "CommandDialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CommandDialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/CommandDialogDemo.vue",
+        type: "registry:example",
+        target: "CommandDialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["context-menu"],
-      component: () => import("../src/lib/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ContextMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ContextMenuDemo.vue",
+        type: "registry:example",
+        target: "ContextMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "CustomChartTooltip": {
       name: "CustomChartTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["card"],
-      component: () => import("../src/lib/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CustomChartTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/CustomChartTooltip.vue",
+        type: "registry:example",
+        target: "CustomChartTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
+        type: "registry:example",
+        target: "DataTableColumnPinningDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableDemo": {
       name: "DataTableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableDemo.vue",
+        type: "registry:example",
+        target: "DataTableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableDemoColumn.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableDemoColumn.vue",
+        type: "registry:example",
+        target: "DataTableDemoColumn.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DataTableReactiveDemo": {
       name: "DataTableReactiveDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableReactiveDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DataTableReactiveDemo.vue",
+        type: "registry:example",
+        target: "DataTableReactiveDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerDemo": {
       name: "DatePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerDemo.vue",
+        type: "registry:example",
+        target: "DatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerForm": {
       name: "DatePickerForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover","toast","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerForm.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerForm.vue",
+        type: "registry:example",
+        target: "DatePickerForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","range-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
+        type: "registry:example",
+        target: "DatePickerWithIndependentMonths.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","select","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerWithPresets.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "DatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","range-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerWithRange.vue"],
+      files: [{
+        path: "registry/new-york/example/DatePickerWithRange.vue",
+        type: "registry:example",
+        target: "DatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogCustomCloseButton": {
       name: "DialogCustomCloseButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogCustomCloseButton.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogCustomCloseButton.vue",
+        type: "registry:example",
+        target: "DialogCustomCloseButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogDemo": {
       name: "DialogDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogDemo.vue",
+        type: "registry:example",
+        target: "DialogDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogForm": {
       name: "DialogForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","form","input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/DialogForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogForm.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogForm.vue",
+        type: "registry:example",
+        target: "DialogForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogScrollBodyDemo": {
       name: "DialogScrollBodyDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogScrollBodyDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogScrollBodyDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollBodyDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DialogScrollOverlayDemo": {
       name: "DialogScrollOverlayDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollOverlayDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartColor": {
       name: "DonutChartColor",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DonutChartColor.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartColor.vue",
+        type: "registry:example",
+        target: "DonutChartColor.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartCustomTooltip": {
       name: "DonutChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "DonutChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartDemo": {
       name: "DonutChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DonutChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartDemo.vue",
+        type: "registry:example",
+        target: "DonutChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DonutChartPie": {
       name: "DonutChartPie",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-donut"],
-      component: () => import("../src/lib/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DonutChartPie.vue"],
+      files: [{
+        path: "registry/new-york/example/DonutChartPie.vue",
+        type: "registry:example",
+        target: "DonutChartPie.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DrawerDemo": {
       name: "DrawerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","drawer"],
-      component: () => import("../src/lib/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DrawerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DrawerDemo.vue",
+        type: "registry:example",
+        target: "DrawerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DrawerDialog": {
       name: "DrawerDialog",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog","drawer","input","label"],
-      component: () => import("../src/lib/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DrawerDialog.vue"],
+      files: [{
+        path: "registry/new-york/example/DrawerDialog.vue",
+        type: "registry:example",
+        target: "DrawerDialog.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuCheckboxes": {
       name: "DropdownMenuCheckboxes",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
+        type: "registry:example",
+        target: "DropdownMenuCheckboxes.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuDemo": {
       name: "DropdownMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DropdownMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuDemo.vue",
+        type: "registry:example",
+        target: "DropdownMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "DropdownMenuRadioGroup": {
       name: "DropdownMenuRadioGroup",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue"],
+      files: [{
+        path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
+        type: "registry:example",
+        target: "DropdownMenuRadioGroup.vue"
+      }],
+      component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "HoverCardDemo": {
       name: "HoverCardDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["avatar","button","hover-card"],
-      component: () => import("../src/lib/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/HoverCardDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/HoverCardDemo.vue",
+        type: "registry:example",
+        target: "HoverCardDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputDemo": {
       name: "InputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/InputDemo.vue",
+        type: "registry:example",
+        target: "InputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputDisabled": {
       name: "InputDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/InputDisabled.vue",
+        type: "registry:example",
+        target: "InputDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputFile": {
       name: "InputFile",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputFile.vue"],
+      files: [{
+        path: "registry/new-york/example/InputFile.vue",
+        type: "registry:example",
+        target: "InputFile.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputForm": {
       name: "InputForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputForm.vue"],
+      files: [{
+        path: "registry/new-york/example/InputForm.vue",
+        type: "registry:example",
+        target: "InputForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputFormAutoAnimate": {
       name: "InputFormAutoAnimate",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputFormAutoAnimate.vue"],
+      files: [{
+        path: "registry/new-york/example/InputFormAutoAnimate.vue",
+        type: "registry:example",
+        target: "InputFormAutoAnimate.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithButton": {
       name: "InputWithButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input"],
-      component: () => import("../src/lib/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputWithButton.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithButton.vue",
+        type: "registry:example",
+        target: "InputWithButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithIcon": {
       name: "InputWithIcon",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputWithIcon.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithIcon.vue",
+        type: "registry:example",
+        target: "InputWithIcon.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "InputWithLabel": {
       name: "InputWithLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputWithLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/InputWithLabel.vue",
+        type: "registry:example",
+        target: "InputWithLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LabelDemo": {
       name: "LabelDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["checkbox","label"],
-      component: () => import("../src/lib/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/LabelDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/LabelDemo.vue",
+        type: "registry:example",
+        target: "LabelDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartCustomTooltip": {
       name: "LineChartCustomTooltip",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/LineChartCustomTooltip.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "LineChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartDemo": {
       name: "LineChartDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/LineChartDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartDemo.vue",
+        type: "registry:example",
+        target: "LineChartDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "LineChartSparkline": {
       name: "LineChartSparkline",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["chart-line"],
-      component: () => import("../src/lib/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/LineChartSparkline.vue"],
+      files: [{
+        path: "registry/new-york/example/LineChartSparkline.vue",
+        type: "registry:example",
+        target: "LineChartSparkline.vue"
+      }],
+      component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "MenubarDemo": {
       name: "MenubarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["menubar"],
-      component: () => import("../src/lib/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/MenubarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/MenubarDemo.vue",
+        type: "registry:example",
+        target: "MenubarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NavigationMenuDemo": {
       name: "NavigationMenuDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/NavigationMenuDemo.vue",
+        type: "registry:example",
+        target: "NavigationMenuDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldCurrency.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldCurrency.vue",
+        type: "registry:example",
+        target: "NumberFieldCurrency.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldDecimal.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDecimal.vue",
+        type: "registry:example",
+        target: "NumberFieldDecimal.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDemo.vue",
+        type: "registry:example",
+        target: "NumberFieldDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldDisabled.vue",
+        type: "registry:example",
+        target: "NumberFieldDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldForm": {
       name: "NumberFieldForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","number-field","toast"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldForm.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldForm.vue",
+        type: "registry:example",
+        target: "NumberFieldForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","number-field"],
-      component: () => import("../src/lib/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NumberFieldPercentage.vue"],
+      files: [{
+        path: "registry/new-york/example/NumberFieldPercentage.vue",
+        type: "registry:example",
+        target: "NumberFieldPercentage.vue"
+      }],
+      component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PaginationDemo": {
       name: "PaginationDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","pagination"],
-      component: () => import("../src/lib/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PaginationDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PaginationDemo.vue",
+        type: "registry:example",
+        target: "PaginationDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputControlled": {
       name: "PinInputControlled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputControlled.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputControlled.vue",
+        type: "registry:example",
+        target: "PinInputControlled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputDemo": {
       name: "PinInputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputDemo.vue",
+        type: "registry:example",
+        target: "PinInputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputDisabled": {
       name: "PinInputDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputDisabled.vue",
+        type: "registry:example",
+        target: "PinInputDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","pin-input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputFormDemo.vue",
+        type: "registry:example",
+        target: "PinInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PinInputSeparatorDemo": {
       name: "PinInputSeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PinInputSeparatorDemo.vue",
+        type: "registry:example",
+        target: "PinInputSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "PopoverDemo": {
       name: "PopoverDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","popover"],
-      component: () => import("../src/lib/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PopoverDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/PopoverDemo.vue",
+        type: "registry:example",
+        target: "PopoverDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ProgressDemo": {
       name: "ProgressDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["progress"],
-      component: () => import("../src/lib/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ProgressDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ProgressDemo.vue",
+        type: "registry:example",
+        target: "ProgressDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RadioGroupDemo": {
       name: "RadioGroupDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","radio-group"],
-      component: () => import("../src/lib/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RadioGroupDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/RadioGroupDemo.vue",
+        type: "registry:example",
+        target: "RadioGroupDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RadioGroupForm": {
       name: "RadioGroupForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","radio-group","toast"],
-      component: () => import("../src/lib/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RadioGroupForm.vue"],
+      files: [{
+        path: "registry/new-york/example/RadioGroupForm.vue",
+        type: "registry:example",
+        target: "RadioGroupForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "RangeCalendarDemo": {
       name: "RangeCalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["range-calendar"],
-      component: () => import("../src/lib/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RangeCalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/RangeCalendarDemo.vue",
+        type: "registry:example",
+        target: "RangeCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableDemo": {
       name: "ResizableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ResizableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableDemo.vue",
+        type: "registry:example",
+        target: "ResizableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableHandleDemo": {
       name: "ResizableHandleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ResizableHandleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableHandleDemo.vue",
+        type: "registry:example",
+        target: "ResizableHandleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ResizableVerticalDemo": {
       name: "ResizableVerticalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["resizable"],
-      component: () => import("../src/lib/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ResizableVerticalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ResizableVerticalDemo.vue",
+        type: "registry:example",
+        target: "ResizableVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ScrollAreaDemo": {
       name: "ScrollAreaDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["scroll-area","separator"],
-      component: () => import("../src/lib/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ScrollAreaDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ScrollAreaDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ScrollAreaHorizontalDemo": {
       name: "ScrollAreaHorizontalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
-      component: () => import("../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaHorizontalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectDemo": {
       name: "SelectDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SelectDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectDemo.vue",
+        type: "registry:example",
+        target: "SelectDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectForm": {
       name: "SelectForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","select","toast"],
-      component: () => import("../src/lib/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SelectForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectForm.vue",
+        type: "registry:example",
+        target: "SelectForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SelectScrollable": {
       name: "SelectScrollable",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SelectScrollable.vue"],
+      files: [{
+        path: "registry/new-york/example/SelectScrollable.vue",
+        type: "registry:example",
+        target: "SelectScrollable.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SeparatorDemo": {
       name: "SeparatorDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["separator"],
-      component: () => import("../src/lib/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SeparatorDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SeparatorDemo.vue",
+        type: "registry:example",
+        target: "SeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SheetDemo": {
       name: "SheetDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SheetDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SheetDemo.vue",
+        type: "registry:example",
+        target: "SheetDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SheetSideDemo": {
       name: "SheetSideDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SheetSideDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SheetSideDemo.vue",
+        type: "registry:example",
+        target: "SheetSideDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SkeletonCard": {
       name: "SkeletonCard",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SkeletonCard.vue"],
+      files: [{
+        path: "registry/new-york/example/SkeletonCard.vue",
+        type: "registry:example",
+        target: "SkeletonCard.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SkeletonDemo": {
       name: "SkeletonDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SkeletonDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SkeletonDemo.vue",
+        type: "registry:example",
+        target: "SkeletonDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SliderDemo": {
       name: "SliderDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["slider","utils"],
-      component: () => import("../src/lib/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SliderDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SliderDemo.vue",
+        type: "registry:example",
+        target: "SliderDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SliderForm": {
       name: "SliderForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","slider","toast"],
-      component: () => import("../src/lib/registry/new-york/example/SliderForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SliderForm.vue",
+        type: "registry:example",
+        target: "SliderForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SonnerDemo": {
       name: "SonnerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SonnerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SonnerDemo.vue",
+        type: "registry:example",
+        target: "SonnerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SonnerWithDialog": {
       name: "SonnerWithDialog",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","dialog"],
-      component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
+      files: [{
+        path: "registry/new-york/example/SonnerWithDialog.vue",
+        type: "registry:example",
+        target: "SonnerWithDialog.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperDemo": {
       name: "StepperDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["stepper"],
-      component: () => import("../src/lib/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/StepperDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperDemo.vue",
+        type: "registry:example",
+        target: "StepperDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperForm": {
       name: "StepperForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","input","select","stepper","toast"],
-      component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperForm.vue",
+        type: "registry:example",
+        target: "StepperForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperHorizental": {
       name: "StepperHorizental",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","stepper"],
-      component: () => import("../src/lib/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/StepperHorizental.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperHorizental.vue",
+        type: "registry:example",
+        target: "StepperHorizental.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "StepperVertical": {
       name: "StepperVertical",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","stepper"],
-      component: () => import("../src/lib/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/StepperVertical.vue"],
+      files: [{
+        path: "registry/new-york/example/StepperVertical.vue",
+        type: "registry:example",
+        target: "StepperVertical.vue"
+      }],
+      component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SwitchDemo": {
       name: "SwitchDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","switch"],
-      component: () => import("../src/lib/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SwitchDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/SwitchDemo.vue",
+        type: "registry:example",
+        target: "SwitchDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "SwitchForm": {
       name: "SwitchForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","switch","toast"],
-      component: () => import("../src/lib/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SwitchForm.vue"],
+      files: [{
+        path: "registry/new-york/example/SwitchForm.vue",
+        type: "registry:example",
+        target: "SwitchForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TableDemo": {
       name: "TableDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["table"],
-      component: () => import("../src/lib/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TableDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TableDemo.vue",
+        type: "registry:example",
+        target: "TableDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TabsDemo": {
       name: "TabsDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TabsDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TabsDemo.vue",
+        type: "registry:example",
+        target: "TabsDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TabsVerticalDemo": {
       name: "TabsVerticalDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TabsVerticalDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TabsVerticalDemo.vue",
+        type: "registry:example",
+        target: "TabsVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["command","tags-input"],
-      component: () => import("../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputComboboxDemo.vue",
+        type: "registry:example",
+        target: "TagsInputComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputDemo": {
       name: "TagsInputDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["tags-input"],
-      component: () => import("../src/lib/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TagsInputDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputDemo.vue",
+        type: "registry:example",
+        target: "TagsInputDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","tags-input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TagsInputFormDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TagsInputFormDemo.vue",
+        type: "registry:example",
+        target: "TagsInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaDemo": {
       name: "TextareaDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaDemo.vue",
+        type: "registry:example",
+        target: "TextareaDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaDisabled": {
       name: "TextareaDisabled",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaDisabled.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaDisabled.vue",
+        type: "registry:example",
+        target: "TextareaDisabled.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaForm": {
       name: "TextareaForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","textarea","toast"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaForm.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaForm.vue",
+        type: "registry:example",
+        target: "TextareaForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithButton": {
       name: "TextareaWithButton",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaWithButton.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithButton.vue",
+        type: "registry:example",
+        target: "TextareaWithButton.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaWithLabel.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithLabel.vue",
+        type: "registry:example",
+        target: "TextareaWithLabel.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TextareaWithText": {
       name: "TextareaWithText",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["label","textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaWithText.vue"],
+      files: [{
+        path: "registry/new-york/example/TextareaWithText.vue",
+        type: "registry:example",
+        target: "TextareaWithText.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastDemo": {
       name: "ToastDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastDemo.vue",
+        type: "registry:example",
+        target: "ToastDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastDestructive": {
       name: "ToastDestructive",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","toast","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastDestructive.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastDestructive.vue",
+        type: "registry:example",
+        target: "ToastDestructive.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastSimple": {
       name: "ToastSimple",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastSimple.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastSimple.vue",
+        type: "registry:example",
+        target: "ToastSimple.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastWithAction": {
       name: "ToastWithAction",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","toast","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastWithAction.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastWithAction.vue",
+        type: "registry:example",
+        target: "ToastWithAction.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToastWithTitle": {
       name: "ToastWithTitle",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastWithTitle.vue"],
+      files: [{
+        path: "registry/new-york/example/ToastWithTitle.vue",
+        type: "registry:example",
+        target: "ToastWithTitle.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleDemo": {
       name: "ToggleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleDemo.vue",
+        type: "registry:example",
+        target: "ToggleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleDisabledDemo": {
       name: "ToggleDisabledDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleDisabledDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupDemo": {
       name: "ToggleGroupDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupDisabledDemo": {
       name: "ToggleGroupDisabledDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupLargeDemo": {
       name: "ToggleGroupLargeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupLargeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupOutlineDemo": {
       name: "ToggleGroupOutlineDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupSingleDemo": {
       name: "ToggleGroupSingleDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSingleDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleGroupSmallDemo": {
       name: "ToggleGroupSmallDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSmallDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleItalicDemo": {
       name: "ToggleItalicDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleItalicDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleItalicDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleItalicWithTextDemo": {
       name: "ToggleItalicWithTextDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicWithTextDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleLargeDemo": {
       name: "ToggleLargeDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleLargeDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleLargeDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "ToggleSmallDemo": {
       name: "ToggleSmallDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleSmallDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/ToggleSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleSmallDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TooltipDemo": {
       name: "TooltipDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","tooltip"],
-      component: () => import("../src/lib/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TooltipDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TooltipDemo.vue",
+        type: "registry:example",
+        target: "TooltipDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyBlockquote": {
       name: "TypographyBlockquote",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyBlockquote.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyBlockquote.vue",
+        type: "registry:example",
+        target: "TypographyBlockquote.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyDemo": {
       name: "TypographyDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyDemo.vue",
+        type: "registry:example",
+        target: "TypographyDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH1": {
       name: "TypographyH1",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyH1.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH1.vue",
+        type: "registry:example",
+        target: "TypographyH1.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH2": {
       name: "TypographyH2",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyH2.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH2.vue",
+        type: "registry:example",
+        target: "TypographyH2.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH3": {
       name: "TypographyH3",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyH3.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH3.vue",
+        type: "registry:example",
+        target: "TypographyH3.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyH4": {
       name: "TypographyH4",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyH4.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyH4.vue",
+        type: "registry:example",
+        target: "TypographyH4.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyInlineCode": {
       name: "TypographyInlineCode",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyInlineCode.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyInlineCode.vue",
+        type: "registry:example",
+        target: "TypographyInlineCode.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyLarge": {
       name: "TypographyLarge",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyLarge.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyLarge.vue",
+        type: "registry:example",
+        target: "TypographyLarge.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyLead": {
       name: "TypographyLead",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyLead.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyLead.vue",
+        type: "registry:example",
+        target: "TypographyLead.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyList": {
       name: "TypographyList",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyList.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyList.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyList.vue",
+        type: "registry:example",
+        target: "TypographyList.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyMuted": {
       name: "TypographyMuted",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyMuted.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyMuted.vue",
+        type: "registry:example",
+        target: "TypographyMuted.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyP": {
       name: "TypographyP",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyP.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyP.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyP.vue",
+        type: "registry:example",
+        target: "TypographyP.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographySmall": {
       name: "TypographySmall",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographySmall.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographySmall.vue",
+        type: "registry:example",
+        target: "TypographySmall.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "TypographyTable": {
       name: "TypographyTable",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TypographyTable.vue"],
+      files: [{
+        path: "registry/new-york/example/TypographyTable.vue",
+        type: "registry:example",
+        target: "TypographyTable.vue"
+      }],
+      component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VCalendarDemo": {
       name: "VCalendarDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["v-calendar"],
-      component: () => import("../src/lib/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VCalendarDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VCalendarDemo.vue",
+        type: "registry:example",
+        target: "VCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VDatePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerDemo.vue",
+        type: "registry:example",
+        target: "VDatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VDatePickerForm.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: "VDatePickerForm.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","select","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VDatePickerWithPresets.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "VDatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VDatePickerWithRange.vue"],
+      files: [{
+        path: "registry/new-york/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: "VDatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VDateTimePickerDemo.vue"],
+      files: [{
+        path: "registry/new-york/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: "VDateTimePickerDemo.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
-      type: "components:example",
+      description: "",
+      type: "registry:example",
       registryDependencies: ["button","popover","v-calendar","utils"],
-      component: () => import("../src/lib/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/VRangePickerWithSlot.vue"],
-    },
-    "ActivityGoal": {
-      name: "ActivityGoal",
-      type: "components:example",
+      files: [{
+        path: "registry/new-york/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: "VRangePickerWithSlot.vue"
+      }],
+      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/default/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/default/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/default/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/default/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogCancel.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogContent.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogDescription.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogDescription.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogFooter.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogFooter.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogHeader.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogHeader.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogTitle.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTitle.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogTrigger.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTrigger.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/index.ts",
+        type: "registry:ui",
+        target: "alert-dialog/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/aspect-ratio/AspectRatio.vue",
+        type: "registry:ui",
+        target: "aspect-ratio/AspectRatio.vue"
+      },{
+        path: "registry/default/ui/aspect-ratio/index.ts",
+        type: "registry:ui",
+        target: "aspect-ratio/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "auto-form": {
+      name: "auto-form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      files: [{
+        path: "registry/default/ui/auto-form/AutoForm.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoForm.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormField.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormField.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldArray.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldArray.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldBoolean.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldBoolean.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldDate.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldDate.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldEnum.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldEnum.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldFile.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldFile.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldInput.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldInput.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldNumber.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldNumber.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldObject.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldObject.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormLabel.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormLabel.vue"
+      },{
+        path: "registry/default/ui/auto-form/constant.ts",
+        type: "registry:ui",
+        target: "auto-form/constant.ts"
+      },{
+        path: "registry/default/ui/auto-form/dependencies.ts",
+        type: "registry:ui",
+        target: "auto-form/dependencies.ts"
+      },{
+        path: "registry/default/ui/auto-form/index.ts",
+        type: "registry:ui",
+        target: "auto-form/index.ts"
+      },{
+        path: "registry/default/ui/auto-form/interface.ts",
+        type: "registry:ui",
+        target: "auto-form/interface.ts"
+      },{
+        path: "registry/default/ui/auto-form/utils.ts",
+        type: "registry:ui",
+        target: "auto-form/utils.ts"
+      }],
+      component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "avatar": {
+      name: "avatar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/avatar/Avatar.vue",
+        type: "registry:ui",
+        target: "avatar/Avatar.vue"
+      },{
+        path: "registry/default/ui/avatar/AvatarFallback.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarFallback.vue"
+      },{
+        path: "registry/default/ui/avatar/AvatarImage.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarImage.vue"
+      },{
+        path: "registry/default/ui/avatar/index.ts",
+        type: "registry:ui",
+        target: "avatar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "badge": {
+      name: "badge",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/badge/Badge.vue",
+        type: "registry:ui",
+        target: "badge/Badge.vue"
+      },{
+        path: "registry/default/ui/badge/index.ts",
+        type: "registry:ui",
+        target: "badge/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "breadcrumb": {
+      name: "breadcrumb",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/breadcrumb/Breadcrumb.vue",
+        type: "registry:ui",
+        target: "breadcrumb/Breadcrumb.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbEllipsis.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbItem.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbItem.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbLink.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbLink.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbList.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbList.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbPage.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbPage.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbSeparator.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbSeparator.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/index.ts",
+        type: "registry:ui",
+        target: "breadcrumb/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "button": {
+      name: "button",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/button/Button.vue",
+        type: "registry:ui",
+        target: "button/Button.vue"
+      },{
+        path: "registry/default/ui/button/index.ts",
+        type: "registry:ui",
+        target: "button/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "calendar": {
+      name: "calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "calendar/Calendar.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCell.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCellTrigger.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGrid.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGrid.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridBody.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridBody.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridHead.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridHead.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridRow.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridRow.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeadCell.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeader.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeader.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeading.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeading.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarNextButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarNextButton.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarPrevButton.vue"
+      },{
+        path: "registry/default/ui/calendar/index.ts",
+        type: "registry:ui",
+        target: "calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "card": {
+      name: "card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/card/Card.vue",
+        type: "registry:ui",
+        target: "card/Card.vue"
+      },{
+        path: "registry/default/ui/card/CardContent.vue",
+        type: "registry:ui",
+        target: "card/CardContent.vue"
+      },{
+        path: "registry/default/ui/card/CardDescription.vue",
+        type: "registry:ui",
+        target: "card/CardDescription.vue"
+      },{
+        path: "registry/default/ui/card/CardFooter.vue",
+        type: "registry:ui",
+        target: "card/CardFooter.vue"
+      },{
+        path: "registry/default/ui/card/CardHeader.vue",
+        type: "registry:ui",
+        target: "card/CardHeader.vue"
+      },{
+        path: "registry/default/ui/card/CardTitle.vue",
+        type: "registry:ui",
+        target: "card/CardTitle.vue"
+      },{
+        path: "registry/default/ui/card/index.ts",
+        type: "registry:ui",
+        target: "card/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "carousel": {
+      name: "carousel",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/carousel/Carousel.vue",
+        type: "registry:ui",
+        target: "carousel/Carousel.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselContent.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselContent.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselItem.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselItem.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselNext.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselNext.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselPrevious.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselPrevious.vue"
+      },{
+        path: "registry/default/ui/carousel/index.ts",
+        type: "registry:ui",
+        target: "carousel/index.ts"
+      },{
+        path: "registry/default/ui/carousel/interface.ts",
+        type: "registry:ui",
+        target: "carousel/interface.ts"
+      },{
+        path: "registry/default/ui/carousel/useCarousel.ts",
+        type: "registry:ui",
+        target: "carousel/useCarousel.ts"
+      }],
+      component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart": {
+      name: "chart",
+      description: "",
+      type: "registry:ui",
       registryDependencies: ["button","card"],
-      component: () => import("../src/lib/registry/new-york/example/Cards/ActivityGoal.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/Cards/ActivityGoal.vue"],
-    },
-    "DataTable": {
-      name: "DataTable",
-      type: "components:example",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/Cards/DataTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/Cards/DataTable.vue"],
-    },
-    "Metric": {
-      name: "Metric",
-      type: "components:example",
-      registryDependencies: ["card"],
-      component: () => import("../src/lib/registry/new-york/example/Cards/Metric.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/Cards/Metric.vue"],
-    },
-    "Authentication01": {
-      name: "Authentication01",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/new-york/block/Authentication01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Authentication01.vue"],
-    },
-    "Authentication02": {
-      name: "Authentication02",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/new-york/block/Authentication02.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Authentication02.vue"],
-    },
-    "Authentication03": {
-      name: "Authentication03",
-      type: "components:block",
-      registryDependencies: ["button","card","input","label"],
-      component: () => import("../src/lib/registry/new-york/block/Authentication03.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Authentication03.vue"],
-    },
-    "Authentication04": {
-      name: "Authentication04",
-      type: "components:block",
-      registryDependencies: ["button","input","label"],
-      component: () => import("../src/lib/registry/new-york/block/Authentication04.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Authentication04.vue"],
-    },
-    "Dashboard01": {
-      name: "Dashboard01",
-      type: "components:block",
-      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard01.vue"],
-    },
-    "Dashboard02": {
-      name: "Dashboard02",
-      type: "components:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard02.vue"],
-    },
-    "Dashboard03": {
-      name: "Dashboard03",
-      type: "components:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard03.vue"],
-    },
-    "Dashboard04": {
-      name: "Dashboard04",
-      type: "components:block",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard04.vue"],
-    },
-    "Dashboard05": {
-      name: "Dashboard05",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard05.vue"],
-    },
-    "Dashboard06": {
-      name: "Dashboard06",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard06.vue"],
-    },
-    "Dashboard07": {
-      name: "Dashboard07",
-      type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
-      component: () => import("../src/lib/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Dashboard07.vue"],
-    },
-    "Sidebar01": {
-      name: "Sidebar01",
-      type: "components:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
-      component: () => import("../src/lib/registry/new-york/block/Sidebar01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Sidebar01.vue"],
-    },
-    "Sidebar07": {
-      name: "Sidebar07",
-      type: "components:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
-      component: () => import("../src/lib/registry/new-york/block/Sidebar07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Sidebar07.vue"],
+      files: [{
+        path: "registry/default/ui/chart/ChartCrosshair.vue",
+        type: "registry:ui",
+        target: "chart/ChartCrosshair.vue"
+      },{
+        path: "registry/default/ui/chart/ChartLegend.vue",
+        type: "registry:ui",
+        target: "chart/ChartLegend.vue"
+      },{
+        path: "registry/default/ui/chart/ChartSingleTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartSingleTooltip.vue"
+      },{
+        path: "registry/default/ui/chart/ChartTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartTooltip.vue"
+      },{
+        path: "registry/default/ui/chart/index.ts",
+        type: "registry:ui",
+        target: "chart/index.ts"
+      },{
+        path: "registry/default/ui/chart/interface.ts",
+        type: "registry:ui",
+        target: "chart/interface.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-area": {
+      name: "chart-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-area/AreaChart.vue",
+        type: "registry:ui",
+        target: "chart-area/AreaChart.vue"
+      },{
+        path: "registry/default/ui/chart-area/index.ts",
+        type: "registry:ui",
+        target: "chart-area/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-bar": {
+      name: "chart-bar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-bar/BarChart.vue",
+        type: "registry:ui",
+        target: "chart-bar/BarChart.vue"
+      },{
+        path: "registry/default/ui/chart-bar/index.ts",
+        type: "registry:ui",
+        target: "chart-bar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-donut": {
+      name: "chart-donut",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-donut/DonutChart.vue",
+        type: "registry:ui",
+        target: "chart-donut/DonutChart.vue"
+      },{
+        path: "registry/default/ui/chart-donut/index.ts",
+        type: "registry:ui",
+        target: "chart-donut/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-line": {
+      name: "chart-line",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-line/LineChart.vue",
+        type: "registry:ui",
+        target: "chart-line/LineChart.vue"
+      },{
+        path: "registry/default/ui/chart-line/index.ts",
+        type: "registry:ui",
+        target: "chart-line/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "checkbox": {
+      name: "checkbox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/checkbox/Checkbox.vue",
+        type: "registry:ui",
+        target: "checkbox/Checkbox.vue"
+      },{
+        path: "registry/default/ui/checkbox/index.ts",
+        type: "registry:ui",
+        target: "checkbox/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "collapsible": {
+      name: "collapsible",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/collapsible/Collapsible.vue",
+        type: "registry:ui",
+        target: "collapsible/Collapsible.vue"
+      },{
+        path: "registry/default/ui/collapsible/CollapsibleContent.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleContent.vue"
+      },{
+        path: "registry/default/ui/collapsible/CollapsibleTrigger.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleTrigger.vue"
+      },{
+        path: "registry/default/ui/collapsible/index.ts",
+        type: "registry:ui",
+        target: "collapsible/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "command": {
+      name: "command",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","dialog"],
+      files: [{
+        path: "registry/default/ui/command/Command.vue",
+        type: "registry:ui",
+        target: "command/Command.vue"
+      },{
+        path: "registry/default/ui/command/CommandDialog.vue",
+        type: "registry:ui",
+        target: "command/CommandDialog.vue"
+      },{
+        path: "registry/default/ui/command/CommandEmpty.vue",
+        type: "registry:ui",
+        target: "command/CommandEmpty.vue"
+      },{
+        path: "registry/default/ui/command/CommandGroup.vue",
+        type: "registry:ui",
+        target: "command/CommandGroup.vue"
+      },{
+        path: "registry/default/ui/command/CommandInput.vue",
+        type: "registry:ui",
+        target: "command/CommandInput.vue"
+      },{
+        path: "registry/default/ui/command/CommandItem.vue",
+        type: "registry:ui",
+        target: "command/CommandItem.vue"
+      },{
+        path: "registry/default/ui/command/CommandList.vue",
+        type: "registry:ui",
+        target: "command/CommandList.vue"
+      },{
+        path: "registry/default/ui/command/CommandSeparator.vue",
+        type: "registry:ui",
+        target: "command/CommandSeparator.vue"
+      },{
+        path: "registry/default/ui/command/CommandShortcut.vue",
+        type: "registry:ui",
+        target: "command/CommandShortcut.vue"
+      },{
+        path: "registry/default/ui/command/index.ts",
+        type: "registry:ui",
+        target: "command/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/context-menu/ContextMenu.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenu.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuContent.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuGroup.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuLabel.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuLabel.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuPortal.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuPortal.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioGroup.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSeparator.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSeparator.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuShortcut.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuShortcut.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSub.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSub.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSubContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubContent.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubTrigger.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/context-menu/index.ts",
+        type: "registry:ui",
+        target: "context-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dialog": {
+      name: "dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/dialog/Dialog.vue",
+        type: "registry:ui",
+        target: "dialog/Dialog.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogClose.vue",
+        type: "registry:ui",
+        target: "dialog/DialogClose.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogContent.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogDescription.vue",
+        type: "registry:ui",
+        target: "dialog/DialogDescription.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogFooter.vue",
+        type: "registry:ui",
+        target: "dialog/DialogFooter.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogHeader.vue",
+        type: "registry:ui",
+        target: "dialog/DialogHeader.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogScrollContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogScrollContent.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogTitle.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTitle.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogTrigger.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTrigger.vue"
+      },{
+        path: "registry/default/ui/dialog/index.ts",
+        type: "registry:ui",
+        target: "dialog/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "drawer": {
+      name: "drawer",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/drawer/Drawer.vue",
+        type: "registry:ui",
+        target: "drawer/Drawer.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerContent.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerContent.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerDescription.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerDescription.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerFooter.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerFooter.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerHeader.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerHeader.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerOverlay.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerOverlay.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerTitle.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerTitle.vue"
+      },{
+        path: "registry/default/ui/drawer/index.ts",
+        type: "registry:ui",
+        target: "drawer/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/dropdown-menu/DropdownMenu.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenu.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuContent.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuGroup.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuLabel.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuLabel.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSeparator.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuShortcut.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSub.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSub.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubContent.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/index.ts",
+        type: "registry:ui",
+        target: "dropdown-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "form": {
+      name: "form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","label"],
+      files: [{
+        path: "registry/default/ui/form/FormControl.vue",
+        type: "registry:ui",
+        target: "form/FormControl.vue"
+      },{
+        path: "registry/default/ui/form/FormDescription.vue",
+        type: "registry:ui",
+        target: "form/FormDescription.vue"
+      },{
+        path: "registry/default/ui/form/FormItem.vue",
+        type: "registry:ui",
+        target: "form/FormItem.vue"
+      },{
+        path: "registry/default/ui/form/FormLabel.vue",
+        type: "registry:ui",
+        target: "form/FormLabel.vue"
+      },{
+        path: "registry/default/ui/form/FormMessage.vue",
+        type: "registry:ui",
+        target: "form/FormMessage.vue"
+      },{
+        path: "registry/default/ui/form/index.ts",
+        type: "registry:ui",
+        target: "form/index.ts"
+      },{
+        path: "registry/default/ui/form/injectionKeys.ts",
+        type: "registry:ui",
+        target: "form/injectionKeys.ts"
+      },{
+        path: "registry/default/ui/form/useFormField.ts",
+        type: "registry:ui",
+        target: "form/useFormField.ts"
+      }],
+      component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "hover-card": {
+      name: "hover-card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/hover-card/HoverCard.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCard.vue"
+      },{
+        path: "registry/default/ui/hover-card/HoverCardContent.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardContent.vue"
+      },{
+        path: "registry/default/ui/hover-card/HoverCardTrigger.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardTrigger.vue"
+      },{
+        path: "registry/default/ui/hover-card/index.ts",
+        type: "registry:ui",
+        target: "hover-card/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "input": {
+      name: "input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/input/Input.vue",
+        type: "registry:ui",
+        target: "input/Input.vue"
+      },{
+        path: "registry/default/ui/input/index.ts",
+        type: "registry:ui",
+        target: "input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "label": {
+      name: "label",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/label/Label.vue",
+        type: "registry:ui",
+        target: "label/Label.vue"
+      },{
+        path: "registry/default/ui/label/index.ts",
+        type: "registry:ui",
+        target: "label/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "menubar": {
+      name: "menubar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/menubar/Menubar.vue",
+        type: "registry:ui",
+        target: "menubar/Menubar.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarCheckboxItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarContent.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarGroup.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarLabel.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarLabel.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarMenu.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarMenu.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarRadioGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioGroup.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarRadioItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSeparator.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSeparator.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarShortcut.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarShortcut.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSub.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSub.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSubContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubContent.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSubTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubTrigger.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarTrigger.vue"
+      },{
+        path: "registry/default/ui/menubar/index.ts",
+        type: "registry:ui",
+        target: "menubar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/navigation-menu/NavigationMenu.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenu.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuContent.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuContent.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuIndicator.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuIndicator.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuItem.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuItem.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuLink.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuLink.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuList.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuList.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuTrigger.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuViewport.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuViewport.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/index.ts",
+        type: "registry:ui",
+        target: "navigation-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "number-field": {
+      name: "number-field",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/number-field/NumberField.vue",
+        type: "registry:ui",
+        target: "number-field/NumberField.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldContent.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldContent.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldDecrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldDecrement.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldIncrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldIncrement.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldInput.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldInput.vue"
+      },{
+        path: "registry/default/ui/number-field/index.ts",
+        type: "registry:ui",
+        target: "number-field/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pagination": {
+      name: "pagination",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/pagination/PaginationEllipsis.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationEllipsis.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationFirst.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationFirst.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationLast.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationLast.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationNext.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationNext.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationPrev.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationPrev.vue"
+      },{
+        path: "registry/default/ui/pagination/index.ts",
+        type: "registry:ui",
+        target: "pagination/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pin-input": {
+      name: "pin-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/pin-input/PinInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInput.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputGroup.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputGroup.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputInput.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputSeparator.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputSeparator.vue"
+      },{
+        path: "registry/default/ui/pin-input/index.ts",
+        type: "registry:ui",
+        target: "pin-input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "popover": {
+      name: "popover",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/popover/Popover.vue",
+        type: "registry:ui",
+        target: "popover/Popover.vue"
+      },{
+        path: "registry/default/ui/popover/PopoverContent.vue",
+        type: "registry:ui",
+        target: "popover/PopoverContent.vue"
+      },{
+        path: "registry/default/ui/popover/PopoverTrigger.vue",
+        type: "registry:ui",
+        target: "popover/PopoverTrigger.vue"
+      },{
+        path: "registry/default/ui/popover/index.ts",
+        type: "registry:ui",
+        target: "popover/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "progress": {
+      name: "progress",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/progress/Progress.vue",
+        type: "registry:ui",
+        target: "progress/Progress.vue"
+      },{
+        path: "registry/default/ui/progress/index.ts",
+        type: "registry:ui",
+        target: "progress/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "radio-group": {
+      name: "radio-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/radio-group/RadioGroup.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroup.vue"
+      },{
+        path: "registry/default/ui/radio-group/RadioGroupItem.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroupItem.vue"
+      },{
+        path: "registry/default/ui/radio-group/index.ts",
+        type: "registry:ui",
+        target: "radio-group/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "range-calendar": {
+      name: "range-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/range-calendar/RangeCalendar.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendar.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCell.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCellTrigger.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGrid.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGrid.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridBody.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridBody.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridHead.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridHead.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridRow.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridRow.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeadCell.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeader.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeader.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeading.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeading.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarNextButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarNextButton.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarPrevButton.vue"
+      },{
+        path: "registry/default/ui/range-calendar/index.ts",
+        type: "registry:ui",
+        target: "range-calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "resizable": {
+      name: "resizable",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/resizable/ResizableHandle.vue",
+        type: "registry:ui",
+        target: "resizable/ResizableHandle.vue"
+      },{
+        path: "registry/default/ui/resizable/ResizablePanelGroup.vue",
+        type: "registry:ui",
+        target: "resizable/ResizablePanelGroup.vue"
+      },{
+        path: "registry/default/ui/resizable/index.ts",
+        type: "registry:ui",
+        target: "resizable/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/scroll-area/ScrollArea.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollArea.vue"
+      },{
+        path: "registry/default/ui/scroll-area/ScrollBar.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollBar.vue"
+      },{
+        path: "registry/default/ui/scroll-area/index.ts",
+        type: "registry:ui",
+        target: "scroll-area/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "select": {
+      name: "select",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/select/Select.vue",
+        type: "registry:ui",
+        target: "select/Select.vue"
+      },{
+        path: "registry/default/ui/select/SelectContent.vue",
+        type: "registry:ui",
+        target: "select/SelectContent.vue"
+      },{
+        path: "registry/default/ui/select/SelectGroup.vue",
+        type: "registry:ui",
+        target: "select/SelectGroup.vue"
+      },{
+        path: "registry/default/ui/select/SelectItem.vue",
+        type: "registry:ui",
+        target: "select/SelectItem.vue"
+      },{
+        path: "registry/default/ui/select/SelectItemText.vue",
+        type: "registry:ui",
+        target: "select/SelectItemText.vue"
+      },{
+        path: "registry/default/ui/select/SelectLabel.vue",
+        type: "registry:ui",
+        target: "select/SelectLabel.vue"
+      },{
+        path: "registry/default/ui/select/SelectScrollDownButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollDownButton.vue"
+      },{
+        path: "registry/default/ui/select/SelectScrollUpButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollUpButton.vue"
+      },{
+        path: "registry/default/ui/select/SelectSeparator.vue",
+        type: "registry:ui",
+        target: "select/SelectSeparator.vue"
+      },{
+        path: "registry/default/ui/select/SelectTrigger.vue",
+        type: "registry:ui",
+        target: "select/SelectTrigger.vue"
+      },{
+        path: "registry/default/ui/select/SelectValue.vue",
+        type: "registry:ui",
+        target: "select/SelectValue.vue"
+      },{
+        path: "registry/default/ui/select/index.ts",
+        type: "registry:ui",
+        target: "select/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "separator": {
+      name: "separator",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/separator/Separator.vue",
+        type: "registry:ui",
+        target: "separator/Separator.vue"
+      },{
+        path: "registry/default/ui/separator/index.ts",
+        type: "registry:ui",
+        target: "separator/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sheet": {
+      name: "sheet",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/sheet/Sheet.vue",
+        type: "registry:ui",
+        target: "sheet/Sheet.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetClose.vue",
+        type: "registry:ui",
+        target: "sheet/SheetClose.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetContent.vue",
+        type: "registry:ui",
+        target: "sheet/SheetContent.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetDescription.vue",
+        type: "registry:ui",
+        target: "sheet/SheetDescription.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetFooter.vue",
+        type: "registry:ui",
+        target: "sheet/SheetFooter.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetHeader.vue",
+        type: "registry:ui",
+        target: "sheet/SheetHeader.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetTitle.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTitle.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetTrigger.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTrigger.vue"
+      },{
+        path: "registry/default/ui/sheet/index.ts",
+        type: "registry:ui",
+        target: "sheet/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      files: [{
+        path: "registry/default/ui/sidebar/Sidebar.vue",
+        type: "registry:ui",
+        target: "sidebar/Sidebar.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarContent.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarFooter.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarFooter.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroup.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroup.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupAction.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupContent.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupLabel.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupLabel.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarHeader.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarHeader.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarInput.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInput.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarInset.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInset.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenu.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenu.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuAction.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuBadge.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuBadge.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuButtonChild.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButtonChild.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuItem.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSkeleton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSkeleton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSub.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSub.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSubButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubButton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSubItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubItem.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarProvider.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarProvider.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarRail.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarRail.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarSeparator.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarSeparator.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarTrigger.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarTrigger.vue"
+      },{
+        path: "registry/default/ui/sidebar/index.ts",
+        type: "registry:ui",
+        target: "sidebar/index.ts"
+      },{
+        path: "registry/default/ui/sidebar/utils.ts",
+        type: "registry:ui",
+        target: "sidebar/utils.ts"
+      }],
+      component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "skeleton": {
+      name: "skeleton",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/skeleton/Skeleton.vue",
+        type: "registry:ui",
+        target: "skeleton/Skeleton.vue"
+      },{
+        path: "registry/default/ui/skeleton/index.ts",
+        type: "registry:ui",
+        target: "skeleton/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "slider": {
+      name: "slider",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/slider/Slider.vue",
+        type: "registry:ui",
+        target: "slider/Slider.vue"
+      },{
+        path: "registry/default/ui/slider/index.ts",
+        type: "registry:ui",
+        target: "slider/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sonner": {
+      name: "sonner",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/sonner/Sonner.vue",
+        type: "registry:ui",
+        target: "sonner/Sonner.vue"
+      },{
+        path: "registry/default/ui/sonner/index.ts",
+        type: "registry:ui",
+        target: "sonner/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "stepper": {
+      name: "stepper",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/stepper/Stepper.vue",
+        type: "registry:ui",
+        target: "stepper/Stepper.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperDescription.vue",
+        type: "registry:ui",
+        target: "stepper/StepperDescription.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperIndicator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperIndicator.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperItem.vue",
+        type: "registry:ui",
+        target: "stepper/StepperItem.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperSeparator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperSeparator.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperTitle.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTitle.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperTrigger.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTrigger.vue"
+      },{
+        path: "registry/default/ui/stepper/index.ts",
+        type: "registry:ui",
+        target: "stepper/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "switch": {
+      name: "switch",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/switch/Switch.vue",
+        type: "registry:ui",
+        target: "switch/Switch.vue"
+      },{
+        path: "registry/default/ui/switch/index.ts",
+        type: "registry:ui",
+        target: "switch/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "table": {
+      name: "table",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/table/Table.vue",
+        type: "registry:ui",
+        target: "table/Table.vue"
+      },{
+        path: "registry/default/ui/table/TableBody.vue",
+        type: "registry:ui",
+        target: "table/TableBody.vue"
+      },{
+        path: "registry/default/ui/table/TableCaption.vue",
+        type: "registry:ui",
+        target: "table/TableCaption.vue"
+      },{
+        path: "registry/default/ui/table/TableCell.vue",
+        type: "registry:ui",
+        target: "table/TableCell.vue"
+      },{
+        path: "registry/default/ui/table/TableEmpty.vue",
+        type: "registry:ui",
+        target: "table/TableEmpty.vue"
+      },{
+        path: "registry/default/ui/table/TableFooter.vue",
+        type: "registry:ui",
+        target: "table/TableFooter.vue"
+      },{
+        path: "registry/default/ui/table/TableHead.vue",
+        type: "registry:ui",
+        target: "table/TableHead.vue"
+      },{
+        path: "registry/default/ui/table/TableHeader.vue",
+        type: "registry:ui",
+        target: "table/TableHeader.vue"
+      },{
+        path: "registry/default/ui/table/TableRow.vue",
+        type: "registry:ui",
+        target: "table/TableRow.vue"
+      },{
+        path: "registry/default/ui/table/index.ts",
+        type: "registry:ui",
+        target: "table/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tabs": {
+      name: "tabs",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tabs/Tabs.vue",
+        type: "registry:ui",
+        target: "tabs/Tabs.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsContent.vue",
+        type: "registry:ui",
+        target: "tabs/TabsContent.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsList.vue",
+        type: "registry:ui",
+        target: "tabs/TabsList.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsTrigger.vue",
+        type: "registry:ui",
+        target: "tabs/TabsTrigger.vue"
+      },{
+        path: "registry/default/ui/tabs/index.ts",
+        type: "registry:ui",
+        target: "tabs/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tags-input": {
+      name: "tags-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tags-input/TagsInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInput.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputInput.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItem.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItem.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItemDelete.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemDelete.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItemText.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemText.vue"
+      },{
+        path: "registry/default/ui/tags-input/index.ts",
+        type: "registry:ui",
+        target: "tags-input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "textarea": {
+      name: "textarea",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/textarea/Textarea.vue",
+        type: "registry:ui",
+        target: "textarea/Textarea.vue"
+      },{
+        path: "registry/default/ui/textarea/index.ts",
+        type: "registry:ui",
+        target: "textarea/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toast": {
+      name: "toast",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/toast/Toast.vue",
+        type: "registry:ui",
+        target: "toast/Toast.vue"
+      },{
+        path: "registry/default/ui/toast/ToastAction.vue",
+        type: "registry:ui",
+        target: "toast/ToastAction.vue"
+      },{
+        path: "registry/default/ui/toast/ToastClose.vue",
+        type: "registry:ui",
+        target: "toast/ToastClose.vue"
+      },{
+        path: "registry/default/ui/toast/ToastDescription.vue",
+        type: "registry:ui",
+        target: "toast/ToastDescription.vue"
+      },{
+        path: "registry/default/ui/toast/ToastProvider.vue",
+        type: "registry:ui",
+        target: "toast/ToastProvider.vue"
+      },{
+        path: "registry/default/ui/toast/ToastTitle.vue",
+        type: "registry:ui",
+        target: "toast/ToastTitle.vue"
+      },{
+        path: "registry/default/ui/toast/ToastViewport.vue",
+        type: "registry:ui",
+        target: "toast/ToastViewport.vue"
+      },{
+        path: "registry/default/ui/toast/Toaster.vue",
+        type: "registry:ui",
+        target: "toast/Toaster.vue"
+      },{
+        path: "registry/default/ui/toast/index.ts",
+        type: "registry:ui",
+        target: "toast/index.ts"
+      },{
+        path: "registry/default/ui/toast/use-toast.ts",
+        type: "registry:ui",
+        target: "toast/use-toast.ts"
+      }],
+      component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle": {
+      name: "toggle",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/toggle/Toggle.vue",
+        type: "registry:ui",
+        target: "toggle/Toggle.vue"
+      },{
+        path: "registry/default/ui/toggle/index.ts",
+        type: "registry:ui",
+        target: "toggle/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toggle","utils"],
+      files: [{
+        path: "registry/default/ui/toggle-group/ToggleGroup.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroup.vue"
+      },{
+        path: "registry/default/ui/toggle-group/ToggleGroupItem.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroupItem.vue"
+      },{
+        path: "registry/default/ui/toggle-group/index.ts",
+        type: "registry:ui",
+        target: "toggle-group/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tooltip/Tooltip.vue",
+        type: "registry:ui",
+        target: "tooltip/Tooltip.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipContent.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipContent.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipProvider.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipProvider.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipTrigger.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipTrigger.vue"
+      },{
+        path: "registry/default/ui/tooltip/index.ts",
+        type: "registry:ui",
+        target: "tooltip/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "v-calendar": {
+      name: "v-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/default/ui/v-calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "v-calendar/Calendar.vue"
+      },{
+        path: "registry/default/ui/v-calendar/index.ts",
+        type: "registry:ui",
+        target: "v-calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AccordionDemo": {
+      name: "AccordionDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["accordion"],
+      files: [{
+        path: "registry/default/example/AccordionDemo.vue",
+        type: "registry:example",
+        target: "AccordionDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDemo": {
+      name: "AlertDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/example/AlertDemo.vue",
+        type: "registry:example",
+        target: "AlertDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDestructiveDemo": {
+      name: "AlertDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/example/AlertDestructiveDemo.vue",
+        type: "registry:example",
+        target: "AlertDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDialogDemo": {
+      name: "AlertDialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert-dialog","button"],
+      files: [{
+        path: "registry/default/example/AlertDialogDemo.vue",
+        type: "registry:example",
+        target: "AlertDialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "AreaChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartDemo": {
+      name: "AreaChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartDemo.vue",
+        type: "registry:example",
+        target: "AreaChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartSparkline.vue",
+        type: "registry:example",
+        target: "AreaChartSparkline.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AspectRatioDemo": {
+      name: "AspectRatioDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["aspect-ratio"],
+      files: [{
+        path: "registry/default/example/AspectRatioDemo.vue",
+        type: "registry:example",
+        target: "AspectRatioDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormApi.vue",
+        type: "registry:example",
+        target: "AutoFormApi.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormArray": {
+      name: "AutoFormArray",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormArray.vue",
+        type: "registry:example",
+        target: "AutoFormArray.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormBasic": {
+      name: "AutoFormBasic",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormBasic.vue",
+        type: "registry:example",
+        target: "AutoFormBasic.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormConfirmPassword": {
+      name: "AutoFormConfirmPassword",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormConfirmPassword.vue",
+        type: "registry:example",
+        target: "AutoFormConfirmPassword.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormControlled": {
+      name: "AutoFormControlled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormControlled.vue",
+        type: "registry:example",
+        target: "AutoFormControlled.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormDependencies": {
+      name: "AutoFormDependencies",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormDependencies.vue",
+        type: "registry:example",
+        target: "AutoFormDependencies.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormInputWithoutLabel": {
+      name: "AutoFormInputWithoutLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormInputWithoutLabel.vue",
+        type: "registry:example",
+        target: "AutoFormInputWithoutLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormSubObject": {
+      name: "AutoFormSubObject",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormSubObject.vue",
+        type: "registry:example",
+        target: "AutoFormSubObject.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AvatarDemo": {
+      name: "AvatarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar"],
+      files: [{
+        path: "registry/default/example/AvatarDemo.vue",
+        type: "registry:example",
+        target: "AvatarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeDemo": {
+      name: "BadgeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeDemo.vue",
+        type: "registry:example",
+        target: "BadgeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeDestructiveDemo": {
+      name: "BadgeDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeDestructiveDemo.vue",
+        type: "registry:example",
+        target: "BadgeDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeOutlineDemo": {
+      name: "BadgeOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeOutlineDemo.vue",
+        type: "registry:example",
+        target: "BadgeOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeSecondaryDemo": {
+      name: "BadgeSecondaryDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeSecondaryDemo.vue",
+        type: "registry:example",
+        target: "BadgeSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "BarChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartDemo": {
+      name: "BarChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartDemo.vue",
+        type: "registry:example",
+        target: "BarChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartRounded.vue",
+        type: "registry:example",
+        target: "BarChartRounded.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartStacked.vue",
+        type: "registry:example",
+        target: "BarChartStacked.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbDemo": {
+      name: "BreadcrumbDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbDropdown": {
+      name: "BreadcrumbDropdown",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbDropdown.vue",
+        type: "registry:example",
+        target: "BreadcrumbDropdown.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbEllipsisDemo": {
+      name: "BreadcrumbEllipsisDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbEllipsisDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbLinkDemo": {
+      name: "BreadcrumbLinkDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbLinkDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbLinkDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbResponsive": {
+      name: "BreadcrumbResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbResponsive.vue",
+        type: "registry:example",
+        target: "BreadcrumbResponsive.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbSeparatorDemo": {
+      name: "BreadcrumbSeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonAsChildDemo": {
+      name: "ButtonAsChildDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonAsChildDemo.vue",
+        type: "registry:example",
+        target: "ButtonAsChildDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonDemo": {
+      name: "ButtonDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonDemo.vue",
+        type: "registry:example",
+        target: "ButtonDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonDestructiveDemo": {
+      name: "ButtonDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonDestructiveDemo.vue",
+        type: "registry:example",
+        target: "ButtonDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonGhostDemo": {
+      name: "ButtonGhostDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonGhostDemo.vue",
+        type: "registry:example",
+        target: "ButtonGhostDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonIconDemo": {
+      name: "ButtonIconDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonIconDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonLinkDemo": {
+      name: "ButtonLinkDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonLinkDemo.vue",
+        type: "registry:example",
+        target: "ButtonLinkDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonLoadingDemo": {
+      name: "ButtonLoadingDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonLoadingDemo.vue",
+        type: "registry:example",
+        target: "ButtonLoadingDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonOutlineDemo": {
+      name: "ButtonOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonOutlineDemo.vue",
+        type: "registry:example",
+        target: "ButtonOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonSecondaryDemo": {
+      name: "ButtonSecondaryDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonSecondaryDemo.vue",
+        type: "registry:example",
+        target: "ButtonSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonWithIconDemo": {
+      name: "ButtonWithIconDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonWithIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonWithIconDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarDemo": {
+      name: "CalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/example/CalendarDemo.vue",
+        type: "registry:example",
+        target: "CalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarForm": {
+      name: "CalendarForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/CalendarForm.vue",
+        type: "registry:example",
+        target: "CalendarForm.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarWithSelect": {
+      name: "CalendarWithSelect",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["calendar","select","utils"],
+      files: [{
+        path: "registry/default/example/CalendarWithSelect.vue",
+        type: "registry:example",
+        target: "CalendarWithSelect.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardChat": {
+      name: "CardChat",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      files: [{
+        path: "registry/default/example/CardChat.vue",
+        type: "registry:example",
+        target: "CardChat.vue"
+      }],
+      component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardDemo": {
+      name: "CardDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","switch","utils"],
+      files: [{
+        path: "registry/default/example/CardDemo.vue",
+        type: "registry:example",
+        target: "CardDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardFormDemo": {
+      name: "CardFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/default/example/CardFormDemo.vue",
+        type: "registry:example",
+        target: "CardFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardStats": {
+      name: "CardStats",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","chart-bar","chart-line"],
+      files: [{
+        path: "registry/default/example/CardStats.vue",
+        type: "registry:example",
+        target: "CardStats.vue"
+      }],
+      component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardWithForm": {
+      name: "CardWithForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/default/example/CardWithForm.vue",
+        type: "registry:example",
+        target: "CardWithForm.vue"
+      }],
+      component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselApi": {
+      name: "CarouselApi",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["carousel","card"],
+      files: [{
+        path: "registry/default/example/CarouselApi.vue",
+        type: "registry:example",
+        target: "CarouselApi.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselDemo": {
+      name: "CarouselDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselDemo.vue",
+        type: "registry:example",
+        target: "CarouselDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselOrientation": {
+      name: "CarouselOrientation",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselOrientation.vue",
+        type: "registry:example",
+        target: "CarouselOrientation.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselPlugin": {
+      name: "CarouselPlugin",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselPlugin.vue",
+        type: "registry:example",
+        target: "CarouselPlugin.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselSize": {
+      name: "CarouselSize",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselSize.vue",
+        type: "registry:example",
+        target: "CarouselSize.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselSpacing": {
+      name: "CarouselSpacing",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselSpacing.vue",
+        type: "registry:example",
+        target: "CarouselSpacing.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselThumbnails": {
+      name: "CarouselThumbnails",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselThumbnails.vue",
+        type: "registry:example",
+        target: "CarouselThumbnails.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxDemo": {
+      name: "CheckboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxDemo.vue",
+        type: "registry:example",
+        target: "CheckboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxDisabled": {
+      name: "CheckboxDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxDisabled.vue",
+        type: "registry:example",
+        target: "CheckboxDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxFormMultiple": {
+      name: "CheckboxFormMultiple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","form","toast"],
+      files: [{
+        path: "registry/default/example/CheckboxFormMultiple.vue",
+        type: "registry:example",
+        target: "CheckboxFormMultiple.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxFormSingle": {
+      name: "CheckboxFormSingle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","form","toast"],
+      files: [{
+        path: "registry/default/example/CheckboxFormSingle.vue",
+        type: "registry:example",
+        target: "CheckboxFormSingle.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxWithText": {
+      name: "CheckboxWithText",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxWithText.vue",
+        type: "registry:example",
+        target: "CheckboxWithText.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CollapsibleDemo": {
+      name: "CollapsibleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","collapsible"],
+      files: [{
+        path: "registry/default/example/CollapsibleDemo.vue",
+        type: "registry:example",
+        target: "CollapsibleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxDemo": {
+      name: "ComboboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover","utils"],
+      files: [{
+        path: "registry/default/example/ComboboxDemo.vue",
+        type: "registry:example",
+        target: "ComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxDropdownMenu": {
+      name: "ComboboxDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/ComboboxDropdownMenu.vue",
+        type: "registry:example",
+        target: "ComboboxDropdownMenu.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxForm": {
+      name: "ComboboxForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/ComboboxForm.vue",
+        type: "registry:example",
+        target: "ComboboxForm.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxPopover": {
+      name: "ComboboxPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/default/example/ComboboxPopover.vue",
+        type: "registry:example",
+        target: "ComboboxPopover.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxResponsive": {
+      name: "ComboboxResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/default/example/ComboboxResponsive.vue",
+        type: "registry:example",
+        target: "ComboboxResponsive.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandDemo": {
+      name: "CommandDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/example/CommandDemo.vue",
+        type: "registry:example",
+        target: "CommandDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandDialogDemo": {
+      name: "CommandDialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/example/CommandDialogDemo.vue",
+        type: "registry:example",
+        target: "CommandDialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ContextMenuDemo": {
+      name: "ContextMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["context-menu"],
+      files: [{
+        path: "registry/default/example/ContextMenuDemo.vue",
+        type: "registry:example",
+        target: "ContextMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card"],
+      files: [{
+        path: "registry/default/example/CustomChartTooltip.vue",
+        type: "registry:example",
+        target: "CustomChartTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableColumnPinningDemo": {
+      name: "DataTableColumnPinningDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableColumnPinningDemo.vue",
+        type: "registry:example",
+        target: "DataTableColumnPinningDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableDemo": {
+      name: "DataTableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableDemo.vue",
+        type: "registry:example",
+        target: "DataTableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableDemoColumn": {
+      name: "DataTableDemoColumn",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DataTableDemoColumn.vue",
+        type: "registry:example",
+        target: "DataTableDemoColumn.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableReactiveDemo": {
+      name: "DataTableReactiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableReactiveDemo.vue",
+        type: "registry:example",
+        target: "DataTableReactiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerDemo": {
+      name: "DatePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerDemo.vue",
+        type: "registry:example",
+        target: "DatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerForm": {
+      name: "DatePickerForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerForm.vue",
+        type: "registry:example",
+        target: "DatePickerForm.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithIndependentMonths": {
+      name: "DatePickerWithIndependentMonths",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","range-calendar","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithIndependentMonths.vue",
+        type: "registry:example",
+        target: "DatePickerWithIndependentMonths.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithPresets": {
+      name: "DatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover","select","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "DatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithRange": {
+      name: "DatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","range-calendar","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithRange.vue",
+        type: "registry:example",
+        target: "DatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogCustomCloseButton": {
+      name: "DialogCustomCloseButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","input","label"],
+      files: [{
+        path: "registry/default/example/DialogCustomCloseButton.vue",
+        type: "registry:example",
+        target: "DialogCustomCloseButton.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogDemo": {
+      name: "DialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","input","label"],
+      files: [{
+        path: "registry/default/example/DialogDemo.vue",
+        type: "registry:example",
+        target: "DialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogForm": {
+      name: "DialogForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","form","input","toast"],
+      files: [{
+        path: "registry/default/example/DialogForm.vue",
+        type: "registry:example",
+        target: "DialogForm.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogScrollBodyDemo": {
+      name: "DialogScrollBodyDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/DialogScrollBodyDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollBodyDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogScrollOverlayDemo": {
+      name: "DialogScrollOverlayDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/DialogScrollOverlayDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollOverlayDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartColor.vue",
+        type: "registry:example",
+        target: "DonutChartColor.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "DonutChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartDemo": {
+      name: "DonutChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartDemo.vue",
+        type: "registry:example",
+        target: "DonutChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartPie.vue",
+        type: "registry:example",
+        target: "DonutChartPie.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DrawerDemo": {
+      name: "DrawerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","drawer"],
+      files: [{
+        path: "registry/default/example/DrawerDemo.vue",
+        type: "registry:example",
+        target: "DrawerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DrawerDialog": {
+      name: "DrawerDialog",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","drawer","input","label"],
+      files: [{
+        path: "registry/default/example/DrawerDialog.vue",
+        type: "registry:example",
+        target: "DrawerDialog.vue"
+      }],
+      component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuCheckboxes": {
+      name: "DropdownMenuCheckboxes",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuCheckboxes.vue",
+        type: "registry:example",
+        target: "DropdownMenuCheckboxes.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuDemo": {
+      name: "DropdownMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuDemo.vue",
+        type: "registry:example",
+        target: "DropdownMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuRadioGroup": {
+      name: "DropdownMenuRadioGroup",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuRadioGroup.vue",
+        type: "registry:example",
+        target: "DropdownMenuRadioGroup.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "HoverCardDemo": {
+      name: "HoverCardDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar","button","hover-card"],
+      files: [{
+        path: "registry/default/example/HoverCardDemo.vue",
+        type: "registry:example",
+        target: "HoverCardDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputDemo": {
+      name: "InputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputDemo.vue",
+        type: "registry:example",
+        target: "InputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputDisabled": {
+      name: "InputDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputDisabled.vue",
+        type: "registry:example",
+        target: "InputDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputFile": {
+      name: "InputFile",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","label"],
+      files: [{
+        path: "registry/default/example/InputFile.vue",
+        type: "registry:example",
+        target: "InputFile.vue"
+      }],
+      component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputForm": {
+      name: "InputForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","use-toast"],
+      files: [{
+        path: "registry/default/example/InputForm.vue",
+        type: "registry:example",
+        target: "InputForm.vue"
+      }],
+      component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputFormAutoAnimate": {
+      name: "InputFormAutoAnimate",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","toast"],
+      files: [{
+        path: "registry/default/example/InputFormAutoAnimate.vue",
+        type: "registry:example",
+        target: "InputFormAutoAnimate.vue"
+      }],
+      component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithButton": {
+      name: "InputWithButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input"],
+      files: [{
+        path: "registry/default/example/InputWithButton.vue",
+        type: "registry:example",
+        target: "InputWithButton.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithIcon": {
+      name: "InputWithIcon",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputWithIcon.vue",
+        type: "registry:example",
+        target: "InputWithIcon.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithLabel": {
+      name: "InputWithLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","label"],
+      files: [{
+        path: "registry/default/example/InputWithLabel.vue",
+        type: "registry:example",
+        target: "InputWithLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LabelDemo": {
+      name: "LabelDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox","label"],
+      files: [{
+        path: "registry/default/example/LabelDemo.vue",
+        type: "registry:example",
+        target: "LabelDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "LineChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartDemo": {
+      name: "LineChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartDemo.vue",
+        type: "registry:example",
+        target: "LineChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartSparkline.vue",
+        type: "registry:example",
+        target: "LineChartSparkline.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "MenubarDemo": {
+      name: "MenubarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["menubar"],
+      files: [{
+        path: "registry/default/example/MenubarDemo.vue",
+        type: "registry:example",
+        target: "MenubarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NavigationMenuDemo": {
+      name: "NavigationMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["navigation-menu"],
+      files: [{
+        path: "registry/default/example/NavigationMenuDemo.vue",
+        type: "registry:example",
+        target: "NavigationMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldCurrency": {
+      name: "NumberFieldCurrency",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldCurrency.vue",
+        type: "registry:example",
+        target: "NumberFieldCurrency.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDecimal": {
+      name: "NumberFieldDecimal",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDecimal.vue",
+        type: "registry:example",
+        target: "NumberFieldDecimal.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDemo": {
+      name: "NumberFieldDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDemo.vue",
+        type: "registry:example",
+        target: "NumberFieldDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDisabled": {
+      name: "NumberFieldDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDisabled.vue",
+        type: "registry:example",
+        target: "NumberFieldDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldForm": {
+      name: "NumberFieldForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","number-field","toast"],
+      files: [{
+        path: "registry/default/example/NumberFieldForm.vue",
+        type: "registry:example",
+        target: "NumberFieldForm.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldPercentage": {
+      name: "NumberFieldPercentage",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldPercentage.vue",
+        type: "registry:example",
+        target: "NumberFieldPercentage.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PaginationDemo": {
+      name: "PaginationDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","pagination"],
+      files: [{
+        path: "registry/default/example/PaginationDemo.vue",
+        type: "registry:example",
+        target: "PaginationDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputControlled": {
+      name: "PinInputControlled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputControlled.vue",
+        type: "registry:example",
+        target: "PinInputControlled.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputDemo": {
+      name: "PinInputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputDemo.vue",
+        type: "registry:example",
+        target: "PinInputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputDisabled": {
+      name: "PinInputDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputDisabled.vue",
+        type: "registry:example",
+        target: "PinInputDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputFormDemo": {
+      name: "PinInputFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","pin-input","toast"],
+      files: [{
+        path: "registry/default/example/PinInputFormDemo.vue",
+        type: "registry:example",
+        target: "PinInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputSeparatorDemo": {
+      name: "PinInputSeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputSeparatorDemo.vue",
+        type: "registry:example",
+        target: "PinInputSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PopoverDemo": {
+      name: "PopoverDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","popover"],
+      files: [{
+        path: "registry/default/example/PopoverDemo.vue",
+        type: "registry:example",
+        target: "PopoverDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ProgressDemo": {
+      name: "ProgressDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["progress"],
+      files: [{
+        path: "registry/default/example/ProgressDemo.vue",
+        type: "registry:example",
+        target: "ProgressDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RadioGroupDemo": {
+      name: "RadioGroupDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","radio-group"],
+      files: [{
+        path: "registry/default/example/RadioGroupDemo.vue",
+        type: "registry:example",
+        target: "RadioGroupDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RadioGroupForm": {
+      name: "RadioGroupForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","radio-group","toast"],
+      files: [{
+        path: "registry/default/example/RadioGroupForm.vue",
+        type: "registry:example",
+        target: "RadioGroupForm.vue"
+      }],
+      component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RangeCalendarDemo": {
+      name: "RangeCalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["range-calendar"],
+      files: [{
+        path: "registry/default/example/RangeCalendarDemo.vue",
+        type: "registry:example",
+        target: "RangeCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableDemo": {
+      name: "ResizableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableDemo.vue",
+        type: "registry:example",
+        target: "ResizableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableHandleDemo": {
+      name: "ResizableHandleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableHandleDemo.vue",
+        type: "registry:example",
+        target: "ResizableHandleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableVerticalDemo": {
+      name: "ResizableVerticalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableVerticalDemo.vue",
+        type: "registry:example",
+        target: "ResizableVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ScrollAreaDemo": {
+      name: "ScrollAreaDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area","separator"],
+      files: [{
+        path: "registry/default/example/ScrollAreaDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ScrollAreaHorizontalDemo": {
+      name: "ScrollAreaHorizontalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaHorizontalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectDemo": {
+      name: "SelectDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/example/SelectDemo.vue",
+        type: "registry:example",
+        target: "SelectDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectForm": {
+      name: "SelectForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","select","toast"],
+      files: [{
+        path: "registry/default/example/SelectForm.vue",
+        type: "registry:example",
+        target: "SelectForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectScrollable": {
+      name: "SelectScrollable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/example/SelectScrollable.vue",
+        type: "registry:example",
+        target: "SelectScrollable.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SeparatorDemo": {
+      name: "SeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/default/example/SeparatorDemo.vue",
+        type: "registry:example",
+        target: "SeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SheetDemo": {
+      name: "SheetDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","sheet"],
+      files: [{
+        path: "registry/default/example/SheetDemo.vue",
+        type: "registry:example",
+        target: "SheetDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SheetSideDemo": {
+      name: "SheetSideDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","sheet"],
+      files: [{
+        path: "registry/default/example/SheetSideDemo.vue",
+        type: "registry:example",
+        target: "SheetSideDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SkeletonCard": {
+      name: "SkeletonCard",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/SkeletonCard.vue",
+        type: "registry:example",
+        target: "SkeletonCard.vue"
+      }],
+      component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SkeletonDemo": {
+      name: "SkeletonDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/SkeletonDemo.vue",
+        type: "registry:example",
+        target: "SkeletonDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SliderDemo": {
+      name: "SliderDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider","utils"],
+      files: [{
+        path: "registry/default/example/SliderDemo.vue",
+        type: "registry:example",
+        target: "SliderDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SliderForm": {
+      name: "SliderForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","slider","toast"],
+      files: [{
+        path: "registry/default/example/SliderForm.vue",
+        type: "registry:example",
+        target: "SliderForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SonnerDemo": {
+      name: "SonnerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/SonnerDemo.vue",
+        type: "registry:example",
+        target: "SonnerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SonnerWithDialog": {
+      name: "SonnerWithDialog",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/SonnerWithDialog.vue",
+        type: "registry:example",
+        target: "SonnerWithDialog.vue"
+      }],
+      component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperDemo": {
+      name: "StepperDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
+      files: [{
+        path: "registry/default/example/StepperDemo.vue",
+        type: "registry:example",
+        target: "StepperDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperForm": {
+      name: "StepperForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","select","stepper","toast"],
+      files: [{
+        path: "registry/default/example/StepperForm.vue",
+        type: "registry:example",
+        target: "StepperForm.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperHorizental": {
+      name: "StepperHorizental",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","stepper"],
+      files: [{
+        path: "registry/default/example/StepperHorizental.vue",
+        type: "registry:example",
+        target: "StepperHorizental.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperVertical": {
+      name: "StepperVertical",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","stepper"],
+      files: [{
+        path: "registry/default/example/StepperVertical.vue",
+        type: "registry:example",
+        target: "StepperVertical.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SwitchDemo": {
+      name: "SwitchDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","switch"],
+      files: [{
+        path: "registry/default/example/SwitchDemo.vue",
+        type: "registry:example",
+        target: "SwitchDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SwitchForm": {
+      name: "SwitchForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","switch","toast"],
+      files: [{
+        path: "registry/default/example/SwitchForm.vue",
+        type: "registry:example",
+        target: "SwitchForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TableDemo": {
+      name: "TableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      files: [{
+        path: "registry/default/example/TableDemo.vue",
+        type: "registry:example",
+        target: "TableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TabsDemo": {
+      name: "TabsDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      files: [{
+        path: "registry/default/example/TabsDemo.vue",
+        type: "registry:example",
+        target: "TabsDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      files: [{
+        path: "registry/default/example/TabsVerticalDemo.vue",
+        type: "registry:example",
+        target: "TabsVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputComboboxDemo": {
+      name: "TagsInputComboboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command","tags-input"],
+      files: [{
+        path: "registry/default/example/TagsInputComboboxDemo.vue",
+        type: "registry:example",
+        target: "TagsInputComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputDemo": {
+      name: "TagsInputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tags-input"],
+      files: [{
+        path: "registry/default/example/TagsInputDemo.vue",
+        type: "registry:example",
+        target: "TagsInputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputFormDemo": {
+      name: "TagsInputFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","tags-input","toast"],
+      files: [{
+        path: "registry/default/example/TagsInputFormDemo.vue",
+        type: "registry:example",
+        target: "TagsInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaDemo": {
+      name: "TextareaDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/example/TextareaDemo.vue",
+        type: "registry:example",
+        target: "TextareaDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaDisabled": {
+      name: "TextareaDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/example/TextareaDisabled.vue",
+        type: "registry:example",
+        target: "TextareaDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaForm": {
+      name: "TextareaForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","textarea","toast"],
+      files: [{
+        path: "registry/default/example/TextareaForm.vue",
+        type: "registry:example",
+        target: "TextareaForm.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithButton": {
+      name: "TextareaWithButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithButton.vue",
+        type: "registry:example",
+        target: "TextareaWithButton.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithLabel": {
+      name: "TextareaWithLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithLabel.vue",
+        type: "registry:example",
+        target: "TextareaWithLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithText": {
+      name: "TextareaWithText",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithText.vue",
+        type: "registry:example",
+        target: "TextareaWithText.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastDemo": {
+      name: "ToastDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastDemo.vue",
+        type: "registry:example",
+        target: "ToastDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastDestructive": {
+      name: "ToastDestructive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","toast","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastDestructive.vue",
+        type: "registry:example",
+        target: "ToastDestructive.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastSimple": {
+      name: "ToastSimple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastSimple.vue",
+        type: "registry:example",
+        target: "ToastSimple.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastWithAction": {
+      name: "ToastWithAction",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","toast","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastWithAction.vue",
+        type: "registry:example",
+        target: "ToastWithAction.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastWithTitle": {
+      name: "ToastWithTitle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastWithTitle.vue",
+        type: "registry:example",
+        target: "ToastWithTitle.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleDemo": {
+      name: "ToggleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleDemo.vue",
+        type: "registry:example",
+        target: "ToggleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleDisabledDemo": {
+      name: "ToggleDisabledDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupDemo": {
+      name: "ToggleGroupDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupDisabledDemo": {
+      name: "ToggleGroupDisabledDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupLargeDemo": {
+      name: "ToggleGroupLargeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupLargeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupOutlineDemo": {
+      name: "ToggleGroupOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupOutlineDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupSingleDemo": {
+      name: "ToggleGroupSingleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupSingleDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSingleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupSmallDemo": {
+      name: "ToggleGroupSmallDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSmallDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleItalicDemo": {
+      name: "ToggleItalicDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleItalicDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleItalicWithTextDemo": {
+      name: "ToggleItalicWithTextDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleItalicWithTextDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicWithTextDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleLargeDemo": {
+      name: "ToggleLargeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleLargeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleSmallDemo": {
+      name: "ToggleSmallDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleSmallDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TooltipDemo": {
+      name: "TooltipDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","tooltip"],
+      files: [{
+        path: "registry/default/example/TooltipDemo.vue",
+        type: "registry:example",
+        target: "TooltipDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyBlockquote": {
+      name: "TypographyBlockquote",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyBlockquote.vue",
+        type: "registry:example",
+        target: "TypographyBlockquote.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyDemo": {
+      name: "TypographyDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyDemo.vue",
+        type: "registry:example",
+        target: "TypographyDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH1": {
+      name: "TypographyH1",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH1.vue",
+        type: "registry:example",
+        target: "TypographyH1.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH2": {
+      name: "TypographyH2",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH2.vue",
+        type: "registry:example",
+        target: "TypographyH2.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH3": {
+      name: "TypographyH3",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH3.vue",
+        type: "registry:example",
+        target: "TypographyH3.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH4": {
+      name: "TypographyH4",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH4.vue",
+        type: "registry:example",
+        target: "TypographyH4.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyInlineCode": {
+      name: "TypographyInlineCode",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyInlineCode.vue",
+        type: "registry:example",
+        target: "TypographyInlineCode.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyLarge": {
+      name: "TypographyLarge",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyLarge.vue",
+        type: "registry:example",
+        target: "TypographyLarge.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyLead": {
+      name: "TypographyLead",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyLead.vue",
+        type: "registry:example",
+        target: "TypographyLead.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyList": {
+      name: "TypographyList",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyList.vue",
+        type: "registry:example",
+        target: "TypographyList.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyMuted": {
+      name: "TypographyMuted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyMuted.vue",
+        type: "registry:example",
+        target: "TypographyMuted.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyP": {
+      name: "TypographyP",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyP.vue",
+        type: "registry:example",
+        target: "TypographyP.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographySmall": {
+      name: "TypographySmall",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographySmall.vue",
+        type: "registry:example",
+        target: "TypographySmall.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyTable": {
+      name: "TypographyTable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyTable.vue",
+        type: "registry:example",
+        target: "TypographyTable.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VCalendarDemo": {
+      name: "VCalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["v-calendar"],
+      files: [{
+        path: "registry/default/example/VCalendarDemo.vue",
+        type: "registry:example",
+        target: "VCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerDemo": {
+      name: "VDatePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerDemo.vue",
+        type: "registry:example",
+        target: "VDatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerForm": {
+      name: "VDatePickerForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: "VDatePickerForm.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "VDatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: "VDatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: "VDateTimePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: "VRangePickerWithSlot.vue"
+      }],
+      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/default/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/default/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/default/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/default/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogCancel.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogContent.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogDescription.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogDescription.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogFooter.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogFooter.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogHeader.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogHeader.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogTitle.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTitle.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogTrigger.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogTrigger.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/index.ts",
+        type: "registry:ui",
+        target: "alert-dialog/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/aspect-ratio/AspectRatio.vue",
+        type: "registry:ui",
+        target: "aspect-ratio/AspectRatio.vue"
+      },{
+        path: "registry/default/ui/aspect-ratio/index.ts",
+        type: "registry:ui",
+        target: "aspect-ratio/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "auto-form": {
+      name: "auto-form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      files: [{
+        path: "registry/default/ui/auto-form/AutoForm.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoForm.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormField.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormField.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldArray.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldArray.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldBoolean.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldBoolean.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldDate.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldDate.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldEnum.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldEnum.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldFile.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldFile.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldInput.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldInput.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldNumber.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldNumber.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormFieldObject.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormFieldObject.vue"
+      },{
+        path: "registry/default/ui/auto-form/AutoFormLabel.vue",
+        type: "registry:ui",
+        target: "auto-form/AutoFormLabel.vue"
+      },{
+        path: "registry/default/ui/auto-form/constant.ts",
+        type: "registry:ui",
+        target: "auto-form/constant.ts"
+      },{
+        path: "registry/default/ui/auto-form/dependencies.ts",
+        type: "registry:ui",
+        target: "auto-form/dependencies.ts"
+      },{
+        path: "registry/default/ui/auto-form/index.ts",
+        type: "registry:ui",
+        target: "auto-form/index.ts"
+      },{
+        path: "registry/default/ui/auto-form/interface.ts",
+        type: "registry:ui",
+        target: "auto-form/interface.ts"
+      },{
+        path: "registry/default/ui/auto-form/utils.ts",
+        type: "registry:ui",
+        target: "auto-form/utils.ts"
+      }],
+      component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "avatar": {
+      name: "avatar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/avatar/Avatar.vue",
+        type: "registry:ui",
+        target: "avatar/Avatar.vue"
+      },{
+        path: "registry/default/ui/avatar/AvatarFallback.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarFallback.vue"
+      },{
+        path: "registry/default/ui/avatar/AvatarImage.vue",
+        type: "registry:ui",
+        target: "avatar/AvatarImage.vue"
+      },{
+        path: "registry/default/ui/avatar/index.ts",
+        type: "registry:ui",
+        target: "avatar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "badge": {
+      name: "badge",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/badge/Badge.vue",
+        type: "registry:ui",
+        target: "badge/Badge.vue"
+      },{
+        path: "registry/default/ui/badge/index.ts",
+        type: "registry:ui",
+        target: "badge/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "breadcrumb": {
+      name: "breadcrumb",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/breadcrumb/Breadcrumb.vue",
+        type: "registry:ui",
+        target: "breadcrumb/Breadcrumb.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbEllipsis.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbItem.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbItem.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbLink.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbLink.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbList.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbList.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbPage.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbPage.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/BreadcrumbSeparator.vue",
+        type: "registry:ui",
+        target: "breadcrumb/BreadcrumbSeparator.vue"
+      },{
+        path: "registry/default/ui/breadcrumb/index.ts",
+        type: "registry:ui",
+        target: "breadcrumb/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "button": {
+      name: "button",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/button/Button.vue",
+        type: "registry:ui",
+        target: "button/Button.vue"
+      },{
+        path: "registry/default/ui/button/index.ts",
+        type: "registry:ui",
+        target: "button/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "calendar": {
+      name: "calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "calendar/Calendar.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCell.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarCellTrigger.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGrid.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGrid.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridBody.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridBody.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridHead.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridHead.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarGridRow.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarGridRow.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeadCell.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeader.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeader.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarHeading.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarHeading.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarNextButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarNextButton.vue"
+      },{
+        path: "registry/default/ui/calendar/CalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "calendar/CalendarPrevButton.vue"
+      },{
+        path: "registry/default/ui/calendar/index.ts",
+        type: "registry:ui",
+        target: "calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "card": {
+      name: "card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/card/Card.vue",
+        type: "registry:ui",
+        target: "card/Card.vue"
+      },{
+        path: "registry/default/ui/card/CardContent.vue",
+        type: "registry:ui",
+        target: "card/CardContent.vue"
+      },{
+        path: "registry/default/ui/card/CardDescription.vue",
+        type: "registry:ui",
+        target: "card/CardDescription.vue"
+      },{
+        path: "registry/default/ui/card/CardFooter.vue",
+        type: "registry:ui",
+        target: "card/CardFooter.vue"
+      },{
+        path: "registry/default/ui/card/CardHeader.vue",
+        type: "registry:ui",
+        target: "card/CardHeader.vue"
+      },{
+        path: "registry/default/ui/card/CardTitle.vue",
+        type: "registry:ui",
+        target: "card/CardTitle.vue"
+      },{
+        path: "registry/default/ui/card/index.ts",
+        type: "registry:ui",
+        target: "card/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "carousel": {
+      name: "carousel",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/carousel/Carousel.vue",
+        type: "registry:ui",
+        target: "carousel/Carousel.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselContent.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselContent.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselItem.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselItem.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselNext.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselNext.vue"
+      },{
+        path: "registry/default/ui/carousel/CarouselPrevious.vue",
+        type: "registry:ui",
+        target: "carousel/CarouselPrevious.vue"
+      },{
+        path: "registry/default/ui/carousel/index.ts",
+        type: "registry:ui",
+        target: "carousel/index.ts"
+      },{
+        path: "registry/default/ui/carousel/interface.ts",
+        type: "registry:ui",
+        target: "carousel/interface.ts"
+      },{
+        path: "registry/default/ui/carousel/useCarousel.ts",
+        type: "registry:ui",
+        target: "carousel/useCarousel.ts"
+      }],
+      component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart": {
+      name: "chart",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","card"],
+      files: [{
+        path: "registry/default/ui/chart/ChartCrosshair.vue",
+        type: "registry:ui",
+        target: "chart/ChartCrosshair.vue"
+      },{
+        path: "registry/default/ui/chart/ChartLegend.vue",
+        type: "registry:ui",
+        target: "chart/ChartLegend.vue"
+      },{
+        path: "registry/default/ui/chart/ChartSingleTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartSingleTooltip.vue"
+      },{
+        path: "registry/default/ui/chart/ChartTooltip.vue",
+        type: "registry:ui",
+        target: "chart/ChartTooltip.vue"
+      },{
+        path: "registry/default/ui/chart/index.ts",
+        type: "registry:ui",
+        target: "chart/index.ts"
+      },{
+        path: "registry/default/ui/chart/interface.ts",
+        type: "registry:ui",
+        target: "chart/interface.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-area": {
+      name: "chart-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-area/AreaChart.vue",
+        type: "registry:ui",
+        target: "chart-area/AreaChart.vue"
+      },{
+        path: "registry/default/ui/chart-area/index.ts",
+        type: "registry:ui",
+        target: "chart-area/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-bar": {
+      name: "chart-bar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-bar/BarChart.vue",
+        type: "registry:ui",
+        target: "chart-bar/BarChart.vue"
+      },{
+        path: "registry/default/ui/chart-bar/index.ts",
+        type: "registry:ui",
+        target: "chart-bar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-donut": {
+      name: "chart-donut",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-donut/DonutChart.vue",
+        type: "registry:ui",
+        target: "chart-donut/DonutChart.vue"
+      },{
+        path: "registry/default/ui/chart-donut/index.ts",
+        type: "registry:ui",
+        target: "chart-donut/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "chart-line": {
+      name: "chart-line",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["chart","utils"],
+      files: [{
+        path: "registry/default/ui/chart-line/LineChart.vue",
+        type: "registry:ui",
+        target: "chart-line/LineChart.vue"
+      },{
+        path: "registry/default/ui/chart-line/index.ts",
+        type: "registry:ui",
+        target: "chart-line/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "checkbox": {
+      name: "checkbox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/checkbox/Checkbox.vue",
+        type: "registry:ui",
+        target: "checkbox/Checkbox.vue"
+      },{
+        path: "registry/default/ui/checkbox/index.ts",
+        type: "registry:ui",
+        target: "checkbox/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "collapsible": {
+      name: "collapsible",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/collapsible/Collapsible.vue",
+        type: "registry:ui",
+        target: "collapsible/Collapsible.vue"
+      },{
+        path: "registry/default/ui/collapsible/CollapsibleContent.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleContent.vue"
+      },{
+        path: "registry/default/ui/collapsible/CollapsibleTrigger.vue",
+        type: "registry:ui",
+        target: "collapsible/CollapsibleTrigger.vue"
+      },{
+        path: "registry/default/ui/collapsible/index.ts",
+        type: "registry:ui",
+        target: "collapsible/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "command": {
+      name: "command",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","dialog"],
+      files: [{
+        path: "registry/default/ui/command/Command.vue",
+        type: "registry:ui",
+        target: "command/Command.vue"
+      },{
+        path: "registry/default/ui/command/CommandDialog.vue",
+        type: "registry:ui",
+        target: "command/CommandDialog.vue"
+      },{
+        path: "registry/default/ui/command/CommandEmpty.vue",
+        type: "registry:ui",
+        target: "command/CommandEmpty.vue"
+      },{
+        path: "registry/default/ui/command/CommandGroup.vue",
+        type: "registry:ui",
+        target: "command/CommandGroup.vue"
+      },{
+        path: "registry/default/ui/command/CommandInput.vue",
+        type: "registry:ui",
+        target: "command/CommandInput.vue"
+      },{
+        path: "registry/default/ui/command/CommandItem.vue",
+        type: "registry:ui",
+        target: "command/CommandItem.vue"
+      },{
+        path: "registry/default/ui/command/CommandList.vue",
+        type: "registry:ui",
+        target: "command/CommandList.vue"
+      },{
+        path: "registry/default/ui/command/CommandSeparator.vue",
+        type: "registry:ui",
+        target: "command/CommandSeparator.vue"
+      },{
+        path: "registry/default/ui/command/CommandShortcut.vue",
+        type: "registry:ui",
+        target: "command/CommandShortcut.vue"
+      },{
+        path: "registry/default/ui/command/index.ts",
+        type: "registry:ui",
+        target: "command/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/context-menu/ContextMenu.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenu.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuContent.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuGroup.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuLabel.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuLabel.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuPortal.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuPortal.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioGroup.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuRadioItem.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSeparator.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSeparator.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuShortcut.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuShortcut.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSub.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSub.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSubContent.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubContent.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuSubTrigger.vue"
+      },{
+        path: "registry/default/ui/context-menu/ContextMenuTrigger.vue",
+        type: "registry:ui",
+        target: "context-menu/ContextMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/context-menu/index.ts",
+        type: "registry:ui",
+        target: "context-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dialog": {
+      name: "dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/dialog/Dialog.vue",
+        type: "registry:ui",
+        target: "dialog/Dialog.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogClose.vue",
+        type: "registry:ui",
+        target: "dialog/DialogClose.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogContent.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogDescription.vue",
+        type: "registry:ui",
+        target: "dialog/DialogDescription.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogFooter.vue",
+        type: "registry:ui",
+        target: "dialog/DialogFooter.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogHeader.vue",
+        type: "registry:ui",
+        target: "dialog/DialogHeader.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogScrollContent.vue",
+        type: "registry:ui",
+        target: "dialog/DialogScrollContent.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogTitle.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTitle.vue"
+      },{
+        path: "registry/default/ui/dialog/DialogTrigger.vue",
+        type: "registry:ui",
+        target: "dialog/DialogTrigger.vue"
+      },{
+        path: "registry/default/ui/dialog/index.ts",
+        type: "registry:ui",
+        target: "dialog/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "drawer": {
+      name: "drawer",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/drawer/Drawer.vue",
+        type: "registry:ui",
+        target: "drawer/Drawer.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerContent.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerContent.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerDescription.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerDescription.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerFooter.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerFooter.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerHeader.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerHeader.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerOverlay.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerOverlay.vue"
+      },{
+        path: "registry/default/ui/drawer/DrawerTitle.vue",
+        type: "registry:ui",
+        target: "drawer/DrawerTitle.vue"
+      },{
+        path: "registry/default/ui/drawer/index.ts",
+        type: "registry:ui",
+        target: "drawer/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/dropdown-menu/DropdownMenu.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenu.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuContent.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuGroup.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuLabel.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuLabel.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSeparator.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuShortcut.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSub.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSub.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubContent.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue",
+        type: "registry:ui",
+        target: "dropdown-menu/DropdownMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/dropdown-menu/index.ts",
+        type: "registry:ui",
+        target: "dropdown-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "form": {
+      name: "form",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","label"],
+      files: [{
+        path: "registry/default/ui/form/FormControl.vue",
+        type: "registry:ui",
+        target: "form/FormControl.vue"
+      },{
+        path: "registry/default/ui/form/FormDescription.vue",
+        type: "registry:ui",
+        target: "form/FormDescription.vue"
+      },{
+        path: "registry/default/ui/form/FormItem.vue",
+        type: "registry:ui",
+        target: "form/FormItem.vue"
+      },{
+        path: "registry/default/ui/form/FormLabel.vue",
+        type: "registry:ui",
+        target: "form/FormLabel.vue"
+      },{
+        path: "registry/default/ui/form/FormMessage.vue",
+        type: "registry:ui",
+        target: "form/FormMessage.vue"
+      },{
+        path: "registry/default/ui/form/index.ts",
+        type: "registry:ui",
+        target: "form/index.ts"
+      },{
+        path: "registry/default/ui/form/injectionKeys.ts",
+        type: "registry:ui",
+        target: "form/injectionKeys.ts"
+      },{
+        path: "registry/default/ui/form/useFormField.ts",
+        type: "registry:ui",
+        target: "form/useFormField.ts"
+      }],
+      component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "hover-card": {
+      name: "hover-card",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/hover-card/HoverCard.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCard.vue"
+      },{
+        path: "registry/default/ui/hover-card/HoverCardContent.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardContent.vue"
+      },{
+        path: "registry/default/ui/hover-card/HoverCardTrigger.vue",
+        type: "registry:ui",
+        target: "hover-card/HoverCardTrigger.vue"
+      },{
+        path: "registry/default/ui/hover-card/index.ts",
+        type: "registry:ui",
+        target: "hover-card/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "input": {
+      name: "input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/input/Input.vue",
+        type: "registry:ui",
+        target: "input/Input.vue"
+      },{
+        path: "registry/default/ui/input/index.ts",
+        type: "registry:ui",
+        target: "input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "label": {
+      name: "label",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/label/Label.vue",
+        type: "registry:ui",
+        target: "label/Label.vue"
+      },{
+        path: "registry/default/ui/label/index.ts",
+        type: "registry:ui",
+        target: "label/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "menubar": {
+      name: "menubar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/menubar/Menubar.vue",
+        type: "registry:ui",
+        target: "menubar/Menubar.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarCheckboxItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarCheckboxItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarContent.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarGroup.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarLabel.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarLabel.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarMenu.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarMenu.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarRadioGroup.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioGroup.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarRadioItem.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarRadioItem.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSeparator.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSeparator.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarShortcut.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarShortcut.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSub.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSub.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSubContent.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubContent.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarSubTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarSubTrigger.vue"
+      },{
+        path: "registry/default/ui/menubar/MenubarTrigger.vue",
+        type: "registry:ui",
+        target: "menubar/MenubarTrigger.vue"
+      },{
+        path: "registry/default/ui/menubar/index.ts",
+        type: "registry:ui",
+        target: "menubar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/navigation-menu/NavigationMenu.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenu.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuContent.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuContent.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuIndicator.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuIndicator.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuItem.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuItem.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuLink.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuLink.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuList.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuList.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuTrigger.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuTrigger.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/NavigationMenuViewport.vue",
+        type: "registry:ui",
+        target: "navigation-menu/NavigationMenuViewport.vue"
+      },{
+        path: "registry/default/ui/navigation-menu/index.ts",
+        type: "registry:ui",
+        target: "navigation-menu/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "number-field": {
+      name: "number-field",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/number-field/NumberField.vue",
+        type: "registry:ui",
+        target: "number-field/NumberField.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldContent.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldContent.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldDecrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldDecrement.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldIncrement.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldIncrement.vue"
+      },{
+        path: "registry/default/ui/number-field/NumberFieldInput.vue",
+        type: "registry:ui",
+        target: "number-field/NumberFieldInput.vue"
+      },{
+        path: "registry/default/ui/number-field/index.ts",
+        type: "registry:ui",
+        target: "number-field/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pagination": {
+      name: "pagination",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/pagination/PaginationEllipsis.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationEllipsis.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationFirst.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationFirst.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationLast.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationLast.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationNext.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationNext.vue"
+      },{
+        path: "registry/default/ui/pagination/PaginationPrev.vue",
+        type: "registry:ui",
+        target: "pagination/PaginationPrev.vue"
+      },{
+        path: "registry/default/ui/pagination/index.ts",
+        type: "registry:ui",
+        target: "pagination/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "pin-input": {
+      name: "pin-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/pin-input/PinInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInput.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputGroup.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputGroup.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputInput.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputInput.vue"
+      },{
+        path: "registry/default/ui/pin-input/PinInputSeparator.vue",
+        type: "registry:ui",
+        target: "pin-input/PinInputSeparator.vue"
+      },{
+        path: "registry/default/ui/pin-input/index.ts",
+        type: "registry:ui",
+        target: "pin-input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "popover": {
+      name: "popover",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/popover/Popover.vue",
+        type: "registry:ui",
+        target: "popover/Popover.vue"
+      },{
+        path: "registry/default/ui/popover/PopoverContent.vue",
+        type: "registry:ui",
+        target: "popover/PopoverContent.vue"
+      },{
+        path: "registry/default/ui/popover/PopoverTrigger.vue",
+        type: "registry:ui",
+        target: "popover/PopoverTrigger.vue"
+      },{
+        path: "registry/default/ui/popover/index.ts",
+        type: "registry:ui",
+        target: "popover/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "progress": {
+      name: "progress",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/progress/Progress.vue",
+        type: "registry:ui",
+        target: "progress/Progress.vue"
+      },{
+        path: "registry/default/ui/progress/index.ts",
+        type: "registry:ui",
+        target: "progress/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "radio-group": {
+      name: "radio-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/radio-group/RadioGroup.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroup.vue"
+      },{
+        path: "registry/default/ui/radio-group/RadioGroupItem.vue",
+        type: "registry:ui",
+        target: "radio-group/RadioGroupItem.vue"
+      },{
+        path: "registry/default/ui/radio-group/index.ts",
+        type: "registry:ui",
+        target: "radio-group/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "range-calendar": {
+      name: "range-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/range-calendar/RangeCalendar.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendar.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCell.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarCellTrigger.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGrid.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGrid.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridBody.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridBody.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridHead.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridHead.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarGridRow.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarGridRow.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeadCell.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeadCell.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeader.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeader.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarHeading.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarHeading.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarNextButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarNextButton.vue"
+      },{
+        path: "registry/default/ui/range-calendar/RangeCalendarPrevButton.vue",
+        type: "registry:ui",
+        target: "range-calendar/RangeCalendarPrevButton.vue"
+      },{
+        path: "registry/default/ui/range-calendar/index.ts",
+        type: "registry:ui",
+        target: "range-calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "resizable": {
+      name: "resizable",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/resizable/ResizableHandle.vue",
+        type: "registry:ui",
+        target: "resizable/ResizableHandle.vue"
+      },{
+        path: "registry/default/ui/resizable/ResizablePanelGroup.vue",
+        type: "registry:ui",
+        target: "resizable/ResizablePanelGroup.vue"
+      },{
+        path: "registry/default/ui/resizable/index.ts",
+        type: "registry:ui",
+        target: "resizable/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/scroll-area/ScrollArea.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollArea.vue"
+      },{
+        path: "registry/default/ui/scroll-area/ScrollBar.vue",
+        type: "registry:ui",
+        target: "scroll-area/ScrollBar.vue"
+      },{
+        path: "registry/default/ui/scroll-area/index.ts",
+        type: "registry:ui",
+        target: "scroll-area/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "select": {
+      name: "select",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/select/Select.vue",
+        type: "registry:ui",
+        target: "select/Select.vue"
+      },{
+        path: "registry/default/ui/select/SelectContent.vue",
+        type: "registry:ui",
+        target: "select/SelectContent.vue"
+      },{
+        path: "registry/default/ui/select/SelectGroup.vue",
+        type: "registry:ui",
+        target: "select/SelectGroup.vue"
+      },{
+        path: "registry/default/ui/select/SelectItem.vue",
+        type: "registry:ui",
+        target: "select/SelectItem.vue"
+      },{
+        path: "registry/default/ui/select/SelectItemText.vue",
+        type: "registry:ui",
+        target: "select/SelectItemText.vue"
+      },{
+        path: "registry/default/ui/select/SelectLabel.vue",
+        type: "registry:ui",
+        target: "select/SelectLabel.vue"
+      },{
+        path: "registry/default/ui/select/SelectScrollDownButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollDownButton.vue"
+      },{
+        path: "registry/default/ui/select/SelectScrollUpButton.vue",
+        type: "registry:ui",
+        target: "select/SelectScrollUpButton.vue"
+      },{
+        path: "registry/default/ui/select/SelectSeparator.vue",
+        type: "registry:ui",
+        target: "select/SelectSeparator.vue"
+      },{
+        path: "registry/default/ui/select/SelectTrigger.vue",
+        type: "registry:ui",
+        target: "select/SelectTrigger.vue"
+      },{
+        path: "registry/default/ui/select/SelectValue.vue",
+        type: "registry:ui",
+        target: "select/SelectValue.vue"
+      },{
+        path: "registry/default/ui/select/index.ts",
+        type: "registry:ui",
+        target: "select/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "separator": {
+      name: "separator",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/separator/Separator.vue",
+        type: "registry:ui",
+        target: "separator/Separator.vue"
+      },{
+        path: "registry/default/ui/separator/index.ts",
+        type: "registry:ui",
+        target: "separator/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sheet": {
+      name: "sheet",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/sheet/Sheet.vue",
+        type: "registry:ui",
+        target: "sheet/Sheet.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetClose.vue",
+        type: "registry:ui",
+        target: "sheet/SheetClose.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetContent.vue",
+        type: "registry:ui",
+        target: "sheet/SheetContent.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetDescription.vue",
+        type: "registry:ui",
+        target: "sheet/SheetDescription.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetFooter.vue",
+        type: "registry:ui",
+        target: "sheet/SheetFooter.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetHeader.vue",
+        type: "registry:ui",
+        target: "sheet/SheetHeader.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetTitle.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTitle.vue"
+      },{
+        path: "registry/default/ui/sheet/SheetTrigger.vue",
+        type: "registry:ui",
+        target: "sheet/SheetTrigger.vue"
+      },{
+        path: "registry/default/ui/sheet/index.ts",
+        type: "registry:ui",
+        target: "sheet/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sidebar": {
+      name: "sidebar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      files: [{
+        path: "registry/default/ui/sidebar/Sidebar.vue",
+        type: "registry:ui",
+        target: "sidebar/Sidebar.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarContent.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarFooter.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarFooter.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroup.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroup.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupAction.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupContent.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupContent.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarGroupLabel.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarGroupLabel.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarHeader.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarHeader.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarInput.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInput.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarInset.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarInset.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenu.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenu.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuAction.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuAction.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuBadge.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuBadge.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuButtonChild.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuButtonChild.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuItem.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSkeleton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSkeleton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSub.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSub.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSubButton.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubButton.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarMenuSubItem.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarMenuSubItem.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarProvider.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarProvider.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarRail.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarRail.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarSeparator.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarSeparator.vue"
+      },{
+        path: "registry/default/ui/sidebar/SidebarTrigger.vue",
+        type: "registry:ui",
+        target: "sidebar/SidebarTrigger.vue"
+      },{
+        path: "registry/default/ui/sidebar/index.ts",
+        type: "registry:ui",
+        target: "sidebar/index.ts"
+      },{
+        path: "registry/default/ui/sidebar/utils.ts",
+        type: "registry:ui",
+        target: "sidebar/utils.ts"
+      }],
+      component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "skeleton": {
+      name: "skeleton",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/skeleton/Skeleton.vue",
+        type: "registry:ui",
+        target: "skeleton/Skeleton.vue"
+      },{
+        path: "registry/default/ui/skeleton/index.ts",
+        type: "registry:ui",
+        target: "skeleton/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "slider": {
+      name: "slider",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/slider/Slider.vue",
+        type: "registry:ui",
+        target: "slider/Slider.vue"
+      },{
+        path: "registry/default/ui/slider/index.ts",
+        type: "registry:ui",
+        target: "slider/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "sonner": {
+      name: "sonner",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/ui/sonner/Sonner.vue",
+        type: "registry:ui",
+        target: "sonner/Sonner.vue"
+      },{
+        path: "registry/default/ui/sonner/index.ts",
+        type: "registry:ui",
+        target: "sonner/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "stepper": {
+      name: "stepper",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/stepper/Stepper.vue",
+        type: "registry:ui",
+        target: "stepper/Stepper.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperDescription.vue",
+        type: "registry:ui",
+        target: "stepper/StepperDescription.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperIndicator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperIndicator.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperItem.vue",
+        type: "registry:ui",
+        target: "stepper/StepperItem.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperSeparator.vue",
+        type: "registry:ui",
+        target: "stepper/StepperSeparator.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperTitle.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTitle.vue"
+      },{
+        path: "registry/default/ui/stepper/StepperTrigger.vue",
+        type: "registry:ui",
+        target: "stepper/StepperTrigger.vue"
+      },{
+        path: "registry/default/ui/stepper/index.ts",
+        type: "registry:ui",
+        target: "stepper/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "switch": {
+      name: "switch",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/switch/Switch.vue",
+        type: "registry:ui",
+        target: "switch/Switch.vue"
+      },{
+        path: "registry/default/ui/switch/index.ts",
+        type: "registry:ui",
+        target: "switch/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "table": {
+      name: "table",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/table/Table.vue",
+        type: "registry:ui",
+        target: "table/Table.vue"
+      },{
+        path: "registry/default/ui/table/TableBody.vue",
+        type: "registry:ui",
+        target: "table/TableBody.vue"
+      },{
+        path: "registry/default/ui/table/TableCaption.vue",
+        type: "registry:ui",
+        target: "table/TableCaption.vue"
+      },{
+        path: "registry/default/ui/table/TableCell.vue",
+        type: "registry:ui",
+        target: "table/TableCell.vue"
+      },{
+        path: "registry/default/ui/table/TableEmpty.vue",
+        type: "registry:ui",
+        target: "table/TableEmpty.vue"
+      },{
+        path: "registry/default/ui/table/TableFooter.vue",
+        type: "registry:ui",
+        target: "table/TableFooter.vue"
+      },{
+        path: "registry/default/ui/table/TableHead.vue",
+        type: "registry:ui",
+        target: "table/TableHead.vue"
+      },{
+        path: "registry/default/ui/table/TableHeader.vue",
+        type: "registry:ui",
+        target: "table/TableHeader.vue"
+      },{
+        path: "registry/default/ui/table/TableRow.vue",
+        type: "registry:ui",
+        target: "table/TableRow.vue"
+      },{
+        path: "registry/default/ui/table/index.ts",
+        type: "registry:ui",
+        target: "table/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tabs": {
+      name: "tabs",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tabs/Tabs.vue",
+        type: "registry:ui",
+        target: "tabs/Tabs.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsContent.vue",
+        type: "registry:ui",
+        target: "tabs/TabsContent.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsList.vue",
+        type: "registry:ui",
+        target: "tabs/TabsList.vue"
+      },{
+        path: "registry/default/ui/tabs/TabsTrigger.vue",
+        type: "registry:ui",
+        target: "tabs/TabsTrigger.vue"
+      },{
+        path: "registry/default/ui/tabs/index.ts",
+        type: "registry:ui",
+        target: "tabs/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tags-input": {
+      name: "tags-input",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tags-input/TagsInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInput.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputInput.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputInput.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItem.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItem.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItemDelete.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemDelete.vue"
+      },{
+        path: "registry/default/ui/tags-input/TagsInputItemText.vue",
+        type: "registry:ui",
+        target: "tags-input/TagsInputItemText.vue"
+      },{
+        path: "registry/default/ui/tags-input/index.ts",
+        type: "registry:ui",
+        target: "tags-input/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "textarea": {
+      name: "textarea",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/textarea/Textarea.vue",
+        type: "registry:ui",
+        target: "textarea/Textarea.vue"
+      },{
+        path: "registry/default/ui/textarea/index.ts",
+        type: "registry:ui",
+        target: "textarea/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toast": {
+      name: "toast",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/toast/Toast.vue",
+        type: "registry:ui",
+        target: "toast/Toast.vue"
+      },{
+        path: "registry/default/ui/toast/ToastAction.vue",
+        type: "registry:ui",
+        target: "toast/ToastAction.vue"
+      },{
+        path: "registry/default/ui/toast/ToastClose.vue",
+        type: "registry:ui",
+        target: "toast/ToastClose.vue"
+      },{
+        path: "registry/default/ui/toast/ToastDescription.vue",
+        type: "registry:ui",
+        target: "toast/ToastDescription.vue"
+      },{
+        path: "registry/default/ui/toast/ToastProvider.vue",
+        type: "registry:ui",
+        target: "toast/ToastProvider.vue"
+      },{
+        path: "registry/default/ui/toast/ToastTitle.vue",
+        type: "registry:ui",
+        target: "toast/ToastTitle.vue"
+      },{
+        path: "registry/default/ui/toast/ToastViewport.vue",
+        type: "registry:ui",
+        target: "toast/ToastViewport.vue"
+      },{
+        path: "registry/default/ui/toast/Toaster.vue",
+        type: "registry:ui",
+        target: "toast/Toaster.vue"
+      },{
+        path: "registry/default/ui/toast/index.ts",
+        type: "registry:ui",
+        target: "toast/index.ts"
+      },{
+        path: "registry/default/ui/toast/use-toast.ts",
+        type: "registry:ui",
+        target: "toast/use-toast.ts"
+      }],
+      component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle": {
+      name: "toggle",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/toggle/Toggle.vue",
+        type: "registry:ui",
+        target: "toggle/Toggle.vue"
+      },{
+        path: "registry/default/ui/toggle/index.ts",
+        type: "registry:ui",
+        target: "toggle/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["toggle","utils"],
+      files: [{
+        path: "registry/default/ui/toggle-group/ToggleGroup.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroup.vue"
+      },{
+        path: "registry/default/ui/toggle-group/ToggleGroupItem.vue",
+        type: "registry:ui",
+        target: "toggle-group/ToggleGroupItem.vue"
+      },{
+        path: "registry/default/ui/toggle-group/index.ts",
+        type: "registry:ui",
+        target: "toggle-group/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "tooltip": {
+      name: "tooltip",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/tooltip/Tooltip.vue",
+        type: "registry:ui",
+        target: "tooltip/Tooltip.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipContent.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipContent.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipProvider.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipProvider.vue"
+      },{
+        path: "registry/default/ui/tooltip/TooltipTrigger.vue",
+        type: "registry:ui",
+        target: "tooltip/TooltipTrigger.vue"
+      },{
+        path: "registry/default/ui/tooltip/index.ts",
+        type: "registry:ui",
+        target: "tooltip/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "v-calendar": {
+      name: "v-calendar",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["button","utils"],
+      files: [{
+        path: "registry/default/ui/v-calendar/Calendar.vue",
+        type: "registry:ui",
+        target: "v-calendar/Calendar.vue"
+      },{
+        path: "registry/default/ui/v-calendar/index.ts",
+        type: "registry:ui",
+        target: "v-calendar/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AccordionDemo": {
+      name: "AccordionDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["accordion"],
+      files: [{
+        path: "registry/default/example/AccordionDemo.vue",
+        type: "registry:example",
+        target: "AccordionDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDemo": {
+      name: "AlertDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/example/AlertDemo.vue",
+        type: "registry:example",
+        target: "AlertDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDestructiveDemo": {
+      name: "AlertDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/default/example/AlertDestructiveDemo.vue",
+        type: "registry:example",
+        target: "AlertDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AlertDialogDemo": {
+      name: "AlertDialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["alert-dialog","button"],
+      files: [{
+        path: "registry/default/example/AlertDialogDemo.vue",
+        type: "registry:example",
+        target: "AlertDialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "AreaChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartDemo": {
+      name: "AreaChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartDemo.vue",
+        type: "registry:example",
+        target: "AreaChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-area"],
+      files: [{
+        path: "registry/default/example/AreaChartSparkline.vue",
+        type: "registry:example",
+        target: "AreaChartSparkline.vue"
+      }],
+      component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AspectRatioDemo": {
+      name: "AspectRatioDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["aspect-ratio"],
+      files: [{
+        path: "registry/default/example/AspectRatioDemo.vue",
+        type: "registry:example",
+        target: "AspectRatioDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormApi.vue",
+        type: "registry:example",
+        target: "AutoFormApi.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormArray": {
+      name: "AutoFormArray",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormArray.vue",
+        type: "registry:example",
+        target: "AutoFormArray.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormBasic": {
+      name: "AutoFormBasic",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormBasic.vue",
+        type: "registry:example",
+        target: "AutoFormBasic.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormConfirmPassword": {
+      name: "AutoFormConfirmPassword",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormConfirmPassword.vue",
+        type: "registry:example",
+        target: "AutoFormConfirmPassword.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormControlled": {
+      name: "AutoFormControlled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormControlled.vue",
+        type: "registry:example",
+        target: "AutoFormControlled.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormDependencies": {
+      name: "AutoFormDependencies",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormDependencies.vue",
+        type: "registry:example",
+        target: "AutoFormDependencies.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormInputWithoutLabel": {
+      name: "AutoFormInputWithoutLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormInputWithoutLabel.vue",
+        type: "registry:example",
+        target: "AutoFormInputWithoutLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AutoFormSubObject": {
+      name: "AutoFormSubObject",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["auto-form","button","toast"],
+      files: [{
+        path: "registry/default/example/AutoFormSubObject.vue",
+        type: "registry:example",
+        target: "AutoFormSubObject.vue"
+      }],
+      component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "AvatarDemo": {
+      name: "AvatarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar"],
+      files: [{
+        path: "registry/default/example/AvatarDemo.vue",
+        type: "registry:example",
+        target: "AvatarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeDemo": {
+      name: "BadgeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeDemo.vue",
+        type: "registry:example",
+        target: "BadgeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeDestructiveDemo": {
+      name: "BadgeDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeDestructiveDemo.vue",
+        type: "registry:example",
+        target: "BadgeDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeOutlineDemo": {
+      name: "BadgeOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeOutlineDemo.vue",
+        type: "registry:example",
+        target: "BadgeOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BadgeSecondaryDemo": {
+      name: "BadgeSecondaryDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/default/example/BadgeSecondaryDemo.vue",
+        type: "registry:example",
+        target: "BadgeSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "BarChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartDemo": {
+      name: "BarChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartDemo.vue",
+        type: "registry:example",
+        target: "BarChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartRounded.vue",
+        type: "registry:example",
+        target: "BarChartRounded.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-bar"],
+      files: [{
+        path: "registry/default/example/BarChartStacked.vue",
+        type: "registry:example",
+        target: "BarChartStacked.vue"
+      }],
+      component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbDemo": {
+      name: "BreadcrumbDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbDropdown": {
+      name: "BreadcrumbDropdown",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbDropdown.vue",
+        type: "registry:example",
+        target: "BreadcrumbDropdown.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbEllipsisDemo": {
+      name: "BreadcrumbEllipsisDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbEllipsisDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbLinkDemo": {
+      name: "BreadcrumbLinkDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbLinkDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbLinkDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbResponsive": {
+      name: "BreadcrumbResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/BreadcrumbResponsive.vue",
+        type: "registry:example",
+        target: "BreadcrumbResponsive.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "BreadcrumbSeparatorDemo": {
+      name: "BreadcrumbSeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
+        type: "registry:example",
+        target: "BreadcrumbSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonAsChildDemo": {
+      name: "ButtonAsChildDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonAsChildDemo.vue",
+        type: "registry:example",
+        target: "ButtonAsChildDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonDemo": {
+      name: "ButtonDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonDemo.vue",
+        type: "registry:example",
+        target: "ButtonDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonDestructiveDemo": {
+      name: "ButtonDestructiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonDestructiveDemo.vue",
+        type: "registry:example",
+        target: "ButtonDestructiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonGhostDemo": {
+      name: "ButtonGhostDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonGhostDemo.vue",
+        type: "registry:example",
+        target: "ButtonGhostDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonIconDemo": {
+      name: "ButtonIconDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonIconDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonLinkDemo": {
+      name: "ButtonLinkDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonLinkDemo.vue",
+        type: "registry:example",
+        target: "ButtonLinkDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonLoadingDemo": {
+      name: "ButtonLoadingDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonLoadingDemo.vue",
+        type: "registry:example",
+        target: "ButtonLoadingDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonOutlineDemo": {
+      name: "ButtonOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonOutlineDemo.vue",
+        type: "registry:example",
+        target: "ButtonOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonSecondaryDemo": {
+      name: "ButtonSecondaryDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonSecondaryDemo.vue",
+        type: "registry:example",
+        target: "ButtonSecondaryDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ButtonWithIconDemo": {
+      name: "ButtonWithIconDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/ButtonWithIconDemo.vue",
+        type: "registry:example",
+        target: "ButtonWithIconDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarDemo": {
+      name: "CalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/default/example/CalendarDemo.vue",
+        type: "registry:example",
+        target: "CalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarForm": {
+      name: "CalendarForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/CalendarForm.vue",
+        type: "registry:example",
+        target: "CalendarForm.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CalendarWithSelect": {
+      name: "CalendarWithSelect",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["calendar","select","utils"],
+      files: [{
+        path: "registry/default/example/CalendarWithSelect.vue",
+        type: "registry:example",
+        target: "CalendarWithSelect.vue"
+      }],
+      component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardChat": {
+      name: "CardChat",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      files: [{
+        path: "registry/default/example/CardChat.vue",
+        type: "registry:example",
+        target: "CardChat.vue"
+      }],
+      component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardDemo": {
+      name: "CardDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","switch","utils"],
+      files: [{
+        path: "registry/default/example/CardDemo.vue",
+        type: "registry:example",
+        target: "CardDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardFormDemo": {
+      name: "CardFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/default/example/CardFormDemo.vue",
+        type: "registry:example",
+        target: "CardFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardStats": {
+      name: "CardStats",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","themes","config"],
+      files: [{
+        path: "registry/default/example/CardStats.vue",
+        type: "registry:example",
+        target: "CardStats.vue"
+      }],
+      component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CardWithForm": {
+      name: "CardWithForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/default/example/CardWithForm.vue",
+        type: "registry:example",
+        target: "CardWithForm.vue"
+      }],
+      component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselApi": {
+      name: "CarouselApi",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["carousel","card"],
+      files: [{
+        path: "registry/default/example/CarouselApi.vue",
+        type: "registry:example",
+        target: "CarouselApi.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselDemo": {
+      name: "CarouselDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselDemo.vue",
+        type: "registry:example",
+        target: "CarouselDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselOrientation": {
+      name: "CarouselOrientation",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselOrientation.vue",
+        type: "registry:example",
+        target: "CarouselOrientation.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselPlugin": {
+      name: "CarouselPlugin",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselPlugin.vue",
+        type: "registry:example",
+        target: "CarouselPlugin.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselSize": {
+      name: "CarouselSize",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselSize.vue",
+        type: "registry:example",
+        target: "CarouselSize.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselSpacing": {
+      name: "CarouselSpacing",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselSpacing.vue",
+        type: "registry:example",
+        target: "CarouselSpacing.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CarouselThumbnails": {
+      name: "CarouselThumbnails",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card","carousel"],
+      files: [{
+        path: "registry/default/example/CarouselThumbnails.vue",
+        type: "registry:example",
+        target: "CarouselThumbnails.vue"
+      }],
+      component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxDemo": {
+      name: "CheckboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxDemo.vue",
+        type: "registry:example",
+        target: "CheckboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxDisabled": {
+      name: "CheckboxDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxDisabled.vue",
+        type: "registry:example",
+        target: "CheckboxDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxFormMultiple": {
+      name: "CheckboxFormMultiple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","form","toast"],
+      files: [{
+        path: "registry/default/example/CheckboxFormMultiple.vue",
+        type: "registry:example",
+        target: "CheckboxFormMultiple.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxFormSingle": {
+      name: "CheckboxFormSingle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","form","toast"],
+      files: [{
+        path: "registry/default/example/CheckboxFormSingle.vue",
+        type: "registry:example",
+        target: "CheckboxFormSingle.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CheckboxWithText": {
+      name: "CheckboxWithText",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/default/example/CheckboxWithText.vue",
+        type: "registry:example",
+        target: "CheckboxWithText.vue"
+      }],
+      component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CollapsibleDemo": {
+      name: "CollapsibleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","collapsible"],
+      files: [{
+        path: "registry/default/example/CollapsibleDemo.vue",
+        type: "registry:example",
+        target: "CollapsibleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxDemo": {
+      name: "ComboboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover","utils"],
+      files: [{
+        path: "registry/default/example/ComboboxDemo.vue",
+        type: "registry:example",
+        target: "ComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxDropdownMenu": {
+      name: "ComboboxDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/ComboboxDropdownMenu.vue",
+        type: "registry:example",
+        target: "ComboboxDropdownMenu.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxForm": {
+      name: "ComboboxForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/ComboboxForm.vue",
+        type: "registry:example",
+        target: "ComboboxForm.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxPopover": {
+      name: "ComboboxPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover","utils"],
+      files: [{
+        path: "registry/default/example/ComboboxPopover.vue",
+        type: "registry:example",
+        target: "ComboboxPopover.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ComboboxResponsive": {
+      name: "ComboboxResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/default/example/ComboboxResponsive.vue",
+        type: "registry:example",
+        target: "ComboboxResponsive.vue"
+      }],
+      component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandDemo": {
+      name: "CommandDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/example/CommandDemo.vue",
+        type: "registry:example",
+        target: "CommandDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandDialogDemo": {
+      name: "CommandDialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/default/example/CommandDialogDemo.vue",
+        type: "registry:example",
+        target: "CommandDialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ContextMenuDemo": {
+      name: "ContextMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["context-menu"],
+      files: [{
+        path: "registry/default/example/ContextMenuDemo.vue",
+        type: "registry:example",
+        target: "ContextMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["card"],
+      files: [{
+        path: "registry/default/example/CustomChartTooltip.vue",
+        type: "registry:example",
+        target: "CustomChartTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableColumnPinningDemo": {
+      name: "DataTableColumnPinningDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableColumnPinningDemo.vue",
+        type: "registry:example",
+        target: "DataTableColumnPinningDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableDemo": {
+      name: "DataTableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableDemo.vue",
+        type: "registry:example",
+        target: "DataTableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableDemoColumn": {
+      name: "DataTableDemoColumn",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DataTableDemoColumn.vue",
+        type: "registry:example",
+        target: "DataTableDemoColumn.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DataTableReactiveDemo": {
+      name: "DataTableReactiveDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      files: [{
+        path: "registry/default/example/DataTableReactiveDemo.vue",
+        type: "registry:example",
+        target: "DataTableReactiveDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerDemo": {
+      name: "DatePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerDemo.vue",
+        type: "registry:example",
+        target: "DatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerForm": {
+      name: "DatePickerForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerForm.vue",
+        type: "registry:example",
+        target: "DatePickerForm.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithIndependentMonths": {
+      name: "DatePickerWithIndependentMonths",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","range-calendar","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithIndependentMonths.vue",
+        type: "registry:example",
+        target: "DatePickerWithIndependentMonths.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithPresets": {
+      name: "DatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover","select","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "DatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DatePickerWithRange": {
+      name: "DatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","range-calendar","utils"],
+      files: [{
+        path: "registry/default/example/DatePickerWithRange.vue",
+        type: "registry:example",
+        target: "DatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogCustomCloseButton": {
+      name: "DialogCustomCloseButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","input","label"],
+      files: [{
+        path: "registry/default/example/DialogCustomCloseButton.vue",
+        type: "registry:example",
+        target: "DialogCustomCloseButton.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogDemo": {
+      name: "DialogDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","input","label"],
+      files: [{
+        path: "registry/default/example/DialogDemo.vue",
+        type: "registry:example",
+        target: "DialogDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogForm": {
+      name: "DialogForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","form","input","toast"],
+      files: [{
+        path: "registry/default/example/DialogForm.vue",
+        type: "registry:example",
+        target: "DialogForm.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogScrollBodyDemo": {
+      name: "DialogScrollBodyDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/DialogScrollBodyDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollBodyDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DialogScrollOverlayDemo": {
+      name: "DialogScrollOverlayDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/DialogScrollOverlayDemo.vue",
+        type: "registry:example",
+        target: "DialogScrollOverlayDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartColor.vue",
+        type: "registry:example",
+        target: "DonutChartColor.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "DonutChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartDemo": {
+      name: "DonutChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartDemo.vue",
+        type: "registry:example",
+        target: "DonutChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-donut"],
+      files: [{
+        path: "registry/default/example/DonutChartPie.vue",
+        type: "registry:example",
+        target: "DonutChartPie.vue"
+      }],
+      component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DrawerDemo": {
+      name: "DrawerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","drawer"],
+      files: [{
+        path: "registry/default/example/DrawerDemo.vue",
+        type: "registry:example",
+        target: "DrawerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DrawerDialog": {
+      name: "DrawerDialog",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog","drawer","input","label"],
+      files: [{
+        path: "registry/default/example/DrawerDialog.vue",
+        type: "registry:example",
+        target: "DrawerDialog.vue"
+      }],
+      component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuCheckboxes": {
+      name: "DropdownMenuCheckboxes",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuCheckboxes.vue",
+        type: "registry:example",
+        target: "DropdownMenuCheckboxes.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuDemo": {
+      name: "DropdownMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuDemo.vue",
+        type: "registry:example",
+        target: "DropdownMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DropdownMenuRadioGroup": {
+      name: "DropdownMenuRadioGroup",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/DropdownMenuRadioGroup.vue",
+        type: "registry:example",
+        target: "DropdownMenuRadioGroup.vue"
+      }],
+      component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "HoverCardDemo": {
+      name: "HoverCardDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["avatar","button","hover-card"],
+      files: [{
+        path: "registry/default/example/HoverCardDemo.vue",
+        type: "registry:example",
+        target: "HoverCardDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputDemo": {
+      name: "InputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputDemo.vue",
+        type: "registry:example",
+        target: "InputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputDisabled": {
+      name: "InputDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputDisabled.vue",
+        type: "registry:example",
+        target: "InputDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputFile": {
+      name: "InputFile",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","label"],
+      files: [{
+        path: "registry/default/example/InputFile.vue",
+        type: "registry:example",
+        target: "InputFile.vue"
+      }],
+      component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputForm": {
+      name: "InputForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","toast"],
+      files: [{
+        path: "registry/default/example/InputForm.vue",
+        type: "registry:example",
+        target: "InputForm.vue"
+      }],
+      component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputFormAutoAnimate": {
+      name: "InputFormAutoAnimate",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","toast"],
+      files: [{
+        path: "registry/default/example/InputFormAutoAnimate.vue",
+        type: "registry:example",
+        target: "InputFormAutoAnimate.vue"
+      }],
+      component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithButton": {
+      name: "InputWithButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input"],
+      files: [{
+        path: "registry/default/example/InputWithButton.vue",
+        type: "registry:example",
+        target: "InputWithButton.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithIcon": {
+      name: "InputWithIcon",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/default/example/InputWithIcon.vue",
+        type: "registry:example",
+        target: "InputWithIcon.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "InputWithLabel": {
+      name: "InputWithLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","label"],
+      files: [{
+        path: "registry/default/example/InputWithLabel.vue",
+        type: "registry:example",
+        target: "InputWithLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LabelDemo": {
+      name: "LabelDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["checkbox","label"],
+      files: [{
+        path: "registry/default/example/LabelDemo.vue",
+        type: "registry:example",
+        target: "LabelDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartCustomTooltip.vue",
+        type: "registry:example",
+        target: "LineChartCustomTooltip.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartDemo": {
+      name: "LineChartDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartDemo.vue",
+        type: "registry:example",
+        target: "LineChartDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["chart-line"],
+      files: [{
+        path: "registry/default/example/LineChartSparkline.vue",
+        type: "registry:example",
+        target: "LineChartSparkline.vue"
+      }],
+      component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "MenubarDemo": {
+      name: "MenubarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["menubar"],
+      files: [{
+        path: "registry/default/example/MenubarDemo.vue",
+        type: "registry:example",
+        target: "MenubarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NavigationMenuDemo": {
+      name: "NavigationMenuDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["navigation-menu"],
+      files: [{
+        path: "registry/default/example/NavigationMenuDemo.vue",
+        type: "registry:example",
+        target: "NavigationMenuDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldCurrency": {
+      name: "NumberFieldCurrency",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldCurrency.vue",
+        type: "registry:example",
+        target: "NumberFieldCurrency.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDecimal": {
+      name: "NumberFieldDecimal",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDecimal.vue",
+        type: "registry:example",
+        target: "NumberFieldDecimal.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDemo": {
+      name: "NumberFieldDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDemo.vue",
+        type: "registry:example",
+        target: "NumberFieldDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldDisabled": {
+      name: "NumberFieldDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldDisabled.vue",
+        type: "registry:example",
+        target: "NumberFieldDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldForm": {
+      name: "NumberFieldForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","number-field","toast"],
+      files: [{
+        path: "registry/default/example/NumberFieldForm.vue",
+        type: "registry:example",
+        target: "NumberFieldForm.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "NumberFieldPercentage": {
+      name: "NumberFieldPercentage",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","number-field"],
+      files: [{
+        path: "registry/default/example/NumberFieldPercentage.vue",
+        type: "registry:example",
+        target: "NumberFieldPercentage.vue"
+      }],
+      component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PaginationDemo": {
+      name: "PaginationDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","pagination"],
+      files: [{
+        path: "registry/default/example/PaginationDemo.vue",
+        type: "registry:example",
+        target: "PaginationDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputControlled": {
+      name: "PinInputControlled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputControlled.vue",
+        type: "registry:example",
+        target: "PinInputControlled.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputDemo": {
+      name: "PinInputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputDemo.vue",
+        type: "registry:example",
+        target: "PinInputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputDisabled": {
+      name: "PinInputDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputDisabled.vue",
+        type: "registry:example",
+        target: "PinInputDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputFormDemo": {
+      name: "PinInputFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","pin-input","toast"],
+      files: [{
+        path: "registry/default/example/PinInputFormDemo.vue",
+        type: "registry:example",
+        target: "PinInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PinInputSeparatorDemo": {
+      name: "PinInputSeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pin-input"],
+      files: [{
+        path: "registry/default/example/PinInputSeparatorDemo.vue",
+        type: "registry:example",
+        target: "PinInputSeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "PopoverDemo": {
+      name: "PopoverDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","popover"],
+      files: [{
+        path: "registry/default/example/PopoverDemo.vue",
+        type: "registry:example",
+        target: "PopoverDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ProgressDemo": {
+      name: "ProgressDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["progress"],
+      files: [{
+        path: "registry/default/example/ProgressDemo.vue",
+        type: "registry:example",
+        target: "ProgressDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RadioGroupDemo": {
+      name: "RadioGroupDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","radio-group"],
+      files: [{
+        path: "registry/default/example/RadioGroupDemo.vue",
+        type: "registry:example",
+        target: "RadioGroupDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RadioGroupForm": {
+      name: "RadioGroupForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","radio-group","toast"],
+      files: [{
+        path: "registry/default/example/RadioGroupForm.vue",
+        type: "registry:example",
+        target: "RadioGroupForm.vue"
+      }],
+      component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "RangeCalendarDemo": {
+      name: "RangeCalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["range-calendar"],
+      files: [{
+        path: "registry/default/example/RangeCalendarDemo.vue",
+        type: "registry:example",
+        target: "RangeCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableDemo": {
+      name: "ResizableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableDemo.vue",
+        type: "registry:example",
+        target: "ResizableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableHandleDemo": {
+      name: "ResizableHandleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableHandleDemo.vue",
+        type: "registry:example",
+        target: "ResizableHandleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ResizableVerticalDemo": {
+      name: "ResizableVerticalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/default/example/ResizableVerticalDemo.vue",
+        type: "registry:example",
+        target: "ResizableVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ScrollAreaDemo": {
+      name: "ScrollAreaDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area","separator"],
+      files: [{
+        path: "registry/default/example/ScrollAreaDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ScrollAreaHorizontalDemo": {
+      name: "ScrollAreaHorizontalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
+        type: "registry:example",
+        target: "ScrollAreaHorizontalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectDemo": {
+      name: "SelectDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/example/SelectDemo.vue",
+        type: "registry:example",
+        target: "SelectDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectForm": {
+      name: "SelectForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","select","toast"],
+      files: [{
+        path: "registry/default/example/SelectForm.vue",
+        type: "registry:example",
+        target: "SelectForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SelectScrollable": {
+      name: "SelectScrollable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/default/example/SelectScrollable.vue",
+        type: "registry:example",
+        target: "SelectScrollable.vue"
+      }],
+      component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SeparatorDemo": {
+      name: "SeparatorDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/default/example/SeparatorDemo.vue",
+        type: "registry:example",
+        target: "SeparatorDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SheetDemo": {
+      name: "SheetDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","sheet"],
+      files: [{
+        path: "registry/default/example/SheetDemo.vue",
+        type: "registry:example",
+        target: "SheetDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SheetSideDemo": {
+      name: "SheetSideDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","input","label","sheet"],
+      files: [{
+        path: "registry/default/example/SheetSideDemo.vue",
+        type: "registry:example",
+        target: "SheetSideDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SkeletonCard": {
+      name: "SkeletonCard",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/SkeletonCard.vue",
+        type: "registry:example",
+        target: "SkeletonCard.vue"
+      }],
+      component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SkeletonDemo": {
+      name: "SkeletonDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/SkeletonDemo.vue",
+        type: "registry:example",
+        target: "SkeletonDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SliderDemo": {
+      name: "SliderDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider","utils"],
+      files: [{
+        path: "registry/default/example/SliderDemo.vue",
+        type: "registry:example",
+        target: "SliderDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SliderForm": {
+      name: "SliderForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","slider","toast"],
+      files: [{
+        path: "registry/default/example/SliderForm.vue",
+        type: "registry:example",
+        target: "SliderForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SonnerDemo": {
+      name: "SonnerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/default/example/SonnerDemo.vue",
+        type: "registry:example",
+        target: "SonnerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SonnerWithDialog": {
+      name: "SonnerWithDialog",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","dialog"],
+      files: [{
+        path: "registry/default/example/SonnerWithDialog.vue",
+        type: "registry:example",
+        target: "SonnerWithDialog.vue"
+      }],
+      component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperDemo": {
+      name: "StepperDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["stepper"],
+      files: [{
+        path: "registry/default/example/StepperDemo.vue",
+        type: "registry:example",
+        target: "StepperDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperForm": {
+      name: "StepperForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","input","select","stepper","toast"],
+      files: [{
+        path: "registry/default/example/StepperForm.vue",
+        type: "registry:example",
+        target: "StepperForm.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperHorizental": {
+      name: "StepperHorizental",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","stepper"],
+      files: [{
+        path: "registry/default/example/StepperHorizental.vue",
+        type: "registry:example",
+        target: "StepperHorizental.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "StepperVertical": {
+      name: "StepperVertical",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","stepper"],
+      files: [{
+        path: "registry/default/example/StepperVertical.vue",
+        type: "registry:example",
+        target: "StepperVertical.vue"
+      }],
+      component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SwitchDemo": {
+      name: "SwitchDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","switch"],
+      files: [{
+        path: "registry/default/example/SwitchDemo.vue",
+        type: "registry:example",
+        target: "SwitchDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "SwitchForm": {
+      name: "SwitchForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","switch","toast"],
+      files: [{
+        path: "registry/default/example/SwitchForm.vue",
+        type: "registry:example",
+        target: "SwitchForm.vue"
+      }],
+      component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TableDemo": {
+      name: "TableDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      files: [{
+        path: "registry/default/example/TableDemo.vue",
+        type: "registry:example",
+        target: "TableDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TabsDemo": {
+      name: "TabsDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      files: [{
+        path: "registry/default/example/TabsDemo.vue",
+        type: "registry:example",
+        target: "TabsDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","card","input","label","tabs"],
+      files: [{
+        path: "registry/default/example/TabsVerticalDemo.vue",
+        type: "registry:example",
+        target: "TabsVerticalDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputComboboxDemo": {
+      name: "TagsInputComboboxDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["command","tags-input"],
+      files: [{
+        path: "registry/default/example/TagsInputComboboxDemo.vue",
+        type: "registry:example",
+        target: "TagsInputComboboxDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputDemo": {
+      name: "TagsInputDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tags-input"],
+      files: [{
+        path: "registry/default/example/TagsInputDemo.vue",
+        type: "registry:example",
+        target: "TagsInputDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TagsInputFormDemo": {
+      name: "TagsInputFormDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","tags-input","toast"],
+      files: [{
+        path: "registry/default/example/TagsInputFormDemo.vue",
+        type: "registry:example",
+        target: "TagsInputFormDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaDemo": {
+      name: "TextareaDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/example/TextareaDemo.vue",
+        type: "registry:example",
+        target: "TextareaDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaDisabled": {
+      name: "TextareaDisabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/default/example/TextareaDisabled.vue",
+        type: "registry:example",
+        target: "TextareaDisabled.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaForm": {
+      name: "TextareaForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","textarea","toast"],
+      files: [{
+        path: "registry/default/example/TextareaForm.vue",
+        type: "registry:example",
+        target: "TextareaForm.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithButton": {
+      name: "TextareaWithButton",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithButton.vue",
+        type: "registry:example",
+        target: "TextareaWithButton.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithLabel": {
+      name: "TextareaWithLabel",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithLabel.vue",
+        type: "registry:example",
+        target: "TextareaWithLabel.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TextareaWithText": {
+      name: "TextareaWithText",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label","textarea"],
+      files: [{
+        path: "registry/default/example/TextareaWithText.vue",
+        type: "registry:example",
+        target: "TextareaWithText.vue"
+      }],
+      component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastDemo": {
+      name: "ToastDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastDemo.vue",
+        type: "registry:example",
+        target: "ToastDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastDestructive": {
+      name: "ToastDestructive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","toast","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastDestructive.vue",
+        type: "registry:example",
+        target: "ToastDestructive.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastSimple": {
+      name: "ToastSimple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastSimple.vue",
+        type: "registry:example",
+        target: "ToastSimple.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastWithAction": {
+      name: "ToastWithAction",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","toast","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastWithAction.vue",
+        type: "registry:example",
+        target: "ToastWithAction.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToastWithTitle": {
+      name: "ToastWithTitle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","use-toast"],
+      files: [{
+        path: "registry/default/example/ToastWithTitle.vue",
+        type: "registry:example",
+        target: "ToastWithTitle.vue"
+      }],
+      component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleDemo": {
+      name: "ToggleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleDemo.vue",
+        type: "registry:example",
+        target: "ToggleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleDisabledDemo": {
+      name: "ToggleDisabledDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupDemo": {
+      name: "ToggleGroupDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupDisabledDemo": {
+      name: "ToggleGroupDisabledDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupDisabledDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupDisabledDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupLargeDemo": {
+      name: "ToggleGroupLargeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupLargeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupOutlineDemo": {
+      name: "ToggleGroupOutlineDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupOutlineDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupOutlineDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupSingleDemo": {
+      name: "ToggleGroupSingleDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupSingleDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSingleDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleGroupSmallDemo": {
+      name: "ToggleGroupSmallDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/default/example/ToggleGroupSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleGroupSmallDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleItalicDemo": {
+      name: "ToggleItalicDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleItalicDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleItalicWithTextDemo": {
+      name: "ToggleItalicWithTextDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleItalicWithTextDemo.vue",
+        type: "registry:example",
+        target: "ToggleItalicWithTextDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleLargeDemo": {
+      name: "ToggleLargeDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleLargeDemo.vue",
+        type: "registry:example",
+        target: "ToggleLargeDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "ToggleSmallDemo": {
+      name: "ToggleSmallDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/default/example/ToggleSmallDemo.vue",
+        type: "registry:example",
+        target: "ToggleSmallDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TooltipDemo": {
+      name: "TooltipDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","tooltip"],
+      files: [{
+        path: "registry/default/example/TooltipDemo.vue",
+        type: "registry:example",
+        target: "TooltipDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyBlockquote": {
+      name: "TypographyBlockquote",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyBlockquote.vue",
+        type: "registry:example",
+        target: "TypographyBlockquote.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyDemo": {
+      name: "TypographyDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyDemo.vue",
+        type: "registry:example",
+        target: "TypographyDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH1": {
+      name: "TypographyH1",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH1.vue",
+        type: "registry:example",
+        target: "TypographyH1.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH2": {
+      name: "TypographyH2",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH2.vue",
+        type: "registry:example",
+        target: "TypographyH2.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH3": {
+      name: "TypographyH3",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH3.vue",
+        type: "registry:example",
+        target: "TypographyH3.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyH4": {
+      name: "TypographyH4",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyH4.vue",
+        type: "registry:example",
+        target: "TypographyH4.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyInlineCode": {
+      name: "TypographyInlineCode",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyInlineCode.vue",
+        type: "registry:example",
+        target: "TypographyInlineCode.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyLarge": {
+      name: "TypographyLarge",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyLarge.vue",
+        type: "registry:example",
+        target: "TypographyLarge.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyLead": {
+      name: "TypographyLead",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyLead.vue",
+        type: "registry:example",
+        target: "TypographyLead.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyList": {
+      name: "TypographyList",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyList.vue",
+        type: "registry:example",
+        target: "TypographyList.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyMuted": {
+      name: "TypographyMuted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyMuted.vue",
+        type: "registry:example",
+        target: "TypographyMuted.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyP": {
+      name: "TypographyP",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyP.vue",
+        type: "registry:example",
+        target: "TypographyP.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographySmall": {
+      name: "TypographySmall",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographySmall.vue",
+        type: "registry:example",
+        target: "TypographySmall.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyTable": {
+      name: "TypographyTable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyTable.vue",
+        type: "registry:example",
+        target: "TypographyTable.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VCalendarDemo": {
+      name: "VCalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["v-calendar"],
+      files: [{
+        path: "registry/default/example/VCalendarDemo.vue",
+        type: "registry:example",
+        target: "VCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerDemo": {
+      name: "VDatePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerDemo.vue",
+        type: "registry:example",
+        target: "VDatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerForm": {
+      name: "VDatePickerForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: "VDatePickerForm.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "VDatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: "VDatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: "VDateTimePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","popover","v-calendar","utils"],
+      files: [{
+        path: "registry/default/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: "VRangePickerWithSlot.vue"
+      }],
+      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
     },
   },
 }
diff --git a/apps/www/registry/index.ts b/apps/www/registry/index.ts
deleted file mode 100644
index d52b98c27..000000000
--- a/apps/www/registry/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Registry } from '../registry/schema'
-import { hooks } from '../registry/registry-hooks'
-import { lib } from '../registry/registry-lib'
-import { themes } from '../registry/registry-themes'
-import { ui } from '../registry/registry-ui'
-
-export const registry: Registry = [
-  ...ui,
-  ...lib,
-  ...hooks,
-  ...themes,
-]
diff --git a/apps/www/registry/new-york/example/DonutChartDemo.vue b/apps/www/registry/new-york/example/DonutChartDemo.vue
deleted file mode 100644
index cf0e3753e..000000000
--- a/apps/www/registry/new-york/example/DonutChartDemo.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
-
-const data = [
-  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
-]
-
-const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
-</script>
-
-<template>
-  <DonutChart
-    index="name"
-    :category="'total'"
-    :data="data"
-    :value-formatter="valueFormatter"
-  />
-</template>
diff --git a/apps/www/registry/new-york/example/SonnerDemo.vue b/apps/www/registry/new-york/example/SonnerDemo.vue
deleted file mode 100644
index d8aae57b4..000000000
--- a/apps/www/registry/new-york/example/SonnerDemo.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from 'vue-sonner'
-</script>
-
-<template>
-  <Button
-    variant="outline" @click="() => {
-      toast('Event has been created', {
-        description: 'Sunday, December 03, 2023 at 9:00 AM',
-        action: {
-          label: 'Undo',
-          onClick: () => console.log('Undo'),
-        },
-      })
-    }"
-  >
-    Add to calendar
-  </Button>
-</template>
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 52ef035bd..755fbdd64 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -3,7 +3,7 @@ import type {
   Registry,
   RegistryEntry,
   registryItemTypeSchema,
-} from '../registry/schema'
+} from '../src/registry/schema'
 // @sts-nocheck
 import { existsSync, promises as fs } from 'node:fs'
 import { tmpdir } from 'node:os'
@@ -11,16 +11,16 @@ import path from 'node:path'
 import { template } from 'lodash-es'
 import { rimraf } from 'rimraf'
 
-import { registry } from '../registry'
-import { buildRegistry as crawlContent } from '../registry/crawl-content'
-import { baseColors } from '../registry/registry-base-colors'
-import { colorMapping, colors } from '../registry/registry-colors'
-import { iconLibraries, icons } from '../registry/registry-icons'
-import { styles } from '../registry/registry-styles'
+import { registry } from '../src/registry'
+import { buildRegistry as crawlContent } from '../src/registry/crawl-content'
+import { baseColors } from '../src/registry/registry-base-colors'
+import { colorMapping, colors } from '../src/registry/registry-colors'
+import { iconLibraries, icons } from '../src/registry/registry-icons'
+import { styles } from '../src/registry/registry-styles'
 import {
   registryEntrySchema,
   registrySchema,
-} from '../registry/schema'
+} from '../src/registry/schema'
 import { fixImport } from './fix-import'
 
 const REGISTRY_PATH = path.join(process.cwd(), 'src/public/r')
@@ -75,9 +75,10 @@ export const Index: Record<string, any> = {
       // const chunks: any = []
       if (item.type === 'registry:block') {
         const file = resolveFiles[0]
-        const filename = path.basename(file)
+        console.log(item, file)
         let raw: string
         try {
+          const filename = path.basename(file)
           raw = await fs.readFile(file, 'utf8')
         }
         catch (error) {
@@ -302,7 +303,7 @@ export const Index: Record<string, any> = {
         target: "${file.target ?? ''}"
       }`
       })}],
-      component: React.lazy(() => import("${componentPath}")),
+      component: () => import("${componentPath}").then((m) => m.default),
       source: "${sourceFilename}",
       category: "${item.category ?? ''}",
       subcategory: "${item.subcategory ?? ''}"
@@ -867,9 +868,9 @@ export const Icons = {
       const packageName = iconLibraries[library as keyof typeof iconLibraries].package
       if (packageName) {
         index += `
-  ${library}: React.lazy(() => import("${packageName}").then(mod => ({
+  ${library}:  () => import("${packageName}").then(mod => ({
     default: mod.${componentName}
-  }))),`
+  })),`
       }
     }
     index += `
@@ -893,6 +894,12 @@ try {
   const content = await crawlContent()
   const result = registrySchema.safeParse([...registry, ...content])
 
+  await fs.writeFile(
+    path.join(REGISTRY_PATH, 'temp.json'),
+    JSON.stringify(result.data ?? '', null, 2),
+    'utf8',
+  )
+
   if (!result.success) {
     console.error(result.error)
     process.exit(1)
@@ -903,8 +910,8 @@ try {
   await buildStylesIndex()
   await buildThemes()
 
-  await buildRegistryIcons()
-  await buildIcons()
+  // await buildRegistryIcons()
+  // await buildIcons()
 
   // eslint-disable-next-line no-console
   console.log('✅ Done!')
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 77d14fbf9..94d342cd5 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project:
 
-<<< @/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
+<<< @/registry/default/ui/aspect-ratio/AspectRatio.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index c1fda501b..69f81a6ba 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -115,27 +115,27 @@ npm install reka-ui vee-validate @vee-validate/zod zod
 
 `index.ts`
 
-<<< @/lib/registry/default/ui/form/index.ts
+<<< @/registry/default/ui/form/index.ts
 
 `FormItem.vue`
 
-<<< @/lib/registry/default/ui/form/FormItem.vue
+<<< @/registry/default/ui/form/FormItem.vue
 
 `FormLabel.vue`
 
-<<< @/lib/registry/default/ui/form/FormLabel.vue
+<<< @/registry/default/ui/form/FormLabel.vue
 
 `FormControl.vue`
 
-<<< @/lib/registry/default/ui/form/FormControl.vue
+<<< @/registry/default/ui/form/FormControl.vue
 
 `FormMessage.vue`
 
-<<< @/lib/registry/default/ui/form/FormMessage.vue
+<<< @/registry/default/ui/form/FormMessage.vue
 
 `FormDescription.vue`
 
-<<< @/lib/registry/default/ui/form/FormDescription.vue
+<<< @/registry/default/ui/form/FormDescription.vue
 
 ### Update the import paths to match your project setup.
 
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index ecb66a151..e11b2d2b6 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -21,7 +21,7 @@ npx shadcn-vue@latest add input
 
 ### Copy and paste the following code into your project:
 
-<<< @/lib/registry/default/ui/input/Input.vue
+<<< @/registry/default/ui/input/Input.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 18fe0ef7f..4306cd8e9 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project:
 
-<<< @/lib/registry/default/ui/label/Label.vue
+<<< @/registry/default/ui/label/Label.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 62f9f24a5..577a319da 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project:
 
- <<< @/lib/registry/default/ui/progress/Progress.vue
+ <<< @/registry/default/ui/progress/Progress.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/resizable.md b/apps/www/src/content/docs/components/resizable.md
index 3c51b2b61..86877afe7 100644
--- a/apps/www/src/content/docs/components/resizable.md
+++ b/apps/www/src/content/docs/components/resizable.md
@@ -31,15 +31,15 @@ npm install reka-ui
 
 `index.ts`
 
-<<< @/lib/registry/default/ui/resizable/index.ts
+<<< @/registry/default/ui/resizable/index.ts
 
 `ResizablePanelGroup.vue`
 
-<<< @/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
+<<< @/registry/default/ui/resizable/ResizablePanelGroup.vue
 
 `ResizableHandle.vue`
 
-<<< @/lib/registry/default/ui/resizable/ResizableHandle.vue
+<<< @/registry/default/ui/resizable/ResizableHandle.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index c3cdc6481..e655a74e6 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/separator/Separator.vue
+<<< @/registry/default/ui/separator/Separator.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index fc9b32488..927b6b918 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -21,7 +21,7 @@ npx shadcn-vue@latest add skeleton
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
+<<< @/registry/default/ui/skeleton/Skeleton.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index aecce7648..cd7b9f55d 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project
 
- <<< @/lib/registry/default/ui/switch/Switch.vue
+ <<< @/registry/default/ui/switch/Switch.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 9cad33057..d5ecf1984 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -27,7 +27,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/textarea/Textarea.vue
+<<< @/registry/default/ui/textarea/Textarea.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md
index 60523148f..a466d573c 100644
--- a/apps/www/src/content/docs/components/toggle-group.md
+++ b/apps/www/src/content/docs/components/toggle-group.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/toggle-group/ToggleGroup.vue
+<<< @/registry/default/ui/toggle-group/ToggleGroup.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 6a9115077..93128c80e 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -29,7 +29,7 @@ npm install reka-ui
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/toggle/Toggle.vue
+<<< @/registry/default/ui/toggle/Toggle.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/v-calendar.md b/apps/www/src/content/docs/components/v-calendar.md
index c5c9b0973..1145af1ee 100644
--- a/apps/www/src/content/docs/components/v-calendar.md
+++ b/apps/www/src/content/docs/components/v-calendar.md
@@ -33,7 +33,7 @@ npm install v-calendar
 
 ### Copy and paste the following code into your project
 
-<<< @/lib/registry/default/ui/v-calendar/Calendar.vue
+<<< @/registry/default/ui/v-calendar/Calendar.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/contribution.md b/apps/www/src/content/docs/contribution.md
index ee54db1fc..38d2a33cb 100644
--- a/apps/www/src/content/docs/contribution.md
+++ b/apps/www/src/content/docs/contribution.md
@@ -3,7 +3,7 @@ title: Contribution
 description: Learn on how to contribute to shadcn/vue.
 ---
 <script setup lang="ts">
-import { Button } from "@/lib/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 const latestSyncCommitTag = "06cc0cdf3d080555d26abbe6639f2d7f6341ec73"
 
diff --git a/apps/www/src/content/docs/dark-mode/vitepress.md b/apps/www/src/content/docs/dark-mode/vitepress.md
index 66f1b39f8..3fc6b00bd 100644
--- a/apps/www/src/content/docs/dark-mode/vitepress.md
+++ b/apps/www/src/content/docs/dark-mode/vitepress.md
@@ -27,7 +27,7 @@ We're using [`useToggle`](https://vueuse.org/shared/useToggle/) from [`@vueuse/c
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import { useToggle } from '@vueuse/core'
 import { useData } from 'vitepress'
 
diff --git a/apps/www/src/content/docs/figma.md b/apps/www/src/content/docs/figma.md
index 161292b5f..62268f1ec 100644
--- a/apps/www/src/content/docs/figma.md
+++ b/apps/www/src/content/docs/figma.md
@@ -4,7 +4,7 @@ description: Every component recreated in Figma. With customizable props, typogr
 ---
 
 <script setup>
-import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio';
+import { AspectRatio } from '@/registry/default/ui/aspect-ratio';
 </script>
 
 The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano).
diff --git a/apps/www/src/content/docs/introduction.md b/apps/www/src/content/docs/introduction.md
index eabaa5e5d..dd97d65a4 100644
--- a/apps/www/src/content/docs/introduction.md
+++ b/apps/www/src/content/docs/introduction.md
@@ -4,7 +4,7 @@ description: Re-usable components built with Radix Vue, and Tailwind CSS.
 ---
 
 <script setup>
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'
 </script>
 
 An unofficial, community-led [Vue](https://vuejs.org/) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a Vue version of his work. This project was born out of the need for a similar project for the Vue ecosystem.
diff --git a/apps/www/src/examples/authentication/Example.vue b/apps/www/src/examples/authentication/Example.vue
index fe6655f13..a25ef303d 100644
--- a/apps/www/src/examples/authentication/Example.vue
+++ b/apps/www/src/examples/authentication/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import UserAuthForm from './components/UserAuthForm.vue'
 </script>
 
diff --git a/apps/www/src/examples/authentication/components/UserAuthForm.vue b/apps/www/src/examples/authentication/components/UserAuthForm.vue
index 4a7417ec6..900ef9e7d 100644
--- a/apps/www/src/examples/authentication/components/UserAuthForm.vue
+++ b/apps/www/src/examples/authentication/components/UserAuthForm.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
-
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
+
+import { Label } from '@/registry/new-york/ui/label'
 import LucideSpinner from '~icons/lucide/loader-2'
 import GitHubLogo from '~icons/radix-icons/github-logo'
 import { ref } from 'vue'
diff --git a/apps/www/src/examples/cards/components/CookieSettings.vue b/apps/www/src/examples/cards/components/CookieSettings.vue
index 50115bac6..9454adb33 100644
--- a/apps/www/src/examples/cards/components/CookieSettings.vue
+++ b/apps/www/src/examples/cards/components/CookieSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,9 +7,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
+} from '@/registry/new-york/ui/card'
+import { Label } from '@/registry/new-york/ui/label'
+import { Switch } from '@/registry/new-york/ui/switch'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/CreateAccount.vue b/apps/www/src/examples/cards/components/CreateAccount.vue
index b40dcd611..067bb7771 100644
--- a/apps/www/src/examples/cards/components/CreateAccount.vue
+++ b/apps/www/src/examples/cards/components/CreateAccount.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,9 +7,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import GitHubIcon from '~icons/radix-icons/github-logo'
 </script>
 
diff --git a/apps/www/src/examples/cards/components/DatePicker.vue b/apps/www/src/examples/cards/components/DatePicker.vue
index e48a8f09d..c59fccdf3 100644
--- a/apps/www/src/examples/cards/components/DatePicker.vue
+++ b/apps/www/src/examples/cards/components/DatePicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import DatePickerWithRange from '@/lib/registry/default/example/DatePickerWithRange.vue'
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import DatePickerWithRange from '@/registry/default/example/DatePickerWithRange.vue'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
index 0b58b1c16..86b395c70 100644
--- a/apps/www/src/examples/cards/components/GitHubCard.vue
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
+} from '@/registry/new-york/ui/card'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -15,8 +15,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Separator } from '@/registry/new-york/ui/separator'
 
 import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 import CircleIcon from '~icons/radix-icons/circle'
diff --git a/apps/www/src/examples/cards/components/Notifications.vue b/apps/www/src/examples/cards/components/Notifications.vue
index 92ec37724..6e5f04b7f 100644
--- a/apps/www/src/examples/cards/components/Notifications.vue
+++ b/apps/www/src/examples/cards/components/Notifications.vue
@@ -5,7 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
+} from '@/registry/new-york/ui/card'
 import BellIcon from '~icons/radix-icons/bell'
 import EyeNoneIcon from '~icons/radix-icons/eye-none'
 
diff --git a/apps/www/src/examples/cards/components/PaymentMethod.vue b/apps/www/src/examples/cards/components/PaymentMethod.vue
index de92c2ac0..a17d7bfed 100644
--- a/apps/www/src/examples/cards/components/PaymentMethod.vue
+++ b/apps/www/src/examples/cards/components/PaymentMethod.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,17 +7,17 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/ReportAnIssue.vue b/apps/www/src/examples/cards/components/ReportAnIssue.vue
index 7b01eb81e..912e4f681 100644
--- a/apps/www/src/examples/cards/components/ReportAnIssue.vue
+++ b/apps/www/src/examples/cards/components/ReportAnIssue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,17 +7,17 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+} from '@/registry/new-york/ui/select'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/ShareDocument.vue b/apps/www/src/examples/cards/components/ShareDocument.vue
index 5c067d635..558bd3bde 100644
--- a/apps/www/src/examples/cards/components/ShareDocument.vue
+++ b/apps/www/src/examples/cards/components/ShareDocument.vue
@@ -3,24 +3,24 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/select'
+import { Separator } from '@/registry/new-york/ui/separator'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/TeamMembers.vue b/apps/www/src/examples/cards/components/TeamMembers.vue
index 1ac3411ff..9602c4871 100644
--- a/apps/www/src/examples/cards/components/TeamMembers.vue
+++ b/apps/www/src/examples/cards/components/TeamMembers.vue
@@ -3,8 +3,8 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
 
 import {
   Card,
@@ -12,13 +12,13 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/card'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/registry/new-york/ui/popover'
 import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 
 import { ref } from 'vue'
diff --git a/apps/www/src/examples/dashboard/Example.vue b/apps/www/src/examples/dashboard/Example.vue
index 20dd3d915..2e54bfd36 100644
--- a/apps/www/src/examples/dashboard/Example.vue
+++ b/apps/www/src/examples/dashboard/Example.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
+} from '@/registry/new-york/ui/card'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 import DateRangePicker from './components/DateRangePicker.vue'
 import MainNav from './components/MainNav.vue'
 import Overview from './components/Overview.vue'
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index c96135753..16dba151c 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { DateRange } from 'reka-ui'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
+import { RangeCalendar } from '@/registry/new-york/ui/range-calendar'
 import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { type Ref, ref } from 'vue'
diff --git a/apps/www/src/examples/dashboard/components/Overview.vue b/apps/www/src/examples/dashboard/components/Overview.vue
index 0e932772c..3a7b9df95 100644
--- a/apps/www/src/examples/dashboard/components/Overview.vue
+++ b/apps/www/src/examples/dashboard/components/Overview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },
diff --git a/apps/www/src/examples/dashboard/components/RecentSales.vue b/apps/www/src/examples/dashboard/components/RecentSales.vue
index a32bbbbc2..155e075c1 100644
--- a/apps/www/src/examples/dashboard/components/RecentSales.vue
+++ b/apps/www/src/examples/dashboard/components/RecentSales.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
+} from '@/registry/new-york/ui/avatar'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/dashboard/components/Search.vue b/apps/www/src/examples/dashboard/components/Search.vue
index d9b22eb38..05ef44586 100644
--- a/apps/www/src/examples/dashboard/components/Search.vue
+++ b/apps/www/src/examples/dashboard/components/Search.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Input } from '@/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
index 9548a9f08..fc96af6c6 100644
--- a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
+++ b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/registry/new-york/ui/command'
+
 import {
   Dialog,
   DialogContent,
@@ -14,24 +16,22 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-
+} from '@/registry/new-york/ui/popover'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/select'
 import CaretSortIcon from '~icons/radix-icons/caret-sort'
 import CheckIcon from '~icons/radix-icons/check'
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
diff --git a/apps/www/src/examples/dashboard/components/UserNav.vue b/apps/www/src/examples/dashboard/components/UserNav.vue
index d05e0b1cc..a649720fd 100644
--- a/apps/www/src/examples/dashboard/components/UserNav.vue
+++ b/apps/www/src/examples/dashboard/components/UserNav.vue
@@ -3,8 +3,8 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index e961a97b8..732bd5fcd 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Calendar } from '@/registry/new-york/ui/calendar'
 import {
   Command,
   CommandEmpty,
@@ -8,19 +9,18 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/new-york/ui/command'
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/command'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/popover'
 
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { Separator } from '@/registry/new-york/ui/separator'
 
-import { cn } from '@/lib/utils'
+import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
 import { toTypedSchema } from '@vee-validate/zod'
 import RadixIconsCalendar from '~icons/radix-icons/calendar'
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index b5f766de7..9b2a2d10c 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
-import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-
-import { toast } from '@/lib/registry/new-york/ui/toast'
 import { cn } from '@/lib/utils'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'
+import { Button, buttonVariants } from '@/registry/new-york/ui/button'
+
+import { Separator } from '@/registry/new-york/ui/separator'
+import { toast } from '@/registry/new-york/ui/toast'
 import { ChevronDownIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/src/examples/forms/components/DisplayForm.vue b/apps/www/src/examples/forms/components/DisplayForm.vue
index 779d1b9b9..ef4e1d3ac 100644
--- a/apps/www/src/examples/forms/components/DisplayForm.vue
+++ b/apps/www/src/examples/forms/components/DisplayForm.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'
+import { Button } from '@/registry/new-york/ui/button'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { Separator } from '@/registry/new-york/ui/separator'
 
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/src/examples/forms/components/NotificationsForm.vue b/apps/www/src/examples/forms/components/NotificationsForm.vue
index 1a6e43fb8..aafc505e8 100644
--- a/apps/www/src/examples/forms/components/NotificationsForm.vue
+++ b/apps/www/src/examples/forms/components/NotificationsForm.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'
+import { Button } from '@/registry/new-york/ui/button'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'
 
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { Separator } from '@/registry/new-york/ui/separator'
+import { Switch } from '@/registry/new-york/ui/switch'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue
index 08cd82155..190ea49c1 100644
--- a/apps/www/src/examples/forms/components/ProfileForm.vue
+++ b/apps/www/src/examples/forms/components/ProfileForm.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { cn } from '@/lib/utils'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Select,
   SelectContent,
@@ -9,12 +10,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+} from '@/registry/new-york/ui/select'
+import { Separator } from '@/registry/new-york/ui/separator'
 
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
+import { Textarea } from '@/registry/new-york/ui/textarea'
+import { toast } from '@/registry/new-york/ui/toast'
 import { Cross1Icon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { FieldArray, useForm } from 'vee-validate'
diff --git a/apps/www/src/examples/forms/components/SidebarNav.vue b/apps/www/src/examples/forms/components/SidebarNav.vue
index b4a643052..c9291a839 100644
--- a/apps/www/src/examples/forms/components/SidebarNav.vue
+++ b/apps/www/src/examples/forms/components/SidebarNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import { useRoute } from 'vitepress'
 
 interface Item {
diff --git a/apps/www/src/examples/forms/layouts/FormsLayout.vue b/apps/www/src/examples/forms/layouts/FormsLayout.vue
index 814268f96..b3e893842 100644
--- a/apps/www/src/examples/forms/layouts/FormsLayout.vue
+++ b/apps/www/src/examples/forms/layouts/FormsLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Separator } from '@/registry/new-york/ui/separator'
 import SidebarNav from '../components/SidebarNav.vue'
 </script>
 
diff --git a/apps/www/src/examples/mail/components/AccountSwitcher.vue b/apps/www/src/examples/mail/components/AccountSwitcher.vue
index 0b0033bc4..6c39a3870 100644
--- a/apps/www/src/examples/mail/components/AccountSwitcher.vue
+++ b/apps/www/src/examples/mail/components/AccountSwitcher.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
 import { cn } from '@/lib/utils'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'
 import { Icon } from '@iconify/vue'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/src/examples/mail/components/Mail.vue b/apps/www/src/examples/mail/components/Mail.vue
index 16172fb4d..389e4ba62 100644
--- a/apps/www/src/examples/mail/components/Mail.vue
+++ b/apps/www/src/examples/mail/components/Mail.vue
@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 import type { Mail } from '../data/mails'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { cn } from '@/lib/utils'
+import { Input } from '@/registry/new-york/ui/input'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
-import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/tabs'
+import { TooltipProvider } from '@/registry/new-york/ui/tooltip'
 import { refDebounced } from '@vueuse/core'
 import {
   Search,
diff --git a/apps/www/src/examples/mail/components/MailDisplay.vue b/apps/www/src/examples/mail/components/MailDisplay.vue
index de7c78eb7..b06b568dc 100644
--- a/apps/www/src/examples/mail/components/MailDisplay.vue
+++ b/apps/www/src/examples/mail/components/MailDisplay.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import type { Mail } from '../data/mails'
-import { Avatar, AvatarFallback } from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { Avatar, AvatarFallback } from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Label } from '@/registry/new-york/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { Separator } from '@/registry/new-york/ui/separator'
+import { Switch } from '@/registry/new-york/ui/switch'
+import { Textarea } from '@/registry/new-york/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
 import addDays from 'date-fns/addDays'
 import addHours from 'date-fns/addHours'
 import format from 'date-fns/format'
diff --git a/apps/www/src/examples/mail/components/MailList.vue b/apps/www/src/examples/mail/components/MailList.vue
index 6f7ba6af5..e4bb31d71 100644
--- a/apps/www/src/examples/mail/components/MailList.vue
+++ b/apps/www/src/examples/mail/components/MailList.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Mail } from '../data/mails'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
 import { cn } from '@/lib/utils'
+import { Badge } from '@/registry/new-york/ui/badge'
+import { ScrollArea } from '@/registry/new-york/ui/scroll-area'
 import { formatDistanceToNow } from 'date-fns'
 
 interface MailListProps {
diff --git a/apps/www/src/examples/mail/components/Nav.vue b/apps/www/src/examples/mail/components/Nav.vue
index a2efdf4f6..85a6872a5 100644
--- a/apps/www/src/examples/mail/components/Nav.vue
+++ b/apps/www/src/examples/mail/components/Nav.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/tooltip'
 import { Icon } from '@iconify/vue'
 
 export interface LinkProp {
diff --git a/apps/www/src/examples/music/Example.vue b/apps/www/src/examples/music/Example.vue
index fd0820b58..12569a514 100644
--- a/apps/www/src/examples/music/Example.vue
+++ b/apps/www/src/examples/music/Example.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Button } from '@/registry/new-york/ui/button'
+import { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
 import AlbumArtwork from './components/AlbumArtwork.vue'
diff --git a/apps/www/src/examples/music/components/AlbumArtwork.vue b/apps/www/src/examples/music/components/AlbumArtwork.vue
index 59b4586f4..a5eb069c0 100644
--- a/apps/www/src/examples/music/components/AlbumArtwork.vue
+++ b/apps/www/src/examples/music/components/AlbumArtwork.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Album } from '../data/albums'
+import { cn } from '@/lib/utils'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -9,8 +10,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '@/lib/registry/new-york/ui/context-menu'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/context-menu'
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
 import { playlists } from '../data/playlists'
 
diff --git a/apps/www/src/examples/music/components/Menu.vue b/apps/www/src/examples/music/components/Menu.vue
index 3618f5d83..64a7022f9 100644
--- a/apps/www/src/examples/music/components/Menu.vue
+++ b/apps/www/src/examples/music/components/Menu.vue
@@ -14,7 +14,7 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from '@/lib/registry/new-york/ui/menubar'
+} from '@/registry/new-york/ui/menubar'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/music/components/PodcastEmptyPlaceholder.vue b/apps/www/src/examples/music/components/PodcastEmptyPlaceholder.vue
index 2d7e996ca..d0a0daad2 100644
--- a/apps/www/src/examples/music/components/PodcastEmptyPlaceholder.vue
+++ b/apps/www/src/examples/music/components/PodcastEmptyPlaceholder.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,9 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/music/components/Sidebar.vue b/apps/www/src/examples/music/components/Sidebar.vue
index 7b253370b..c4d5f72ba 100644
--- a/apps/www/src/examples/music/components/Sidebar.vue
+++ b/apps/www/src/examples/music/components/Sidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Playlist } from '../data/playlists'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { ScrollArea } from '@/registry/new-york/ui/scroll-area'
 
 interface SidebarProps {
   playlists: Playlist[]
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
index 0975ba397..de44ed596 100644
--- a/apps/www/src/examples/playground/Example.vue
+++ b/apps/www/src/examples/playground/Example.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/hover-card'
+import { Label } from '@/registry/new-york/ui/label'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+} from '@/registry/new-york/ui/tabs'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-clock'
 import CodeViewer from './components/CodeViewer.vue'
 import MaxLengthSelector from './components/MaxLengthSelector.vue'
diff --git a/apps/www/src/examples/playground/components/CodeViewer.vue b/apps/www/src/examples/playground/components/CodeViewer.vue
index fce88af83..405967812 100644
--- a/apps/www/src/examples/playground/components/CodeViewer.vue
+++ b/apps/www/src/examples/playground/components/CodeViewer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/playground/components/MaxLengthSelector.vue b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
index 86520feb8..d40781b56 100644
--- a/apps/www/src/examples/playground/components/MaxLengthSelector.vue
+++ b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
@@ -4,9 +4,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Slider } from '@/lib/registry/new-york/ui/slider'
+} from '@/registry/new-york/ui/hover-card'
+import { Label } from '@/registry/new-york/ui/label'
+import { Slider } from '@/registry/new-york/ui/slider'
 import { ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/examples/playground/components/PresetActions.vue b/apps/www/src/examples/playground/components/PresetActions.vue
index 3c2a08c03..6ec211f90 100644
--- a/apps/www/src/examples/playground/components/PresetActions.vue
+++ b/apps/www/src/examples/playground/components/PresetActions.vue
@@ -7,8 +7,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/lib/registry/new-york/ui/alert-dialog'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/alert-dialog'
+import { Button } from '@/registry/new-york/ui/button'
 
 import {
   Dialog,
@@ -17,20 +17,20 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Label } from '@/registry/new-york/ui/label'
+import { Switch } from '@/registry/new-york/ui/switch'
 import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
 import { ref } from 'vue'
 
-// import { toast } from "@/lib/registry/new-york/ui/use-toast"
+// import { toast } from "@/registry/new-york/ui/use-toast"
 
 const open = ref(false)
 const showDeleteDialog = ref(false)
diff --git a/apps/www/src/examples/playground/components/PresetSave.vue b/apps/www/src/examples/playground/components/PresetSave.vue
index af3976c69..b0ef274bd 100644
--- a/apps/www/src/examples/playground/components/PresetSave.vue
+++ b/apps/www/src/examples/playground/components/PresetSave.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,9 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/playground/components/PresetShare.vue b/apps/www/src/examples/playground/components/PresetShare.vue
index 0723d2f52..093b2d8d1 100644
--- a/apps/www/src/examples/playground/components/PresetShare.vue
+++ b/apps/www/src/examples/playground/components/PresetShare.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/registry/new-york/ui/popover'
 import CopyIcon from '~icons/radix-icons/copy'
 </script>
 
diff --git a/apps/www/src/examples/playground/components/TemperatureSelector.vue b/apps/www/src/examples/playground/components/TemperatureSelector.vue
index 681a0eb6d..2b0ccae0b 100644
--- a/apps/www/src/examples/playground/components/TemperatureSelector.vue
+++ b/apps/www/src/examples/playground/components/TemperatureSelector.vue
@@ -5,9 +5,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Slider } from '@/lib/registry/new-york/ui/slider'
+} from '@/registry/new-york/ui/hover-card'
+import { Label } from '@/registry/new-york/ui/label'
+import { Slider } from '@/registry/new-york/ui/slider'
 import { ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/examples/playground/components/TopPSelector.vue b/apps/www/src/examples/playground/components/TopPSelector.vue
index d4df13789..77e690192 100644
--- a/apps/www/src/examples/playground/components/TopPSelector.vue
+++ b/apps/www/src/examples/playground/components/TopPSelector.vue
@@ -5,9 +5,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Slider } from '@/lib/registry/new-york/ui/slider'
+} from '@/registry/new-york/ui/hover-card'
+import { Label } from '@/registry/new-york/ui/label'
+import { Slider } from '@/registry/new-york/ui/slider'
 import { ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/examples/tasks/components/DataTable.vue b/apps/www/src/examples/tasks/components/DataTable.vue
index 0f1a00f65..1b9c2aa9e 100644
--- a/apps/www/src/examples/tasks/components/DataTable.vue
+++ b/apps/www/src/examples/tasks/components/DataTable.vue
@@ -7,6 +7,7 @@ import type {
 } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
 
+import { valueUpdater } from '@/lib/utils'
 import {
   Table,
   TableBody,
@@ -14,8 +15,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/new-york/ui/table'
 import {
   FlexRender,
   getCoreRowModel,
diff --git a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
index b59dac447..5ef604b24 100644
--- a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
+++ b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { Column } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/dropdown-menu'
 import ArrowDownIcon from '~icons/radix-icons/arrow-down'
 
 import ArrowUpIcon from '~icons/radix-icons/arrow-up'
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index e5ceefa22..3a3c68c84 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -2,17 +2,17 @@
 import type { Column } from '@tanstack/vue-table'
 import type { Component } from 'vue'
 import type { Task } from '../data/schema'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/registry/new-york/ui/badge'
+import { Button } from '@/registry/new-york/ui/button'
 
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/registry/new-york/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
+import { Separator } from '@/registry/new-york/ui/separator'
 
 import CheckIcon from '~icons/radix-icons/check'
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
diff --git a/apps/www/src/examples/tasks/components/DataTablePagination.vue b/apps/www/src/examples/tasks/components/DataTablePagination.vue
index 5d3964109..b02e37ab0 100644
--- a/apps/www/src/examples/tasks/components/DataTablePagination.vue
+++ b/apps/www/src/examples/tasks/components/DataTablePagination.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 import ChevronLeftIcon from '~icons/radix-icons/chevron-left'
 import ChevronRightIcon from '~icons/radix-icons/chevron-right'
 
diff --git a/apps/www/src/examples/tasks/components/DataTableRowActions.vue b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
index 20cd207da..c636e1adc 100644
--- a/apps/www/src/examples/tasks/components/DataTableRowActions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Row } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
 import { computed } from 'vue'
 
diff --git a/apps/www/src/examples/tasks/components/DataTableToolbar.vue b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
index 0544594f0..8bed9bbbd 100644
--- a/apps/www/src/examples/tasks/components/DataTableToolbar.vue
+++ b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Input } from '@/registry/new-york/ui/input'
 import Cross2Icon from '~icons/radix-icons/cross-2'
 import { computed } from 'vue'
 import { priorities, statuses } from '../data/data'
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 746cdd7c8..40dd8f53f 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -9,7 +9,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 
 import MixerHorizontalIcon from '~icons/radix-icons/mixer-horizontal'
 import { computed } from 'vue'
diff --git a/apps/www/src/examples/tasks/components/UserNav.vue b/apps/www/src/examples/tasks/components/UserNav.vue
index e5868674a..ba0eccbd2 100644
--- a/apps/www/src/examples/tasks/components/UserNav.vue
+++ b/apps/www/src/examples/tasks/components/UserNav.vue
@@ -3,8 +3,8 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index 38514f201..b3dcff7ba 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -1,8 +1,8 @@
 import type { ColumnDef } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
 
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Badge } from '@/registry/new-york/ui/badge'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import { h } from 'vue'
 import { labels, priorities, statuses } from '../data/data'
 import DataTableColumnHeader from './DataTableColumnHeader.vue'
diff --git a/apps/www/registry/default/lib/utils.ts b/apps/www/src/lib/utils.ts
similarity index 100%
rename from apps/www/registry/default/lib/utils.ts
rename to apps/www/src/lib/utils.ts
diff --git a/apps/www/src/public/r/colors/gray.json b/apps/www/src/public/r/colors/gray.json
new file mode 100644
index 000000000..0f3cd093e
--- /dev/null
+++ b/apps/www/src/public/r/colors/gray.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "gray-950",
+      "card": "white",
+      "card-foreground": "gray-950",
+      "popover": "white",
+      "popover-foreground": "gray-950",
+      "primary": "gray-900",
+      "primary-foreground": "gray-50",
+      "secondary": "gray-100",
+      "secondary-foreground": "gray-900",
+      "muted": "gray-100",
+      "muted-foreground": "gray-500",
+      "accent": "gray-100",
+      "accent-foreground": "gray-900",
+      "destructive": "red-500",
+      "destructive-foreground": "gray-50",
+      "border": "gray-200",
+      "input": "gray-200",
+      "ring": "gray-950"
+    },
+    "dark": {
+      "background": "gray-950",
+      "foreground": "gray-50",
+      "card": "gray-950",
+      "card-foreground": "gray-50",
+      "popover": "gray-950",
+      "popover-foreground": "gray-50",
+      "primary": "gray-50",
+      "primary-foreground": "gray-900",
+      "secondary": "gray-800",
+      "secondary-foreground": "gray-50",
+      "muted": "gray-800",
+      "muted-foreground": "gray-400",
+      "accent": "gray-800",
+      "accent-foreground": "gray-50",
+      "destructive": "red-900",
+      "destructive-foreground": "gray-50",
+      "border": "gray-800",
+      "input": "gray-800",
+      "ring": "gray-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/www/src/public/r/colors/index.json b/apps/www/src/public/r/colors/index.json
new file mode 100644
index 000000000..6b70773e7
--- /dev/null
+++ b/apps/www/src/public/r/colors/index.json
@@ -0,0 +1,1999 @@
+{
+  "inherit": "inherit",
+  "current": "currentColor",
+  "transparent": "transparent",
+  "black": {
+    "hex": "#000000",
+    "rgb": "rgb(0,0,0)",
+    "hsl": "hsl(0,0%,0%)",
+    "rgbChannel": "0 0 0",
+    "hslChannel": "0 0% 0%"
+  },
+  "white": {
+    "hex": "#ffffff",
+    "rgb": "rgb(255,255,255)",
+    "hsl": "hsl(0,0%,100%)",
+    "rgbChannel": "255 255 255",
+    "hslChannel": "0 0% 100%"
+  },
+  "slate": [
+    {
+      "scale": 50,
+      "hex": "#f8fafc",
+      "rgb": "rgb(248,250,252)",
+      "hsl": "hsl(210,40%,98%)",
+      "rgbChannel": "248 250 252",
+      "hslChannel": "210 40% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f1f5f9",
+      "rgb": "rgb(241,245,249)",
+      "hsl": "hsl(210,40%,96.1%)",
+      "rgbChannel": "241 245 249",
+      "hslChannel": "210 40% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e2e8f0",
+      "rgb": "rgb(226,232,240)",
+      "hsl": "hsl(214.3,31.8%,91.4%)",
+      "rgbChannel": "226 232 240",
+      "hslChannel": "214.3 31.8% 91.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#cbd5e1",
+      "rgb": "rgb(203,213,225)",
+      "hsl": "hsl(212.7,26.8%,83.9%)",
+      "rgbChannel": "203 213 225",
+      "hslChannel": "212.7 26.8% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#94a3b8",
+      "rgb": "rgb(148,163,184)",
+      "hsl": "hsl(215,20.2%,65.1%)",
+      "rgbChannel": "148 163 184",
+      "hslChannel": "215 20.2% 65.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#64748b",
+      "rgb": "rgb(100,116,139)",
+      "hsl": "hsl(215.4,16.3%,46.9%)",
+      "rgbChannel": "100 116 139",
+      "hslChannel": "215.4 16.3% 46.9%"
+    },
+    {
+      "scale": 600,
+      "hex": "#475569",
+      "rgb": "rgb(71,85,105)",
+      "hsl": "hsl(215.3,19.3%,34.5%)",
+      "rgbChannel": "71 85 105",
+      "hslChannel": "215.3 19.3% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#334155",
+      "rgb": "rgb(51,65,85)",
+      "hsl": "hsl(215.3,25%,26.7%)",
+      "rgbChannel": "51 65 85",
+      "hslChannel": "215.3 25% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e293b",
+      "rgb": "rgb(30,41,59)",
+      "hsl": "hsl(217.2,32.6%,17.5%)",
+      "rgbChannel": "30 41 59",
+      "hslChannel": "217.2 32.6% 17.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0f172a",
+      "rgb": "rgb(15,23,42)",
+      "hsl": "hsl(222.2,47.4%,11.2%)",
+      "rgbChannel": "15 23 42",
+      "hslChannel": "222.2 47.4% 11.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#020617",
+      "rgb": "rgb(2,6,23)",
+      "hsl": "hsl(222.2,84%,4.9%)",
+      "rgbChannel": "2 6 23",
+      "hslChannel": "222.2 84% 4.9%"
+    }
+  ],
+  "gray": [
+    {
+      "scale": 50,
+      "hex": "#f9fafb",
+      "rgb": "rgb(249,250,251)",
+      "hsl": "hsl(210,20%,98%)",
+      "rgbChannel": "249 250 251",
+      "hslChannel": "210 20% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3f4f6",
+      "rgb": "rgb(243,244,246)",
+      "hsl": "hsl(220,14.3%,95.9%)",
+      "rgbChannel": "243 244 246",
+      "hslChannel": "220 14.3% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e7eb",
+      "rgb": "rgb(229,231,235)",
+      "hsl": "hsl(220,13%,91%)",
+      "rgbChannel": "229 231 235",
+      "hslChannel": "220 13% 91%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d1d5db",
+      "rgb": "rgb(209,213,219)",
+      "hsl": "hsl(216,12.2%,83.9%)",
+      "rgbChannel": "209 213 219",
+      "hslChannel": "216 12.2% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#9ca3af",
+      "rgb": "rgb(156,163,175)",
+      "hsl": "hsl(217.9,10.6%,64.9%)",
+      "rgbChannel": "156 163 175",
+      "hslChannel": "217.9 10.6% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6b7280",
+      "rgb": "rgb(107,114,128)",
+      "hsl": "hsl(220,8.9%,46.1%)",
+      "rgbChannel": "107 114 128",
+      "hslChannel": "220 8.9% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4b5563",
+      "rgb": "rgb(75,85,99)",
+      "hsl": "hsl(215,13.8%,34.1%)",
+      "rgbChannel": "75 85 99",
+      "hslChannel": "215 13.8% 34.1%"
+    },
+    {
+      "scale": 700,
+      "hex": "#374151",
+      "rgb": "rgb(55,65,81)",
+      "hsl": "hsl(216.9,19.1%,26.7%)",
+      "rgbChannel": "55 65 81",
+      "hslChannel": "216.9 19.1% 26.7%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1f2937",
+      "rgb": "rgb(31,41,55)",
+      "hsl": "hsl(215,27.9%,16.9%)",
+      "rgbChannel": "31 41 55",
+      "hslChannel": "215 27.9% 16.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#111827",
+      "rgb": "rgb(17,24,39)",
+      "hsl": "hsl(220.9,39.3%,11%)",
+      "rgbChannel": "17 24 39",
+      "hslChannel": "220.9 39.3% 11%"
+    },
+    {
+      "scale": 950,
+      "hex": "#030712",
+      "rgb": "rgb(3,7,18)",
+      "hsl": "hsl(224,71.4%,4.1%)",
+      "rgbChannel": "3 7 18",
+      "hslChannel": "224 71.4% 4.1%"
+    }
+  ],
+  "zinc": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f4f4f5",
+      "rgb": "rgb(244,244,245)",
+      "hsl": "hsl(240,4.8%,95.9%)",
+      "rgbChannel": "244 244 245",
+      "hslChannel": "240 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e4e4e7",
+      "rgb": "rgb(228,228,231)",
+      "hsl": "hsl(240,5.9%,90%)",
+      "rgbChannel": "228 228 231",
+      "hslChannel": "240 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d8",
+      "rgb": "rgb(212,212,216)",
+      "hsl": "hsl(240,4.9%,83.9%)",
+      "rgbChannel": "212 212 216",
+      "hslChannel": "240 4.9% 83.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a1a1aa",
+      "rgb": "rgb(161,161,170)",
+      "hsl": "hsl(240,5%,64.9%)",
+      "rgbChannel": "161 161 170",
+      "hslChannel": "240 5% 64.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#71717a",
+      "rgb": "rgb(113,113,122)",
+      "hsl": "hsl(240,3.8%,46.1%)",
+      "rgbChannel": "113 113 122",
+      "hslChannel": "240 3.8% 46.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#52525b",
+      "rgb": "rgb(82,82,91)",
+      "hsl": "hsl(240,5.2%,33.9%)",
+      "rgbChannel": "82 82 91",
+      "hslChannel": "240 5.2% 33.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#3f3f46",
+      "rgb": "rgb(63,63,70)",
+      "hsl": "hsl(240,5.3%,26.1%)",
+      "rgbChannel": "63 63 70",
+      "hslChannel": "240 5.3% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#27272a",
+      "rgb": "rgb(39,39,42)",
+      "hsl": "hsl(240,3.7%,15.9%)",
+      "rgbChannel": "39 39 42",
+      "hslChannel": "240 3.7% 15.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#18181b",
+      "rgb": "rgb(24,24,27)",
+      "hsl": "hsl(240,5.9%,10%)",
+      "rgbChannel": "24 24 27",
+      "hslChannel": "240 5.9% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#09090b",
+      "rgb": "rgb(9,9,11)",
+      "hsl": "hsl(240,10%,3.9%)",
+      "rgbChannel": "9 9 11",
+      "hslChannel": "240 10% 3.9%"
+    }
+  ],
+  "neutral": [
+    {
+      "scale": 50,
+      "hex": "#fafafa",
+      "rgb": "rgb(250,250,250)",
+      "hsl": "hsl(0,0%,98%)",
+      "rgbChannel": "250 250 250",
+      "hslChannel": "0 0% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f5",
+      "rgb": "rgb(245,245,245)",
+      "hsl": "hsl(0,0%,96.1%)",
+      "rgbChannel": "245 245 245",
+      "hslChannel": "0 0% 96.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e5e5e5",
+      "rgb": "rgb(229,229,229)",
+      "hsl": "hsl(0,0%,89.8%)",
+      "rgbChannel": "229 229 229",
+      "hslChannel": "0 0% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d4d4d4",
+      "rgb": "rgb(212,212,212)",
+      "hsl": "hsl(0,0%,83.1%)",
+      "rgbChannel": "212 212 212",
+      "hslChannel": "0 0% 83.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3a3a3",
+      "rgb": "rgb(163,163,163)",
+      "hsl": "hsl(0,0%,63.9%)",
+      "rgbChannel": "163 163 163",
+      "hslChannel": "0 0% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#737373",
+      "rgb": "rgb(115,115,115)",
+      "hsl": "hsl(0,0%,45.1%)",
+      "rgbChannel": "115 115 115",
+      "hslChannel": "0 0% 45.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#525252",
+      "rgb": "rgb(82,82,82)",
+      "hsl": "hsl(0,0%,32.2%)",
+      "rgbChannel": "82 82 82",
+      "hslChannel": "0 0% 32.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#404040",
+      "rgb": "rgb(64,64,64)",
+      "hsl": "hsl(0,0%,25.1%)",
+      "rgbChannel": "64 64 64",
+      "hslChannel": "0 0% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#262626",
+      "rgb": "rgb(38,38,38)",
+      "hsl": "hsl(0,0%,14.9%)",
+      "rgbChannel": "38 38 38",
+      "hslChannel": "0 0% 14.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#171717",
+      "rgb": "rgb(23,23,23)",
+      "hsl": "hsl(0,0%,9%)",
+      "rgbChannel": "23 23 23",
+      "hslChannel": "0 0% 9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0a0a0a",
+      "rgb": "rgb(10,10,10)",
+      "hsl": "hsl(0,0%,3.9%)",
+      "rgbChannel": "10 10 10",
+      "hslChannel": "0 0% 3.9%"
+    }
+  ],
+  "stone": [
+    {
+      "scale": 50,
+      "hex": "#fafaf9",
+      "rgb": "rgb(250,250,249)",
+      "hsl": "hsl(60,9.1%,97.8%)",
+      "rgbChannel": "250 250 249",
+      "hslChannel": "60 9.1% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f5f5f4",
+      "rgb": "rgb(245,245,244)",
+      "hsl": "hsl(60,4.8%,95.9%)",
+      "rgbChannel": "245 245 244",
+      "hslChannel": "60 4.8% 95.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e7e5e4",
+      "rgb": "rgb(231,229,228)",
+      "hsl": "hsl(20,5.9%,90%)",
+      "rgbChannel": "231 229 228",
+      "hslChannel": "20 5.9% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d6d3d1",
+      "rgb": "rgb(214,211,209)",
+      "hsl": "hsl(24,5.7%,82.9%)",
+      "rgbChannel": "214 211 209",
+      "hslChannel": "24 5.7% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a8a29e",
+      "rgb": "rgb(168,162,158)",
+      "hsl": "hsl(24,5.4%,63.9%)",
+      "rgbChannel": "168 162 158",
+      "hslChannel": "24 5.4% 63.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#78716c",
+      "rgb": "rgb(120,113,108)",
+      "hsl": "hsl(25,5.3%,44.7%)",
+      "rgbChannel": "120 113 108",
+      "hslChannel": "25 5.3% 44.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#57534e",
+      "rgb": "rgb(87,83,78)",
+      "hsl": "hsl(33.3,5.5%,32.4%)",
+      "rgbChannel": "87 83 78",
+      "hslChannel": "33.3 5.5% 32.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#44403c",
+      "rgb": "rgb(68,64,60)",
+      "hsl": "hsl(30,6.3%,25.1%)",
+      "rgbChannel": "68 64 60",
+      "hslChannel": "30 6.3% 25.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#292524",
+      "rgb": "rgb(41,37,36)",
+      "hsl": "hsl(12,6.5%,15.1%)",
+      "rgbChannel": "41 37 36",
+      "hslChannel": "12 6.5% 15.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1c1917",
+      "rgb": "rgb(28,25,23)",
+      "hsl": "hsl(24,9.8%,10%)",
+      "rgbChannel": "28 25 23",
+      "hslChannel": "24 9.8% 10%"
+    },
+    {
+      "scale": 950,
+      "hex": "#0c0a09",
+      "rgb": "rgb(12,10,9)",
+      "hsl": "hsl(20,14.3%,4.1%)",
+      "rgbChannel": "12 10 9",
+      "hslChannel": "20 14.3% 4.1%"
+    }
+  ],
+  "red": [
+    {
+      "scale": 50,
+      "hex": "#fef2f2",
+      "rgb": "rgb(254,242,242)",
+      "hsl": "hsl(0,85.7%,97.3%)",
+      "rgbChannel": "254 242 242",
+      "hslChannel": "0 85.7% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fee2e2",
+      "rgb": "rgb(254,226,226)",
+      "hsl": "hsl(0,93.3%,94.1%)",
+      "rgbChannel": "254 226 226",
+      "hslChannel": "0 93.3% 94.1%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecaca",
+      "rgb": "rgb(254,202,202)",
+      "hsl": "hsl(0,96.3%,89.4%)",
+      "rgbChannel": "254 202 202",
+      "hslChannel": "0 96.3% 89.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fca5a5",
+      "rgb": "rgb(252,165,165)",
+      "hsl": "hsl(0,93.5%,81.8%)",
+      "rgbChannel": "252 165 165",
+      "hslChannel": "0 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f87171",
+      "rgb": "rgb(248,113,113)",
+      "hsl": "hsl(0,90.6%,70.8%)",
+      "rgbChannel": "248 113 113",
+      "hslChannel": "0 90.6% 70.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ef4444",
+      "rgb": "rgb(239,68,68)",
+      "hsl": "hsl(0,84.2%,60.2%)",
+      "rgbChannel": "239 68 68",
+      "hslChannel": "0 84.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#dc2626",
+      "rgb": "rgb(220,38,38)",
+      "hsl": "hsl(0,72.2%,50.6%)",
+      "rgbChannel": "220 38 38",
+      "hslChannel": "0 72.2% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b91c1c",
+      "rgb": "rgb(185,28,28)",
+      "hsl": "hsl(0,73.7%,41.8%)",
+      "rgbChannel": "185 28 28",
+      "hslChannel": "0 73.7% 41.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#991b1b",
+      "rgb": "rgb(153,27,27)",
+      "hsl": "hsl(0,70%,35.3%)",
+      "rgbChannel": "153 27 27",
+      "hslChannel": "0 70% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7f1d1d",
+      "rgb": "rgb(127,29,29)",
+      "hsl": "hsl(0,62.8%,30.6%)",
+      "rgbChannel": "127 29 29",
+      "hslChannel": "0 62.8% 30.6%"
+    },
+    {
+      "scale": 950,
+      "hex": "#450a0a",
+      "rgb": "rgb(69,10,10)",
+      "hsl": "hsl(0,74.7%,15.5%)",
+      "rgbChannel": "69 10 10",
+      "hslChannel": "0 74.7% 15.5%"
+    }
+  ],
+  "orange": [
+    {
+      "scale": 50,
+      "hex": "#fff7ed",
+      "rgb": "rgb(255,247,237)",
+      "hsl": "hsl(33.3,100%,96.5%)",
+      "rgbChannel": "255 247 237",
+      "hslChannel": "33.3 100% 96.5%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffedd5",
+      "rgb": "rgb(255,237,213)",
+      "hsl": "hsl(34.3,100%,91.8%)",
+      "rgbChannel": "255 237 213",
+      "hslChannel": "34.3 100% 91.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fed7aa",
+      "rgb": "rgb(254,215,170)",
+      "hsl": "hsl(32.1,97.7%,83.1%)",
+      "rgbChannel": "254 215 170",
+      "hslChannel": "32.1 97.7% 83.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fdba74",
+      "rgb": "rgb(253,186,116)",
+      "hsl": "hsl(30.7,97.2%,72.4%)",
+      "rgbChannel": "253 186 116",
+      "hslChannel": "30.7 97.2% 72.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb923c",
+      "rgb": "rgb(251,146,60)",
+      "hsl": "hsl(27,96%,61%)",
+      "rgbChannel": "251 146 60",
+      "hslChannel": "27 96% 61%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f97316",
+      "rgb": "rgb(249,115,22)",
+      "hsl": "hsl(24.6,95%,53.1%)",
+      "rgbChannel": "249 115 22",
+      "hslChannel": "24.6 95% 53.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ea580c",
+      "rgb": "rgb(234,88,12)",
+      "hsl": "hsl(20.5,90.2%,48.2%)",
+      "rgbChannel": "234 88 12",
+      "hslChannel": "20.5 90.2% 48.2%"
+    },
+    {
+      "scale": 700,
+      "hex": "#c2410c",
+      "rgb": "rgb(194,65,12)",
+      "hsl": "hsl(17.5,88.3%,40.4%)",
+      "rgbChannel": "194 65 12",
+      "hslChannel": "17.5 88.3% 40.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9a3412",
+      "rgb": "rgb(154,52,18)",
+      "hsl": "hsl(15,79.1%,33.7%)",
+      "rgbChannel": "154 52 18",
+      "hslChannel": "15 79.1% 33.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#7c2d12",
+      "rgb": "rgb(124,45,18)",
+      "hsl": "hsl(15.3,74.6%,27.8%)",
+      "rgbChannel": "124 45 18",
+      "hslChannel": "15.3 74.6% 27.8%"
+    },
+    {
+      "scale": 950,
+      "hex": "#431407",
+      "rgb": "rgb(67,20,7)",
+      "hsl": "hsl(13,81.1%,14.5%)",
+      "rgbChannel": "67 20 7",
+      "hslChannel": "13 81.1% 14.5%"
+    }
+  ],
+  "amber": [
+    {
+      "scale": 50,
+      "hex": "#fffbeb",
+      "rgb": "rgb(255,251,235)",
+      "hsl": "hsl(48,100%,96.1%)",
+      "rgbChannel": "255 251 235",
+      "hslChannel": "48 100% 96.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef3c7",
+      "rgb": "rgb(254,243,199)",
+      "hsl": "hsl(48,96.5%,88.8%)",
+      "rgbChannel": "254 243 199",
+      "hslChannel": "48 96.5% 88.8%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fde68a",
+      "rgb": "rgb(253,230,138)",
+      "hsl": "hsl(48,96.6%,76.7%)",
+      "rgbChannel": "253 230 138",
+      "hslChannel": "48 96.6% 76.7%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fcd34d",
+      "rgb": "rgb(252,211,77)",
+      "hsl": "hsl(45.9,96.7%,64.5%)",
+      "rgbChannel": "252 211 77",
+      "hslChannel": "45.9 96.7% 64.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fbbf24",
+      "rgb": "rgb(251,191,36)",
+      "hsl": "hsl(43.3,96.4%,56.3%)",
+      "rgbChannel": "251 191 36",
+      "hslChannel": "43.3 96.4% 56.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f59e0b",
+      "rgb": "rgb(245,158,11)",
+      "hsl": "hsl(37.7,92.1%,50.2%)",
+      "rgbChannel": "245 158 11",
+      "hslChannel": "37.7 92.1% 50.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#d97706",
+      "rgb": "rgb(217,119,6)",
+      "hsl": "hsl(32.1,94.6%,43.7%)",
+      "rgbChannel": "217 119 6",
+      "hslChannel": "32.1 94.6% 43.7%"
+    },
+    {
+      "scale": 700,
+      "hex": "#b45309",
+      "rgb": "rgb(180,83,9)",
+      "hsl": "hsl(26,90.5%,37.1%)",
+      "rgbChannel": "180 83 9",
+      "hslChannel": "26 90.5% 37.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#92400e",
+      "rgb": "rgb(146,64,14)",
+      "hsl": "hsl(22.7,82.5%,31.4%)",
+      "rgbChannel": "146 64 14",
+      "hslChannel": "22.7 82.5% 31.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#78350f",
+      "rgb": "rgb(120,53,15)",
+      "hsl": "hsl(21.7,77.8%,26.5%)",
+      "rgbChannel": "120 53 15",
+      "hslChannel": "21.7 77.8% 26.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#451a03",
+      "rgb": "rgb(69,26,3)",
+      "hsl": "hsl(20.9,91.7%,14.1%)",
+      "rgbChannel": "69 26 3",
+      "hslChannel": "20.9 91.7% 14.1%"
+    }
+  ],
+  "yellow": [
+    {
+      "scale": 50,
+      "hex": "#fefce8",
+      "rgb": "rgb(254,252,232)",
+      "hsl": "hsl(54.5,91.7%,95.3%)",
+      "rgbChannel": "254 252 232",
+      "hslChannel": "54.5 91.7% 95.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fef9c3",
+      "rgb": "rgb(254,249,195)",
+      "hsl": "hsl(54.9,96.7%,88%)",
+      "rgbChannel": "254 249 195",
+      "hslChannel": "54.9 96.7% 88%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fef08a",
+      "rgb": "rgb(254,240,138)",
+      "hsl": "hsl(52.8,98.3%,76.9%)",
+      "rgbChannel": "254 240 138",
+      "hslChannel": "52.8 98.3% 76.9%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fde047",
+      "rgb": "rgb(253,224,71)",
+      "hsl": "hsl(50.4,97.8%,63.5%)",
+      "rgbChannel": "253 224 71",
+      "hslChannel": "50.4 97.8% 63.5%"
+    },
+    {
+      "scale": 400,
+      "hex": "#facc15",
+      "rgb": "rgb(250,204,21)",
+      "hsl": "hsl(47.9,95.8%,53.1%)",
+      "rgbChannel": "250 204 21",
+      "hslChannel": "47.9 95.8% 53.1%"
+    },
+    {
+      "scale": 500,
+      "hex": "#eab308",
+      "rgb": "rgb(234,179,8)",
+      "hsl": "hsl(45.4,93.4%,47.5%)",
+      "rgbChannel": "234 179 8",
+      "hslChannel": "45.4 93.4% 47.5%"
+    },
+    {
+      "scale": 600,
+      "hex": "#ca8a04",
+      "rgb": "rgb(202,138,4)",
+      "hsl": "hsl(40.6,96.1%,40.4%)",
+      "rgbChannel": "202 138 4",
+      "hslChannel": "40.6 96.1% 40.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a16207",
+      "rgb": "rgb(161,98,7)",
+      "hsl": "hsl(35.5,91.7%,32.9%)",
+      "rgbChannel": "161 98 7",
+      "hslChannel": "35.5 91.7% 32.9%"
+    },
+    {
+      "scale": 800,
+      "hex": "#854d0e",
+      "rgb": "rgb(133,77,14)",
+      "hsl": "hsl(31.8,81%,28.8%)",
+      "rgbChannel": "133 77 14",
+      "hslChannel": "31.8 81% 28.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#713f12",
+      "rgb": "rgb(113,63,18)",
+      "hsl": "hsl(28.4,72.5%,25.7%)",
+      "rgbChannel": "113 63 18",
+      "hslChannel": "28.4 72.5% 25.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#422006",
+      "rgb": "rgb(66,32,6)",
+      "hsl": "hsl(26,83.3%,14.1%)",
+      "rgbChannel": "66 32 6",
+      "hslChannel": "26 83.3% 14.1%"
+    }
+  ],
+  "lime": [
+    {
+      "scale": 50,
+      "hex": "#f7fee7",
+      "rgb": "rgb(247,254,231)",
+      "hsl": "hsl(78.3,92%,95.1%)",
+      "rgbChannel": "247 254 231",
+      "hslChannel": "78.3 92% 95.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ecfccb",
+      "rgb": "rgb(236,252,203)",
+      "hsl": "hsl(79.6,89.1%,89.2%)",
+      "rgbChannel": "236 252 203",
+      "hslChannel": "79.6 89.1% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#d9f99d",
+      "rgb": "rgb(217,249,157)",
+      "hsl": "hsl(80.9,88.5%,79.6%)",
+      "rgbChannel": "217 249 157",
+      "hslChannel": "80.9 88.5% 79.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#bef264",
+      "rgb": "rgb(190,242,100)",
+      "hsl": "hsl(82,84.5%,67.1%)",
+      "rgbChannel": "190 242 100",
+      "hslChannel": "82 84.5% 67.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a3e635",
+      "rgb": "rgb(163,230,53)",
+      "hsl": "hsl(82.7,78%,55.5%)",
+      "rgbChannel": "163 230 53",
+      "hslChannel": "82.7 78% 55.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#84cc16",
+      "rgb": "rgb(132,204,22)",
+      "hsl": "hsl(83.7,80.5%,44.3%)",
+      "rgbChannel": "132 204 22",
+      "hslChannel": "83.7 80.5% 44.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#65a30d",
+      "rgb": "rgb(101,163,13)",
+      "hsl": "hsl(84.8,85.2%,34.5%)",
+      "rgbChannel": "101 163 13",
+      "hslChannel": "84.8 85.2% 34.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4d7c0f",
+      "rgb": "rgb(77,124,15)",
+      "hsl": "hsl(85.9,78.4%,27.3%)",
+      "rgbChannel": "77 124 15",
+      "hslChannel": "85.9 78.4% 27.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3f6212",
+      "rgb": "rgb(63,98,18)",
+      "hsl": "hsl(86.3,69%,22.7%)",
+      "rgbChannel": "63 98 18",
+      "hslChannel": "86.3 69% 22.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#365314",
+      "rgb": "rgb(54,83,20)",
+      "hsl": "hsl(87.6,61.2%,20.2%)",
+      "rgbChannel": "54 83 20",
+      "hslChannel": "87.6 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1a2e05",
+      "rgb": "rgb(26,46,5)",
+      "hsl": "hsl(89.3,80.4%,10%)",
+      "rgbChannel": "26 46 5",
+      "hslChannel": "89.3 80.4% 10%"
+    }
+  ],
+  "green": [
+    {
+      "scale": 50,
+      "hex": "#f0fdf4",
+      "rgb": "rgb(240,253,244)",
+      "hsl": "hsl(138.5,76.5%,96.7%)",
+      "rgbChannel": "240 253 244",
+      "hslChannel": "138.5 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dcfce7",
+      "rgb": "rgb(220,252,231)",
+      "hsl": "hsl(140.6,84.2%,92.5%)",
+      "rgbChannel": "220 252 231",
+      "hslChannel": "140.6 84.2% 92.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bbf7d0",
+      "rgb": "rgb(187,247,208)",
+      "hsl": "hsl(141,78.9%,85.1%)",
+      "rgbChannel": "187 247 208",
+      "hslChannel": "141 78.9% 85.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#86efac",
+      "rgb": "rgb(134,239,172)",
+      "hsl": "hsl(141.7,76.6%,73.1%)",
+      "rgbChannel": "134 239 172",
+      "hslChannel": "141.7 76.6% 73.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#4ade80",
+      "rgb": "rgb(74,222,128)",
+      "hsl": "hsl(141.9,69.2%,58%)",
+      "rgbChannel": "74 222 128",
+      "hslChannel": "141.9 69.2% 58%"
+    },
+    {
+      "scale": 500,
+      "hex": "#22c55e",
+      "rgb": "rgb(34,197,94)",
+      "hsl": "hsl(142.1,70.6%,45.3%)",
+      "rgbChannel": "34 197 94",
+      "hslChannel": "142.1 70.6% 45.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#16a34a",
+      "rgb": "rgb(22,163,74)",
+      "hsl": "hsl(142.1,76.2%,36.3%)",
+      "rgbChannel": "22 163 74",
+      "hslChannel": "142.1 76.2% 36.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#15803d",
+      "rgb": "rgb(21,128,61)",
+      "hsl": "hsl(142.4,71.8%,29.2%)",
+      "rgbChannel": "21 128 61",
+      "hslChannel": "142.4 71.8% 29.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#166534",
+      "rgb": "rgb(22,101,52)",
+      "hsl": "hsl(142.8,64.2%,24.1%)",
+      "rgbChannel": "22 101 52",
+      "hslChannel": "142.8 64.2% 24.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#14532d",
+      "rgb": "rgb(20,83,45)",
+      "hsl": "hsl(143.8,61.2%,20.2%)",
+      "rgbChannel": "20 83 45",
+      "hslChannel": "143.8 61.2% 20.2%"
+    },
+    {
+      "scale": 950,
+      "hex": "#052e16",
+      "rgb": "rgb(5,46,22)",
+      "hsl": "hsl(144.9,80.4%,10%)",
+      "rgbChannel": "5 46 22",
+      "hslChannel": "144.9 80.4% 10%"
+    }
+  ],
+  "emerald": [
+    {
+      "scale": 50,
+      "hex": "#ecfdf5",
+      "rgb": "rgb(236,253,245)",
+      "hsl": "hsl(151.8,81%,95.9%)",
+      "rgbChannel": "236 253 245",
+      "hslChannel": "151.8 81% 95.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#d1fae5",
+      "rgb": "rgb(209,250,229)",
+      "hsl": "hsl(149.3,80.4%,90%)",
+      "rgbChannel": "209 250 229",
+      "hslChannel": "149.3 80.4% 90%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a7f3d0",
+      "rgb": "rgb(167,243,208)",
+      "hsl": "hsl(152.4,76%,80.4%)",
+      "rgbChannel": "167 243 208",
+      "hslChannel": "152.4 76% 80.4%"
+    },
+    {
+      "scale": 300,
+      "hex": "#6ee7b7",
+      "rgb": "rgb(110,231,183)",
+      "hsl": "hsl(156.2,71.6%,66.9%)",
+      "rgbChannel": "110 231 183",
+      "hslChannel": "156.2 71.6% 66.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#34d399",
+      "rgb": "rgb(52,211,153)",
+      "hsl": "hsl(158.1,64.4%,51.6%)",
+      "rgbChannel": "52 211 153",
+      "hslChannel": "158.1 64.4% 51.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#10b981",
+      "rgb": "rgb(16,185,129)",
+      "hsl": "hsl(160.1,84.1%,39.4%)",
+      "rgbChannel": "16 185 129",
+      "hslChannel": "160.1 84.1% 39.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#059669",
+      "rgb": "rgb(5,150,105)",
+      "hsl": "hsl(161.4,93.5%,30.4%)",
+      "rgbChannel": "5 150 105",
+      "hslChannel": "161.4 93.5% 30.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#047857",
+      "rgb": "rgb(4,120,87)",
+      "hsl": "hsl(162.9,93.5%,24.3%)",
+      "rgbChannel": "4 120 87",
+      "hslChannel": "162.9 93.5% 24.3%"
+    },
+    {
+      "scale": 800,
+      "hex": "#065f46",
+      "rgb": "rgb(6,95,70)",
+      "hsl": "hsl(163.1,88.1%,19.8%)",
+      "rgbChannel": "6 95 70",
+      "hslChannel": "163.1 88.1% 19.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#064e3b",
+      "rgb": "rgb(6,78,59)",
+      "hsl": "hsl(164.2,85.7%,16.5%)",
+      "rgbChannel": "6 78 59",
+      "hslChannel": "164.2 85.7% 16.5%"
+    },
+    {
+      "scale": 950,
+      "hex": "#022c22",
+      "rgb": "rgb(2,44,34)",
+      "hsl": "hsl(165.7,91.3%,9%)",
+      "rgbChannel": "2 44 34",
+      "hslChannel": "165.7 91.3% 9%"
+    }
+  ],
+  "teal": [
+    {
+      "scale": 50,
+      "hex": "#f0fdfa",
+      "rgb": "rgb(240,253,250)",
+      "hsl": "hsl(166.2,76.5%,96.7%)",
+      "rgbChannel": "240 253 250",
+      "hslChannel": "166.2 76.5% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ccfbf1",
+      "rgb": "rgb(204,251,241)",
+      "hsl": "hsl(167.2,85.5%,89.2%)",
+      "rgbChannel": "204 251 241",
+      "hslChannel": "167.2 85.5% 89.2%"
+    },
+    {
+      "scale": 200,
+      "hex": "#99f6e4",
+      "rgb": "rgb(153,246,228)",
+      "hsl": "hsl(168.4,83.8%,78.2%)",
+      "rgbChannel": "153 246 228",
+      "hslChannel": "168.4 83.8% 78.2%"
+    },
+    {
+      "scale": 300,
+      "hex": "#5eead4",
+      "rgb": "rgb(94,234,212)",
+      "hsl": "hsl(170.6,76.9%,64.3%)",
+      "rgbChannel": "94 234 212",
+      "hslChannel": "170.6 76.9% 64.3%"
+    },
+    {
+      "scale": 400,
+      "hex": "#2dd4bf",
+      "rgb": "rgb(45,212,191)",
+      "hsl": "hsl(172.5,66%,50.4%)",
+      "rgbChannel": "45 212 191",
+      "hslChannel": "172.5 66% 50.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#14b8a6",
+      "rgb": "rgb(20,184,166)",
+      "hsl": "hsl(173.4,80.4%,40%)",
+      "rgbChannel": "20 184 166",
+      "hslChannel": "173.4 80.4% 40%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0d9488",
+      "rgb": "rgb(13,148,136)",
+      "hsl": "hsl(174.7,83.9%,31.6%)",
+      "rgbChannel": "13 148 136",
+      "hslChannel": "174.7 83.9% 31.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0f766e",
+      "rgb": "rgb(15,118,110)",
+      "hsl": "hsl(175.3,77.4%,26.1%)",
+      "rgbChannel": "15 118 110",
+      "hslChannel": "175.3 77.4% 26.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#115e59",
+      "rgb": "rgb(17,94,89)",
+      "hsl": "hsl(176.1,69.4%,21.8%)",
+      "rgbChannel": "17 94 89",
+      "hslChannel": "176.1 69.4% 21.8%"
+    },
+    {
+      "scale": 900,
+      "hex": "#134e4a",
+      "rgb": "rgb(19,78,74)",
+      "hsl": "hsl(175.9,60.8%,19%)",
+      "rgbChannel": "19 78 74",
+      "hslChannel": "175.9 60.8% 19%"
+    },
+    {
+      "scale": 950,
+      "hex": "#042f2e",
+      "rgb": "rgb(4,47,46)",
+      "hsl": "hsl(178.6,84.3%,10%)",
+      "rgbChannel": "4 47 46",
+      "hslChannel": "178.6 84.3% 10%"
+    }
+  ],
+  "cyan": [
+    {
+      "scale": 50,
+      "hex": "#ecfeff",
+      "rgb": "rgb(236,254,255)",
+      "hsl": "hsl(183.2,100%,96.3%)",
+      "rgbChannel": "236 254 255",
+      "hslChannel": "183.2 100% 96.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#cffafe",
+      "rgb": "rgb(207,250,254)",
+      "hsl": "hsl(185.1,95.9%,90.4%)",
+      "rgbChannel": "207 250 254",
+      "hslChannel": "185.1 95.9% 90.4%"
+    },
+    {
+      "scale": 200,
+      "hex": "#a5f3fc",
+      "rgb": "rgb(165,243,252)",
+      "hsl": "hsl(186.2,93.5%,81.8%)",
+      "rgbChannel": "165 243 252",
+      "hslChannel": "186.2 93.5% 81.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#67e8f9",
+      "rgb": "rgb(103,232,249)",
+      "hsl": "hsl(187,92.4%,69%)",
+      "rgbChannel": "103 232 249",
+      "hslChannel": "187 92.4% 69%"
+    },
+    {
+      "scale": 400,
+      "hex": "#22d3ee",
+      "rgb": "rgb(34,211,238)",
+      "hsl": "hsl(187.9,85.7%,53.3%)",
+      "rgbChannel": "34 211 238",
+      "hslChannel": "187.9 85.7% 53.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#06b6d4",
+      "rgb": "rgb(6,182,212)",
+      "hsl": "hsl(188.7,94.5%,42.7%)",
+      "rgbChannel": "6 182 212",
+      "hslChannel": "188.7 94.5% 42.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0891b2",
+      "rgb": "rgb(8,145,178)",
+      "hsl": "hsl(191.6,91.4%,36.5%)",
+      "rgbChannel": "8 145 178",
+      "hslChannel": "191.6 91.4% 36.5%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0e7490",
+      "rgb": "rgb(14,116,144)",
+      "hsl": "hsl(192.9,82.3%,31%)",
+      "rgbChannel": "14 116 144",
+      "hslChannel": "192.9 82.3% 31%"
+    },
+    {
+      "scale": 800,
+      "hex": "#155e75",
+      "rgb": "rgb(21,94,117)",
+      "hsl": "hsl(194.4,69.6%,27.1%)",
+      "rgbChannel": "21 94 117",
+      "hslChannel": "194.4 69.6% 27.1%"
+    },
+    {
+      "scale": 900,
+      "hex": "#164e63",
+      "rgb": "rgb(22,78,99)",
+      "hsl": "hsl(196.4,63.6%,23.7%)",
+      "rgbChannel": "22 78 99",
+      "hslChannel": "196.4 63.6% 23.7%"
+    },
+    {
+      "scale": 950,
+      "hex": "#083344",
+      "rgb": "rgb(8,51,68)",
+      "hsl": "hsl(197,78.9%,14.9%)",
+      "rgbChannel": "8 51 68",
+      "hslChannel": "197 78.9% 14.9%"
+    }
+  ],
+  "sky": [
+    {
+      "scale": 50,
+      "hex": "#f0f9ff",
+      "rgb": "rgb(240,249,255)",
+      "hsl": "hsl(204,100%,97.1%)",
+      "rgbChannel": "240 249 255",
+      "hslChannel": "204 100% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0f2fe",
+      "rgb": "rgb(224,242,254)",
+      "hsl": "hsl(204,93.8%,93.7%)",
+      "rgbChannel": "224 242 254",
+      "hslChannel": "204 93.8% 93.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bae6fd",
+      "rgb": "rgb(186,230,253)",
+      "hsl": "hsl(200.6,94.4%,86.1%)",
+      "rgbChannel": "186 230 253",
+      "hslChannel": "200.6 94.4% 86.1%"
+    },
+    {
+      "scale": 300,
+      "hex": "#7dd3fc",
+      "rgb": "rgb(125,211,252)",
+      "hsl": "hsl(199.4,95.5%,73.9%)",
+      "rgbChannel": "125 211 252",
+      "hslChannel": "199.4 95.5% 73.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#38bdf8",
+      "rgb": "rgb(56,189,248)",
+      "hsl": "hsl(198.4,93.2%,59.6%)",
+      "rgbChannel": "56 189 248",
+      "hslChannel": "198.4 93.2% 59.6%"
+    },
+    {
+      "scale": 500,
+      "hex": "#0ea5e9",
+      "rgb": "rgb(14,165,233)",
+      "hsl": "hsl(198.6,88.7%,48.4%)",
+      "rgbChannel": "14 165 233",
+      "hslChannel": "198.6 88.7% 48.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#0284c7",
+      "rgb": "rgb(2,132,199)",
+      "hsl": "hsl(200.4,98%,39.4%)",
+      "rgbChannel": "2 132 199",
+      "hslChannel": "200.4 98% 39.4%"
+    },
+    {
+      "scale": 700,
+      "hex": "#0369a1",
+      "rgb": "rgb(3,105,161)",
+      "hsl": "hsl(201.3,96.3%,32.2%)",
+      "rgbChannel": "3 105 161",
+      "hslChannel": "201.3 96.3% 32.2%"
+    },
+    {
+      "scale": 800,
+      "hex": "#075985",
+      "rgb": "rgb(7,89,133)",
+      "hsl": "hsl(201,90%,27.5%)",
+      "rgbChannel": "7 89 133",
+      "hslChannel": "201 90% 27.5%"
+    },
+    {
+      "scale": 900,
+      "hex": "#0c4a6e",
+      "rgb": "rgb(12,74,110)",
+      "hsl": "hsl(202,80.3%,23.9%)",
+      "rgbChannel": "12 74 110",
+      "hslChannel": "202 80.3% 23.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#082f49",
+      "rgb": "rgb(8,47,73)",
+      "hsl": "hsl(204,80.2%,15.9%)",
+      "rgbChannel": "8 47 73",
+      "hslChannel": "204 80.2% 15.9%"
+    }
+  ],
+  "blue": [
+    {
+      "scale": 50,
+      "hex": "#eff6ff",
+      "rgb": "rgb(239,246,255)",
+      "hsl": "hsl(213.8,100%,96.9%)",
+      "rgbChannel": "239 246 255",
+      "hslChannel": "213.8 100% 96.9%"
+    },
+    {
+      "scale": 100,
+      "hex": "#dbeafe",
+      "rgb": "rgb(219,234,254)",
+      "hsl": "hsl(214.3,94.6%,92.7%)",
+      "rgbChannel": "219 234 254",
+      "hslChannel": "214.3 94.6% 92.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#bfdbfe",
+      "rgb": "rgb(191,219,254)",
+      "hsl": "hsl(213.3,96.9%,87.3%)",
+      "rgbChannel": "191 219 254",
+      "hslChannel": "213.3 96.9% 87.3%"
+    },
+    {
+      "scale": 300,
+      "hex": "#93c5fd",
+      "rgb": "rgb(147,197,253)",
+      "hsl": "hsl(211.7,96.4%,78.4%)",
+      "rgbChannel": "147 197 253",
+      "hslChannel": "211.7 96.4% 78.4%"
+    },
+    {
+      "scale": 400,
+      "hex": "#60a5fa",
+      "rgb": "rgb(96,165,250)",
+      "hsl": "hsl(213.1,93.9%,67.8%)",
+      "rgbChannel": "96 165 250",
+      "hslChannel": "213.1 93.9% 67.8%"
+    },
+    {
+      "scale": 500,
+      "hex": "#3b82f6",
+      "rgb": "rgb(59,130,246)",
+      "hsl": "hsl(217.2,91.2%,59.8%)",
+      "rgbChannel": "59 130 246",
+      "hslChannel": "217.2 91.2% 59.8%"
+    },
+    {
+      "scale": 600,
+      "hex": "#2563eb",
+      "rgb": "rgb(37,99,235)",
+      "hsl": "hsl(221.2,83.2%,53.3%)",
+      "rgbChannel": "37 99 235",
+      "hslChannel": "221.2 83.2% 53.3%"
+    },
+    {
+      "scale": 700,
+      "hex": "#1d4ed8",
+      "rgb": "rgb(29,78,216)",
+      "hsl": "hsl(224.3,76.3%,48%)",
+      "rgbChannel": "29 78 216",
+      "hslChannel": "224.3 76.3% 48%"
+    },
+    {
+      "scale": 800,
+      "hex": "#1e40af",
+      "rgb": "rgb(30,64,175)",
+      "hsl": "hsl(225.9,70.7%,40.2%)",
+      "rgbChannel": "30 64 175",
+      "hslChannel": "225.9 70.7% 40.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#1e3a8a",
+      "rgb": "rgb(30,58,138)",
+      "hsl": "hsl(224.4,64.3%,32.9%)",
+      "rgbChannel": "30 58 138",
+      "hslChannel": "224.4 64.3% 32.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#172554",
+      "rgb": "rgb(23,37,84)",
+      "hsl": "hsl(226.2,57%,21%)",
+      "rgbChannel": "23 37 84",
+      "hslChannel": "226.2 57% 21%"
+    }
+  ],
+  "indigo": [
+    {
+      "scale": 50,
+      "hex": "#eef2ff",
+      "rgb": "rgb(238,242,255)",
+      "hsl": "hsl(225.9,100%,96.7%)",
+      "rgbChannel": "238 242 255",
+      "hslChannel": "225.9 100% 96.7%"
+    },
+    {
+      "scale": 100,
+      "hex": "#e0e7ff",
+      "rgb": "rgb(224,231,255)",
+      "hsl": "hsl(226.5,100%,93.9%)",
+      "rgbChannel": "224 231 255",
+      "hslChannel": "226.5 100% 93.9%"
+    },
+    {
+      "scale": 200,
+      "hex": "#c7d2fe",
+      "rgb": "rgb(199,210,254)",
+      "hsl": "hsl(228,96.5%,88.8%)",
+      "rgbChannel": "199 210 254",
+      "hslChannel": "228 96.5% 88.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#a5b4fc",
+      "rgb": "rgb(165,180,252)",
+      "hsl": "hsl(229.7,93.5%,81.8%)",
+      "rgbChannel": "165 180 252",
+      "hslChannel": "229.7 93.5% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#818cf8",
+      "rgb": "rgb(129,140,248)",
+      "hsl": "hsl(234.5,89.5%,73.9%)",
+      "rgbChannel": "129 140 248",
+      "hslChannel": "234.5 89.5% 73.9%"
+    },
+    {
+      "scale": 500,
+      "hex": "#6366f1",
+      "rgb": "rgb(99,102,241)",
+      "hsl": "hsl(238.7,83.5%,66.7%)",
+      "rgbChannel": "99 102 241",
+      "hslChannel": "238.7 83.5% 66.7%"
+    },
+    {
+      "scale": 600,
+      "hex": "#4f46e5",
+      "rgb": "rgb(79,70,229)",
+      "hsl": "hsl(243.4,75.4%,58.6%)",
+      "rgbChannel": "79 70 229",
+      "hslChannel": "243.4 75.4% 58.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#4338ca",
+      "rgb": "rgb(67,56,202)",
+      "hsl": "hsl(244.5,57.9%,50.6%)",
+      "rgbChannel": "67 56 202",
+      "hslChannel": "244.5 57.9% 50.6%"
+    },
+    {
+      "scale": 800,
+      "hex": "#3730a3",
+      "rgb": "rgb(55,48,163)",
+      "hsl": "hsl(243.7,54.5%,41.4%)",
+      "rgbChannel": "55 48 163",
+      "hslChannel": "243.7 54.5% 41.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#312e81",
+      "rgb": "rgb(49,46,129)",
+      "hsl": "hsl(242.2,47.4%,34.3%)",
+      "rgbChannel": "49 46 129",
+      "hslChannel": "242.2 47.4% 34.3%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(30,27,75)",
+      "hsl": "hsl(243.8,47.1%,20%)",
+      "rgbChannel": "30 27 75",
+      "hslChannel": "243.8 47.1% 20%"
+    }
+  ],
+  "violet": [
+    {
+      "scale": 50,
+      "hex": "#f5f3ff",
+      "rgb": "rgb(245,243,255)",
+      "hsl": "hsl(250,100%,97.6%)",
+      "rgbChannel": "245 243 255",
+      "hslChannel": "250 100% 97.6%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ede9fe",
+      "rgb": "rgb(237,233,254)",
+      "hsl": "hsl(251.4,91.3%,95.5%)",
+      "rgbChannel": "237 233 254",
+      "hslChannel": "251.4 91.3% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#ddd6fe",
+      "rgb": "rgb(221,214,254)",
+      "hsl": "hsl(250.5,95.2%,91.8%)",
+      "rgbChannel": "221 214 254",
+      "hslChannel": "250.5 95.2% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#c4b5fd",
+      "rgb": "rgb(196,181,253)",
+      "hsl": "hsl(252.5,94.7%,85.1%)",
+      "rgbChannel": "196 181 253",
+      "hslChannel": "252.5 94.7% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#a78bfa",
+      "rgb": "rgb(167,139,250)",
+      "hsl": "hsl(255.1,91.7%,76.3%)",
+      "rgbChannel": "167 139 250",
+      "hslChannel": "255.1 91.7% 76.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#8b5cf6",
+      "rgb": "rgb(139,92,246)",
+      "hsl": "hsl(258.3,89.5%,66.3%)",
+      "rgbChannel": "139 92 246",
+      "hslChannel": "258.3 89.5% 66.3%"
+    },
+    {
+      "scale": 600,
+      "hex": "#7c3aed",
+      "rgb": "rgb(124,58,237)",
+      "hsl": "hsl(262.1,83.3%,57.8%)",
+      "rgbChannel": "124 58 237",
+      "hslChannel": "262.1 83.3% 57.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#6d28d9",
+      "rgb": "rgb(109,40,217)",
+      "hsl": "hsl(263.4,70%,50.4%)",
+      "rgbChannel": "109 40 217",
+      "hslChannel": "263.4 70% 50.4%"
+    },
+    {
+      "scale": 800,
+      "hex": "#5b21b6",
+      "rgb": "rgb(91,33,182)",
+      "hsl": "hsl(263.4,69.3%,42.2%)",
+      "rgbChannel": "91 33 182",
+      "hslChannel": "263.4 69.3% 42.2%"
+    },
+    {
+      "scale": 900,
+      "hex": "#4c1d95",
+      "rgb": "rgb(76,29,149)",
+      "hsl": "hsl(263.5,67.4%,34.9%)",
+      "rgbChannel": "76 29 149",
+      "hslChannel": "263.5 67.4% 34.9%"
+    },
+    {
+      "scale": 950,
+      "hex": "#1e1b4b",
+      "rgb": "rgb(46,16,101)",
+      "hsl": "hsl(261.2,72.6%,22.9%)",
+      "rgbChannel": "46 16 101",
+      "hslChannel": "261.2 72.6% 22.9%"
+    }
+  ],
+  "purple": [
+    {
+      "scale": 50,
+      "hex": "#faf5ff",
+      "rgb": "rgb(250,245,255)",
+      "hsl": "hsl(270,100%,98%)",
+      "rgbChannel": "250 245 255",
+      "hslChannel": "270 100% 98%"
+    },
+    {
+      "scale": 100,
+      "hex": "#f3e8ff",
+      "rgb": "rgb(243,232,255)",
+      "hsl": "hsl(268.7,100%,95.5%)",
+      "rgbChannel": "243 232 255",
+      "hslChannel": "268.7 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#e9d5ff",
+      "rgb": "rgb(233,213,255)",
+      "hsl": "hsl(268.6,100%,91.8%)",
+      "rgbChannel": "233 213 255",
+      "hslChannel": "268.6 100% 91.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#d8b4fe",
+      "rgb": "rgb(216,180,254)",
+      "hsl": "hsl(269.2,97.4%,85.1%)",
+      "rgbChannel": "216 180 254",
+      "hslChannel": "269.2 97.4% 85.1%"
+    },
+    {
+      "scale": 400,
+      "hex": "#c084fc",
+      "rgb": "rgb(192,132,252)",
+      "hsl": "hsl(270,95.2%,75.3%)",
+      "rgbChannel": "192 132 252",
+      "hslChannel": "270 95.2% 75.3%"
+    },
+    {
+      "scale": 500,
+      "hex": "#a855f7",
+      "rgb": "rgb(168,85,247)",
+      "hsl": "hsl(270.7,91%,65.1%)",
+      "rgbChannel": "168 85 247",
+      "hslChannel": "270.7 91% 65.1%"
+    },
+    {
+      "scale": 600,
+      "hex": "#9333ea",
+      "rgb": "rgb(147,51,234)",
+      "hsl": "hsl(271.5,81.3%,55.9%)",
+      "rgbChannel": "147 51 234",
+      "hslChannel": "271.5 81.3% 55.9%"
+    },
+    {
+      "scale": 700,
+      "hex": "#7e22ce",
+      "rgb": "rgb(126,34,206)",
+      "hsl": "hsl(272.1,71.7%,47.1%)",
+      "rgbChannel": "126 34 206",
+      "hslChannel": "272.1 71.7% 47.1%"
+    },
+    {
+      "scale": 800,
+      "hex": "#6b21a8",
+      "rgb": "rgb(107,33,168)",
+      "hsl": "hsl(272.9,67.2%,39.4%)",
+      "rgbChannel": "107 33 168",
+      "hslChannel": "272.9 67.2% 39.4%"
+    },
+    {
+      "scale": 900,
+      "hex": "#581c87",
+      "rgb": "rgb(88,28,135)",
+      "hsl": "hsl(273.6,65.6%,32%)",
+      "rgbChannel": "88 28 135",
+      "hslChannel": "273.6 65.6% 32%"
+    },
+    {
+      "scale": 950,
+      "hex": "#3b0764",
+      "rgb": "rgb(59,7,100)",
+      "hsl": "hsl(273.5,86.9%,21%)",
+      "rgbChannel": "59 7 100",
+      "hslChannel": "273.5 86.9% 21%"
+    }
+  ],
+  "fuchsia": [
+    {
+      "scale": 50,
+      "hex": "#fdf4ff",
+      "rgb": "rgb(253,244,255)",
+      "hsl": "hsl(289.1,100%,97.8%)",
+      "rgbChannel": "253 244 255",
+      "hslChannel": "289.1 100% 97.8%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fae8ff",
+      "rgb": "rgb(250,232,255)",
+      "hsl": "hsl(287,100%,95.5%)",
+      "rgbChannel": "250 232 255",
+      "hslChannel": "287 100% 95.5%"
+    },
+    {
+      "scale": 200,
+      "hex": "#f5d0fe",
+      "rgb": "rgb(245,208,254)",
+      "hsl": "hsl(288.3,95.8%,90.6%)",
+      "rgbChannel": "245 208 254",
+      "hslChannel": "288.3 95.8% 90.6%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f0abfc",
+      "rgb": "rgb(240,171,252)",
+      "hsl": "hsl(291.1,93.1%,82.9%)",
+      "rgbChannel": "240 171 252",
+      "hslChannel": "291.1 93.1% 82.9%"
+    },
+    {
+      "scale": 400,
+      "hex": "#e879f9",
+      "rgb": "rgb(232,121,249)",
+      "hsl": "hsl(292,91.4%,72.5%)",
+      "rgbChannel": "232 121 249",
+      "hslChannel": "292 91.4% 72.5%"
+    },
+    {
+      "scale": 500,
+      "hex": "#d946ef",
+      "rgb": "rgb(217,70,239)",
+      "hsl": "hsl(292.2,84.1%,60.6%)",
+      "rgbChannel": "217 70 239",
+      "hslChannel": "292.2 84.1% 60.6%"
+    },
+    {
+      "scale": 600,
+      "hex": "#c026d3",
+      "rgb": "rgb(192,38,211)",
+      "hsl": "hsl(293.4,69.5%,48.8%)",
+      "rgbChannel": "192 38 211",
+      "hslChannel": "293.4 69.5% 48.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#a21caf",
+      "rgb": "rgb(162,28,175)",
+      "hsl": "hsl(294.7,72.4%,39.8%)",
+      "rgbChannel": "162 28 175",
+      "hslChannel": "294.7 72.4% 39.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#86198f",
+      "rgb": "rgb(134,25,143)",
+      "hsl": "hsl(295.4,70.2%,32.9%)",
+      "rgbChannel": "134 25 143",
+      "hslChannel": "295.4 70.2% 32.9%"
+    },
+    {
+      "scale": 900,
+      "hex": "#701a75",
+      "rgb": "rgb(112,26,117)",
+      "hsl": "hsl(296.7,63.6%,28%)",
+      "rgbChannel": "112 26 117",
+      "hslChannel": "296.7 63.6% 28%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4a044e",
+      "rgb": "rgb(74,4,78)",
+      "hsl": "hsl(296.8,90.2%,16.1%)",
+      "rgbChannel": "74 4 78",
+      "hslChannel": "296.8 90.2% 16.1%"
+    }
+  ],
+  "pink": [
+    {
+      "scale": 50,
+      "hex": "#fdf2f8",
+      "rgb": "rgb(253,242,248)",
+      "hsl": "hsl(327.3,73.3%,97.1%)",
+      "rgbChannel": "253 242 248",
+      "hslChannel": "327.3 73.3% 97.1%"
+    },
+    {
+      "scale": 100,
+      "hex": "#fce7f3",
+      "rgb": "rgb(252,231,243)",
+      "hsl": "hsl(325.7,77.8%,94.7%)",
+      "rgbChannel": "252 231 243",
+      "hslChannel": "325.7 77.8% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fbcfe8",
+      "rgb": "rgb(251,207,232)",
+      "hsl": "hsl(325.9,84.6%,89.8%)",
+      "rgbChannel": "251 207 232",
+      "hslChannel": "325.9 84.6% 89.8%"
+    },
+    {
+      "scale": 300,
+      "hex": "#f9a8d4",
+      "rgb": "rgb(249,168,212)",
+      "hsl": "hsl(327.4,87.1%,81.8%)",
+      "rgbChannel": "249 168 212",
+      "hslChannel": "327.4 87.1% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#f472b6",
+      "rgb": "rgb(244,114,182)",
+      "hsl": "hsl(328.6,85.5%,70.2%)",
+      "rgbChannel": "244 114 182",
+      "hslChannel": "328.6 85.5% 70.2%"
+    },
+    {
+      "scale": 500,
+      "hex": "#ec4899",
+      "rgb": "rgb(236,72,153)",
+      "hsl": "hsl(330.4,81.2%,60.4%)",
+      "rgbChannel": "236 72 153",
+      "hslChannel": "330.4 81.2% 60.4%"
+    },
+    {
+      "scale": 600,
+      "hex": "#db2777",
+      "rgb": "rgb(219,39,119)",
+      "hsl": "hsl(333.3,71.4%,50.6%)",
+      "rgbChannel": "219 39 119",
+      "hslChannel": "333.3 71.4% 50.6%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be185d",
+      "rgb": "rgb(190,24,93)",
+      "hsl": "hsl(335.1,77.6%,42%)",
+      "rgbChannel": "190 24 93",
+      "hslChannel": "335.1 77.6% 42%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9d174d",
+      "rgb": "rgb(157,23,77)",
+      "hsl": "hsl(335.8,74.4%,35.3%)",
+      "rgbChannel": "157 23 77",
+      "hslChannel": "335.8 74.4% 35.3%"
+    },
+    {
+      "scale": 900,
+      "hex": "#831843",
+      "rgb": "rgb(131,24,67)",
+      "hsl": "hsl(335.9,69%,30.4%)",
+      "rgbChannel": "131 24 67",
+      "hslChannel": "335.9 69% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#500724",
+      "rgb": "rgb(80,7,36)",
+      "hsl": "hsl(336.2,83.9%,17.1%)",
+      "rgbChannel": "80 7 36",
+      "hslChannel": "336.2 83.9% 17.1%"
+    }
+  ],
+  "rose": [
+    {
+      "scale": 50,
+      "hex": "#fff1f2",
+      "rgb": "rgb(255,241,242)",
+      "hsl": "hsl(355.7,100%,97.3%)",
+      "rgbChannel": "255 241 242",
+      "hslChannel": "355.7 100% 97.3%"
+    },
+    {
+      "scale": 100,
+      "hex": "#ffe4e6",
+      "rgb": "rgb(255,228,230)",
+      "hsl": "hsl(355.6,100%,94.7%)",
+      "rgbChannel": "255 228 230",
+      "hslChannel": "355.6 100% 94.7%"
+    },
+    {
+      "scale": 200,
+      "hex": "#fecdd3",
+      "rgb": "rgb(254,205,211)",
+      "hsl": "hsl(352.7,96.1%,90%)",
+      "rgbChannel": "254 205 211",
+      "hslChannel": "352.7 96.1% 90%"
+    },
+    {
+      "scale": 300,
+      "hex": "#fda4af",
+      "rgb": "rgb(253,164,175)",
+      "hsl": "hsl(352.6,95.7%,81.8%)",
+      "rgbChannel": "253 164 175",
+      "hslChannel": "352.6 95.7% 81.8%"
+    },
+    {
+      "scale": 400,
+      "hex": "#fb7185",
+      "rgb": "rgb(251,113,133)",
+      "hsl": "hsl(351.3,94.5%,71.4%)",
+      "rgbChannel": "251 113 133",
+      "hslChannel": "351.3 94.5% 71.4%"
+    },
+    {
+      "scale": 500,
+      "hex": "#f43f5e",
+      "rgb": "rgb(244,63,94)",
+      "hsl": "hsl(349.7,89.2%,60.2%)",
+      "rgbChannel": "244 63 94",
+      "hslChannel": "349.7 89.2% 60.2%"
+    },
+    {
+      "scale": 600,
+      "hex": "#e11d48",
+      "rgb": "rgb(225,29,72)",
+      "hsl": "hsl(346.8,77.2%,49.8%)",
+      "rgbChannel": "225 29 72",
+      "hslChannel": "346.8 77.2% 49.8%"
+    },
+    {
+      "scale": 700,
+      "hex": "#be123c",
+      "rgb": "rgb(190,18,60)",
+      "hsl": "hsl(345.3,82.7%,40.8%)",
+      "rgbChannel": "190 18 60",
+      "hslChannel": "345.3 82.7% 40.8%"
+    },
+    {
+      "scale": 800,
+      "hex": "#9f1239",
+      "rgb": "rgb(159,18,57)",
+      "hsl": "hsl(343.4,79.7%,34.7%)",
+      "rgbChannel": "159 18 57",
+      "hslChannel": "343.4 79.7% 34.7%"
+    },
+    {
+      "scale": 900,
+      "hex": "#881337",
+      "rgb": "rgb(136,19,55)",
+      "hsl": "hsl(341.5,75.5%,30.4%)",
+      "rgbChannel": "136 19 55",
+      "hslChannel": "341.5 75.5% 30.4%"
+    },
+    {
+      "scale": 950,
+      "hex": "#4c0519",
+      "rgb": "rgb(76,5,25)",
+      "hsl": "hsl(343.1,87.7%,15.9%)",
+      "rgbChannel": "76 5 25",
+      "hslChannel": "343.1 87.7% 15.9%"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/colors/neutral.json b/apps/www/src/public/r/colors/neutral.json
new file mode 100644
index 000000000..c47c15745
--- /dev/null
+++ b/apps/www/src/public/r/colors/neutral.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "neutral-950",
+      "card": "white",
+      "card-foreground": "neutral-950",
+      "popover": "white",
+      "popover-foreground": "neutral-950",
+      "primary": "neutral-900",
+      "primary-foreground": "neutral-50",
+      "secondary": "neutral-100",
+      "secondary-foreground": "neutral-900",
+      "muted": "neutral-100",
+      "muted-foreground": "neutral-500",
+      "accent": "neutral-100",
+      "accent-foreground": "neutral-900",
+      "destructive": "red-500",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-200",
+      "input": "neutral-200",
+      "ring": "neutral-950"
+    },
+    "dark": {
+      "background": "neutral-950",
+      "foreground": "neutral-50",
+      "card": "neutral-950",
+      "card-foreground": "neutral-50",
+      "popover": "neutral-950",
+      "popover-foreground": "neutral-50",
+      "primary": "neutral-50",
+      "primary-foreground": "neutral-900",
+      "secondary": "neutral-800",
+      "secondary-foreground": "neutral-50",
+      "muted": "neutral-800",
+      "muted-foreground": "neutral-400",
+      "accent": "neutral-800",
+      "accent-foreground": "neutral-50",
+      "destructive": "red-900",
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-800",
+      "input": "neutral-800",
+      "ring": "neutral-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/www/src/public/r/colors/slate.json b/apps/www/src/public/r/colors/slate.json
new file mode 100644
index 000000000..f5bd98b31
--- /dev/null
+++ b/apps/www/src/public/r/colors/slate.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "slate-950",
+      "card": "white",
+      "card-foreground": "slate-950",
+      "popover": "white",
+      "popover-foreground": "slate-950",
+      "primary": "slate-900",
+      "primary-foreground": "slate-50",
+      "secondary": "slate-100",
+      "secondary-foreground": "slate-900",
+      "muted": "slate-100",
+      "muted-foreground": "slate-500",
+      "accent": "slate-100",
+      "accent-foreground": "slate-900",
+      "destructive": "red-500",
+      "destructive-foreground": "slate-50",
+      "border": "slate-200",
+      "input": "slate-200",
+      "ring": "slate-950"
+    },
+    "dark": {
+      "background": "slate-950",
+      "foreground": "slate-50",
+      "card": "slate-950",
+      "card-foreground": "slate-50",
+      "popover": "slate-950",
+      "popover-foreground": "slate-50",
+      "primary": "slate-50",
+      "primary-foreground": "slate-900",
+      "secondary": "slate-800",
+      "secondary-foreground": "slate-50",
+      "muted": "slate-800",
+      "muted-foreground": "slate-400",
+      "accent": "slate-800",
+      "accent-foreground": "slate-50",
+      "destructive": "red-900",
+      "destructive-foreground": "slate-50",
+      "border": "slate-800",
+      "input": "slate-800",
+      "ring": "slate-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "primary": "222.2 47.4% 11.2%",
+      "primary-foreground": "210 40% 98%",
+      "secondary": "210 40% 96.1%",
+      "secondary-foreground": "222.2 47.4% 11.2%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "212.7 26.8% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/www/src/public/r/colors/stone.json b/apps/www/src/public/r/colors/stone.json
new file mode 100644
index 000000000..c2f58bb23
--- /dev/null
+++ b/apps/www/src/public/r/colors/stone.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "stone-950",
+      "card": "white",
+      "card-foreground": "stone-950",
+      "popover": "white",
+      "popover-foreground": "stone-950",
+      "primary": "stone-900",
+      "primary-foreground": "stone-50",
+      "secondary": "stone-100",
+      "secondary-foreground": "stone-900",
+      "muted": "stone-100",
+      "muted-foreground": "stone-500",
+      "accent": "stone-100",
+      "accent-foreground": "stone-900",
+      "destructive": "red-500",
+      "destructive-foreground": "stone-50",
+      "border": "stone-200",
+      "input": "stone-200",
+      "ring": "stone-950"
+    },
+    "dark": {
+      "background": "stone-950",
+      "foreground": "stone-50",
+      "card": "stone-950",
+      "card-foreground": "stone-50",
+      "popover": "stone-950",
+      "popover-foreground": "stone-50",
+      "primary": "stone-50",
+      "primary-foreground": "stone-900",
+      "secondary": "stone-800",
+      "secondary-foreground": "stone-50",
+      "muted": "stone-800",
+      "muted-foreground": "stone-400",
+      "accent": "stone-800",
+      "accent-foreground": "stone-50",
+      "destructive": "red-900",
+      "destructive-foreground": "stone-50",
+      "border": "stone-800",
+      "input": "stone-800",
+      "ring": "stone-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/www/src/public/r/colors/zinc.json b/apps/www/src/public/r/colors/zinc.json
new file mode 100644
index 000000000..47b381443
--- /dev/null
+++ b/apps/www/src/public/r/colors/zinc.json
@@ -0,0 +1,102 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "white",
+      "foreground": "zinc-950",
+      "card": "white",
+      "card-foreground": "zinc-950",
+      "popover": "white",
+      "popover-foreground": "zinc-950",
+      "primary": "zinc-900",
+      "primary-foreground": "zinc-50",
+      "secondary": "zinc-100",
+      "secondary-foreground": "zinc-900",
+      "muted": "zinc-100",
+      "muted-foreground": "zinc-500",
+      "accent": "zinc-100",
+      "accent-foreground": "zinc-900",
+      "destructive": "red-500",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-200",
+      "input": "zinc-200",
+      "ring": "zinc-950"
+    },
+    "dark": {
+      "background": "zinc-950",
+      "foreground": "zinc-50",
+      "card": "zinc-950",
+      "card-foreground": "zinc-50",
+      "popover": "zinc-950",
+      "popover-foreground": "zinc-50",
+      "primary": "zinc-50",
+      "primary-foreground": "zinc-900",
+      "secondary": "zinc-800",
+      "secondary-foreground": "zinc-50",
+      "muted": "zinc-800",
+      "muted-foreground": "zinc-400",
+      "accent": "zinc-800",
+      "accent-foreground": "zinc-50",
+      "destructive": "red-900",
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-800",
+      "input": "zinc-800",
+      "ring": "zinc-300"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/www/src/public/r/icons/index.json b/apps/www/src/public/r/icons/index.json
new file mode 100644
index 000000000..6561bf321
--- /dev/null
+++ b/apps/www/src/public/r/icons/index.json
@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
new file mode 100644
index 000000000..e323d0010
--- /dev/null
+++ b/apps/www/src/public/r/index.json
@@ -0,0 +1,5560 @@
+[
+  {
+    "name": "accordion",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/accordion/Accordion.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/Accordion.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionContent.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionItem.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionTrigger.vue"
+      },
+      {
+        "path": "ui/accordion/index.ts",
+        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "accordion/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert/Alert.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/Alert.vue"
+      },
+      {
+        "path": "ui/alert/AlertDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertDescription.vue"
+      },
+      {
+        "path": "ui/alert/AlertTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertTitle.vue"
+      },
+      {
+        "path": "ui/alert/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+        "type": "registry:ui",
+        "target": "alert/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert-dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert-dialog/AlertDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialog.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogAction.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogCancel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogCancel.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogContent.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogDescription.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogFooter.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogHeader.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTitle.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTrigger.vue"
+      },
+      {
+        "path": "ui/alert-dialog/index.ts",
+        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "aspect-ratio",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/aspect-ratio/AspectRatio.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/AspectRatio.vue"
+      },
+      {
+        "path": "ui/aspect-ratio/index.ts",
+        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "auto-form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "form",
+      "accordion",
+      "button",
+      "separator",
+      "checkbox",
+      "switch",
+      "calendar",
+      "popover",
+      "utils",
+      "label",
+      "radio-group",
+      "select",
+      "input",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "ui/auto-form/AutoForm.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoForm.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormField.vue",
+        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormField.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldArray.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldArray.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldBoolean.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldDate.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldDate.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldEnum.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldEnum.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldFile.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldInput.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldNumber.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldNumber.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldObject.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldObject.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormLabel.vue"
+      },
+      {
+        "path": "ui/auto-form/constant.ts",
+        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/constant.ts"
+      },
+      {
+        "path": "ui/auto-form/dependencies.ts",
+        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/dependencies.ts"
+      },
+      {
+        "path": "ui/auto-form/index.ts",
+        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+        "type": "registry:ui",
+        "target": "auto-form/index.ts"
+      },
+      {
+        "path": "ui/auto-form/interface.ts",
+        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+        "type": "registry:ui",
+        "target": "auto-form/interface.ts"
+      },
+      {
+        "path": "ui/auto-form/utils.ts",
+        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "avatar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/avatar/Avatar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/Avatar.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarFallback.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarFallback.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarImage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarImage.vue"
+      },
+      {
+        "path": "ui/avatar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+        "type": "registry:ui",
+        "target": "avatar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "badge",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/badge/Badge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "badge/Badge.vue"
+      },
+      {
+        "path": "ui/badge/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+        "type": "registry:ui",
+        "target": "badge/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "breadcrumb",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/breadcrumb/Breadcrumb.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/Breadcrumb.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbItem.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbLink.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbLink.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbList.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbList.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbPage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbPage.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbSeparator.vue"
+      },
+      {
+        "path": "ui/breadcrumb/index.ts",
+        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/button/Button.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "button/Button.vue"
+      },
+      {
+        "path": "ui/button/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+        "type": "registry:ui",
+        "target": "button/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/calendar/Calendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGrid.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridBody.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridHead.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridRow.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeader.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeading.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarNextButton.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/card/Card.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/Card.vue"
+      },
+      {
+        "path": "ui/card/CardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardContent.vue"
+      },
+      {
+        "path": "ui/card/CardDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardDescription.vue"
+      },
+      {
+        "path": "ui/card/CardFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardFooter.vue"
+      },
+      {
+        "path": "ui/card/CardHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardHeader.vue"
+      },
+      {
+        "path": "ui/card/CardTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardTitle.vue"
+      },
+      {
+        "path": "ui/card/index.ts",
+        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+        "type": "registry:ui",
+        "target": "card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "carousel",
+    "type": "registry:ui",
+    "dependencies": [
+      "embla-carousel-vue",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/carousel/Carousel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/Carousel.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselContent.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselItem.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselNext.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselPrevious.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselPrevious.vue"
+      },
+      {
+        "path": "ui/carousel/index.ts",
+        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+        "type": "registry:ui",
+        "target": "carousel/index.ts"
+      },
+      {
+        "path": "ui/carousel/interface.ts",
+        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+        "type": "registry:ui",
+        "target": "carousel/interface.ts"
+      },
+      {
+        "path": "ui/carousel/useCarousel.ts",
+        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+        "type": "registry:ui",
+        "target": "carousel/useCarousel.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "ui/chart/ChartCrosshair.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartCrosshair.vue"
+      },
+      {
+        "path": "ui/chart/ChartLegend.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartLegend.vue"
+      },
+      {
+        "path": "ui/chart/ChartSingleTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartSingleTooltip.vue"
+      },
+      {
+        "path": "ui/chart/ChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartTooltip.vue"
+      },
+      {
+        "path": "ui/chart/index.ts",
+        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+        "type": "registry:ui",
+        "target": "chart/index.ts"
+      },
+      {
+        "path": "ui/chart/interface.ts",
+        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart/interface.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-area",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-area/AreaChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-area/AreaChart.vue"
+      },
+      {
+        "path": "ui/chart-area/index.ts",
+        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-bar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-bar/BarChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-bar/BarChart.vue"
+      },
+      {
+        "path": "ui/chart-bar/index.ts",
+        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-bar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-donut",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-donut/DonutChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-donut/DonutChart.vue"
+      },
+      {
+        "path": "ui/chart-donut/index.ts",
+        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-donut/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-line",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-line/LineChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-line/LineChart.vue"
+      },
+      {
+        "path": "ui/chart-line/index.ts",
+        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-line/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "checkbox",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/checkbox/Checkbox.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "checkbox/Checkbox.vue"
+      },
+      {
+        "path": "ui/checkbox/index.ts",
+        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+        "type": "registry:ui",
+        "target": "checkbox/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "collapsible",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/collapsible/Collapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/Collapsible.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleContent.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleTrigger.vue"
+      },
+      {
+        "path": "ui/collapsible/index.ts",
+        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "collapsible/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "command",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/command/Command.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/Command.vue"
+      },
+      {
+        "path": "ui/command/CommandDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandDialog.vue"
+      },
+      {
+        "path": "ui/command/CommandEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandEmpty.vue"
+      },
+      {
+        "path": "ui/command/CommandGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandGroup.vue"
+      },
+      {
+        "path": "ui/command/CommandInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandInput.vue"
+      },
+      {
+        "path": "ui/command/CommandItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandItem.vue"
+      },
+      {
+        "path": "ui/command/CommandList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandList.vue"
+      },
+      {
+        "path": "ui/command/CommandSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandSeparator.vue"
+      },
+      {
+        "path": "ui/command/CommandShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandShortcut.vue"
+      },
+      {
+        "path": "ui/command/index.ts",
+        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "type": "registry:ui",
+        "target": "command/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "context-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/context-menu/ContextMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenu.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuLabel.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuPortal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuPortal.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSeparator.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuShortcut.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSub.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/index.ts",
+        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "context-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dialog/Dialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/Dialog.vue"
+      },
+      {
+        "path": "ui/dialog/DialogClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogClose.vue"
+      },
+      {
+        "path": "ui/dialog/DialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogDescription.vue"
+      },
+      {
+        "path": "ui/dialog/DialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogFooter.vue"
+      },
+      {
+        "path": "ui/dialog/DialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogHeader.vue"
+      },
+      {
+        "path": "ui/dialog/DialogScrollContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogScrollContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTitle.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTrigger.vue"
+      },
+      {
+        "path": "ui/dialog/index.ts",
+        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "drawer",
+    "type": "registry:ui",
+    "dependencies": [
+      "vaul-vue"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/drawer/Drawer.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/Drawer.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerContent.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerContent.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerDescription.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerFooter.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerFooter.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerHeader.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerOverlay.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerOverlay.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerTitle.vue"
+      },
+      {
+        "path": "ui/drawer/index.ts",
+        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+        "type": "registry:ui",
+        "target": "drawer/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dropdown-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dropdown-menu/DropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenu.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuLabel.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSub.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/index.ts",
+        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "ui/form/FormControl.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormControl.vue"
+      },
+      {
+        "path": "ui/form/FormDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormDescription.vue"
+      },
+      {
+        "path": "ui/form/FormItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormItem.vue"
+      },
+      {
+        "path": "ui/form/FormLabel.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormLabel.vue"
+      },
+      {
+        "path": "ui/form/FormMessage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormMessage.vue"
+      },
+      {
+        "path": "ui/form/index.ts",
+        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
+        "type": "registry:ui",
+        "target": "form/index.ts"
+      },
+      {
+        "path": "ui/form/injectionKeys.ts",
+        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+        "type": "registry:ui",
+        "target": "form/injectionKeys.ts"
+      },
+      {
+        "path": "ui/form/useFormField.ts",
+        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "form/useFormField.ts"
+      }
+    ]
+  },
+  {
+    "name": "hover-card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/hover-card/HoverCard.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCard.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardContent.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardTrigger.vue"
+      },
+      {
+        "path": "ui/hover-card/index.ts",
+        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "hover-card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "input",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/input/Input.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+        "type": "registry:ui",
+        "target": "input/Input.vue"
+      },
+      {
+        "path": "ui/input/index.ts",
+        "content": "export { default as Input } from './Input.vue'\n",
+        "type": "registry:ui",
+        "target": "input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "label",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/label/Label.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "label/Label.vue"
+      },
+      {
+        "path": "ui/label/index.ts",
+        "content": "export { default as Label } from './Label.vue'\n",
+        "type": "registry:ui",
+        "target": "label/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "menubar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/menubar/Menubar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/Menubar.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarCheckboxItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarLabel.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarMenu.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSeparator.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarShortcut.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSub.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/index.ts",
+        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "menubar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/navigation-menu/NavigationMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenu.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuContent.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuIndicator.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuItem.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuLink.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuLink.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuList.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuTrigger.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuViewport.vue"
+      },
+      {
+        "path": "ui/navigation-menu/index.ts",
+        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "number-field",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/number-field/NumberField.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberField.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldContent.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldDecrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldDecrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldIncrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldIncrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldInput.vue"
+      },
+      {
+        "path": "ui/number-field/index.ts",
+        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+        "type": "registry:ui",
+        "target": "number-field/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pagination",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/pagination/PaginationEllipsis.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationEllipsis.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationFirst.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationFirst.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationLast.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationLast.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationNext.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationPrev.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationPrev.vue"
+      },
+      {
+        "path": "ui/pagination/index.ts",
+        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "pagination/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pin-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/pin-input/PinInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputGroup.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputSeparator.vue"
+      },
+      {
+        "path": "ui/pin-input/index.ts",
+        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "pin-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/popover/Popover.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/Popover.vue"
+      },
+      {
+        "path": "ui/popover/PopoverContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverContent.vue"
+      },
+      {
+        "path": "ui/popover/PopoverTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverTrigger.vue"
+      },
+      {
+        "path": "ui/popover/index.ts",
+        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "popover/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "progress",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/progress/Progress.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "progress/Progress.vue"
+      },
+      {
+        "path": "ui/progress/index.ts",
+        "content": "export { default as Progress } from './Progress.vue'\n",
+        "type": "registry:ui",
+        "target": "progress/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "radio-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/radio-group/RadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroup.vue"
+      },
+      {
+        "path": "ui/radio-group/RadioGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroupItem.vue"
+      },
+      {
+        "path": "ui/radio-group/index.ts",
+        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "radio-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "range-calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/range-calendar/RangeCalendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendar.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGrid.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridBody.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridHead.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridRow.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeader.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeading.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarNextButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/index.ts",
+        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "range-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "resizable",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/resizable/ResizableHandle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizableHandle.vue"
+      },
+      {
+        "path": "ui/resizable/ResizablePanelGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizablePanelGroup.vue"
+      },
+      {
+        "path": "ui/resizable/index.ts",
+        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "resizable/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "scroll-area",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/scroll-area/ScrollArea.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollArea.vue"
+      },
+      {
+        "path": "ui/scroll-area/ScrollBar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollBar.vue"
+      },
+      {
+        "path": "ui/scroll-area/index.ts",
+        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+        "type": "registry:ui",
+        "target": "scroll-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "select",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/select/Select.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/Select.vue"
+      },
+      {
+        "path": "ui/select/SelectContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectContent.vue"
+      },
+      {
+        "path": "ui/select/SelectGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectGroup.vue"
+      },
+      {
+        "path": "ui/select/SelectItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItem.vue"
+      },
+      {
+        "path": "ui/select/SelectItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItemText.vue"
+      },
+      {
+        "path": "ui/select/SelectLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectLabel.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollDownButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollDownButton.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollUpButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollUpButton.vue"
+      },
+      {
+        "path": "ui/select/SelectSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectSeparator.vue"
+      },
+      {
+        "path": "ui/select/SelectTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectTrigger.vue"
+      },
+      {
+        "path": "ui/select/SelectValue.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectValue.vue"
+      },
+      {
+        "path": "ui/select/index.ts",
+        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+        "type": "registry:ui",
+        "target": "select/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "separator",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/separator/Separator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "separator/Separator.vue"
+      },
+      {
+        "path": "ui/separator/index.ts",
+        "content": "export { default as Separator } from './Separator.vue'\n",
+        "type": "registry:ui",
+        "target": "separator/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sheet",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/sheet/Sheet.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/Sheet.vue"
+      },
+      {
+        "path": "ui/sheet/SheetClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetClose.vue"
+      },
+      {
+        "path": "ui/sheet/SheetContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetContent.vue"
+      },
+      {
+        "path": "ui/sheet/SheetDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetDescription.vue"
+      },
+      {
+        "path": "ui/sheet/SheetFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetFooter.vue"
+      },
+      {
+        "path": "ui/sheet/SheetHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetHeader.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTitle.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTrigger.vue"
+      },
+      {
+        "path": "ui/sheet/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+        "type": "registry:ui",
+        "target": "sheet/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "Sheet.vue",
+      "SheetContent.vue",
+      "utils",
+      "Input.vue",
+      "Tooltip.vue",
+      "TooltipContent.vue",
+      "TooltipTrigger.vue",
+      "Skeleton.vue",
+      "Separator.vue",
+      "Button.vue"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar/Sidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/Sidebar.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarFooter.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroup.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupLabel.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarHeader.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInput.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInset.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInset.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenu.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuBadge.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButtonChild.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSkeleton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSub.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubItem.vue",
+        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarProvider.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarRail.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarRail.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarSeparator.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarTrigger.vue"
+      },
+      {
+        "path": "ui/sidebar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "type": "registry:ui",
+        "target": "sidebar/index.ts"
+      },
+      {
+        "path": "ui/sidebar/utils.ts",
+        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+        "type": "registry:ui",
+        "target": "sidebar/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "skeleton",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/skeleton/Skeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "skeleton/Skeleton.vue"
+      },
+      {
+        "path": "ui/skeleton/index.ts",
+        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+        "type": "registry:ui",
+        "target": "skeleton/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "slider",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/slider/Slider.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "slider/Slider.vue"
+      },
+      {
+        "path": "ui/slider/index.ts",
+        "content": "export { default as Slider } from './Slider.vue'\n",
+        "type": "registry:ui",
+        "target": "slider/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sonner",
+    "type": "registry:ui",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/sonner/Sonner.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "sonner/Sonner.vue"
+      },
+      {
+        "path": "ui/sonner/index.ts",
+        "content": "export { default as Toaster } from './Sonner.vue'\n",
+        "type": "registry:ui",
+        "target": "sonner/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "stepper",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/stepper/Stepper.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/Stepper.vue"
+      },
+      {
+        "path": "ui/stepper/StepperDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperDescription.vue"
+      },
+      {
+        "path": "ui/stepper/StepperIndicator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperIndicator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperItem.vue"
+      },
+      {
+        "path": "ui/stepper/StepperSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperSeparator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTitle.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTrigger.vue"
+      },
+      {
+        "path": "ui/stepper/index.ts",
+        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "stepper/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "switch",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/switch/Switch.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "switch/Switch.vue"
+      },
+      {
+        "path": "ui/switch/index.ts",
+        "content": "export { default as Switch } from './Switch.vue'\n",
+        "type": "registry:ui",
+        "target": "switch/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "table",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/table/Table.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/Table.vue"
+      },
+      {
+        "path": "ui/table/TableBody.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableBody.vue"
+      },
+      {
+        "path": "ui/table/TableCaption.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCaption.vue"
+      },
+      {
+        "path": "ui/table/TableCell.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCell.vue"
+      },
+      {
+        "path": "ui/table/TableEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableEmpty.vue"
+      },
+      {
+        "path": "ui/table/TableFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableFooter.vue"
+      },
+      {
+        "path": "ui/table/TableHead.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHead.vue"
+      },
+      {
+        "path": "ui/table/TableHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHeader.vue"
+      },
+      {
+        "path": "ui/table/TableRow.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableRow.vue"
+      },
+      {
+        "path": "ui/table/index.ts",
+        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+        "type": "registry:ui",
+        "target": "table/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tabs",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tabs/Tabs.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/Tabs.vue"
+      },
+      {
+        "path": "ui/tabs/TabsContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsContent.vue"
+      },
+      {
+        "path": "ui/tabs/TabsList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsList.vue"
+      },
+      {
+        "path": "ui/tabs/TabsTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsTrigger.vue"
+      },
+      {
+        "path": "ui/tabs/index.ts",
+        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tabs/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tags-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tags-input/TagsInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItem.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemDelete.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemDelete.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemText.vue"
+      },
+      {
+        "path": "ui/tags-input/index.ts",
+        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+        "type": "registry:ui",
+        "target": "tags-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "textarea",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/textarea/Textarea.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "textarea/Textarea.vue"
+      },
+      {
+        "path": "ui/textarea/index.ts",
+        "content": "export { default as Textarea } from './Textarea.vue'\n",
+        "type": "registry:ui",
+        "target": "textarea/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toast",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toast/Toast.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toast.vue"
+      },
+      {
+        "path": "ui/toast/ToastAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastAction.vue"
+      },
+      {
+        "path": "ui/toast/ToastClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastClose.vue"
+      },
+      {
+        "path": "ui/toast/ToastDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastDescription.vue"
+      },
+      {
+        "path": "ui/toast/ToastProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastProvider.vue"
+      },
+      {
+        "path": "ui/toast/ToastTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastTitle.vue"
+      },
+      {
+        "path": "ui/toast/ToastViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastViewport.vue"
+      },
+      {
+        "path": "ui/toast/Toaster.vue",
+        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toaster.vue"
+      },
+      {
+        "path": "ui/toast/index.ts",
+        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "toast/index.ts"
+      },
+      {
+        "path": "ui/toast/use-toast.ts",
+        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+        "type": "registry:ui",
+        "target": "toast/use-toast.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle/Toggle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle/Toggle.vue"
+      },
+      {
+        "path": "ui/toggle/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "type": "registry:ui",
+        "target": "toggle/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle-group/ToggleGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroup.vue"
+      },
+      {
+        "path": "ui/toggle-group/ToggleGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroupItem.vue"
+      },
+      {
+        "path": "ui/toggle-group/index.ts",
+        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "toggle-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tooltip",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tooltip/Tooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/Tooltip.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipContent.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipProvider.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipTrigger.vue"
+      },
+      {
+        "path": "ui/tooltip/index.ts",
+        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tooltip/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "v-calendar",
+    "type": "registry:ui",
+    "dependencies": [
+      "v-calendar@next",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/v-calendar/Calendar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "type": "registry:ui",
+        "target": "v-calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/v-calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+        "type": "registry:ui",
+        "target": "v-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "accordion",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/accordion/Accordion.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/Accordion.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionContent.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionItem.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionTrigger.vue"
+      },
+      {
+        "path": "ui/accordion/index.ts",
+        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "accordion/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert/Alert.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/Alert.vue"
+      },
+      {
+        "path": "ui/alert/AlertDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertDescription.vue"
+      },
+      {
+        "path": "ui/alert/AlertTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertTitle.vue"
+      },
+      {
+        "path": "ui/alert/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+        "type": "registry:ui",
+        "target": "alert/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert-dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert-dialog/AlertDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialog.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogAction.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogCancel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogCancel.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogContent.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogDescription.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogFooter.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogHeader.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTitle.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTrigger.vue"
+      },
+      {
+        "path": "ui/alert-dialog/index.ts",
+        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "aspect-ratio",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/aspect-ratio/AspectRatio.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/AspectRatio.vue"
+      },
+      {
+        "path": "ui/aspect-ratio/index.ts",
+        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "auto-form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "form",
+      "accordion",
+      "button",
+      "separator",
+      "checkbox",
+      "switch",
+      "calendar",
+      "popover",
+      "utils",
+      "label",
+      "radio-group",
+      "select",
+      "input",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "ui/auto-form/AutoForm.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoForm.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormField.vue",
+        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormField.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldArray.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldArray.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldBoolean.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldDate.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldDate.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldEnum.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldEnum.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldFile.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldInput.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldNumber.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldNumber.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldObject.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldObject.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormLabel.vue"
+      },
+      {
+        "path": "ui/auto-form/constant.ts",
+        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/constant.ts"
+      },
+      {
+        "path": "ui/auto-form/dependencies.ts",
+        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/dependencies.ts"
+      },
+      {
+        "path": "ui/auto-form/index.ts",
+        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+        "type": "registry:ui",
+        "target": "auto-form/index.ts"
+      },
+      {
+        "path": "ui/auto-form/interface.ts",
+        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+        "type": "registry:ui",
+        "target": "auto-form/interface.ts"
+      },
+      {
+        "path": "ui/auto-form/utils.ts",
+        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "avatar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/avatar/Avatar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/Avatar.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarFallback.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarFallback.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarImage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarImage.vue"
+      },
+      {
+        "path": "ui/avatar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+        "type": "registry:ui",
+        "target": "avatar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "badge",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/badge/Badge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "badge/Badge.vue"
+      },
+      {
+        "path": "ui/badge/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+        "type": "registry:ui",
+        "target": "badge/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "breadcrumb",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/breadcrumb/Breadcrumb.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/Breadcrumb.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbItem.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbLink.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbLink.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbList.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbList.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbPage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbPage.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbSeparator.vue"
+      },
+      {
+        "path": "ui/breadcrumb/index.ts",
+        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/button/Button.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "button/Button.vue"
+      },
+      {
+        "path": "ui/button/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+        "type": "registry:ui",
+        "target": "button/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/calendar/Calendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGrid.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridBody.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridHead.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridRow.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeader.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeading.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarNextButton.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/card/Card.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/Card.vue"
+      },
+      {
+        "path": "ui/card/CardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardContent.vue"
+      },
+      {
+        "path": "ui/card/CardDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardDescription.vue"
+      },
+      {
+        "path": "ui/card/CardFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardFooter.vue"
+      },
+      {
+        "path": "ui/card/CardHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardHeader.vue"
+      },
+      {
+        "path": "ui/card/CardTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardTitle.vue"
+      },
+      {
+        "path": "ui/card/index.ts",
+        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+        "type": "registry:ui",
+        "target": "card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "carousel",
+    "type": "registry:ui",
+    "dependencies": [
+      "embla-carousel-vue",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/carousel/Carousel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/Carousel.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselContent.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselItem.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselNext.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselPrevious.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselPrevious.vue"
+      },
+      {
+        "path": "ui/carousel/index.ts",
+        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+        "type": "registry:ui",
+        "target": "carousel/index.ts"
+      },
+      {
+        "path": "ui/carousel/interface.ts",
+        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+        "type": "registry:ui",
+        "target": "carousel/interface.ts"
+      },
+      {
+        "path": "ui/carousel/useCarousel.ts",
+        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+        "type": "registry:ui",
+        "target": "carousel/useCarousel.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "ui/chart/ChartCrosshair.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartCrosshair.vue"
+      },
+      {
+        "path": "ui/chart/ChartLegend.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartLegend.vue"
+      },
+      {
+        "path": "ui/chart/ChartSingleTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartSingleTooltip.vue"
+      },
+      {
+        "path": "ui/chart/ChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartTooltip.vue"
+      },
+      {
+        "path": "ui/chart/index.ts",
+        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+        "type": "registry:ui",
+        "target": "chart/index.ts"
+      },
+      {
+        "path": "ui/chart/interface.ts",
+        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart/interface.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-area",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-area/AreaChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-area/AreaChart.vue"
+      },
+      {
+        "path": "ui/chart-area/index.ts",
+        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-bar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-bar/BarChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-bar/BarChart.vue"
+      },
+      {
+        "path": "ui/chart-bar/index.ts",
+        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-bar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-donut",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-donut/DonutChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-donut/DonutChart.vue"
+      },
+      {
+        "path": "ui/chart-donut/index.ts",
+        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-donut/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-line",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-line/LineChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-line/LineChart.vue"
+      },
+      {
+        "path": "ui/chart-line/index.ts",
+        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-line/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "checkbox",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/checkbox/Checkbox.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "checkbox/Checkbox.vue"
+      },
+      {
+        "path": "ui/checkbox/index.ts",
+        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+        "type": "registry:ui",
+        "target": "checkbox/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "collapsible",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/collapsible/Collapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/Collapsible.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleContent.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleTrigger.vue"
+      },
+      {
+        "path": "ui/collapsible/index.ts",
+        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "collapsible/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "command",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/command/Command.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/Command.vue"
+      },
+      {
+        "path": "ui/command/CommandDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandDialog.vue"
+      },
+      {
+        "path": "ui/command/CommandEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandEmpty.vue"
+      },
+      {
+        "path": "ui/command/CommandGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandGroup.vue"
+      },
+      {
+        "path": "ui/command/CommandInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandInput.vue"
+      },
+      {
+        "path": "ui/command/CommandItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandItem.vue"
+      },
+      {
+        "path": "ui/command/CommandList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandList.vue"
+      },
+      {
+        "path": "ui/command/CommandSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandSeparator.vue"
+      },
+      {
+        "path": "ui/command/CommandShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandShortcut.vue"
+      },
+      {
+        "path": "ui/command/index.ts",
+        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "type": "registry:ui",
+        "target": "command/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "context-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/context-menu/ContextMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenu.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuLabel.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuPortal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuPortal.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSeparator.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuShortcut.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSub.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/index.ts",
+        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "context-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dialog/Dialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/Dialog.vue"
+      },
+      {
+        "path": "ui/dialog/DialogClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogClose.vue"
+      },
+      {
+        "path": "ui/dialog/DialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogDescription.vue"
+      },
+      {
+        "path": "ui/dialog/DialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogFooter.vue"
+      },
+      {
+        "path": "ui/dialog/DialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogHeader.vue"
+      },
+      {
+        "path": "ui/dialog/DialogScrollContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogScrollContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTitle.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTrigger.vue"
+      },
+      {
+        "path": "ui/dialog/index.ts",
+        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "drawer",
+    "type": "registry:ui",
+    "dependencies": [
+      "vaul-vue"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/drawer/Drawer.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/Drawer.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerContent.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerContent.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerDescription.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerFooter.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerFooter.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerHeader.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerOverlay.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerOverlay.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerTitle.vue"
+      },
+      {
+        "path": "ui/drawer/index.ts",
+        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+        "type": "registry:ui",
+        "target": "drawer/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dropdown-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dropdown-menu/DropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenu.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuLabel.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSub.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/index.ts",
+        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "ui/form/FormControl.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormControl.vue"
+      },
+      {
+        "path": "ui/form/FormDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormDescription.vue"
+      },
+      {
+        "path": "ui/form/FormItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormItem.vue"
+      },
+      {
+        "path": "ui/form/FormLabel.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormLabel.vue"
+      },
+      {
+        "path": "ui/form/FormMessage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormMessage.vue"
+      },
+      {
+        "path": "ui/form/index.ts",
+        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
+        "type": "registry:ui",
+        "target": "form/index.ts"
+      },
+      {
+        "path": "ui/form/injectionKeys.ts",
+        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+        "type": "registry:ui",
+        "target": "form/injectionKeys.ts"
+      },
+      {
+        "path": "ui/form/useFormField.ts",
+        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "form/useFormField.ts"
+      }
+    ]
+  },
+  {
+    "name": "hover-card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/hover-card/HoverCard.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCard.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardContent.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardTrigger.vue"
+      },
+      {
+        "path": "ui/hover-card/index.ts",
+        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "hover-card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "input",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/input/Input.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+        "type": "registry:ui",
+        "target": "input/Input.vue"
+      },
+      {
+        "path": "ui/input/index.ts",
+        "content": "export { default as Input } from './Input.vue'\n",
+        "type": "registry:ui",
+        "target": "input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "label",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/label/Label.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "label/Label.vue"
+      },
+      {
+        "path": "ui/label/index.ts",
+        "content": "export { default as Label } from './Label.vue'\n",
+        "type": "registry:ui",
+        "target": "label/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "menubar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/menubar/Menubar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/Menubar.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarCheckboxItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarLabel.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarMenu.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSeparator.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarShortcut.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSub.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/index.ts",
+        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "menubar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/navigation-menu/NavigationMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenu.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuContent.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuIndicator.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuItem.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuLink.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuLink.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuList.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuTrigger.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuViewport.vue"
+      },
+      {
+        "path": "ui/navigation-menu/index.ts",
+        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "number-field",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/number-field/NumberField.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberField.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldContent.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldDecrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldDecrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldIncrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldIncrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldInput.vue"
+      },
+      {
+        "path": "ui/number-field/index.ts",
+        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+        "type": "registry:ui",
+        "target": "number-field/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pagination",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/pagination/PaginationEllipsis.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationEllipsis.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationFirst.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationFirst.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationLast.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationLast.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationNext.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationPrev.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationPrev.vue"
+      },
+      {
+        "path": "ui/pagination/index.ts",
+        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "pagination/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pin-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/pin-input/PinInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputGroup.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputSeparator.vue"
+      },
+      {
+        "path": "ui/pin-input/index.ts",
+        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "pin-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/popover/Popover.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/Popover.vue"
+      },
+      {
+        "path": "ui/popover/PopoverContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverContent.vue"
+      },
+      {
+        "path": "ui/popover/PopoverTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverTrigger.vue"
+      },
+      {
+        "path": "ui/popover/index.ts",
+        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "popover/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "progress",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/progress/Progress.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "progress/Progress.vue"
+      },
+      {
+        "path": "ui/progress/index.ts",
+        "content": "export { default as Progress } from './Progress.vue'\n",
+        "type": "registry:ui",
+        "target": "progress/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "radio-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/radio-group/RadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroup.vue"
+      },
+      {
+        "path": "ui/radio-group/RadioGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroupItem.vue"
+      },
+      {
+        "path": "ui/radio-group/index.ts",
+        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "radio-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "range-calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/range-calendar/RangeCalendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendar.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGrid.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridBody.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridHead.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridRow.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeader.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeading.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarNextButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/index.ts",
+        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "range-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "resizable",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/resizable/ResizableHandle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizableHandle.vue"
+      },
+      {
+        "path": "ui/resizable/ResizablePanelGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizablePanelGroup.vue"
+      },
+      {
+        "path": "ui/resizable/index.ts",
+        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "resizable/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "scroll-area",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/scroll-area/ScrollArea.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollArea.vue"
+      },
+      {
+        "path": "ui/scroll-area/ScrollBar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollBar.vue"
+      },
+      {
+        "path": "ui/scroll-area/index.ts",
+        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+        "type": "registry:ui",
+        "target": "scroll-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "select",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/select/Select.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/Select.vue"
+      },
+      {
+        "path": "ui/select/SelectContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectContent.vue"
+      },
+      {
+        "path": "ui/select/SelectGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectGroup.vue"
+      },
+      {
+        "path": "ui/select/SelectItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItem.vue"
+      },
+      {
+        "path": "ui/select/SelectItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItemText.vue"
+      },
+      {
+        "path": "ui/select/SelectLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectLabel.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollDownButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollDownButton.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollUpButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollUpButton.vue"
+      },
+      {
+        "path": "ui/select/SelectSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectSeparator.vue"
+      },
+      {
+        "path": "ui/select/SelectTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectTrigger.vue"
+      },
+      {
+        "path": "ui/select/SelectValue.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectValue.vue"
+      },
+      {
+        "path": "ui/select/index.ts",
+        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+        "type": "registry:ui",
+        "target": "select/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "separator",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/separator/Separator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "separator/Separator.vue"
+      },
+      {
+        "path": "ui/separator/index.ts",
+        "content": "export { default as Separator } from './Separator.vue'\n",
+        "type": "registry:ui",
+        "target": "separator/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sheet",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/sheet/Sheet.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/Sheet.vue"
+      },
+      {
+        "path": "ui/sheet/SheetClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetClose.vue"
+      },
+      {
+        "path": "ui/sheet/SheetContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetContent.vue"
+      },
+      {
+        "path": "ui/sheet/SheetDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetDescription.vue"
+      },
+      {
+        "path": "ui/sheet/SheetFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetFooter.vue"
+      },
+      {
+        "path": "ui/sheet/SheetHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetHeader.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTitle.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTrigger.vue"
+      },
+      {
+        "path": "ui/sheet/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+        "type": "registry:ui",
+        "target": "sheet/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "Sheet.vue",
+      "SheetContent.vue",
+      "utils",
+      "Input.vue",
+      "Tooltip.vue",
+      "TooltipContent.vue",
+      "TooltipTrigger.vue",
+      "Skeleton.vue",
+      "Separator.vue",
+      "Button.vue"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar/Sidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/Sidebar.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarFooter.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroup.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupLabel.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarHeader.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInput.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInset.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInset.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenu.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuBadge.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButtonChild.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSkeleton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSub.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubItem.vue",
+        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarProvider.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarRail.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarRail.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarSeparator.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarTrigger.vue"
+      },
+      {
+        "path": "ui/sidebar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "type": "registry:ui",
+        "target": "sidebar/index.ts"
+      },
+      {
+        "path": "ui/sidebar/utils.ts",
+        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+        "type": "registry:ui",
+        "target": "sidebar/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "skeleton",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/skeleton/Skeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "skeleton/Skeleton.vue"
+      },
+      {
+        "path": "ui/skeleton/index.ts",
+        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+        "type": "registry:ui",
+        "target": "skeleton/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "slider",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/slider/Slider.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "slider/Slider.vue"
+      },
+      {
+        "path": "ui/slider/index.ts",
+        "content": "export { default as Slider } from './Slider.vue'\n",
+        "type": "registry:ui",
+        "target": "slider/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sonner",
+    "type": "registry:ui",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/sonner/Sonner.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "sonner/Sonner.vue"
+      },
+      {
+        "path": "ui/sonner/index.ts",
+        "content": "export { default as Toaster } from './Sonner.vue'\n",
+        "type": "registry:ui",
+        "target": "sonner/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "stepper",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/stepper/Stepper.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/Stepper.vue"
+      },
+      {
+        "path": "ui/stepper/StepperDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperDescription.vue"
+      },
+      {
+        "path": "ui/stepper/StepperIndicator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperIndicator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperItem.vue"
+      },
+      {
+        "path": "ui/stepper/StepperSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperSeparator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTitle.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTrigger.vue"
+      },
+      {
+        "path": "ui/stepper/index.ts",
+        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "stepper/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "switch",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/switch/Switch.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "switch/Switch.vue"
+      },
+      {
+        "path": "ui/switch/index.ts",
+        "content": "export { default as Switch } from './Switch.vue'\n",
+        "type": "registry:ui",
+        "target": "switch/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "table",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/table/Table.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/Table.vue"
+      },
+      {
+        "path": "ui/table/TableBody.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableBody.vue"
+      },
+      {
+        "path": "ui/table/TableCaption.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCaption.vue"
+      },
+      {
+        "path": "ui/table/TableCell.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCell.vue"
+      },
+      {
+        "path": "ui/table/TableEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableEmpty.vue"
+      },
+      {
+        "path": "ui/table/TableFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableFooter.vue"
+      },
+      {
+        "path": "ui/table/TableHead.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHead.vue"
+      },
+      {
+        "path": "ui/table/TableHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHeader.vue"
+      },
+      {
+        "path": "ui/table/TableRow.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableRow.vue"
+      },
+      {
+        "path": "ui/table/index.ts",
+        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+        "type": "registry:ui",
+        "target": "table/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tabs",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tabs/Tabs.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/Tabs.vue"
+      },
+      {
+        "path": "ui/tabs/TabsContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsContent.vue"
+      },
+      {
+        "path": "ui/tabs/TabsList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsList.vue"
+      },
+      {
+        "path": "ui/tabs/TabsTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsTrigger.vue"
+      },
+      {
+        "path": "ui/tabs/index.ts",
+        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tabs/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tags-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tags-input/TagsInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItem.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemDelete.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemDelete.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemText.vue"
+      },
+      {
+        "path": "ui/tags-input/index.ts",
+        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+        "type": "registry:ui",
+        "target": "tags-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "textarea",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/textarea/Textarea.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "textarea/Textarea.vue"
+      },
+      {
+        "path": "ui/textarea/index.ts",
+        "content": "export { default as Textarea } from './Textarea.vue'\n",
+        "type": "registry:ui",
+        "target": "textarea/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toast",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toast/Toast.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toast.vue"
+      },
+      {
+        "path": "ui/toast/ToastAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastAction.vue"
+      },
+      {
+        "path": "ui/toast/ToastClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastClose.vue"
+      },
+      {
+        "path": "ui/toast/ToastDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastDescription.vue"
+      },
+      {
+        "path": "ui/toast/ToastProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastProvider.vue"
+      },
+      {
+        "path": "ui/toast/ToastTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastTitle.vue"
+      },
+      {
+        "path": "ui/toast/ToastViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastViewport.vue"
+      },
+      {
+        "path": "ui/toast/Toaster.vue",
+        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toaster.vue"
+      },
+      {
+        "path": "ui/toast/index.ts",
+        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "toast/index.ts"
+      },
+      {
+        "path": "ui/toast/use-toast.ts",
+        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+        "type": "registry:ui",
+        "target": "toast/use-toast.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle/Toggle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle/Toggle.vue"
+      },
+      {
+        "path": "ui/toggle/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "type": "registry:ui",
+        "target": "toggle/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle-group/ToggleGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroup.vue"
+      },
+      {
+        "path": "ui/toggle-group/ToggleGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroupItem.vue"
+      },
+      {
+        "path": "ui/toggle-group/index.ts",
+        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "toggle-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tooltip",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tooltip/Tooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/Tooltip.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipContent.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipProvider.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipTrigger.vue"
+      },
+      {
+        "path": "ui/tooltip/index.ts",
+        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tooltip/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "v-calendar",
+    "type": "registry:ui",
+    "dependencies": [
+      "v-calendar@next",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/v-calendar/Calendar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "type": "registry:ui",
+        "target": "v-calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/v-calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+        "type": "registry:ui",
+        "target": "v-calendar/index.ts"
+      }
+    ]
+  }
+]
diff --git a/apps/www/src/public/r/styles/default/AccordionDemo.json b/apps/www/src/public/r/styles/default/AccordionDemo.json
new file mode 100644
index 000000000..67c82eb96
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AccordionDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AccordionDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "example/AccordionDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
+      "type": "registry:example",
+      "target": "AccordionDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDemo.json b/apps/www/src/public/r/styles/default/AlertDemo.json
new file mode 100644
index 000000000..a4978a65e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AlertDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AlertDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
new file mode 100644
index 000000000..7e103c480
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AlertDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDialogDemo.json b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
new file mode 100644
index 000000000..ab38b57cf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "AlertDialogDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
new file mode 100644
index 000000000..5355c282f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartDemo.json b/apps/www/src/public/r/styles/default/AreaChartDemo.json
new file mode 100644
index 000000000..9d5531192
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AreaChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartSparkline.json b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
new file mode 100644
index 000000000..f1aeed38c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartSparkline",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartSparkline.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartSparkline.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AspectRatioDemo.json b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
new file mode 100644
index 000000000..55764cdf1
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AspectRatioDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "example/AspectRatioDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
+      "type": "registry:example",
+      "target": "AspectRatioDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication01.json b/apps/www/src/public/r/styles/default/Authentication01.json
new file mode 100644
index 000000000..4eb8ac5ff
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Authentication01.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication02.json b/apps/www/src/public/r/styles/default/Authentication02.json
new file mode 100644
index 000000000..dd2c2f64c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Authentication02.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication03.json b/apps/www/src/public/r/styles/default/Authentication03.json
new file mode 100644
index 000000000..d14c95e5d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Authentication03.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication04.json b/apps/www/src/public/r/styles/default/Authentication04.json
new file mode 100644
index 000000000..a8fec2ac8
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Authentication04.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormApi.json b/apps/www/src/public/r/styles/default/AutoFormApi.json
new file mode 100644
index 000000000..670ea3fea
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormApi.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormApi",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormApi.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormApi.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormArray.json b/apps/www/src/public/r/styles/default/AutoFormArray.json
new file mode 100644
index 000000000..60c1777c2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormArray.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormArray",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormArray.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormArray.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormBasic.json b/apps/www/src/public/r/styles/default/AutoFormBasic.json
new file mode 100644
index 000000000..166d33e8a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormBasic.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormBasic",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormBasic.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormBasic.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
new file mode 100644
index 000000000..6aad81883
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormConfirmPassword",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormConfirmPassword.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormConfirmPassword.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormControlled.json b/apps/www/src/public/r/styles/default/AutoFormControlled.json
new file mode 100644
index 000000000..a49eef5f8
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormControlled.json
@@ -0,0 +1,22 @@
+{
+  "name": "AutoFormControlled",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormControlled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormDependencies.json b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
new file mode 100644
index 000000000..73de25918
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormDependencies",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormDependencies.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormDependencies.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
new file mode 100644
index 000000000..2c3215c63
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormInputWithoutLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormInputWithoutLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormInputWithoutLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormSubObject.json b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
new file mode 100644
index 000000000..4386cf799
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormSubObject",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormSubObject.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormSubObject.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AvatarDemo.json b/apps/www/src/public/r/styles/default/AvatarDemo.json
new file mode 100644
index 000000000..db9f7846d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/AvatarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AvatarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "example/AvatarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
+      "type": "registry:example",
+      "target": "AvatarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeDemo.json b/apps/www/src/public/r/styles/default/BadgeDemo.json
new file mode 100644
index 000000000..57075e91f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BadgeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
new file mode 100644
index 000000000..43b0e2e85
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
new file mode 100644
index 000000000..1d5607b0f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
new file mode 100644
index 000000000..7ae39020a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeSecondaryDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeSecondaryDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeSecondaryDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
new file mode 100644
index 000000000..3915d380b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartDemo.json b/apps/www/src/public/r/styles/default/BarChartDemo.json
new file mode 100644
index 000000000..bb43aa647
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BarChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartRounded.json b/apps/www/src/public/r/styles/default/BarChartRounded.json
new file mode 100644
index 000000000..125e2acf8
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BarChartRounded.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartRounded",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartRounded.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartRounded.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartStacked.json b/apps/www/src/public/r/styles/default/BarChartStacked.json
new file mode 100644
index 000000000..02b51ebbe
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BarChartStacked.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartStacked",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartStacked.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartStacked.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
new file mode 100644
index 000000000..69a825e93
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "BreadcrumbDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
new file mode 100644
index 000000000..a25113108
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
@@ -0,0 +1,17 @@
+{
+  "name": "BreadcrumbDropdown",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbDropdown.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbDropdown.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
new file mode 100644
index 000000000..81d330f7d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbEllipsisDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbEllipsisDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbEllipsisDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
new file mode 100644
index 000000000..988e7a349
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbLinkDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbLinkDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbLinkDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
new file mode 100644
index 000000000..d6bf80ca3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "BreadcrumbResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "breadcrumb",
+    "button",
+    "drawer",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbResponsive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
new file mode 100644
index 000000000..714bf5a65
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbSeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbSeparatorDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbSeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
new file mode 100644
index 000000000..0376cfd04
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonAsChildDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonAsChildDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonAsChildDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonDemo.json b/apps/www/src/public/r/styles/default/ButtonDemo.json
new file mode 100644
index 000000000..0446f9009
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
new file mode 100644
index 000000000..93e2c997c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
new file mode 100644
index 000000000..2325ae0ee
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonGhostDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonGhostDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonGhostDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonIconDemo.json b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
new file mode 100644
index 000000000..82fbb7a41
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonIconDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonIconDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonIconDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
new file mode 100644
index 000000000..b154bb9ce
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonLinkDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonLinkDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonLinkDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
new file mode 100644
index 000000000..596ee0422
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonLoadingDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonLoadingDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonLoadingDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
new file mode 100644
index 000000000..fe3476ed0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
new file mode 100644
index 000000000..0766c8394
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonSecondaryDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonSecondaryDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonSecondaryDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
new file mode 100644
index 000000000..1c1f401ed
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonWithIconDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonWithIconDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonWithIconDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarDemo.json b/apps/www/src/public/r/styles/default/CalendarDemo.json
new file mode 100644
index 000000000..45aa55bf5
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarForm.json b/apps/www/src/public/r/styles/default/CalendarForm.json
new file mode 100644
index 000000000..28f4be492
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CalendarForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "CalendarForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarWithSelect.json b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
new file mode 100644
index 000000000..a2cb3498c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
@@ -0,0 +1,20 @@
+{
+  "name": "CalendarWithSelect",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "select",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarWithSelect.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarWithSelect.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CardChat.json b/apps/www/src/public/r/styles/default/CardChat.json
new file mode 100644
index 000000000..bbe92e7fa
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CardChat.json
@@ -0,0 +1,23 @@
+{
+  "name": "CardChat",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "card",
+    "command",
+    "dialog",
+    "input",
+    "tooltip",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CardChat.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\n\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardChat.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CardDemo.json b/apps/www/src/public/r/styles/default/CardDemo.json
new file mode 100644
index 000000000..d4a60f524
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CardDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "CardDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "switch",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CardDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CardFormDemo.json b/apps/www/src/public/r/styles/default/CardFormDemo.json
new file mode 100644
index 000000000..fee8273e0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CardFormDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "CardFormDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/CardFormDemo.vue",
+      "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CardStats.json b/apps/www/src/public/r/styles/default/CardStats.json
new file mode 100644
index 000000000..09cc42dc7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CardStats.json
@@ -0,0 +1,21 @@
+{
+  "name": "CardStats",
+  "type": "registry:example",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "card",
+    "themes",
+    "config"
+  ],
+  "files": [
+    {
+      "path": "example/CardStats.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars[isDark ? 'dark' : 'light'].primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardStats.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CardWithForm.json b/apps/www/src/public/r/styles/default/CardWithForm.json
new file mode 100644
index 000000000..03ef5d687
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CardWithForm.json
@@ -0,0 +1,20 @@
+{
+  "name": "CardWithForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/CardWithForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardWithForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselApi.json b/apps/www/src/public/r/styles/default/CarouselApi.json
new file mode 100644
index 000000000..8554faffc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselApi.json
@@ -0,0 +1,19 @@
+{
+  "name": "CarouselApi",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "carousel",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselApi.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselApi.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselDemo.json b/apps/www/src/public/r/styles/default/CarouselDemo.json
new file mode 100644
index 000000000..623dbccca
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselOrientation.json b/apps/www/src/public/r/styles/default/CarouselOrientation.json
new file mode 100644
index 000000000..1d1d5e2f3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselOrientation.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselOrientation",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselOrientation.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselOrientation.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselPlugin.json b/apps/www/src/public/r/styles/default/CarouselPlugin.json
new file mode 100644
index 000000000..a0aed9547
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselPlugin.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselPlugin",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselPlugin.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselPlugin.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselSize.json b/apps/www/src/public/r/styles/default/CarouselSize.json
new file mode 100644
index 000000000..38bf4ac52
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselSize.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselSize",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselSize.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselSize.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselSpacing.json b/apps/www/src/public/r/styles/default/CarouselSpacing.json
new file mode 100644
index 000000000..5fdd24077
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselSpacing.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselSpacing",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselSpacing.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselSpacing.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselThumbnails.json b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
new file mode 100644
index 000000000..d66fe2f36
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
@@ -0,0 +1,19 @@
+{
+  "name": "CarouselThumbnails",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselThumbnails.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselThumbnails.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxDemo.json b/apps/www/src/public/r/styles/default/CheckboxDemo.json
new file mode 100644
index 000000000..b14de095b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CheckboxDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxDisabled.json b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
new file mode 100644
index 000000000..644fbe639
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
new file mode 100644
index 000000000..59c2a286b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
@@ -0,0 +1,23 @@
+{
+  "name": "CheckboxFormMultiple",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "form",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxFormMultiple.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxFormMultiple.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
new file mode 100644
index 000000000..b9633175b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
@@ -0,0 +1,23 @@
+{
+  "name": "CheckboxFormSingle",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "form",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxFormSingle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxFormSingle.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxWithText.json b/apps/www/src/public/r/styles/default/CheckboxWithText.json
new file mode 100644
index 000000000..9f3f1328f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CheckboxWithText.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxWithText",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxWithText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxWithText.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CollapsibleDemo.json b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
new file mode 100644
index 000000000..0b934ca45
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "CollapsibleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "example/CollapsibleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+      "type": "registry:example",
+      "target": "CollapsibleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxDemo.json b/apps/www/src/public/r/styles/default/ComboboxDemo.json
new file mode 100644
index 000000000..3da509ce6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "ComboboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
new file mode 100644
index 000000000..25307b288
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
@@ -0,0 +1,18 @@
+{
+  "name": "ComboboxDropdownMenu",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxDropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxDropdownMenu.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxForm.json b/apps/www/src/public/r/styles/default/ComboboxForm.json
new file mode 100644
index 000000000..d7d54183e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "ComboboxForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxPopover.json b/apps/www/src/public/r/styles/default/ComboboxPopover.json
new file mode 100644
index 000000000..1cbddc6bd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxPopover.json
@@ -0,0 +1,19 @@
+{
+  "name": "ComboboxPopover",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxPopover.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxPopover.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxResponsive.json b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
new file mode 100644
index 000000000..78bfa7469
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "ComboboxResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "drawer",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxResponsive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandDemo.json b/apps/www/src/public/r/styles/default/CommandDemo.json
new file mode 100644
index 000000000..5d2718a1d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CommandDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+      "type": "registry:example",
+      "target": "CommandDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandDialogDemo.json b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
new file mode 100644
index 000000000..e472da790
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandDialogDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CommandDialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ContextMenuDemo.json b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
new file mode 100644
index 000000000..c8a85b039
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ContextMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "example/ContextMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "ContextMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CustomChartTooltip.json b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
new file mode 100644
index 000000000..bcbbb1abd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "CustomChartTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "example/CustomChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CustomChartTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard01.json b/apps/www/src/public/r/styles/default/Dashboard01.json
new file mode 100644
index 000000000..382915cfc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard01.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard02.json b/apps/www/src/public/r/styles/default/Dashboard02.json
new file mode 100644
index 000000000..8082f6c11
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard02.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard03.json b/apps/www/src/public/r/styles/default/Dashboard03.json
new file mode 100644
index 000000000..049c155f7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard03.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard04.json b/apps/www/src/public/r/styles/default/Dashboard04.json
new file mode 100644
index 000000000..a90bccd8c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard04.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard05.json b/apps/www/src/public/r/styles/default/Dashboard05.json
new file mode 100644
index 000000000..792037a6a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard05.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard05",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard06.json b/apps/www/src/public/r/styles/default/Dashboard06.json
new file mode 100644
index 000000000..30fce9934
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard06.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard06",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard07.json b/apps/www/src/public/r/styles/default/Dashboard07.json
new file mode 100644
index 000000000..83cd11900
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Dashboard07.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard07",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
new file mode 100644
index 000000000..a3e46cdd3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableColumnPinningDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableColumnPinningDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableColumnPinningDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableDemo.json b/apps/www/src/public/r/styles/default/DataTableDemo.json
new file mode 100644
index 000000000..fa1cfa7b7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DataTableDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
new file mode 100644
index 000000000..90eed3f9c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
@@ -0,0 +1,17 @@
+{
+  "name": "DataTableDemoColumn",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableDemoColumn.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableDemoColumn.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
new file mode 100644
index 000000000..610924063
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableReactiveDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableReactiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableReactiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerDemo.json b/apps/www/src/public/r/styles/default/DatePickerDemo.json
new file mode 100644
index 000000000..d7e74d425
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DatePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerForm.json b/apps/www/src/public/r/styles/default/DatePickerForm.json
new file mode 100644
index 000000000..0983f5c48
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DatePickerForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "DatePickerForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
new file mode 100644
index 000000000..51a4c1d09
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerWithIndependentMonths",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "range-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithIndependentMonths.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithIndependentMonths.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
new file mode 100644
index 000000000..0c4425f7f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
@@ -0,0 +1,20 @@
+{
+  "name": "DatePickerWithPresets",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithPresets.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithPresets.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithRange.json b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
new file mode 100644
index 000000000..91df74a57
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerWithRange",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "range-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithRange.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithRange.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
new file mode 100644
index 000000000..9e1155bdf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
@@ -0,0 +1,19 @@
+{
+  "name": "DialogCustomCloseButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DialogCustomCloseButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogCustomCloseButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DialogDemo.json b/apps/www/src/public/r/styles/default/DialogDemo.json
new file mode 100644
index 000000000..f9d729fae
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DialogDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "DialogDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DialogForm.json b/apps/www/src/public/r/styles/default/DialogForm.json
new file mode 100644
index 000000000..2fcd3afd5
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DialogForm.json
@@ -0,0 +1,20 @@
+{
+  "name": "DialogForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/DialogForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
new file mode 100644
index 000000000..472bd072b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogScrollBodyDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/DialogScrollBodyDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogScrollBodyDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
new file mode 100644
index 000000000..23676107d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogScrollOverlayDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/DialogScrollOverlayDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogScrollOverlayDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartColor.json b/apps/www/src/public/r/styles/default/DonutChartColor.json
new file mode 100644
index 000000000..4f45b1086
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DonutChartColor.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartColor",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartColor.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartColor.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
new file mode 100644
index 000000000..c65d72094
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartDemo.json b/apps/www/src/public/r/styles/default/DonutChartDemo.json
new file mode 100644
index 000000000..bc38705c5
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DonutChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartPie.json b/apps/www/src/public/r/styles/default/DonutChartPie.json
new file mode 100644
index 000000000..c857ac908
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DonutChartPie.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartPie",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartPie.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartPie.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DrawerDemo.json b/apps/www/src/public/r/styles/default/DrawerDemo.json
new file mode 100644
index 000000000..aeec0d467
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DrawerDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "DrawerDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "example/DrawerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "type": "registry:example",
+      "target": "DrawerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DrawerDialog.json b/apps/www/src/public/r/styles/default/DrawerDialog.json
new file mode 100644
index 000000000..9cfc3720e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DrawerDialog.json
@@ -0,0 +1,22 @@
+{
+  "name": "DrawerDialog",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "drawer",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DrawerDialog.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "type": "registry:example",
+      "target": "DrawerDialog.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
new file mode 100644
index 000000000..2f5df9f82
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuCheckboxes",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuCheckboxes.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuCheckboxes.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
new file mode 100644
index 000000000..fb99f6397
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
new file mode 100644
index 000000000..3522ab992
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuRadioGroup",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuRadioGroup.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuRadioGroup.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/HoverCardDemo.json b/apps/www/src/public/r/styles/default/HoverCardDemo.json
new file mode 100644
index 000000000..3272d44ba
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/HoverCardDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "HoverCardDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "example/HoverCardDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+      "type": "registry:example",
+      "target": "HoverCardDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputDemo.json b/apps/www/src/public/r/styles/default/InputDemo.json
new file mode 100644
index 000000000..7c6dab873
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "InputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputDisabled.json b/apps/www/src/public/r/styles/default/InputDisabled.json
new file mode 100644
index 000000000..b50982f29
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "InputDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputFile.json b/apps/www/src/public/r/styles/default/InputFile.json
new file mode 100644
index 000000000..0efb8da50
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputFile.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputFile",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/InputFile.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputFile.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputForm.json b/apps/www/src/public/r/styles/default/InputForm.json
new file mode 100644
index 000000000..37f1bef76
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "InputForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/InputForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
new file mode 100644
index 000000000..0bc1c1e07
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
@@ -0,0 +1,23 @@
+{
+  "name": "InputFormAutoAnimate",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/InputFormAutoAnimate.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputFormAutoAnimate.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithButton.json b/apps/www/src/public/r/styles/default/InputWithButton.json
new file mode 100644
index 000000000..2336a8fcb
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputWithButton.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputWithButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithIcon.json b/apps/www/src/public/r/styles/default/InputWithIcon.json
new file mode 100644
index 000000000..77a6e715d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputWithIcon.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputWithIcon",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithIcon.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithIcon.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithLabel.json b/apps/www/src/public/r/styles/default/InputWithLabel.json
new file mode 100644
index 000000000..1eaa05bf7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/InputWithLabel.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputWithLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/LabelDemo.json b/apps/www/src/public/r/styles/default/LabelDemo.json
new file mode 100644
index 000000000..8770ce07b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/LabelDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "LabelDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/LabelDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "LabelDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
new file mode 100644
index 000000000..1bb7424c4
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartDemo.json b/apps/www/src/public/r/styles/default/LineChartDemo.json
new file mode 100644
index 000000000..116bf7256
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/LineChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartSparkline.json b/apps/www/src/public/r/styles/default/LineChartSparkline.json
new file mode 100644
index 000000000..4c4f86c32
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/LineChartSparkline.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartSparkline",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartSparkline.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartSparkline.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/MenubarDemo.json b/apps/www/src/public/r/styles/default/MenubarDemo.json
new file mode 100644
index 000000000..dc187b4a7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/MenubarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "MenubarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "example/MenubarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
+      "type": "registry:example",
+      "target": "MenubarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
new file mode 100644
index 000000000..62a7737a4
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "NavigationMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "example/NavigationMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "NavigationMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
new file mode 100644
index 000000000..9ef6bdb4e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldCurrency",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldCurrency.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldCurrency.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
new file mode 100644
index 000000000..6418993f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDecimal",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDecimal.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDecimal.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDemo.json b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
new file mode 100644
index 000000000..0b66a6ae2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
new file mode 100644
index 000000000..d4b588b8f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldForm.json b/apps/www/src/public/r/styles/default/NumberFieldForm.json
new file mode 100644
index 000000000..0f3a85b99
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "NumberFieldForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "number-field",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
new file mode 100644
index 000000000..48b89af53
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldPercentage",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldPercentage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldPercentage.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PaginationDemo.json b/apps/www/src/public/r/styles/default/PaginationDemo.json
new file mode 100644
index 000000000..12779137f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PaginationDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "PaginationDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "example/PaginationDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
+      "type": "registry:example",
+      "target": "PaginationDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputControlled.json b/apps/www/src/public/r/styles/default/PinInputControlled.json
new file mode 100644
index 000000000..3fdd9de5c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PinInputControlled.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputControlled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputControlled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputDemo.json b/apps/www/src/public/r/styles/default/PinInputDemo.json
new file mode 100644
index 000000000..c62edcb8c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PinInputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputDisabled.json b/apps/www/src/public/r/styles/default/PinInputDisabled.json
new file mode 100644
index 000000000..9b5a793bd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PinInputDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputFormDemo.json b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
new file mode 100644
index 000000000..a4debbf58
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "PinInputFormDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "pin-input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputFormDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
new file mode 100644
index 000000000..256c8a095
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputSeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputSeparatorDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputSeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/PopoverDemo.json b/apps/www/src/public/r/styles/default/PopoverDemo.json
new file mode 100644
index 000000000..d942a5888
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/PopoverDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "PopoverDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/PopoverDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "PopoverDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ProgressDemo.json b/apps/www/src/public/r/styles/default/ProgressDemo.json
new file mode 100644
index 000000000..9d01a67a2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ProgressDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ProgressDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "example/ProgressDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "ProgressDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/RadioGroupDemo.json b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
new file mode 100644
index 000000000..979dc8ba6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "RadioGroupDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "example/RadioGroupDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "RadioGroupDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/RadioGroupForm.json b/apps/www/src/public/r/styles/default/RadioGroupForm.json
new file mode 100644
index 000000000..4ebf495a9
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/RadioGroupForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "RadioGroupForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "radio-group",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/RadioGroupForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "RadioGroupForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
new file mode 100644
index 000000000..98c09b39f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "RangeCalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "range-calendar"
+  ],
+  "files": [
+    {
+      "path": "example/RangeCalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "RangeCalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableDemo.json b/apps/www/src/public/r/styles/default/ResizableDemo.json
new file mode 100644
index 000000000..0981109b7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ResizableDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
new file mode 100644
index 000000000..bef96cf93
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableHandleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableHandleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableHandleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
new file mode 100644
index 000000000..ca850a023
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableVerticalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableVerticalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableVerticalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
new file mode 100644
index 000000000..a705d24e7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "ScrollAreaDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "scroll-area",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "example/ScrollAreaDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
+      "type": "registry:example",
+      "target": "ScrollAreaDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
new file mode 100644
index 000000000..961737e97
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ScrollAreaHorizontalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "example/ScrollAreaHorizontalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
+      "type": "registry:example",
+      "target": "ScrollAreaHorizontalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SelectDemo.json b/apps/www/src/public/r/styles/default/SelectDemo.json
new file mode 100644
index 000000000..2e43fc0ac
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SelectDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SelectDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/SelectDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SelectForm.json b/apps/www/src/public/r/styles/default/SelectForm.json
new file mode 100644
index 000000000..b819e8eda
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SelectForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SelectForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "select",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SelectForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SelectScrollable.json b/apps/www/src/public/r/styles/default/SelectScrollable.json
new file mode 100644
index 000000000..273dee224
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SelectScrollable.json
@@ -0,0 +1,16 @@
+{
+  "name": "SelectScrollable",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/SelectScrollable.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectScrollable.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SeparatorDemo.json b/apps/www/src/public/r/styles/default/SeparatorDemo.json
new file mode 100644
index 000000000..d703d65cd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "example/SeparatorDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SheetDemo.json b/apps/www/src/public/r/styles/default/SheetDemo.json
new file mode 100644
index 000000000..b6e72cd02
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SheetDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "SheetDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "example/SheetDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
+      "type": "registry:example",
+      "target": "SheetDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SheetSideDemo.json b/apps/www/src/public/r/styles/default/SheetSideDemo.json
new file mode 100644
index 000000000..92d882a71
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SheetSideDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "SheetSideDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "example/SheetSideDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SheetSideDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SkeletonCard.json b/apps/www/src/public/r/styles/default/SkeletonCard.json
new file mode 100644
index 000000000..283ddd8a9
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SkeletonCard.json
@@ -0,0 +1,16 @@
+{
+  "name": "SkeletonCard",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "example/SkeletonCard.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SkeletonCard.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SkeletonDemo.json b/apps/www/src/public/r/styles/default/SkeletonDemo.json
new file mode 100644
index 000000000..e46f73c67
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SkeletonDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SkeletonDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "example/SkeletonDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SkeletonDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SliderDemo.json b/apps/www/src/public/r/styles/default/SliderDemo.json
new file mode 100644
index 000000000..33746499d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SliderDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "SliderDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "slider",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/SliderDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/default/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "SliderDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SliderForm.json b/apps/www/src/public/r/styles/default/SliderForm.json
new file mode 100644
index 000000000..d1172ec09
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SliderForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SliderForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "slider",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SliderForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SliderForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SonnerDemo.json b/apps/www/src/public/r/styles/default/SonnerDemo.json
new file mode 100644
index 000000000..b3bc1b32a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SonnerDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "SonnerDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/SonnerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "SonnerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SonnerWithDialog.json b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
new file mode 100644
index 000000000..3a00bed38
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
@@ -0,0 +1,19 @@
+{
+  "name": "SonnerWithDialog",
+  "type": "registry:example",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/SonnerWithDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "SonnerWithDialog.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/StepperDemo.json b/apps/www/src/public/r/styles/default/StepperDemo.json
new file mode 100644
index 000000000..23c4f3d56
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/StepperDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "StepperDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/StepperForm.json b/apps/www/src/public/r/styles/default/StepperForm.json
new file mode 100644
index 000000000..c4da6731c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/StepperForm.json
@@ -0,0 +1,21 @@
+{
+  "name": "StepperForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "select",
+    "stepper",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/StepperForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/StepperHorizental.json b/apps/www/src/public/r/styles/default/StepperHorizental.json
new file mode 100644
index 000000000..aecf71e66
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/StepperHorizental.json
@@ -0,0 +1,17 @@
+{
+  "name": "StepperHorizental",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperHorizental.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperHorizental.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/StepperVertical.json b/apps/www/src/public/r/styles/default/StepperVertical.json
new file mode 100644
index 000000000..36fd1a087
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/StepperVertical.json
@@ -0,0 +1,17 @@
+{
+  "name": "StepperVertical",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperVertical.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperVertical.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SwitchDemo.json b/apps/www/src/public/r/styles/default/SwitchDemo.json
new file mode 100644
index 000000000..217b26f57
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SwitchDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "SwitchDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "example/SwitchDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SwitchDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SwitchForm.json b/apps/www/src/public/r/styles/default/SwitchForm.json
new file mode 100644
index 000000000..3e156df7b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/SwitchForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SwitchForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "switch",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SwitchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SwitchForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TableDemo.json b/apps/www/src/public/r/styles/default/TableDemo.json
new file mode 100644
index 000000000..31658c645
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TableDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TableDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "example/TableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
+      "type": "registry:example",
+      "target": "TableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TabsDemo.json b/apps/www/src/public/r/styles/default/TabsDemo.json
new file mode 100644
index 000000000..75491122a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TabsDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "TabsDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "example/TabsDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+      "type": "registry:example",
+      "target": "TabsDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
new file mode 100644
index 000000000..bed9f70eb
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "TabsVerticalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "example/TabsVerticalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+      "type": "registry:example",
+      "target": "TabsVerticalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
new file mode 100644
index 000000000..aea6d7e87
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "TagsInputComboboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "command",
+    "tags-input"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputComboboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputComboboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputDemo.json b/apps/www/src/public/r/styles/default/TagsInputDemo.json
new file mode 100644
index 000000000..196a564a7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TagsInputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TagsInputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "tags-input"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
new file mode 100644
index 000000000..3db19bace
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "TagsInputFormDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "tags-input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputFormDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaDemo.json b/apps/www/src/public/r/styles/default/TextareaDemo.json
new file mode 100644
index 000000000..b20016bdc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TextareaDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaDisabled.json b/apps/www/src/public/r/styles/default/TextareaDisabled.json
new file mode 100644
index 000000000..1732242ee
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "TextareaDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaForm.json b/apps/www/src/public/r/styles/default/TextareaForm.json
new file mode 100644
index 000000000..6162a213d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "TextareaForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "textarea",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithButton.json b/apps/www/src/public/r/styles/default/TextareaWithButton.json
new file mode 100644
index 000000000..d6f3a79e7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaWithButton.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithLabel.json b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
new file mode 100644
index 000000000..716cd2303
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithText.json b/apps/www/src/public/r/styles/default/TextareaWithText.json
new file mode 100644
index 000000000..016de0197
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TextareaWithText.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithText",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithText.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToastDemo.json b/apps/www/src/public/r/styles/default/ToastDemo.json
new file mode 100644
index 000000000..427fb8696
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToastDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToastDestructive.json b/apps/www/src/public/r/styles/default/ToastDestructive.json
new file mode 100644
index 000000000..85330fee0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToastDestructive.json
@@ -0,0 +1,18 @@
+{
+  "name": "ToastDestructive",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "toast",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastDestructive.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastDestructive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToastSimple.json b/apps/www/src/public/r/styles/default/ToastSimple.json
new file mode 100644
index 000000000..7dfe0b1c3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToastSimple.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastSimple",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastSimple.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastSimple.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToastWithAction.json b/apps/www/src/public/r/styles/default/ToastWithAction.json
new file mode 100644
index 000000000..35d55e967
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToastWithAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "ToastWithAction",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "toast",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastWithAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastWithAction.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToastWithTitle.json b/apps/www/src/public/r/styles/default/ToastWithTitle.json
new file mode 100644
index 000000000..4ab908a5f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToastWithTitle.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastWithTitle",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastWithTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastWithTitle.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleDemo.json b/apps/www/src/public/r/styles/default/ToggleDemo.json
new file mode 100644
index 000000000..e8c628d4d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
new file mode 100644
index 000000000..29dfe032f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleDisabledDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleDisabledDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleDisabledDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
new file mode 100644
index 000000000..5f3f63733
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
new file mode 100644
index 000000000..5f425b765
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupDisabledDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupDisabledDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupDisabledDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
new file mode 100644
index 000000000..c1a629eef
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupLargeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupLargeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupLargeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
new file mode 100644
index 000000000..bcc043cdb
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
new file mode 100644
index 000000000..8a5afdda0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupSingleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupSingleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupSingleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
new file mode 100644
index 000000000..3c7a1d9bf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupSmallDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupSmallDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupSmallDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
new file mode 100644
index 000000000..f257893cd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleItalicDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleItalicDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleItalicDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
new file mode 100644
index 000000000..b6207f8be
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleItalicWithTextDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleItalicWithTextDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleItalicWithTextDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
new file mode 100644
index 000000000..a151a0741
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleLargeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleLargeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleLargeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
new file mode 100644
index 000000000..095e5cbfc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleSmallDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleSmallDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleSmallDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TooltipDemo.json b/apps/www/src/public/r/styles/default/TooltipDemo.json
new file mode 100644
index 000000000..d9104bb4b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TooltipDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "TooltipDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "example/TooltipDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:example",
+      "target": "TooltipDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyBlockquote.json b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
new file mode 100644
index 000000000..c29800cd3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyBlockquote",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyBlockquote.vue",
+      "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyBlockquote.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyDemo.json b/apps/www/src/public/r/styles/default/TypographyDemo.json
new file mode 100644
index 000000000..0bc3f1afc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyDemo.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyDemo.vue",
+      "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH1.json b/apps/www/src/public/r/styles/default/TypographyH1.json
new file mode 100644
index 000000000..e2135d497
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyH1.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH1",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH1.vue",
+      "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH1.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH2.json b/apps/www/src/public/r/styles/default/TypographyH2.json
new file mode 100644
index 000000000..3c5a8a96e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyH2.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH2",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH2.vue",
+      "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH2.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH3.json b/apps/www/src/public/r/styles/default/TypographyH3.json
new file mode 100644
index 000000000..2e029d96b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyH3.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH3",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH3.vue",
+      "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH3.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH4.json b/apps/www/src/public/r/styles/default/TypographyH4.json
new file mode 100644
index 000000000..f47a94348
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyH4.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH4",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH4.vue",
+      "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH4.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyInlineCode.json b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
new file mode 100644
index 000000000..502a19eda
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyInlineCode",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyInlineCode.vue",
+      "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyInlineCode.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyLarge.json b/apps/www/src/public/r/styles/default/TypographyLarge.json
new file mode 100644
index 000000000..cf38db41b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyLarge.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyLarge",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyLarge.vue",
+      "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyLarge.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyLead.json b/apps/www/src/public/r/styles/default/TypographyLead.json
new file mode 100644
index 000000000..9855ec437
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyLead.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyLead",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyLead.vue",
+      "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyLead.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyList.json b/apps/www/src/public/r/styles/default/TypographyList.json
new file mode 100644
index 000000000..e08f0a71f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyList.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyList",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyList.vue",
+      "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyList.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyMuted.json b/apps/www/src/public/r/styles/default/TypographyMuted.json
new file mode 100644
index 000000000..358a61d4f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyMuted.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyMuted",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyMuted.vue",
+      "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyMuted.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyP.json b/apps/www/src/public/r/styles/default/TypographyP.json
new file mode 100644
index 000000000..b2157b831
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyP.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyP",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyP.vue",
+      "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyP.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographySmall.json b/apps/www/src/public/r/styles/default/TypographySmall.json
new file mode 100644
index 000000000..96f2819a3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographySmall.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographySmall",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographySmall.vue",
+      "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographySmall.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyTable.json b/apps/www/src/public/r/styles/default/TypographyTable.json
new file mode 100644
index 000000000..a206d765f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/TypographyTable.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyTable",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyTable.vue",
+      "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyTable.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
new file mode 100644
index 000000000..acc7a192b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VCalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "VCalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "v-calendar"
+  ],
+  "files": [
+    {
+      "path": "example/VCalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "VCalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
new file mode 100644
index 000000000..76146dfcf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDatePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
new file mode 100644
index 000000000..16e5658fa
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VDatePickerForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "VDatePickerForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "popover",
+    "toast",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
new file mode 100644
index 000000000..1e688cdf6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
@@ -0,0 +1,20 @@
+{
+  "name": "VDatePickerWithPresets",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "select",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerWithPresets.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerWithPresets.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
new file mode 100644
index 000000000..c9ddc2019
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDatePickerWithRange",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerWithRange.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerWithRange.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
new file mode 100644
index 000000000..ce008d18a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDateTimePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDateTimePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDateTimePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
new file mode 100644
index 000000000..0242e6b46
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
@@ -0,0 +1,19 @@
+{
+  "name": "VRangePickerWithSlot",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VRangePickerWithSlot.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "VRangePickerWithSlot.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/accordion.json b/apps/www/src/public/r/styles/default/accordion.json
new file mode 100644
index 000000000..a14f5fd59
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/accordion.json
@@ -0,0 +1,40 @@
+{
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion/Accordion.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/Accordion.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionContent.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionItem.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionTrigger.vue"
+    },
+    {
+      "path": "ui/accordion/index.ts",
+      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "accordion/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/alert-dialog.json b/apps/www/src/public/r/styles/default/alert-dialog.json
new file mode 100644
index 000000000..ff72041d8
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/alert-dialog.json
@@ -0,0 +1,71 @@
+{
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog/AlertDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialog.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogAction.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogCancel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogCancel.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogContent.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogDescription.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogFooter.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogHeader.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogTitle.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogTrigger.vue"
+    },
+    {
+      "path": "ui/alert-dialog/index.ts",
+      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/alert.json b/apps/www/src/public/r/styles/default/alert.json
new file mode 100644
index 000000000..723cae1ff
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/alert.json
@@ -0,0 +1,34 @@
+{
+  "name": "alert",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/alert/Alert.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/Alert.vue"
+    },
+    {
+      "path": "ui/alert/AlertDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/AlertDescription.vue"
+    },
+    {
+      "path": "ui/alert/AlertTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/AlertTitle.vue"
+    },
+    {
+      "path": "ui/alert/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+      "type": "registry:ui",
+      "target": "alert/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/aspect-ratio.json b/apps/www/src/public/r/styles/default/aspect-ratio.json
new file mode 100644
index 000000000..e770dca61
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/aspect-ratio.json
@@ -0,0 +1,20 @@
+{
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/aspect-ratio/AspectRatio.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+      "type": "registry:ui",
+      "target": "aspect-ratio/AspectRatio.vue"
+    },
+    {
+      "path": "ui/aspect-ratio/index.ts",
+      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+      "type": "registry:ui",
+      "target": "aspect-ratio/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/auto-form.json b/apps/www/src/public/r/styles/default/auto-form.json
new file mode 100644
index 000000000..f33df9a55
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/auto-form.json
@@ -0,0 +1,123 @@
+{
+  "name": "auto-form",
+  "type": "registry:ui",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "form",
+    "accordion",
+    "button",
+    "separator",
+    "checkbox",
+    "switch",
+    "calendar",
+    "popover",
+    "utils",
+    "label",
+    "radio-group",
+    "select",
+    "input",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "ui/auto-form/AutoForm.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoForm.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormField.vue",
+      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormField.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldArray.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldArray.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldBoolean.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldDate.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldDate.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldEnum.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldEnum.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldFile.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldFile.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldInput.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldNumber.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldNumber.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldObject.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldObject.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormLabel.vue"
+    },
+    {
+      "path": "ui/auto-form/constant.ts",
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/constant.ts"
+    },
+    {
+      "path": "ui/auto-form/dependencies.ts",
+      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/dependencies.ts"
+    },
+    {
+      "path": "ui/auto-form/index.ts",
+      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+      "type": "registry:ui",
+      "target": "auto-form/index.ts"
+    },
+    {
+      "path": "ui/auto-form/interface.ts",
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+      "type": "registry:ui",
+      "target": "auto-form/interface.ts"
+    },
+    {
+      "path": "ui/auto-form/utils.ts",
+      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/utils.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/avatar.json b/apps/www/src/public/r/styles/default/avatar.json
new file mode 100644
index 000000000..f22212d4b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/avatar.json
@@ -0,0 +1,34 @@
+{
+  "name": "avatar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar/Avatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/Avatar.vue"
+    },
+    {
+      "path": "ui/avatar/AvatarFallback.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/AvatarFallback.vue"
+    },
+    {
+      "path": "ui/avatar/AvatarImage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/AvatarImage.vue"
+    },
+    {
+      "path": "ui/avatar/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+      "type": "registry:ui",
+      "target": "avatar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/badge.json b/apps/www/src/public/r/styles/default/badge.json
new file mode 100644
index 000000000..5bb6f4769
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/badge.json
@@ -0,0 +1,22 @@
+{
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/badge/Badge.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "badge/Badge.vue"
+    },
+    {
+      "path": "ui/badge/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+      "type": "registry:ui",
+      "target": "badge/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/breadcrumb.json b/apps/www/src/public/r/styles/default/breadcrumb.json
new file mode 100644
index 000000000..1c7cfeb5c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/breadcrumb.json
@@ -0,0 +1,58 @@
+{
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb/Breadcrumb.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/Breadcrumb.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbEllipsis.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbItem.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbLink.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbLink.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbList.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbList.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbPage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbPage.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbSeparator.vue"
+    },
+    {
+      "path": "ui/breadcrumb/index.ts",
+      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/button.json b/apps/www/src/public/r/styles/default/button.json
new file mode 100644
index 000000000..5e3296fc0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/button.json
@@ -0,0 +1,22 @@
+{
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/button/Button.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "button/Button.vue"
+    },
+    {
+      "path": "ui/button/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+      "type": "registry:ui",
+      "target": "button/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/calendar.json b/apps/www/src/public/r/styles/default/calendar.json
new file mode 100644
index 000000000..298a24c01
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/calendar.json
@@ -0,0 +1,89 @@
+{
+  "name": "calendar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar/Calendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/Calendar.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarCell.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarCellTrigger.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGrid.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridBody.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridHead.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridRow.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeadCell.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeader.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeading.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarNextButton.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarPrevButton.vue"
+    },
+    {
+      "path": "ui/calendar/index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+      "type": "registry:ui",
+      "target": "calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/card.json b/apps/www/src/public/r/styles/default/card.json
new file mode 100644
index 000000000..6125c05cd
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/card.json
@@ -0,0 +1,52 @@
+{
+  "name": "card",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/card/Card.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/Card.vue"
+    },
+    {
+      "path": "ui/card/CardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardContent.vue"
+    },
+    {
+      "path": "ui/card/CardDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardDescription.vue"
+    },
+    {
+      "path": "ui/card/CardFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardFooter.vue"
+    },
+    {
+      "path": "ui/card/CardHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardHeader.vue"
+    },
+    {
+      "path": "ui/card/CardTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardTitle.vue"
+    },
+    {
+      "path": "ui/card/index.ts",
+      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+      "type": "registry:ui",
+      "target": "card/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/carousel.json b/apps/www/src/public/r/styles/default/carousel.json
new file mode 100644
index 000000000..698e406b9
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/carousel.json
@@ -0,0 +1,62 @@
+{
+  "name": "carousel",
+  "type": "registry:ui",
+  "dependencies": [
+    "embla-carousel-vue",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel/Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/Carousel.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselContent.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselItem.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselNext.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselPrevious.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselPrevious.vue"
+    },
+    {
+      "path": "ui/carousel/index.ts",
+      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+      "type": "registry:ui",
+      "target": "carousel/index.ts"
+    },
+    {
+      "path": "ui/carousel/interface.ts",
+      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+      "type": "registry:ui",
+      "target": "carousel/interface.ts"
+    },
+    {
+      "path": "ui/carousel/useCarousel.ts",
+      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+      "type": "registry:ui",
+      "target": "carousel/useCarousel.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/chart-area.json b/apps/www/src/public/r/styles/default/chart-area.json
new file mode 100644
index 000000000..684764e42
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/chart-area.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-area",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-area/AreaChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-area/AreaChart.vue"
+    },
+    {
+      "path": "ui/chart-area/index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-area/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/chart-bar.json b/apps/www/src/public/r/styles/default/chart-bar.json
new file mode 100644
index 000000000..9520ac61a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/chart-bar.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-bar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-bar/BarChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-bar/BarChart.vue"
+    },
+    {
+      "path": "ui/chart-bar/index.ts",
+      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-bar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/chart-donut.json b/apps/www/src/public/r/styles/default/chart-donut.json
new file mode 100644
index 000000000..983bee5c7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/chart-donut.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-donut",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-donut/DonutChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-donut/DonutChart.vue"
+    },
+    {
+      "path": "ui/chart-donut/index.ts",
+      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-donut/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/chart-line.json b/apps/www/src/public/r/styles/default/chart-line.json
new file mode 100644
index 000000000..05c701d39
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/chart-line.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-line",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-line/LineChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-line/LineChart.vue"
+    },
+    {
+      "path": "ui/chart-line/index.ts",
+      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-line/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/chart.json b/apps/www/src/public/r/styles/default/chart.json
new file mode 100644
index 000000000..e396d770b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/chart.json
@@ -0,0 +1,50 @@
+{
+  "name": "chart",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart/ChartCrosshair.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartCrosshair.vue"
+    },
+    {
+      "path": "ui/chart/ChartLegend.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartLegend.vue"
+    },
+    {
+      "path": "ui/chart/ChartSingleTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartSingleTooltip.vue"
+    },
+    {
+      "path": "ui/chart/ChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartTooltip.vue"
+    },
+    {
+      "path": "ui/chart/index.ts",
+      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+      "type": "registry:ui",
+      "target": "chart/index.ts"
+    },
+    {
+      "path": "ui/chart/interface.ts",
+      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart/interface.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/checkbox.json b/apps/www/src/public/r/styles/default/checkbox.json
new file mode 100644
index 000000000..09fb20ce6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/checkbox.json
@@ -0,0 +1,22 @@
+{
+  "name": "checkbox",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox/Checkbox.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "checkbox/Checkbox.vue"
+    },
+    {
+      "path": "ui/checkbox/index.ts",
+      "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+      "type": "registry:ui",
+      "target": "checkbox/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/collapsible.json b/apps/www/src/public/r/styles/default/collapsible.json
new file mode 100644
index 000000000..ebc478113
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/collapsible.json
@@ -0,0 +1,32 @@
+{
+  "name": "collapsible",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/collapsible/Collapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/Collapsible.vue"
+    },
+    {
+      "path": "ui/collapsible/CollapsibleContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/CollapsibleContent.vue"
+    },
+    {
+      "path": "ui/collapsible/CollapsibleTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/CollapsibleTrigger.vue"
+    },
+    {
+      "path": "ui/collapsible/index.ts",
+      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "collapsible/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/command.json b/apps/www/src/public/r/styles/default/command.json
new file mode 100644
index 000000000..116af75c8
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/command.json
@@ -0,0 +1,71 @@
+{
+  "name": "command",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command/Command.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/Command.vue"
+    },
+    {
+      "path": "ui/command/CommandDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandDialog.vue"
+    },
+    {
+      "path": "ui/command/CommandEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandEmpty.vue"
+    },
+    {
+      "path": "ui/command/CommandGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandGroup.vue"
+    },
+    {
+      "path": "ui/command/CommandInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandInput.vue"
+    },
+    {
+      "path": "ui/command/CommandItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandItem.vue"
+    },
+    {
+      "path": "ui/command/CommandList.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandList.vue"
+    },
+    {
+      "path": "ui/command/CommandSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandSeparator.vue"
+    },
+    {
+      "path": "ui/command/CommandShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandShortcut.vue"
+    },
+    {
+      "path": "ui/command/index.ts",
+      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+      "type": "registry:ui",
+      "target": "command/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/context-menu.json b/apps/www/src/public/r/styles/default/context-menu.json
new file mode 100644
index 000000000..6b1a25baf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/context-menu.json
@@ -0,0 +1,106 @@
+{
+  "name": "context-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu/ContextMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenu.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuCheckboxItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuContent.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuGroup.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuLabel.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuPortal.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuPortal.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuRadioGroup.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuRadioItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSeparator.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuShortcut.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSub.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSubContent.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSubTrigger.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuTrigger.vue"
+    },
+    {
+      "path": "ui/context-menu/index.ts",
+      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "context-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/dialog.json b/apps/www/src/public/r/styles/default/dialog.json
new file mode 100644
index 000000000..cf0936544
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/dialog.json
@@ -0,0 +1,70 @@
+{
+  "name": "dialog",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog/Dialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/Dialog.vue"
+    },
+    {
+      "path": "ui/dialog/DialogClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogClose.vue"
+    },
+    {
+      "path": "ui/dialog/DialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogContent.vue"
+    },
+    {
+      "path": "ui/dialog/DialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogDescription.vue"
+    },
+    {
+      "path": "ui/dialog/DialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogFooter.vue"
+    },
+    {
+      "path": "ui/dialog/DialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogHeader.vue"
+    },
+    {
+      "path": "ui/dialog/DialogScrollContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogScrollContent.vue"
+    },
+    {
+      "path": "ui/dialog/DialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogTitle.vue"
+    },
+    {
+      "path": "ui/dialog/DialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogTrigger.vue"
+    },
+    {
+      "path": "ui/dialog/index.ts",
+      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "dialog/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/drawer.json b/apps/www/src/public/r/styles/default/drawer.json
new file mode 100644
index 000000000..cefdf8418
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/drawer.json
@@ -0,0 +1,60 @@
+{
+  "name": "drawer",
+  "type": "registry:ui",
+  "dependencies": [
+    "vaul-vue"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer/Drawer.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/Drawer.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerContent.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerContent.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerDescription.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerFooter.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerFooter.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerHeader.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerOverlay.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerOverlay.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerTitle.vue"
+    },
+    {
+      "path": "ui/drawer/index.ts",
+      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+      "type": "registry:ui",
+      "target": "drawer/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/dropdown-menu.json b/apps/www/src/public/r/styles/default/dropdown-menu.json
new file mode 100644
index 000000000..7f5a215ba
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/dropdown-menu.json
@@ -0,0 +1,100 @@
+{
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu/DropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenu.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuContent.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuGroup.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuLabel.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSeparator.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuShortcut.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSub.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSubContent.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuTrigger.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/index.ts",
+      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/form.json b/apps/www/src/public/r/styles/default/form.json
new file mode 100644
index 000000000..ddec56558
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/form.json
@@ -0,0 +1,63 @@
+{
+  "name": "form",
+  "type": "registry:ui",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "utils",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form/FormControl.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormControl.vue"
+    },
+    {
+      "path": "ui/form/FormDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormDescription.vue"
+    },
+    {
+      "path": "ui/form/FormItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormItem.vue"
+    },
+    {
+      "path": "ui/form/FormLabel.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormLabel.vue"
+    },
+    {
+      "path": "ui/form/FormMessage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormMessage.vue"
+    },
+    {
+      "path": "ui/form/index.ts",
+      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
+      "type": "registry:ui",
+      "target": "form/index.ts"
+    },
+    {
+      "path": "ui/form/injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+      "type": "registry:ui",
+      "target": "form/injectionKeys.ts"
+    },
+    {
+      "path": "ui/form/useFormField.ts",
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+      "type": "registry:ui",
+      "target": "form/useFormField.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/hover-card.json b/apps/www/src/public/r/styles/default/hover-card.json
new file mode 100644
index 000000000..0f32ccf99
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/hover-card.json
@@ -0,0 +1,34 @@
+{
+  "name": "hover-card",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card/HoverCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCard.vue"
+    },
+    {
+      "path": "ui/hover-card/HoverCardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCardContent.vue"
+    },
+    {
+      "path": "ui/hover-card/HoverCardTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCardTrigger.vue"
+    },
+    {
+      "path": "ui/hover-card/index.ts",
+      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "hover-card/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/index.json b/apps/www/src/public/r/styles/default/index.json
new file mode 100644
index 000000000..272020210
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/index.json
@@ -0,0 +1,21 @@
+{
+  "name": "default",
+  "type": "registry:style",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {},
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/default/input.json b/apps/www/src/public/r/styles/default/input.json
new file mode 100644
index 000000000..509abdc2f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/input.json
@@ -0,0 +1,24 @@
+{
+  "name": "input",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/input/Input.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+      "type": "registry:ui",
+      "target": "input/Input.vue"
+    },
+    {
+      "path": "ui/input/index.ts",
+      "content": "export { default as Input } from './Input.vue'\n",
+      "type": "registry:ui",
+      "target": "input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/label.json b/apps/www/src/public/r/styles/default/label.json
new file mode 100644
index 000000000..447ee607b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/label.json
@@ -0,0 +1,22 @@
+{
+  "name": "label",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/label/Label.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "type": "registry:ui",
+      "target": "label/Label.vue"
+    },
+    {
+      "path": "ui/label/index.ts",
+      "content": "export { default as Label } from './Label.vue'\n",
+      "type": "registry:ui",
+      "target": "label/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/menubar.json b/apps/www/src/public/r/styles/default/menubar.json
new file mode 100644
index 000000000..4ceaa3b80
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/menubar.json
@@ -0,0 +1,106 @@
+{
+  "name": "menubar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar/Menubar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/Menubar.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarCheckboxItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarContent.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarGroup.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarLabel.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarMenu.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarRadioGroup.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarRadioItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSeparator.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarShortcut.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSub.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSubContent.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSubTrigger.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarTrigger.vue"
+    },
+    {
+      "path": "ui/menubar/index.ts",
+      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "menubar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/navigation-menu.json b/apps/www/src/public/r/styles/default/navigation-menu.json
new file mode 100644
index 000000000..345cca4e3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/navigation-menu.json
@@ -0,0 +1,64 @@
+{
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu/NavigationMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenu.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuContent.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuIndicator.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuItem.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuLink.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuLink.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuList.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuTrigger.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuViewport.vue"
+    },
+    {
+      "path": "ui/navigation-menu/index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/number-field.json b/apps/www/src/public/r/styles/default/number-field.json
new file mode 100644
index 000000000..582a9f18c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/number-field.json
@@ -0,0 +1,46 @@
+{
+  "name": "number-field",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/number-field/NumberField.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberField.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldContent.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldDecrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldDecrement.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldIncrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldIncrement.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldInput.vue"
+    },
+    {
+      "path": "ui/number-field/index.ts",
+      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+      "type": "registry:ui",
+      "target": "number-field/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/pagination.json b/apps/www/src/public/r/styles/default/pagination.json
new file mode 100644
index 000000000..f71d59ede
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/pagination.json
@@ -0,0 +1,47 @@
+{
+  "name": "pagination",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination/PaginationEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationEllipsis.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationFirst.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationFirst.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationLast.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationLast.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationNext.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationPrev.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationPrev.vue"
+    },
+    {
+      "path": "ui/pagination/index.ts",
+      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "pagination/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/pin-input.json b/apps/www/src/public/r/styles/default/pin-input.json
new file mode 100644
index 000000000..0b4c000d1
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/pin-input.json
@@ -0,0 +1,40 @@
+{
+  "name": "pin-input",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/pin-input/PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInput.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputGroup.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputInput.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputSeparator.vue"
+    },
+    {
+      "path": "ui/pin-input/index.ts",
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+      "type": "registry:ui",
+      "target": "pin-input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/popover.json b/apps/www/src/public/r/styles/default/popover.json
new file mode 100644
index 000000000..27529b24d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/popover.json
@@ -0,0 +1,34 @@
+{
+  "name": "popover",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/popover/Popover.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/Popover.vue"
+    },
+    {
+      "path": "ui/popover/PopoverContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/PopoverContent.vue"
+    },
+    {
+      "path": "ui/popover/PopoverTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/PopoverTrigger.vue"
+    },
+    {
+      "path": "ui/popover/index.ts",
+      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "popover/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/progress.json b/apps/www/src/public/r/styles/default/progress.json
new file mode 100644
index 000000000..8731ac316
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/progress.json
@@ -0,0 +1,22 @@
+{
+  "name": "progress",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/progress/Progress.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "progress/Progress.vue"
+    },
+    {
+      "path": "ui/progress/index.ts",
+      "content": "export { default as Progress } from './Progress.vue'\n",
+      "type": "registry:ui",
+      "target": "progress/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/radio-group.json b/apps/www/src/public/r/styles/default/radio-group.json
new file mode 100644
index 000000000..b196176c0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/radio-group.json
@@ -0,0 +1,28 @@
+{
+  "name": "radio-group",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group/RadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "radio-group/RadioGroup.vue"
+    },
+    {
+      "path": "ui/radio-group/RadioGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "radio-group/RadioGroupItem.vue"
+    },
+    {
+      "path": "ui/radio-group/index.ts",
+      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+      "type": "registry:ui",
+      "target": "radio-group/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/range-calendar.json b/apps/www/src/public/r/styles/default/range-calendar.json
new file mode 100644
index 000000000..cff986fd1
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/range-calendar.json
@@ -0,0 +1,89 @@
+{
+  "name": "range-calendar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/range-calendar/RangeCalendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendar.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarCell.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarCellTrigger.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGrid.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridBody.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridHead.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridRow.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeadCell.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeader.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeading.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarNextButton.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarPrevButton.vue"
+    },
+    {
+      "path": "ui/range-calendar/index.ts",
+      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+      "type": "registry:ui",
+      "target": "range-calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/resizable.json b/apps/www/src/public/r/styles/default/resizable.json
new file mode 100644
index 000000000..dadc0770e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/resizable.json
@@ -0,0 +1,28 @@
+{
+  "name": "resizable",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable/ResizableHandle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "resizable/ResizableHandle.vue"
+    },
+    {
+      "path": "ui/resizable/ResizablePanelGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "resizable/ResizablePanelGroup.vue"
+    },
+    {
+      "path": "ui/resizable/index.ts",
+      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "resizable/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/scroll-area.json b/apps/www/src/public/r/styles/default/scroll-area.json
new file mode 100644
index 000000000..3f38eae3f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/scroll-area.json
@@ -0,0 +1,28 @@
+{
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area/ScrollArea.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "scroll-area/ScrollArea.vue"
+    },
+    {
+      "path": "ui/scroll-area/ScrollBar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+      "type": "registry:ui",
+      "target": "scroll-area/ScrollBar.vue"
+    },
+    {
+      "path": "ui/scroll-area/index.ts",
+      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+      "type": "registry:ui",
+      "target": "scroll-area/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/select.json b/apps/www/src/public/r/styles/default/select.json
new file mode 100644
index 000000000..cfc6ae646
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/select.json
@@ -0,0 +1,82 @@
+{
+  "name": "select",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/select/Select.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/Select.vue"
+    },
+    {
+      "path": "ui/select/SelectContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectContent.vue"
+    },
+    {
+      "path": "ui/select/SelectGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectGroup.vue"
+    },
+    {
+      "path": "ui/select/SelectItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectItem.vue"
+    },
+    {
+      "path": "ui/select/SelectItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectItemText.vue"
+    },
+    {
+      "path": "ui/select/SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectLabel.vue"
+    },
+    {
+      "path": "ui/select/SelectScrollDownButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectScrollDownButton.vue"
+    },
+    {
+      "path": "ui/select/SelectScrollUpButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectScrollUpButton.vue"
+    },
+    {
+      "path": "ui/select/SelectSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectSeparator.vue"
+    },
+    {
+      "path": "ui/select/SelectTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectTrigger.vue"
+    },
+    {
+      "path": "ui/select/SelectValue.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectValue.vue"
+    },
+    {
+      "path": "ui/select/index.ts",
+      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+      "type": "registry:ui",
+      "target": "select/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/separator.json b/apps/www/src/public/r/styles/default/separator.json
new file mode 100644
index 000000000..602e568f3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/separator.json
@@ -0,0 +1,22 @@
+{
+  "name": "separator",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/separator/Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "separator/Separator.vue"
+    },
+    {
+      "path": "ui/separator/index.ts",
+      "content": "export { default as Separator } from './Separator.vue'\n",
+      "type": "registry:ui",
+      "target": "separator/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/sheet.json b/apps/www/src/public/r/styles/default/sheet.json
new file mode 100644
index 000000000..25ce1bfb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/sheet.json
@@ -0,0 +1,64 @@
+{
+  "name": "sheet",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet/Sheet.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/Sheet.vue"
+    },
+    {
+      "path": "ui/sheet/SheetClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetClose.vue"
+    },
+    {
+      "path": "ui/sheet/SheetContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetContent.vue"
+    },
+    {
+      "path": "ui/sheet/SheetDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetDescription.vue"
+    },
+    {
+      "path": "ui/sheet/SheetFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetFooter.vue"
+    },
+    {
+      "path": "ui/sheet/SheetHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetHeader.vue"
+    },
+    {
+      "path": "ui/sheet/SheetTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetTitle.vue"
+    },
+    {
+      "path": "ui/sheet/SheetTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetTrigger.vue"
+    },
+    {
+      "path": "ui/sheet/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+      "type": "registry:ui",
+      "target": "sheet/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
new file mode 100644
index 000000000..4b368e0eb
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -0,0 +1,177 @@
+{
+  "name": "sidebar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "Sheet.vue",
+    "SheetContent.vue",
+    "utils",
+    "Input.vue",
+    "Tooltip.vue",
+    "TooltipContent.vue",
+    "TooltipTrigger.vue",
+    "Skeleton.vue",
+    "Separator.vue",
+    "Button.vue"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar/Sidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/Sidebar.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarContent.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarFooter.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroup.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupAction.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupContent.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupLabel.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarHeader.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarInput.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarInset.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarInset.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenu.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuAction.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuBadge.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuButton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuButtonChild.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuItem.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSkeleton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSub.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSubButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSubButton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSubItem.vue",
+      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSubItem.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarProvider.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarRail.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarRail.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarSeparator.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarTrigger.vue"
+    },
+    {
+      "path": "ui/sidebar/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "type": "registry:ui",
+      "target": "sidebar/index.ts"
+    },
+    {
+      "path": "ui/sidebar/utils.ts",
+      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+      "type": "registry:ui",
+      "target": "sidebar/utils.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/skeleton.json b/apps/www/src/public/r/styles/default/skeleton.json
new file mode 100644
index 000000000..690cc5ade
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/skeleton.json
@@ -0,0 +1,22 @@
+{
+  "name": "skeleton",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/skeleton/Skeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "skeleton/Skeleton.vue"
+    },
+    {
+      "path": "ui/skeleton/index.ts",
+      "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+      "type": "registry:ui",
+      "target": "skeleton/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/slider.json b/apps/www/src/public/r/styles/default/slider.json
new file mode 100644
index 000000000..aa526172f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/slider.json
@@ -0,0 +1,22 @@
+{
+  "name": "slider",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/slider/Slider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "slider/Slider.vue"
+    },
+    {
+      "path": "ui/slider/index.ts",
+      "content": "export { default as Slider } from './Slider.vue'\n",
+      "type": "registry:ui",
+      "target": "slider/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/sonner.json b/apps/www/src/public/r/styles/default/sonner.json
new file mode 100644
index 000000000..c0c4d6cbf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/sonner.json
@@ -0,0 +1,22 @@
+{
+  "name": "sonner",
+  "type": "registry:ui",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/sonner/Sonner.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "sonner/Sonner.vue"
+    },
+    {
+      "path": "ui/sonner/index.ts",
+      "content": "export { default as Toaster } from './Sonner.vue'\n",
+      "type": "registry:ui",
+      "target": "sonner/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/stepper.json b/apps/www/src/public/r/styles/default/stepper.json
new file mode 100644
index 000000000..7dbbbba90
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/stepper.json
@@ -0,0 +1,58 @@
+{
+  "name": "stepper",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/stepper/Stepper.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/Stepper.vue"
+    },
+    {
+      "path": "ui/stepper/StepperDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperDescription.vue"
+    },
+    {
+      "path": "ui/stepper/StepperIndicator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperIndicator.vue"
+    },
+    {
+      "path": "ui/stepper/StepperItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperItem.vue"
+    },
+    {
+      "path": "ui/stepper/StepperSeparator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperSeparator.vue"
+    },
+    {
+      "path": "ui/stepper/StepperTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperTitle.vue"
+    },
+    {
+      "path": "ui/stepper/StepperTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperTrigger.vue"
+    },
+    {
+      "path": "ui/stepper/index.ts",
+      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "stepper/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/switch.json b/apps/www/src/public/r/styles/default/switch.json
new file mode 100644
index 000000000..8aaf54fbc
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/switch.json
@@ -0,0 +1,22 @@
+{
+  "name": "switch",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/switch/Switch.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "switch/Switch.vue"
+    },
+    {
+      "path": "ui/switch/index.ts",
+      "content": "export { default as Switch } from './Switch.vue'\n",
+      "type": "registry:ui",
+      "target": "switch/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/table.json b/apps/www/src/public/r/styles/default/table.json
new file mode 100644
index 000000000..0aff8b52e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/table.json
@@ -0,0 +1,70 @@
+{
+  "name": "table",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/table/Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/Table.vue"
+    },
+    {
+      "path": "ui/table/TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableBody.vue"
+    },
+    {
+      "path": "ui/table/TableCaption.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableCaption.vue"
+    },
+    {
+      "path": "ui/table/TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableCell.vue"
+    },
+    {
+      "path": "ui/table/TableEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableEmpty.vue"
+    },
+    {
+      "path": "ui/table/TableFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableFooter.vue"
+    },
+    {
+      "path": "ui/table/TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableHead.vue"
+    },
+    {
+      "path": "ui/table/TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableHeader.vue"
+    },
+    {
+      "path": "ui/table/TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableRow.vue"
+    },
+    {
+      "path": "ui/table/index.ts",
+      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+      "type": "registry:ui",
+      "target": "table/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/tabs.json b/apps/www/src/public/r/styles/default/tabs.json
new file mode 100644
index 000000000..9a0f80327
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/tabs.json
@@ -0,0 +1,40 @@
+{
+  "name": "tabs",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs/Tabs.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/Tabs.vue"
+    },
+    {
+      "path": "ui/tabs/TabsContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsContent.vue"
+    },
+    {
+      "path": "ui/tabs/TabsList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsList.vue"
+    },
+    {
+      "path": "ui/tabs/TabsTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsTrigger.vue"
+    },
+    {
+      "path": "ui/tabs/index.ts",
+      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "tabs/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/tags-input.json b/apps/www/src/public/r/styles/default/tags-input.json
new file mode 100644
index 000000000..085e595b2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/tags-input.json
@@ -0,0 +1,46 @@
+{
+  "name": "tags-input",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tags-input/TagsInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInput.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputInput.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItem.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItemDelete.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItemDelete.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItemText.vue"
+    },
+    {
+      "path": "ui/tags-input/index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+      "type": "registry:ui",
+      "target": "tags-input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/textarea.json b/apps/www/src/public/r/styles/default/textarea.json
new file mode 100644
index 000000000..13cf01d29
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/textarea.json
@@ -0,0 +1,24 @@
+{
+  "name": "textarea",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/textarea/Textarea.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "textarea/Textarea.vue"
+    },
+    {
+      "path": "ui/textarea/index.ts",
+      "content": "export { default as Textarea } from './Textarea.vue'\n",
+      "type": "registry:ui",
+      "target": "textarea/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/theme-daylight.json b/apps/www/src/public/r/styles/default/theme-daylight.json
new file mode 100644
index 000000000..0626993e4
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/theme-daylight.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/default/theme-emerald.json b/apps/www/src/public/r/styles/default/theme-emerald.json
new file mode 100644
index 000000000..7160d552c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/theme-emerald.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/default/theme-midnight.json b/apps/www/src/public/r/styles/default/theme-midnight.json
new file mode 100644
index 000000000..7cd62f243
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/theme-midnight.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/default/toast.json b/apps/www/src/public/r/styles/default/toast.json
new file mode 100644
index 000000000..d9a95c08e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/toast.json
@@ -0,0 +1,70 @@
+{
+  "name": "toast",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toast/Toast.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/Toast.vue"
+    },
+    {
+      "path": "ui/toast/ToastAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastAction.vue"
+    },
+    {
+      "path": "ui/toast/ToastClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastClose.vue"
+    },
+    {
+      "path": "ui/toast/ToastDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastDescription.vue"
+    },
+    {
+      "path": "ui/toast/ToastProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastProvider.vue"
+    },
+    {
+      "path": "ui/toast/ToastTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastTitle.vue"
+    },
+    {
+      "path": "ui/toast/ToastViewport.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastViewport.vue"
+    },
+    {
+      "path": "ui/toast/Toaster.vue",
+      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/Toaster.vue"
+    },
+    {
+      "path": "ui/toast/index.ts",
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+      "type": "registry:ui",
+      "target": "toast/index.ts"
+    },
+    {
+      "path": "ui/toast/use-toast.ts",
+      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+      "type": "registry:ui",
+      "target": "toast/use-toast.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/toggle-group.json b/apps/www/src/public/r/styles/default/toggle-group.json
new file mode 100644
index 000000000..34c68d07f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/toggle-group.json
@@ -0,0 +1,29 @@
+{
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group/ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle-group/ToggleGroup.vue"
+    },
+    {
+      "path": "ui/toggle-group/ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle-group/ToggleGroupItem.vue"
+    },
+    {
+      "path": "ui/toggle-group/index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+      "type": "registry:ui",
+      "target": "toggle-group/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
new file mode 100644
index 000000000..334977fa0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -0,0 +1,22 @@
+{
+  "name": "toggle",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle/Toggle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle/Toggle.vue"
+    },
+    {
+      "path": "ui/toggle/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "type": "registry:ui",
+      "target": "toggle/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/tooltip.json b/apps/www/src/public/r/styles/default/tooltip.json
new file mode 100644
index 000000000..24feaa5c0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/tooltip.json
@@ -0,0 +1,40 @@
+{
+  "name": "tooltip",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip/Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/Tooltip.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipContent.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipProvider.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipTrigger.vue"
+    },
+    {
+      "path": "ui/tooltip/index.ts",
+      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "tooltip/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/utils.json b/apps/www/src/public/r/styles/default/utils.json
new file mode 100644
index 000000000..96d3ac6e3
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/utils.json
@@ -0,0 +1,16 @@
+{
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import type { Updater } from '@tanstack/vue-table'\nimport type { Ref } from 'vue'\nimport { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {\n  ref.value\n    = typeof updaterOrValue === 'function'\n      ? updaterOrValue(ref.value)\n      : updaterOrValue\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/v-calendar.json b/apps/www/src/public/r/styles/default/v-calendar.json
new file mode 100644
index 000000000..a666b21f6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/v-calendar.json
@@ -0,0 +1,26 @@
+{
+  "name": "v-calendar",
+  "type": "registry:ui",
+  "dependencies": [
+    "v-calendar@next",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/v-calendar/Calendar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+      "type": "registry:ui",
+      "target": "v-calendar/Calendar.vue"
+    },
+    {
+      "path": "ui/v-calendar/index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+      "type": "registry:ui",
+      "target": "v-calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/index.json b/apps/www/src/public/r/styles/index.json
new file mode 100644
index 000000000..01e5b23fd
--- /dev/null
+++ b/apps/www/src/public/r/styles/index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "name": "new-york",
+    "label": "New York"
+  },
+  {
+    "name": "default",
+    "label": "Default"
+  }
+]
diff --git a/apps/www/src/public/r/styles/new-york/AccordionDemo.json b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
new file mode 100644
index 000000000..31ad2d326
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AccordionDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "example/AccordionDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
+      "type": "registry:example",
+      "target": "AccordionDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDemo.json b/apps/www/src/public/r/styles/new-york/AlertDemo.json
new file mode 100644
index 000000000..c01f5e941
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AlertDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AlertDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
new file mode 100644
index 000000000..f0946ce19
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AlertDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
new file mode 100644
index 000000000..3782e22a9
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "AlertDialogDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "alert-dialog",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/AlertDialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "AlertDialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
new file mode 100644
index 000000000..6aabaea4c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
new file mode 100644
index 000000000..60436de7a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
new file mode 100644
index 000000000..2b62dea02
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
@@ -0,0 +1,16 @@
+{
+  "name": "AreaChartSparkline",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-area"
+  ],
+  "files": [
+    {
+      "path": "example/AreaChartSparkline.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "AreaChartSparkline.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
new file mode 100644
index 000000000..49787e14f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AspectRatioDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "aspect-ratio"
+  ],
+  "files": [
+    {
+      "path": "example/AspectRatioDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
+      "type": "registry:example",
+      "target": "AspectRatioDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication01.json b/apps/www/src/public/r/styles/new-york/Authentication01.json
new file mode 100644
index 000000000..4eb8ac5ff
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Authentication01.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication02.json b/apps/www/src/public/r/styles/new-york/Authentication02.json
new file mode 100644
index 000000000..dd2c2f64c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Authentication02.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication03.json b/apps/www/src/public/r/styles/new-york/Authentication03.json
new file mode 100644
index 000000000..d14c95e5d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Authentication03.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication04.json b/apps/www/src/public/r/styles/new-york/Authentication04.json
new file mode 100644
index 000000000..a8fec2ac8
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Authentication04.json
@@ -0,0 +1,7 @@
+{
+  "name": "Authentication04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormApi.json b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
new file mode 100644
index 000000000..68b406b76
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormApi",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormApi.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormApi.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormArray.json b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
new file mode 100644
index 000000000..f881357ab
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormArray",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormArray.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormArray.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
new file mode 100644
index 000000000..03c00575d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormBasic",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormBasic.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormBasic.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
new file mode 100644
index 000000000..e683c8faa
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormConfirmPassword",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormConfirmPassword.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormConfirmPassword.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
new file mode 100644
index 000000000..0ec09df7d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
@@ -0,0 +1,22 @@
+{
+  "name": "AutoFormControlled",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormControlled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
new file mode 100644
index 000000000..9e95a474c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormDependencies",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormDependencies.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormDependencies.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
new file mode 100644
index 000000000..c799d755a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormInputWithoutLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormInputWithoutLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormInputWithoutLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
new file mode 100644
index 000000000..bd26cc540
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
@@ -0,0 +1,18 @@
+{
+  "name": "AutoFormSubObject",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "auto-form",
+    "button",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/AutoFormSubObject.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+      "type": "registry:example",
+      "target": "AutoFormSubObject.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AvatarDemo.json b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
new file mode 100644
index 000000000..b610d897b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "AvatarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "example/AvatarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
+      "type": "registry:example",
+      "target": "AvatarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
new file mode 100644
index 000000000..4b8a70c4a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
new file mode 100644
index 000000000..39ca72d8b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
new file mode 100644
index 000000000..4a039a793
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
new file mode 100644
index 000000000..0f845ba48
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BadgeSecondaryDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "example/BadgeSecondaryDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
+      "type": "registry:example",
+      "target": "BadgeSecondaryDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
new file mode 100644
index 000000000..b14cdc211
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartDemo.json b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
new file mode 100644
index 000000000..3d5540e3b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartRounded.json b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
new file mode 100644
index 000000000..a4bc0f4b6
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartRounded",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartRounded.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartRounded.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartStacked.json b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
new file mode 100644
index 000000000..7583fa333
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
@@ -0,0 +1,16 @@
+{
+  "name": "BarChartStacked",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-bar"
+  ],
+  "files": [
+    {
+      "path": "example/BarChartStacked.vue",
+      "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "BarChartStacked.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
new file mode 100644
index 000000000..bc468941c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "BreadcrumbDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
new file mode 100644
index 000000000..11e539f79
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -0,0 +1,17 @@
+{
+  "name": "BreadcrumbDropdown",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbDropdown.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbDropdown.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
new file mode 100644
index 000000000..1bda540bf
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbEllipsisDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbEllipsisDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbEllipsisDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
new file mode 100644
index 000000000..5a221cc40
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbLinkDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbLinkDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbLinkDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
new file mode 100644
index 000000000..562d0e6cc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "BreadcrumbResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "breadcrumb",
+    "button",
+    "drawer",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbResponsive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
new file mode 100644
index 000000000..299bb950a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "BreadcrumbSeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "example/BreadcrumbSeparatorDemo.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "type": "registry:example",
+      "target": "BreadcrumbSeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
new file mode 100644
index 000000000..4aee58713
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonAsChildDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonAsChildDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonAsChildDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
new file mode 100644
index 000000000..5ac965814
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
new file mode 100644
index 000000000..d8e24de44
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonDestructiveDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonDestructiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonDestructiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
new file mode 100644
index 000000000..6587d41e6
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonGhostDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonGhostDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonGhostDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
new file mode 100644
index 000000000..8983a3bd8
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonIconDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonIconDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonIconDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
new file mode 100644
index 000000000..63574014d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonLinkDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonLinkDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonLinkDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
new file mode 100644
index 000000000..45883228c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonLoadingDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonLoadingDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonLoadingDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
new file mode 100644
index 000000000..5de7cc072
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
new file mode 100644
index 000000000..e4311779f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonSecondaryDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonSecondaryDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonSecondaryDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
new file mode 100644
index 000000000..0a9a9b59e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonWithIconDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/ButtonWithIconDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ButtonWithIconDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarDemo.json b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
new file mode 100644
index 000000000..4fe3505a8
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "calendar"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarForm.json b/apps/www/src/public/r/styles/new-york/CalendarForm.json
new file mode 100644
index 000000000..d580928f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CalendarForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "CalendarForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
new file mode 100644
index 000000000..b1a96b185
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
@@ -0,0 +1,20 @@
+{
+  "name": "CalendarWithSelect",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "select",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CalendarWithSelect.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "type": "registry:example",
+      "target": "CalendarWithSelect.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardChat.json b/apps/www/src/public/r/styles/new-york/CardChat.json
new file mode 100644
index 000000000..73d94d7f8
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CardChat.json
@@ -0,0 +1,23 @@
+{
+  "name": "CardChat",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "card",
+    "command",
+    "dialog",
+    "input",
+    "tooltip",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CardChat.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardChat.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardDemo.json b/apps/www/src/public/r/styles/new-york/CardDemo.json
new file mode 100644
index 000000000..1babf6cb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CardDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "CardDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "switch",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/CardDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardFormDemo.json b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
new file mode 100644
index 000000000..b7a50e181
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "CardFormDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/CardFormDemo.vue",
+      "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardStats.json b/apps/www/src/public/r/styles/new-york/CardStats.json
new file mode 100644
index 000000000..eb2c28083
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CardStats.json
@@ -0,0 +1,21 @@
+{
+  "name": "CardStats",
+  "type": "registry:example",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "card",
+    "themes",
+    "config"
+  ],
+  "files": [
+    {
+      "path": "example/CardStats.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardStats.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardWithForm.json b/apps/www/src/public/r/styles/new-york/CardWithForm.json
new file mode 100644
index 000000000..8c5902d01
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CardWithForm.json
@@ -0,0 +1,20 @@
+{
+  "name": "CardWithForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/CardWithForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CardWithForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselApi.json b/apps/www/src/public/r/styles/new-york/CarouselApi.json
new file mode 100644
index 000000000..47aeaf653
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselApi.json
@@ -0,0 +1,19 @@
+{
+  "name": "CarouselApi",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "carousel",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselApi.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselApi.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselDemo.json b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
new file mode 100644
index 000000000..3df97eae2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
new file mode 100644
index 000000000..ed15459b6
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselOrientation",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselOrientation.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselOrientation.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
new file mode 100644
index 000000000..e25b6d85b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselPlugin",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselPlugin.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselPlugin.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSize.json b/apps/www/src/public/r/styles/new-york/CarouselSize.json
new file mode 100644
index 000000000..33f909180
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselSize.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselSize",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselSize.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselSize.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
new file mode 100644
index 000000000..164315bc4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
@@ -0,0 +1,17 @@
+{
+  "name": "CarouselSpacing",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselSpacing.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselSpacing.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
new file mode 100644
index 000000000..718e6d30a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
@@ -0,0 +1,19 @@
+{
+  "name": "CarouselThumbnails",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "card",
+    "carousel"
+  ],
+  "files": [
+    {
+      "path": "example/CarouselThumbnails.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CarouselThumbnails.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
new file mode 100644
index 000000000..78b3ed8c3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
new file mode 100644
index 000000000..f0e48a13a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
new file mode 100644
index 000000000..91162fbac
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
@@ -0,0 +1,23 @@
+{
+  "name": "CheckboxFormMultiple",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "form",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxFormMultiple.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxFormMultiple.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
new file mode 100644
index 000000000..af2864f52
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
@@ -0,0 +1,23 @@
+{
+  "name": "CheckboxFormSingle",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "form",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxFormSingle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxFormSingle.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
new file mode 100644
index 000000000..5980590e2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
@@ -0,0 +1,16 @@
+{
+  "name": "CheckboxWithText",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox"
+  ],
+  "files": [
+    {
+      "path": "example/CheckboxWithText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CheckboxWithText.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
new file mode 100644
index 000000000..a84232411
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "CollapsibleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "example/CollapsibleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+      "type": "registry:example",
+      "target": "CollapsibleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
new file mode 100644
index 000000000..ac83b1970
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "ComboboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
new file mode 100644
index 000000000..8df81a022
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
@@ -0,0 +1,18 @@
+{
+  "name": "ComboboxDropdownMenu",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxDropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxDropdownMenu.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
new file mode 100644
index 000000000..836cf7035
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "ComboboxForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
new file mode 100644
index 000000000..d564a5c94
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
@@ -0,0 +1,19 @@
+{
+  "name": "ComboboxPopover",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxPopover.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxPopover.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
new file mode 100644
index 000000000..ee99c6add
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "ComboboxResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "drawer",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "ComboboxResponsive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
new file mode 100644
index 000000000..8b02a1e7f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "CommandDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+      "type": "registry:example",
+      "target": "CommandDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
new file mode 100644
index 000000000..89c471fdc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandDialogDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "command"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "CommandDialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
new file mode 100644
index 000000000..3809d16d1
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ContextMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "context-menu"
+  ],
+  "files": [
+    {
+      "path": "example/ContextMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "ContextMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
new file mode 100644
index 000000000..e6aca4200
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "CustomChartTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "example/CustomChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:example",
+      "target": "CustomChartTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard01.json b/apps/www/src/public/r/styles/new-york/Dashboard01.json
new file mode 100644
index 000000000..382915cfc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard01.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard02.json b/apps/www/src/public/r/styles/new-york/Dashboard02.json
new file mode 100644
index 000000000..8082f6c11
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard02.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard03.json b/apps/www/src/public/r/styles/new-york/Dashboard03.json
new file mode 100644
index 000000000..049c155f7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard03.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard04.json b/apps/www/src/public/r/styles/new-york/Dashboard04.json
new file mode 100644
index 000000000..a90bccd8c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard04.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard05.json b/apps/www/src/public/r/styles/new-york/Dashboard05.json
new file mode 100644
index 000000000..792037a6a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard05.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard05",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard06.json b/apps/www/src/public/r/styles/new-york/Dashboard06.json
new file mode 100644
index 000000000..30fce9934
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard06.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard06",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard07.json b/apps/www/src/public/r/styles/new-york/Dashboard07.json
new file mode 100644
index 000000000..83cd11900
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Dashboard07.json
@@ -0,0 +1,7 @@
+{
+  "name": "Dashboard07",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
new file mode 100644
index 000000000..462316832
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableColumnPinningDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableColumnPinningDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableColumnPinningDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemo.json b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
new file mode 100644
index 000000000..29cea2c2f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
new file mode 100644
index 000000000..0cbfa7435
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
@@ -0,0 +1,17 @@
+{
+  "name": "DataTableDemoColumn",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableDemoColumn.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableDemoColumn.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
new file mode 100644
index 000000000..ba8ffb893
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "DataTableReactiveDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "table",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DataTableReactiveDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "DataTableReactiveDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
new file mode 100644
index 000000000..e27f77a85
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerForm.json b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
new file mode 100644
index 000000000..8e177df48
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "DatePickerForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "form",
+    "popover",
+    "toast",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
new file mode 100644
index 000000000..5925634c3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerWithIndependentMonths",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "range-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithIndependentMonths.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithIndependentMonths.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
new file mode 100644
index 000000000..07c87c2ad
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
@@ -0,0 +1,20 @@
+{
+  "name": "DatePickerWithPresets",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "popover",
+    "select",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithPresets.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithPresets.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
new file mode 100644
index 000000000..f5cdd69e7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -0,0 +1,19 @@
+{
+  "name": "DatePickerWithRange",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "range-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/DatePickerWithRange.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "DatePickerWithRange.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
new file mode 100644
index 000000000..68e7d104d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
@@ -0,0 +1,19 @@
+{
+  "name": "DialogCustomCloseButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DialogCustomCloseButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogCustomCloseButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogDemo.json b/apps/www/src/public/r/styles/new-york/DialogDemo.json
new file mode 100644
index 000000000..4db93383a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DialogDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "DialogDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DialogDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogForm.json b/apps/www/src/public/r/styles/new-york/DialogForm.json
new file mode 100644
index 000000000..cbf108e03
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DialogForm.json
@@ -0,0 +1,20 @@
+{
+  "name": "DialogForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/DialogForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
new file mode 100644
index 000000000..23e0f0b80
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogScrollBodyDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/DialogScrollBodyDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogScrollBodyDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
new file mode 100644
index 000000000..a20b0b532
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogScrollOverlayDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/DialogScrollOverlayDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "DialogScrollOverlayDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartColor.json b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
new file mode 100644
index 000000000..8c226f878
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartColor",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartColor.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartColor.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
new file mode 100644
index 000000000..518cf8861
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
new file mode 100644
index 000000000..1010e3b03
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartPie.json b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
new file mode 100644
index 000000000..be9647269
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
@@ -0,0 +1,16 @@
+{
+  "name": "DonutChartPie",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-donut"
+  ],
+  "files": [
+    {
+      "path": "example/DonutChartPie.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "DonutChartPie.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDemo.json b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
new file mode 100644
index 000000000..e323b7976
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "DrawerDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "button",
+    "drawer"
+  ],
+  "files": [
+    {
+      "path": "example/DrawerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "type": "registry:example",
+      "target": "DrawerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDialog.json b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
new file mode 100644
index 000000000..c7a56958f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
@@ -0,0 +1,22 @@
+{
+  "name": "DrawerDialog",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "drawer",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/DrawerDialog.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "type": "registry:example",
+      "target": "DrawerDialog.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
new file mode 100644
index 000000000..53d267f6d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuCheckboxes",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuCheckboxes.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuCheckboxes.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
new file mode 100644
index 000000000..edc176dec
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
new file mode 100644
index 000000000..9b733dbf7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
@@ -0,0 +1,17 @@
+{
+  "name": "DropdownMenuRadioGroup",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/DropdownMenuRadioGroup.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "DropdownMenuRadioGroup.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
new file mode 100644
index 000000000..c211bc8cc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "HoverCardDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "hover-card"
+  ],
+  "files": [
+    {
+      "path": "example/HoverCardDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+      "type": "registry:example",
+      "target": "HoverCardDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputDemo.json b/apps/www/src/public/r/styles/new-york/InputDemo.json
new file mode 100644
index 000000000..ff60b1263
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "InputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputDisabled.json b/apps/www/src/public/r/styles/new-york/InputDisabled.json
new file mode 100644
index 000000000..dd67814ed
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "InputDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputFile.json b/apps/www/src/public/r/styles/new-york/InputFile.json
new file mode 100644
index 000000000..72286de31
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputFile.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputFile",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/InputFile.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputFile.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputForm.json b/apps/www/src/public/r/styles/new-york/InputForm.json
new file mode 100644
index 000000000..bef564b41
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "InputForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/InputForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
new file mode 100644
index 000000000..9a9ef9851
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
@@ -0,0 +1,23 @@
+{
+  "name": "InputFormAutoAnimate",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/InputFormAutoAnimate.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputFormAutoAnimate.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithButton.json b/apps/www/src/public/r/styles/new-york/InputWithButton.json
new file mode 100644
index 000000000..f4dca276c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputWithButton.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputWithButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithIcon.json b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
new file mode 100644
index 000000000..fe1b7d8d7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
@@ -0,0 +1,16 @@
+{
+  "name": "InputWithIcon",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithIcon.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithIcon.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithLabel.json b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
new file mode 100644
index 000000000..f3f3bfdda
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
@@ -0,0 +1,17 @@
+{
+  "name": "InputWithLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/InputWithLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "InputWithLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/LabelDemo.json b/apps/www/src/public/r/styles/new-york/LabelDemo.json
new file mode 100644
index 000000000..88c805233
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/LabelDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "LabelDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "checkbox",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "example/LabelDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "LabelDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
new file mode 100644
index 000000000..e2aa013be
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartCustomTooltip",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartCustomTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartCustomTooltip.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartDemo.json b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
new file mode 100644
index 000000000..2e068e31b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
new file mode 100644
index 000000000..093823d89
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
@@ -0,0 +1,16 @@
+{
+  "name": "LineChartSparkline",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "chart-line"
+  ],
+  "files": [
+    {
+      "path": "example/LineChartSparkline.vue",
+      "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "LineChartSparkline.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/MenubarDemo.json b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
new file mode 100644
index 000000000..bb807c1ce
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "MenubarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "menubar"
+  ],
+  "files": [
+    {
+      "path": "example/MenubarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
+      "type": "registry:example",
+      "target": "MenubarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
new file mode 100644
index 000000000..a13c7a135
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "NavigationMenuDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "navigation-menu"
+  ],
+  "files": [
+    {
+      "path": "example/NavigationMenuDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
+      "type": "registry:example",
+      "target": "NavigationMenuDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
new file mode 100644
index 000000000..8fdd0567c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldCurrency",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldCurrency.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldCurrency.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
new file mode 100644
index 000000000..8e2ca8df5
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDecimal",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDecimal.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDecimal.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
new file mode 100644
index 000000000..22e662b03
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
new file mode 100644
index 000000000..1aeb9e429
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
new file mode 100644
index 000000000..904e4ee86
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "NumberFieldForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "number-field",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
new file mode 100644
index 000000000..d02abb6bd
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
@@ -0,0 +1,17 @@
+{
+  "name": "NumberFieldPercentage",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "number-field"
+  ],
+  "files": [
+    {
+      "path": "example/NumberFieldPercentage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+      "type": "registry:example",
+      "target": "NumberFieldPercentage.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PaginationDemo.json b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
new file mode 100644
index 000000000..67fc08dc0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "PaginationDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "example/PaginationDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
+      "type": "registry:example",
+      "target": "PaginationDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputControlled.json b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
new file mode 100644
index 000000000..d8c15433d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputControlled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputControlled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDemo.json b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
new file mode 100644
index 000000000..894ff5da8
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
new file mode 100644
index 000000000..0a05d304e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
new file mode 100644
index 000000000..bd74b22e4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "PinInputFormDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "pin-input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputFormDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
new file mode 100644
index 000000000..31b16c341
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "PinInputSeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "pin-input"
+  ],
+  "files": [
+    {
+      "path": "example/PinInputSeparatorDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "PinInputSeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/PopoverDemo.json b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
new file mode 100644
index 000000000..d6c196807
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "PopoverDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/PopoverDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "PopoverDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ProgressDemo.json b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
new file mode 100644
index 000000000..59ff7df72
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ProgressDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "example/ProgressDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "ProgressDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
new file mode 100644
index 000000000..f60105e2e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "RadioGroupDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "radio-group"
+  ],
+  "files": [
+    {
+      "path": "example/RadioGroupDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "RadioGroupDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
new file mode 100644
index 000000000..d39f68557
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "RadioGroupForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "radio-group",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/RadioGroupForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "RadioGroupForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
new file mode 100644
index 000000000..6bf2c775b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "RangeCalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "range-calendar"
+  ],
+  "files": [
+    {
+      "path": "example/RangeCalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "RangeCalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableDemo.json b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
new file mode 100644
index 000000000..34171cb60
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
new file mode 100644
index 000000000..fa59ac14e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableHandleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableHandleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableHandleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
new file mode 100644
index 000000000..8886582ad
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ResizableVerticalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "resizable"
+  ],
+  "files": [
+    {
+      "path": "example/ResizableVerticalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ResizableVerticalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
new file mode 100644
index 000000000..a4b181dac
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "ScrollAreaDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "scroll-area",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "example/ScrollAreaDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
+      "type": "registry:example",
+      "target": "ScrollAreaDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
new file mode 100644
index 000000000..2265eea3f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ScrollAreaHorizontalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "scroll-area"
+  ],
+  "files": [
+    {
+      "path": "example/ScrollAreaHorizontalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
+      "type": "registry:example",
+      "target": "ScrollAreaHorizontalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectDemo.json b/apps/www/src/public/r/styles/new-york/SelectDemo.json
new file mode 100644
index 000000000..91a9d89f7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SelectDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SelectDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/SelectDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectForm.json b/apps/www/src/public/r/styles/new-york/SelectForm.json
new file mode 100644
index 000000000..b80f4d141
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SelectForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SelectForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "select",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SelectForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectScrollable.json b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
new file mode 100644
index 000000000..c2b3acdc2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
@@ -0,0 +1,16 @@
+{
+  "name": "SelectScrollable",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "select"
+  ],
+  "files": [
+    {
+      "path": "example/SelectScrollable.vue",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+      "type": "registry:example",
+      "target": "SelectScrollable.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
new file mode 100644
index 000000000..03b9c0384
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SeparatorDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "example/SeparatorDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SeparatorDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SheetDemo.json b/apps/www/src/public/r/styles/new-york/SheetDemo.json
new file mode 100644
index 000000000..79b560b9a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SheetDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "SheetDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "example/SheetDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
+      "type": "registry:example",
+      "target": "SheetDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
new file mode 100644
index 000000000..0391d5c03
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "SheetSideDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "example/SheetSideDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SheetSideDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonCard.json b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
new file mode 100644
index 000000000..2e1b9d90d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
@@ -0,0 +1,16 @@
+{
+  "name": "SkeletonCard",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "example/SkeletonCard.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SkeletonCard.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
new file mode 100644
index 000000000..66eaf765f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "SkeletonDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "example/SkeletonDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SkeletonDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SliderDemo.json b/apps/www/src/public/r/styles/new-york/SliderDemo.json
new file mode 100644
index 000000000..48b9ceacd
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SliderDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "SliderDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "slider",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/SliderDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+      "type": "registry:example",
+      "target": "SliderDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SliderForm.json b/apps/www/src/public/r/styles/new-york/SliderForm.json
new file mode 100644
index 000000000..2204fedb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SliderForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SliderForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "slider",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SliderForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SliderForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SonnerDemo.json b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
new file mode 100644
index 000000000..f45eb8371
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
@@ -0,0 +1,18 @@
+{
+  "name": "SonnerDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "example/SonnerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "SonnerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
new file mode 100644
index 000000000..44ad65bb2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
@@ -0,0 +1,19 @@
+{
+  "name": "SonnerWithDialog",
+  "type": "registry:example",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "example/SonnerWithDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:example",
+      "target": "SonnerWithDialog.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperDemo.json b/apps/www/src/public/r/styles/new-york/StepperDemo.json
new file mode 100644
index 000000000..518b9f2d6
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/StepperDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "StepperDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperForm.json b/apps/www/src/public/r/styles/new-york/StepperForm.json
new file mode 100644
index 000000000..e558f6269
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/StepperForm.json
@@ -0,0 +1,21 @@
+{
+  "name": "StepperForm",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "form",
+    "input",
+    "select",
+    "stepper",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/StepperForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperHorizental.json b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
new file mode 100644
index 000000000..2efc155e9
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
@@ -0,0 +1,17 @@
+{
+  "name": "StepperHorizental",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperHorizental.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperHorizental.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperVertical.json b/apps/www/src/public/r/styles/new-york/StepperVertical.json
new file mode 100644
index 000000000..89c4c00fc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/StepperVertical.json
@@ -0,0 +1,17 @@
+{
+  "name": "StepperVertical",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "stepper"
+  ],
+  "files": [
+    {
+      "path": "example/StepperVertical.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "type": "registry:example",
+      "target": "StepperVertical.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SwitchDemo.json b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
new file mode 100644
index 000000000..3598e33b4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "SwitchDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "switch"
+  ],
+  "files": [
+    {
+      "path": "example/SwitchDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "SwitchDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SwitchForm.json b/apps/www/src/public/r/styles/new-york/SwitchForm.json
new file mode 100644
index 000000000..d0f0ced25
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/SwitchForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "SwitchForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "switch",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/SwitchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "SwitchForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TableDemo.json b/apps/www/src/public/r/styles/new-york/TableDemo.json
new file mode 100644
index 000000000..91fdb3b0e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TableDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TableDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "table"
+  ],
+  "files": [
+    {
+      "path": "example/TableDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
+      "type": "registry:example",
+      "target": "TableDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TabsDemo.json b/apps/www/src/public/r/styles/new-york/TabsDemo.json
new file mode 100644
index 000000000..ef60ab622
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TabsDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "TabsDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "example/TabsDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+      "type": "registry:example",
+      "target": "TabsDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
new file mode 100644
index 000000000..c198612c9
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
@@ -0,0 +1,20 @@
+{
+  "name": "TabsVerticalDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "example/TabsVerticalDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+      "type": "registry:example",
+      "target": "TabsVerticalDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
new file mode 100644
index 000000000..235d65a2b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "TagsInputComboboxDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "command",
+    "tags-input"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputComboboxDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputComboboxDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
new file mode 100644
index 000000000..42ee02b05
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TagsInputDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "tags-input"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
new file mode 100644
index 000000000..0938b8048
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
@@ -0,0 +1,23 @@
+{
+  "name": "TagsInputFormDemo",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "tags-input",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/TagsInputFormDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "TagsInputFormDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDemo.json b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
new file mode 100644
index 000000000..3e3738a5e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "TextareaDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
new file mode 100644
index 000000000..605680bf5
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
@@ -0,0 +1,16 @@
+{
+  "name": "TextareaDisabled",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaDisabled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaDisabled.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaForm.json b/apps/www/src/public/r/styles/new-york/TextareaForm.json
new file mode 100644
index 000000000..339f2dd11
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaForm.json
@@ -0,0 +1,23 @@
+{
+  "name": "TextareaForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "textarea",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
new file mode 100644
index 000000000..f4cd212a3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithButton",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithButton.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
new file mode 100644
index 000000000..f06f3d3ce
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithLabel",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithLabel.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithText.json b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
new file mode 100644
index 000000000..efe73930d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextareaWithText",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "label",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "example/TextareaWithText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TextareaWithText.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastDemo.json b/apps/www/src/public/r/styles/new-york/ToastDemo.json
new file mode 100644
index 000000000..547493277
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToastDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastDestructive.json b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
new file mode 100644
index 000000000..e969335ff
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
@@ -0,0 +1,18 @@
+{
+  "name": "ToastDestructive",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "toast",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastDestructive.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastDestructive.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastSimple.json b/apps/www/src/public/r/styles/new-york/ToastSimple.json
new file mode 100644
index 000000000..e014a61f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToastSimple.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastSimple",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastSimple.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastSimple.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithAction.json b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
new file mode 100644
index 000000000..f7eb31186
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "ToastWithAction",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "toast",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastWithAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastWithAction.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
new file mode 100644
index 000000000..586a74302
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
@@ -0,0 +1,17 @@
+{
+  "name": "ToastWithTitle",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "use-toast"
+  ],
+  "files": [
+    {
+      "path": "example/ToastWithTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToastWithTitle.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
new file mode 100644
index 000000000..8c4c9108f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
new file mode 100644
index 000000000..491993b5a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleDisabledDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleDisabledDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleDisabledDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
new file mode 100644
index 000000000..a2cfff692
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
new file mode 100644
index 000000000..89ec40d38
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupDisabledDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupDisabledDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupDisabledDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
new file mode 100644
index 000000000..b1ecee406
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupLargeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupLargeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupLargeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
new file mode 100644
index 000000000..5ba25fe00
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupOutlineDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupOutlineDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupOutlineDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
new file mode 100644
index 000000000..5b9c3fdfc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupSingleDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupSingleDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupSingleDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
new file mode 100644
index 000000000..bd1fe000a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleGroupSmallDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleGroupSmallDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleGroupSmallDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
new file mode 100644
index 000000000..66bbcae3f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleItalicDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleItalicDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleItalicDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
new file mode 100644
index 000000000..b7056a13e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleItalicWithTextDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleItalicWithTextDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleItalicWithTextDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
new file mode 100644
index 000000000..ba4e84938
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleLargeDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleLargeDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleLargeDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
new file mode 100644
index 000000000..2d39e38be
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToggleSmallDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "example/ToggleSmallDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "type": "registry:example",
+      "target": "ToggleSmallDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TooltipDemo.json b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
new file mode 100644
index 000000000..9a2e1dee2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
@@ -0,0 +1,17 @@
+{
+  "name": "TooltipDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "example/TooltipDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:example",
+      "target": "TooltipDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
new file mode 100644
index 000000000..c29800cd3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyBlockquote",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyBlockquote.vue",
+      "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyBlockquote.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyDemo.json b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
new file mode 100644
index 000000000..0bc3f1afc
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyDemo.vue",
+      "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH1.json b/apps/www/src/public/r/styles/new-york/TypographyH1.json
new file mode 100644
index 000000000..e2135d497
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyH1.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH1",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH1.vue",
+      "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH1.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH2.json b/apps/www/src/public/r/styles/new-york/TypographyH2.json
new file mode 100644
index 000000000..3c5a8a96e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyH2.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH2",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH2.vue",
+      "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH2.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH3.json b/apps/www/src/public/r/styles/new-york/TypographyH3.json
new file mode 100644
index 000000000..2e029d96b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyH3.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH3",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH3.vue",
+      "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH3.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH4.json b/apps/www/src/public/r/styles/new-york/TypographyH4.json
new file mode 100644
index 000000000..f47a94348
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyH4.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyH4",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyH4.vue",
+      "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyH4.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
new file mode 100644
index 000000000..502a19eda
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyInlineCode",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyInlineCode.vue",
+      "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyInlineCode.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLarge.json b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
new file mode 100644
index 000000000..cf38db41b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyLarge",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyLarge.vue",
+      "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyLarge.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLead.json b/apps/www/src/public/r/styles/new-york/TypographyLead.json
new file mode 100644
index 000000000..9855ec437
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyLead.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyLead",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyLead.vue",
+      "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyLead.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyList.json b/apps/www/src/public/r/styles/new-york/TypographyList.json
new file mode 100644
index 000000000..e08f0a71f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyList.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyList",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyList.vue",
+      "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyList.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyMuted.json b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
new file mode 100644
index 000000000..358a61d4f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyMuted",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyMuted.vue",
+      "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyMuted.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyP.json b/apps/www/src/public/r/styles/new-york/TypographyP.json
new file mode 100644
index 000000000..b2157b831
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyP.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyP",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyP.vue",
+      "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyP.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographySmall.json b/apps/www/src/public/r/styles/new-york/TypographySmall.json
new file mode 100644
index 000000000..96f2819a3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographySmall.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographySmall",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographySmall.vue",
+      "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographySmall.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyTable.json b/apps/www/src/public/r/styles/new-york/TypographyTable.json
new file mode 100644
index 000000000..a206d765f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/TypographyTable.json
@@ -0,0 +1,14 @@
+{
+  "name": "TypographyTable",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "example/TypographyTable.vue",
+      "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "TypographyTable.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
new file mode 100644
index 000000000..ed232c98f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
@@ -0,0 +1,16 @@
+{
+  "name": "VCalendarDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "v-calendar"
+  ],
+  "files": [
+    {
+      "path": "example/VCalendarDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
+      "type": "registry:example",
+      "target": "VCalendarDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
new file mode 100644
index 000000000..5843592f6
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDatePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
new file mode 100644
index 000000000..ac19e537c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "VDatePickerForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "button",
+    "form",
+    "popover",
+    "toast",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerForm.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
new file mode 100644
index 000000000..703995687
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
@@ -0,0 +1,20 @@
+{
+  "name": "VDatePickerWithPresets",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "select",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerWithPresets.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerWithPresets.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
new file mode 100644
index 000000000..e3ec30318
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDatePickerWithRange",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDatePickerWithRange.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDatePickerWithRange.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
new file mode 100644
index 000000000..354c0bae7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
@@ -0,0 +1,19 @@
+{
+  "name": "VDateTimePickerDemo",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VDateTimePickerDemo.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "type": "registry:example",
+      "target": "VDateTimePickerDemo.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
new file mode 100644
index 000000000..58d3eed48
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
@@ -0,0 +1,19 @@
+{
+  "name": "VRangePickerWithSlot",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "popover",
+    "v-calendar",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "example/VRangePickerWithSlot.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": "VRangePickerWithSlot.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/accordion.json b/apps/www/src/public/r/styles/new-york/accordion.json
new file mode 100644
index 000000000..a06c23722
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/accordion.json
@@ -0,0 +1,40 @@
+{
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/accordion/Accordion.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/Accordion.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionContent.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionItem.vue"
+    },
+    {
+      "path": "ui/accordion/AccordionTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "accordion/AccordionTrigger.vue"
+    },
+    {
+      "path": "ui/accordion/index.ts",
+      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "accordion/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/alert-dialog.json b/apps/www/src/public/r/styles/new-york/alert-dialog.json
new file mode 100644
index 000000000..376464580
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/alert-dialog.json
@@ -0,0 +1,71 @@
+{
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/alert-dialog/AlertDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialog.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogAction.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogCancel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogCancel.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogContent.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogDescription.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogFooter.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogHeader.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogTitle.vue"
+    },
+    {
+      "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/AlertDialogTrigger.vue"
+    },
+    {
+      "path": "ui/alert-dialog/index.ts",
+      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "alert-dialog/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/alert.json b/apps/www/src/public/r/styles/new-york/alert.json
new file mode 100644
index 000000000..bacf9667d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/alert.json
@@ -0,0 +1,34 @@
+{
+  "name": "alert",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/alert/Alert.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/Alert.vue"
+    },
+    {
+      "path": "ui/alert/AlertDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/AlertDescription.vue"
+    },
+    {
+      "path": "ui/alert/AlertTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+      "type": "registry:ui",
+      "target": "alert/AlertTitle.vue"
+    },
+    {
+      "path": "ui/alert/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+      "type": "registry:ui",
+      "target": "alert/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/aspect-ratio.json b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
new file mode 100644
index 000000000..e770dca61
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
@@ -0,0 +1,20 @@
+{
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/aspect-ratio/AspectRatio.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+      "type": "registry:ui",
+      "target": "aspect-ratio/AspectRatio.vue"
+    },
+    {
+      "path": "ui/aspect-ratio/index.ts",
+      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+      "type": "registry:ui",
+      "target": "aspect-ratio/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/auto-form.json b/apps/www/src/public/r/styles/new-york/auto-form.json
new file mode 100644
index 000000000..eab596305
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/auto-form.json
@@ -0,0 +1,123 @@
+{
+  "name": "auto-form",
+  "type": "registry:ui",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "form",
+    "accordion",
+    "button",
+    "separator",
+    "checkbox",
+    "switch",
+    "calendar",
+    "popover",
+    "utils",
+    "label",
+    "radio-group",
+    "select",
+    "input",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "ui/auto-form/AutoForm.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoForm.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormField.vue",
+      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormField.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldArray.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldArray.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldBoolean.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldDate.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldDate.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldEnum.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldEnum.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldFile.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldFile.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldInput.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldNumber.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldNumber.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormFieldObject.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormFieldObject.vue"
+    },
+    {
+      "path": "ui/auto-form/AutoFormLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "auto-form/AutoFormLabel.vue"
+    },
+    {
+      "path": "ui/auto-form/constant.ts",
+      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/constant.ts"
+    },
+    {
+      "path": "ui/auto-form/dependencies.ts",
+      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/dependencies.ts"
+    },
+    {
+      "path": "ui/auto-form/index.ts",
+      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+      "type": "registry:ui",
+      "target": "auto-form/index.ts"
+    },
+    {
+      "path": "ui/auto-form/interface.ts",
+      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+      "type": "registry:ui",
+      "target": "auto-form/interface.ts"
+    },
+    {
+      "path": "ui/auto-form/utils.ts",
+      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+      "type": "registry:ui",
+      "target": "auto-form/utils.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/avatar.json b/apps/www/src/public/r/styles/new-york/avatar.json
new file mode 100644
index 000000000..f22212d4b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/avatar.json
@@ -0,0 +1,34 @@
+{
+  "name": "avatar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/avatar/Avatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/Avatar.vue"
+    },
+    {
+      "path": "ui/avatar/AvatarFallback.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/AvatarFallback.vue"
+    },
+    {
+      "path": "ui/avatar/AvatarImage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "avatar/AvatarImage.vue"
+    },
+    {
+      "path": "ui/avatar/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+      "type": "registry:ui",
+      "target": "avatar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/badge.json b/apps/www/src/public/r/styles/new-york/badge.json
new file mode 100644
index 000000000..bb348f54f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/badge.json
@@ -0,0 +1,22 @@
+{
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/badge/Badge.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "badge/Badge.vue"
+    },
+    {
+      "path": "ui/badge/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+      "type": "registry:ui",
+      "target": "badge/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/breadcrumb.json b/apps/www/src/public/r/styles/new-york/breadcrumb.json
new file mode 100644
index 000000000..2f0f6d11f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/breadcrumb.json
@@ -0,0 +1,58 @@
+{
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/breadcrumb/Breadcrumb.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/Breadcrumb.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbEllipsis.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbItem.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbLink.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbLink.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbList.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbList.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbPage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbPage.vue"
+    },
+    {
+      "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/BreadcrumbSeparator.vue"
+    },
+    {
+      "path": "ui/breadcrumb/index.ts",
+      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+      "type": "registry:ui",
+      "target": "breadcrumb/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/button.json b/apps/www/src/public/r/styles/new-york/button.json
new file mode 100644
index 000000000..9ca92b989
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/button.json
@@ -0,0 +1,22 @@
+{
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/button/Button.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "button/Button.vue"
+    },
+    {
+      "path": "ui/button/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+      "type": "registry:ui",
+      "target": "button/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/calendar.json b/apps/www/src/public/r/styles/new-york/calendar.json
new file mode 100644
index 000000000..382784e0d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/calendar.json
@@ -0,0 +1,89 @@
+{
+  "name": "calendar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/calendar/Calendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/Calendar.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarCell.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarCellTrigger.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGrid.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridBody.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridHead.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarGridRow.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeadCell.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeader.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarHeading.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarNextButton.vue"
+    },
+    {
+      "path": "ui/calendar/CalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "calendar/CalendarPrevButton.vue"
+    },
+    {
+      "path": "ui/calendar/index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+      "type": "registry:ui",
+      "target": "calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/card.json b/apps/www/src/public/r/styles/new-york/card.json
new file mode 100644
index 000000000..c813e227b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/card.json
@@ -0,0 +1,52 @@
+{
+  "name": "card",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/card/Card.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/Card.vue"
+    },
+    {
+      "path": "ui/card/CardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardContent.vue"
+    },
+    {
+      "path": "ui/card/CardDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardDescription.vue"
+    },
+    {
+      "path": "ui/card/CardFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardFooter.vue"
+    },
+    {
+      "path": "ui/card/CardHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardHeader.vue"
+    },
+    {
+      "path": "ui/card/CardTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+      "type": "registry:ui",
+      "target": "card/CardTitle.vue"
+    },
+    {
+      "path": "ui/card/index.ts",
+      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+      "type": "registry:ui",
+      "target": "card/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/carousel.json b/apps/www/src/public/r/styles/new-york/carousel.json
new file mode 100644
index 000000000..658b3d34a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/carousel.json
@@ -0,0 +1,62 @@
+{
+  "name": "carousel",
+  "type": "registry:ui",
+  "dependencies": [
+    "embla-carousel-vue",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/carousel/Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/Carousel.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselContent.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselItem.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselNext.vue"
+    },
+    {
+      "path": "ui/carousel/CarouselPrevious.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "carousel/CarouselPrevious.vue"
+    },
+    {
+      "path": "ui/carousel/index.ts",
+      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+      "type": "registry:ui",
+      "target": "carousel/index.ts"
+    },
+    {
+      "path": "ui/carousel/interface.ts",
+      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+      "type": "registry:ui",
+      "target": "carousel/interface.ts"
+    },
+    {
+      "path": "ui/carousel/useCarousel.ts",
+      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+      "type": "registry:ui",
+      "target": "carousel/useCarousel.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-area.json b/apps/www/src/public/r/styles/new-york/chart-area.json
new file mode 100644
index 000000000..6c5027679
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/chart-area.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-area",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-area/AreaChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-area/AreaChart.vue"
+    },
+    {
+      "path": "ui/chart-area/index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-area/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-bar.json b/apps/www/src/public/r/styles/new-york/chart-bar.json
new file mode 100644
index 000000000..5c07e9d41
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/chart-bar.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-bar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-bar/BarChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-bar/BarChart.vue"
+    },
+    {
+      "path": "ui/chart-bar/index.ts",
+      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-bar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-donut.json b/apps/www/src/public/r/styles/new-york/chart-donut.json
new file mode 100644
index 000000000..1f4b3a8df
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/chart-donut.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-donut",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-donut/DonutChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-donut/DonutChart.vue"
+    },
+    {
+      "path": "ui/chart-donut/index.ts",
+      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-donut/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-line.json b/apps/www/src/public/r/styles/new-york/chart-line.json
new file mode 100644
index 000000000..f4cafc551
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/chart-line.json
@@ -0,0 +1,27 @@
+{
+  "name": "chart-line",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/chart-line/LineChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart-line/LineChart.vue"
+    },
+    {
+      "path": "ui/chart-line/index.ts",
+      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart-line/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart.json b/apps/www/src/public/r/styles/new-york/chart.json
new file mode 100644
index 000000000..dde675ed7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/chart.json
@@ -0,0 +1,50 @@
+{
+  "name": "chart",
+  "type": "registry:ui",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "ui/chart/ChartCrosshair.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartCrosshair.vue"
+    },
+    {
+      "path": "ui/chart/ChartLegend.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartLegend.vue"
+    },
+    {
+      "path": "ui/chart/ChartSingleTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartSingleTooltip.vue"
+    },
+    {
+      "path": "ui/chart/ChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:ui",
+      "target": "chart/ChartTooltip.vue"
+    },
+    {
+      "path": "ui/chart/index.ts",
+      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+      "type": "registry:ui",
+      "target": "chart/index.ts"
+    },
+    {
+      "path": "ui/chart/interface.ts",
+      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+      "type": "registry:ui",
+      "target": "chart/interface.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/checkbox.json b/apps/www/src/public/r/styles/new-york/checkbox.json
new file mode 100644
index 000000000..280e3f4e5
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/checkbox.json
@@ -0,0 +1,22 @@
+{
+  "name": "checkbox",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/checkbox/Checkbox.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "checkbox/Checkbox.vue"
+    },
+    {
+      "path": "ui/checkbox/index.ts",
+      "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+      "type": "registry:ui",
+      "target": "checkbox/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/collapsible.json b/apps/www/src/public/r/styles/new-york/collapsible.json
new file mode 100644
index 000000000..ebc478113
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/collapsible.json
@@ -0,0 +1,32 @@
+{
+  "name": "collapsible",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/collapsible/Collapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/Collapsible.vue"
+    },
+    {
+      "path": "ui/collapsible/CollapsibleContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/CollapsibleContent.vue"
+    },
+    {
+      "path": "ui/collapsible/CollapsibleTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "collapsible/CollapsibleTrigger.vue"
+    },
+    {
+      "path": "ui/collapsible/index.ts",
+      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "collapsible/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
new file mode 100644
index 000000000..856447bbe
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -0,0 +1,71 @@
+{
+  "name": "command",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "ui/command/Command.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/Command.vue"
+    },
+    {
+      "path": "ui/command/CommandDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandDialog.vue"
+    },
+    {
+      "path": "ui/command/CommandEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandEmpty.vue"
+    },
+    {
+      "path": "ui/command/CommandGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandGroup.vue"
+    },
+    {
+      "path": "ui/command/CommandInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandInput.vue"
+    },
+    {
+      "path": "ui/command/CommandItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandItem.vue"
+    },
+    {
+      "path": "ui/command/CommandList.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandList.vue"
+    },
+    {
+      "path": "ui/command/CommandSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandSeparator.vue"
+    },
+    {
+      "path": "ui/command/CommandShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "command/CommandShortcut.vue"
+    },
+    {
+      "path": "ui/command/index.ts",
+      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+      "type": "registry:ui",
+      "target": "command/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/context-menu.json b/apps/www/src/public/r/styles/new-york/context-menu.json
new file mode 100644
index 000000000..15b4b9bfa
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/context-menu.json
@@ -0,0 +1,106 @@
+{
+  "name": "context-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/context-menu/ContextMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenu.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuCheckboxItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuContent.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuGroup.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuLabel.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuPortal.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuPortal.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuRadioGroup.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuRadioItem.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSeparator.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuShortcut.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSub.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSubContent.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuSubTrigger.vue"
+    },
+    {
+      "path": "ui/context-menu/ContextMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "context-menu/ContextMenuTrigger.vue"
+    },
+    {
+      "path": "ui/context-menu/index.ts",
+      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "context-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/dialog.json b/apps/www/src/public/r/styles/new-york/dialog.json
new file mode 100644
index 000000000..a0a5f3096
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/dialog.json
@@ -0,0 +1,70 @@
+{
+  "name": "dialog",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/dialog/Dialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/Dialog.vue"
+    },
+    {
+      "path": "ui/dialog/DialogClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogClose.vue"
+    },
+    {
+      "path": "ui/dialog/DialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogContent.vue"
+    },
+    {
+      "path": "ui/dialog/DialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogDescription.vue"
+    },
+    {
+      "path": "ui/dialog/DialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogFooter.vue"
+    },
+    {
+      "path": "ui/dialog/DialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogHeader.vue"
+    },
+    {
+      "path": "ui/dialog/DialogScrollContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogScrollContent.vue"
+    },
+    {
+      "path": "ui/dialog/DialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogTitle.vue"
+    },
+    {
+      "path": "ui/dialog/DialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dialog/DialogTrigger.vue"
+    },
+    {
+      "path": "ui/dialog/index.ts",
+      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "dialog/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/drawer.json b/apps/www/src/public/r/styles/new-york/drawer.json
new file mode 100644
index 000000000..cefdf8418
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/drawer.json
@@ -0,0 +1,60 @@
+{
+  "name": "drawer",
+  "type": "registry:ui",
+  "dependencies": [
+    "vaul-vue"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/drawer/Drawer.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/Drawer.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerContent.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerContent.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerDescription.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerFooter.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerFooter.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerHeader.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerOverlay.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerOverlay.vue"
+    },
+    {
+      "path": "ui/drawer/DrawerTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "drawer/DrawerTitle.vue"
+    },
+    {
+      "path": "ui/drawer/index.ts",
+      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+      "type": "registry:ui",
+      "target": "drawer/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/dropdown-menu.json b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
new file mode 100644
index 000000000..349dc1296
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
@@ -0,0 +1,100 @@
+{
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/dropdown-menu/DropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenu.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuContent.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuGroup.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuLabel.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSeparator.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuShortcut.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSub.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSubContent.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/DropdownMenuTrigger.vue"
+    },
+    {
+      "path": "ui/dropdown-menu/index.ts",
+      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "dropdown-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/form.json b/apps/www/src/public/r/styles/new-york/form.json
new file mode 100644
index 000000000..c9ebe7c72
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/form.json
@@ -0,0 +1,63 @@
+{
+  "name": "form",
+  "type": "registry:ui",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "utils",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/form/FormControl.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormControl.vue"
+    },
+    {
+      "path": "ui/form/FormDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormDescription.vue"
+    },
+    {
+      "path": "ui/form/FormItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormItem.vue"
+    },
+    {
+      "path": "ui/form/FormLabel.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormLabel.vue"
+    },
+    {
+      "path": "ui/form/FormMessage.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "form/FormMessage.vue"
+    },
+    {
+      "path": "ui/form/index.ts",
+      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
+      "type": "registry:ui",
+      "target": "form/index.ts"
+    },
+    {
+      "path": "ui/form/injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+      "type": "registry:ui",
+      "target": "form/injectionKeys.ts"
+    },
+    {
+      "path": "ui/form/useFormField.ts",
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+      "type": "registry:ui",
+      "target": "form/useFormField.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/hover-card.json b/apps/www/src/public/r/styles/new-york/hover-card.json
new file mode 100644
index 000000000..0f32ccf99
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/hover-card.json
@@ -0,0 +1,34 @@
+{
+  "name": "hover-card",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/hover-card/HoverCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCard.vue"
+    },
+    {
+      "path": "ui/hover-card/HoverCardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCardContent.vue"
+    },
+    {
+      "path": "ui/hover-card/HoverCardTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "hover-card/HoverCardTrigger.vue"
+    },
+    {
+      "path": "ui/hover-card/index.ts",
+      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "hover-card/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/index.json b/apps/www/src/public/r/styles/new-york/index.json
new file mode 100644
index 000000000..ab1090b1c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/index.json
@@ -0,0 +1,21 @@
+{
+  "name": "new-york",
+  "type": "registry:style",
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require(\"tailwindcss-animate\")"
+      ]
+    }
+  },
+  "cssVars": {},
+  "files": []
+}
diff --git a/apps/www/src/public/r/styles/new-york/input.json b/apps/www/src/public/r/styles/new-york/input.json
new file mode 100644
index 000000000..b000ccffe
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/input.json
@@ -0,0 +1,24 @@
+{
+  "name": "input",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/input/Input.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+      "type": "registry:ui",
+      "target": "input/Input.vue"
+    },
+    {
+      "path": "ui/input/index.ts",
+      "content": "export { default as Input } from './Input.vue'\n",
+      "type": "registry:ui",
+      "target": "input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/label.json b/apps/www/src/public/r/styles/new-york/label.json
new file mode 100644
index 000000000..447ee607b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/label.json
@@ -0,0 +1,22 @@
+{
+  "name": "label",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/label/Label.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "type": "registry:ui",
+      "target": "label/Label.vue"
+    },
+    {
+      "path": "ui/label/index.ts",
+      "content": "export { default as Label } from './Label.vue'\n",
+      "type": "registry:ui",
+      "target": "label/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/menubar.json b/apps/www/src/public/r/styles/new-york/menubar.json
new file mode 100644
index 000000000..b3af76409
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/menubar.json
@@ -0,0 +1,106 @@
+{
+  "name": "menubar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/menubar/Menubar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/Menubar.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarCheckboxItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarContent.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarGroup.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarLabel.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarMenu.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarRadioGroup.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarRadioItem.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSeparator.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarShortcut.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSub.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSubContent.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarSubTrigger.vue"
+    },
+    {
+      "path": "ui/menubar/MenubarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "menubar/MenubarTrigger.vue"
+    },
+    {
+      "path": "ui/menubar/index.ts",
+      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "menubar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/navigation-menu.json b/apps/www/src/public/r/styles/new-york/navigation-menu.json
new file mode 100644
index 000000000..416df7c30
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/navigation-menu.json
@@ -0,0 +1,64 @@
+{
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/navigation-menu/NavigationMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenu.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuContent.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuIndicator.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuItem.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuLink.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuLink.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuList.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuTrigger.vue"
+    },
+    {
+      "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/NavigationMenuViewport.vue"
+    },
+    {
+      "path": "ui/navigation-menu/index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+      "type": "registry:ui",
+      "target": "navigation-menu/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/number-field.json b/apps/www/src/public/r/styles/new-york/number-field.json
new file mode 100644
index 000000000..072a7d327
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/number-field.json
@@ -0,0 +1,46 @@
+{
+  "name": "number-field",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/number-field/NumberField.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberField.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldContent.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldDecrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldDecrement.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldIncrement.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldIncrement.vue"
+    },
+    {
+      "path": "ui/number-field/NumberFieldInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "number-field/NumberFieldInput.vue"
+    },
+    {
+      "path": "ui/number-field/index.ts",
+      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+      "type": "registry:ui",
+      "target": "number-field/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/pagination.json b/apps/www/src/public/r/styles/new-york/pagination.json
new file mode 100644
index 000000000..6537b45f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/pagination.json
@@ -0,0 +1,47 @@
+{
+  "name": "pagination",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/pagination/PaginationEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationEllipsis.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationFirst.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationFirst.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationLast.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationLast.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationNext.vue"
+    },
+    {
+      "path": "ui/pagination/PaginationPrev.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pagination/PaginationPrev.vue"
+    },
+    {
+      "path": "ui/pagination/index.ts",
+      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "pagination/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/pin-input.json b/apps/www/src/public/r/styles/new-york/pin-input.json
new file mode 100644
index 000000000..e4cfcf6b1
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/pin-input.json
@@ -0,0 +1,40 @@
+{
+  "name": "pin-input",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/pin-input/PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInput.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputGroup.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputInput.vue"
+    },
+    {
+      "path": "ui/pin-input/PinInputSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "pin-input/PinInputSeparator.vue"
+    },
+    {
+      "path": "ui/pin-input/index.ts",
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+      "type": "registry:ui",
+      "target": "pin-input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/popover.json b/apps/www/src/public/r/styles/new-york/popover.json
new file mode 100644
index 000000000..d071e5e83
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/popover.json
@@ -0,0 +1,34 @@
+{
+  "name": "popover",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/popover/Popover.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/Popover.vue"
+    },
+    {
+      "path": "ui/popover/PopoverContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/PopoverContent.vue"
+    },
+    {
+      "path": "ui/popover/PopoverTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "popover/PopoverTrigger.vue"
+    },
+    {
+      "path": "ui/popover/index.ts",
+      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "popover/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/progress.json b/apps/www/src/public/r/styles/new-york/progress.json
new file mode 100644
index 000000000..6101ea508
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/progress.json
@@ -0,0 +1,22 @@
+{
+  "name": "progress",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/progress/Progress.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "progress/Progress.vue"
+    },
+    {
+      "path": "ui/progress/index.ts",
+      "content": "export { default as Progress } from './Progress.vue'\n",
+      "type": "registry:ui",
+      "target": "progress/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
new file mode 100644
index 000000000..78aa35d93
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -0,0 +1,28 @@
+{
+  "name": "radio-group",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/radio-group/RadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "radio-group/RadioGroup.vue"
+    },
+    {
+      "path": "ui/radio-group/RadioGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "radio-group/RadioGroupItem.vue"
+    },
+    {
+      "path": "ui/radio-group/index.ts",
+      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+      "type": "registry:ui",
+      "target": "radio-group/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/range-calendar.json b/apps/www/src/public/r/styles/new-york/range-calendar.json
new file mode 100644
index 000000000..9930a876d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/range-calendar.json
@@ -0,0 +1,89 @@
+{
+  "name": "range-calendar",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/range-calendar/RangeCalendar.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendar.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarCell.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarCellTrigger.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGrid.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGrid.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridBody.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridHead.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarGridRow.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeadCell.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeader.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeader.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarHeading.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarHeading.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarNextButton.vue"
+    },
+    {
+      "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "range-calendar/RangeCalendarPrevButton.vue"
+    },
+    {
+      "path": "ui/range-calendar/index.ts",
+      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+      "type": "registry:ui",
+      "target": "range-calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/resizable.json b/apps/www/src/public/r/styles/new-york/resizable.json
new file mode 100644
index 000000000..eca8718de
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/resizable.json
@@ -0,0 +1,28 @@
+{
+  "name": "resizable",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/resizable/ResizableHandle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "resizable/ResizableHandle.vue"
+    },
+    {
+      "path": "ui/resizable/ResizablePanelGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "resizable/ResizablePanelGroup.vue"
+    },
+    {
+      "path": "ui/resizable/index.ts",
+      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": "resizable/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/scroll-area.json b/apps/www/src/public/r/styles/new-york/scroll-area.json
new file mode 100644
index 000000000..3f38eae3f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/scroll-area.json
@@ -0,0 +1,28 @@
+{
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/scroll-area/ScrollArea.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "scroll-area/ScrollArea.vue"
+    },
+    {
+      "path": "ui/scroll-area/ScrollBar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+      "type": "registry:ui",
+      "target": "scroll-area/ScrollBar.vue"
+    },
+    {
+      "path": "ui/scroll-area/index.ts",
+      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+      "type": "registry:ui",
+      "target": "scroll-area/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/select.json b/apps/www/src/public/r/styles/new-york/select.json
new file mode 100644
index 000000000..86e9eea03
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/select.json
@@ -0,0 +1,82 @@
+{
+  "name": "select",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/select/Select.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/Select.vue"
+    },
+    {
+      "path": "ui/select/SelectContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectContent.vue"
+    },
+    {
+      "path": "ui/select/SelectGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectGroup.vue"
+    },
+    {
+      "path": "ui/select/SelectItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectItem.vue"
+    },
+    {
+      "path": "ui/select/SelectItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectItemText.vue"
+    },
+    {
+      "path": "ui/select/SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectLabel.vue"
+    },
+    {
+      "path": "ui/select/SelectScrollDownButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectScrollDownButton.vue"
+    },
+    {
+      "path": "ui/select/SelectScrollUpButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectScrollUpButton.vue"
+    },
+    {
+      "path": "ui/select/SelectSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectSeparator.vue"
+    },
+    {
+      "path": "ui/select/SelectTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectTrigger.vue"
+    },
+    {
+      "path": "ui/select/SelectValue.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+      "type": "registry:ui",
+      "target": "select/SelectValue.vue"
+    },
+    {
+      "path": "ui/select/index.ts",
+      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+      "type": "registry:ui",
+      "target": "select/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/separator.json b/apps/www/src/public/r/styles/new-york/separator.json
new file mode 100644
index 000000000..9893189c9
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/separator.json
@@ -0,0 +1,22 @@
+{
+  "name": "separator",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/separator/Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "separator/Separator.vue"
+    },
+    {
+      "path": "ui/separator/index.ts",
+      "content": "export { default as Separator } from './Separator.vue'\n",
+      "type": "registry:ui",
+      "target": "separator/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/sheet.json b/apps/www/src/public/r/styles/new-york/sheet.json
new file mode 100644
index 000000000..535e631ef
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/sheet.json
@@ -0,0 +1,64 @@
+{
+  "name": "sheet",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/sheet/Sheet.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/Sheet.vue"
+    },
+    {
+      "path": "ui/sheet/SheetClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetClose.vue"
+    },
+    {
+      "path": "ui/sheet/SheetContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetContent.vue"
+    },
+    {
+      "path": "ui/sheet/SheetDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetDescription.vue"
+    },
+    {
+      "path": "ui/sheet/SheetFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetFooter.vue"
+    },
+    {
+      "path": "ui/sheet/SheetHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetHeader.vue"
+    },
+    {
+      "path": "ui/sheet/SheetTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetTitle.vue"
+    },
+    {
+      "path": "ui/sheet/SheetTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sheet/SheetTrigger.vue"
+    },
+    {
+      "path": "ui/sheet/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+      "type": "registry:ui",
+      "target": "sheet/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
new file mode 100644
index 000000000..87e12676b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -0,0 +1,177 @@
+{
+  "name": "sidebar",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "Sheet.vue",
+    "SheetContent.vue",
+    "utils",
+    "Input.vue",
+    "Tooltip.vue",
+    "TooltipContent.vue",
+    "TooltipTrigger.vue",
+    "Skeleton.vue",
+    "Separator.vue",
+    "Button.vue"
+  ],
+  "files": [
+    {
+      "path": "ui/sidebar/Sidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/Sidebar.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarContent.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarFooter.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroup.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupAction.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupContent.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarGroupLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarGroupLabel.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarHeader.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarInput.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarInset.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarInset.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenu.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuAction.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuBadge.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuButton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuButtonChild.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuItem.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSkeleton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSub.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSubButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSubButton.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarMenuSubItem.vue",
+      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarMenuSubItem.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarProvider.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarRail.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarRail.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarSeparator.vue"
+    },
+    {
+      "path": "ui/sidebar/SidebarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "sidebar/SidebarTrigger.vue"
+    },
+    {
+      "path": "ui/sidebar/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "type": "registry:ui",
+      "target": "sidebar/index.ts"
+    },
+    {
+      "path": "ui/sidebar/utils.ts",
+      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+      "type": "registry:ui",
+      "target": "sidebar/utils.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/skeleton.json b/apps/www/src/public/r/styles/new-york/skeleton.json
new file mode 100644
index 000000000..91283dae4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/skeleton.json
@@ -0,0 +1,22 @@
+{
+  "name": "skeleton",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/skeleton/Skeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "skeleton/Skeleton.vue"
+    },
+    {
+      "path": "ui/skeleton/index.ts",
+      "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+      "type": "registry:ui",
+      "target": "skeleton/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/slider.json b/apps/www/src/public/r/styles/new-york/slider.json
new file mode 100644
index 000000000..38c2b1f8c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/slider.json
@@ -0,0 +1,22 @@
+{
+  "name": "slider",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/slider/Slider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "slider/Slider.vue"
+    },
+    {
+      "path": "ui/slider/index.ts",
+      "content": "export { default as Slider } from './Slider.vue'\n",
+      "type": "registry:ui",
+      "target": "slider/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/sonner.json b/apps/www/src/public/r/styles/new-york/sonner.json
new file mode 100644
index 000000000..c0c4d6cbf
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/sonner.json
@@ -0,0 +1,22 @@
+{
+  "name": "sonner",
+  "type": "registry:ui",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/sonner/Sonner.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "sonner/Sonner.vue"
+    },
+    {
+      "path": "ui/sonner/index.ts",
+      "content": "export { default as Toaster } from './Sonner.vue'\n",
+      "type": "registry:ui",
+      "target": "sonner/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/stepper.json b/apps/www/src/public/r/styles/new-york/stepper.json
new file mode 100644
index 000000000..da3ab0189
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/stepper.json
@@ -0,0 +1,58 @@
+{
+  "name": "stepper",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/stepper/Stepper.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/Stepper.vue"
+    },
+    {
+      "path": "ui/stepper/StepperDescription.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperDescription.vue"
+    },
+    {
+      "path": "ui/stepper/StepperIndicator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperIndicator.vue"
+    },
+    {
+      "path": "ui/stepper/StepperItem.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperItem.vue"
+    },
+    {
+      "path": "ui/stepper/StepperSeparator.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperSeparator.vue"
+    },
+    {
+      "path": "ui/stepper/StepperTitle.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperTitle.vue"
+    },
+    {
+      "path": "ui/stepper/StepperTrigger.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "stepper/StepperTrigger.vue"
+    },
+    {
+      "path": "ui/stepper/index.ts",
+      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "stepper/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/switch.json b/apps/www/src/public/r/styles/new-york/switch.json
new file mode 100644
index 000000000..afbb494f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/switch.json
@@ -0,0 +1,22 @@
+{
+  "name": "switch",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/switch/Switch.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "switch/Switch.vue"
+    },
+    {
+      "path": "ui/switch/index.ts",
+      "content": "export { default as Switch } from './Switch.vue'\n",
+      "type": "registry:ui",
+      "target": "switch/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/table.json b/apps/www/src/public/r/styles/new-york/table.json
new file mode 100644
index 000000000..997d80ea5
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/table.json
@@ -0,0 +1,70 @@
+{
+  "name": "table",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/table/Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/Table.vue"
+    },
+    {
+      "path": "ui/table/TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableBody.vue"
+    },
+    {
+      "path": "ui/table/TableCaption.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableCaption.vue"
+    },
+    {
+      "path": "ui/table/TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableCell.vue"
+    },
+    {
+      "path": "ui/table/TableEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableEmpty.vue"
+    },
+    {
+      "path": "ui/table/TableFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableFooter.vue"
+    },
+    {
+      "path": "ui/table/TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableHead.vue"
+    },
+    {
+      "path": "ui/table/TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableHeader.vue"
+    },
+    {
+      "path": "ui/table/TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+      "type": "registry:ui",
+      "target": "table/TableRow.vue"
+    },
+    {
+      "path": "ui/table/index.ts",
+      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+      "type": "registry:ui",
+      "target": "table/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/tabs.json b/apps/www/src/public/r/styles/new-york/tabs.json
new file mode 100644
index 000000000..23ca70dbe
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/tabs.json
@@ -0,0 +1,40 @@
+{
+  "name": "tabs",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tabs/Tabs.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/Tabs.vue"
+    },
+    {
+      "path": "ui/tabs/TabsContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsContent.vue"
+    },
+    {
+      "path": "ui/tabs/TabsList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsList.vue"
+    },
+    {
+      "path": "ui/tabs/TabsTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tabs/TabsTrigger.vue"
+    },
+    {
+      "path": "ui/tabs/index.ts",
+      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "tabs/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/tags-input.json b/apps/www/src/public/r/styles/new-york/tags-input.json
new file mode 100644
index 000000000..14c070244
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/tags-input.json
@@ -0,0 +1,46 @@
+{
+  "name": "tags-input",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tags-input/TagsInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInput.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputInput.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItem.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItemDelete.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItemDelete.vue"
+    },
+    {
+      "path": "ui/tags-input/TagsInputItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "tags-input/TagsInputItemText.vue"
+    },
+    {
+      "path": "ui/tags-input/index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+      "type": "registry:ui",
+      "target": "tags-input/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/textarea.json b/apps/www/src/public/r/styles/new-york/textarea.json
new file mode 100644
index 000000000..4fa99fd41
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/textarea.json
@@ -0,0 +1,24 @@
+{
+  "name": "textarea",
+  "type": "registry:ui",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/textarea/Textarea.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "textarea/Textarea.vue"
+    },
+    {
+      "path": "ui/textarea/index.ts",
+      "content": "export { default as Textarea } from './Textarea.vue'\n",
+      "type": "registry:ui",
+      "target": "textarea/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-daylight.json b/apps/www/src/public/r/styles/new-york/theme-daylight.json
new file mode 100644
index 000000000..0626993e4
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/theme-daylight.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-daylight",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    },
+    "dark": {
+      "background": "36 39% 88%",
+      "foreground": "36 45% 15%",
+      "primary": "36 45% 70%",
+      "primary-foreground": "36 45% 11%",
+      "secondary": "40 35% 77%",
+      "secondary-foreground": "36 45% 25%",
+      "accent": "36 64% 57%",
+      "accent-foreground": "36 72% 17%",
+      "destructive": "0 84% 37%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "36 33% 75%",
+      "muted-foreground": "36 45% 25%",
+      "card": "36 46% 82%",
+      "card-foreground": "36 45% 20%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "border": "36 45% 60%",
+      "input": "36 45% 60%",
+      "ring": "36 45% 30%",
+      "chart-1": "25 34% 28%",
+      "chart-2": "26 36% 34%",
+      "chart-3": "28 40% 40%",
+      "chart-4": "31 41% 48%",
+      "chart-5": "35 43% 53%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-emerald.json b/apps/www/src/public/r/styles/new-york/theme-emerald.json
new file mode 100644
index 000000000..7160d552c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/theme-emerald.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-emerald",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 45%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "142 86% 28%",
+      "chart-1": "139 65% 20%",
+      "chart-2": "140 74% 44%",
+      "chart-3": "142 88% 28%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "142 86% 28%",
+      "primary-foreground": "356 29% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 72% 51%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "142 86% 28%",
+      "chart-1": "142 88% 28%",
+      "chart-2": "139 65% 20%",
+      "chart-3": "140 74% 24%",
+      "chart-4": "137 55% 15%",
+      "chart-5": "141 40% 9%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-midnight.json b/apps/www/src/public/r/styles/new-york/theme-midnight.json
new file mode 100644
index 000000000..7cd62f243
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/theme-midnight.json
@@ -0,0 +1,58 @@
+{
+  "name": "theme-midnight",
+  "type": "registry:theme",
+  "cssVars": {
+    "light": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    },
+    "dark": {
+      "background": "240 5% 6%",
+      "foreground": "60 5% 90%",
+      "primary": "240 0% 90%",
+      "primary-foreground": "60 0% 0%",
+      "secondary": "240 4% 15%",
+      "secondary-foreground": "60 5% 85%",
+      "accent": "240 0% 13%",
+      "accent-foreground": "60 0% 100%",
+      "destructive": "0 60% 50%",
+      "destructive-foreground": "0 0% 98%",
+      "muted": "240 5% 25%",
+      "muted-foreground": "60 5% 85%",
+      "card": "240 4% 10%",
+      "card-foreground": "60 5% 90%",
+      "popover": "240 5% 15%",
+      "popover-foreground": "60 5% 85%",
+      "border": "240 6% 20%",
+      "input": "240 6% 20%",
+      "ring": "240 5% 90%",
+      "chart-1": "359 2% 90%",
+      "chart-2": "240 1% 74%",
+      "chart-3": "240 1% 58%",
+      "chart-4": "240 1% 42%",
+      "chart-5": "240 2% 26%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/styles/new-york/toast.json b/apps/www/src/public/r/styles/new-york/toast.json
new file mode 100644
index 000000000..112e10e9f
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/toast.json
@@ -0,0 +1,70 @@
+{
+  "name": "toast",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toast/Toast.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/Toast.vue"
+    },
+    {
+      "path": "ui/toast/ToastAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastAction.vue"
+    },
+    {
+      "path": "ui/toast/ToastClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastClose.vue"
+    },
+    {
+      "path": "ui/toast/ToastDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastDescription.vue"
+    },
+    {
+      "path": "ui/toast/ToastProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastProvider.vue"
+    },
+    {
+      "path": "ui/toast/ToastTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastTitle.vue"
+    },
+    {
+      "path": "ui/toast/ToastViewport.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/ToastViewport.vue"
+    },
+    {
+      "path": "ui/toast/Toaster.vue",
+      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toast/Toaster.vue"
+    },
+    {
+      "path": "ui/toast/index.ts",
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+      "type": "registry:ui",
+      "target": "toast/index.ts"
+    },
+    {
+      "path": "ui/toast/use-toast.ts",
+      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+      "type": "registry:ui",
+      "target": "toast/use-toast.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/toggle-group.json b/apps/www/src/public/r/styles/new-york/toggle-group.json
new file mode 100644
index 000000000..837d76644
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/toggle-group.json
@@ -0,0 +1,29 @@
+{
+  "name": "toggle-group",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "toggle",
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group/ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle-group/ToggleGroup.vue"
+    },
+    {
+      "path": "ui/toggle-group/ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle-group/ToggleGroupItem.vue"
+    },
+    {
+      "path": "ui/toggle-group/index.ts",
+      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+      "type": "registry:ui",
+      "target": "toggle-group/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
new file mode 100644
index 000000000..cfdba55dd
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -0,0 +1,22 @@
+{
+  "name": "toggle",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle/Toggle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+      "type": "registry:ui",
+      "target": "toggle/Toggle.vue"
+    },
+    {
+      "path": "ui/toggle/index.ts",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "type": "registry:ui",
+      "target": "toggle/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/tooltip.json b/apps/www/src/public/r/styles/new-york/tooltip.json
new file mode 100644
index 000000000..0dea70d20
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/tooltip.json
@@ -0,0 +1,40 @@
+{
+  "name": "tooltip",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip/Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/Tooltip.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipContent.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipProvider.vue"
+    },
+    {
+      "path": "ui/tooltip/TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "tooltip/TooltipTrigger.vue"
+    },
+    {
+      "path": "ui/tooltip/index.ts",
+      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+      "type": "registry:ui",
+      "target": "tooltip/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/utils.json b/apps/www/src/public/r/styles/new-york/utils.json
new file mode 100644
index 000000000..96d3ac6e3
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/utils.json
@@ -0,0 +1,16 @@
+{
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import type { Updater } from '@tanstack/vue-table'\nimport type { Ref } from 'vue'\nimport { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {\n  ref.value\n    = typeof updaterOrValue === 'function'\n      ? updaterOrValue(ref.value)\n      : updaterOrValue\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/v-calendar.json b/apps/www/src/public/r/styles/new-york/v-calendar.json
new file mode 100644
index 000000000..2ce12a0a7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/v-calendar.json
@@ -0,0 +1,20 @@
+{
+  "name": "v-calendar",
+  "type": "registry:ui",
+  "dependencies": ["v-calendar@next", "@vueuse/core"],
+  "registryDependencies": ["button", "utils"],
+  "files": [
+    {
+      "path": "ui/v-calendar/Calendar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+      "type": "registry:ui",
+      "target": "v-calendar/Calendar.vue"
+    },
+    {
+      "path": "ui/v-calendar/index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+      "type": "registry:ui",
+      "target": "v-calendar/index.ts"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
new file mode 100644
index 000000000..66772c093
--- /dev/null
+++ b/apps/www/src/public/r/temp.json
@@ -0,0 +1,13487 @@
+[
+  {
+    "name": "utils",
+    "type": "registry:lib",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "files": [
+      {
+        "path": "lib/utils.ts",
+        "type": "registry:lib"
+      }
+    ]
+  },
+  {
+    "name": "theme-daylight",
+    "type": "registry:theme",
+    "cssVars": {
+      "light": {
+        "background": "36 39% 88%",
+        "foreground": "36 45% 15%",
+        "primary": "36 45% 70%",
+        "primary-foreground": "36 45% 11%",
+        "secondary": "40 35% 77%",
+        "secondary-foreground": "36 45% 25%",
+        "accent": "36 64% 57%",
+        "accent-foreground": "36 72% 17%",
+        "destructive": "0 84% 37%",
+        "destructive-foreground": "0 0% 98%",
+        "muted": "36 33% 75%",
+        "muted-foreground": "36 45% 25%",
+        "card": "36 46% 82%",
+        "card-foreground": "36 45% 20%",
+        "popover": "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        "border": "36 45% 60%",
+        "input": "36 45% 60%",
+        "ring": "36 45% 30%",
+        "chart-1": "25 34% 28%",
+        "chart-2": "26 36% 34%",
+        "chart-3": "28 40% 40%",
+        "chart-4": "31 41% 48%",
+        "chart-5": "35 43% 53%"
+      },
+      "dark": {
+        "background": "36 39% 88%",
+        "foreground": "36 45% 15%",
+        "primary": "36 45% 70%",
+        "primary-foreground": "36 45% 11%",
+        "secondary": "40 35% 77%",
+        "secondary-foreground": "36 45% 25%",
+        "accent": "36 64% 57%",
+        "accent-foreground": "36 72% 17%",
+        "destructive": "0 84% 37%",
+        "destructive-foreground": "0 0% 98%",
+        "muted": "36 33% 75%",
+        "muted-foreground": "36 45% 25%",
+        "card": "36 46% 82%",
+        "card-foreground": "36 45% 20%",
+        "popover": "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        "border": "36 45% 60%",
+        "input": "36 45% 60%",
+        "ring": "36 45% 30%",
+        "chart-1": "25 34% 28%",
+        "chart-2": "26 36% 34%",
+        "chart-3": "28 40% 40%",
+        "chart-4": "31 41% 48%",
+        "chart-5": "35 43% 53%"
+      }
+    }
+  },
+  {
+    "name": "theme-midnight",
+    "type": "registry:theme",
+    "cssVars": {
+      "light": {
+        "background": "240 5% 6%",
+        "foreground": "60 5% 90%",
+        "primary": "240 0% 90%",
+        "primary-foreground": "60 0% 0%",
+        "secondary": "240 4% 15%",
+        "secondary-foreground": "60 5% 85%",
+        "accent": "240 0% 13%",
+        "accent-foreground": "60 0% 100%",
+        "destructive": "0 60% 50%",
+        "destructive-foreground": "0 0% 98%",
+        "muted": "240 5% 25%",
+        "muted-foreground": "60 5% 85%",
+        "card": "240 4% 10%",
+        "card-foreground": "60 5% 90%",
+        "popover": "240 5% 15%",
+        "popover-foreground": "60 5% 85%",
+        "border": "240 6% 20%",
+        "input": "240 6% 20%",
+        "ring": "240 5% 90%",
+        "chart-1": "359 2% 90%",
+        "chart-2": "240 1% 74%",
+        "chart-3": "240 1% 58%",
+        "chart-4": "240 1% 42%",
+        "chart-5": "240 2% 26%"
+      },
+      "dark": {
+        "background": "240 5% 6%",
+        "foreground": "60 5% 90%",
+        "primary": "240 0% 90%",
+        "primary-foreground": "60 0% 0%",
+        "secondary": "240 4% 15%",
+        "secondary-foreground": "60 5% 85%",
+        "accent": "240 0% 13%",
+        "accent-foreground": "60 0% 100%",
+        "destructive": "0 60% 50%",
+        "destructive-foreground": "0 0% 98%",
+        "muted": "240 5% 25%",
+        "muted-foreground": "60 5% 85%",
+        "card": "240 4% 10%",
+        "card-foreground": "60 5% 90%",
+        "popover": "240 5% 15%",
+        "popover-foreground": "60 5% 85%",
+        "border": "240 6% 20%",
+        "input": "240 6% 20%",
+        "ring": "240 5% 90%",
+        "chart-1": "359 2% 90%",
+        "chart-2": "240 1% 74%",
+        "chart-3": "240 1% 58%",
+        "chart-4": "240 1% 42%",
+        "chart-5": "240 2% 26%"
+      }
+    }
+  },
+  {
+    "name": "theme-emerald",
+    "type": "registry:theme",
+    "cssVars": {
+      "light": {
+        "background": "0 0% 100%",
+        "foreground": "240 10% 3.9%",
+        "card": "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        "popover": "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        "primary": "142 86% 28%",
+        "primary-foreground": "356 29% 98%",
+        "secondary": "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        "muted": "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 45%",
+        "accent": "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        "destructive": "0 72% 51%",
+        "destructive-foreground": "0 0% 98%",
+        "border": "240 5.9% 90%",
+        "input": "240 5.9% 90%",
+        "ring": "142 86% 28%",
+        "chart-1": "139 65% 20%",
+        "chart-2": "140 74% 44%",
+        "chart-3": "142 88% 28%",
+        "chart-4": "137 55% 15%",
+        "chart-5": "141 40% 9%"
+      },
+      "dark": {
+        "background": "240 10% 3.9%",
+        "foreground": "0 0% 98%",
+        "card": "240 10% 3.9%",
+        "card-foreground": "0 0% 98%",
+        "popover": "240 10% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        "primary": "142 86% 28%",
+        "primary-foreground": "356 29% 98%",
+        "secondary": "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        "muted": "240 3.7% 15.9%",
+        "muted-foreground": "240 5% 64.9%",
+        "accent": "240 3.7% 15.9%",
+        "accent-foreground": "0 0% 98%",
+        "destructive": "0 72% 51%",
+        "destructive-foreground": "0 0% 98%",
+        "border": "240 3.7% 15.9%",
+        "input": "240 3.7% 15.9%",
+        "ring": "142 86% 28%",
+        "chart-1": "142 88% 28%",
+        "chart-2": "139 65% 20%",
+        "chart-3": "140 74% 24%",
+        "chart-4": "137 55% 15%",
+        "chart-5": "141 40% 9%"
+      }
+    }
+  },
+  {
+    "name": "accordion",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/accordion/Accordion.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/Accordion.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionContent.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionItem.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionTrigger.vue"
+      },
+      {
+        "path": "ui/accordion/index.ts",
+        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "accordion/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert/Alert.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/Alert.vue"
+      },
+      {
+        "path": "ui/alert/AlertDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertDescription.vue"
+      },
+      {
+        "path": "ui/alert/AlertTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertTitle.vue"
+      },
+      {
+        "path": "ui/alert/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+        "type": "registry:ui",
+        "target": "alert/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert-dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert-dialog/AlertDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialog.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogAction.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogCancel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogCancel.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogContent.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogDescription.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogFooter.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogHeader.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTitle.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTrigger.vue"
+      },
+      {
+        "path": "ui/alert-dialog/index.ts",
+        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "aspect-ratio",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/aspect-ratio/AspectRatio.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/AspectRatio.vue"
+      },
+      {
+        "path": "ui/aspect-ratio/index.ts",
+        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "auto-form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "form",
+      "accordion",
+      "button",
+      "separator",
+      "checkbox",
+      "switch",
+      "calendar",
+      "popover",
+      "utils",
+      "label",
+      "radio-group",
+      "select",
+      "input",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "ui/auto-form/AutoForm.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoForm.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormField.vue",
+        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormField.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldArray.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldArray.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldBoolean.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldDate.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldDate.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldEnum.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldEnum.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldFile.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldInput.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldNumber.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldNumber.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldObject.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldObject.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormLabel.vue"
+      },
+      {
+        "path": "ui/auto-form/constant.ts",
+        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/constant.ts"
+      },
+      {
+        "path": "ui/auto-form/dependencies.ts",
+        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/dependencies.ts"
+      },
+      {
+        "path": "ui/auto-form/index.ts",
+        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+        "type": "registry:ui",
+        "target": "auto-form/index.ts"
+      },
+      {
+        "path": "ui/auto-form/interface.ts",
+        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+        "type": "registry:ui",
+        "target": "auto-form/interface.ts"
+      },
+      {
+        "path": "ui/auto-form/utils.ts",
+        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "avatar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/avatar/Avatar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/Avatar.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarFallback.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarFallback.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarImage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarImage.vue"
+      },
+      {
+        "path": "ui/avatar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+        "type": "registry:ui",
+        "target": "avatar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "badge",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/badge/Badge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "badge/Badge.vue"
+      },
+      {
+        "path": "ui/badge/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+        "type": "registry:ui",
+        "target": "badge/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "breadcrumb",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/breadcrumb/Breadcrumb.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/Breadcrumb.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbItem.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbLink.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbLink.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbList.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbList.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbPage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbPage.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbSeparator.vue"
+      },
+      {
+        "path": "ui/breadcrumb/index.ts",
+        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/button/Button.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "button/Button.vue"
+      },
+      {
+        "path": "ui/button/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+        "type": "registry:ui",
+        "target": "button/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/calendar/Calendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGrid.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridBody.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridHead.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridRow.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeader.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeading.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarNextButton.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/card/Card.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/Card.vue"
+      },
+      {
+        "path": "ui/card/CardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardContent.vue"
+      },
+      {
+        "path": "ui/card/CardDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardDescription.vue"
+      },
+      {
+        "path": "ui/card/CardFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardFooter.vue"
+      },
+      {
+        "path": "ui/card/CardHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardHeader.vue"
+      },
+      {
+        "path": "ui/card/CardTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardTitle.vue"
+      },
+      {
+        "path": "ui/card/index.ts",
+        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+        "type": "registry:ui",
+        "target": "card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "carousel",
+    "type": "registry:ui",
+    "dependencies": [
+      "embla-carousel-vue",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/carousel/Carousel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/Carousel.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselContent.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselItem.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselNext.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselPrevious.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselPrevious.vue"
+      },
+      {
+        "path": "ui/carousel/index.ts",
+        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+        "type": "registry:ui",
+        "target": "carousel/index.ts"
+      },
+      {
+        "path": "ui/carousel/interface.ts",
+        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+        "type": "registry:ui",
+        "target": "carousel/interface.ts"
+      },
+      {
+        "path": "ui/carousel/useCarousel.ts",
+        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+        "type": "registry:ui",
+        "target": "carousel/useCarousel.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "ui/chart/ChartCrosshair.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartCrosshair.vue"
+      },
+      {
+        "path": "ui/chart/ChartLegend.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartLegend.vue"
+      },
+      {
+        "path": "ui/chart/ChartSingleTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartSingleTooltip.vue"
+      },
+      {
+        "path": "ui/chart/ChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartTooltip.vue"
+      },
+      {
+        "path": "ui/chart/index.ts",
+        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+        "type": "registry:ui",
+        "target": "chart/index.ts"
+      },
+      {
+        "path": "ui/chart/interface.ts",
+        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart/interface.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-area",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-area/AreaChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-area/AreaChart.vue"
+      },
+      {
+        "path": "ui/chart-area/index.ts",
+        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-bar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-bar/BarChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-bar/BarChart.vue"
+      },
+      {
+        "path": "ui/chart-bar/index.ts",
+        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-bar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-donut",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-donut/DonutChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-donut/DonutChart.vue"
+      },
+      {
+        "path": "ui/chart-donut/index.ts",
+        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-donut/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-line",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-line/LineChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-line/LineChart.vue"
+      },
+      {
+        "path": "ui/chart-line/index.ts",
+        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-line/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "checkbox",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/checkbox/Checkbox.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "checkbox/Checkbox.vue"
+      },
+      {
+        "path": "ui/checkbox/index.ts",
+        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+        "type": "registry:ui",
+        "target": "checkbox/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "collapsible",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/collapsible/Collapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/Collapsible.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleContent.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleTrigger.vue"
+      },
+      {
+        "path": "ui/collapsible/index.ts",
+        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "collapsible/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "command",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/command/Command.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/Command.vue"
+      },
+      {
+        "path": "ui/command/CommandDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandDialog.vue"
+      },
+      {
+        "path": "ui/command/CommandEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandEmpty.vue"
+      },
+      {
+        "path": "ui/command/CommandGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandGroup.vue"
+      },
+      {
+        "path": "ui/command/CommandInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandInput.vue"
+      },
+      {
+        "path": "ui/command/CommandItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandItem.vue"
+      },
+      {
+        "path": "ui/command/CommandList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandList.vue"
+      },
+      {
+        "path": "ui/command/CommandSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandSeparator.vue"
+      },
+      {
+        "path": "ui/command/CommandShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandShortcut.vue"
+      },
+      {
+        "path": "ui/command/index.ts",
+        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "type": "registry:ui",
+        "target": "command/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "context-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/context-menu/ContextMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenu.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuLabel.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuPortal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuPortal.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSeparator.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuShortcut.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSub.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/index.ts",
+        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "context-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dialog/Dialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/Dialog.vue"
+      },
+      {
+        "path": "ui/dialog/DialogClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogClose.vue"
+      },
+      {
+        "path": "ui/dialog/DialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogDescription.vue"
+      },
+      {
+        "path": "ui/dialog/DialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogFooter.vue"
+      },
+      {
+        "path": "ui/dialog/DialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogHeader.vue"
+      },
+      {
+        "path": "ui/dialog/DialogScrollContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogScrollContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTitle.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTrigger.vue"
+      },
+      {
+        "path": "ui/dialog/index.ts",
+        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "drawer",
+    "type": "registry:ui",
+    "dependencies": [
+      "vaul-vue"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/drawer/Drawer.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/Drawer.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerContent.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerContent.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerDescription.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerFooter.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerFooter.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerHeader.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerOverlay.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerOverlay.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerTitle.vue"
+      },
+      {
+        "path": "ui/drawer/index.ts",
+        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+        "type": "registry:ui",
+        "target": "drawer/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dropdown-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dropdown-menu/DropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenu.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuLabel.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSub.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/index.ts",
+        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "ui/form/FormControl.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormControl.vue"
+      },
+      {
+        "path": "ui/form/FormDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormDescription.vue"
+      },
+      {
+        "path": "ui/form/FormItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormItem.vue"
+      },
+      {
+        "path": "ui/form/FormLabel.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormLabel.vue"
+      },
+      {
+        "path": "ui/form/FormMessage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormMessage.vue"
+      },
+      {
+        "path": "ui/form/index.ts",
+        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
+        "type": "registry:ui",
+        "target": "form/index.ts"
+      },
+      {
+        "path": "ui/form/injectionKeys.ts",
+        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+        "type": "registry:ui",
+        "target": "form/injectionKeys.ts"
+      },
+      {
+        "path": "ui/form/useFormField.ts",
+        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "form/useFormField.ts"
+      }
+    ]
+  },
+  {
+    "name": "hover-card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/hover-card/HoverCard.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCard.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardContent.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardTrigger.vue"
+      },
+      {
+        "path": "ui/hover-card/index.ts",
+        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "hover-card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "input",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/input/Input.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+        "type": "registry:ui",
+        "target": "input/Input.vue"
+      },
+      {
+        "path": "ui/input/index.ts",
+        "content": "export { default as Input } from './Input.vue'\n",
+        "type": "registry:ui",
+        "target": "input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "label",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/label/Label.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "label/Label.vue"
+      },
+      {
+        "path": "ui/label/index.ts",
+        "content": "export { default as Label } from './Label.vue'\n",
+        "type": "registry:ui",
+        "target": "label/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "menubar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/menubar/Menubar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/Menubar.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarCheckboxItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarLabel.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarMenu.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSeparator.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarShortcut.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSub.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/index.ts",
+        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "menubar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/navigation-menu/NavigationMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenu.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuContent.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuIndicator.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuItem.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuLink.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuLink.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuList.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuTrigger.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuViewport.vue"
+      },
+      {
+        "path": "ui/navigation-menu/index.ts",
+        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "number-field",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/number-field/NumberField.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberField.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldContent.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldDecrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldDecrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldIncrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldIncrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldInput.vue"
+      },
+      {
+        "path": "ui/number-field/index.ts",
+        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+        "type": "registry:ui",
+        "target": "number-field/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pagination",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/pagination/PaginationEllipsis.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationEllipsis.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationFirst.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationFirst.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationLast.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationLast.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationNext.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationPrev.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationPrev.vue"
+      },
+      {
+        "path": "ui/pagination/index.ts",
+        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "pagination/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pin-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/pin-input/PinInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputGroup.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputSeparator.vue"
+      },
+      {
+        "path": "ui/pin-input/index.ts",
+        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "pin-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/popover/Popover.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/Popover.vue"
+      },
+      {
+        "path": "ui/popover/PopoverContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverContent.vue"
+      },
+      {
+        "path": "ui/popover/PopoverTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverTrigger.vue"
+      },
+      {
+        "path": "ui/popover/index.ts",
+        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "popover/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "progress",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/progress/Progress.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "progress/Progress.vue"
+      },
+      {
+        "path": "ui/progress/index.ts",
+        "content": "export { default as Progress } from './Progress.vue'\n",
+        "type": "registry:ui",
+        "target": "progress/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "radio-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/radio-group/RadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroup.vue"
+      },
+      {
+        "path": "ui/radio-group/RadioGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroupItem.vue"
+      },
+      {
+        "path": "ui/radio-group/index.ts",
+        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "radio-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "range-calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/range-calendar/RangeCalendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendar.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGrid.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridBody.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridHead.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridRow.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeader.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeading.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarNextButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/index.ts",
+        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "range-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "resizable",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/resizable/ResizableHandle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizableHandle.vue"
+      },
+      {
+        "path": "ui/resizable/ResizablePanelGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizablePanelGroup.vue"
+      },
+      {
+        "path": "ui/resizable/index.ts",
+        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "resizable/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "scroll-area",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/scroll-area/ScrollArea.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollArea.vue"
+      },
+      {
+        "path": "ui/scroll-area/ScrollBar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollBar.vue"
+      },
+      {
+        "path": "ui/scroll-area/index.ts",
+        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+        "type": "registry:ui",
+        "target": "scroll-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "select",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/select/Select.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/Select.vue"
+      },
+      {
+        "path": "ui/select/SelectContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectContent.vue"
+      },
+      {
+        "path": "ui/select/SelectGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectGroup.vue"
+      },
+      {
+        "path": "ui/select/SelectItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItem.vue"
+      },
+      {
+        "path": "ui/select/SelectItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItemText.vue"
+      },
+      {
+        "path": "ui/select/SelectLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectLabel.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollDownButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollDownButton.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollUpButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollUpButton.vue"
+      },
+      {
+        "path": "ui/select/SelectSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectSeparator.vue"
+      },
+      {
+        "path": "ui/select/SelectTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectTrigger.vue"
+      },
+      {
+        "path": "ui/select/SelectValue.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectValue.vue"
+      },
+      {
+        "path": "ui/select/index.ts",
+        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+        "type": "registry:ui",
+        "target": "select/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "separator",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/separator/Separator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "separator/Separator.vue"
+      },
+      {
+        "path": "ui/separator/index.ts",
+        "content": "export { default as Separator } from './Separator.vue'\n",
+        "type": "registry:ui",
+        "target": "separator/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sheet",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/sheet/Sheet.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/Sheet.vue"
+      },
+      {
+        "path": "ui/sheet/SheetClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetClose.vue"
+      },
+      {
+        "path": "ui/sheet/SheetContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetContent.vue"
+      },
+      {
+        "path": "ui/sheet/SheetDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetDescription.vue"
+      },
+      {
+        "path": "ui/sheet/SheetFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetFooter.vue"
+      },
+      {
+        "path": "ui/sheet/SheetHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetHeader.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTitle.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTrigger.vue"
+      },
+      {
+        "path": "ui/sheet/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+        "type": "registry:ui",
+        "target": "sheet/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "Sheet.vue",
+      "SheetContent.vue",
+      "utils",
+      "Input.vue",
+      "Tooltip.vue",
+      "TooltipContent.vue",
+      "TooltipTrigger.vue",
+      "Skeleton.vue",
+      "Separator.vue",
+      "Button.vue"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar/Sidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/Sidebar.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarFooter.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroup.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupLabel.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarHeader.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInput.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInset.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInset.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenu.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuBadge.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButtonChild.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSkeleton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSub.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubItem.vue",
+        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarProvider.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarRail.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarRail.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarSeparator.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarTrigger.vue"
+      },
+      {
+        "path": "ui/sidebar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "type": "registry:ui",
+        "target": "sidebar/index.ts"
+      },
+      {
+        "path": "ui/sidebar/utils.ts",
+        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+        "type": "registry:ui",
+        "target": "sidebar/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "skeleton",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/skeleton/Skeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "skeleton/Skeleton.vue"
+      },
+      {
+        "path": "ui/skeleton/index.ts",
+        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+        "type": "registry:ui",
+        "target": "skeleton/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "slider",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/slider/Slider.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "slider/Slider.vue"
+      },
+      {
+        "path": "ui/slider/index.ts",
+        "content": "export { default as Slider } from './Slider.vue'\n",
+        "type": "registry:ui",
+        "target": "slider/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sonner",
+    "type": "registry:ui",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/sonner/Sonner.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "sonner/Sonner.vue"
+      },
+      {
+        "path": "ui/sonner/index.ts",
+        "content": "export { default as Toaster } from './Sonner.vue'\n",
+        "type": "registry:ui",
+        "target": "sonner/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "stepper",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/stepper/Stepper.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/Stepper.vue"
+      },
+      {
+        "path": "ui/stepper/StepperDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperDescription.vue"
+      },
+      {
+        "path": "ui/stepper/StepperIndicator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperIndicator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperItem.vue"
+      },
+      {
+        "path": "ui/stepper/StepperSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperSeparator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTitle.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTrigger.vue"
+      },
+      {
+        "path": "ui/stepper/index.ts",
+        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "stepper/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "switch",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/switch/Switch.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "switch/Switch.vue"
+      },
+      {
+        "path": "ui/switch/index.ts",
+        "content": "export { default as Switch } from './Switch.vue'\n",
+        "type": "registry:ui",
+        "target": "switch/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "table",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/table/Table.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/Table.vue"
+      },
+      {
+        "path": "ui/table/TableBody.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableBody.vue"
+      },
+      {
+        "path": "ui/table/TableCaption.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCaption.vue"
+      },
+      {
+        "path": "ui/table/TableCell.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCell.vue"
+      },
+      {
+        "path": "ui/table/TableEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableEmpty.vue"
+      },
+      {
+        "path": "ui/table/TableFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableFooter.vue"
+      },
+      {
+        "path": "ui/table/TableHead.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHead.vue"
+      },
+      {
+        "path": "ui/table/TableHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHeader.vue"
+      },
+      {
+        "path": "ui/table/TableRow.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableRow.vue"
+      },
+      {
+        "path": "ui/table/index.ts",
+        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+        "type": "registry:ui",
+        "target": "table/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tabs",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tabs/Tabs.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/Tabs.vue"
+      },
+      {
+        "path": "ui/tabs/TabsContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsContent.vue"
+      },
+      {
+        "path": "ui/tabs/TabsList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsList.vue"
+      },
+      {
+        "path": "ui/tabs/TabsTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsTrigger.vue"
+      },
+      {
+        "path": "ui/tabs/index.ts",
+        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tabs/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tags-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tags-input/TagsInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItem.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemDelete.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemDelete.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemText.vue"
+      },
+      {
+        "path": "ui/tags-input/index.ts",
+        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+        "type": "registry:ui",
+        "target": "tags-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "textarea",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/textarea/Textarea.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "textarea/Textarea.vue"
+      },
+      {
+        "path": "ui/textarea/index.ts",
+        "content": "export { default as Textarea } from './Textarea.vue'\n",
+        "type": "registry:ui",
+        "target": "textarea/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toast",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toast/Toast.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toast.vue"
+      },
+      {
+        "path": "ui/toast/ToastAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastAction.vue"
+      },
+      {
+        "path": "ui/toast/ToastClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastClose.vue"
+      },
+      {
+        "path": "ui/toast/ToastDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastDescription.vue"
+      },
+      {
+        "path": "ui/toast/ToastProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastProvider.vue"
+      },
+      {
+        "path": "ui/toast/ToastTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastTitle.vue"
+      },
+      {
+        "path": "ui/toast/ToastViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastViewport.vue"
+      },
+      {
+        "path": "ui/toast/Toaster.vue",
+        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toaster.vue"
+      },
+      {
+        "path": "ui/toast/index.ts",
+        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "toast/index.ts"
+      },
+      {
+        "path": "ui/toast/use-toast.ts",
+        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+        "type": "registry:ui",
+        "target": "toast/use-toast.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle/Toggle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle/Toggle.vue"
+      },
+      {
+        "path": "ui/toggle/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "type": "registry:ui",
+        "target": "toggle/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle-group/ToggleGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroup.vue"
+      },
+      {
+        "path": "ui/toggle-group/ToggleGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroupItem.vue"
+      },
+      {
+        "path": "ui/toggle-group/index.ts",
+        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "toggle-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tooltip",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tooltip/Tooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/Tooltip.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipContent.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipProvider.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipTrigger.vue"
+      },
+      {
+        "path": "ui/tooltip/index.ts",
+        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tooltip/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "v-calendar",
+    "type": "registry:ui",
+    "dependencies": [
+      "v-calendar@next",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/v-calendar/Calendar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "type": "registry:ui",
+        "target": "v-calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/v-calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+        "type": "registry:ui",
+        "target": "v-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "AccordionDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "accordion"
+    ],
+    "files": [
+      {
+        "path": "example/AccordionDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
+        "type": "registry:example",
+        "target": "AccordionDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDialogDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert-dialog",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartSparkline",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartSparkline.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartSparkline.vue"
+      }
+    ]
+  },
+  {
+    "name": "AspectRatioDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "aspect-ratio"
+    ],
+    "files": [
+      {
+        "path": "example/AspectRatioDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
+        "type": "registry:example",
+        "target": "AspectRatioDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormApi",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormApi.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormApi.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormArray",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormArray.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormArray.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormBasic",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormBasic.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormBasic.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormConfirmPassword",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormConfirmPassword.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormConfirmPassword.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormControlled",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormControlled.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormDependencies",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormDependencies.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormDependencies.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormInputWithoutLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormInputWithoutLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormInputWithoutLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormSubObject",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormSubObject.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormSubObject.vue"
+      }
+    ]
+  },
+  {
+    "name": "AvatarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar"
+    ],
+    "files": [
+      {
+        "path": "example/AvatarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
+        "type": "registry:example",
+        "target": "AvatarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeSecondaryDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeSecondaryDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeSecondaryDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartRounded",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartRounded.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartRounded.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartStacked",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartStacked.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartStacked.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbDropdown",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbDropdown.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbDropdown.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbEllipsisDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbEllipsisDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbEllipsisDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbLinkDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbLinkDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbLinkDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "breadcrumb",
+      "button",
+      "drawer",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbResponsive.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbSeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbSeparatorDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbSeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonAsChildDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonAsChildDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonAsChildDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonGhostDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonGhostDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonGhostDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonIconDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonIconDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonIconDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonLinkDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonLinkDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonLinkDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonLoadingDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonLoadingDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonLoadingDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonSecondaryDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonSecondaryDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonSecondaryDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonWithIconDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonWithIconDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonWithIconDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "calendar"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarWithSelect",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "calendar",
+      "select",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarWithSelect.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarWithSelect.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardChat",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "button",
+      "card",
+      "command",
+      "dialog",
+      "input",
+      "tooltip",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CardChat.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardChat.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "switch",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CardDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardFormDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/CardFormDemo.vue",
+        "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardStats",
+    "type": "registry:example",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "card",
+      "chart-bar",
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/CardStats.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardStats.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardWithForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/CardWithForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardWithForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselApi",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "carousel",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselApi.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselApi.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselOrientation",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselOrientation.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselOrientation.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselPlugin",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselPlugin.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselPlugin.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselSize",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselSize.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselSize.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselSpacing",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselSpacing.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselSpacing.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselThumbnails",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselThumbnails.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselThumbnails.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxFormMultiple",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "form",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxFormMultiple.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxFormMultiple.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxFormSingle",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "form",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxFormSingle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxFormSingle.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxWithText",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxWithText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxWithText.vue"
+      }
+    ]
+  },
+  {
+    "name": "CollapsibleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "example/CollapsibleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+        "type": "registry:example",
+        "target": "CollapsibleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxDropdownMenu",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxDropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxDropdownMenu.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxPopover",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxPopover.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxPopover.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "drawer",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxResponsive.vue"
+      }
+    ]
+  },
+  {
+    "name": "CommandDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "command"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+        "type": "registry:example",
+        "target": "CommandDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CommandDialogDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "command"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CommandDialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ContextMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "context-menu"
+    ],
+    "files": [
+      {
+        "path": "example/ContextMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "ContextMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CustomChartTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card"
+    ],
+    "files": [
+      {
+        "path": "example/CustomChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CustomChartTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableColumnPinningDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableColumnPinningDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableColumnPinningDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableDemoColumn",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableDemoColumn.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableDemoColumn.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableReactiveDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableReactiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableReactiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "popover",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithIndependentMonths",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "range-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithIndependentMonths.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithIndependentMonths.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithPresets",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "popover",
+      "select",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithPresets.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithPresets.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithRange",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "range-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithRange.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithRange.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogCustomCloseButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DialogCustomCloseButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogCustomCloseButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "form",
+      "input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/DialogForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogScrollBodyDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/DialogScrollBodyDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogScrollBodyDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogScrollOverlayDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/DialogScrollOverlayDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogScrollOverlayDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartColor",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartColor.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartColor.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from \"@/registry/new-york/ui/chart-donut\";\n\nconst data = [\n  {\n    name: \"Jan\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Feb\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Mar\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Apr\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"May\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Jun\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n];\n\nconst valueFormatter = (tick: number | Date) =>\n  typeof tick === \"number\"\n    ? `$ ${new Intl.NumberFormat(\"us\").format(tick).toString()}`\n    : \"\";\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartPie",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartPie.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartPie.vue"
+      }
+    ]
+  },
+  {
+    "name": "DrawerDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "drawer"
+    ],
+    "files": [
+      {
+        "path": "example/DrawerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+        "type": "registry:example",
+        "target": "DrawerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DrawerDialog",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "drawer",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DrawerDialog.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+        "type": "registry:example",
+        "target": "DrawerDialog.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuCheckboxes",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuCheckboxes.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuCheckboxes.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuRadioGroup",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuRadioGroup.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuRadioGroup.vue"
+      }
+    ]
+  },
+  {
+    "name": "HoverCardDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "button",
+      "hover-card"
+    ],
+    "files": [
+      {
+        "path": "example/HoverCardDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+        "type": "registry:example",
+        "target": "HoverCardDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "InputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "InputDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputFile",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/InputFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputFile.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/InputForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputFormAutoAnimate",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/InputFormAutoAnimate.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputFormAutoAnimate.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithIcon",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithIcon.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithIcon.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "LabelDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/LabelDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "LabelDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartSparkline",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartSparkline.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartSparkline.vue"
+      }
+    ]
+  },
+  {
+    "name": "MenubarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "menubar"
+    ],
+    "files": [
+      {
+        "path": "example/MenubarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
+        "type": "registry:example",
+        "target": "MenubarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NavigationMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "navigation-menu"
+    ],
+    "files": [
+      {
+        "path": "example/NavigationMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "NavigationMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldCurrency",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldCurrency.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldCurrency.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDecimal",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDecimal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDecimal.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "number-field",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldPercentage",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldPercentage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldPercentage.vue"
+      }
+    ]
+  },
+  {
+    "name": "PaginationDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "pagination"
+    ],
+    "files": [
+      {
+        "path": "example/PaginationDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
+        "type": "registry:example",
+        "target": "PaginationDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputControlled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputControlled.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputFormDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "pin-input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputFormDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputSeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputSeparatorDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputSeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PopoverDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/PopoverDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "PopoverDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ProgressDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "progress"
+    ],
+    "files": [
+      {
+        "path": "example/ProgressDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "ProgressDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "RadioGroupDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "radio-group"
+    ],
+    "files": [
+      {
+        "path": "example/RadioGroupDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "RadioGroupDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "RadioGroupForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "radio-group",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/RadioGroupForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "RadioGroupForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "RangeCalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "range-calendar"
+    ],
+    "files": [
+      {
+        "path": "example/RangeCalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "RangeCalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableHandleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableHandleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableHandleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableVerticalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableVerticalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableVerticalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ScrollAreaDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "scroll-area",
+      "separator"
+    ],
+    "files": [
+      {
+        "path": "example/ScrollAreaDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
+        "type": "registry:example",
+        "target": "ScrollAreaDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ScrollAreaHorizontalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "scroll-area"
+    ],
+    "files": [
+      {
+        "path": "example/ScrollAreaHorizontalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
+        "type": "registry:example",
+        "target": "ScrollAreaHorizontalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/SelectDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "select",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SelectForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectScrollable",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/SelectScrollable.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectScrollable.vue"
+      }
+    ]
+  },
+  {
+    "name": "SeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "separator"
+    ],
+    "files": [
+      {
+        "path": "example/SeparatorDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SheetDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/SheetDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
+        "type": "registry:example",
+        "target": "SheetDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SheetSideDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/SheetSideDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SheetSideDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SkeletonCard",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "example/SkeletonCard.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SkeletonCard.vue"
+      }
+    ]
+  },
+  {
+    "name": "SkeletonDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "example/SkeletonDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SkeletonDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SliderDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "slider",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/SliderDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "SliderDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SliderForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "slider",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SliderForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SliderForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "SonnerDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/SonnerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "SonnerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SonnerWithDialog",
+    "type": "registry:example",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/SonnerWithDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "SonnerWithDialog.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "select",
+      "stepper",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/StepperForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperHorizental",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperHorizental.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperHorizental.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperVertical",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperVertical.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperVertical.vue"
+      }
+    ]
+  },
+  {
+    "name": "SwitchDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "switch"
+    ],
+    "files": [
+      {
+        "path": "example/SwitchDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SwitchDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SwitchForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "switch",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SwitchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SwitchForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "TableDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "table"
+    ],
+    "files": [
+      {
+        "path": "example/TableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
+        "type": "registry:example",
+        "target": "TableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TabsDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "tabs"
+    ],
+    "files": [
+      {
+        "path": "example/TabsDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+        "type": "registry:example",
+        "target": "TabsDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TabsVerticalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "tabs"
+    ],
+    "files": [
+      {
+        "path": "example/TabsVerticalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+        "type": "registry:example",
+        "target": "TabsVerticalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputComboboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "command",
+      "tags-input"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputComboboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputComboboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "tags-input"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputFormDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "tags-input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputFormDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "textarea",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithText",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithText.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastDestructive",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "toast",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastDestructive.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastDestructive.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastSimple",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastSimple.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastSimple.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastWithAction",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "toast",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastWithAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastWithAction.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastWithTitle",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastWithTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastWithTitle.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from \"@/registry/new-york/ui/toggle\";\n\nimport { FontBoldIcon } from \"@radix-icons/vue\";\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleDisabledDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleDisabledDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleDisabledDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupDisabledDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupDisabledDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupDisabledDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupLargeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupLargeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupLargeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupSingleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupSingleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupSingleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupSmallDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupSmallDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupSmallDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleItalicDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleItalicDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleItalicDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleItalicWithTextDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleItalicWithTextDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleItalicWithTextDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleLargeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleLargeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleLargeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleSmallDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleSmallDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleSmallDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TooltipDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/TooltipDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:example",
+        "target": "TooltipDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyBlockquote",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyBlockquote.vue",
+        "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyBlockquote.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyDemo.vue",
+        "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH1",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH1.vue",
+        "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH1.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH2",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH2.vue",
+        "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH2.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH3",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH3.vue",
+        "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH3.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH4",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH4.vue",
+        "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH4.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyInlineCode",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyInlineCode.vue",
+        "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyInlineCode.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyLarge",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyLarge.vue",
+        "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyLarge.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyLead",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyLead.vue",
+        "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyLead.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyList",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyList.vue",
+        "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyList.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyMuted",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyMuted.vue",
+        "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyMuted.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyP",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyP.vue",
+        "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyP.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographySmall",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographySmall.vue",
+        "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographySmall.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyTable",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyTable.vue",
+        "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyTable.vue"
+      }
+    ]
+  },
+  {
+    "name": "VCalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "v-calendar"
+    ],
+    "files": [
+      {
+        "path": "example/VCalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "VCalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "popover",
+      "toast",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerWithPresets",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "select",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerWithPresets.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerWithPresets.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerWithRange",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerWithRange.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerWithRange.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDateTimePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDateTimePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDateTimePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VRangePickerWithSlot",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VRangePickerWithSlot.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "VRangePickerWithSlot.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication01.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication02.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication02.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication03.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication03.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication04.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication04.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "badge",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet",
+      "table"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard01.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard02.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard02.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "button",
+      "drawer",
+      "input",
+      "label",
+      "select",
+      "textarea",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard03.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard03.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard04.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard04.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "pagination",
+      "progress",
+      "separator",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard05.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard05.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard06",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard06",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard06.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard06.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "label",
+      "select",
+      "sheet",
+      "table",
+      "textarea",
+      "toggle-group",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard07.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard07.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu",
+      "label",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "example/Sidebar01.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "Sidebar01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "breadcrumb",
+      "collapsible",
+      "dropdown-menu",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "example/Sidebar07.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "Sidebar07.vue"
+      }
+    ]
+  },
+  {
+    "name": "accordion",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/accordion/Accordion.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/Accordion.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionContent.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionItem.vue"
+      },
+      {
+        "path": "ui/accordion/AccordionTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "accordion/AccordionTrigger.vue"
+      },
+      {
+        "path": "ui/accordion/index.ts",
+        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "accordion/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert/Alert.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/Alert.vue"
+      },
+      {
+        "path": "ui/alert/AlertDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertDescription.vue"
+      },
+      {
+        "path": "ui/alert/AlertTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert/AlertTitle.vue"
+      },
+      {
+        "path": "ui/alert/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
+        "type": "registry:ui",
+        "target": "alert/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "alert-dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/alert-dialog/AlertDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialog.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogAction.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogCancel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogCancel.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogContent.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogDescription.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogFooter.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogHeader.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTitle.vue"
+      },
+      {
+        "path": "ui/alert-dialog/AlertDialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/AlertDialogTrigger.vue"
+      },
+      {
+        "path": "ui/alert-dialog/index.ts",
+        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "alert-dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "aspect-ratio",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/aspect-ratio/AspectRatio.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/AspectRatio.vue"
+      },
+      {
+        "path": "ui/aspect-ratio/index.ts",
+        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
+        "type": "registry:ui",
+        "target": "aspect-ratio/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "auto-form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "form",
+      "accordion",
+      "button",
+      "separator",
+      "checkbox",
+      "switch",
+      "calendar",
+      "popover",
+      "utils",
+      "label",
+      "radio-group",
+      "select",
+      "input",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "ui/auto-form/AutoForm.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoForm.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormField.vue",
+        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormField.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldArray.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldArray.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldBoolean.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldBoolean.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldDate.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldDate.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldEnum.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldEnum.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldFile.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldInput.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldNumber.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldNumber.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormFieldObject.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormFieldObject.vue"
+      },
+      {
+        "path": "ui/auto-form/AutoFormLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "auto-form/AutoFormLabel.vue"
+      },
+      {
+        "path": "ui/auto-form/constant.ts",
+        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/constant.ts"
+      },
+      {
+        "path": "ui/auto-form/dependencies.ts",
+        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/dependencies.ts"
+      },
+      {
+        "path": "ui/auto-form/index.ts",
+        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
+        "type": "registry:ui",
+        "target": "auto-form/index.ts"
+      },
+      {
+        "path": "ui/auto-form/interface.ts",
+        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
+        "type": "registry:ui",
+        "target": "auto-form/interface.ts"
+      },
+      {
+        "path": "ui/auto-form/utils.ts",
+        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "auto-form/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "avatar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/avatar/Avatar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/Avatar.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarFallback.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarFallback.vue"
+      },
+      {
+        "path": "ui/avatar/AvatarImage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "avatar/AvatarImage.vue"
+      },
+      {
+        "path": "ui/avatar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
+        "type": "registry:ui",
+        "target": "avatar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "badge",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/badge/Badge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "badge/Badge.vue"
+      },
+      {
+        "path": "ui/badge/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
+        "type": "registry:ui",
+        "target": "badge/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "breadcrumb",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/breadcrumb/Breadcrumb.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/Breadcrumb.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbItem.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbLink.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbLink.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbList.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbList.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbPage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbPage.vue"
+      },
+      {
+        "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/BreadcrumbSeparator.vue"
+      },
+      {
+        "path": "ui/breadcrumb/index.ts",
+        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "breadcrumb/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "button",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/button/Button.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "button/Button.vue"
+      },
+      {
+        "path": "ui/button/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+        "type": "registry:ui",
+        "target": "button/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/calendar/Calendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGrid.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridBody.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridHead.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarGridRow.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeader.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarHeading.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarNextButton.vue"
+      },
+      {
+        "path": "ui/calendar/CalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "calendar/CalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/card/Card.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/Card.vue"
+      },
+      {
+        "path": "ui/card/CardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardContent.vue"
+      },
+      {
+        "path": "ui/card/CardDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardDescription.vue"
+      },
+      {
+        "path": "ui/card/CardFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardFooter.vue"
+      },
+      {
+        "path": "ui/card/CardHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardHeader.vue"
+      },
+      {
+        "path": "ui/card/CardTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
+        "type": "registry:ui",
+        "target": "card/CardTitle.vue"
+      },
+      {
+        "path": "ui/card/index.ts",
+        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
+        "type": "registry:ui",
+        "target": "card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "carousel",
+    "type": "registry:ui",
+    "dependencies": [
+      "embla-carousel-vue",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/carousel/Carousel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/Carousel.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselContent.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselItem.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselNext.vue"
+      },
+      {
+        "path": "ui/carousel/CarouselPrevious.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "carousel/CarouselPrevious.vue"
+      },
+      {
+        "path": "ui/carousel/index.ts",
+        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
+        "type": "registry:ui",
+        "target": "carousel/index.ts"
+      },
+      {
+        "path": "ui/carousel/interface.ts",
+        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
+        "type": "registry:ui",
+        "target": "carousel/interface.ts"
+      },
+      {
+        "path": "ui/carousel/useCarousel.ts",
+        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
+        "type": "registry:ui",
+        "target": "carousel/useCarousel.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "ui/chart/ChartCrosshair.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartCrosshair.vue"
+      },
+      {
+        "path": "ui/chart/ChartLegend.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartLegend.vue"
+      },
+      {
+        "path": "ui/chart/ChartSingleTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartSingleTooltip.vue"
+      },
+      {
+        "path": "ui/chart/ChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart/ChartTooltip.vue"
+      },
+      {
+        "path": "ui/chart/index.ts",
+        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
+        "type": "registry:ui",
+        "target": "chart/index.ts"
+      },
+      {
+        "path": "ui/chart/interface.ts",
+        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart/interface.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-area",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-area/AreaChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-area/AreaChart.vue"
+      },
+      {
+        "path": "ui/chart-area/index.ts",
+        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-bar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-bar/BarChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-bar/BarChart.vue"
+      },
+      {
+        "path": "ui/chart-bar/index.ts",
+        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-bar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-donut",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-donut/DonutChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-donut/DonutChart.vue"
+      },
+      {
+        "path": "ui/chart-donut/index.ts",
+        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-donut/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "chart-line",
+    "type": "registry:ui",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/chart-line/LineChart.vue",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "chart-line/LineChart.vue"
+      },
+      {
+        "path": "ui/chart-line/index.ts",
+        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
+        "type": "registry:ui",
+        "target": "chart-line/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "checkbox",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/checkbox/Checkbox.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "checkbox/Checkbox.vue"
+      },
+      {
+        "path": "ui/checkbox/index.ts",
+        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
+        "type": "registry:ui",
+        "target": "checkbox/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "collapsible",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/collapsible/Collapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/Collapsible.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleContent.vue"
+      },
+      {
+        "path": "ui/collapsible/CollapsibleTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "collapsible/CollapsibleTrigger.vue"
+      },
+      {
+        "path": "ui/collapsible/index.ts",
+        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "collapsible/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "command",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "ui/command/Command.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/Command.vue"
+      },
+      {
+        "path": "ui/command/CommandDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandDialog.vue"
+      },
+      {
+        "path": "ui/command/CommandEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandEmpty.vue"
+      },
+      {
+        "path": "ui/command/CommandGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandGroup.vue"
+      },
+      {
+        "path": "ui/command/CommandInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandInput.vue"
+      },
+      {
+        "path": "ui/command/CommandItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandItem.vue"
+      },
+      {
+        "path": "ui/command/CommandList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandList.vue"
+      },
+      {
+        "path": "ui/command/CommandSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandSeparator.vue"
+      },
+      {
+        "path": "ui/command/CommandShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "command/CommandShortcut.vue"
+      },
+      {
+        "path": "ui/command/index.ts",
+        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "type": "registry:ui",
+        "target": "command/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "context-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/context-menu/ContextMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenu.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuLabel.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuPortal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuPortal.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSeparator.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuShortcut.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSub.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubContent.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/ContextMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "context-menu/ContextMenuTrigger.vue"
+      },
+      {
+        "path": "ui/context-menu/index.ts",
+        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "context-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dialog",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dialog/Dialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/Dialog.vue"
+      },
+      {
+        "path": "ui/dialog/DialogClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogClose.vue"
+      },
+      {
+        "path": "ui/dialog/DialogContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogDescription.vue"
+      },
+      {
+        "path": "ui/dialog/DialogFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogFooter.vue"
+      },
+      {
+        "path": "ui/dialog/DialogHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogHeader.vue"
+      },
+      {
+        "path": "ui/dialog/DialogScrollContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogScrollContent.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTitle.vue"
+      },
+      {
+        "path": "ui/dialog/DialogTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dialog/DialogTrigger.vue"
+      },
+      {
+        "path": "ui/dialog/index.ts",
+        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "dialog/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "drawer",
+    "type": "registry:ui",
+    "dependencies": [
+      "vaul-vue"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/drawer/Drawer.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/Drawer.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerContent.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerContent.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerDescription.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerFooter.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerFooter.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerHeader.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerOverlay.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerOverlay.vue"
+      },
+      {
+        "path": "ui/drawer/DrawerTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "drawer/DrawerTitle.vue"
+      },
+      {
+        "path": "ui/drawer/index.ts",
+        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
+        "type": "registry:ui",
+        "target": "drawer/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "dropdown-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/dropdown-menu/DropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenu.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuLabel.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSub.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      },
+      {
+        "path": "ui/dropdown-menu/index.ts",
+        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "dropdown-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "form",
+    "type": "registry:ui",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "ui/form/FormControl.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormControl.vue"
+      },
+      {
+        "path": "ui/form/FormDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormDescription.vue"
+      },
+      {
+        "path": "ui/form/FormItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormItem.vue"
+      },
+      {
+        "path": "ui/form/FormLabel.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormLabel.vue"
+      },
+      {
+        "path": "ui/form/FormMessage.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "form/FormMessage.vue"
+      },
+      {
+        "path": "ui/form/index.ts",
+        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
+        "type": "registry:ui",
+        "target": "form/index.ts"
+      },
+      {
+        "path": "ui/form/injectionKeys.ts",
+        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
+        "type": "registry:ui",
+        "target": "form/injectionKeys.ts"
+      },
+      {
+        "path": "ui/form/useFormField.ts",
+        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
+        "type": "registry:ui",
+        "target": "form/useFormField.ts"
+      }
+    ]
+  },
+  {
+    "name": "hover-card",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/hover-card/HoverCard.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCard.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardContent.vue"
+      },
+      {
+        "path": "ui/hover-card/HoverCardTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "hover-card/HoverCardTrigger.vue"
+      },
+      {
+        "path": "ui/hover-card/index.ts",
+        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "hover-card/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "input",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/input/Input.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
+        "type": "registry:ui",
+        "target": "input/Input.vue"
+      },
+      {
+        "path": "ui/input/index.ts",
+        "content": "export { default as Input } from './Input.vue'\n",
+        "type": "registry:ui",
+        "target": "input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "label",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/label/Label.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "type": "registry:ui",
+        "target": "label/Label.vue"
+      },
+      {
+        "path": "ui/label/index.ts",
+        "content": "export { default as Label } from './Label.vue'\n",
+        "type": "registry:ui",
+        "target": "label/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "menubar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/menubar/Menubar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/Menubar.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarCheckboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarCheckboxItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarLabel.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarMenu.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioGroup.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarRadioItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarRadioItem.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSeparator.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarShortcut.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarShortcut.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSub.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubContent.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarSubTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarSubTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/MenubarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "menubar/MenubarTrigger.vue"
+      },
+      {
+        "path": "ui/menubar/index.ts",
+        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "menubar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/navigation-menu/NavigationMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenu.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuContent.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuIndicator.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuItem.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuLink.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuLink.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuList.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuTrigger.vue"
+      },
+      {
+        "path": "ui/navigation-menu/NavigationMenuViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/NavigationMenuViewport.vue"
+      },
+      {
+        "path": "ui/navigation-menu/index.ts",
+        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
+        "type": "registry:ui",
+        "target": "navigation-menu/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "number-field",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/number-field/NumberField.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberField.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldContent.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldDecrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldDecrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldIncrement.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldIncrement.vue"
+      },
+      {
+        "path": "ui/number-field/NumberFieldInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "number-field/NumberFieldInput.vue"
+      },
+      {
+        "path": "ui/number-field/index.ts",
+        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
+        "type": "registry:ui",
+        "target": "number-field/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pagination",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/pagination/PaginationEllipsis.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationEllipsis.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationFirst.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationFirst.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationLast.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationLast.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationNext.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationNext.vue"
+      },
+      {
+        "path": "ui/pagination/PaginationPrev.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pagination/PaginationPrev.vue"
+      },
+      {
+        "path": "ui/pagination/index.ts",
+        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "pagination/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "pin-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/pin-input/PinInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputGroup.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputInput.vue"
+      },
+      {
+        "path": "ui/pin-input/PinInputSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "pin-input/PinInputSeparator.vue"
+      },
+      {
+        "path": "ui/pin-input/index.ts",
+        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
+        "type": "registry:ui",
+        "target": "pin-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/popover/Popover.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/Popover.vue"
+      },
+      {
+        "path": "ui/popover/PopoverContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverContent.vue"
+      },
+      {
+        "path": "ui/popover/PopoverTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "popover/PopoverTrigger.vue"
+      },
+      {
+        "path": "ui/popover/index.ts",
+        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "popover/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "progress",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/progress/Progress.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "progress/Progress.vue"
+      },
+      {
+        "path": "ui/progress/index.ts",
+        "content": "export { default as Progress } from './Progress.vue'\n",
+        "type": "registry:ui",
+        "target": "progress/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "radio-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/radio-group/RadioGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroup.vue"
+      },
+      {
+        "path": "ui/radio-group/RadioGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "radio-group/RadioGroupItem.vue"
+      },
+      {
+        "path": "ui/radio-group/index.ts",
+        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "radio-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "range-calendar",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "ui/range-calendar/RangeCalendar.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendar.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGrid.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGrid.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridBody.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridBody.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridHead.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridHead.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarGridRow.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarGridRow.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeadCell.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeader.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeader.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarHeading.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarHeading.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarNextButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarNextButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "type": "registry:ui",
+        "target": "range-calendar/RangeCalendarPrevButton.vue"
+      },
+      {
+        "path": "ui/range-calendar/index.ts",
+        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
+        "type": "registry:ui",
+        "target": "range-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "resizable",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/resizable/ResizableHandle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizableHandle.vue"
+      },
+      {
+        "path": "ui/resizable/ResizablePanelGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "resizable/ResizablePanelGroup.vue"
+      },
+      {
+        "path": "ui/resizable/index.ts",
+        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": "resizable/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "scroll-area",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/scroll-area/ScrollArea.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollArea.vue"
+      },
+      {
+        "path": "ui/scroll-area/ScrollBar.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
+        "type": "registry:ui",
+        "target": "scroll-area/ScrollBar.vue"
+      },
+      {
+        "path": "ui/scroll-area/index.ts",
+        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
+        "type": "registry:ui",
+        "target": "scroll-area/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "select",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/select/Select.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/Select.vue"
+      },
+      {
+        "path": "ui/select/SelectContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectContent.vue"
+      },
+      {
+        "path": "ui/select/SelectGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectGroup.vue"
+      },
+      {
+        "path": "ui/select/SelectItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItem.vue"
+      },
+      {
+        "path": "ui/select/SelectItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectItemText.vue"
+      },
+      {
+        "path": "ui/select/SelectLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectLabel.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollDownButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollDownButton.vue"
+      },
+      {
+        "path": "ui/select/SelectScrollUpButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectScrollUpButton.vue"
+      },
+      {
+        "path": "ui/select/SelectSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectSeparator.vue"
+      },
+      {
+        "path": "ui/select/SelectTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectTrigger.vue"
+      },
+      {
+        "path": "ui/select/SelectValue.vue",
+        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
+        "type": "registry:ui",
+        "target": "select/SelectValue.vue"
+      },
+      {
+        "path": "ui/select/index.ts",
+        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
+        "type": "registry:ui",
+        "target": "select/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "separator",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/separator/Separator.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "separator/Separator.vue"
+      },
+      {
+        "path": "ui/separator/index.ts",
+        "content": "export { default as Separator } from './Separator.vue'\n",
+        "type": "registry:ui",
+        "target": "separator/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sheet",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/sheet/Sheet.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/Sheet.vue"
+      },
+      {
+        "path": "ui/sheet/SheetClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetClose.vue"
+      },
+      {
+        "path": "ui/sheet/SheetContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetContent.vue"
+      },
+      {
+        "path": "ui/sheet/SheetDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetDescription.vue"
+      },
+      {
+        "path": "ui/sheet/SheetFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetFooter.vue"
+      },
+      {
+        "path": "ui/sheet/SheetHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetHeader.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTitle.vue"
+      },
+      {
+        "path": "ui/sheet/SheetTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sheet/SheetTrigger.vue"
+      },
+      {
+        "path": "ui/sheet/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
+        "type": "registry:ui",
+        "target": "sheet/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sidebar",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "Sheet.vue",
+      "SheetContent.vue",
+      "utils",
+      "Input.vue",
+      "Tooltip.vue",
+      "TooltipContent.vue",
+      "TooltipTrigger.vue",
+      "Skeleton.vue",
+      "Separator.vue",
+      "Button.vue"
+    ],
+    "files": [
+      {
+        "path": "ui/sidebar/Sidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/Sidebar.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarFooter.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroup.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupContent.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarGroupLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarGroupLabel.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarHeader.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInput.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarInset.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarInset.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenu.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuAction.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuBadge.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuButtonChild.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuButtonChild.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSkeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSkeleton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSub.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubButton.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarMenuSubItem.vue",
+        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarMenuSubItem.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarProvider.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarRail.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarRail.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarSeparator.vue"
+      },
+      {
+        "path": "ui/sidebar/SidebarTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "type": "registry:ui",
+        "target": "sidebar/SidebarTrigger.vue"
+      },
+      {
+        "path": "ui/sidebar/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "type": "registry:ui",
+        "target": "sidebar/index.ts"
+      },
+      {
+        "path": "ui/sidebar/utils.ts",
+        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
+        "type": "registry:ui",
+        "target": "sidebar/utils.ts"
+      }
+    ]
+  },
+  {
+    "name": "skeleton",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/skeleton/Skeleton.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "skeleton/Skeleton.vue"
+      },
+      {
+        "path": "ui/skeleton/index.ts",
+        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
+        "type": "registry:ui",
+        "target": "skeleton/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "slider",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/slider/Slider.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "slider/Slider.vue"
+      },
+      {
+        "path": "ui/slider/index.ts",
+        "content": "export { default as Slider } from './Slider.vue'\n",
+        "type": "registry:ui",
+        "target": "slider/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "sonner",
+    "type": "registry:ui",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "ui/sonner/Sonner.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "sonner/Sonner.vue"
+      },
+      {
+        "path": "ui/sonner/index.ts",
+        "content": "export { default as Toaster } from './Sonner.vue'\n",
+        "type": "registry:ui",
+        "target": "sonner/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "stepper",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/stepper/Stepper.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/Stepper.vue"
+      },
+      {
+        "path": "ui/stepper/StepperDescription.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperDescription.vue"
+      },
+      {
+        "path": "ui/stepper/StepperIndicator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperIndicator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperItem.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperItem.vue"
+      },
+      {
+        "path": "ui/stepper/StepperSeparator.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperSeparator.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTitle.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTitle.vue"
+      },
+      {
+        "path": "ui/stepper/StepperTrigger.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "stepper/StepperTrigger.vue"
+      },
+      {
+        "path": "ui/stepper/index.ts",
+        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "stepper/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "switch",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/switch/Switch.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "switch/Switch.vue"
+      },
+      {
+        "path": "ui/switch/index.ts",
+        "content": "export { default as Switch } from './Switch.vue'\n",
+        "type": "registry:ui",
+        "target": "switch/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "table",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/table/Table.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/Table.vue"
+      },
+      {
+        "path": "ui/table/TableBody.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableBody.vue"
+      },
+      {
+        "path": "ui/table/TableCaption.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCaption.vue"
+      },
+      {
+        "path": "ui/table/TableCell.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableCell.vue"
+      },
+      {
+        "path": "ui/table/TableEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableEmpty.vue"
+      },
+      {
+        "path": "ui/table/TableFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableFooter.vue"
+      },
+      {
+        "path": "ui/table/TableHead.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHead.vue"
+      },
+      {
+        "path": "ui/table/TableHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableHeader.vue"
+      },
+      {
+        "path": "ui/table/TableRow.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
+        "type": "registry:ui",
+        "target": "table/TableRow.vue"
+      },
+      {
+        "path": "ui/table/index.ts",
+        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
+        "type": "registry:ui",
+        "target": "table/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tabs",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tabs/Tabs.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/Tabs.vue"
+      },
+      {
+        "path": "ui/tabs/TabsContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsContent.vue"
+      },
+      {
+        "path": "ui/tabs/TabsList.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsList.vue"
+      },
+      {
+        "path": "ui/tabs/TabsTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tabs/TabsTrigger.vue"
+      },
+      {
+        "path": "ui/tabs/index.ts",
+        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tabs/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tags-input",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tags-input/TagsInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputInput.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItem.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemDelete.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemDelete.vue"
+      },
+      {
+        "path": "ui/tags-input/TagsInputItemText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "tags-input/TagsInputItemText.vue"
+      },
+      {
+        "path": "ui/tags-input/index.ts",
+        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
+        "type": "registry:ui",
+        "target": "tags-input/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "textarea",
+    "type": "registry:ui",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/textarea/Textarea.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "textarea/Textarea.vue"
+      },
+      {
+        "path": "ui/textarea/index.ts",
+        "content": "export { default as Textarea } from './Textarea.vue'\n",
+        "type": "registry:ui",
+        "target": "textarea/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toast",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toast/Toast.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toast.vue"
+      },
+      {
+        "path": "ui/toast/ToastAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastAction.vue"
+      },
+      {
+        "path": "ui/toast/ToastClose.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastClose.vue"
+      },
+      {
+        "path": "ui/toast/ToastDescription.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastDescription.vue"
+      },
+      {
+        "path": "ui/toast/ToastProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastProvider.vue"
+      },
+      {
+        "path": "ui/toast/ToastTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastTitle.vue"
+      },
+      {
+        "path": "ui/toast/ToastViewport.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/ToastViewport.vue"
+      },
+      {
+        "path": "ui/toast/Toaster.vue",
+        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toast/Toaster.vue"
+      },
+      {
+        "path": "ui/toast/index.ts",
+        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
+        "type": "registry:ui",
+        "target": "toast/index.ts"
+      },
+      {
+        "path": "ui/toast/use-toast.ts",
+        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
+        "type": "registry:ui",
+        "target": "toast/use-toast.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle/Toggle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle/Toggle.vue"
+      },
+      {
+        "path": "ui/toggle/index.ts",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "type": "registry:ui",
+        "target": "toggle/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "toggle-group",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/toggle-group/ToggleGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroup.vue"
+      },
+      {
+        "path": "ui/toggle-group/ToggleGroupItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": "toggle-group/ToggleGroupItem.vue"
+      },
+      {
+        "path": "ui/toggle-group/index.ts",
+        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
+        "type": "registry:ui",
+        "target": "toggle-group/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "tooltip",
+    "type": "registry:ui",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/tooltip/Tooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/Tooltip.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipContent.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipContent.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipProvider.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipProvider.vue"
+      },
+      {
+        "path": "ui/tooltip/TooltipTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": "tooltip/TooltipTrigger.vue"
+      },
+      {
+        "path": "ui/tooltip/index.ts",
+        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
+        "type": "registry:ui",
+        "target": "tooltip/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "v-calendar",
+    "type": "registry:ui",
+    "dependencies": [
+      "v-calendar@next",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/v-calendar/Calendar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "type": "registry:ui",
+        "target": "v-calendar/Calendar.vue"
+      },
+      {
+        "path": "ui/v-calendar/index.ts",
+        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
+        "type": "registry:ui",
+        "target": "v-calendar/index.ts"
+      }
+    ]
+  },
+  {
+    "name": "AccordionDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "accordion"
+    ],
+    "files": [
+      {
+        "path": "example/AccordionDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
+        "type": "registry:example",
+        "target": "AccordionDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AlertDialogDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "alert-dialog",
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/AlertDialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "AlertDialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AreaChartSparkline",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-area"
+    ],
+    "files": [
+      {
+        "path": "example/AreaChartSparkline.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "AreaChartSparkline.vue"
+      }
+    ]
+  },
+  {
+    "name": "AspectRatioDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "aspect-ratio"
+    ],
+    "files": [
+      {
+        "path": "example/AspectRatioDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
+        "type": "registry:example",
+        "target": "AspectRatioDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormApi",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormApi.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormApi.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormArray",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormArray.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormArray.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormBasic",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormBasic.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormBasic.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormConfirmPassword",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormConfirmPassword.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormConfirmPassword.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormControlled",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormControlled.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormDependencies",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormDependencies.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormDependencies.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormInputWithoutLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormInputWithoutLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormInputWithoutLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "AutoFormSubObject",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "auto-form",
+      "button",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/AutoFormSubObject.vue",
+        "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
+        "type": "registry:example",
+        "target": "AutoFormSubObject.vue"
+      }
+    ]
+  },
+  {
+    "name": "AvatarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar"
+    ],
+    "files": [
+      {
+        "path": "example/AvatarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
+        "type": "registry:example",
+        "target": "AvatarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BadgeSecondaryDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge"
+    ],
+    "files": [
+      {
+        "path": "example/BadgeSecondaryDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
+        "type": "registry:example",
+        "target": "BadgeSecondaryDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartRounded",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartRounded.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartRounded.vue"
+      }
+    ]
+  },
+  {
+    "name": "BarChartStacked",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-bar"
+    ],
+    "files": [
+      {
+        "path": "example/BarChartStacked.vue",
+        "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "BarChartStacked.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbDropdown",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbDropdown.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbDropdown.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbEllipsisDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbEllipsisDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbEllipsisDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbLinkDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbLinkDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbLinkDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "breadcrumb",
+      "button",
+      "drawer",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbResponsive.vue"
+      }
+    ]
+  },
+  {
+    "name": "BreadcrumbSeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb"
+    ],
+    "files": [
+      {
+        "path": "example/BreadcrumbSeparatorDemo.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "type": "registry:example",
+        "target": "BreadcrumbSeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonAsChildDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonAsChildDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonAsChildDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonDestructiveDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonDestructiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonDestructiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonGhostDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonGhostDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonGhostDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonIconDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonIconDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonIconDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonLinkDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonLinkDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonLinkDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonLoadingDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonLoadingDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonLoadingDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonSecondaryDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonSecondaryDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonSecondaryDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ButtonWithIconDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/ButtonWithIconDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ButtonWithIconDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "calendar"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "CalendarWithSelect",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "calendar",
+      "select",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CalendarWithSelect.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "type": "registry:example",
+        "target": "CalendarWithSelect.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardChat",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "button",
+      "card",
+      "command",
+      "dialog",
+      "input",
+      "tooltip",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CardChat.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\n\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardChat.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "switch",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/CardDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardFormDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/CardFormDemo.vue",
+        "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardStats",
+    "type": "registry:example",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "card",
+      "themes",
+      "config"
+    ],
+    "files": [
+      {
+        "path": "example/CardStats.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars[isDark ? 'dark' : 'light'].primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardStats.vue"
+      }
+    ]
+  },
+  {
+    "name": "CardWithForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/CardWithForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CardWithForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselApi",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "carousel",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselApi.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselApi.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselOrientation",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselOrientation.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselOrientation.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselPlugin",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselPlugin.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselPlugin.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselSize",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselSize.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselSize.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselSpacing",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselSpacing.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselSpacing.vue"
+      }
+    ]
+  },
+  {
+    "name": "CarouselThumbnails",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "card",
+      "carousel"
+    ],
+    "files": [
+      {
+        "path": "example/CarouselThumbnails.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CarouselThumbnails.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxFormMultiple",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "form",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxFormMultiple.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxFormMultiple.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxFormSingle",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "form",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxFormSingle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxFormSingle.vue"
+      }
+    ]
+  },
+  {
+    "name": "CheckboxWithText",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox"
+    ],
+    "files": [
+      {
+        "path": "example/CheckboxWithText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CheckboxWithText.vue"
+      }
+    ]
+  },
+  {
+    "name": "CollapsibleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "example/CollapsibleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+        "type": "registry:example",
+        "target": "CollapsibleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxDropdownMenu",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxDropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxDropdownMenu.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxPopover",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxPopover.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxPopover.vue"
+      }
+    ]
+  },
+  {
+    "name": "ComboboxResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "drawer",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "ComboboxResponsive.vue"
+      }
+    ]
+  },
+  {
+    "name": "CommandDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "command"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+        "type": "registry:example",
+        "target": "CommandDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CommandDialogDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "command"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "CommandDialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ContextMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "context-menu"
+    ],
+    "files": [
+      {
+        "path": "example/ContextMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "ContextMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "CustomChartTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "card"
+    ],
+    "files": [
+      {
+        "path": "example/CustomChartTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:example",
+        "target": "CustomChartTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableColumnPinningDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableColumnPinningDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableColumnPinningDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableDemoColumn",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableDemoColumn.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableDemoColumn.vue"
+      }
+    ]
+  },
+  {
+    "name": "DataTableReactiveDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [
+      "button",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "table",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DataTableReactiveDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "DataTableReactiveDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "popover",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "form",
+      "popover",
+      "toast",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithIndependentMonths",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "range-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithIndependentMonths.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithIndependentMonths.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithPresets",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "calendar",
+      "popover",
+      "select",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithPresets.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithPresets.vue"
+      }
+    ]
+  },
+  {
+    "name": "DatePickerWithRange",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "range-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/DatePickerWithRange.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "DatePickerWithRange.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogCustomCloseButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DialogCustomCloseButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogCustomCloseButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DialogDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "form",
+      "input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/DialogForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogScrollBodyDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/DialogScrollBodyDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogScrollBodyDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DialogScrollOverlayDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/DialogScrollOverlayDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "DialogScrollOverlayDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartColor",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartColor.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartColor.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DonutChartPie",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-donut"
+    ],
+    "files": [
+      {
+        "path": "example/DonutChartPie.vue",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "DonutChartPie.vue"
+      }
+    ]
+  },
+  {
+    "name": "DrawerDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "button",
+      "drawer"
+    ],
+    "files": [
+      {
+        "path": "example/DrawerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+        "type": "registry:example",
+        "target": "DrawerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DrawerDialog",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "dialog",
+      "drawer",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/DrawerDialog.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+        "type": "registry:example",
+        "target": "DrawerDialog.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuCheckboxes",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuCheckboxes.vue",
+        "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuCheckboxes.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "DropdownMenuRadioGroup",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/DropdownMenuRadioGroup.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "DropdownMenuRadioGroup.vue"
+      }
+    ]
+  },
+  {
+    "name": "HoverCardDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "button",
+      "hover-card"
+    ],
+    "files": [
+      {
+        "path": "example/HoverCardDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+        "type": "registry:example",
+        "target": "HoverCardDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "InputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "InputDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputFile",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/InputFile.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputFile.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/InputForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputFormAutoAnimate",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/InputFormAutoAnimate.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputFormAutoAnimate.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithIcon",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithIcon.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithIcon.vue"
+      }
+    ]
+  },
+  {
+    "name": "InputWithLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/InputWithLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "InputWithLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "LabelDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "checkbox",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/LabelDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "LabelDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartCustomTooltip",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartCustomTooltip.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartCustomTooltip.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "LineChartSparkline",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "chart-line"
+    ],
+    "files": [
+      {
+        "path": "example/LineChartSparkline.vue",
+        "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "LineChartSparkline.vue"
+      }
+    ]
+  },
+  {
+    "name": "MenubarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "menubar"
+    ],
+    "files": [
+      {
+        "path": "example/MenubarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
+        "type": "registry:example",
+        "target": "MenubarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NavigationMenuDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "navigation-menu"
+    ],
+    "files": [
+      {
+        "path": "example/NavigationMenuDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
+        "type": "registry:example",
+        "target": "NavigationMenuDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldCurrency",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldCurrency.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldCurrency.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDecimal",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDecimal.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDecimal.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "number-field",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "NumberFieldPercentage",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "number-field"
+    ],
+    "files": [
+      {
+        "path": "example/NumberFieldPercentage.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
+        "type": "registry:example",
+        "target": "NumberFieldPercentage.vue"
+      }
+    ]
+  },
+  {
+    "name": "PaginationDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "pagination"
+    ],
+    "files": [
+      {
+        "path": "example/PaginationDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
+        "type": "registry:example",
+        "target": "PaginationDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputControlled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputControlled.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputFormDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "pin-input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputFormDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PinInputSeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "pin-input"
+    ],
+    "files": [
+      {
+        "path": "example/PinInputSeparatorDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "PinInputSeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "PopoverDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/PopoverDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "PopoverDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ProgressDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "progress"
+    ],
+    "files": [
+      {
+        "path": "example/ProgressDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "ProgressDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "RadioGroupDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "radio-group"
+    ],
+    "files": [
+      {
+        "path": "example/RadioGroupDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "RadioGroupDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "RadioGroupForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "radio-group",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/RadioGroupForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "RadioGroupForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "RangeCalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "range-calendar"
+    ],
+    "files": [
+      {
+        "path": "example/RangeCalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "RangeCalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableHandleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableHandleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableHandleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ResizableVerticalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "resizable"
+    ],
+    "files": [
+      {
+        "path": "example/ResizableVerticalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ResizableVerticalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ScrollAreaDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "scroll-area",
+      "separator"
+    ],
+    "files": [
+      {
+        "path": "example/ScrollAreaDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
+        "type": "registry:example",
+        "target": "ScrollAreaDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ScrollAreaHorizontalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "scroll-area"
+    ],
+    "files": [
+      {
+        "path": "example/ScrollAreaHorizontalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
+        "type": "registry:example",
+        "target": "ScrollAreaHorizontalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/SelectDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "select",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SelectForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "SelectScrollable",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "select"
+    ],
+    "files": [
+      {
+        "path": "example/SelectScrollable.vue",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
+        "type": "registry:example",
+        "target": "SelectScrollable.vue"
+      }
+    ]
+  },
+  {
+    "name": "SeparatorDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "separator"
+    ],
+    "files": [
+      {
+        "path": "example/SeparatorDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SeparatorDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SheetDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/SheetDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
+        "type": "registry:example",
+        "target": "SheetDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SheetSideDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/SheetSideDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SheetSideDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SkeletonCard",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "example/SkeletonCard.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SkeletonCard.vue"
+      }
+    ]
+  },
+  {
+    "name": "SkeletonDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "skeleton"
+    ],
+    "files": [
+      {
+        "path": "example/SkeletonDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SkeletonDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SliderDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "slider",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/SliderDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/default/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+        "type": "registry:example",
+        "target": "SliderDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SliderForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "slider",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SliderForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SliderForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "SonnerDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "button"
+    ],
+    "files": [
+      {
+        "path": "example/SonnerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toast } from \"vue-sonner\";\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "SonnerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SonnerWithDialog",
+    "type": "registry:example",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "button",
+      "dialog"
+    ],
+    "files": [
+      {
+        "path": "example/SonnerWithDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:example",
+        "target": "SonnerWithDialog.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperForm",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "form",
+      "input",
+      "select",
+      "stepper",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/StepperForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperHorizental",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperHorizental.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperHorizental.vue"
+      }
+    ]
+  },
+  {
+    "name": "StepperVertical",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "stepper"
+    ],
+    "files": [
+      {
+        "path": "example/StepperVertical.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "type": "registry:example",
+        "target": "StepperVertical.vue"
+      }
+    ]
+  },
+  {
+    "name": "SwitchDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "switch"
+    ],
+    "files": [
+      {
+        "path": "example/SwitchDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "SwitchDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "SwitchForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "switch",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/SwitchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "SwitchForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "TableDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "table"
+    ],
+    "files": [
+      {
+        "path": "example/TableDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
+        "type": "registry:example",
+        "target": "TableDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TabsDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "tabs"
+    ],
+    "files": [
+      {
+        "path": "example/TabsDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+        "type": "registry:example",
+        "target": "TabsDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TabsVerticalDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label",
+      "tabs"
+    ],
+    "files": [
+      {
+        "path": "example/TabsVerticalDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
+        "type": "registry:example",
+        "target": "TabsVerticalDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputComboboxDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "command",
+      "tags-input"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputComboboxDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputComboboxDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "tags-input"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TagsInputFormDemo",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "tags-input",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/TagsInputFormDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "TagsInputFormDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaDisabled",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaDisabled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaDisabled.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "textarea",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithButton",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithButton.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithButton.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithLabel",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithLabel.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithLabel.vue"
+      }
+    ]
+  },
+  {
+    "name": "TextareaWithText",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "label",
+      "textarea"
+    ],
+    "files": [
+      {
+        "path": "example/TextareaWithText.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TextareaWithText.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastDestructive",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "toast",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastDestructive.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastDestructive.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastSimple",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastSimple.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastSimple.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastWithAction",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "toast",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastWithAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastWithAction.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToastWithTitle",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "use-toast"
+    ],
+    "files": [
+      {
+        "path": "example/ToastWithTitle.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToastWithTitle.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleDisabledDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleDisabledDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleDisabledDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupDisabledDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupDisabledDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupDisabledDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupLargeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupLargeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupLargeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupOutlineDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupOutlineDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupOutlineDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupSingleDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupSingleDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupSingleDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleGroupSmallDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle-group"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleGroupSmallDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleGroupSmallDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleItalicDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleItalicDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleItalicDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleItalicWithTextDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleItalicWithTextDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleItalicWithTextDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleLargeDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleLargeDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleLargeDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "ToggleSmallDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "toggle"
+    ],
+    "files": [
+      {
+        "path": "example/ToggleSmallDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "type": "registry:example",
+        "target": "ToggleSmallDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TooltipDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/TooltipDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
+        "type": "registry:example",
+        "target": "TooltipDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyBlockquote",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyBlockquote.vue",
+        "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyBlockquote.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyDemo.vue",
+        "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH1",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH1.vue",
+        "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH1.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH2",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH2.vue",
+        "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH2.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH3",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH3.vue",
+        "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH3.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyH4",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyH4.vue",
+        "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyH4.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyInlineCode",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyInlineCode.vue",
+        "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyInlineCode.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyLarge",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyLarge.vue",
+        "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyLarge.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyLead",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyLead.vue",
+        "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyLead.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyList",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyList.vue",
+        "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyList.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyMuted",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyMuted.vue",
+        "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyMuted.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyP",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyP.vue",
+        "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyP.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographySmall",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographySmall.vue",
+        "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographySmall.vue"
+      }
+    ]
+  },
+  {
+    "name": "TypographyTable",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      {
+        "path": "example/TypographyTable.vue",
+        "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "TypographyTable.vue"
+      }
+    ]
+  },
+  {
+    "name": "VCalendarDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "v-calendar"
+    ],
+    "files": [
+      {
+        "path": "example/VCalendarDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
+        "type": "registry:example",
+        "target": "VCalendarDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "button",
+      "form",
+      "popover",
+      "toast",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerForm.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerWithPresets",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "select",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerWithPresets.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerWithPresets.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDatePickerWithRange",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDatePickerWithRange.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDatePickerWithRange.vue"
+      }
+    ]
+  },
+  {
+    "name": "VDateTimePickerDemo",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VDateTimePickerDemo.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "type": "registry:example",
+        "target": "VDateTimePickerDemo.vue"
+      }
+    ]
+  },
+  {
+    "name": "VRangePickerWithSlot",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "popover",
+      "v-calendar",
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "example/VRangePickerWithSlot.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": "VRangePickerWithSlot.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication01.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication02.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication02.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication03.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication03.vue"
+      }
+    ]
+  },
+  {
+    "name": "Authentication04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Authentication04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "example/Authentication04.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Authentication04.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "badge",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet",
+      "table"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard01.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard02.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard02.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard03",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "button",
+      "drawer",
+      "input",
+      "label",
+      "select",
+      "textarea",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard03.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard03.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "sheet"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard04.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard04.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "input",
+      "pagination",
+      "progress",
+      "separator",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard05.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard05.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard06",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard06",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard06.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard06.vue"
+      }
+    ]
+  },
+  {
+    "name": "Dashboard07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": []
+  },
+  {
+    "name": "Dashboard07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "label",
+      "select",
+      "sheet",
+      "table",
+      "textarea",
+      "toggle-group",
+      "tooltip"
+    ],
+    "files": [
+      {
+        "path": "example/Dashboard07.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+        "type": "registry:block",
+        "target": "Dashboard07.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "breadcrumb",
+      "dropdown-menu",
+      "label",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "example/Sidebar01.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "Sidebar01.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "avatar",
+      "breadcrumb",
+      "collapsible",
+      "dropdown-menu",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "example/Sidebar07.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "Sidebar07.vue"
+      }
+    ]
+  }
+]
diff --git a/apps/www/src/public/r/themes.css b/apps/www/src/public/r/themes.css
new file mode 100644
index 000000000..f953bb054
--- /dev/null
+++ b/apps/www/src/public/r/themes.css
@@ -0,0 +1,768 @@
+
+.theme-zinc {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-zinc {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 4.9% 83.9%;
+}
+
+.theme-slate {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-slate {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 212.7 26.8% 83.9;
+}
+
+.theme-stone {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24 9.8% 10%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-stone {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 60 9.1% 97.8%;
+  --primary-foreground: 24 9.8% 10%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24 5.7% 82.9%;
+}
+
+.theme-gray {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 220.9 39.3% 11%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 224 71.4% 4.1%;
+
+  --radius: 0.35rem;
+}
+
+.dark .theme-gray {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 216 12.2% 83.9%;
+}
+
+.theme-neutral {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 3.9%;
+
+  --radius: ;
+}
+
+.dark .theme-neutral {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 83.1%;
+}
+
+.theme-red {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+
+  --radius: 0.4rem;
+}
+
+.dark .theme-red {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+}
+
+.theme-rose {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 346.8 77.2% 49.8%;
+
+  --radius: 0.5rem;
+}
+
+.dark .theme-rose {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 346.8 77.2% 49.8%;
+}
+
+.theme-orange {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24.6 95% 53.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-orange {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 72.2% 50.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20.5 90.2% 48.2%;
+}
+
+.theme-green {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 142.1 76.2% 36.3%;
+
+  --radius: ;
+}
+
+.dark .theme-green {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 142.4 71.8% 29.2%;
+}
+
+.theme-blue {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 221.2 83.2% 53.3%;
+
+  --radius: ;
+}
+
+.dark .theme-blue {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 224.3 76.3% 48%;
+}
+
+.theme-yellow {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.dark .theme-yellow {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 35.5 91.7% 32.9%;
+}
+
+.theme-violet {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 262.1 83.3% 57.8%;
+
+  --radius: ;
+}
+
+.dark .theme-violet {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 263.4 70% 50.4%;
+}
\ No newline at end of file
diff --git a/apps/www/src/public/r/themes/gray.json b/apps/www/src/public/r/themes/gray.json
new file mode 100644
index 000000000..789a82039
--- /dev/null
+++ b/apps/www/src/public/r/themes/gray.json
@@ -0,0 +1,58 @@
+{
+  "name": "gray",
+  "label": "Gray",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/themes/neutral.json b/apps/www/src/public/r/themes/neutral.json
new file mode 100644
index 000000000..cb928ac29
--- /dev/null
+++ b/apps/www/src/public/r/themes/neutral.json
@@ -0,0 +1,58 @@
+{
+  "name": "neutral",
+  "label": "Neutral",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/themes/slate.json b/apps/www/src/public/r/themes/slate.json
new file mode 100644
index 000000000..b0f1bb856
--- /dev/null
+++ b/apps/www/src/public/r/themes/slate.json
@@ -0,0 +1,58 @@
+{
+  "name": "slate",
+  "label": "Slate",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "primary": "222.2 47.4% 11.2%",
+      "primary-foreground": "210 40% 98%",
+      "secondary": "210 40% 96.1%",
+      "secondary-foreground": "222.2 47.4% 11.2%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "212.7 26.8% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/themes/stone.json b/apps/www/src/public/r/themes/stone.json
new file mode 100644
index 000000000..425b2ee88
--- /dev/null
+++ b/apps/www/src/public/r/themes/stone.json
@@ -0,0 +1,58 @@
+{
+  "name": "stone",
+  "label": "Stone",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
diff --git a/apps/www/src/public/r/themes/zinc.json b/apps/www/src/public/r/themes/zinc.json
new file mode 100644
index 000000000..edd349eb9
--- /dev/null
+++ b/apps/www/src/public/r/themes/zinc.json
@@ -0,0 +1,58 @@
+{
+  "name": "zinc",
+  "label": "Zinc",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%",
+      "chart-1": "12 76% 61%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%"
+    }
+  }
+}
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index c48efbd42..3ef1af8e4 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -12,11 +12,11 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index b565f1555..aa00f8c01 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -24,7 +24,7 @@
   "files": [
     {
       "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/lib/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
     },
     {
       "name": "AutoFormField.vue",
@@ -32,39 +32,39 @@
     },
     {
       "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Separator } from '@/lib/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { Calendar } from '@/lib/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Input } from '@/lib/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Input } from '@/lib/registry/default/ui/input'\nimport { Textarea } from '@/lib/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Input } from '@/lib/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'\nimport { FormItem } from '@/lib/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
     },
     {
       "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/lib/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
     },
     {
       "name": "constant.ts",
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index e99df1349..36e1d094c 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -16,7 +16,7 @@
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "CalendarGrid.vue",
@@ -48,11 +48,11 @@
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index 042d91039..01f24983f 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-area.json b/apps/www/src/public/registry/styles/default/chart-area.json
index 86fec025b..cb68838ab 100644
--- a/apps/www/src/public/registry/styles/default/chart-area.json
+++ b/apps/www/src/public/registry/styles/default/chart-area.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
index 95799dc28..00d122a2a 100644
--- a/apps/www/src/public/registry/styles/default/chart-bar.json
+++ b/apps/www/src/public/registry/styles/default/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-donut.json b/apps/www/src/public/registry/styles/default/chart-donut.json
index a6d0a015b..44cc4dee2 100644
--- a/apps/www/src/public/registry/styles/default/chart-donut.json
+++ b/apps/www/src/public/registry/styles/default/chart-donut.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart-line.json b/apps/www/src/public/registry/styles/default/chart-line.json
index fabff73b1..4cb4cabd9 100644
--- a/apps/www/src/public/registry/styles/default/chart-line.json
+++ b/apps/www/src/public/registry/styles/default/chart-line.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/chart.json b/apps/www/src/public/registry/styles/default/chart.json
index 8bb95f434..15c702d27 100644
--- a/apps/www/src/public/registry/styles/default/chart.json
+++ b/apps/www/src/public/registry/styles/default/chart.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "ChartSingleTooltip.vue",
@@ -23,7 +23,7 @@
     },
     {
       "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index 6e91cda62..14a6999c1 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -12,7 +12,7 @@
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 9ca74bde1..cedf14ed3 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
index a7c84710b..500a1ac4c 100644
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -12,19 +12,19 @@
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/range-calendar.json b/apps/www/src/public/registry/styles/default/range-calendar.json
index f176e87ab..11bbd9887 100644
--- a/apps/www/src/public/registry/styles/default/range-calendar.json
+++ b/apps/www/src/public/registry/styles/default/range-calendar.json
@@ -16,7 +16,7 @@
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "RangeCalendarGrid.vue",
@@ -48,11 +48,11 @@
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
index 123e8cc14..530437702 100644
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ b/apps/www/src/public/registry/styles/default/sidebar.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/lib/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/lib/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "SidebarContent.vue",
@@ -50,7 +50,7 @@
     },
     {
       "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/lib/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
     },
     {
       "name": "SidebarInset.vue",
@@ -70,7 +70,7 @@
     },
     {
       "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/lib/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/lib/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/lib/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
     },
     {
       "name": "SidebarMenuButtonChild.vue",
@@ -82,7 +82,7 @@
     },
     {
       "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/lib/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "SidebarMenuSub.vue",
@@ -106,11 +106,11 @@
     },
     {
       "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/lib/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
     },
     {
       "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/lib/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
index cf8546cf5..59f7e53b9 100644
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ b/apps/www/src/public/registry/styles/default/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
index 49be6e40b..cd58eca14 100644
--- a/apps/www/src/public/registry/styles/default/v-calendar.json
+++ b/apps/www/src/public/registry/styles/default/v-calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
index 456102530..bb0026a33 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -12,11 +12,11 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index 706363087..2870289ac 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -24,7 +24,7 @@
   "files": [
     {
       "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/lib/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
     },
     {
       "name": "AutoFormField.vue",
@@ -32,39 +32,39 @@
     },
     {
       "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Separator } from '@/lib/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { Calendar } from '@/lib/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Input } from '@/lib/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Input } from '@/lib/registry/new-york/ui/input'\nimport { Textarea } from '@/lib/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Input } from '@/lib/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'\nimport { FormItem } from '@/lib/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
     },
     {
       "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/lib/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
     },
     {
       "name": "constant.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index 8541fd565..abecc5d9d 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -16,7 +16,7 @@
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "CalendarGrid.vue",
@@ -48,11 +48,11 @@
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index a570b8a2a..8a8baaf59 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -23,11 +23,11 @@
     },
     {
       "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-area.json b/apps/www/src/public/registry/styles/new-york/chart-area.json
index 8ab525222..da202d6bf 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-area.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-area.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
index fed48e18e..2a2135bb6 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-bar.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-bar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-donut.json b/apps/www/src/public/registry/styles/new-york/chart-donut.json
index ba3e2515c..ac2b862eb 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-donut.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-donut.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart-line.json b/apps/www/src/public/registry/styles/new-york/chart-line.json
index aaf0a57fa..bdd2c4047 100644
--- a/apps/www/src/public/registry/styles/new-york/chart-line.json
+++ b/apps/www/src/public/registry/styles/new-york/chart-line.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/chart.json b/apps/www/src/public/registry/styles/new-york/chart.json
index 8233cb86b..4b41bc730 100644
--- a/apps/www/src/public/registry/styles/new-york/chart.json
+++ b/apps/www/src/public/registry/styles/new-york/chart.json
@@ -15,7 +15,7 @@
     },
     {
       "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "ChartSingleTooltip.vue",
@@ -23,7 +23,7 @@
     },
     {
       "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index 3c256f7d4..1265e32eb 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -12,7 +12,7 @@
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index 5a313ebd1..8073f094f 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
index ba4e93603..e1965290a 100644
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -12,19 +12,19 @@
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/range-calendar.json b/apps/www/src/public/registry/styles/new-york/range-calendar.json
index 935c591c9..fb316ce63 100644
--- a/apps/www/src/public/registry/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/range-calendar.json
@@ -16,7 +16,7 @@
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
     },
     {
       "name": "RangeCalendarGrid.vue",
@@ -48,11 +48,11 @@
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
index b88c60c98..4823d5402 100644
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ b/apps/www/src/public/registry/styles/new-york/sidebar.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/lib/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/lib/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "SidebarContent.vue",
@@ -50,7 +50,7 @@
     },
     {
       "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/lib/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
     },
     {
       "name": "SidebarInset.vue",
@@ -70,7 +70,7 @@
     },
     {
       "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/lib/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/lib/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
     },
     {
       "name": "SidebarMenuButtonChild.vue",
@@ -82,7 +82,7 @@
     },
     {
       "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/lib/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "SidebarMenuSub.vue",
@@ -106,11 +106,11 @@
     },
     {
       "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/lib/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
     },
     {
       "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/lib/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
index e60969f32..0387d1883 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle-group.json
@@ -8,11 +8,11 @@
   "files": [
     {
       "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json
index 2de91d873..4ab67b85b 100644
--- a/apps/www/src/public/registry/styles/new-york/v-calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/v-calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/registry/.eslintrc.json b/apps/www/src/registry/.eslintrc.json
similarity index 100%
rename from apps/www/registry/.eslintrc.json
rename to apps/www/src/registry/.eslintrc.json
diff --git a/apps/www/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
similarity index 97%
rename from apps/www/registry/crawl-content.ts
rename to apps/www/src/registry/crawl-content.ts
index 0943812c3..7c5ffe951 100644
--- a/apps/www/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -26,23 +26,23 @@ type ArrayItem<T> = T extends Array<infer X> ? X : never
 type RegistryItem = ArrayItem<Registry>
 
 export async function buildRegistry() {
-  const registryRootPath = resolve('lib', 'registry')
+  const registryRootPath = resolve('src', 'registry')
   const registry: Registry = []
 
   for (const { name: style } of styles) {
     const uiPath = resolve(registryRootPath, style, 'ui')
     const examplePath = resolve(registryRootPath, style, 'example')
     const blockPath = resolve(registryRootPath, style, 'block')
-    const hookPath = resolve(registryRootPath, style, 'hook')
+    // const hookPath = resolve(registryRootPath, style, 'hook')
 
-    const [ui, example, block, hook] = await Promise.all([
+    const [ui, example, block] = await Promise.all([
       crawlUI(uiPath, style),
       crawlExample(examplePath, style),
       crawlBlock(blockPath, style),
-      crawlHook(hookPath, style),
+      // crawlHook(hookPath, style),
     ])
 
-    registry.push(...ui, ...example, ...block, ...hook)
+    registry.push(...ui, ...example, ...block)
   }
 
   return registry
diff --git a/apps/www/registry/default/block/Authentication01.vue b/apps/www/src/registry/default/block/Authentication01.vue
similarity index 83%
rename from apps/www/registry/default/block/Authentication01.vue
rename to apps/www/src/registry/default/block/Authentication01.vue
index c4baaa9b4..4b0c05bfa 100644
--- a/apps/www/registry/default/block/Authentication01.vue
+++ b/apps/www/src/registry/default/block/Authentication01.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/block/Authentication02.vue b/apps/www/src/registry/default/block/Authentication02.vue
similarity index 88%
rename from apps/www/registry/default/block/Authentication02.vue
rename to apps/www/src/registry/default/block/Authentication02.vue
index 549337650..80012a827 100644
--- a/apps/www/registry/default/block/Authentication02.vue
+++ b/apps/www/src/registry/default/block/Authentication02.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/block/Authentication03.vue b/apps/www/src/registry/default/block/Authentication03.vue
similarity index 90%
rename from apps/www/registry/default/block/Authentication03.vue
rename to apps/www/src/registry/default/block/Authentication03.vue
index 15dc02417..8a7219895 100644
--- a/apps/www/registry/default/block/Authentication03.vue
+++ b/apps/www/src/registry/default/block/Authentication03.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/block/Authentication04.vue b/apps/www/src/registry/default/block/Authentication04.vue
similarity index 92%
rename from apps/www/registry/default/block/Authentication04.vue
rename to apps/www/src/registry/default/block/Authentication04.vue
index d1344054f..fc0b18556 100644
--- a/apps/www/registry/default/block/Authentication04.vue
+++ b/apps/www/src/registry/default/block/Authentication04.vue
@@ -6,9 +6,9 @@ export const containerClass = 'w-full h-full p-4 lg:p-0'
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/block/Dashboard01.vue b/apps/www/src/registry/default/block/Dashboard01.vue
similarity index 97%
rename from apps/www/registry/default/block/Dashboard01.vue
rename to apps/www/src/registry/default/block/Dashboard01.vue
index b685db079..843853977 100644
--- a/apps/www/registry/default/block/Dashboard01.vue
+++ b/apps/www/src/registry/default/block/Dashboard01.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
-import { Badge } from '@/lib/registry/default/ui/badge'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/default/ui/table'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'
+import { Badge } from '@/registry/default/ui/badge'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'
 import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/block/Dashboard02.vue b/apps/www/src/registry/default/block/Dashboard02.vue
similarity index 96%
rename from apps/www/registry/default/block/Dashboard02.vue
rename to apps/www/src/registry/default/block/Dashboard02.vue
index c28fe7c8c..b372a310c 100644
--- a/apps/www/registry/default/block/Dashboard02.vue
+++ b/apps/www/src/registry/default/block/Dashboard02.vue
@@ -5,13 +5,13 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/block/Dashboard03.vue b/apps/www/src/registry/default/block/Dashboard03.vue
similarity index 97%
rename from apps/www/registry/default/block/Dashboard03.vue
rename to apps/www/src/registry/default/block/Dashboard03.vue
index 2074631b7..2c16365d8 100644
--- a/apps/www/registry/default/block/Dashboard03.vue
+++ b/apps/www/src/registry/default/block/Dashboard03.vue
@@ -5,15 +5,15 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 
-import { Button } from '@/lib/registry/default/ui/button'
-import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/default/ui/drawer'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/default/ui/tooltip'
+import { Button } from '@/registry/default/ui/button'
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'
+import { Textarea } from '@/registry/default/ui/textarea'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'
 import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/block/Dashboard04.vue b/apps/www/src/registry/default/block/Dashboard04.vue
similarity index 95%
rename from apps/www/registry/default/block/Dashboard04.vue
rename to apps/www/src/registry/default/block/Dashboard04.vue
index 0df5844fa..24ef2dfe2 100644
--- a/apps/www/registry/default/block/Dashboard04.vue
+++ b/apps/www/src/registry/default/block/Dashboard04.vue
@@ -5,13 +5,13 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Checkbox } from '@/registry/default/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/block/Dashboard05.vue b/apps/www/src/registry/default/block/Dashboard05.vue
similarity index 97%
rename from apps/www/registry/default/block/Dashboard05.vue
rename to apps/www/src/registry/default/block/Dashboard05.vue
index 12a793e81..67abcb773 100644
--- a/apps/www/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/registry/default/block/Dashboard05.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,21 +14,21 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/registry/default/ui/breadcrumb'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Checkbox } from '@/registry/default/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
 import {
   Pagination,
   PaginationList,
   PaginationNext,
   PaginationPrev,
-} from '@/lib/registry/default/ui/pagination'
-import { Progress } from '@/lib/registry/default/ui/progress'
-import { Separator } from '@/lib/registry/default/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+} from '@/registry/default/ui/pagination'
+import { Progress } from '@/registry/default/ui/progress'
+import { Separator } from '@/registry/default/ui/separator'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import {
   Table,
   TableBody,
@@ -36,19 +36,19 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
+} from '@/registry/default/ui/table'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/default/ui/tabs'
+} from '@/registry/default/ui/tabs'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/registry/default/ui/tooltip'
 import {
   CircleUser,
   Copy,
diff --git a/apps/www/registry/default/block/Dashboard06.vue b/apps/www/src/registry/default/block/Dashboard06.vue
similarity index 98%
rename from apps/www/registry/default/block/Dashboard06.vue
rename to apps/www/src/registry/default/block/Dashboard06.vue
index 79fa5797f..2f59938b9 100644
--- a/apps/www/registry/default/block/Dashboard06.vue
+++ b/apps/www/src/registry/default/block/Dashboard06.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,12 +14,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+} from '@/registry/default/ui/breadcrumb'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import {
   Table,
   TableBody,
@@ -27,19 +27,19 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
+} from '@/registry/default/ui/table'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/default/ui/tabs'
+} from '@/registry/default/ui/tabs'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/registry/default/ui/tooltip'
 import {
   CircleUser,
   File,
diff --git a/apps/www/registry/default/block/Dashboard07.vue b/apps/www/src/registry/default/block/Dashboard07.vue
similarity index 97%
rename from apps/www/registry/default/block/Dashboard07.vue
rename to apps/www/src/registry/default/block/Dashboard07.vue
index cd0f2b4d6..bd00fef81 100644
--- a/apps/www/registry/default/block/Dashboard07.vue
+++ b/apps/www/src/registry/default/block/Dashboard07.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,20 +14,20 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/breadcrumb'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+} from '@/registry/default/ui/select'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'
 import {
   Table,
   TableBody,
@@ -35,15 +35,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+} from '@/registry/default/ui/table'
+import { Textarea } from '@/registry/default/ui/textarea'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/registry/default/ui/tooltip'
 import {
   ChevronLeft,
   CircleUser,
diff --git a/apps/www/registry/default/block/Sidebar01.vue b/apps/www/src/registry/default/block/Sidebar01.vue
similarity index 96%
rename from apps/www/registry/default/block/Sidebar01.vue
rename to apps/www/src/registry/default/block/Sidebar01.vue
index 91aa04f4c..2006bd5ea 100644
--- a/apps/www/registry/default/block/Sidebar01.vue
+++ b/apps/www/src/registry/default/block/Sidebar01.vue
@@ -16,15 +16,15 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Separator } from '@/lib/registry/default/ui/separator'
+} from '@/registry/default/ui/dropdown-menu'
+import { Label } from '@/registry/default/ui/label'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   Sidebar,
   SidebarContent,
@@ -40,7 +40,7 @@ import {
   SidebarProvider,
   SidebarRail,
   SidebarTrigger,
-} from '@/lib/registry/default/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const data = {
   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
diff --git a/apps/www/registry/default/block/Sidebar07.vue b/apps/www/src/registry/default/block/Sidebar07.vue
similarity index 97%
rename from apps/www/registry/default/block/Sidebar07.vue
rename to apps/www/src/registry/default/block/Sidebar07.vue
index 78bcd1b11..e62e8d784 100644
--- a/apps/www/registry/default/block/Sidebar07.vue
+++ b/apps/www/src/registry/default/block/Sidebar07.vue
@@ -10,7 +10,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/default/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   Breadcrumb,
@@ -19,13 +19,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/lib/registry/default/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,8 +35,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Separator } from '@/lib/registry/default/ui/separator'
+} from '@/registry/default/ui/dropdown-menu'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   Sidebar,
   SidebarContent,
@@ -55,7 +55,7 @@ import {
   SidebarProvider,
   SidebarRail,
   SidebarTrigger,
-} from '@/lib/registry/default/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   AudioWaveform,
   BadgeCheck,
diff --git a/apps/www/registry/default/example/AccordionDemo.vue b/apps/www/src/registry/default/example/AccordionDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/AccordionDemo.vue
rename to apps/www/src/registry/default/example/AccordionDemo.vue
index 7a99ad500..5a25fba27 100644
--- a/apps/www/registry/default/example/AccordionDemo.vue
+++ b/apps/www/src/registry/default/example/AccordionDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
 
 const defaultValue = 'item-1'
 
diff --git a/apps/www/registry/default/example/AlertDemo.vue b/apps/www/src/registry/default/example/AlertDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/AlertDemo.vue
rename to apps/www/src/registry/default/example/AlertDemo.vue
index 651de6cce..83bb85ad5 100644
--- a/apps/www/registry/default/example/AlertDemo.vue
+++ b/apps/www/src/registry/default/example/AlertDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'
 import { Terminal } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/AlertDestructiveDemo.vue b/apps/www/src/registry/default/example/AlertDestructiveDemo.vue
similarity index 78%
rename from apps/www/registry/default/example/AlertDestructiveDemo.vue
rename to apps/www/src/registry/default/example/AlertDestructiveDemo.vue
index 912bf6798..a819ab830 100644
--- a/apps/www/registry/default/example/AlertDestructiveDemo.vue
+++ b/apps/www/src/registry/default/example/AlertDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'
 import { AlertCircle } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/AlertDialogDemo.vue b/apps/www/src/registry/default/example/AlertDialogDemo.vue
similarity index 90%
rename from apps/www/registry/default/example/AlertDialogDemo.vue
rename to apps/www/src/registry/default/example/AlertDialogDemo.vue
index 82b055ec9..dac926aa2 100644
--- a/apps/www/registry/default/example/AlertDialogDemo.vue
+++ b/apps/www/src/registry/default/example/AlertDialogDemo.vue
@@ -9,8 +9,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from '@/lib/registry/default/ui/alert-dialog'
-import { Button } from '@/lib/registry/default/ui/button'
+} from '@/registry/default/ui/alert-dialog'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/AreaChartCustomTooltip.vue b/apps/www/src/registry/default/example/AreaChartCustomTooltip.vue
similarity index 94%
rename from apps/www/registry/default/example/AreaChartCustomTooltip.vue
rename to apps/www/src/registry/default/example/AreaChartCustomTooltip.vue
index d088bb127..79876d0f0 100644
--- a/apps/www/registry/default/example/AreaChartCustomTooltip.vue
+++ b/apps/www/src/registry/default/example/AreaChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+import { AreaChart } from '@/registry/default/ui/chart-area'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/default/example/AreaChartDemo.vue b/apps/www/src/registry/default/example/AreaChartDemo.vue
similarity index 93%
rename from apps/www/registry/default/example/AreaChartDemo.vue
rename to apps/www/src/registry/default/example/AreaChartDemo.vue
index 2b37bd5a7..e3c35b6ca 100644
--- a/apps/www/registry/default/example/AreaChartDemo.vue
+++ b/apps/www/src/registry/default/example/AreaChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+import { AreaChart } from '@/registry/default/ui/chart-area'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/AreaChartSparkline.vue b/apps/www/src/registry/default/example/AreaChartSparkline.vue
similarity index 94%
rename from apps/www/registry/default/example/AreaChartSparkline.vue
rename to apps/www/src/registry/default/example/AreaChartSparkline.vue
index e31ed3c32..e66a69448 100644
--- a/apps/www/registry/default/example/AreaChartSparkline.vue
+++ b/apps/www/src/registry/default/example/AreaChartSparkline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+import { AreaChart } from '@/registry/default/ui/chart-area'
 import { CurveType } from '@unovis/ts'
 
 const data = [
diff --git a/apps/www/registry/default/example/AspectRatioDemo.vue b/apps/www/src/registry/default/example/AspectRatioDemo.vue
similarity index 82%
rename from apps/www/registry/default/example/AspectRatioDemo.vue
rename to apps/www/src/registry/default/example/AspectRatioDemo.vue
index b275f9135..e3489b24f 100644
--- a/apps/www/registry/default/example/AspectRatioDemo.vue
+++ b/apps/www/src/registry/default/example/AspectRatioDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
+import { AspectRatio } from '@/registry/default/ui/aspect-ratio'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/AutoFormApi.vue b/apps/www/src/registry/default/example/AutoFormApi.vue
similarity index 85%
rename from apps/www/registry/default/example/AutoFormApi.vue
rename to apps/www/src/registry/default/example/AutoFormApi.vue
index c7c12759d..5fa053cbf 100644
--- a/apps/www/registry/default/example/AutoFormApi.vue
+++ b/apps/www/src/registry/default/example/AutoFormApi.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h, onMounted, shallowRef } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AutoFormArray.vue b/apps/www/src/registry/default/example/AutoFormArray.vue
similarity index 81%
rename from apps/www/registry/default/example/AutoFormArray.vue
rename to apps/www/src/registry/default/example/AutoFormArray.vue
index 196d5e86e..f7c55be86 100644
--- a/apps/www/registry/default/example/AutoFormArray.vue
+++ b/apps/www/src/registry/default/example/AutoFormArray.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AutoFormBasic.vue b/apps/www/src/registry/default/example/AutoFormBasic.vue
similarity index 94%
rename from apps/www/registry/default/example/AutoFormBasic.vue
rename to apps/www/src/registry/default/example/AutoFormBasic.vue
index 43dca27c1..b6bb2d179 100644
--- a/apps/www/registry/default/example/AutoFormBasic.vue
+++ b/apps/www/src/registry/default/example/AutoFormBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm, AutoFormField } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AutoFormConfirmPassword.vue b/apps/www/src/registry/default/example/AutoFormConfirmPassword.vue
similarity index 80%
rename from apps/www/registry/default/example/AutoFormConfirmPassword.vue
rename to apps/www/src/registry/default/example/AutoFormConfirmPassword.vue
index 45bd1f760..6e591e794 100644
--- a/apps/www/registry/default/example/AutoFormConfirmPassword.vue
+++ b/apps/www/src/registry/default/example/AutoFormConfirmPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AutoFormControlled.vue b/apps/www/src/registry/default/example/AutoFormControlled.vue
similarity index 81%
rename from apps/www/registry/default/example/AutoFormControlled.vue
rename to apps/www/src/registry/default/example/AutoFormControlled.vue
index 6ba7c7aaf..643a5063e 100644
--- a/apps/www/registry/default/example/AutoFormControlled.vue
+++ b/apps/www/src/registry/default/example/AutoFormControlled.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/default/example/AutoFormDependencies.vue b/apps/www/src/registry/default/example/AutoFormDependencies.vue
similarity index 91%
rename from apps/www/registry/default/example/AutoFormDependencies.vue
rename to apps/www/src/registry/default/example/AutoFormDependencies.vue
index 3ea9de245..4a108876d 100644
--- a/apps/www/registry/default/example/AutoFormDependencies.vue
+++ b/apps/www/src/registry/default/example/AutoFormDependencies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 import { DependencyType } from '../ui/auto-form/interface'
diff --git a/apps/www/registry/default/example/AutoFormInputWithoutLabel.vue b/apps/www/src/registry/default/example/AutoFormInputWithoutLabel.vue
similarity index 82%
rename from apps/www/registry/default/example/AutoFormInputWithoutLabel.vue
rename to apps/www/src/registry/default/example/AutoFormInputWithoutLabel.vue
index bc6355a8e..f51c47a4d 100644
--- a/apps/www/registry/default/example/AutoFormInputWithoutLabel.vue
+++ b/apps/www/src/registry/default/example/AutoFormInputWithoutLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm, AutoFormField } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AutoFormSubObject.vue b/apps/www/src/registry/default/example/AutoFormSubObject.vue
similarity index 86%
rename from apps/www/registry/default/example/AutoFormSubObject.vue
rename to apps/www/src/registry/default/example/AutoFormSubObject.vue
index 924f9022a..9b8b65229 100644
--- a/apps/www/registry/default/example/AutoFormSubObject.vue
+++ b/apps/www/src/registry/default/example/AutoFormSubObject.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/default/ui/auto-form'
-import { Button } from '@/lib/registry/default/ui/button'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { AutoForm } from '@/registry/default/ui/auto-form'
+import { Button } from '@/registry/default/ui/button'
+import { toast } from '@/registry/default/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/default/example/AvatarDemo.vue b/apps/www/src/registry/default/example/AvatarDemo.vue
similarity index 68%
rename from apps/www/registry/default/example/AvatarDemo.vue
rename to apps/www/src/registry/default/example/AvatarDemo.vue
index b824866c2..84c158837 100644
--- a/apps/www/registry/default/example/AvatarDemo.vue
+++ b/apps/www/src/registry/default/example/AvatarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BadgeDemo.vue b/apps/www/src/registry/default/example/BadgeDemo.vue
similarity index 59%
rename from apps/www/registry/default/example/BadgeDemo.vue
rename to apps/www/src/registry/default/example/BadgeDemo.vue
index c4521fc71..49c5cbce7 100644
--- a/apps/www/registry/default/example/BadgeDemo.vue
+++ b/apps/www/src/registry/default/example/BadgeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BadgeDestructiveDemo.vue b/apps/www/src/registry/default/example/BadgeDestructiveDemo.vue
similarity index 67%
rename from apps/www/registry/default/example/BadgeDestructiveDemo.vue
rename to apps/www/src/registry/default/example/BadgeDestructiveDemo.vue
index fa34886bd..aa44eea03 100644
--- a/apps/www/registry/default/example/BadgeDestructiveDemo.vue
+++ b/apps/www/src/registry/default/example/BadgeDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BadgeOutlineDemo.vue b/apps/www/src/registry/default/example/BadgeOutlineDemo.vue
similarity index 66%
rename from apps/www/registry/default/example/BadgeOutlineDemo.vue
rename to apps/www/src/registry/default/example/BadgeOutlineDemo.vue
index 134e82c82..90ae0296f 100644
--- a/apps/www/registry/default/example/BadgeOutlineDemo.vue
+++ b/apps/www/src/registry/default/example/BadgeOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BadgeSecondaryDemo.vue b/apps/www/src/registry/default/example/BadgeSecondaryDemo.vue
similarity index 67%
rename from apps/www/registry/default/example/BadgeSecondaryDemo.vue
rename to apps/www/src/registry/default/example/BadgeSecondaryDemo.vue
index 9c6be8e97..55c0d5cc9 100644
--- a/apps/www/registry/default/example/BadgeSecondaryDemo.vue
+++ b/apps/www/src/registry/default/example/BadgeSecondaryDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/registry/default/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BarChartCustomTooltip.vue b/apps/www/src/registry/default/example/BarChartCustomTooltip.vue
similarity index 95%
rename from apps/www/registry/default/example/BarChartCustomTooltip.vue
rename to apps/www/src/registry/default/example/BarChartCustomTooltip.vue
index 853e706e2..3a81c275d 100644
--- a/apps/www/registry/default/example/BarChartCustomTooltip.vue
+++ b/apps/www/src/registry/default/example/BarChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+import { BarChart } from '@/registry/default/ui/chart-bar'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/default/example/BarChartDemo.vue b/apps/www/src/registry/default/example/BarChartDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/BarChartDemo.vue
rename to apps/www/src/registry/default/example/BarChartDemo.vue
index 7fae02ac0..950bbda77 100644
--- a/apps/www/registry/default/example/BarChartDemo.vue
+++ b/apps/www/src/registry/default/example/BarChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+import { BarChart } from '@/registry/default/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/BarChartRounded.vue b/apps/www/src/registry/default/example/BarChartRounded.vue
similarity index 94%
rename from apps/www/registry/default/example/BarChartRounded.vue
rename to apps/www/src/registry/default/example/BarChartRounded.vue
index cb3d62266..e6ed933d4 100644
--- a/apps/www/registry/default/example/BarChartRounded.vue
+++ b/apps/www/src/registry/default/example/BarChartRounded.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+import { BarChart } from '@/registry/default/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/BarChartStacked.vue b/apps/www/src/registry/default/example/BarChartStacked.vue
similarity index 94%
rename from apps/www/registry/default/example/BarChartStacked.vue
rename to apps/www/src/registry/default/example/BarChartStacked.vue
index b2e7d1853..4585ea061 100644
--- a/apps/www/registry/default/example/BarChartStacked.vue
+++ b/apps/www/src/registry/default/example/BarChartStacked.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+import { BarChart } from '@/registry/default/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/BreadcrumbDemo.vue b/apps/www/src/registry/default/example/BreadcrumbDemo.vue
similarity index 93%
rename from apps/www/registry/default/example/BreadcrumbDemo.vue
rename to apps/www/src/registry/default/example/BreadcrumbDemo.vue
index f0992b3fe..ea0404fbe 100644
--- a/apps/www/registry/default/example/BreadcrumbDemo.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbDemo.vue
@@ -7,13 +7,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BreadcrumbDropdown.vue b/apps/www/src/registry/default/example/BreadcrumbDropdown.vue
similarity index 93%
rename from apps/www/registry/default/example/BreadcrumbDropdown.vue
rename to apps/www/src/registry/default/example/BreadcrumbDropdown.vue
index 085a54265..25be68749 100644
--- a/apps/www/registry/default/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbDropdown.vue
@@ -6,13 +6,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import { ChevronDown, Slash } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/BreadcrumbEllipsisDemo.vue b/apps/www/src/registry/default/example/BreadcrumbEllipsisDemo.vue
similarity index 95%
rename from apps/www/registry/default/example/BreadcrumbEllipsisDemo.vue
rename to apps/www/src/registry/default/example/BreadcrumbEllipsisDemo.vue
index 73f5b22e8..50ba2ff3b 100644
--- a/apps/www/registry/default/example/BreadcrumbEllipsisDemo.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbEllipsisDemo.vue
@@ -7,7 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BreadcrumbLinkDemo.vue b/apps/www/src/registry/default/example/BreadcrumbLinkDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/BreadcrumbLinkDemo.vue
rename to apps/www/src/registry/default/example/BreadcrumbLinkDemo.vue
index 06cb3533b..8e9e45c34 100644
--- a/apps/www/registry/default/example/BreadcrumbLinkDemo.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbLinkDemo.vue
@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/BreadcrumbResponsive.vue b/apps/www/src/registry/default/example/BreadcrumbResponsive.vue
similarity index 94%
rename from apps/www/registry/default/example/BreadcrumbResponsive.vue
rename to apps/www/src/registry/default/example/BreadcrumbResponsive.vue
index 539cbd359..d21b2788b 100644
--- a/apps/www/registry/default/example/BreadcrumbResponsive.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbResponsive.vue
@@ -7,8 +7,8 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
-import { Button } from '@/lib/registry/default/ui/button'
+} from '@/registry/default/ui/breadcrumb'
+import { Button } from '@/registry/default/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -18,13 +18,13 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
+} from '@/registry/default/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import { useMediaQuery } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/registry/default/example/BreadcrumbSeparatorDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/BreadcrumbSeparatorDemo.vue
rename to apps/www/src/registry/default/example/BreadcrumbSeparatorDemo.vue
index 7a6d6ccb9..6bd3c4150 100644
--- a/apps/www/registry/default/example/BreadcrumbSeparatorDemo.vue
+++ b/apps/www/src/registry/default/example/BreadcrumbSeparatorDemo.vue
@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import { Slash } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/ButtonAsChildDemo.vue b/apps/www/src/registry/default/example/ButtonAsChildDemo.vue
similarity index 69%
rename from apps/www/registry/default/example/ButtonAsChildDemo.vue
rename to apps/www/src/registry/default/example/ButtonAsChildDemo.vue
index 9dc9b10ed..7c0abe8ab 100644
--- a/apps/www/registry/default/example/ButtonAsChildDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonAsChildDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonDemo.vue b/apps/www/src/registry/default/example/ButtonDemo.vue
similarity index 59%
rename from apps/www/registry/default/example/ButtonDemo.vue
rename to apps/www/src/registry/default/example/ButtonDemo.vue
index 6f8e4f258..67009224a 100644
--- a/apps/www/registry/default/example/ButtonDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonDestructiveDemo.vue b/apps/www/src/registry/default/example/ButtonDestructiveDemo.vue
similarity index 67%
rename from apps/www/registry/default/example/ButtonDestructiveDemo.vue
rename to apps/www/src/registry/default/example/ButtonDestructiveDemo.vue
index e926c87a3..edef00c67 100644
--- a/apps/www/registry/default/example/ButtonDestructiveDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonGhostDemo.vue b/apps/www/src/registry/default/example/ButtonGhostDemo.vue
similarity index 65%
rename from apps/www/registry/default/example/ButtonGhostDemo.vue
rename to apps/www/src/registry/default/example/ButtonGhostDemo.vue
index a1d45498d..32696bf27 100644
--- a/apps/www/registry/default/example/ButtonGhostDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonGhostDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonIconDemo.vue b/apps/www/src/registry/default/example/ButtonIconDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/ButtonIconDemo.vue
rename to apps/www/src/registry/default/example/ButtonIconDemo.vue
index a04e08756..1ba87b25e 100644
--- a/apps/www/registry/default/example/ButtonIconDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonIconDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/ButtonLinkDemo.vue b/apps/www/src/registry/default/example/ButtonLinkDemo.vue
similarity index 64%
rename from apps/www/registry/default/example/ButtonLinkDemo.vue
rename to apps/www/src/registry/default/example/ButtonLinkDemo.vue
index a805bf50f..9b8431356 100644
--- a/apps/www/registry/default/example/ButtonLinkDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonLinkDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonLoadingDemo.vue b/apps/www/src/registry/default/example/ButtonLoadingDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/ButtonLoadingDemo.vue
rename to apps/www/src/registry/default/example/ButtonLoadingDemo.vue
index d25c1e330..58ca0aa15 100644
--- a/apps/www/registry/default/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonLoadingDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import { Loader2 } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/ButtonOutlineDemo.vue b/apps/www/src/registry/default/example/ButtonOutlineDemo.vue
similarity index 65%
rename from apps/www/registry/default/example/ButtonOutlineDemo.vue
rename to apps/www/src/registry/default/example/ButtonOutlineDemo.vue
index bf4e67529..278cf509d 100644
--- a/apps/www/registry/default/example/ButtonOutlineDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonSecondaryDemo.vue b/apps/www/src/registry/default/example/ButtonSecondaryDemo.vue
similarity index 66%
rename from apps/www/registry/default/example/ButtonSecondaryDemo.vue
rename to apps/www/src/registry/default/example/ButtonSecondaryDemo.vue
index 7510dacef..2eab1d1c8 100644
--- a/apps/www/registry/default/example/ButtonSecondaryDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonSecondaryDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ButtonWithIconDemo.vue b/apps/www/src/registry/default/example/ButtonWithIconDemo.vue
similarity index 74%
rename from apps/www/registry/default/example/ButtonWithIconDemo.vue
rename to apps/www/src/registry/default/example/ButtonWithIconDemo.vue
index 6cea63457..2e2085543 100644
--- a/apps/www/registry/default/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/registry/default/example/ButtonWithIconDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import { Mail } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/CalendarDemo.vue b/apps/www/src/registry/default/example/CalendarDemo.vue
similarity index 83%
rename from apps/www/registry/default/example/CalendarDemo.vue
rename to apps/www/src/registry/default/example/CalendarDemo.vue
index d77f1551c..72af8ebae 100644
--- a/apps/www/registry/default/example/CalendarDemo.vue
+++ b/apps/www/src/registry/default/example/CalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Calendar } from '@/registry/default/ui/calendar'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/CalendarForm.vue b/apps/www/src/registry/default/example/CalendarForm.vue
similarity index 90%
rename from apps/www/registry/default/example/CalendarForm.vue
rename to apps/www/src/registry/default/example/CalendarForm.vue
index 0c6dbf0f8..e2effe1d8 100644
--- a/apps/www/registry/default/example/CalendarForm.vue
+++ b/apps/www/src/registry/default/example/CalendarForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -8,10 +9,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { toast } from '@/lib/registry/default/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
+import { toast } from '@/registry/default/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
diff --git a/apps/www/registry/default/example/CalendarWithSelect.vue b/apps/www/src/registry/default/example/CalendarWithSelect.vue
similarity index 97%
rename from apps/www/registry/default/example/CalendarWithSelect.vue
rename to apps/www/src/registry/default/example/CalendarWithSelect.vue
index 46f1d8192..783e64ca7 100644
--- a/apps/www/registry/default/example/CalendarWithSelect.vue
+++ b/apps/www/src/registry/default/example/CalendarWithSelect.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/default/ui/calendar'
+import { cn } from '@/lib/utils'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/select'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { useVModel } from '@vueuse/core'
 import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
diff --git a/apps/www/registry/default/example/CardChat.vue b/apps/www/src/registry/default/example/CardChat.vue
similarity index 93%
rename from apps/www/registry/default/example/CardChat.vue
rename to apps/www/src/registry/default/example/CardChat.vue
index a3f52555f..bc2601de4 100644
--- a/apps/www/registry/default/example/CardChat.vue
+++ b/apps/www/src/registry/default/example/CardChat.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
-} from '@/lib/registry/default/ui/card'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/card'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'
 
-import { Input } from '@/lib/registry/default/ui/input'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'
+import { Input } from '@/registry/default/ui/input'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/tooltip'
 import { Check, Plus, Send } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/CardDemo.vue b/apps/www/src/registry/default/example/CardDemo.vue
similarity index 92%
rename from apps/www/registry/default/example/CardDemo.vue
rename to apps/www/src/registry/default/example/CardDemo.vue
index ff030922f..898eb3529 100644
--- a/apps/www/registry/default/example/CardDemo.vue
+++ b/apps/www/src/registry/default/example/CardDemo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -8,9 +9,8 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Switch } from '@/lib/registry/default/ui/switch'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/card'
+import { Switch } from '@/registry/default/ui/switch'
 import { BellRing, Check } from 'lucide-vue-next'
 
 const notifications = [
diff --git a/apps/www/registry/default/example/CardFormDemo.vue b/apps/www/src/registry/default/example/CardFormDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/CardFormDemo.vue
rename to apps/www/src/registry/default/example/CardFormDemo.vue
index 3c7a0f2d9..dcf311294 100644
--- a/apps/www/registry/default/example/CardFormDemo.vue
+++ b/apps/www/src/registry/default/example/CardFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/registry/default/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CardStats.vue b/apps/www/src/registry/default/example/CardStats.vue
similarity index 95%
rename from apps/www/registry/default/example/CardStats.vue
rename to apps/www/src/registry/default/example/CardStats.vue
index 8b2d1bf94..789143d4b 100644
--- a/apps/www/registry/default/example/CardStats.vue
+++ b/apps/www/src/registry/default/example/CardStats.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { themes } from '@/lib/registry/themes'
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { themes } from '@/registry/themes'
 import { useConfigStore } from '@/stores/config'
 import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useData } from 'vitepress'
diff --git a/apps/www/registry/default/example/CardWithForm.vue b/apps/www/src/registry/default/example/CardWithForm.vue
similarity index 86%
rename from apps/www/registry/default/example/CardWithForm.vue
rename to apps/www/src/registry/default/example/CardWithForm.vue
index f0540e662..99e9ff6bf 100644
--- a/apps/www/registry/default/example/CardWithForm.vue
+++ b/apps/www/src/registry/default/example/CardWithForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/registry/default/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/registry/default/example/Cards/ActivityGoal.vue
similarity index 95%
rename from apps/www/registry/default/example/Cards/ActivityGoal.vue
rename to apps/www/src/registry/default/example/Cards/ActivityGoal.vue
index e46630529..3162aa7ba 100644
--- a/apps/www/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/registry/default/example/Cards/ActivityGoal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
+} from '@/registry/default/ui/card'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Minus, Plus } from 'lucide-vue-next'
 
diff --git a/apps/www/registry/default/example/Cards/DataTable.vue b/apps/www/src/registry/default/example/Cards/DataTable.vue
similarity index 96%
rename from apps/www/registry/default/example/Cards/DataTable.vue
rename to apps/www/src/registry/default/example/Cards/DataTable.vue
index 31b0ca07b..0f3e5e77f 100644
--- a/apps/www/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/registry/default/example/Cards/DataTable.vue
@@ -5,17 +5,18 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'
+import { Checkbox } from '@/registry/default/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/default/ui/table'
 import {
   FlexRender,
   getCoreRowModel,
diff --git a/apps/www/registry/default/example/Cards/Metric.vue b/apps/www/src/registry/default/example/Cards/Metric.vue
similarity index 98%
rename from apps/www/registry/default/example/Cards/Metric.vue
rename to apps/www/src/registry/default/example/Cards/Metric.vue
index 498e79515..a701e6d9a 100644
--- a/apps/www/registry/default/example/Cards/Metric.vue
+++ b/apps/www/src/registry/default/example/Cards/Metric.vue
@@ -5,7 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
+} from '@/registry/default/ui/card'
 import { Line } from '@unovis/ts'
 import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
 
diff --git a/apps/www/registry/default/example/CarouselApi.vue b/apps/www/src/registry/default/example/CarouselApi.vue
similarity index 86%
rename from apps/www/registry/default/example/CarouselApi.vue
rename to apps/www/src/registry/default/example/CarouselApi.vue
index efc377f9e..c2e193a14 100644
--- a/apps/www/registry/default/example/CarouselApi.vue
+++ b/apps/www/src/registry/default/example/CarouselApi.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { CarouselApi } from '@/lib/registry/default/ui/carousel'
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import type { CarouselApi } from '@/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 import { watchOnce } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/CarouselDemo.vue b/apps/www/src/registry/default/example/CarouselDemo.vue
similarity index 83%
rename from apps/www/registry/default/example/CarouselDemo.vue
rename to apps/www/src/registry/default/example/CarouselDemo.vue
index e30a6b938..8db8f5862 100644
--- a/apps/www/registry/default/example/CarouselDemo.vue
+++ b/apps/www/src/registry/default/example/CarouselDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CarouselOrientation.vue b/apps/www/src/registry/default/example/CarouselOrientation.vue
similarity index 85%
rename from apps/www/registry/default/example/CarouselOrientation.vue
rename to apps/www/src/registry/default/example/CarouselOrientation.vue
index f8fd8f8f7..089569b41 100644
--- a/apps/www/registry/default/example/CarouselOrientation.vue
+++ b/apps/www/src/registry/default/example/CarouselOrientation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CarouselPlugin.vue b/apps/www/src/registry/default/example/CarouselPlugin.vue
similarity index 87%
rename from apps/www/registry/default/example/CarouselPlugin.vue
rename to apps/www/src/registry/default/example/CarouselPlugin.vue
index 72616f66d..c485bd3c4 100644
--- a/apps/www/registry/default/example/CarouselPlugin.vue
+++ b/apps/www/src/registry/default/example/CarouselPlugin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 import Autoplay from 'embla-carousel-autoplay'
 
 const plugin = Autoplay({
diff --git a/apps/www/registry/default/example/CarouselSize.vue b/apps/www/src/registry/default/example/CarouselSize.vue
similarity index 84%
rename from apps/www/registry/default/example/CarouselSize.vue
rename to apps/www/src/registry/default/example/CarouselSize.vue
index 7ac86fd32..bbc8a37f7 100644
--- a/apps/www/registry/default/example/CarouselSize.vue
+++ b/apps/www/src/registry/default/example/CarouselSize.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CarouselSpacing.vue b/apps/www/src/registry/default/example/CarouselSpacing.vue
similarity index 84%
rename from apps/www/registry/default/example/CarouselSpacing.vue
rename to apps/www/src/registry/default/example/CarouselSpacing.vue
index 00944e84f..02673bbd8 100644
--- a/apps/www/registry/default/example/CarouselSpacing.vue
+++ b/apps/www/src/registry/default/example/CarouselSpacing.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CarouselThumbnails.vue b/apps/www/src/registry/default/example/CarouselThumbnails.vue
similarity index 93%
rename from apps/www/registry/default/example/CarouselThumbnails.vue
rename to apps/www/src/registry/default/example/CarouselThumbnails.vue
index 49f05ee12..bc7bcfbe4 100644
--- a/apps/www/registry/default/example/CarouselThumbnails.vue
+++ b/apps/www/src/registry/default/example/CarouselThumbnails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
-import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/registry/default/ui/card'
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'
 import { watchOnce } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/CheckboxDemo.vue b/apps/www/src/registry/default/example/CheckboxDemo.vue
similarity index 84%
rename from apps/www/registry/default/example/CheckboxDemo.vue
rename to apps/www/src/registry/default/example/CheckboxDemo.vue
index 9cdd4a412..cdc4c112f 100644
--- a/apps/www/registry/default/example/CheckboxDemo.vue
+++ b/apps/www/src/registry/default/example/CheckboxDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Checkbox } from '@/registry/default/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CheckboxDisabled.vue b/apps/www/src/registry/default/example/CheckboxDisabled.vue
similarity index 84%
rename from apps/www/registry/default/example/CheckboxDisabled.vue
rename to apps/www/src/registry/default/example/CheckboxDisabled.vue
index bb30177f1..e43c2e743 100644
--- a/apps/www/registry/default/example/CheckboxDisabled.vue
+++ b/apps/www/src/registry/default/example/CheckboxDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Checkbox } from '@/registry/default/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/registry/default/example/CheckboxFormMultiple.vue
similarity index 91%
rename from apps/www/registry/default/example/CheckboxFormMultiple.vue
rename to apps/www/src/registry/default/example/CheckboxFormMultiple.vue
index e0e2b07cd..e00f6cc5b 100644
--- a/apps/www/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/registry/default/example/CheckboxFormMultiple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Button } from '@/registry/default/ui/button'
+import { Checkbox } from '@/registry/default/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -8,8 +8,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/CheckboxFormSingle.vue b/apps/www/src/registry/default/example/CheckboxFormSingle.vue
similarity index 87%
rename from apps/www/registry/default/example/CheckboxFormSingle.vue
rename to apps/www/src/registry/default/example/CheckboxFormSingle.vue
index 1a215f299..779c68bcd 100644
--- a/apps/www/registry/default/example/CheckboxFormSingle.vue
+++ b/apps/www/src/registry/default/example/CheckboxFormSingle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Button } from '@/registry/default/ui/button'
+import { Checkbox } from '@/registry/default/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -8,8 +8,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/CheckboxWithText.vue b/apps/www/src/registry/default/example/CheckboxWithText.vue
similarity index 89%
rename from apps/www/registry/default/example/CheckboxWithText.vue
rename to apps/www/src/registry/default/example/CheckboxWithText.vue
index 0d571472b..a2c0cd6bb 100644
--- a/apps/www/registry/default/example/CheckboxWithText.vue
+++ b/apps/www/src/registry/default/example/CheckboxWithText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Checkbox } from '@/registry/default/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CollapsibleDemo.vue b/apps/www/src/registry/default/example/CollapsibleDemo.vue
similarity index 91%
rename from apps/www/registry/default/example/CollapsibleDemo.vue
rename to apps/www/src/registry/default/example/CollapsibleDemo.vue
index b0bcbe5cd..4fcf6b1f1 100644
--- a/apps/www/registry/default/example/CollapsibleDemo.vue
+++ b/apps/www/src/registry/default/example/CollapsibleDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/lib/registry/default/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import { ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/ComboboxDemo.vue b/apps/www/src/registry/default/example/ComboboxDemo.vue
similarity index 93%
rename from apps/www/registry/default/example/ComboboxDemo.vue
rename to apps/www/src/registry/default/example/ComboboxDemo.vue
index 4693e62a7..8a77ec2cc 100644
--- a/apps/www/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/registry/default/example/ComboboxDemo.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Command,
   CommandEmpty,
@@ -7,14 +9,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/default/ui/command'
-
+} from '@/registry/default/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/src/registry/default/example/ComboboxDropdownMenu.vue
similarity index 95%
rename from apps/www/registry/default/example/ComboboxDropdownMenu.vue
rename to apps/www/src/registry/default/example/ComboboxDropdownMenu.vue
index bc28977a0..febfd1e3a 100644
--- a/apps/www/registry/default/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/registry/default/example/ComboboxDropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -7,7 +7,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/default/ui/command'
+} from '@/registry/default/ui/command'
 
 import {
   DropdownMenu,
@@ -21,7 +21,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/ComboboxForm.vue b/apps/www/src/registry/default/example/ComboboxForm.vue
similarity index 93%
rename from apps/www/registry/default/example/ComboboxForm.vue
rename to apps/www/src/registry/default/example/ComboboxForm.vue
index 31a2bb110..796f02ac8 100644
--- a/apps/www/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/registry/default/example/ComboboxForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -7,7 +8,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/default/ui/command'
+} from '@/registry/default/ui/command'
 import {
   FormControl,
   FormDescription,
@@ -15,15 +16,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
-import { toast } from '@/lib/registry/default/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/ComboboxPopover.vue b/apps/www/src/registry/default/example/ComboboxPopover.vue
similarity index 94%
rename from apps/www/registry/default/example/ComboboxPopover.vue
rename to apps/www/src/registry/default/example/ComboboxPopover.vue
index b5edf5b89..8090e1d29 100644
--- a/apps/www/registry/default/example/ComboboxPopover.vue
+++ b/apps/www/src/registry/default/example/ComboboxPopover.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Icon } from 'lucide-vue-next'
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Command,
   CommandEmpty,
@@ -8,14 +10,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/default/ui/command'
-
+} from '@/registry/default/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
 import {
   ArrowUpCircle,
   CheckCircle2,
diff --git a/apps/www/registry/default/example/ComboboxResponsive.vue b/apps/www/src/registry/default/example/ComboboxResponsive.vue
similarity index 88%
rename from apps/www/registry/default/example/ComboboxResponsive.vue
rename to apps/www/src/registry/default/example/ComboboxResponsive.vue
index 1aed14453..8f8115f8f 100644
--- a/apps/www/registry/default/example/ComboboxResponsive.vue
+++ b/apps/www/src/registry/default/example/ComboboxResponsive.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/default/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/default/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
+import { Button } from '@/registry/default/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/CommandDemo.vue b/apps/www/src/registry/default/example/CommandDemo.vue
similarity index 97%
rename from apps/www/registry/default/example/CommandDemo.vue
rename to apps/www/src/registry/default/example/CommandDemo.vue
index f32b98d1c..60e0428e2 100644
--- a/apps/www/registry/default/example/CommandDemo.vue
+++ b/apps/www/src/registry/default/example/CommandDemo.vue
@@ -8,7 +8,7 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '@/lib/registry/default/ui/command'
+} from '@/registry/default/ui/command'
 
 import {
   Calculator,
diff --git a/apps/www/registry/default/example/CommandDialogDemo.vue b/apps/www/src/registry/default/example/CommandDialogDemo.vue
similarity index 97%
rename from apps/www/registry/default/example/CommandDialogDemo.vue
rename to apps/www/src/registry/default/example/CommandDialogDemo.vue
index b2de3c135..6cd73bb62 100644
--- a/apps/www/registry/default/example/CommandDialogDemo.vue
+++ b/apps/www/src/registry/default/example/CommandDialogDemo.vue
@@ -7,7 +7,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '@/lib/registry/default/ui/command'
+} from '@/registry/default/ui/command'
 
 import { useMagicKeys } from '@vueuse/core'
 import { ref, watch } from 'vue'
diff --git a/apps/www/registry/default/example/ContextMenuDemo.vue b/apps/www/src/registry/default/example/ContextMenuDemo.vue
similarity index 97%
rename from apps/www/registry/default/example/ContextMenuDemo.vue
rename to apps/www/src/registry/default/example/ContextMenuDemo.vue
index 505e8373f..5f2912937 100644
--- a/apps/www/registry/default/example/ContextMenuDemo.vue
+++ b/apps/www/src/registry/default/example/ContextMenuDemo.vue
@@ -13,7 +13,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '@/lib/registry/default/ui/context-menu'
+} from '@/registry/default/ui/context-menu'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/CustomChartTooltip.vue b/apps/www/src/registry/default/example/CustomChartTooltip.vue
similarity index 90%
rename from apps/www/registry/default/example/CustomChartTooltip.vue
rename to apps/www/src/registry/default/example/CustomChartTooltip.vue
index 86f72173c..ee484d44a 100644
--- a/apps/www/registry/default/example/CustomChartTooltip.vue
+++ b/apps/www/src/registry/default/example/CustomChartTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/default/ui/card'
+import { Card, CardContent } from '@/registry/default/ui/card'
 
 defineProps<{
   title?: string
diff --git a/apps/www/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/registry/default/example/DataTableColumnPinningDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/DataTableColumnPinningDemo.vue
rename to apps/www/src/registry/default/example/DataTableColumnPinningDemo.vue
index 5a37788ed..7ae3cebdd 100644
--- a/apps/www/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/registry/default/example/DataTableColumnPinningDemo.vue
@@ -5,16 +5,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { cn, valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 
+import { Checkbox } from '@/registry/default/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
 import {
   Table,
   TableBody,
@@ -22,8 +23,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
-import { cn, valueUpdater } from '@/lib/utils'
+} from '@/registry/default/ui/table'
 import {
   createColumnHelper,
   FlexRender,
diff --git a/apps/www/registry/default/example/DataTableDemo.vue b/apps/www/src/registry/default/example/DataTableDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/DataTableDemo.vue
rename to apps/www/src/registry/default/example/DataTableDemo.vue
index 7cbd7a200..1e52c35e5 100644
--- a/apps/www/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/registry/default/example/DataTableDemo.vue
@@ -6,16 +6,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 
+import { Checkbox } from '@/registry/default/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/default/ui/table'
 import {
   FlexRender,
   getCoreRowModel,
diff --git a/apps/www/registry/default/example/DataTableDemoColumn.vue b/apps/www/src/registry/default/example/DataTableDemoColumn.vue
similarity index 91%
rename from apps/www/registry/default/example/DataTableDemoColumn.vue
rename to apps/www/src/registry/default/example/DataTableDemoColumn.vue
index f5d909138..1e57d0f74 100644
--- a/apps/www/registry/default/example/DataTableDemoColumn.vue
+++ b/apps/www/src/registry/default/example/DataTableDemoColumn.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Button } from '@/registry/default/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'
 import { MoreHorizontal } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/registry/default/example/DataTableReactiveDemo.vue b/apps/www/src/registry/default/example/DataTableReactiveDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/DataTableReactiveDemo.vue
rename to apps/www/src/registry/default/example/DataTableReactiveDemo.vue
index b4b2ebc99..d33a881f6 100644
--- a/apps/www/registry/default/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/registry/default/example/DataTableReactiveDemo.vue
@@ -6,16 +6,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 
+import { Checkbox } from '@/registry/default/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/registry/default/ui/dropdown-menu'
+import { Input } from '@/registry/default/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/default/ui/table'
 import {
   FlexRender,
   getCoreRowModel,
diff --git a/apps/www/registry/default/example/DatePickerDemo.vue b/apps/www/src/registry/default/example/DatePickerDemo.vue
similarity index 80%
rename from apps/www/registry/default/example/DatePickerDemo.vue
rename to apps/www/src/registry/default/example/DatePickerDemo.vue
index bc2cd364d..6e95b0e92 100644
--- a/apps/www/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/registry/default/example/DatePickerDemo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
+import { Calendar } from '@/registry/default/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
 import {
   DateFormatter,
   type DateValue,
diff --git a/apps/www/registry/default/example/DatePickerForm.vue b/apps/www/src/registry/default/example/DatePickerForm.vue
similarity index 90%
rename from apps/www/registry/default/example/DatePickerForm.vue
rename to apps/www/src/registry/default/example/DatePickerForm.vue
index f5ac914ad..716f2d495 100644
--- a/apps/www/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/registry/default/example/DatePickerForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -8,10 +9,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { toast } from '@/lib/registry/default/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
+import { toast } from '@/registry/default/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
diff --git a/apps/www/registry/default/example/DatePickerWithIndependentMonths.vue b/apps/www/src/registry/default/example/DatePickerWithIndependentMonths.vue
similarity index 98%
rename from apps/www/registry/default/example/DatePickerWithIndependentMonths.vue
rename to apps/www/src/registry/default/example/DatePickerWithIndependentMonths.vue
index 8d7e3460a..53dfc8f09 100644
--- a/apps/www/registry/default/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/registry/default/example/DatePickerWithIndependentMonths.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Button, buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 
+import { Button, buttonVariants } from '@/registry/default/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/registry/default/ui/popover'
+
 import {
   RangeCalendarCell,
   RangeCalendarCellTrigger,
@@ -14,9 +16,7 @@ import {
   RangeCalendarGridHead,
   RangeCalendarGridRow,
   RangeCalendarHeadCell,
-} from '@/lib/registry/default/ui/range-calendar'
-
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/range-calendar'
 import {
   CalendarDate,
   type DateValue,
diff --git a/apps/www/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/registry/default/example/DatePickerWithPresets.vue
similarity index 85%
rename from apps/www/registry/default/example/DatePickerWithPresets.vue
rename to apps/www/src/registry/default/example/DatePickerWithPresets.vue
index 89863d4ea..14bf2f78b 100644
--- a/apps/www/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/registry/default/example/DatePickerWithPresets.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
+import { Calendar } from '@/registry/default/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'
 import {
   DateFormatter,
   type DateValue,
diff --git a/apps/www/registry/default/example/DatePickerWithRange.vue b/apps/www/src/registry/default/example/DatePickerWithRange.vue
similarity index 86%
rename from apps/www/registry/default/example/DatePickerWithRange.vue
rename to apps/www/src/registry/default/example/DatePickerWithRange.vue
index 1abd1f48c..dec33607e 100644
--- a/apps/www/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/registry/default/example/DatePickerWithRange.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { DateRange } from 'reka-ui'
-import { Button } from '@/lib/registry/default/ui/button'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
 import { cn } from '@/lib/utils'
+
+import { Button } from '@/registry/default/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
+import { RangeCalendar } from '@/registry/default/ui/range-calendar'
 import {
   CalendarDate,
   DateFormatter,
diff --git a/apps/www/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/registry/default/example/DialogCustomCloseButton.vue
similarity index 86%
rename from apps/www/registry/default/example/DialogCustomCloseButton.vue
rename to apps/www/src/registry/default/example/DialogCustomCloseButton.vue
index 9a69f66be..351cba878 100644
--- a/apps/www/registry/default/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/registry/default/example/DialogCustomCloseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogClose,
@@ -9,9 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/dialog'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import { Copy } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/DialogDemo.vue b/apps/www/src/registry/default/example/DialogDemo.vue
similarity index 85%
rename from apps/www/registry/default/example/DialogDemo.vue
rename to apps/www/src/registry/default/example/DialogDemo.vue
index 2954be84a..a12b3373a 100644
--- a/apps/www/registry/default/example/DialogDemo.vue
+++ b/apps/www/src/registry/default/example/DialogDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,9 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/dialog'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/DialogForm.vue b/apps/www/src/registry/default/example/DialogForm.vue
similarity index 88%
rename from apps/www/registry/default/example/DialogForm.vue
rename to apps/www/src/registry/default/example/DialogForm.vue
index 55051760f..81f4fb261 100644
--- a/apps/www/registry/default/example/DialogForm.vue
+++ b/apps/www/src/registry/default/example/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/dialog'
 import {
   Form,
   FormControl,
@@ -17,10 +17,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
 
-import { Input } from '@/lib/registry/default/ui/input'
-import { toast } from '@/lib/registry/default/ui/toast'
+import { Input } from '@/registry/default/ui/input'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { h } from 'vue'
 import * as z from 'zod'
diff --git a/apps/www/registry/default/example/DialogScrollBodyDemo.vue b/apps/www/src/registry/default/example/DialogScrollBodyDemo.vue
similarity index 93%
rename from apps/www/registry/default/example/DialogScrollBodyDemo.vue
rename to apps/www/src/registry/default/example/DialogScrollBodyDemo.vue
index c3d12c3c1..8a6f60600 100644
--- a/apps/www/registry/default/example/DialogScrollBodyDemo.vue
+++ b/apps/www/src/registry/default/example/DialogScrollBodyDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/DialogScrollOverlayDemo.vue b/apps/www/src/registry/default/example/DialogScrollOverlayDemo.vue
similarity index 92%
rename from apps/www/registry/default/example/DialogScrollOverlayDemo.vue
rename to apps/www/src/registry/default/example/DialogScrollOverlayDemo.vue
index 02fc9b8c2..7a6980b00 100644
--- a/apps/www/registry/default/example/DialogScrollOverlayDemo.vue
+++ b/apps/www/src/registry/default/example/DialogScrollOverlayDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogDescription,
@@ -8,7 +8,7 @@ import {
   DialogScrollContent,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/DonutChartColor.vue b/apps/www/src/registry/default/example/DonutChartColor.vue
similarity index 94%
rename from apps/www/registry/default/example/DonutChartColor.vue
rename to apps/www/src/registry/default/example/DonutChartColor.vue
index 646ca6db1..2a0e51061 100644
--- a/apps/www/registry/default/example/DonutChartColor.vue
+++ b/apps/www/src/registry/default/example/DonutChartColor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+import { DonutChart } from '@/registry/default/ui/chart-donut'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/DonutChartCustomTooltip.vue b/apps/www/src/registry/default/example/DonutChartCustomTooltip.vue
similarity index 93%
rename from apps/www/registry/default/example/DonutChartCustomTooltip.vue
rename to apps/www/src/registry/default/example/DonutChartCustomTooltip.vue
index 48e79e6f2..6ec25ada8 100644
--- a/apps/www/registry/default/example/DonutChartCustomTooltip.vue
+++ b/apps/www/src/registry/default/example/DonutChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+import { DonutChart } from '@/registry/default/ui/chart-donut'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/default/example/DonutChartDemo.vue b/apps/www/src/registry/default/example/DonutChartDemo.vue
similarity index 92%
rename from apps/www/registry/default/example/DonutChartDemo.vue
rename to apps/www/src/registry/default/example/DonutChartDemo.vue
index ad8b9844c..05a2df47a 100644
--- a/apps/www/registry/default/example/DonutChartDemo.vue
+++ b/apps/www/src/registry/default/example/DonutChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+import { DonutChart } from '@/registry/default/ui/chart-donut'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/DonutChartPie.vue b/apps/www/src/registry/default/example/DonutChartPie.vue
similarity index 92%
rename from apps/www/registry/default/example/DonutChartPie.vue
rename to apps/www/src/registry/default/example/DonutChartPie.vue
index cf3de170f..1f4325ff3 100644
--- a/apps/www/registry/default/example/DonutChartPie.vue
+++ b/apps/www/src/registry/default/example/DonutChartPie.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+import { DonutChart } from '@/registry/default/ui/chart-donut'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/default/example/DrawerDemo.vue b/apps/www/src/registry/default/example/DrawerDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/DrawerDemo.vue
rename to apps/www/src/registry/default/example/DrawerDemo.vue
index 2feba219b..88d93bb5d 100644
--- a/apps/www/registry/default/example/DrawerDemo.vue
+++ b/apps/www/src/registry/default/example/DrawerDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -9,7 +9,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
+} from '@/registry/default/ui/drawer'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Minus, Plus } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/default/example/DrawerDialog.vue b/apps/www/src/registry/default/example/DrawerDialog.vue
similarity index 89%
rename from apps/www/registry/default/example/DrawerDialog.vue
rename to apps/www/src/registry/default/example/DrawerDialog.vue
index 619c513c4..0e824febb 100644
--- a/apps/www/registry/default/example/DrawerDialog.vue
+++ b/apps/www/src/registry/default/example/DrawerDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/dialog'
 import {
   Drawer,
   DrawerClose,
@@ -17,9 +17,9 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/drawer'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/registry/default/example/DropdownMenuCheckboxes.vue
similarity index 91%
rename from apps/www/registry/default/example/DropdownMenuCheckboxes.vue
rename to apps/www/src/registry/default/example/DropdownMenuCheckboxes.vue
index cb3434f30..f2e5a060c 100644
--- a/apps/www/registry/default/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/registry/default/example/DropdownMenuCheckboxes.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -8,7 +8,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import { ref } from 'vue'
 
 type Checked = DropdownMenuCheckboxItemProps['modelValue']
diff --git a/apps/www/registry/default/example/DropdownMenuDemo.vue b/apps/www/src/registry/default/example/DropdownMenuDemo.vue
similarity index 97%
rename from apps/www/registry/default/example/DropdownMenuDemo.vue
rename to apps/www/src/registry/default/example/DropdownMenuDemo.vue
index e34ac2447..aedc3768a 100644
--- a/apps/www/registry/default/example/DropdownMenuDemo.vue
+++ b/apps/www/src/registry/default/example/DropdownMenuDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
 import {
   DropdownMenu,
@@ -14,7 +14,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   Cloud,
   CreditCard,
diff --git a/apps/www/registry/default/example/DropdownMenuRadioGroup.vue b/apps/www/src/registry/default/example/DropdownMenuRadioGroup.vue
similarity index 90%
rename from apps/www/registry/default/example/DropdownMenuRadioGroup.vue
rename to apps/www/src/registry/default/example/DropdownMenuRadioGroup.vue
index 59587d7dd..94fa53982 100644
--- a/apps/www/registry/default/example/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/registry/default/example/DropdownMenuRadioGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,7 +8,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import { ref } from 'vue'
 
 const position = ref('bottom')
diff --git a/apps/www/registry/default/example/HoverCardDemo.vue b/apps/www/src/registry/default/example/HoverCardDemo.vue
similarity index 88%
rename from apps/www/registry/default/example/HoverCardDemo.vue
rename to apps/www/src/registry/default/example/HoverCardDemo.vue
index d0a6e0545..4484ddb63 100644
--- a/apps/www/registry/default/example/HoverCardDemo.vue
+++ b/apps/www/src/registry/default/example/HoverCardDemo.vue
@@ -3,14 +3,14 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/default/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/default/ui/hover-card'
+} from '@/registry/default/ui/hover-card'
 import { CalendarDays } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/InputDemo.vue b/apps/www/src/registry/default/example/InputDemo.vue
similarity index 65%
rename from apps/www/registry/default/example/InputDemo.vue
rename to apps/www/src/registry/default/example/InputDemo.vue
index 07b6a88e3..fa9ad4add 100644
--- a/apps/www/registry/default/example/InputDemo.vue
+++ b/apps/www/src/registry/default/example/InputDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
+import { Input } from '@/registry/default/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/InputDisabled.vue b/apps/www/src/registry/default/example/InputDisabled.vue
similarity index 66%
rename from apps/www/registry/default/example/InputDisabled.vue
rename to apps/www/src/registry/default/example/InputDisabled.vue
index 8064cb309..9ec7491e8 100644
--- a/apps/www/registry/default/example/InputDisabled.vue
+++ b/apps/www/src/registry/default/example/InputDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
+import { Input } from '@/registry/default/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/InputFile.vue b/apps/www/src/registry/default/example/InputFile.vue
similarity index 64%
rename from apps/www/registry/default/example/InputFile.vue
rename to apps/www/src/registry/default/example/InputFile.vue
index c4bd13b5d..b7743f288 100644
--- a/apps/www/registry/default/example/InputFile.vue
+++ b/apps/www/src/registry/default/example/InputFile.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/InputForm.vue b/apps/www/src/registry/default/example/InputForm.vue
similarity index 85%
rename from apps/www/registry/default/example/InputForm.vue
rename to apps/www/src/registry/default/example/InputForm.vue
index 666963513..52f1f820d 100644
--- a/apps/www/registry/default/example/InputForm.vue
+++ b/apps/www/src/registry/default/example/InputForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/InputFormAutoAnimate.vue b/apps/www/src/registry/default/example/InputFormAutoAnimate.vue
similarity index 86%
rename from apps/www/registry/default/example/InputFormAutoAnimate.vue
rename to apps/www/src/registry/default/example/InputFormAutoAnimate.vue
index 6eed66af7..f124ebc2b 100644
--- a/apps/www/registry/default/example/InputFormAutoAnimate.vue
+++ b/apps/www/src/registry/default/example/InputFormAutoAnimate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
+import { toast } from '@/registry/default/ui/toast'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/registry/default/example/InputWithButton.vue b/apps/www/src/registry/default/example/InputWithButton.vue
similarity index 67%
rename from apps/www/registry/default/example/InputWithButton.vue
rename to apps/www/src/registry/default/example/InputWithButton.vue
index ec26f83ae..37e6eb34b 100644
--- a/apps/www/registry/default/example/InputWithButton.vue
+++ b/apps/www/src/registry/default/example/InputWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
+import { Button } from '@/registry/default/ui/button'
+import { Input } from '@/registry/default/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/InputWithIcon.vue b/apps/www/src/registry/default/example/InputWithIcon.vue
similarity index 87%
rename from apps/www/registry/default/example/InputWithIcon.vue
rename to apps/www/src/registry/default/example/InputWithIcon.vue
index 8b3680dfc..55671db65 100644
--- a/apps/www/registry/default/example/InputWithIcon.vue
+++ b/apps/www/src/registry/default/example/InputWithIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
+import { Input } from '@/registry/default/ui/input'
 import { Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/default/example/InputWithLabel.vue b/apps/www/src/registry/default/example/InputWithLabel.vue
similarity index 66%
rename from apps/www/registry/default/example/InputWithLabel.vue
rename to apps/www/src/registry/default/example/InputWithLabel.vue
index 76bc052be..a3c5b23c4 100644
--- a/apps/www/registry/default/example/InputWithLabel.vue
+++ b/apps/www/src/registry/default/example/InputWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/LabelDemo.vue b/apps/www/src/registry/default/example/LabelDemo.vue
similarity index 65%
rename from apps/www/registry/default/example/LabelDemo.vue
rename to apps/www/src/registry/default/example/LabelDemo.vue
index 9dfd33323..b406bd391 100644
--- a/apps/www/registry/default/example/LabelDemo.vue
+++ b/apps/www/src/registry/default/example/LabelDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Checkbox } from '@/registry/default/ui/checkbox'
+import { Label } from '@/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/LineChartCustomTooltip.vue b/apps/www/src/registry/default/example/LineChartCustomTooltip.vue
similarity index 98%
rename from apps/www/registry/default/example/LineChartCustomTooltip.vue
rename to apps/www/src/registry/default/example/LineChartCustomTooltip.vue
index 975baff27..d2781333b 100644
--- a/apps/www/registry/default/example/LineChartCustomTooltip.vue
+++ b/apps/www/src/registry/default/example/LineChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/default/ui/chart-line'
+import { LineChart } from '@/registry/default/ui/chart-line'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/default/example/LineChartDemo.vue b/apps/www/src/registry/default/example/LineChartDemo.vue
similarity index 98%
rename from apps/www/registry/default/example/LineChartDemo.vue
rename to apps/www/src/registry/default/example/LineChartDemo.vue
index f5a2714ba..794d97d48 100644
--- a/apps/www/registry/default/example/LineChartDemo.vue
+++ b/apps/www/src/registry/default/example/LineChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/default/ui/chart-line'
+import { LineChart } from '@/registry/default/ui/chart-line'
 
 const data = [
   {
diff --git a/apps/www/registry/default/example/LineChartSparkline.vue b/apps/www/src/registry/default/example/LineChartSparkline.vue
similarity index 98%
rename from apps/www/registry/default/example/LineChartSparkline.vue
rename to apps/www/src/registry/default/example/LineChartSparkline.vue
index 6aa2ef6c4..6e9cc4f7a 100644
--- a/apps/www/registry/default/example/LineChartSparkline.vue
+++ b/apps/www/src/registry/default/example/LineChartSparkline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/default/ui/chart-line'
+import { LineChart } from '@/registry/default/ui/chart-line'
 
 const data = [
   {
diff --git a/apps/www/registry/default/example/MenubarDemo.vue b/apps/www/src/registry/default/example/MenubarDemo.vue
similarity index 98%
rename from apps/www/registry/default/example/MenubarDemo.vue
rename to apps/www/src/registry/default/example/MenubarDemo.vue
index ef199889a..342728b6d 100644
--- a/apps/www/registry/default/example/MenubarDemo.vue
+++ b/apps/www/src/registry/default/example/MenubarDemo.vue
@@ -13,7 +13,7 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from '@/lib/registry/default/ui/menubar'
+} from '@/registry/default/ui/menubar'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/NavigationMenuDemo.vue b/apps/www/src/registry/default/example/NavigationMenuDemo.vue
similarity index 99%
rename from apps/www/registry/default/example/NavigationMenuDemo.vue
rename to apps/www/src/registry/default/example/NavigationMenuDemo.vue
index 921c1b5fa..126d2132d 100644
--- a/apps/www/registry/default/example/NavigationMenuDemo.vue
+++ b/apps/www/src/registry/default/example/NavigationMenuDemo.vue
@@ -7,7 +7,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from '@/lib/registry/default/ui/navigation-menu'
+} from '@/registry/default/ui/navigation-menu'
 
 const components: { title: string, href: string, description: string }[] = [
   {
diff --git a/apps/www/registry/default/example/NumberFieldCurrency.vue b/apps/www/src/registry/default/example/NumberFieldCurrency.vue
similarity index 84%
rename from apps/www/registry/default/example/NumberFieldCurrency.vue
rename to apps/www/src/registry/default/example/NumberFieldCurrency.vue
index 4b9ee2b81..a832af5bf 100644
--- a/apps/www/registry/default/example/NumberFieldCurrency.vue
+++ b/apps/www/src/registry/default/example/NumberFieldCurrency.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
+} from '@/registry/default/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/NumberFieldDecimal.vue b/apps/www/src/registry/default/example/NumberFieldDecimal.vue
similarity index 83%
rename from apps/www/registry/default/example/NumberFieldDecimal.vue
rename to apps/www/src/registry/default/example/NumberFieldDecimal.vue
index 5821a301d..302512fd8 100644
--- a/apps/www/registry/default/example/NumberFieldDecimal.vue
+++ b/apps/www/src/registry/default/example/NumberFieldDecimal.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
+} from '@/registry/default/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/NumberFieldDemo.vue b/apps/www/src/registry/default/example/NumberFieldDemo.vue
similarity index 80%
rename from apps/www/registry/default/example/NumberFieldDemo.vue
rename to apps/www/src/registry/default/example/NumberFieldDemo.vue
index fbf6eded9..62a24d68d 100644
--- a/apps/www/registry/default/example/NumberFieldDemo.vue
+++ b/apps/www/src/registry/default/example/NumberFieldDemo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
+} from '@/registry/default/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/NumberFieldDisabled.vue b/apps/www/src/registry/default/example/NumberFieldDisabled.vue
similarity index 80%
rename from apps/www/registry/default/example/NumberFieldDisabled.vue
rename to apps/www/src/registry/default/example/NumberFieldDisabled.vue
index f453d2f2f..660d15e34 100644
--- a/apps/www/registry/default/example/NumberFieldDisabled.vue
+++ b/apps/www/src/registry/default/example/NumberFieldDisabled.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
+} from '@/registry/default/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/NumberFieldForm.vue b/apps/www/src/registry/default/example/NumberFieldForm.vue
similarity index 91%
rename from apps/www/registry/default/example/NumberFieldForm.vue
rename to apps/www/src/registry/default/example/NumberFieldForm.vue
index 2ae952108..a1f13af65 100644
--- a/apps/www/registry/default/example/NumberFieldForm.vue
+++ b/apps/www/src/registry/default/example/NumberFieldForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,15 +7,15 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/number-field'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/NumberFieldPercentage.vue b/apps/www/src/registry/default/example/NumberFieldPercentage.vue
similarity index 82%
rename from apps/www/registry/default/example/NumberFieldPercentage.vue
rename to apps/www/src/registry/default/example/NumberFieldPercentage.vue
index a92bab908..c40f0ed31 100644
--- a/apps/www/registry/default/example/NumberFieldPercentage.vue
+++ b/apps/www/src/registry/default/example/NumberFieldPercentage.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/default/ui/number-field'
+} from '@/registry/default/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/PaginationDemo.vue b/apps/www/src/registry/default/example/PaginationDemo.vue
similarity index 91%
rename from apps/www/registry/default/example/PaginationDemo.vue
rename to apps/www/src/registry/default/example/PaginationDemo.vue
index 327a12807..ef33eaf7c 100644
--- a/apps/www/registry/default/example/PaginationDemo.vue
+++ b/apps/www/src/registry/default/example/PaginationDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   Button,
-} from '@/lib/registry/default/ui/button'
+} from '@/registry/default/ui/button'
 
 import {
   Pagination,
@@ -12,7 +12,7 @@ import {
   PaginationListItem,
   PaginationNext,
   PaginationPrev,
-} from '@/lib/registry/default/ui/pagination'
+} from '@/registry/default/ui/pagination'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/PinInputControlled.vue b/apps/www/src/registry/default/example/PinInputControlled.vue
similarity index 92%
rename from apps/www/registry/default/example/PinInputControlled.vue
rename to apps/www/src/registry/default/example/PinInputControlled.vue
index 8a74b97dd..70b607142 100644
--- a/apps/www/registry/default/example/PinInputControlled.vue
+++ b/apps/www/src/registry/default/example/PinInputControlled.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
+} from '@/registry/default/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>(['1', '2', '3'])
diff --git a/apps/www/registry/default/example/PinInputDemo.vue b/apps/www/src/registry/default/example/PinInputDemo.vue
similarity index 92%
rename from apps/www/registry/default/example/PinInputDemo.vue
rename to apps/www/src/registry/default/example/PinInputDemo.vue
index 4bc8359db..241259498 100644
--- a/apps/www/registry/default/example/PinInputDemo.vue
+++ b/apps/www/src/registry/default/example/PinInputDemo.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
+} from '@/registry/default/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/default/example/PinInputDisabled.vue b/apps/www/src/registry/default/example/PinInputDisabled.vue
similarity index 91%
rename from apps/www/registry/default/example/PinInputDisabled.vue
rename to apps/www/src/registry/default/example/PinInputDisabled.vue
index 2ab8ca71b..3e09ff3ab 100644
--- a/apps/www/registry/default/example/PinInputDisabled.vue
+++ b/apps/www/src/registry/default/example/PinInputDisabled.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
+} from '@/registry/default/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/default/example/PinInputFormDemo.vue b/apps/www/src/registry/default/example/PinInputFormDemo.vue
similarity index 91%
rename from apps/www/registry/default/example/PinInputFormDemo.vue
rename to apps/www/src/registry/default/example/PinInputFormDemo.vue
index 09eddd51e..64044fcdd 100644
--- a/apps/www/registry/default/example/PinInputFormDemo.vue
+++ b/apps/www/src/registry/default/example/PinInputFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,13 +7,13 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/pin-input'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/default/example/PinInputSeparatorDemo.vue b/apps/www/src/registry/default/example/PinInputSeparatorDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/PinInputSeparatorDemo.vue
rename to apps/www/src/registry/default/example/PinInputSeparatorDemo.vue
index 370e9d794..4ab1e9bd8 100644
--- a/apps/www/registry/default/example/PinInputSeparatorDemo.vue
+++ b/apps/www/src/registry/default/example/PinInputSeparatorDemo.vue
@@ -4,7 +4,7 @@ import {
   PinInputGroup,
   PinInputInput,
   PinInputSeparator,
-} from '@/lib/registry/default/ui/pin-input'
+} from '@/registry/default/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/default/example/PopoverDemo.vue b/apps/www/src/registry/default/example/PopoverDemo.vue
similarity index 89%
rename from apps/www/registry/default/example/PopoverDemo.vue
rename to apps/www/src/registry/default/example/PopoverDemo.vue
index b79ba8d62..e95913174 100644
--- a/apps/www/registry/default/example/PopoverDemo.vue
+++ b/apps/www/src/registry/default/example/PopoverDemo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/registry/default/ui/popover'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ProgressDemo.vue b/apps/www/src/registry/default/example/ProgressDemo.vue
similarity index 83%
rename from apps/www/registry/default/example/ProgressDemo.vue
rename to apps/www/src/registry/default/example/ProgressDemo.vue
index f93e06d2f..2a785f3ae 100644
--- a/apps/www/registry/default/example/ProgressDemo.vue
+++ b/apps/www/src/registry/default/example/ProgressDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Progress } from '@/lib/registry/default/ui/progress'
+import { Progress } from '@/registry/default/ui/progress'
 import { ref, watchEffect } from 'vue'
 
 const progress = ref(13)
diff --git a/apps/www/registry/default/example/RadioGroupDemo.vue b/apps/www/src/registry/default/example/RadioGroupDemo.vue
similarity index 80%
rename from apps/www/registry/default/example/RadioGroupDemo.vue
rename to apps/www/src/registry/default/example/RadioGroupDemo.vue
index a6da7a6f8..7e39130e9 100644
--- a/apps/www/registry/default/example/RadioGroupDemo.vue
+++ b/apps/www/src/registry/default/example/RadioGroupDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+import { Label } from '@/registry/default/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/RadioGroupForm.vue b/apps/www/src/registry/default/example/RadioGroupForm.vue
similarity index 90%
rename from apps/www/registry/default/example/RadioGroupForm.vue
rename to apps/www/src/registry/default/example/RadioGroupForm.vue
index e871abf70..835404bc0 100644
--- a/apps/www/registry/default/example/RadioGroupForm.vue
+++ b/apps/www/src/registry/default/example/RadioGroupForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/RangeCalendarDemo.vue b/apps/www/src/registry/default/example/RangeCalendarDemo.vue
similarity index 84%
rename from apps/www/registry/default/example/RangeCalendarDemo.vue
rename to apps/www/src/registry/default/example/RangeCalendarDemo.vue
index 95a46f26e..1dc570eb0 100644
--- a/apps/www/registry/default/example/RangeCalendarDemo.vue
+++ b/apps/www/src/registry/default/example/RangeCalendarDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DateRange } from 'reka-ui'
-import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
+import { RangeCalendar } from '@/registry/default/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/ResizableDemo.vue b/apps/www/src/registry/default/example/ResizableDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/ResizableDemo.vue
rename to apps/www/src/registry/default/example/ResizableDemo.vue
index d9cbcca6a..e10e536db 100644
--- a/apps/www/registry/default/example/ResizableDemo.vue
+++ b/apps/www/src/registry/default/example/ResizableDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/default/ui/resizable'
+} from '@/registry/default/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ResizableHandleDemo.vue b/apps/www/src/registry/default/example/ResizableHandleDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/ResizableHandleDemo.vue
rename to apps/www/src/registry/default/example/ResizableHandleDemo.vue
index 26d0fe39c..b6f86ea79 100644
--- a/apps/www/registry/default/example/ResizableHandleDemo.vue
+++ b/apps/www/src/registry/default/example/ResizableHandleDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/default/ui/resizable'
+} from '@/registry/default/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ResizableVerticalDemo.vue b/apps/www/src/registry/default/example/ResizableVerticalDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/ResizableVerticalDemo.vue
rename to apps/www/src/registry/default/example/ResizableVerticalDemo.vue
index 04a3adfb1..3c5686c22 100644
--- a/apps/www/registry/default/example/ResizableVerticalDemo.vue
+++ b/apps/www/src/registry/default/example/ResizableVerticalDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/default/ui/resizable'
+} from '@/registry/default/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ScrollAreaDemo.vue b/apps/www/src/registry/default/example/ScrollAreaDemo.vue
similarity index 78%
rename from apps/www/registry/default/example/ScrollAreaDemo.vue
rename to apps/www/src/registry/default/example/ScrollAreaDemo.vue
index e32a2a6e1..f791a83c8 100644
--- a/apps/www/registry/default/example/ScrollAreaDemo.vue
+++ b/apps/www/src/registry/default/example/ScrollAreaDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Separator } from '@/lib/registry/default/ui/separator'
+import { ScrollArea } from '@/registry/default/ui/scroll-area'
+import { Separator } from '@/registry/default/ui/separator'
 
 const tags = Array.from({ length: 50 }).map(
   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
diff --git a/apps/www/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/registry/default/example/ScrollAreaHorizontalDemo.vue
similarity index 94%
rename from apps/www/registry/default/example/ScrollAreaHorizontalDemo.vue
rename to apps/www/src/registry/default/example/ScrollAreaHorizontalDemo.vue
index d687c9a0c..ead315113 100644
--- a/apps/www/registry/default/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/registry/default/example/ScrollAreaHorizontalDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
+import { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'
 
 interface Artwork {
   id: string
diff --git a/apps/www/registry/default/example/SelectDemo.vue b/apps/www/src/registry/default/example/SelectDemo.vue
similarity index 95%
rename from apps/www/registry/default/example/SelectDemo.vue
rename to apps/www/src/registry/default/example/SelectDemo.vue
index fe584f4a8..99b6a33ea 100644
--- a/apps/www/registry/default/example/SelectDemo.vue
+++ b/apps/www/src/registry/default/example/SelectDemo.vue
@@ -7,7 +7,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/registry/default/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SelectForm.vue b/apps/www/src/registry/default/example/SelectForm.vue
similarity index 91%
rename from apps/www/registry/default/example/SelectForm.vue
rename to apps/www/src/registry/default/example/SelectForm.vue
index 5c9981460..814f09050 100644
--- a/apps/www/registry/default/example/SelectForm.vue
+++ b/apps/www/src/registry/default/example/SelectForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,7 +7,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
 import {
   Select,
   SelectContent,
@@ -15,8 +15,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/select'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/SelectScrollable.vue b/apps/www/src/registry/default/example/SelectScrollable.vue
similarity index 98%
rename from apps/www/registry/default/example/SelectScrollable.vue
rename to apps/www/src/registry/default/example/SelectScrollable.vue
index e16e0b64f..2ca387aab 100644
--- a/apps/www/registry/default/example/SelectScrollable.vue
+++ b/apps/www/src/registry/default/example/SelectScrollable.vue
@@ -7,7 +7,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/registry/default/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SeparatorDemo.vue b/apps/www/src/registry/default/example/SeparatorDemo.vue
similarity index 89%
rename from apps/www/registry/default/example/SeparatorDemo.vue
rename to apps/www/src/registry/default/example/SeparatorDemo.vue
index c16acdba1..387c3787e 100644
--- a/apps/www/registry/default/example/SeparatorDemo.vue
+++ b/apps/www/src/registry/default/example/SeparatorDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
+import { Separator } from '@/registry/default/ui/separator'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SheetDemo.vue b/apps/www/src/registry/default/example/SheetDemo.vue
similarity index 85%
rename from apps/www/registry/default/example/SheetDemo.vue
rename to apps/www/src/registry/default/example/SheetDemo.vue
index d36de84d8..f65f30009 100644
--- a/apps/www/registry/default/example/SheetDemo.vue
+++ b/apps/www/src/registry/default/example/SheetDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@/lib/registry/default/ui/sheet'
+} from '@/registry/default/ui/sheet'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SheetSideDemo.vue b/apps/www/src/registry/default/example/SheetSideDemo.vue
similarity index 87%
rename from apps/www/registry/default/example/SheetSideDemo.vue
rename to apps/www/src/registry/default/example/SheetSideDemo.vue
index f82cd9993..cd79df694 100644
--- a/apps/www/registry/default/example/SheetSideDemo.vue
+++ b/apps/www/src/registry/default/example/SheetSideDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/registry/default/ui/button'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@/lib/registry/default/ui/sheet'
+} from '@/registry/default/ui/sheet'
 import { ref } from 'vue'
 
 const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
diff --git a/apps/www/registry/default/example/SkeletonCard.vue b/apps/www/src/registry/default/example/SkeletonCard.vue
similarity index 82%
rename from apps/www/registry/default/example/SkeletonCard.vue
rename to apps/www/src/registry/default/example/SkeletonCard.vue
index a3a473ad4..d73c77faa 100644
--- a/apps/www/registry/default/example/SkeletonCard.vue
+++ b/apps/www/src/registry/default/example/SkeletonCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Skeleton } from '@/lib/registry/default/ui/skeleton'
+import { Skeleton } from '@/registry/default/ui/skeleton'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SkeletonDemo.vue b/apps/www/src/registry/default/example/SkeletonDemo.vue
similarity index 81%
rename from apps/www/registry/default/example/SkeletonDemo.vue
rename to apps/www/src/registry/default/example/SkeletonDemo.vue
index 33f2beec2..2eeea993d 100644
--- a/apps/www/registry/default/example/SkeletonDemo.vue
+++ b/apps/www/src/registry/default/example/SkeletonDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton } from '@/lib/registry/default/ui/skeleton'
+import { Skeleton } from '@/registry/default/ui/skeleton'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SliderDemo.vue b/apps/www/src/registry/default/example/SliderDemo.vue
similarity index 81%
rename from apps/www/registry/default/example/SliderDemo.vue
rename to apps/www/src/registry/default/example/SliderDemo.vue
index 5c02774b9..e4184c4a8 100644
--- a/apps/www/registry/default/example/SliderDemo.vue
+++ b/apps/www/src/registry/default/example/SliderDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Slider } from '@/lib/registry/default/ui/slider'
 import { cn } from '@/lib/utils'
+import { Slider } from '@/registry/default/ui/slider'
 import { ref } from 'vue'
 
 const modelValue = ref([50])
diff --git a/apps/www/registry/default/example/SliderForm.vue b/apps/www/src/registry/default/example/SliderForm.vue
similarity index 87%
rename from apps/www/registry/default/example/SliderForm.vue
rename to apps/www/src/registry/default/example/SliderForm.vue
index 43720165a..40c981182 100644
--- a/apps/www/registry/default/example/SliderForm.vue
+++ b/apps/www/src/registry/default/example/SliderForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Slider } from '@/lib/registry/default/ui/slider'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { Slider } from '@/registry/default/ui/slider'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/src/registry/default/example/SonnerDemo.vue b/apps/www/src/registry/default/example/SonnerDemo.vue
new file mode 100644
index 000000000..a604fe5eb
--- /dev/null
+++ b/apps/www/src/registry/default/example/SonnerDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+import { toast } from 'vue-sonner'
+</script>
+
+<template>
+  <Button
+    variant="outline"
+    @click="
+      () => {
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        });
+      }
+    "
+  >
+    Add to calendar
+  </Button>
+</template>
diff --git a/apps/www/registry/default/example/SonnerWithDialog.vue b/apps/www/src/registry/default/example/SonnerWithDialog.vue
similarity index 92%
rename from apps/www/registry/default/example/SonnerWithDialog.vue
rename to apps/www/src/registry/default/example/SonnerWithDialog.vue
index ebef1d4d9..20e928e40 100644
--- a/apps/www/registry/default/example/SonnerWithDialog.vue
+++ b/apps/www/src/registry/default/example/SonnerWithDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/registry/default/ui/dialog'
 import { toast } from 'vue-sonner'
 </script>
 
diff --git a/apps/www/registry/default/example/StepperDemo.vue b/apps/www/src/registry/default/example/StepperDemo.vue
similarity index 93%
rename from apps/www/registry/default/example/StepperDemo.vue
rename to apps/www/src/registry/default/example/StepperDemo.vue
index 4c020c179..70e325d6e 100644
--- a/apps/www/registry/default/example/StepperDemo.vue
+++ b/apps/www/src/registry/default/example/StepperDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'
 
 import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
 
diff --git a/apps/www/registry/default/example/StepperForm.vue b/apps/www/src/registry/default/example/StepperForm.vue
similarity index 95%
rename from apps/www/registry/default/example/StepperForm.vue
rename to apps/www/src/registry/default/example/StepperForm.vue
index f298ba289..5b406ab48 100644
--- a/apps/www/registry/default/example/StepperForm.vue
+++ b/apps/www/src/registry/default/example/StepperForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
+import { Button } from '@/registry/default/ui/button'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
 import {
   Select,
   SelectContent,
@@ -9,9 +9,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/select'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Check, Circle, Dot } from 'lucide-vue-next'
 import { h, ref } from 'vue'
diff --git a/apps/www/registry/default/example/StepperHorizental.vue b/apps/www/src/registry/default/example/StepperHorizental.vue
similarity index 93%
rename from apps/www/registry/default/example/StepperHorizental.vue
rename to apps/www/src/registry/default/example/StepperHorizental.vue
index 27afe0da9..6852194be 100644
--- a/apps/www/registry/default/example/StepperHorizental.vue
+++ b/apps/www/src/registry/default/example/StepperHorizental.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'
 import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
diff --git a/apps/www/registry/default/example/StepperVertical.vue b/apps/www/src/registry/default/example/StepperVertical.vue
similarity index 94%
rename from apps/www/registry/default/example/StepperVertical.vue
rename to apps/www/src/registry/default/example/StepperVertical.vue
index 3f119568b..cdb7e512e 100644
--- a/apps/www/registry/default/example/StepperVertical.vue
+++ b/apps/www/src/registry/default/example/StepperVertical.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/default/ui/stepper'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'
 import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
diff --git a/apps/www/registry/default/example/SwitchDemo.vue b/apps/www/src/registry/default/example/SwitchDemo.vue
similarity index 63%
rename from apps/www/registry/default/example/SwitchDemo.vue
rename to apps/www/src/registry/default/example/SwitchDemo.vue
index b97c506a9..a63903a6f 100644
--- a/apps/www/registry/default/example/SwitchDemo.vue
+++ b/apps/www/src/registry/default/example/SwitchDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
-import { Switch } from '@/lib/registry/default/ui/switch'
+import { Label } from '@/registry/default/ui/label'
+import { Switch } from '@/registry/default/ui/switch'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/SwitchForm.vue b/apps/www/src/registry/default/example/SwitchForm.vue
similarity index 92%
rename from apps/www/registry/default/example/SwitchForm.vue
rename to apps/www/src/registry/default/example/SwitchForm.vue
index 6ab9a140c..ac967fbc2 100644
--- a/apps/www/registry/default/example/SwitchForm.vue
+++ b/apps/www/src/registry/default/example/SwitchForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
-} from '@/lib/registry/default/ui/form'
-import { Switch } from '@/lib/registry/default/ui/switch'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { Switch } from '@/registry/default/ui/switch'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/TableDemo.vue b/apps/www/src/registry/default/example/TableDemo.vue
similarity index 97%
rename from apps/www/registry/default/example/TableDemo.vue
rename to apps/www/src/registry/default/example/TableDemo.vue
index b2510d0d1..c326425da 100644
--- a/apps/www/registry/default/example/TableDemo.vue
+++ b/apps/www/src/registry/default/example/TableDemo.vue
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
+} from '@/registry/default/ui/table'
 
 const invoices = [
   {
diff --git a/apps/www/registry/default/example/TabsDemo.vue b/apps/www/src/registry/default/example/TabsDemo.vue
similarity index 88%
rename from apps/www/registry/default/example/TabsDemo.vue
rename to apps/www/src/registry/default/example/TabsDemo.vue
index 44bef5efc..a8cff63e7 100644
--- a/apps/www/registry/default/example/TabsDemo.vue
+++ b/apps/www/src/registry/default/example/TabsDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,15 +7,15 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/default/ui/tabs'
+} from '@/registry/default/ui/tabs'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TabsVerticalDemo.vue b/apps/www/src/registry/default/example/TabsVerticalDemo.vue
similarity index 88%
rename from apps/www/registry/default/example/TabsVerticalDemo.vue
rename to apps/www/src/registry/default/example/TabsVerticalDemo.vue
index d14629456..473562090 100644
--- a/apps/www/registry/default/example/TabsVerticalDemo.vue
+++ b/apps/www/src/registry/default/example/TabsVerticalDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,15 +7,15 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/default/ui/tabs'
+} from '@/registry/default/ui/tabs'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/registry/default/example/TagsInputComboboxDemo.vue
similarity index 96%
rename from apps/www/registry/default/example/TagsInputComboboxDemo.vue
rename to apps/www/src/registry/default/example/TagsInputComboboxDemo.vue
index ee1ccb9e7..259814d17 100644
--- a/apps/www/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/registry/default/example/TagsInputComboboxDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'
 import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/default/example/TagsInputDemo.vue b/apps/www/src/registry/default/example/TagsInputDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/TagsInputDemo.vue
rename to apps/www/src/registry/default/example/TagsInputDemo.vue
index 12e482f7b..4273e18d2 100644
--- a/apps/www/registry/default/example/TagsInputDemo.vue
+++ b/apps/www/src/registry/default/example/TagsInputDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'
 import { ref } from 'vue'
 
 const modelValue = ref(['Apple', 'Banana'])
diff --git a/apps/www/registry/default/example/TagsInputFormDemo.vue b/apps/www/src/registry/default/example/TagsInputFormDemo.vue
similarity index 87%
rename from apps/www/registry/default/example/TagsInputFormDemo.vue
rename to apps/www/src/registry/default/example/TagsInputFormDemo.vue
index 276e2cc47..902ef53d8 100644
--- a/apps/www/registry/default/example/TagsInputFormDemo.vue
+++ b/apps/www/src/registry/default/example/TagsInputFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'
+import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/default/example/TextareaDemo.vue b/apps/www/src/registry/default/example/TextareaDemo.vue
similarity index 64%
rename from apps/www/registry/default/example/TextareaDemo.vue
rename to apps/www/src/registry/default/example/TextareaDemo.vue
index ba55c8458..24f186e88 100644
--- a/apps/www/registry/default/example/TextareaDemo.vue
+++ b/apps/www/src/registry/default/example/TextareaDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Textarea } from '@/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TextareaDisabled.vue b/apps/www/src/registry/default/example/TextareaDisabled.vue
similarity index 66%
rename from apps/www/registry/default/example/TextareaDisabled.vue
rename to apps/www/src/registry/default/example/TextareaDisabled.vue
index 069380b90..dde9810f5 100644
--- a/apps/www/registry/default/example/TextareaDisabled.vue
+++ b/apps/www/src/registry/default/example/TextareaDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Textarea } from '@/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TextareaForm.vue b/apps/www/src/registry/default/example/TextareaForm.vue
similarity index 87%
rename from apps/www/registry/default/example/TextareaForm.vue
rename to apps/www/src/registry/default/example/TextareaForm.vue
index a5247552e..9cef16d98 100644
--- a/apps/www/registry/default/example/TextareaForm.vue
+++ b/apps/www/src/registry/default/example/TextareaForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
-import { toast } from '@/lib/registry/default/ui/toast'
+} from '@/registry/default/ui/form'
+import { Textarea } from '@/registry/default/ui/textarea'
+import { toast } from '@/registry/default/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/TextareaWithButton.vue b/apps/www/src/registry/default/example/TextareaWithButton.vue
similarity index 61%
rename from apps/www/registry/default/example/TextareaWithButton.vue
rename to apps/www/src/registry/default/example/TextareaWithButton.vue
index 78b57f889..03e3f8bc5 100644
--- a/apps/www/registry/default/example/TextareaWithButton.vue
+++ b/apps/www/src/registry/default/example/TextareaWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Button } from '@/registry/default/ui/button'
+import { Textarea } from '@/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TextareaWithLabel.vue b/apps/www/src/registry/default/example/TextareaWithLabel.vue
similarity index 64%
rename from apps/www/registry/default/example/TextareaWithLabel.vue
rename to apps/www/src/registry/default/example/TextareaWithLabel.vue
index 1cfe925e0..03e4fda49 100644
--- a/apps/www/registry/default/example/TextareaWithLabel.vue
+++ b/apps/www/src/registry/default/example/TextareaWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Label } from '@/registry/default/ui/label'
+import { Textarea } from '@/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TextareaWithText.vue b/apps/www/src/registry/default/example/TextareaWithText.vue
similarity index 73%
rename from apps/www/registry/default/example/TextareaWithText.vue
rename to apps/www/src/registry/default/example/TextareaWithText.vue
index 3ea03b20f..28dac8bb9 100644
--- a/apps/www/registry/default/example/TextareaWithText.vue
+++ b/apps/www/src/registry/default/example/TextareaWithText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Label } from '@/registry/default/ui/label'
+import { Textarea } from '@/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/ToastDemo.vue b/apps/www/src/registry/default/example/ToastDemo.vue
similarity index 70%
rename from apps/www/registry/default/example/ToastDemo.vue
rename to apps/www/src/registry/default/example/ToastDemo.vue
index 273038edb..b2842354a 100644
--- a/apps/www/registry/default/example/ToastDemo.vue
+++ b/apps/www/src/registry/default/example/ToastDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { Button } from '@/registry/default/ui/button'
+import { useToast } from '@/registry/default/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/default/example/ToastDestructive.vue b/apps/www/src/registry/default/example/ToastDestructive.vue
similarity index 72%
rename from apps/www/registry/default/example/ToastDestructive.vue
rename to apps/www/src/registry/default/example/ToastDestructive.vue
index c6e9bd2a6..e8d109c8b 100644
--- a/apps/www/registry/default/example/ToastDestructive.vue
+++ b/apps/www/src/registry/default/example/ToastDestructive.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { ToastAction } from '@/lib/registry/default/ui/toast'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { Button } from '@/registry/default/ui/button'
+import { ToastAction } from '@/registry/default/ui/toast'
+import { useToast } from '@/registry/default/ui/toast/use-toast'
 import { h } from 'vue'
 
 const { toast } = useToast()
diff --git a/apps/www/registry/default/example/ToastSimple.vue b/apps/www/src/registry/default/example/ToastSimple.vue
similarity index 66%
rename from apps/www/registry/default/example/ToastSimple.vue
rename to apps/www/src/registry/default/example/ToastSimple.vue
index 2310017e6..4113b0cae 100644
--- a/apps/www/registry/default/example/ToastSimple.vue
+++ b/apps/www/src/registry/default/example/ToastSimple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { Button } from '@/registry/default/ui/button'
+import { useToast } from '@/registry/default/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/default/example/ToastWithAction.vue b/apps/www/src/registry/default/example/ToastWithAction.vue
similarity index 70%
rename from apps/www/registry/default/example/ToastWithAction.vue
rename to apps/www/src/registry/default/example/ToastWithAction.vue
index 43cbf9b31..db19477e2 100644
--- a/apps/www/registry/default/example/ToastWithAction.vue
+++ b/apps/www/src/registry/default/example/ToastWithAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { ToastAction } from '@/lib/registry/default/ui/toast'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { Button } from '@/registry/default/ui/button'
+import { ToastAction } from '@/registry/default/ui/toast'
+import { useToast } from '@/registry/default/ui/toast/use-toast'
 import { h } from 'vue'
 
 const { toast } = useToast()
diff --git a/apps/www/registry/default/example/ToastWithTitle.vue b/apps/www/src/registry/default/example/ToastWithTitle.vue
similarity index 70%
rename from apps/www/registry/default/example/ToastWithTitle.vue
rename to apps/www/src/registry/default/example/ToastWithTitle.vue
index 800bf9e3d..3e52975f0 100644
--- a/apps/www/registry/default/example/ToastWithTitle.vue
+++ b/apps/www/src/registry/default/example/ToastWithTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { Button } from '@/registry/default/ui/button'
+import { useToast } from '@/registry/default/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/default/example/ToggleDemo.vue b/apps/www/src/registry/default/example/ToggleDemo.vue
similarity index 75%
rename from apps/www/registry/default/example/ToggleDemo.vue
rename to apps/www/src/registry/default/example/ToggleDemo.vue
index 189576e75..9d47a794a 100644
--- a/apps/www/registry/default/example/ToggleDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Bold } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleDisabledDemo.vue b/apps/www/src/registry/default/example/ToggleDisabledDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/ToggleDisabledDemo.vue
rename to apps/www/src/registry/default/example/ToggleDisabledDemo.vue
index 503127095..9b66ca05c 100644
--- a/apps/www/registry/default/example/ToggleDisabledDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleDisabledDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupDemo.vue b/apps/www/src/registry/default/example/ToggleGroupDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/ToggleGroupDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupDemo.vue
index 78d66f010..831e611c2 100644
--- a/apps/www/registry/default/example/ToggleGroupDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupDisabledDemo.vue b/apps/www/src/registry/default/example/ToggleGroupDisabledDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/ToggleGroupDisabledDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupDisabledDemo.vue
index b4605d4df..86e5715b2 100644
--- a/apps/www/registry/default/example/ToggleGroupDisabledDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupDisabledDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupLargeDemo.vue b/apps/www/src/registry/default/example/ToggleGroupLargeDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/ToggleGroupLargeDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupLargeDemo.vue
index 6ff3a3f18..bc9581f06 100644
--- a/apps/www/registry/default/example/ToggleGroupLargeDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupLargeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupOutlineDemo.vue b/apps/www/src/registry/default/example/ToggleGroupOutlineDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/ToggleGroupOutlineDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupOutlineDemo.vue
index 9eaf2150b..a60ffd3f7 100644
--- a/apps/www/registry/default/example/ToggleGroupOutlineDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupSingleDemo.vue b/apps/www/src/registry/default/example/ToggleGroupSingleDemo.vue
similarity index 85%
rename from apps/www/registry/default/example/ToggleGroupSingleDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupSingleDemo.vue
index 9dab3eec9..e8be6da2e 100644
--- a/apps/www/registry/default/example/ToggleGroupSingleDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupSingleDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleGroupSmallDemo.vue b/apps/www/src/registry/default/example/ToggleGroupSmallDemo.vue
similarity index 86%
rename from apps/www/registry/default/example/ToggleGroupSmallDemo.vue
rename to apps/www/src/registry/default/example/ToggleGroupSmallDemo.vue
index 8aede9da8..d9cab0141 100644
--- a/apps/www/registry/default/example/ToggleGroupSmallDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleGroupSmallDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'
 
 import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleItalicDemo.vue b/apps/www/src/registry/default/example/ToggleItalicDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/ToggleItalicDemo.vue
rename to apps/www/src/registry/default/example/ToggleItalicDemo.vue
index 06c24f997..c893c4cb6 100644
--- a/apps/www/registry/default/example/ToggleItalicDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleItalicDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Italic } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleItalicWithTextDemo.vue b/apps/www/src/registry/default/example/ToggleItalicWithTextDemo.vue
similarity index 77%
rename from apps/www/registry/default/example/ToggleItalicWithTextDemo.vue
rename to apps/www/src/registry/default/example/ToggleItalicWithTextDemo.vue
index 594b7af31..4af6f0ef1 100644
--- a/apps/www/registry/default/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleItalicWithTextDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Italic } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleLargeDemo.vue b/apps/www/src/registry/default/example/ToggleLargeDemo.vue
similarity index 76%
rename from apps/www/registry/default/example/ToggleLargeDemo.vue
rename to apps/www/src/registry/default/example/ToggleLargeDemo.vue
index bd1ce68b6..871785e06 100644
--- a/apps/www/registry/default/example/ToggleLargeDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleLargeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Italic } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/ToggleSmallDemo.vue b/apps/www/src/registry/default/example/ToggleSmallDemo.vue
similarity index 76%
rename from apps/www/registry/default/example/ToggleSmallDemo.vue
rename to apps/www/src/registry/default/example/ToggleSmallDemo.vue
index 3b2114ddc..f79c2a7bb 100644
--- a/apps/www/registry/default/example/ToggleSmallDemo.vue
+++ b/apps/www/src/registry/default/example/ToggleSmallDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/registry/default/ui/toggle'
 
 import { Italic } from 'lucide-vue-next'
 </script>
diff --git a/apps/www/registry/default/example/TooltipDemo.vue b/apps/www/src/registry/default/example/TooltipDemo.vue
similarity index 80%
rename from apps/www/registry/default/example/TooltipDemo.vue
rename to apps/www/src/registry/default/example/TooltipDemo.vue
index cc961a963..2c20d397e 100644
--- a/apps/www/registry/default/example/TooltipDemo.vue
+++ b/apps/www/src/registry/default/example/TooltipDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/registry/default/ui/tooltip'
 </script>
 
 <template>
diff --git a/apps/www/registry/default/example/TypographyBlockquote.vue b/apps/www/src/registry/default/example/TypographyBlockquote.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyBlockquote.vue
rename to apps/www/src/registry/default/example/TypographyBlockquote.vue
diff --git a/apps/www/registry/default/example/TypographyDemo.vue b/apps/www/src/registry/default/example/TypographyDemo.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyDemo.vue
rename to apps/www/src/registry/default/example/TypographyDemo.vue
diff --git a/apps/www/registry/default/example/TypographyH1.vue b/apps/www/src/registry/default/example/TypographyH1.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyH1.vue
rename to apps/www/src/registry/default/example/TypographyH1.vue
diff --git a/apps/www/registry/default/example/TypographyH2.vue b/apps/www/src/registry/default/example/TypographyH2.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyH2.vue
rename to apps/www/src/registry/default/example/TypographyH2.vue
diff --git a/apps/www/registry/default/example/TypographyH3.vue b/apps/www/src/registry/default/example/TypographyH3.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyH3.vue
rename to apps/www/src/registry/default/example/TypographyH3.vue
diff --git a/apps/www/registry/default/example/TypographyH4.vue b/apps/www/src/registry/default/example/TypographyH4.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyH4.vue
rename to apps/www/src/registry/default/example/TypographyH4.vue
diff --git a/apps/www/registry/default/example/TypographyInlineCode.vue b/apps/www/src/registry/default/example/TypographyInlineCode.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyInlineCode.vue
rename to apps/www/src/registry/default/example/TypographyInlineCode.vue
diff --git a/apps/www/registry/default/example/TypographyLarge.vue b/apps/www/src/registry/default/example/TypographyLarge.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyLarge.vue
rename to apps/www/src/registry/default/example/TypographyLarge.vue
diff --git a/apps/www/registry/default/example/TypographyLead.vue b/apps/www/src/registry/default/example/TypographyLead.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyLead.vue
rename to apps/www/src/registry/default/example/TypographyLead.vue
diff --git a/apps/www/registry/default/example/TypographyList.vue b/apps/www/src/registry/default/example/TypographyList.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyList.vue
rename to apps/www/src/registry/default/example/TypographyList.vue
diff --git a/apps/www/registry/default/example/TypographyMuted.vue b/apps/www/src/registry/default/example/TypographyMuted.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyMuted.vue
rename to apps/www/src/registry/default/example/TypographyMuted.vue
diff --git a/apps/www/registry/default/example/TypographyP.vue b/apps/www/src/registry/default/example/TypographyP.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyP.vue
rename to apps/www/src/registry/default/example/TypographyP.vue
diff --git a/apps/www/registry/default/example/TypographySmall.vue b/apps/www/src/registry/default/example/TypographySmall.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographySmall.vue
rename to apps/www/src/registry/default/example/TypographySmall.vue
diff --git a/apps/www/registry/default/example/TypographyTable.vue b/apps/www/src/registry/default/example/TypographyTable.vue
similarity index 100%
rename from apps/www/registry/default/example/TypographyTable.vue
rename to apps/www/src/registry/default/example/TypographyTable.vue
diff --git a/apps/www/registry/default/example/VCalendarDemo.vue b/apps/www/src/registry/default/example/VCalendarDemo.vue
similarity index 72%
rename from apps/www/registry/default/example/VCalendarDemo.vue
rename to apps/www/src/registry/default/example/VCalendarDemo.vue
index cddb3ceb2..93a3565c1 100644
--- a/apps/www/registry/default/example/VCalendarDemo.vue
+++ b/apps/www/src/registry/default/example/VCalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { ref } from 'vue'
 
 const date = ref(new Date())
diff --git a/apps/www/registry/default/example/VDatePickerDemo.vue b/apps/www/src/registry/default/example/VDatePickerDemo.vue
similarity index 82%
rename from apps/www/registry/default/example/VDatePickerDemo.vue
rename to apps/www/src/registry/default/example/VDatePickerDemo.vue
index a8ac22c2b..b7bf5c9af 100644
--- a/apps/www/registry/default/example/VDatePickerDemo.vue
+++ b/apps/www/src/registry/default/example/VDatePickerDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/default/example/VDatePickerForm.vue b/apps/www/src/registry/default/example/VDatePickerForm.vue
similarity index 88%
rename from apps/www/registry/default/example/VDatePickerForm.vue
rename to apps/www/src/registry/default/example/VDatePickerForm.vue
index 7dbfff248..b3b3d2df7 100644
--- a/apps/www/registry/default/example/VDatePickerForm.vue
+++ b/apps/www/src/registry/default/example/VDatePickerForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,15 +8,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/default/ui/form'
+} from '@/registry/default/ui/form'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-import { toast } from '@/lib/registry/default/ui/toast'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { toast } from '@/registry/default/ui/toast'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { format } from 'date-fns'
diff --git a/apps/www/registry/default/example/VDatePickerWithPresets.vue b/apps/www/src/registry/default/example/VDatePickerWithPresets.vue
similarity index 89%
rename from apps/www/registry/default/example/VDatePickerWithPresets.vue
rename to apps/www/src/registry/default/example/VDatePickerWithPresets.vue
index c0d92ed7b..da9ecb89e 100644
--- a/apps/www/registry/default/example/VDatePickerWithPresets.vue
+++ b/apps/www/src/registry/default/example/VDatePickerWithPresets.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
+} from '@/registry/default/ui/popover'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/select'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/default/example/VDatePickerWithRange.vue b/apps/www/src/registry/default/example/VDatePickerWithRange.vue
similarity index 88%
rename from apps/www/registry/default/example/VDatePickerWithRange.vue
rename to apps/www/src/registry/default/example/VDatePickerWithRange.vue
index 8d6b5df6a..490d84144 100644
--- a/apps/www/registry/default/example/VDatePickerWithRange.vue
+++ b/apps/www/src/registry/default/example/VDatePickerWithRange.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/default/example/VDateTimePickerDemo.vue b/apps/www/src/registry/default/example/VDateTimePickerDemo.vue
similarity index 83%
rename from apps/www/registry/default/example/VDateTimePickerDemo.vue
rename to apps/www/src/registry/default/example/VDateTimePickerDemo.vue
index c9c394a24..013bcda06 100644
--- a/apps/www/registry/default/example/VDateTimePickerDemo.vue
+++ b/apps/www/src/registry/default/example/VDateTimePickerDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/default/example/VRangePickerWithSlot.vue b/apps/www/src/registry/default/example/VRangePickerWithSlot.vue
similarity index 91%
rename from apps/www/registry/default/example/VRangePickerWithSlot.vue
rename to apps/www/src/registry/default/example/VRangePickerWithSlot.vue
index c0fe23258..1fa9bfbba 100644
--- a/apps/www/registry/default/example/VRangePickerWithSlot.vue
+++ b/apps/www/src/registry/default/example/VRangePickerWithSlot.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
-
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/popover'
+import { Calendar } from '@/registry/default/ui/v-calendar'
 import { addDays, format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/lib/utils.ts b/apps/www/src/registry/default/lib/utils.ts
similarity index 100%
rename from apps/www/registry/new-york/lib/utils.ts
rename to apps/www/src/registry/default/lib/utils.ts
diff --git a/apps/www/registry/default/ui/accordion/Accordion.vue b/apps/www/src/registry/default/ui/accordion/Accordion.vue
similarity index 100%
rename from apps/www/registry/default/ui/accordion/Accordion.vue
rename to apps/www/src/registry/default/ui/accordion/Accordion.vue
diff --git a/apps/www/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/registry/default/ui/accordion/AccordionContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/accordion/AccordionContent.vue
rename to apps/www/src/registry/default/ui/accordion/AccordionContent.vue
diff --git a/apps/www/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/registry/default/ui/accordion/AccordionItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/accordion/AccordionItem.vue
rename to apps/www/src/registry/default/ui/accordion/AccordionItem.vue
diff --git a/apps/www/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/src/registry/default/ui/accordion/AccordionTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/accordion/AccordionTrigger.vue
rename to apps/www/src/registry/default/ui/accordion/AccordionTrigger.vue
diff --git a/apps/www/registry/default/ui/accordion/index.ts b/apps/www/src/registry/default/ui/accordion/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/accordion/index.ts
rename to apps/www/src/registry/default/ui/accordion/index.ts
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialog.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialog.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialog.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogAction.vue
similarity index 89%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogAction.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogAction.vue
index 2946de46d..6c56cbe03 100644
--- a/apps/www/registry/default/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogCancel.vue
similarity index 90%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogCancel.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogCancel.vue
index 3bee5ff00..a304bfff0 100644
--- a/apps/www/registry/default/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogContent.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogContent.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogDescription.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogDescription.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogFooter.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogFooter.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogHeader.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogHeader.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogTitle.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogTitle.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/src/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
rename to apps/www/src/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
diff --git a/apps/www/registry/default/ui/alert-dialog/index.ts b/apps/www/src/registry/default/ui/alert-dialog/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/alert-dialog/index.ts
rename to apps/www/src/registry/default/ui/alert-dialog/index.ts
diff --git a/apps/www/registry/default/ui/alert/Alert.vue b/apps/www/src/registry/default/ui/alert/Alert.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert/Alert.vue
rename to apps/www/src/registry/default/ui/alert/Alert.vue
diff --git a/apps/www/registry/default/ui/alert/AlertDescription.vue b/apps/www/src/registry/default/ui/alert/AlertDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert/AlertDescription.vue
rename to apps/www/src/registry/default/ui/alert/AlertDescription.vue
diff --git a/apps/www/registry/default/ui/alert/AlertTitle.vue b/apps/www/src/registry/default/ui/alert/AlertTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/alert/AlertTitle.vue
rename to apps/www/src/registry/default/ui/alert/AlertTitle.vue
diff --git a/apps/www/registry/default/ui/alert/index.ts b/apps/www/src/registry/default/ui/alert/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/alert/index.ts
rename to apps/www/src/registry/default/ui/alert/index.ts
diff --git a/apps/www/registry/default/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/registry/default/ui/aspect-ratio/AspectRatio.vue
similarity index 100%
rename from apps/www/registry/default/ui/aspect-ratio/AspectRatio.vue
rename to apps/www/src/registry/default/ui/aspect-ratio/AspectRatio.vue
diff --git a/apps/www/registry/default/ui/aspect-ratio/index.ts b/apps/www/src/registry/default/ui/aspect-ratio/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/aspect-ratio/index.ts
rename to apps/www/src/registry/default/ui/aspect-ratio/index.ts
diff --git a/apps/www/registry/default/ui/auto-form/AutoForm.vue b/apps/www/src/registry/default/ui/auto-form/AutoForm.vue
similarity index 98%
rename from apps/www/registry/default/ui/auto-form/AutoForm.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoForm.vue
index d3d020a5d..10a7fe404 100644
--- a/apps/www/registry/default/ui/auto-form/AutoForm.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoForm.vue
@@ -2,7 +2,7 @@
 import type { FormContext, GenericObject } from 'vee-validate'
 import type { z, ZodAny } from 'zod'
 import type { Config, ConfigItem, Dependency, Shape } from './interface'
-import { Form } from '@/lib/registry/default/ui/form'
+import { Form } from '@/registry/default/ui/form'
 import { toTypedSchema } from '@vee-validate/zod'
 import { computed, toRefs } from 'vue'
 import AutoFormField from './AutoFormField.vue'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormField.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormField.vue
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/AutoFormField.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormField.vue
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldArray.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldArray.vue
similarity index 93%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldArray.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldArray.vue
index 3d3efceb0..4085f6e7c 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldArray.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldArray.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends z.ZodAny">
 import type { Config, ConfigItem } from './interface'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
-import { Button } from '@/lib/registry/default/ui/button'
-import { FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/default/ui/separator'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
+import { Button } from '@/registry/default/ui/button'
+import { FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Separator } from '@/registry/default/ui/separator'
 import { PlusIcon, TrashIcon } from 'lucide-vue-next'
 import { FieldArray, FieldContextKey, useField } from 'vee-validate'
 import { computed, provide } from 'vue'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
similarity index 88%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
index 8aeae7b4a..01d2a57f8 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Switch } from '@/lib/registry/default/ui/switch'
+import { Checkbox } from '@/registry/default/ui/checkbox'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Switch } from '@/registry/default/ui/switch'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldDate.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldDate.vue
similarity index 87%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldDate.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldDate.vue
index 161144dbb..327e05241 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldDate.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldDate.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Calendar } from '@/registry/default/ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
 
 import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { CalendarIcon } from 'lucide-vue-next'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldEnum.vue
similarity index 88%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldEnum.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldEnum.vue
index fc1a2d925..052ae202c 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Label } from '@/lib/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Label } from '@/registry/default/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldFile.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldFile.vue
similarity index 93%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldFile.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldFile.vue
index e8d19d40d..906e7b0df 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldFile.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldFile.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Button } from '@/lib/registry/default/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
+import { Button } from '@/registry/default/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
 import { TrashIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldInput.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldInput.vue
similarity index 87%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldInput.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldInput.vue
index 6e18433da..c0a67f64c 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldInput.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
+import { Textarea } from '@/registry/default/ui/textarea'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldNumber.vue
similarity index 89%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldNumber.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldNumber.vue
index b978ff25f..106599565 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldNumber.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldNumber.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Input } from '@/lib/registry/default/ui/input'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'
+import { Input } from '@/registry/default/ui/input'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormFieldObject.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldObject.vue
similarity index 96%
rename from apps/www/registry/default/ui/auto-form/AutoFormFieldObject.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormFieldObject.vue
index 963f11018..7bac35bca 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormFieldObject.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormFieldObject.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends ZodRawShape">
 import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
 import type { Config, ConfigItem, Shape } from './interface'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
-import { FormItem } from '@/lib/registry/default/ui/form'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
+import { FormItem } from '@/registry/default/ui/form'
 import { FieldContextKey, useField } from 'vee-validate'
 import { computed, provide } from 'vue'
 import AutoFormField from './AutoFormField.vue'
diff --git a/apps/www/registry/default/ui/auto-form/AutoFormLabel.vue b/apps/www/src/registry/default/ui/auto-form/AutoFormLabel.vue
similarity index 77%
rename from apps/www/registry/default/ui/auto-form/AutoFormLabel.vue
rename to apps/www/src/registry/default/ui/auto-form/AutoFormLabel.vue
index b82e9edb1..cddf48e80 100644
--- a/apps/www/registry/default/ui/auto-form/AutoFormLabel.vue
+++ b/apps/www/src/registry/default/ui/auto-form/AutoFormLabel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FormLabel } from '@/lib/registry/default/ui/form'
+import { FormLabel } from '@/registry/default/ui/form'
 
 defineProps<{
   required?: boolean
diff --git a/apps/www/registry/default/ui/auto-form/constant.ts b/apps/www/src/registry/default/ui/auto-form/constant.ts
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/constant.ts
rename to apps/www/src/registry/default/ui/auto-form/constant.ts
diff --git a/apps/www/registry/default/ui/auto-form/dependencies.ts b/apps/www/src/registry/default/ui/auto-form/dependencies.ts
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/dependencies.ts
rename to apps/www/src/registry/default/ui/auto-form/dependencies.ts
diff --git a/apps/www/registry/default/ui/auto-form/index.ts b/apps/www/src/registry/default/ui/auto-form/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/index.ts
rename to apps/www/src/registry/default/ui/auto-form/index.ts
diff --git a/apps/www/registry/default/ui/auto-form/interface.ts b/apps/www/src/registry/default/ui/auto-form/interface.ts
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/interface.ts
rename to apps/www/src/registry/default/ui/auto-form/interface.ts
diff --git a/apps/www/registry/default/ui/auto-form/utils.ts b/apps/www/src/registry/default/ui/auto-form/utils.ts
similarity index 100%
rename from apps/www/registry/default/ui/auto-form/utils.ts
rename to apps/www/src/registry/default/ui/auto-form/utils.ts
diff --git a/apps/www/registry/default/ui/avatar/Avatar.vue b/apps/www/src/registry/default/ui/avatar/Avatar.vue
similarity index 100%
rename from apps/www/registry/default/ui/avatar/Avatar.vue
rename to apps/www/src/registry/default/ui/avatar/Avatar.vue
diff --git a/apps/www/registry/default/ui/avatar/AvatarFallback.vue b/apps/www/src/registry/default/ui/avatar/AvatarFallback.vue
similarity index 100%
rename from apps/www/registry/default/ui/avatar/AvatarFallback.vue
rename to apps/www/src/registry/default/ui/avatar/AvatarFallback.vue
diff --git a/apps/www/registry/default/ui/avatar/AvatarImage.vue b/apps/www/src/registry/default/ui/avatar/AvatarImage.vue
similarity index 100%
rename from apps/www/registry/default/ui/avatar/AvatarImage.vue
rename to apps/www/src/registry/default/ui/avatar/AvatarImage.vue
diff --git a/apps/www/registry/default/ui/avatar/index.ts b/apps/www/src/registry/default/ui/avatar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/avatar/index.ts
rename to apps/www/src/registry/default/ui/avatar/index.ts
diff --git a/apps/www/registry/default/ui/badge/Badge.vue b/apps/www/src/registry/default/ui/badge/Badge.vue
similarity index 100%
rename from apps/www/registry/default/ui/badge/Badge.vue
rename to apps/www/src/registry/default/ui/badge/Badge.vue
diff --git a/apps/www/registry/default/ui/badge/index.ts b/apps/www/src/registry/default/ui/badge/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/badge/index.ts
rename to apps/www/src/registry/default/ui/badge/index.ts
diff --git a/apps/www/registry/default/ui/breadcrumb/Breadcrumb.vue b/apps/www/src/registry/default/ui/breadcrumb/Breadcrumb.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/Breadcrumb.vue
rename to apps/www/src/registry/default/ui/breadcrumb/Breadcrumb.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbItem.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbItem.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbLink.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbLink.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbLink.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbList.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbList.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbList.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbList.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbPage.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbPage.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbPage.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
rename to apps/www/src/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
diff --git a/apps/www/registry/default/ui/breadcrumb/index.ts b/apps/www/src/registry/default/ui/breadcrumb/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/breadcrumb/index.ts
rename to apps/www/src/registry/default/ui/breadcrumb/index.ts
diff --git a/apps/www/registry/default/ui/button/Button.vue b/apps/www/src/registry/default/ui/button/Button.vue
similarity index 100%
rename from apps/www/registry/default/ui/button/Button.vue
rename to apps/www/src/registry/default/ui/button/Button.vue
diff --git a/apps/www/registry/default/ui/button/index.ts b/apps/www/src/registry/default/ui/button/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/button/index.ts
rename to apps/www/src/registry/default/ui/button/index.ts
diff --git a/apps/www/registry/default/ui/calendar/Calendar.vue b/apps/www/src/registry/default/ui/calendar/Calendar.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/Calendar.vue
rename to apps/www/src/registry/default/ui/calendar/Calendar.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarCell.vue b/apps/www/src/registry/default/ui/calendar/CalendarCell.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarCell.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarCell.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/registry/default/ui/calendar/CalendarCellTrigger.vue
similarity index 95%
rename from apps/www/registry/default/ui/calendar/CalendarCellTrigger.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarCellTrigger.vue
index c64636e0c..3e3219449 100644
--- a/apps/www/registry/default/ui/calendar/CalendarCellTrigger.vue
+++ b/apps/www/src/registry/default/ui/calendar/CalendarCellTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/default/ui/calendar/CalendarGrid.vue b/apps/www/src/registry/default/ui/calendar/CalendarGrid.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarGrid.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarGrid.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarGridBody.vue b/apps/www/src/registry/default/ui/calendar/CalendarGridBody.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarGridBody.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarGridBody.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarGridHead.vue b/apps/www/src/registry/default/ui/calendar/CalendarGridHead.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarGridHead.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarGridHead.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarGridRow.vue b/apps/www/src/registry/default/ui/calendar/CalendarGridRow.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarGridRow.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarGridRow.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarHeadCell.vue b/apps/www/src/registry/default/ui/calendar/CalendarHeadCell.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarHeadCell.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarHeadCell.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarHeader.vue b/apps/www/src/registry/default/ui/calendar/CalendarHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarHeader.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarHeader.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarHeading.vue b/apps/www/src/registry/default/ui/calendar/CalendarHeading.vue
similarity index 100%
rename from apps/www/registry/default/ui/calendar/CalendarHeading.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarHeading.vue
diff --git a/apps/www/registry/default/ui/calendar/CalendarNextButton.vue b/apps/www/src/registry/default/ui/calendar/CalendarNextButton.vue
similarity index 92%
rename from apps/www/registry/default/ui/calendar/CalendarNextButton.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarNextButton.vue
index f33b917f3..f2f428bfb 100644
--- a/apps/www/registry/default/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/registry/default/ui/calendar/CalendarNextButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
 import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/calendar/CalendarPrevButton.vue b/apps/www/src/registry/default/ui/calendar/CalendarPrevButton.vue
similarity index 92%
rename from apps/www/registry/default/ui/calendar/CalendarPrevButton.vue
rename to apps/www/src/registry/default/ui/calendar/CalendarPrevButton.vue
index 1ba7b9d2a..c660e4f01 100644
--- a/apps/www/registry/default/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/registry/default/ui/calendar/CalendarPrevButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { ChevronLeft } from 'lucide-vue-next'
 import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/calendar/index.ts b/apps/www/src/registry/default/ui/calendar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/calendar/index.ts
rename to apps/www/src/registry/default/ui/calendar/index.ts
diff --git a/apps/www/registry/default/ui/card/Card.vue b/apps/www/src/registry/default/ui/card/Card.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/Card.vue
rename to apps/www/src/registry/default/ui/card/Card.vue
diff --git a/apps/www/registry/default/ui/card/CardContent.vue b/apps/www/src/registry/default/ui/card/CardContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/CardContent.vue
rename to apps/www/src/registry/default/ui/card/CardContent.vue
diff --git a/apps/www/registry/default/ui/card/CardDescription.vue b/apps/www/src/registry/default/ui/card/CardDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/CardDescription.vue
rename to apps/www/src/registry/default/ui/card/CardDescription.vue
diff --git a/apps/www/registry/default/ui/card/CardFooter.vue b/apps/www/src/registry/default/ui/card/CardFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/CardFooter.vue
rename to apps/www/src/registry/default/ui/card/CardFooter.vue
diff --git a/apps/www/registry/default/ui/card/CardHeader.vue b/apps/www/src/registry/default/ui/card/CardHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/CardHeader.vue
rename to apps/www/src/registry/default/ui/card/CardHeader.vue
diff --git a/apps/www/registry/default/ui/card/CardTitle.vue b/apps/www/src/registry/default/ui/card/CardTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/card/CardTitle.vue
rename to apps/www/src/registry/default/ui/card/CardTitle.vue
diff --git a/apps/www/registry/default/ui/card/index.ts b/apps/www/src/registry/default/ui/card/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/card/index.ts
rename to apps/www/src/registry/default/ui/card/index.ts
diff --git a/apps/www/registry/default/ui/carousel/Carousel.vue b/apps/www/src/registry/default/ui/carousel/Carousel.vue
similarity index 100%
rename from apps/www/registry/default/ui/carousel/Carousel.vue
rename to apps/www/src/registry/default/ui/carousel/Carousel.vue
diff --git a/apps/www/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/registry/default/ui/carousel/CarouselContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/carousel/CarouselContent.vue
rename to apps/www/src/registry/default/ui/carousel/CarouselContent.vue
diff --git a/apps/www/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/registry/default/ui/carousel/CarouselItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/carousel/CarouselItem.vue
rename to apps/www/src/registry/default/ui/carousel/CarouselItem.vue
diff --git a/apps/www/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/registry/default/ui/carousel/CarouselNext.vue
similarity index 93%
rename from apps/www/registry/default/ui/carousel/CarouselNext.vue
rename to apps/www/src/registry/default/ui/carousel/CarouselNext.vue
index 2959c558b..1d863c364 100644
--- a/apps/www/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/registry/default/ui/carousel/CarouselNext.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { Button } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 
diff --git a/apps/www/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/registry/default/ui/carousel/CarouselPrevious.vue
similarity index 93%
rename from apps/www/registry/default/ui/carousel/CarouselPrevious.vue
rename to apps/www/src/registry/default/ui/carousel/CarouselPrevious.vue
index 92c5a5a14..6eeacc723 100644
--- a/apps/www/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { Button } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
 import { ArrowLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 
diff --git a/apps/www/registry/default/ui/carousel/index.ts b/apps/www/src/registry/default/ui/carousel/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/carousel/index.ts
rename to apps/www/src/registry/default/ui/carousel/index.ts
diff --git a/apps/www/registry/default/ui/carousel/interface.ts b/apps/www/src/registry/default/ui/carousel/interface.ts
similarity index 100%
rename from apps/www/registry/default/ui/carousel/interface.ts
rename to apps/www/src/registry/default/ui/carousel/interface.ts
diff --git a/apps/www/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/registry/default/ui/carousel/useCarousel.ts
similarity index 100%
rename from apps/www/registry/default/ui/carousel/useCarousel.ts
rename to apps/www/src/registry/default/ui/carousel/useCarousel.ts
diff --git a/apps/www/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/registry/default/ui/chart-area/AreaChart.vue
similarity index 97%
rename from apps/www/registry/default/ui/chart-area/AreaChart.vue
rename to apps/www/src/registry/default/ui/chart-area/AreaChart.vue
index 135e50bcd..187325047 100644
--- a/apps/www/registry/default/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/registry/default/ui/chart-area/AreaChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'
 import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Area, Axis, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
diff --git a/apps/www/registry/default/ui/chart-area/index.ts b/apps/www/src/registry/default/ui/chart-area/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart-area/index.ts
rename to apps/www/src/registry/default/ui/chart-area/index.ts
diff --git a/apps/www/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/registry/default/ui/chart-bar/BarChart.vue
similarity index 97%
rename from apps/www/registry/default/ui/chart-bar/BarChart.vue
rename to apps/www/src/registry/default/ui/chart-bar/BarChart.vue
index 9cbd0b6b8..e0edac78e 100644
--- a/apps/www/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/registry/default/ui/chart-bar/BarChart.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
diff --git a/apps/www/registry/default/ui/chart-bar/index.ts b/apps/www/src/registry/default/ui/chart-bar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart-bar/index.ts
rename to apps/www/src/registry/default/ui/chart-bar/index.ts
diff --git a/apps/www/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/src/registry/default/ui/chart-donut/DonutChart.vue
similarity index 97%
rename from apps/www/registry/default/ui/chart-donut/DonutChart.vue
rename to apps/www/src/registry/default/ui/chart-donut/DonutChart.vue
index 0a79e97db..54c3a0270 100644
--- a/apps/www/registry/default/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/registry/default/ui/chart-donut/DonutChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'
 import { Donut } from '@unovis/ts'
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
diff --git a/apps/www/registry/default/ui/chart-donut/index.ts b/apps/www/src/registry/default/ui/chart-donut/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart-donut/index.ts
rename to apps/www/src/registry/default/ui/chart-donut/index.ts
diff --git a/apps/www/registry/default/ui/chart-line/LineChart.vue b/apps/www/src/registry/default/ui/chart-line/LineChart.vue
similarity index 97%
rename from apps/www/registry/default/ui/chart-line/LineChart.vue
rename to apps/www/src/registry/default/ui/chart-line/LineChart.vue
index f2311a8ea..cd773115f 100644
--- a/apps/www/registry/default/ui/chart-line/LineChart.vue
+++ b/apps/www/src/registry/default/ui/chart-line/LineChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'
 import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Axis, Line } from '@unovis/ts'
 import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
diff --git a/apps/www/registry/default/ui/chart-line/index.ts b/apps/www/src/registry/default/ui/chart-line/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart-line/index.ts
rename to apps/www/src/registry/default/ui/chart-line/index.ts
diff --git a/apps/www/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/src/registry/default/ui/chart/ChartCrosshair.vue
similarity index 100%
rename from apps/www/registry/default/ui/chart/ChartCrosshair.vue
rename to apps/www/src/registry/default/ui/chart/ChartCrosshair.vue
diff --git a/apps/www/registry/default/ui/chart/ChartLegend.vue b/apps/www/src/registry/default/ui/chart/ChartLegend.vue
similarity index 95%
rename from apps/www/registry/default/ui/chart/ChartLegend.vue
rename to apps/www/src/registry/default/ui/chart/ChartLegend.vue
index 3c4420869..bf7bc858c 100644
--- a/apps/www/registry/default/ui/chart/ChartLegend.vue
+++ b/apps/www/src/registry/default/ui/chart/ChartLegend.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { BulletLegend } from '@unovis/ts'
 import { VisBulletLegend } from '@unovis/vue'
 import { nextTick, onMounted, ref } from 'vue'
diff --git a/apps/www/registry/default/ui/chart/ChartSingleTooltip.vue b/apps/www/src/registry/default/ui/chart/ChartSingleTooltip.vue
similarity index 100%
rename from apps/www/registry/default/ui/chart/ChartSingleTooltip.vue
rename to apps/www/src/registry/default/ui/chart/ChartSingleTooltip.vue
diff --git a/apps/www/registry/default/ui/chart/ChartTooltip.vue b/apps/www/src/registry/default/ui/chart/ChartTooltip.vue
similarity index 91%
rename from apps/www/registry/default/ui/chart/ChartTooltip.vue
rename to apps/www/src/registry/default/ui/chart/ChartTooltip.vue
index 8f2be0845..2e550cf51 100644
--- a/apps/www/registry/default/ui/chart/ChartTooltip.vue
+++ b/apps/www/src/registry/default/ui/chart/ChartTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'
 
 defineProps<{
   title?: string
diff --git a/apps/www/registry/default/ui/chart/index.ts b/apps/www/src/registry/default/ui/chart/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart/index.ts
rename to apps/www/src/registry/default/ui/chart/index.ts
diff --git a/apps/www/registry/default/ui/chart/interface.ts b/apps/www/src/registry/default/ui/chart/interface.ts
similarity index 100%
rename from apps/www/registry/default/ui/chart/interface.ts
rename to apps/www/src/registry/default/ui/chart/interface.ts
diff --git a/apps/www/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/registry/default/ui/checkbox/Checkbox.vue
similarity index 100%
rename from apps/www/registry/default/ui/checkbox/Checkbox.vue
rename to apps/www/src/registry/default/ui/checkbox/Checkbox.vue
diff --git a/apps/www/registry/default/ui/checkbox/index.ts b/apps/www/src/registry/default/ui/checkbox/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/checkbox/index.ts
rename to apps/www/src/registry/default/ui/checkbox/index.ts
diff --git a/apps/www/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/registry/default/ui/collapsible/Collapsible.vue
similarity index 100%
rename from apps/www/registry/default/ui/collapsible/Collapsible.vue
rename to apps/www/src/registry/default/ui/collapsible/Collapsible.vue
diff --git a/apps/www/registry/default/ui/collapsible/CollapsibleContent.vue b/apps/www/src/registry/default/ui/collapsible/CollapsibleContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/collapsible/CollapsibleContent.vue
rename to apps/www/src/registry/default/ui/collapsible/CollapsibleContent.vue
diff --git a/apps/www/registry/default/ui/collapsible/CollapsibleTrigger.vue b/apps/www/src/registry/default/ui/collapsible/CollapsibleTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/collapsible/CollapsibleTrigger.vue
rename to apps/www/src/registry/default/ui/collapsible/CollapsibleTrigger.vue
diff --git a/apps/www/registry/default/ui/collapsible/index.ts b/apps/www/src/registry/default/ui/collapsible/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/collapsible/index.ts
rename to apps/www/src/registry/default/ui/collapsible/index.ts
diff --git a/apps/www/registry/default/ui/command/Command.vue b/apps/www/src/registry/default/ui/command/Command.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/Command.vue
rename to apps/www/src/registry/default/ui/command/Command.vue
diff --git a/apps/www/registry/default/ui/command/CommandDialog.vue b/apps/www/src/registry/default/ui/command/CommandDialog.vue
similarity index 92%
rename from apps/www/registry/default/ui/command/CommandDialog.vue
rename to apps/www/src/registry/default/ui/command/CommandDialog.vue
index bf1ec376f..2512e4171 100644
--- a/apps/www/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/registry/default/ui/command/CommandDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
+import { Dialog, DialogContent } from '@/registry/default/ui/dialog'
 import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
 
diff --git a/apps/www/registry/default/ui/command/CommandEmpty.vue b/apps/www/src/registry/default/ui/command/CommandEmpty.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandEmpty.vue
rename to apps/www/src/registry/default/ui/command/CommandEmpty.vue
diff --git a/apps/www/registry/default/ui/command/CommandGroup.vue b/apps/www/src/registry/default/ui/command/CommandGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandGroup.vue
rename to apps/www/src/registry/default/ui/command/CommandGroup.vue
diff --git a/apps/www/registry/default/ui/command/CommandInput.vue b/apps/www/src/registry/default/ui/command/CommandInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandInput.vue
rename to apps/www/src/registry/default/ui/command/CommandInput.vue
diff --git a/apps/www/registry/default/ui/command/CommandItem.vue b/apps/www/src/registry/default/ui/command/CommandItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandItem.vue
rename to apps/www/src/registry/default/ui/command/CommandItem.vue
diff --git a/apps/www/registry/default/ui/command/CommandList.vue b/apps/www/src/registry/default/ui/command/CommandList.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandList.vue
rename to apps/www/src/registry/default/ui/command/CommandList.vue
diff --git a/apps/www/registry/default/ui/command/CommandSeparator.vue b/apps/www/src/registry/default/ui/command/CommandSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandSeparator.vue
rename to apps/www/src/registry/default/ui/command/CommandSeparator.vue
diff --git a/apps/www/registry/default/ui/command/CommandShortcut.vue b/apps/www/src/registry/default/ui/command/CommandShortcut.vue
similarity index 100%
rename from apps/www/registry/default/ui/command/CommandShortcut.vue
rename to apps/www/src/registry/default/ui/command/CommandShortcut.vue
diff --git a/apps/www/registry/default/ui/command/index.ts b/apps/www/src/registry/default/ui/command/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/command/index.ts
rename to apps/www/src/registry/default/ui/command/index.ts
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenu.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenu.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenu.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenu.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuContent.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuContent.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuGroup.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuGroup.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuGroup.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuItem.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuItem.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuLabel.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuLabel.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuLabel.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuPortal.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuPortal.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuPortal.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuPortal.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuRadioItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuRadioItem.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuRadioItem.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuSeparator.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuSeparator.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuShortcut.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuShortcut.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuShortcut.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuSub.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuSub.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuSub.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuSub.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuSubContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuSubContent.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuSubContent.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
diff --git a/apps/www/registry/default/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/registry/default/ui/context-menu/ContextMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/ContextMenuTrigger.vue
rename to apps/www/src/registry/default/ui/context-menu/ContextMenuTrigger.vue
diff --git a/apps/www/registry/default/ui/context-menu/index.ts b/apps/www/src/registry/default/ui/context-menu/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/context-menu/index.ts
rename to apps/www/src/registry/default/ui/context-menu/index.ts
diff --git a/apps/www/registry/default/ui/dialog/Dialog.vue b/apps/www/src/registry/default/ui/dialog/Dialog.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/Dialog.vue
rename to apps/www/src/registry/default/ui/dialog/Dialog.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogClose.vue b/apps/www/src/registry/default/ui/dialog/DialogClose.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogClose.vue
rename to apps/www/src/registry/default/ui/dialog/DialogClose.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/registry/default/ui/dialog/DialogContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogContent.vue
rename to apps/www/src/registry/default/ui/dialog/DialogContent.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogDescription.vue b/apps/www/src/registry/default/ui/dialog/DialogDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogDescription.vue
rename to apps/www/src/registry/default/ui/dialog/DialogDescription.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogFooter.vue b/apps/www/src/registry/default/ui/dialog/DialogFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogFooter.vue
rename to apps/www/src/registry/default/ui/dialog/DialogFooter.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/registry/default/ui/dialog/DialogHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogHeader.vue
rename to apps/www/src/registry/default/ui/dialog/DialogHeader.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/registry/default/ui/dialog/DialogScrollContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogScrollContent.vue
rename to apps/www/src/registry/default/ui/dialog/DialogScrollContent.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogTitle.vue b/apps/www/src/registry/default/ui/dialog/DialogTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogTitle.vue
rename to apps/www/src/registry/default/ui/dialog/DialogTitle.vue
diff --git a/apps/www/registry/default/ui/dialog/DialogTrigger.vue b/apps/www/src/registry/default/ui/dialog/DialogTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/dialog/DialogTrigger.vue
rename to apps/www/src/registry/default/ui/dialog/DialogTrigger.vue
diff --git a/apps/www/registry/default/ui/dialog/index.ts b/apps/www/src/registry/default/ui/dialog/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/dialog/index.ts
rename to apps/www/src/registry/default/ui/dialog/index.ts
diff --git a/apps/www/registry/default/ui/drawer/Drawer.vue b/apps/www/src/registry/default/ui/drawer/Drawer.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/Drawer.vue
rename to apps/www/src/registry/default/ui/drawer/Drawer.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerContent.vue b/apps/www/src/registry/default/ui/drawer/DrawerContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerContent.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerContent.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerDescription.vue b/apps/www/src/registry/default/ui/drawer/DrawerDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerDescription.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerDescription.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerFooter.vue b/apps/www/src/registry/default/ui/drawer/DrawerFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerFooter.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerFooter.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerHeader.vue b/apps/www/src/registry/default/ui/drawer/DrawerHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerHeader.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerHeader.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerOverlay.vue b/apps/www/src/registry/default/ui/drawer/DrawerOverlay.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerOverlay.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerOverlay.vue
diff --git a/apps/www/registry/default/ui/drawer/DrawerTitle.vue b/apps/www/src/registry/default/ui/drawer/DrawerTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/drawer/DrawerTitle.vue
rename to apps/www/src/registry/default/ui/drawer/DrawerTitle.vue
diff --git a/apps/www/registry/default/ui/drawer/index.ts b/apps/www/src/registry/default/ui/drawer/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/drawer/index.ts
rename to apps/www/src/registry/default/ui/drawer/index.ts
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenu.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenu.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenu.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenu.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
rename to apps/www/src/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
diff --git a/apps/www/registry/default/ui/dropdown-menu/index.ts b/apps/www/src/registry/default/ui/dropdown-menu/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/dropdown-menu/index.ts
rename to apps/www/src/registry/default/ui/dropdown-menu/index.ts
diff --git a/apps/www/registry/default/ui/form/FormControl.vue b/apps/www/src/registry/default/ui/form/FormControl.vue
similarity index 100%
rename from apps/www/registry/default/ui/form/FormControl.vue
rename to apps/www/src/registry/default/ui/form/FormControl.vue
diff --git a/apps/www/registry/default/ui/form/FormDescription.vue b/apps/www/src/registry/default/ui/form/FormDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/form/FormDescription.vue
rename to apps/www/src/registry/default/ui/form/FormDescription.vue
diff --git a/apps/www/registry/default/ui/form/FormItem.vue b/apps/www/src/registry/default/ui/form/FormItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/form/FormItem.vue
rename to apps/www/src/registry/default/ui/form/FormItem.vue
diff --git a/apps/www/registry/default/ui/form/FormLabel.vue b/apps/www/src/registry/default/ui/form/FormLabel.vue
similarity index 89%
rename from apps/www/registry/default/ui/form/FormLabel.vue
rename to apps/www/src/registry/default/ui/form/FormLabel.vue
index 511150690..1e5b4be7a 100644
--- a/apps/www/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/registry/default/ui/form/FormLabel.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/lib/registry/default/ui/label'
 import { cn } from '@/lib/utils'
+import { Label } from '@/registry/default/ui/label'
 import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/registry/default/ui/form/FormMessage.vue b/apps/www/src/registry/default/ui/form/FormMessage.vue
similarity index 100%
rename from apps/www/registry/default/ui/form/FormMessage.vue
rename to apps/www/src/registry/default/ui/form/FormMessage.vue
diff --git a/apps/www/registry/default/ui/form/index.ts b/apps/www/src/registry/default/ui/form/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/form/index.ts
rename to apps/www/src/registry/default/ui/form/index.ts
diff --git a/apps/www/registry/default/ui/form/injectionKeys.ts b/apps/www/src/registry/default/ui/form/injectionKeys.ts
similarity index 100%
rename from apps/www/registry/default/ui/form/injectionKeys.ts
rename to apps/www/src/registry/default/ui/form/injectionKeys.ts
diff --git a/apps/www/registry/default/ui/form/useFormField.ts b/apps/www/src/registry/default/ui/form/useFormField.ts
similarity index 100%
rename from apps/www/registry/default/ui/form/useFormField.ts
rename to apps/www/src/registry/default/ui/form/useFormField.ts
diff --git a/apps/www/registry/default/ui/hover-card/HoverCard.vue b/apps/www/src/registry/default/ui/hover-card/HoverCard.vue
similarity index 100%
rename from apps/www/registry/default/ui/hover-card/HoverCard.vue
rename to apps/www/src/registry/default/ui/hover-card/HoverCard.vue
diff --git a/apps/www/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/src/registry/default/ui/hover-card/HoverCardContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/hover-card/HoverCardContent.vue
rename to apps/www/src/registry/default/ui/hover-card/HoverCardContent.vue
diff --git a/apps/www/registry/default/ui/hover-card/HoverCardTrigger.vue b/apps/www/src/registry/default/ui/hover-card/HoverCardTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/hover-card/HoverCardTrigger.vue
rename to apps/www/src/registry/default/ui/hover-card/HoverCardTrigger.vue
diff --git a/apps/www/registry/default/ui/hover-card/index.ts b/apps/www/src/registry/default/ui/hover-card/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/hover-card/index.ts
rename to apps/www/src/registry/default/ui/hover-card/index.ts
diff --git a/apps/www/registry/default/ui/input/Input.vue b/apps/www/src/registry/default/ui/input/Input.vue
similarity index 100%
rename from apps/www/registry/default/ui/input/Input.vue
rename to apps/www/src/registry/default/ui/input/Input.vue
diff --git a/apps/www/registry/default/ui/input/index.ts b/apps/www/src/registry/default/ui/input/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/input/index.ts
rename to apps/www/src/registry/default/ui/input/index.ts
diff --git a/apps/www/registry/default/ui/label/Label.vue b/apps/www/src/registry/default/ui/label/Label.vue
similarity index 100%
rename from apps/www/registry/default/ui/label/Label.vue
rename to apps/www/src/registry/default/ui/label/Label.vue
diff --git a/apps/www/registry/default/ui/label/index.ts b/apps/www/src/registry/default/ui/label/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/label/index.ts
rename to apps/www/src/registry/default/ui/label/index.ts
diff --git a/apps/www/registry/default/ui/menubar/Menubar.vue b/apps/www/src/registry/default/ui/menubar/Menubar.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/Menubar.vue
rename to apps/www/src/registry/default/ui/menubar/Menubar.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/registry/default/ui/menubar/MenubarCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarCheckboxItem.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarCheckboxItem.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/registry/default/ui/menubar/MenubarContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarContent.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarContent.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarGroup.vue b/apps/www/src/registry/default/ui/menubar/MenubarGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarGroup.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarGroup.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/registry/default/ui/menubar/MenubarItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarItem.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarItem.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/registry/default/ui/menubar/MenubarLabel.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarLabel.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarLabel.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarMenu.vue b/apps/www/src/registry/default/ui/menubar/MenubarMenu.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarMenu.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarMenu.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/registry/default/ui/menubar/MenubarRadioGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarRadioGroup.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarRadioGroup.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/registry/default/ui/menubar/MenubarRadioItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarRadioItem.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarRadioItem.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarSeparator.vue b/apps/www/src/registry/default/ui/menubar/MenubarSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarSeparator.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarSeparator.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/src/registry/default/ui/menubar/MenubarShortcut.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarShortcut.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarShortcut.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarSub.vue b/apps/www/src/registry/default/ui/menubar/MenubarSub.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarSub.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarSub.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/registry/default/ui/menubar/MenubarSubContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarSubContent.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarSubContent.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/registry/default/ui/menubar/MenubarSubTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarSubTrigger.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarSubTrigger.vue
diff --git a/apps/www/registry/default/ui/menubar/MenubarTrigger.vue b/apps/www/src/registry/default/ui/menubar/MenubarTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/menubar/MenubarTrigger.vue
rename to apps/www/src/registry/default/ui/menubar/MenubarTrigger.vue
diff --git a/apps/www/registry/default/ui/menubar/index.ts b/apps/www/src/registry/default/ui/menubar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/menubar/index.ts
rename to apps/www/src/registry/default/ui/menubar/index.ts
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenu.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenu.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenu.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuContent.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuContent.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuIndicator.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuItem.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuItem.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuLink.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuLink.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuLink.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuList.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuList.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuList.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
rename to apps/www/src/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
diff --git a/apps/www/registry/default/ui/navigation-menu/index.ts b/apps/www/src/registry/default/ui/navigation-menu/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/navigation-menu/index.ts
rename to apps/www/src/registry/default/ui/navigation-menu/index.ts
diff --git a/apps/www/registry/default/ui/number-field/NumberField.vue b/apps/www/src/registry/default/ui/number-field/NumberField.vue
similarity index 100%
rename from apps/www/registry/default/ui/number-field/NumberField.vue
rename to apps/www/src/registry/default/ui/number-field/NumberField.vue
diff --git a/apps/www/registry/default/ui/number-field/NumberFieldContent.vue b/apps/www/src/registry/default/ui/number-field/NumberFieldContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/number-field/NumberFieldContent.vue
rename to apps/www/src/registry/default/ui/number-field/NumberFieldContent.vue
diff --git a/apps/www/registry/default/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/registry/default/ui/number-field/NumberFieldDecrement.vue
similarity index 100%
rename from apps/www/registry/default/ui/number-field/NumberFieldDecrement.vue
rename to apps/www/src/registry/default/ui/number-field/NumberFieldDecrement.vue
diff --git a/apps/www/registry/default/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/registry/default/ui/number-field/NumberFieldIncrement.vue
similarity index 100%
rename from apps/www/registry/default/ui/number-field/NumberFieldIncrement.vue
rename to apps/www/src/registry/default/ui/number-field/NumberFieldIncrement.vue
diff --git a/apps/www/registry/default/ui/number-field/NumberFieldInput.vue b/apps/www/src/registry/default/ui/number-field/NumberFieldInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/number-field/NumberFieldInput.vue
rename to apps/www/src/registry/default/ui/number-field/NumberFieldInput.vue
diff --git a/apps/www/registry/default/ui/number-field/index.ts b/apps/www/src/registry/default/ui/number-field/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/number-field/index.ts
rename to apps/www/src/registry/default/ui/number-field/index.ts
diff --git a/apps/www/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/src/registry/default/ui/pagination/PaginationEllipsis.vue
similarity index 100%
rename from apps/www/registry/default/ui/pagination/PaginationEllipsis.vue
rename to apps/www/src/registry/default/ui/pagination/PaginationEllipsis.vue
diff --git a/apps/www/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/src/registry/default/ui/pagination/PaginationFirst.vue
similarity index 94%
rename from apps/www/registry/default/ui/pagination/PaginationFirst.vue
rename to apps/www/src/registry/default/ui/pagination/PaginationFirst.vue
index ecd687cde..4aec681af 100644
--- a/apps/www/registry/default/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/registry/default/ui/pagination/PaginationFirst.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/button'
 import { ChevronsLeft } from 'lucide-vue-next'
 import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/pagination/PaginationLast.vue b/apps/www/src/registry/default/ui/pagination/PaginationLast.vue
similarity index 94%
rename from apps/www/registry/default/ui/pagination/PaginationLast.vue
rename to apps/www/src/registry/default/ui/pagination/PaginationLast.vue
index b3f27ebb5..d1f3cdfc7 100644
--- a/apps/www/registry/default/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/registry/default/ui/pagination/PaginationLast.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/button'
 import { ChevronsRight } from 'lucide-vue-next'
 import { PaginationLast, type PaginationLastProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/registry/default/ui/pagination/PaginationNext.vue
similarity index 94%
rename from apps/www/registry/default/ui/pagination/PaginationNext.vue
rename to apps/www/src/registry/default/ui/pagination/PaginationNext.vue
index df0f64295..b4802af63 100644
--- a/apps/www/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/registry/default/ui/pagination/PaginationNext.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
 import { PaginationNext, type PaginationNextProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/registry/default/ui/pagination/PaginationPrev.vue
similarity index 94%
rename from apps/www/registry/default/ui/pagination/PaginationPrev.vue
rename to apps/www/src/registry/default/ui/pagination/PaginationPrev.vue
index bcdadd6db..12227f156 100644
--- a/apps/www/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/registry/default/ui/pagination/PaginationPrev.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/default/ui/button'
 import { ChevronLeft } from 'lucide-vue-next'
 import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/pagination/index.ts b/apps/www/src/registry/default/ui/pagination/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/pagination/index.ts
rename to apps/www/src/registry/default/ui/pagination/index.ts
diff --git a/apps/www/registry/default/ui/pin-input/PinInput.vue b/apps/www/src/registry/default/ui/pin-input/PinInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/pin-input/PinInput.vue
rename to apps/www/src/registry/default/ui/pin-input/PinInput.vue
diff --git a/apps/www/registry/default/ui/pin-input/PinInputGroup.vue b/apps/www/src/registry/default/ui/pin-input/PinInputGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/pin-input/PinInputGroup.vue
rename to apps/www/src/registry/default/ui/pin-input/PinInputGroup.vue
diff --git a/apps/www/registry/default/ui/pin-input/PinInputInput.vue b/apps/www/src/registry/default/ui/pin-input/PinInputInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/pin-input/PinInputInput.vue
rename to apps/www/src/registry/default/ui/pin-input/PinInputInput.vue
diff --git a/apps/www/registry/default/ui/pin-input/PinInputSeparator.vue b/apps/www/src/registry/default/ui/pin-input/PinInputSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/pin-input/PinInputSeparator.vue
rename to apps/www/src/registry/default/ui/pin-input/PinInputSeparator.vue
diff --git a/apps/www/registry/default/ui/pin-input/index.ts b/apps/www/src/registry/default/ui/pin-input/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/pin-input/index.ts
rename to apps/www/src/registry/default/ui/pin-input/index.ts
diff --git a/apps/www/registry/default/ui/popover/Popover.vue b/apps/www/src/registry/default/ui/popover/Popover.vue
similarity index 100%
rename from apps/www/registry/default/ui/popover/Popover.vue
rename to apps/www/src/registry/default/ui/popover/Popover.vue
diff --git a/apps/www/registry/default/ui/popover/PopoverContent.vue b/apps/www/src/registry/default/ui/popover/PopoverContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/popover/PopoverContent.vue
rename to apps/www/src/registry/default/ui/popover/PopoverContent.vue
diff --git a/apps/www/registry/default/ui/popover/PopoverTrigger.vue b/apps/www/src/registry/default/ui/popover/PopoverTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/popover/PopoverTrigger.vue
rename to apps/www/src/registry/default/ui/popover/PopoverTrigger.vue
diff --git a/apps/www/registry/default/ui/popover/index.ts b/apps/www/src/registry/default/ui/popover/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/popover/index.ts
rename to apps/www/src/registry/default/ui/popover/index.ts
diff --git a/apps/www/registry/default/ui/progress/Progress.vue b/apps/www/src/registry/default/ui/progress/Progress.vue
similarity index 100%
rename from apps/www/registry/default/ui/progress/Progress.vue
rename to apps/www/src/registry/default/ui/progress/Progress.vue
diff --git a/apps/www/registry/default/ui/progress/index.ts b/apps/www/src/registry/default/ui/progress/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/progress/index.ts
rename to apps/www/src/registry/default/ui/progress/index.ts
diff --git a/apps/www/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/src/registry/default/ui/radio-group/RadioGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/radio-group/RadioGroup.vue
rename to apps/www/src/registry/default/ui/radio-group/RadioGroup.vue
diff --git a/apps/www/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/src/registry/default/ui/radio-group/RadioGroupItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/radio-group/RadioGroupItem.vue
rename to apps/www/src/registry/default/ui/radio-group/RadioGroupItem.vue
diff --git a/apps/www/registry/default/ui/radio-group/index.ts b/apps/www/src/registry/default/ui/radio-group/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/radio-group/index.ts
rename to apps/www/src/registry/default/ui/radio-group/index.ts
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendar.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendar.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendar.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendar.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarCell.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarCell.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarCell.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
similarity index 96%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
index 18d77ab70..5f9f9c536 100644
--- a/apps/www/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
+++ b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarGrid.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarGrid.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarGrid.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridBody.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridHead.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeadCell.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarHeader.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeader.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeading.vue
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarHeading.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarHeading.vue
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
similarity index 92%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
index 7a6c3a2a0..246377bb1 100644
--- a/apps/www/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarNextButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
 import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
similarity index 92%
rename from apps/www/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
rename to apps/www/src/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
index 37f59f46b..23a656f47 100644
--- a/apps/www/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/apps/www/src/registry/default/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { ChevronLeft } from 'lucide-vue-next'
 import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/default/ui/range-calendar/index.ts b/apps/www/src/registry/default/ui/range-calendar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/range-calendar/index.ts
rename to apps/www/src/registry/default/ui/range-calendar/index.ts
diff --git a/apps/www/registry/default/ui/resizable/ResizableHandle.vue b/apps/www/src/registry/default/ui/resizable/ResizableHandle.vue
similarity index 100%
rename from apps/www/registry/default/ui/resizable/ResizableHandle.vue
rename to apps/www/src/registry/default/ui/resizable/ResizableHandle.vue
diff --git a/apps/www/registry/default/ui/resizable/ResizablePanelGroup.vue b/apps/www/src/registry/default/ui/resizable/ResizablePanelGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/resizable/ResizablePanelGroup.vue
rename to apps/www/src/registry/default/ui/resizable/ResizablePanelGroup.vue
diff --git a/apps/www/registry/default/ui/resizable/index.ts b/apps/www/src/registry/default/ui/resizable/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/resizable/index.ts
rename to apps/www/src/registry/default/ui/resizable/index.ts
diff --git a/apps/www/registry/default/ui/scroll-area/ScrollArea.vue b/apps/www/src/registry/default/ui/scroll-area/ScrollArea.vue
similarity index 100%
rename from apps/www/registry/default/ui/scroll-area/ScrollArea.vue
rename to apps/www/src/registry/default/ui/scroll-area/ScrollArea.vue
diff --git a/apps/www/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/registry/default/ui/scroll-area/ScrollBar.vue
similarity index 100%
rename from apps/www/registry/default/ui/scroll-area/ScrollBar.vue
rename to apps/www/src/registry/default/ui/scroll-area/ScrollBar.vue
diff --git a/apps/www/registry/default/ui/scroll-area/index.ts b/apps/www/src/registry/default/ui/scroll-area/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/scroll-area/index.ts
rename to apps/www/src/registry/default/ui/scroll-area/index.ts
diff --git a/apps/www/registry/default/ui/select/Select.vue b/apps/www/src/registry/default/ui/select/Select.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/Select.vue
rename to apps/www/src/registry/default/ui/select/Select.vue
diff --git a/apps/www/registry/default/ui/select/SelectContent.vue b/apps/www/src/registry/default/ui/select/SelectContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectContent.vue
rename to apps/www/src/registry/default/ui/select/SelectContent.vue
diff --git a/apps/www/registry/default/ui/select/SelectGroup.vue b/apps/www/src/registry/default/ui/select/SelectGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectGroup.vue
rename to apps/www/src/registry/default/ui/select/SelectGroup.vue
diff --git a/apps/www/registry/default/ui/select/SelectItem.vue b/apps/www/src/registry/default/ui/select/SelectItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectItem.vue
rename to apps/www/src/registry/default/ui/select/SelectItem.vue
diff --git a/apps/www/registry/default/ui/select/SelectItemText.vue b/apps/www/src/registry/default/ui/select/SelectItemText.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectItemText.vue
rename to apps/www/src/registry/default/ui/select/SelectItemText.vue
diff --git a/apps/www/registry/default/ui/select/SelectLabel.vue b/apps/www/src/registry/default/ui/select/SelectLabel.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectLabel.vue
rename to apps/www/src/registry/default/ui/select/SelectLabel.vue
diff --git a/apps/www/registry/default/ui/select/SelectScrollDownButton.vue b/apps/www/src/registry/default/ui/select/SelectScrollDownButton.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectScrollDownButton.vue
rename to apps/www/src/registry/default/ui/select/SelectScrollDownButton.vue
diff --git a/apps/www/registry/default/ui/select/SelectScrollUpButton.vue b/apps/www/src/registry/default/ui/select/SelectScrollUpButton.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectScrollUpButton.vue
rename to apps/www/src/registry/default/ui/select/SelectScrollUpButton.vue
diff --git a/apps/www/registry/default/ui/select/SelectSeparator.vue b/apps/www/src/registry/default/ui/select/SelectSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectSeparator.vue
rename to apps/www/src/registry/default/ui/select/SelectSeparator.vue
diff --git a/apps/www/registry/default/ui/select/SelectTrigger.vue b/apps/www/src/registry/default/ui/select/SelectTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectTrigger.vue
rename to apps/www/src/registry/default/ui/select/SelectTrigger.vue
diff --git a/apps/www/registry/default/ui/select/SelectValue.vue b/apps/www/src/registry/default/ui/select/SelectValue.vue
similarity index 100%
rename from apps/www/registry/default/ui/select/SelectValue.vue
rename to apps/www/src/registry/default/ui/select/SelectValue.vue
diff --git a/apps/www/registry/default/ui/select/index.ts b/apps/www/src/registry/default/ui/select/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/select/index.ts
rename to apps/www/src/registry/default/ui/select/index.ts
diff --git a/apps/www/registry/default/ui/separator/Separator.vue b/apps/www/src/registry/default/ui/separator/Separator.vue
similarity index 100%
rename from apps/www/registry/default/ui/separator/Separator.vue
rename to apps/www/src/registry/default/ui/separator/Separator.vue
diff --git a/apps/www/registry/default/ui/separator/index.ts b/apps/www/src/registry/default/ui/separator/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/separator/index.ts
rename to apps/www/src/registry/default/ui/separator/index.ts
diff --git a/apps/www/registry/default/ui/sheet/Sheet.vue b/apps/www/src/registry/default/ui/sheet/Sheet.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/Sheet.vue
rename to apps/www/src/registry/default/ui/sheet/Sheet.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetClose.vue b/apps/www/src/registry/default/ui/sheet/SheetClose.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetClose.vue
rename to apps/www/src/registry/default/ui/sheet/SheetClose.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetContent.vue b/apps/www/src/registry/default/ui/sheet/SheetContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetContent.vue
rename to apps/www/src/registry/default/ui/sheet/SheetContent.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetDescription.vue b/apps/www/src/registry/default/ui/sheet/SheetDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetDescription.vue
rename to apps/www/src/registry/default/ui/sheet/SheetDescription.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetFooter.vue b/apps/www/src/registry/default/ui/sheet/SheetFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetFooter.vue
rename to apps/www/src/registry/default/ui/sheet/SheetFooter.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetHeader.vue b/apps/www/src/registry/default/ui/sheet/SheetHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetHeader.vue
rename to apps/www/src/registry/default/ui/sheet/SheetHeader.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetTitle.vue b/apps/www/src/registry/default/ui/sheet/SheetTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetTitle.vue
rename to apps/www/src/registry/default/ui/sheet/SheetTitle.vue
diff --git a/apps/www/registry/default/ui/sheet/SheetTrigger.vue b/apps/www/src/registry/default/ui/sheet/SheetTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/sheet/SheetTrigger.vue
rename to apps/www/src/registry/default/ui/sheet/SheetTrigger.vue
diff --git a/apps/www/registry/default/ui/sheet/index.ts b/apps/www/src/registry/default/ui/sheet/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/sheet/index.ts
rename to apps/www/src/registry/default/ui/sheet/index.ts
diff --git a/apps/www/registry/default/ui/sidebar/Sidebar.vue b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
similarity index 95%
rename from apps/www/registry/default/ui/sidebar/Sidebar.vue
rename to apps/www/src/registry/default/ui/sidebar/Sidebar.vue
index 9f0aa2c78..bdd7db03f 100644
--- a/apps/www/registry/default/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Sheet from '@/lib/registry/default/ui/sheet/Sheet.vue'
-import SheetContent from '@/lib/registry/default/ui/sheet/SheetContent.vue'
 import { cn } from '@/lib/utils'
+import Sheet from '@/registry/default/ui/sheet/Sheet.vue'
+import SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/registry/default/ui/sidebar/SidebarContent.vue b/apps/www/src/registry/default/ui/sidebar/SidebarContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarContent.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarContent.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarFooter.vue b/apps/www/src/registry/default/ui/sidebar/SidebarFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarFooter.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarFooter.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarGroup.vue b/apps/www/src/registry/default/ui/sidebar/SidebarGroup.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarGroup.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarGroup.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarGroupAction.vue b/apps/www/src/registry/default/ui/sidebar/SidebarGroupAction.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarGroupAction.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarGroupAction.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarGroupContent.vue b/apps/www/src/registry/default/ui/sidebar/SidebarGroupContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarGroupContent.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarGroupContent.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarGroupLabel.vue b/apps/www/src/registry/default/ui/sidebar/SidebarGroupLabel.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarGroupLabel.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarGroupLabel.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarHeader.vue b/apps/www/src/registry/default/ui/sidebar/SidebarHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarHeader.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarHeader.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
similarity index 86%
rename from apps/www/registry/default/ui/sidebar/SidebarInput.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
index 44711f4c3..250df2cd5 100644
--- a/apps/www/registry/default/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Input from '@/lib/registry/default/ui/input/Input.vue'
 import { cn } from '@/lib/utils'
+import Input from '@/registry/default/ui/input/Input.vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/registry/default/ui/sidebar/SidebarInset.vue b/apps/www/src/registry/default/ui/sidebar/SidebarInset.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarInset.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarInset.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenu.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenu.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenu.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenu.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuAction.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuAction.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuAction.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuAction.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuBadge.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuBadge.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuBadge.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuBadge.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
similarity index 83%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuButton.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
index 48a2f9a5c..d9ba72864 100644
--- a/apps/www/registry/default/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Tooltip from '@/lib/registry/default/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/lib/registry/default/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/lib/registry/default/ui/tooltip/TooltipTrigger.vue'
+import Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'
+import TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'
+import TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuButtonChild.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuItem.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuItem.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuItem.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
similarity index 91%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
index aef8bac70..a91f0b2de 100644
--- a/apps/www/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Skeleton from '@/lib/registry/default/ui/skeleton/Skeleton.vue'
 import { cn } from '@/lib/utils'
+import Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuSub.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSub.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuSub.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuSub.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSubButton.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuSubButton.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuSubButton.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarMenuSubItem.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSubItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarMenuSubItem.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarMenuSubItem.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarProvider.vue b/apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarProvider.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarRail.vue b/apps/www/src/registry/default/ui/sidebar/SidebarRail.vue
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/SidebarRail.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarRail.vue
diff --git a/apps/www/registry/default/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
similarity index 82%
rename from apps/www/registry/default/ui/sidebar/SidebarSeparator.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
index 8a5d771e7..ff778e875 100644
--- a/apps/www/registry/default/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Separator from '@/lib/registry/default/ui/separator/Separator.vue'
 import { cn } from '@/lib/utils'
+import Separator from '@/registry/default/ui/separator/Separator.vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/registry/default/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
similarity index 89%
rename from apps/www/registry/default/ui/sidebar/SidebarTrigger.vue
rename to apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
index ba35ad07a..7ce9886d0 100644
--- a/apps/www/registry/default/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Button from '@/lib/registry/default/ui/button/Button.vue'
 import { cn } from '@/lib/utils'
+import Button from '@/registry/default/ui/button/Button.vue'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/apps/www/registry/default/ui/sidebar/index.ts b/apps/www/src/registry/default/ui/sidebar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/index.ts
rename to apps/www/src/registry/default/ui/sidebar/index.ts
diff --git a/apps/www/registry/default/ui/sidebar/utils.ts b/apps/www/src/registry/default/ui/sidebar/utils.ts
similarity index 100%
rename from apps/www/registry/default/ui/sidebar/utils.ts
rename to apps/www/src/registry/default/ui/sidebar/utils.ts
diff --git a/apps/www/registry/default/ui/skeleton/Skeleton.vue b/apps/www/src/registry/default/ui/skeleton/Skeleton.vue
similarity index 100%
rename from apps/www/registry/default/ui/skeleton/Skeleton.vue
rename to apps/www/src/registry/default/ui/skeleton/Skeleton.vue
diff --git a/apps/www/registry/default/ui/skeleton/index.ts b/apps/www/src/registry/default/ui/skeleton/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/skeleton/index.ts
rename to apps/www/src/registry/default/ui/skeleton/index.ts
diff --git a/apps/www/registry/default/ui/slider/Slider.vue b/apps/www/src/registry/default/ui/slider/Slider.vue
similarity index 100%
rename from apps/www/registry/default/ui/slider/Slider.vue
rename to apps/www/src/registry/default/ui/slider/Slider.vue
diff --git a/apps/www/registry/default/ui/slider/index.ts b/apps/www/src/registry/default/ui/slider/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/slider/index.ts
rename to apps/www/src/registry/default/ui/slider/index.ts
diff --git a/apps/www/registry/default/ui/sonner/Sonner.vue b/apps/www/src/registry/default/ui/sonner/Sonner.vue
similarity index 100%
rename from apps/www/registry/default/ui/sonner/Sonner.vue
rename to apps/www/src/registry/default/ui/sonner/Sonner.vue
diff --git a/apps/www/registry/default/ui/sonner/index.ts b/apps/www/src/registry/default/ui/sonner/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/sonner/index.ts
rename to apps/www/src/registry/default/ui/sonner/index.ts
diff --git a/apps/www/registry/default/ui/stepper/Stepper.vue b/apps/www/src/registry/default/ui/stepper/Stepper.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/Stepper.vue
rename to apps/www/src/registry/default/ui/stepper/Stepper.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperDescription.vue b/apps/www/src/registry/default/ui/stepper/StepperDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperDescription.vue
rename to apps/www/src/registry/default/ui/stepper/StepperDescription.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperIndicator.vue b/apps/www/src/registry/default/ui/stepper/StepperIndicator.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperIndicator.vue
rename to apps/www/src/registry/default/ui/stepper/StepperIndicator.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperItem.vue b/apps/www/src/registry/default/ui/stepper/StepperItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperItem.vue
rename to apps/www/src/registry/default/ui/stepper/StepperItem.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperSeparator.vue b/apps/www/src/registry/default/ui/stepper/StepperSeparator.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperSeparator.vue
rename to apps/www/src/registry/default/ui/stepper/StepperSeparator.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperTitle.vue b/apps/www/src/registry/default/ui/stepper/StepperTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperTitle.vue
rename to apps/www/src/registry/default/ui/stepper/StepperTitle.vue
diff --git a/apps/www/registry/default/ui/stepper/StepperTrigger.vue b/apps/www/src/registry/default/ui/stepper/StepperTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/stepper/StepperTrigger.vue
rename to apps/www/src/registry/default/ui/stepper/StepperTrigger.vue
diff --git a/apps/www/registry/default/ui/stepper/index.ts b/apps/www/src/registry/default/ui/stepper/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/stepper/index.ts
rename to apps/www/src/registry/default/ui/stepper/index.ts
diff --git a/apps/www/registry/default/ui/switch/Switch.vue b/apps/www/src/registry/default/ui/switch/Switch.vue
similarity index 100%
rename from apps/www/registry/default/ui/switch/Switch.vue
rename to apps/www/src/registry/default/ui/switch/Switch.vue
diff --git a/apps/www/registry/default/ui/switch/index.ts b/apps/www/src/registry/default/ui/switch/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/switch/index.ts
rename to apps/www/src/registry/default/ui/switch/index.ts
diff --git a/apps/www/registry/default/ui/table/Table.vue b/apps/www/src/registry/default/ui/table/Table.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/Table.vue
rename to apps/www/src/registry/default/ui/table/Table.vue
diff --git a/apps/www/registry/default/ui/table/TableBody.vue b/apps/www/src/registry/default/ui/table/TableBody.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableBody.vue
rename to apps/www/src/registry/default/ui/table/TableBody.vue
diff --git a/apps/www/registry/default/ui/table/TableCaption.vue b/apps/www/src/registry/default/ui/table/TableCaption.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableCaption.vue
rename to apps/www/src/registry/default/ui/table/TableCaption.vue
diff --git a/apps/www/registry/default/ui/table/TableCell.vue b/apps/www/src/registry/default/ui/table/TableCell.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableCell.vue
rename to apps/www/src/registry/default/ui/table/TableCell.vue
diff --git a/apps/www/registry/default/ui/table/TableEmpty.vue b/apps/www/src/registry/default/ui/table/TableEmpty.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableEmpty.vue
rename to apps/www/src/registry/default/ui/table/TableEmpty.vue
diff --git a/apps/www/registry/default/ui/table/TableFooter.vue b/apps/www/src/registry/default/ui/table/TableFooter.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableFooter.vue
rename to apps/www/src/registry/default/ui/table/TableFooter.vue
diff --git a/apps/www/registry/default/ui/table/TableHead.vue b/apps/www/src/registry/default/ui/table/TableHead.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableHead.vue
rename to apps/www/src/registry/default/ui/table/TableHead.vue
diff --git a/apps/www/registry/default/ui/table/TableHeader.vue b/apps/www/src/registry/default/ui/table/TableHeader.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableHeader.vue
rename to apps/www/src/registry/default/ui/table/TableHeader.vue
diff --git a/apps/www/registry/default/ui/table/TableRow.vue b/apps/www/src/registry/default/ui/table/TableRow.vue
similarity index 100%
rename from apps/www/registry/default/ui/table/TableRow.vue
rename to apps/www/src/registry/default/ui/table/TableRow.vue
diff --git a/apps/www/registry/default/ui/table/index.ts b/apps/www/src/registry/default/ui/table/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/table/index.ts
rename to apps/www/src/registry/default/ui/table/index.ts
diff --git a/apps/www/registry/default/ui/tabs/Tabs.vue b/apps/www/src/registry/default/ui/tabs/Tabs.vue
similarity index 100%
rename from apps/www/registry/default/ui/tabs/Tabs.vue
rename to apps/www/src/registry/default/ui/tabs/Tabs.vue
diff --git a/apps/www/registry/default/ui/tabs/TabsContent.vue b/apps/www/src/registry/default/ui/tabs/TabsContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/tabs/TabsContent.vue
rename to apps/www/src/registry/default/ui/tabs/TabsContent.vue
diff --git a/apps/www/registry/default/ui/tabs/TabsList.vue b/apps/www/src/registry/default/ui/tabs/TabsList.vue
similarity index 100%
rename from apps/www/registry/default/ui/tabs/TabsList.vue
rename to apps/www/src/registry/default/ui/tabs/TabsList.vue
diff --git a/apps/www/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/src/registry/default/ui/tabs/TabsTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/tabs/TabsTrigger.vue
rename to apps/www/src/registry/default/ui/tabs/TabsTrigger.vue
diff --git a/apps/www/registry/default/ui/tabs/index.ts b/apps/www/src/registry/default/ui/tabs/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/tabs/index.ts
rename to apps/www/src/registry/default/ui/tabs/index.ts
diff --git a/apps/www/registry/default/ui/tags-input/TagsInput.vue b/apps/www/src/registry/default/ui/tags-input/TagsInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/TagsInput.vue
rename to apps/www/src/registry/default/ui/tags-input/TagsInput.vue
diff --git a/apps/www/registry/default/ui/tags-input/TagsInputInput.vue b/apps/www/src/registry/default/ui/tags-input/TagsInputInput.vue
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/TagsInputInput.vue
rename to apps/www/src/registry/default/ui/tags-input/TagsInputInput.vue
diff --git a/apps/www/registry/default/ui/tags-input/TagsInputItem.vue b/apps/www/src/registry/default/ui/tags-input/TagsInputItem.vue
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/TagsInputItem.vue
rename to apps/www/src/registry/default/ui/tags-input/TagsInputItem.vue
diff --git a/apps/www/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/registry/default/ui/tags-input/TagsInputItemDelete.vue
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/TagsInputItemDelete.vue
rename to apps/www/src/registry/default/ui/tags-input/TagsInputItemDelete.vue
diff --git a/apps/www/registry/default/ui/tags-input/TagsInputItemText.vue b/apps/www/src/registry/default/ui/tags-input/TagsInputItemText.vue
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/TagsInputItemText.vue
rename to apps/www/src/registry/default/ui/tags-input/TagsInputItemText.vue
diff --git a/apps/www/registry/default/ui/tags-input/index.ts b/apps/www/src/registry/default/ui/tags-input/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/tags-input/index.ts
rename to apps/www/src/registry/default/ui/tags-input/index.ts
diff --git a/apps/www/registry/default/ui/textarea/Textarea.vue b/apps/www/src/registry/default/ui/textarea/Textarea.vue
similarity index 100%
rename from apps/www/registry/default/ui/textarea/Textarea.vue
rename to apps/www/src/registry/default/ui/textarea/Textarea.vue
diff --git a/apps/www/registry/default/ui/textarea/index.ts b/apps/www/src/registry/default/ui/textarea/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/textarea/index.ts
rename to apps/www/src/registry/default/ui/textarea/index.ts
diff --git a/apps/www/registry/default/ui/toast/Toast.vue b/apps/www/src/registry/default/ui/toast/Toast.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/Toast.vue
rename to apps/www/src/registry/default/ui/toast/Toast.vue
diff --git a/apps/www/registry/default/ui/toast/ToastAction.vue b/apps/www/src/registry/default/ui/toast/ToastAction.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastAction.vue
rename to apps/www/src/registry/default/ui/toast/ToastAction.vue
diff --git a/apps/www/registry/default/ui/toast/ToastClose.vue b/apps/www/src/registry/default/ui/toast/ToastClose.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastClose.vue
rename to apps/www/src/registry/default/ui/toast/ToastClose.vue
diff --git a/apps/www/registry/default/ui/toast/ToastDescription.vue b/apps/www/src/registry/default/ui/toast/ToastDescription.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastDescription.vue
rename to apps/www/src/registry/default/ui/toast/ToastDescription.vue
diff --git a/apps/www/registry/default/ui/toast/ToastProvider.vue b/apps/www/src/registry/default/ui/toast/ToastProvider.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastProvider.vue
rename to apps/www/src/registry/default/ui/toast/ToastProvider.vue
diff --git a/apps/www/registry/default/ui/toast/ToastTitle.vue b/apps/www/src/registry/default/ui/toast/ToastTitle.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastTitle.vue
rename to apps/www/src/registry/default/ui/toast/ToastTitle.vue
diff --git a/apps/www/registry/default/ui/toast/ToastViewport.vue b/apps/www/src/registry/default/ui/toast/ToastViewport.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/ToastViewport.vue
rename to apps/www/src/registry/default/ui/toast/ToastViewport.vue
diff --git a/apps/www/registry/default/ui/toast/Toaster.vue b/apps/www/src/registry/default/ui/toast/Toaster.vue
similarity index 100%
rename from apps/www/registry/default/ui/toast/Toaster.vue
rename to apps/www/src/registry/default/ui/toast/Toaster.vue
diff --git a/apps/www/registry/default/ui/toast/index.ts b/apps/www/src/registry/default/ui/toast/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/toast/index.ts
rename to apps/www/src/registry/default/ui/toast/index.ts
diff --git a/apps/www/registry/default/ui/toast/use-toast.ts b/apps/www/src/registry/default/ui/toast/use-toast.ts
similarity index 100%
rename from apps/www/registry/default/ui/toast/use-toast.ts
rename to apps/www/src/registry/default/ui/toast/use-toast.ts
diff --git a/apps/www/registry/default/ui/toggle-group/ToggleGroup.vue b/apps/www/src/registry/default/ui/toggle-group/ToggleGroup.vue
similarity index 93%
rename from apps/www/registry/default/ui/toggle-group/ToggleGroup.vue
rename to apps/www/src/registry/default/ui/toggle-group/ToggleGroup.vue
index 8fc278b8d..986023a8e 100644
--- a/apps/www/registry/default/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/registry/default/ui/toggle-group/ToggleGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@/lib/registry/default/ui/toggle'
+import type { toggleVariants } from '@/registry/default/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'
diff --git a/apps/www/registry/default/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/registry/default/ui/toggle-group/ToggleGroupItem.vue
similarity index 93%
rename from apps/www/registry/default/ui/toggle-group/ToggleGroupItem.vue
rename to apps/www/src/registry/default/ui/toggle-group/ToggleGroupItem.vue
index a1bdd4d87..5b4c62e45 100644
--- a/apps/www/registry/default/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/registry/default/ui/toggle-group/ToggleGroupItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority'
-import { toggleVariants } from '@/lib/registry/default/ui/toggle'
 import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/registry/default/ui/toggle'
 import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes, inject } from 'vue'
 
diff --git a/apps/www/registry/default/ui/toggle-group/index.ts b/apps/www/src/registry/default/ui/toggle-group/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/toggle-group/index.ts
rename to apps/www/src/registry/default/ui/toggle-group/index.ts
diff --git a/apps/www/registry/default/ui/toggle/Toggle.vue b/apps/www/src/registry/default/ui/toggle/Toggle.vue
similarity index 100%
rename from apps/www/registry/default/ui/toggle/Toggle.vue
rename to apps/www/src/registry/default/ui/toggle/Toggle.vue
diff --git a/apps/www/registry/default/ui/toggle/index.ts b/apps/www/src/registry/default/ui/toggle/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/toggle/index.ts
rename to apps/www/src/registry/default/ui/toggle/index.ts
diff --git a/apps/www/registry/default/ui/tooltip/Tooltip.vue b/apps/www/src/registry/default/ui/tooltip/Tooltip.vue
similarity index 100%
rename from apps/www/registry/default/ui/tooltip/Tooltip.vue
rename to apps/www/src/registry/default/ui/tooltip/Tooltip.vue
diff --git a/apps/www/registry/default/ui/tooltip/TooltipContent.vue b/apps/www/src/registry/default/ui/tooltip/TooltipContent.vue
similarity index 100%
rename from apps/www/registry/default/ui/tooltip/TooltipContent.vue
rename to apps/www/src/registry/default/ui/tooltip/TooltipContent.vue
diff --git a/apps/www/registry/default/ui/tooltip/TooltipProvider.vue b/apps/www/src/registry/default/ui/tooltip/TooltipProvider.vue
similarity index 100%
rename from apps/www/registry/default/ui/tooltip/TooltipProvider.vue
rename to apps/www/src/registry/default/ui/tooltip/TooltipProvider.vue
diff --git a/apps/www/registry/default/ui/tooltip/TooltipTrigger.vue b/apps/www/src/registry/default/ui/tooltip/TooltipTrigger.vue
similarity index 100%
rename from apps/www/registry/default/ui/tooltip/TooltipTrigger.vue
rename to apps/www/src/registry/default/ui/tooltip/TooltipTrigger.vue
diff --git a/apps/www/registry/default/ui/tooltip/index.ts b/apps/www/src/registry/default/ui/tooltip/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/tooltip/index.ts
rename to apps/www/src/registry/default/ui/tooltip/index.ts
diff --git a/apps/www/registry/default/ui/v-calendar/Calendar.vue b/apps/www/src/registry/default/ui/v-calendar/Calendar.vue
similarity index 99%
rename from apps/www/registry/default/ui/v-calendar/Calendar.vue
rename to apps/www/src/registry/default/ui/v-calendar/Calendar.vue
index be2f2e674..227a7c918 100644
--- a/apps/www/registry/default/ui/v-calendar/Calendar.vue
+++ b/apps/www/src/registry/default/ui/v-calendar/Calendar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Calendar } from 'v-calendar'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/button'
 import { useVModel } from '@vueuse/core'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { DatePicker } from 'v-calendar'
diff --git a/apps/www/registry/default/ui/v-calendar/index.ts b/apps/www/src/registry/default/ui/v-calendar/index.ts
similarity index 100%
rename from apps/www/registry/default/ui/v-calendar/index.ts
rename to apps/www/src/registry/default/ui/v-calendar/index.ts
diff --git a/apps/www/src/registry/index.ts b/apps/www/src/registry/index.ts
new file mode 100644
index 000000000..c570751eb
--- /dev/null
+++ b/apps/www/src/registry/index.ts
@@ -0,0 +1,8 @@
+import type { Registry } from './schema'
+import { lib } from './registry-lib'
+import { themes } from './registry-themes'
+
+export const registry: Registry = [
+  ...lib,
+  ...themes,
+]
diff --git a/apps/www/registry/new-york/block/Authentication01.vue b/apps/www/src/registry/new-york/block/Authentication01.vue
similarity index 82%
rename from apps/www/registry/new-york/block/Authentication01.vue
rename to apps/www/src/registry/new-york/block/Authentication01.vue
index 10132fb64..e9b72bc62 100644
--- a/apps/www/registry/new-york/block/Authentication01.vue
+++ b/apps/www/src/registry/new-york/block/Authentication01.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/block/Authentication02.vue b/apps/www/src/registry/new-york/block/Authentication02.vue
similarity index 88%
rename from apps/www/registry/new-york/block/Authentication02.vue
rename to apps/www/src/registry/new-york/block/Authentication02.vue
index 3c193e076..c88abce39 100644
--- a/apps/www/registry/new-york/block/Authentication02.vue
+++ b/apps/www/src/registry/new-york/block/Authentication02.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/block/Authentication03.vue b/apps/www/src/registry/new-york/block/Authentication03.vue
similarity index 89%
rename from apps/www/registry/new-york/block/Authentication03.vue
rename to apps/www/src/registry/new-york/block/Authentication03.vue
index e6e8d7301..7b6b31f83 100644
--- a/apps/www/registry/new-york/block/Authentication03.vue
+++ b/apps/www/src/registry/new-york/block/Authentication03.vue
@@ -6,10 +6,10 @@ export const containerClass = 'w-full h-screen flex items-center justify-center
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/block/Authentication04.vue b/apps/www/src/registry/new-york/block/Authentication04.vue
similarity index 92%
rename from apps/www/registry/new-york/block/Authentication04.vue
rename to apps/www/src/registry/new-york/block/Authentication04.vue
index 9e8f044e4..8b4d34c7c 100644
--- a/apps/www/registry/new-york/block/Authentication04.vue
+++ b/apps/www/src/registry/new-york/block/Authentication04.vue
@@ -6,9 +6,9 @@ export const containerClass = 'w-full h-full p-4 lg:p-0'
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/block/Dashboard01.vue b/apps/www/src/registry/new-york/block/Dashboard01.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Dashboard01.vue
rename to apps/www/src/registry/new-york/block/Dashboard01.vue
index 8e85a9edf..1e2745532 100644
--- a/apps/www/registry/new-york/block/Dashboard01.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard01.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/new-york/ui/table'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'
+import { Badge } from '@/registry/new-york/ui/badge'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'
 import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/new-york/block/Dashboard02.vue b/apps/www/src/registry/new-york/block/Dashboard02.vue
similarity index 96%
rename from apps/www/registry/new-york/block/Dashboard02.vue
rename to apps/www/src/registry/new-york/block/Dashboard02.vue
index 1bf8a8408..b885086bd 100644
--- a/apps/www/registry/new-york/block/Dashboard02.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard02.vue
@@ -5,13 +5,13 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/new-york/block/Dashboard03.vue b/apps/www/src/registry/new-york/block/Dashboard03.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Dashboard03.vue
rename to apps/www/src/registry/new-york/block/Dashboard03.vue
index 9ac29295a..33fef39ca 100644
--- a/apps/www/registry/new-york/block/Dashboard03.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard03.vue
@@ -5,15 +5,15 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { Button } from '@/registry/new-york/ui/button'
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'
+import { Textarea } from '@/registry/new-york/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
 import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/new-york/block/Dashboard04.vue b/apps/www/src/registry/new-york/block/Dashboard04.vue
similarity index 95%
rename from apps/www/registry/new-york/block/Dashboard04.vue
rename to apps/www/src/registry/new-york/block/Dashboard04.vue
index c20dd15bb..c58a30953 100644
--- a/apps/www/registry/new-york/block/Dashboard04.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard04.vue
@@ -5,13 +5,13 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/registry/new-york/block/Dashboard05.vue b/apps/www/src/registry/new-york/block/Dashboard05.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Dashboard05.vue
rename to apps/www/src/registry/new-york/block/Dashboard05.vue
index 6cf8a6a70..46a50475f 100644
--- a/apps/www/registry/new-york/block/Dashboard05.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard05.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,21 +14,21 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Pagination,
   PaginationList,
   PaginationNext,
   PaginationPrev,
-} from '@/lib/registry/new-york/ui/pagination'
-import { Progress } from '@/lib/registry/new-york/ui/progress'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+} from '@/registry/new-york/ui/pagination'
+import { Progress } from '@/registry/new-york/ui/progress'
+import { Separator } from '@/registry/new-york/ui/separator'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import {
   Table,
   TableBody,
@@ -36,18 +36,18 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
+} from '@/registry/new-york/ui/table'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
+} from '@/registry/new-york/ui/tooltip'
 import {
   CircleUser,
   Copy,
diff --git a/apps/www/registry/new-york/block/Dashboard06.vue b/apps/www/src/registry/new-york/block/Dashboard06.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Dashboard06.vue
rename to apps/www/src/registry/new-york/block/Dashboard06.vue
index 853623f92..9e77160a3 100644
--- a/apps/www/registry/new-york/block/Dashboard06.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard06.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,12 +14,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import {
   Table,
   TableBody,
@@ -27,18 +27,18 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
+} from '@/registry/new-york/ui/table'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
+} from '@/registry/new-york/ui/tooltip'
 import {
   CircleUser,
   File,
diff --git a/apps/www/registry/new-york/block/Dashboard07.vue b/apps/www/src/registry/new-york/block/Dashboard07.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Dashboard07.vue
rename to apps/www/src/registry/new-york/block/Dashboard07.vue
index e05e3e0a4..4975d6253 100644
--- a/apps/www/registry/new-york/block/Dashboard07.vue
+++ b/apps/www/src/registry/new-york/block/Dashboard07.vue
@@ -5,7 +5,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 
 import {
   Breadcrumb,
@@ -14,20 +14,20 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+} from '@/registry/new-york/ui/select'
+import { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'
 import {
   Table,
   TableBody,
@@ -35,14 +35,14 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+} from '@/registry/new-york/ui/table'
+import { Textarea } from '@/registry/new-york/ui/textarea'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
+} from '@/registry/new-york/ui/tooltip'
 import {
   ChevronLeft,
   CircleUser,
diff --git a/apps/www/registry/new-york/block/Sidebar01.vue b/apps/www/src/registry/new-york/block/Sidebar01.vue
similarity index 96%
rename from apps/www/registry/new-york/block/Sidebar01.vue
rename to apps/www/src/registry/new-york/block/Sidebar01.vue
index 26297e98b..8e63f1758 100644
--- a/apps/www/registry/new-york/block/Sidebar01.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar01.vue
@@ -16,15 +16,15 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Label } from '@/registry/new-york/ui/label'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
   Sidebar,
   SidebarContent,
@@ -40,7 +40,7 @@ import {
   SidebarProvider,
   SidebarRail,
   SidebarTrigger,
-} from '@/lib/registry/new-york/ui/sidebar'
+} from '@/registry/new-york/ui/sidebar'
 
 const data = {
   versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
diff --git a/apps/www/registry/new-york/block/Sidebar07.vue b/apps/www/src/registry/new-york/block/Sidebar07.vue
similarity index 97%
rename from apps/www/registry/new-york/block/Sidebar07.vue
rename to apps/www/src/registry/new-york/block/Sidebar07.vue
index 1857e41e8..0aa299b4f 100644
--- a/apps/www/registry/new-york/block/Sidebar07.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07.vue
@@ -10,7 +10,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
+} from '@/registry/new-york/ui/avatar'
 
 import {
   Breadcrumb,
@@ -19,13 +19,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/lib/registry/new-york/ui/collapsible'
+} from '@/registry/new-york/ui/collapsible'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,8 +35,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
   Sidebar,
   SidebarContent,
@@ -55,7 +55,7 @@ import {
   SidebarProvider,
   SidebarRail,
   SidebarTrigger,
-} from '@/lib/registry/new-york/ui/sidebar'
+} from '@/registry/new-york/ui/sidebar'
 import {
   AudioWaveform,
   BadgeCheck,
diff --git a/apps/www/registry/new-york/example/AccordionDemo.vue b/apps/www/src/registry/new-york/example/AccordionDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/AccordionDemo.vue
rename to apps/www/src/registry/new-york/example/AccordionDemo.vue
index 1dc12ffef..607b332bc 100644
--- a/apps/www/registry/new-york/example/AccordionDemo.vue
+++ b/apps/www/src/registry/new-york/example/AccordionDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'
 
 const defaultValue = 'item-1'
 
diff --git a/apps/www/registry/new-york/example/AlertDemo.vue b/apps/www/src/registry/new-york/example/AlertDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/AlertDemo.vue
rename to apps/www/src/registry/new-york/example/AlertDemo.vue
index 36085d65b..8229c2285 100644
--- a/apps/www/registry/new-york/example/AlertDemo.vue
+++ b/apps/www/src/registry/new-york/example/AlertDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
 import { RocketIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/AlertDestructiveDemo.vue b/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
similarity index 79%
rename from apps/www/registry/new-york/example/AlertDestructiveDemo.vue
rename to apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
index 42438cf6b..b99280f60 100644
--- a/apps/www/registry/new-york/example/AlertDestructiveDemo.vue
+++ b/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
 import { ExclamationTriangleIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/AlertDialogDemo.vue b/apps/www/src/registry/new-york/example/AlertDialogDemo.vue
similarity index 89%
rename from apps/www/registry/new-york/example/AlertDialogDemo.vue
rename to apps/www/src/registry/new-york/example/AlertDialogDemo.vue
index 442a9ab18..f0eb07419 100644
--- a/apps/www/registry/new-york/example/AlertDialogDemo.vue
+++ b/apps/www/src/registry/new-york/example/AlertDialogDemo.vue
@@ -9,8 +9,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from '@/lib/registry/new-york/ui/alert-dialog'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/alert-dialog'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/AreaChartCustomTooltip.vue b/apps/www/src/registry/new-york/example/AreaChartCustomTooltip.vue
similarity index 94%
rename from apps/www/registry/new-york/example/AreaChartCustomTooltip.vue
rename to apps/www/src/registry/new-york/example/AreaChartCustomTooltip.vue
index 5611e631a..4c07ea7db 100644
--- a/apps/www/registry/new-york/example/AreaChartCustomTooltip.vue
+++ b/apps/www/src/registry/new-york/example/AreaChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import { AreaChart } from '@/registry/new-york/ui/chart-area'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/new-york/example/AreaChartDemo.vue b/apps/www/src/registry/new-york/example/AreaChartDemo.vue
similarity index 93%
rename from apps/www/registry/new-york/example/AreaChartDemo.vue
rename to apps/www/src/registry/new-york/example/AreaChartDemo.vue
index 105be1cb0..d6f95ac4c 100644
--- a/apps/www/registry/new-york/example/AreaChartDemo.vue
+++ b/apps/www/src/registry/new-york/example/AreaChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import { AreaChart } from '@/registry/new-york/ui/chart-area'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/AreaChartSparkline.vue b/apps/www/src/registry/new-york/example/AreaChartSparkline.vue
similarity index 94%
rename from apps/www/registry/new-york/example/AreaChartSparkline.vue
rename to apps/www/src/registry/new-york/example/AreaChartSparkline.vue
index edf6c7d70..c477cd459 100644
--- a/apps/www/registry/new-york/example/AreaChartSparkline.vue
+++ b/apps/www/src/registry/new-york/example/AreaChartSparkline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import { AreaChart } from '@/registry/new-york/ui/chart-area'
 import { CurveType } from '@unovis/ts'
 
 const data = [
diff --git a/apps/www/registry/new-york/example/AspectRatioDemo.vue b/apps/www/src/registry/new-york/example/AspectRatioDemo.vue
similarity index 81%
rename from apps/www/registry/new-york/example/AspectRatioDemo.vue
rename to apps/www/src/registry/new-york/example/AspectRatioDemo.vue
index fdc51fe7d..b08df1418 100644
--- a/apps/www/registry/new-york/example/AspectRatioDemo.vue
+++ b/apps/www/src/registry/new-york/example/AspectRatioDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AspectRatio } from '@/lib/registry/new-york/ui/aspect-ratio'
+import { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/AutoFormApi.vue b/apps/www/src/registry/new-york/example/AutoFormApi.vue
similarity index 84%
rename from apps/www/registry/new-york/example/AutoFormApi.vue
rename to apps/www/src/registry/new-york/example/AutoFormApi.vue
index da16622c5..154578f9f 100644
--- a/apps/www/registry/new-york/example/AutoFormApi.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormApi.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h, onMounted, shallowRef } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AutoFormArray.vue b/apps/www/src/registry/new-york/example/AutoFormArray.vue
similarity index 80%
rename from apps/www/registry/new-york/example/AutoFormArray.vue
rename to apps/www/src/registry/new-york/example/AutoFormArray.vue
index a83ef2f2a..eada4c918 100644
--- a/apps/www/registry/new-york/example/AutoFormArray.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormArray.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AutoFormBasic.vue b/apps/www/src/registry/new-york/example/AutoFormBasic.vue
similarity index 94%
rename from apps/www/registry/new-york/example/AutoFormBasic.vue
rename to apps/www/src/registry/new-york/example/AutoFormBasic.vue
index 272cd3d2b..103a1f4d6 100644
--- a/apps/www/registry/new-york/example/AutoFormBasic.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormBasic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AutoFormConfirmPassword.vue b/apps/www/src/registry/new-york/example/AutoFormConfirmPassword.vue
similarity index 80%
rename from apps/www/registry/new-york/example/AutoFormConfirmPassword.vue
rename to apps/www/src/registry/new-york/example/AutoFormConfirmPassword.vue
index aa5e17dbd..6f73e9ee7 100644
--- a/apps/www/registry/new-york/example/AutoFormConfirmPassword.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormConfirmPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AutoFormControlled.vue b/apps/www/src/registry/new-york/example/AutoFormControlled.vue
similarity index 80%
rename from apps/www/registry/new-york/example/AutoFormControlled.vue
rename to apps/www/src/registry/new-york/example/AutoFormControlled.vue
index b7091b9f4..45228061a 100644
--- a/apps/www/registry/new-york/example/AutoFormControlled.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormControlled.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/new-york/example/AutoFormDependencies.vue b/apps/www/src/registry/new-york/example/AutoFormDependencies.vue
similarity index 90%
rename from apps/www/registry/new-york/example/AutoFormDependencies.vue
rename to apps/www/src/registry/new-york/example/AutoFormDependencies.vue
index e6ae0f1ce..d784b322b 100644
--- a/apps/www/registry/new-york/example/AutoFormDependencies.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormDependencies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 import { DependencyType } from '../ui/auto-form/interface'
diff --git a/apps/www/registry/new-york/example/AutoFormInputWithoutLabel.vue b/apps/www/src/registry/new-york/example/AutoFormInputWithoutLabel.vue
similarity index 82%
rename from apps/www/registry/new-york/example/AutoFormInputWithoutLabel.vue
rename to apps/www/src/registry/new-york/example/AutoFormInputWithoutLabel.vue
index 2eee8b6da..bcdfd310f 100644
--- a/apps/www/registry/new-york/example/AutoFormInputWithoutLabel.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormInputWithoutLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AutoFormSubObject.vue b/apps/www/src/registry/new-york/example/AutoFormSubObject.vue
similarity index 86%
rename from apps/www/registry/new-york/example/AutoFormSubObject.vue
rename to apps/www/src/registry/new-york/example/AutoFormSubObject.vue
index 5e21f0ff9..e904530dc 100644
--- a/apps/www/registry/new-york/example/AutoFormSubObject.vue
+++ b/apps/www/src/registry/new-york/example/AutoFormSubObject.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AutoForm } from '@/lib/registry/new-york/ui/auto-form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { AutoForm } from '@/registry/new-york/ui/auto-form'
+import { Button } from '@/registry/new-york/ui/button'
+import { toast } from '@/registry/new-york/ui/toast'
 import { h } from 'vue'
 import * as z from 'zod'
 
diff --git a/apps/www/registry/new-york/example/AvatarDemo.vue b/apps/www/src/registry/new-york/example/AvatarDemo.vue
similarity index 68%
rename from apps/www/registry/new-york/example/AvatarDemo.vue
rename to apps/www/src/registry/new-york/example/AvatarDemo.vue
index 0617b056f..97ad04a08 100644
--- a/apps/www/registry/new-york/example/AvatarDemo.vue
+++ b/apps/www/src/registry/new-york/example/AvatarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BadgeDemo.vue b/apps/www/src/registry/new-york/example/BadgeDemo.vue
similarity index 58%
rename from apps/www/registry/new-york/example/BadgeDemo.vue
rename to apps/www/src/registry/new-york/example/BadgeDemo.vue
index e00e92f60..e3615c2ca 100644
--- a/apps/www/registry/new-york/example/BadgeDemo.vue
+++ b/apps/www/src/registry/new-york/example/BadgeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BadgeDestructiveDemo.vue b/apps/www/src/registry/new-york/example/BadgeDestructiveDemo.vue
similarity index 67%
rename from apps/www/registry/new-york/example/BadgeDestructiveDemo.vue
rename to apps/www/src/registry/new-york/example/BadgeDestructiveDemo.vue
index d3edee533..a599d30c5 100644
--- a/apps/www/registry/new-york/example/BadgeDestructiveDemo.vue
+++ b/apps/www/src/registry/new-york/example/BadgeDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BadgeOutlineDemo.vue b/apps/www/src/registry/new-york/example/BadgeOutlineDemo.vue
similarity index 65%
rename from apps/www/registry/new-york/example/BadgeOutlineDemo.vue
rename to apps/www/src/registry/new-york/example/BadgeOutlineDemo.vue
index 6b2b959ce..44aa3c57e 100644
--- a/apps/www/registry/new-york/example/BadgeOutlineDemo.vue
+++ b/apps/www/src/registry/new-york/example/BadgeOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BadgeSecondaryDemo.vue b/apps/www/src/registry/new-york/example/BadgeSecondaryDemo.vue
similarity index 66%
rename from apps/www/registry/new-york/example/BadgeSecondaryDemo.vue
rename to apps/www/src/registry/new-york/example/BadgeSecondaryDemo.vue
index 82a68a87a..cb02f3250 100644
--- a/apps/www/registry/new-york/example/BadgeSecondaryDemo.vue
+++ b/apps/www/src/registry/new-york/example/BadgeSecondaryDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Badge } from '@/registry/new-york/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BarChartCustomTooltip.vue b/apps/www/src/registry/new-york/example/BarChartCustomTooltip.vue
similarity index 95%
rename from apps/www/registry/new-york/example/BarChartCustomTooltip.vue
rename to apps/www/src/registry/new-york/example/BarChartCustomTooltip.vue
index 0e19195ee..5fdba702f 100644
--- a/apps/www/registry/new-york/example/BarChartCustomTooltip.vue
+++ b/apps/www/src/registry/new-york/example/BarChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/new-york/example/BarChartDemo.vue b/apps/www/src/registry/new-york/example/BarChartDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BarChartDemo.vue
rename to apps/www/src/registry/new-york/example/BarChartDemo.vue
index 0d68f9b31..a5f116011 100644
--- a/apps/www/registry/new-york/example/BarChartDemo.vue
+++ b/apps/www/src/registry/new-york/example/BarChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/BarChartRounded.vue b/apps/www/src/registry/new-york/example/BarChartRounded.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BarChartRounded.vue
rename to apps/www/src/registry/new-york/example/BarChartRounded.vue
index e5e4280db..1b111b1c1 100644
--- a/apps/www/registry/new-york/example/BarChartRounded.vue
+++ b/apps/www/src/registry/new-york/example/BarChartRounded.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/BarChartStacked.vue b/apps/www/src/registry/new-york/example/BarChartStacked.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BarChartStacked.vue
rename to apps/www/src/registry/new-york/example/BarChartStacked.vue
index c139d47ca..ab84a04cc 100644
--- a/apps/www/registry/new-york/example/BarChartStacked.vue
+++ b/apps/www/src/registry/new-york/example/BarChartStacked.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/BreadcrumbDemo.vue b/apps/www/src/registry/new-york/example/BreadcrumbDemo.vue
similarity index 93%
rename from apps/www/registry/new-york/example/BreadcrumbDemo.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbDemo.vue
index 9d003b3a2..3a1c4a60f 100644
--- a/apps/www/registry/new-york/example/BreadcrumbDemo.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbDemo.vue
@@ -7,13 +7,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
similarity index 93%
rename from apps/www/registry/new-york/example/BreadcrumbDropdown.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
index fef8d10dd..55adf6a87 100644
--- a/apps/www/registry/new-york/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
@@ -6,13 +6,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/BreadcrumbEllipsisDemo.vue b/apps/www/src/registry/new-york/example/BreadcrumbEllipsisDemo.vue
similarity index 95%
rename from apps/www/registry/new-york/example/BreadcrumbEllipsisDemo.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbEllipsisDemo.vue
index 68d00baae..c666557a7 100644
--- a/apps/www/registry/new-york/example/BreadcrumbEllipsisDemo.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbEllipsisDemo.vue
@@ -7,7 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BreadcrumbLinkDemo.vue b/apps/www/src/registry/new-york/example/BreadcrumbLinkDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BreadcrumbLinkDemo.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbLinkDemo.vue
index 2107e89a9..5151a09b5 100644
--- a/apps/www/registry/new-york/example/BreadcrumbLinkDemo.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbLinkDemo.vue
@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/BreadcrumbResponsive.vue b/apps/www/src/registry/new-york/example/BreadcrumbResponsive.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BreadcrumbResponsive.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbResponsive.vue
index 305b106da..6affcc87e 100644
--- a/apps/www/registry/new-york/example/BreadcrumbResponsive.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbResponsive.vue
@@ -7,8 +7,8 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-import { Button } from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -18,13 +18,13 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/new-york/ui/drawer'
+} from '@/registry/new-york/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import { useMediaQuery } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/BreadcrumbSeparatorDemo.vue
rename to apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
index 1ce87d454..a02ca4289 100644
--- a/apps/www/registry/new-york/example/BreadcrumbSeparatorDemo.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
+} from '@/registry/new-york/ui/breadcrumb'
 import { SlashIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/ButtonAsChildDemo.vue b/apps/www/src/registry/new-york/example/ButtonAsChildDemo.vue
similarity index 69%
rename from apps/www/registry/new-york/example/ButtonAsChildDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonAsChildDemo.vue
index bd9a6a89f..b87fe19aa 100644
--- a/apps/www/registry/new-york/example/ButtonAsChildDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonAsChildDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonDemo.vue b/apps/www/src/registry/new-york/example/ButtonDemo.vue
similarity index 59%
rename from apps/www/registry/new-york/example/ButtonDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonDemo.vue
index 20e0a15ac..aa077e72a 100644
--- a/apps/www/registry/new-york/example/ButtonDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonDestructiveDemo.vue b/apps/www/src/registry/new-york/example/ButtonDestructiveDemo.vue
similarity index 67%
rename from apps/www/registry/new-york/example/ButtonDestructiveDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonDestructiveDemo.vue
index d1434cd31..2e9abfe3a 100644
--- a/apps/www/registry/new-york/example/ButtonDestructiveDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonDestructiveDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonGhostDemo.vue b/apps/www/src/registry/new-york/example/ButtonGhostDemo.vue
similarity index 64%
rename from apps/www/registry/new-york/example/ButtonGhostDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonGhostDemo.vue
index ded512926..597f4c0b6 100644
--- a/apps/www/registry/new-york/example/ButtonGhostDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonGhostDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/registry/new-york/example/ButtonIconDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/ButtonIconDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonIconDemo.vue
index e587c0e27..423f654e2 100644
--- a/apps/www/registry/new-york/example/ButtonIconDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonIconDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import { ChevronRightIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/ButtonLinkDemo.vue b/apps/www/src/registry/new-york/example/ButtonLinkDemo.vue
similarity index 64%
rename from apps/www/registry/new-york/example/ButtonLinkDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonLinkDemo.vue
index 17018fd96..458a2afba 100644
--- a/apps/www/registry/new-york/example/ButtonLinkDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonLinkDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/ButtonLoadingDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
index f17900a6e..8b111d687 100644
--- a/apps/www/registry/new-york/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import { ReloadIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/ButtonOutlineDemo.vue b/apps/www/src/registry/new-york/example/ButtonOutlineDemo.vue
similarity index 65%
rename from apps/www/registry/new-york/example/ButtonOutlineDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonOutlineDemo.vue
index 6bed28c5a..493aaef4c 100644
--- a/apps/www/registry/new-york/example/ButtonOutlineDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonSecondaryDemo.vue b/apps/www/src/registry/new-york/example/ButtonSecondaryDemo.vue
similarity index 66%
rename from apps/www/registry/new-york/example/ButtonSecondaryDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonSecondaryDemo.vue
index 29d29d635..72c7bb27b 100644
--- a/apps/www/registry/new-york/example/ButtonSecondaryDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonSecondaryDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
similarity index 76%
rename from apps/www/registry/new-york/example/ButtonWithIconDemo.vue
rename to apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
index df05f939a..53a79037c 100644
--- a/apps/www/registry/new-york/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import { EnvelopeOpenIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/CalendarDemo.vue b/apps/www/src/registry/new-york/example/CalendarDemo.vue
similarity index 83%
rename from apps/www/registry/new-york/example/CalendarDemo.vue
rename to apps/www/src/registry/new-york/example/CalendarDemo.vue
index b25ab14b9..92d0a2cca 100644
--- a/apps/www/registry/new-york/example/CalendarDemo.vue
+++ b/apps/www/src/registry/new-york/example/CalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Calendar } from '@/registry/new-york/ui/calendar'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/CalendarForm.vue b/apps/www/src/registry/new-york/example/CalendarForm.vue
similarity index 90%
rename from apps/www/registry/new-york/example/CalendarForm.vue
rename to apps/www/src/registry/new-york/example/CalendarForm.vue
index 9088aa6de..7b0afbd0b 100644
--- a/apps/www/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/registry/new-york/example/CalendarForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Calendar } from '@/registry/new-york/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -8,10 +9,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/registry/new-york/example/CalendarWithSelect.vue b/apps/www/src/registry/new-york/example/CalendarWithSelect.vue
similarity index 97%
rename from apps/www/registry/new-york/example/CalendarWithSelect.vue
rename to apps/www/src/registry/new-york/example/CalendarWithSelect.vue
index 8de222b94..9f920eaef 100644
--- a/apps/www/registry/new-york/example/CalendarWithSelect.vue
+++ b/apps/www/src/registry/new-york/example/CalendarWithSelect.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/new-york/ui/calendar'
+import { cn } from '@/lib/utils'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/select'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { useVModel } from '@vueuse/core'
 import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
diff --git a/apps/www/registry/new-york/example/CardChat.vue b/apps/www/src/registry/new-york/example/CardChat.vue
similarity index 93%
rename from apps/www/registry/new-york/example/CardChat.vue
rename to apps/www/src/registry/new-york/example/CardChat.vue
index 81db6384e..00eca58ee 100644
--- a/apps/www/registry/new-york/example/CardChat.vue
+++ b/apps/www/src/registry/new-york/example/CardChat.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
-} from '@/lib/registry/new-york/ui/card'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/card'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/tooltip'
 import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/CardDemo.vue b/apps/www/src/registry/new-york/example/CardDemo.vue
similarity index 92%
rename from apps/www/registry/new-york/example/CardDemo.vue
rename to apps/www/src/registry/new-york/example/CardDemo.vue
index 01b1f13f8..cce67f4b7 100644
--- a/apps/www/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/registry/new-york/example/CardDemo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,9 +8,8 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/card'
+import { Switch } from '@/registry/new-york/ui/switch'
 import { BellIcon, CheckIcon } from '@radix-icons/vue'
 
 const notifications = [
diff --git a/apps/www/registry/new-york/example/CardFormDemo.vue b/apps/www/src/registry/new-york/example/CardFormDemo.vue
similarity index 86%
rename from apps/www/registry/new-york/example/CardFormDemo.vue
rename to apps/www/src/registry/new-york/example/CardFormDemo.vue
index 787ad2f5b..d775f64c1 100644
--- a/apps/www/registry/new-york/example/CardFormDemo.vue
+++ b/apps/www/src/registry/new-york/example/CardFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CardStats.vue b/apps/www/src/registry/new-york/example/CardStats.vue
similarity index 92%
rename from apps/www/registry/new-york/example/CardStats.vue
rename to apps/www/src/registry/new-york/example/CardStats.vue
index 5d21061b4..7f5998f9e 100644
--- a/apps/www/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/registry/new-york/example/CardStats.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
-import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { BarChart } from '@/registry/new-york/ui/chart-bar'
+import { LineChart } from '@/registry/new-york/ui/chart-line'
 import { VisScatter } from '@unovis/vue'
 
 type Data = typeof data[number]
diff --git a/apps/www/registry/new-york/example/CardWithForm.vue b/apps/www/src/registry/new-york/example/CardWithForm.vue
similarity index 86%
rename from apps/www/registry/new-york/example/CardWithForm.vue
rename to apps/www/src/registry/new-york/example/CardWithForm.vue
index 4a6a1e09d..d1bfdb8d2 100644
--- a/apps/www/registry/new-york/example/CardWithForm.vue
+++ b/apps/www/src/registry/new-york/example/CardWithForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
similarity index 95%
rename from apps/www/registry/new-york/example/Cards/ActivityGoal.vue
rename to apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
index 3eacaa08c..01df84163 100644
--- a/apps/www/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
+} from '@/registry/new-york/ui/card'
 import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 
diff --git a/apps/www/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/registry/new-york/example/Cards/DataTable.vue
similarity index 96%
rename from apps/www/registry/new-york/example/Cards/DataTable.vue
rename to apps/www/src/registry/new-york/example/Cards/DataTable.vue
index 395ac72bf..a3837e20c 100644
--- a/apps/www/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/registry/new-york/example/Cards/DataTable.vue
@@ -5,17 +5,18 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/new-york/ui/table'
 import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
diff --git a/apps/www/registry/new-york/example/Cards/Metric.vue b/apps/www/src/registry/new-york/example/Cards/Metric.vue
similarity index 98%
rename from apps/www/registry/new-york/example/Cards/Metric.vue
rename to apps/www/src/registry/new-york/example/Cards/Metric.vue
index 1e62c79f2..280b55340 100644
--- a/apps/www/registry/new-york/example/Cards/Metric.vue
+++ b/apps/www/src/registry/new-york/example/Cards/Metric.vue
@@ -5,7 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
+} from '@/registry/new-york/ui/card'
 import { Line } from '@unovis/ts'
 import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
 
diff --git a/apps/www/registry/new-york/example/CarouselApi.vue b/apps/www/src/registry/new-york/example/CarouselApi.vue
similarity index 86%
rename from apps/www/registry/new-york/example/CarouselApi.vue
rename to apps/www/src/registry/new-york/example/CarouselApi.vue
index 7d19be8a3..2487e138b 100644
--- a/apps/www/registry/new-york/example/CarouselApi.vue
+++ b/apps/www/src/registry/new-york/example/CarouselApi.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { CarouselApi } from '@/lib/registry/new-york/ui/carousel'
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import type { CarouselApi } from '@/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 import { watchOnce } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/CarouselDemo.vue b/apps/www/src/registry/new-york/example/CarouselDemo.vue
similarity index 82%
rename from apps/www/registry/new-york/example/CarouselDemo.vue
rename to apps/www/src/registry/new-york/example/CarouselDemo.vue
index b3a19ec43..aa27e4261 100644
--- a/apps/www/registry/new-york/example/CarouselDemo.vue
+++ b/apps/www/src/registry/new-york/example/CarouselDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CarouselOrientation.vue b/apps/www/src/registry/new-york/example/CarouselOrientation.vue
similarity index 84%
rename from apps/www/registry/new-york/example/CarouselOrientation.vue
rename to apps/www/src/registry/new-york/example/CarouselOrientation.vue
index c51938514..eea02709c 100644
--- a/apps/www/registry/new-york/example/CarouselOrientation.vue
+++ b/apps/www/src/registry/new-york/example/CarouselOrientation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CarouselPlugin.vue b/apps/www/src/registry/new-york/example/CarouselPlugin.vue
similarity index 87%
rename from apps/www/registry/new-york/example/CarouselPlugin.vue
rename to apps/www/src/registry/new-york/example/CarouselPlugin.vue
index b65655967..988d742fd 100644
--- a/apps/www/registry/new-york/example/CarouselPlugin.vue
+++ b/apps/www/src/registry/new-york/example/CarouselPlugin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 import Autoplay from 'embla-carousel-autoplay'
 
 const plugin = Autoplay({
diff --git a/apps/www/registry/new-york/example/CarouselSize.vue b/apps/www/src/registry/new-york/example/CarouselSize.vue
similarity index 84%
rename from apps/www/registry/new-york/example/CarouselSize.vue
rename to apps/www/src/registry/new-york/example/CarouselSize.vue
index 525a65634..d1ef45eff 100644
--- a/apps/www/registry/new-york/example/CarouselSize.vue
+++ b/apps/www/src/registry/new-york/example/CarouselSize.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/registry/new-york/example/CarouselSpacing.vue
similarity index 84%
rename from apps/www/registry/new-york/example/CarouselSpacing.vue
rename to apps/www/src/registry/new-york/example/CarouselSpacing.vue
index 062850161..5b5e2b428 100644
--- a/apps/www/registry/new-york/example/CarouselSpacing.vue
+++ b/apps/www/src/registry/new-york/example/CarouselSpacing.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CarouselThumbnails.vue b/apps/www/src/registry/new-york/example/CarouselThumbnails.vue
similarity index 93%
rename from apps/www/registry/new-york/example/CarouselThumbnails.vue
rename to apps/www/src/registry/new-york/example/CarouselThumbnails.vue
index 5966aea60..f2fa71c08 100644
--- a/apps/www/registry/new-york/example/CarouselThumbnails.vue
+++ b/apps/www/src/registry/new-york/example/CarouselThumbnails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
-import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'
 import { watchOnce } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/CheckboxDemo.vue b/apps/www/src/registry/new-york/example/CheckboxDemo.vue
similarity index 83%
rename from apps/www/registry/new-york/example/CheckboxDemo.vue
rename to apps/www/src/registry/new-york/example/CheckboxDemo.vue
index 5f58ce160..ddb6c55d9 100644
--- a/apps/www/registry/new-york/example/CheckboxDemo.vue
+++ b/apps/www/src/registry/new-york/example/CheckboxDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CheckboxDisabled.vue b/apps/www/src/registry/new-york/example/CheckboxDisabled.vue
similarity index 84%
rename from apps/www/registry/new-york/example/CheckboxDisabled.vue
rename to apps/www/src/registry/new-york/example/CheckboxDisabled.vue
index f754015be..bb8e04847 100644
--- a/apps/www/registry/new-york/example/CheckboxDisabled.vue
+++ b/apps/www/src/registry/new-york/example/CheckboxDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/registry/new-york/example/CheckboxFormMultiple.vue
similarity index 91%
rename from apps/www/registry/new-york/example/CheckboxFormMultiple.vue
rename to apps/www/src/registry/new-york/example/CheckboxFormMultiple.vue
index c3c372666..fcf47e083 100644
--- a/apps/www/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/registry/new-york/example/CheckboxFormMultiple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Button } from '@/registry/new-york/ui/button'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -8,8 +8,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/CheckboxFormSingle.vue b/apps/www/src/registry/new-york/example/CheckboxFormSingle.vue
similarity index 87%
rename from apps/www/registry/new-york/example/CheckboxFormSingle.vue
rename to apps/www/src/registry/new-york/example/CheckboxFormSingle.vue
index 7f3497b27..b816ac428 100644
--- a/apps/www/registry/new-york/example/CheckboxFormSingle.vue
+++ b/apps/www/src/registry/new-york/example/CheckboxFormSingle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Button } from '@/registry/new-york/ui/button'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -8,8 +8,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/CheckboxWithText.vue b/apps/www/src/registry/new-york/example/CheckboxWithText.vue
similarity index 89%
rename from apps/www/registry/new-york/example/CheckboxWithText.vue
rename to apps/www/src/registry/new-york/example/CheckboxWithText.vue
index 9dcdf91af..3cb95573a 100644
--- a/apps/www/registry/new-york/example/CheckboxWithText.vue
+++ b/apps/www/src/registry/new-york/example/CheckboxWithText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/registry/new-york/example/CollapsibleDemo.vue
similarity index 91%
rename from apps/www/registry/new-york/example/CollapsibleDemo.vue
rename to apps/www/src/registry/new-york/example/CollapsibleDemo.vue
index ad1c0d16a..828bafce1 100644
--- a/apps/www/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/registry/new-york/example/CollapsibleDemo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/lib/registry/new-york/ui/collapsible'
+} from '@/registry/new-york/ui/collapsible'
 
 import { CaretSortIcon } from '@radix-icons/vue'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
similarity index 93%
rename from apps/www/registry/new-york/example/ComboboxDemo.vue
rename to apps/www/src/registry/new-york/example/ComboboxDemo.vue
index abc7941cf..41b8c380d 100644
--- a/apps/www/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
 import {
   Command,
   CommandEmpty,
@@ -7,14 +9,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/new-york/ui/command'
-
+} from '@/registry/new-york/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
 import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
similarity index 94%
rename from apps/www/registry/new-york/example/ComboboxDropdownMenu.vue
rename to apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
index 6176ac94d..f42c57a0a 100644
--- a/apps/www/registry/new-york/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -7,7 +7,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/command'
 
 import {
   DropdownMenu,
@@ -21,7 +21,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/ComboboxForm.vue b/apps/www/src/registry/new-york/example/ComboboxForm.vue
similarity index 93%
rename from apps/www/registry/new-york/example/ComboboxForm.vue
rename to apps/www/src/registry/new-york/example/ComboboxForm.vue
index e3be9aac0..02b5a4d08 100644
--- a/apps/www/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -7,7 +8,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/command'
 import {
   FormControl,
   FormDescription,
@@ -15,15 +16,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
+import { toast } from '@/registry/new-york/ui/toast'
 import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/registry/new-york/example/ComboboxPopover.vue
similarity index 92%
rename from apps/www/registry/new-york/example/ComboboxPopover.vue
rename to apps/www/src/registry/new-york/example/ComboboxPopover.vue
index f9e31e436..7bdbee5a2 100644
--- a/apps/www/registry/new-york/example/ComboboxPopover.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
 import {
   Command,
@@ -8,12 +8,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/registry/new-york/ui/popover'
 import { ref } from 'vue'
 
 interface Status {
diff --git a/apps/www/registry/new-york/example/ComboboxResponsive.vue b/apps/www/src/registry/new-york/example/ComboboxResponsive.vue
similarity index 87%
rename from apps/www/registry/new-york/example/ComboboxResponsive.vue
rename to apps/www/src/registry/new-york/example/ComboboxResponsive.vue
index cb61a111c..b1e591566 100644
--- a/apps/www/registry/new-york/example/ComboboxResponsive.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxResponsive.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Button } from '@/registry/new-york/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/CommandDemo.vue b/apps/www/src/registry/new-york/example/CommandDemo.vue
similarity index 97%
rename from apps/www/registry/new-york/example/CommandDemo.vue
rename to apps/www/src/registry/new-york/example/CommandDemo.vue
index 38db804d1..e1c99bdc6 100644
--- a/apps/www/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/registry/new-york/example/CommandDemo.vue
@@ -8,7 +8,7 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/command'
 
 import {
   CalendarIcon,
diff --git a/apps/www/registry/new-york/example/CommandDialogDemo.vue b/apps/www/src/registry/new-york/example/CommandDialogDemo.vue
similarity index 97%
rename from apps/www/registry/new-york/example/CommandDialogDemo.vue
rename to apps/www/src/registry/new-york/example/CommandDialogDemo.vue
index 702435372..c986282f7 100644
--- a/apps/www/registry/new-york/example/CommandDialogDemo.vue
+++ b/apps/www/src/registry/new-york/example/CommandDialogDemo.vue
@@ -7,7 +7,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '@/lib/registry/new-york/ui/command'
+} from '@/registry/new-york/ui/command'
 
 import { useMagicKeys } from '@vueuse/core'
 import { ref, watch } from 'vue'
diff --git a/apps/www/registry/new-york/example/ContextMenuDemo.vue b/apps/www/src/registry/new-york/example/ContextMenuDemo.vue
similarity index 97%
rename from apps/www/registry/new-york/example/ContextMenuDemo.vue
rename to apps/www/src/registry/new-york/example/ContextMenuDemo.vue
index 2caa8bd4b..7d169a29a 100644
--- a/apps/www/registry/new-york/example/ContextMenuDemo.vue
+++ b/apps/www/src/registry/new-york/example/ContextMenuDemo.vue
@@ -13,7 +13,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '@/lib/registry/new-york/ui/context-menu'
+} from '@/registry/new-york/ui/context-menu'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/CustomChartTooltip.vue b/apps/www/src/registry/new-york/example/CustomChartTooltip.vue
similarity index 90%
rename from apps/www/registry/new-york/example/CustomChartTooltip.vue
rename to apps/www/src/registry/new-york/example/CustomChartTooltip.vue
index ac7a6daab..279cd46fb 100644
--- a/apps/www/registry/new-york/example/CustomChartTooltip.vue
+++ b/apps/www/src/registry/new-york/example/CustomChartTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
+import { Card, CardContent } from '@/registry/new-york/ui/card'
 
 defineProps<{
   title?: string
diff --git a/apps/www/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/DataTableColumnPinningDemo.vue
rename to apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
index a5af1d852..8c8e0399a 100644
--- a/apps/www/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -5,16 +5,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { cn, valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Table,
   TableBody,
@@ -22,8 +23,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { cn, valueUpdater } from '@/lib/utils'
+} from '@/registry/new-york/ui/table'
 import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   createColumnHelper,
diff --git a/apps/www/registry/new-york/example/DataTableDemo.vue b/apps/www/src/registry/new-york/example/DataTableDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/DataTableDemo.vue
rename to apps/www/src/registry/new-york/example/DataTableDemo.vue
index 7b086ce6f..eb2229ebe 100644
--- a/apps/www/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/registry/new-york/example/DataTableDemo.vue
@@ -6,16 +6,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/dropdown-menu'
 
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/new-york/ui/table'
 import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
diff --git a/apps/www/registry/new-york/example/DataTableDemoColumn.vue b/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
similarity index 91%
rename from apps/www/registry/new-york/example/DataTableDemoColumn.vue
rename to apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
index bed8a0959..3dc27c87b 100644
--- a/apps/www/registry/new-york/example/DataTableDemoColumn.vue
+++ b/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Button } from '@/registry/new-york/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
 import { DotsHorizontalIcon } from '@radix-icons/vue'
 
 defineProps<{
diff --git a/apps/www/registry/new-york/example/DataTableReactiveDemo.vue b/apps/www/src/registry/new-york/example/DataTableReactiveDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/DataTableReactiveDemo.vue
rename to apps/www/src/registry/new-york/example/DataTableReactiveDemo.vue
index d72b80b4c..b67b674fe 100644
--- a/apps/www/registry/new-york/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/registry/new-york/example/DataTableReactiveDemo.vue
@@ -6,16 +6,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { valueUpdater } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
+} from '@/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Table,
   TableBody,
@@ -23,8 +24,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { valueUpdater } from '@/lib/utils'
+} from '@/registry/new-york/ui/table'
 import {
   FlexRender,
   getCoreRowModel,
diff --git a/apps/www/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/registry/new-york/example/DatePickerDemo.vue
similarity index 80%
rename from apps/www/registry/new-york/example/DatePickerDemo.vue
rename to apps/www/src/registry/new-york/example/DatePickerDemo.vue
index f9f18dd49..e8592b7ea 100644
--- a/apps/www/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerDemo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import {
   DateFormatter,
   type DateValue,
diff --git a/apps/www/registry/new-york/example/DatePickerForm.vue b/apps/www/src/registry/new-york/example/DatePickerForm.vue
similarity index 90%
rename from apps/www/registry/new-york/example/DatePickerForm.vue
rename to apps/www/src/registry/new-york/example/DatePickerForm.vue
index 7323533da..506750d9a 100644
--- a/apps/www/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Calendar } from '@/registry/new-york/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -8,10 +9,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
 import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/registry/new-york/example/DatePickerWithIndependentMonths.vue b/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
similarity index 98%
rename from apps/www/registry/new-york/example/DatePickerWithIndependentMonths.vue
rename to apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
index 0978b8738..2b53713d0 100644
--- a/apps/www/registry/new-york/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 
+import { Button, buttonVariants } from '@/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/registry/new-york/ui/popover'
+
 import {
   RangeCalendarCell,
   RangeCalendarCellTrigger,
@@ -14,9 +16,7 @@ import {
   RangeCalendarGridHead,
   RangeCalendarGridRow,
   RangeCalendarHeadCell,
-} from '@/lib/registry/new-york/ui/range-calendar'
-
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/range-calendar'
 import {
   CalendarDate,
   type DateValue,
diff --git a/apps/www/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
similarity index 85%
rename from apps/www/registry/new-york/example/DatePickerWithPresets.vue
rename to apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
index 9079621fb..f661c8cf2 100644
--- a/apps/www/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'
 import {
   DateFormatter,
   type DateValue,
diff --git a/apps/www/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/registry/new-york/example/DatePickerWithRange.vue
similarity index 86%
rename from apps/www/registry/new-york/example/DatePickerWithRange.vue
rename to apps/www/src/registry/new-york/example/DatePickerWithRange.vue
index 0217d3a04..9dd653110 100644
--- a/apps/www/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithRange.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { DateRange } from 'reka-ui'
-import { Button } from '@/lib/registry/new-york/ui/button'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 import { cn } from '@/lib/utils'
+
+import { Button } from '@/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { RangeCalendar } from '@/registry/new-york/ui/range-calendar'
 import {
   CalendarDate,
   DateFormatter,
diff --git a/apps/www/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
similarity index 86%
rename from apps/www/registry/new-york/example/DialogCustomCloseButton.vue
rename to apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
index 751a9a559..b99540db7 100644
--- a/apps/www/registry/new-york/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogClose,
@@ -9,9 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import { CopyIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/DialogDemo.vue b/apps/www/src/registry/new-york/example/DialogDemo.vue
similarity index 85%
rename from apps/www/registry/new-york/example/DialogDemo.vue
rename to apps/www/src/registry/new-york/example/DialogDemo.vue
index d994ed21d..180ee6e7b 100644
--- a/apps/www/registry/new-york/example/DialogDemo.vue
+++ b/apps/www/src/registry/new-york/example/DialogDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,9 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/dialog'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/DialogForm.vue b/apps/www/src/registry/new-york/example/DialogForm.vue
similarity index 88%
rename from apps/www/registry/new-york/example/DialogForm.vue
rename to apps/www/src/registry/new-york/example/DialogForm.vue
index 43595df96..74f94a3ff 100644
--- a/apps/www/registry/new-york/example/DialogForm.vue
+++ b/apps/www/src/registry/new-york/example/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 import {
   Form,
   FormControl,
@@ -17,10 +17,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+import { Input } from '@/registry/new-york/ui/input'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { h } from 'vue'
 import * as z from 'zod'
diff --git a/apps/www/registry/new-york/example/DialogScrollBodyDemo.vue b/apps/www/src/registry/new-york/example/DialogScrollBodyDemo.vue
similarity index 93%
rename from apps/www/registry/new-york/example/DialogScrollBodyDemo.vue
rename to apps/www/src/registry/new-york/example/DialogScrollBodyDemo.vue
index e1529a243..be0d97091 100644
--- a/apps/www/registry/new-york/example/DialogScrollBodyDemo.vue
+++ b/apps/www/src/registry/new-york/example/DialogScrollBodyDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/DialogScrollOverlayDemo.vue b/apps/www/src/registry/new-york/example/DialogScrollOverlayDemo.vue
similarity index 91%
rename from apps/www/registry/new-york/example/DialogScrollOverlayDemo.vue
rename to apps/www/src/registry/new-york/example/DialogScrollOverlayDemo.vue
index fae163fdd..37dd554b3 100644
--- a/apps/www/registry/new-york/example/DialogScrollOverlayDemo.vue
+++ b/apps/www/src/registry/new-york/example/DialogScrollOverlayDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogDescription,
@@ -8,7 +8,7 @@ import {
   DialogScrollContent,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/DonutChartColor.vue b/apps/www/src/registry/new-york/example/DonutChartColor.vue
similarity index 94%
rename from apps/www/registry/new-york/example/DonutChartColor.vue
rename to apps/www/src/registry/new-york/example/DonutChartColor.vue
index 0ae5b157e..98f41969b 100644
--- a/apps/www/registry/new-york/example/DonutChartColor.vue
+++ b/apps/www/src/registry/new-york/example/DonutChartColor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+import { DonutChart } from '@/registry/new-york/ui/chart-donut'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/DonutChartCustomTooltip.vue b/apps/www/src/registry/new-york/example/DonutChartCustomTooltip.vue
similarity index 93%
rename from apps/www/registry/new-york/example/DonutChartCustomTooltip.vue
rename to apps/www/src/registry/new-york/example/DonutChartCustomTooltip.vue
index d7e721fb0..d0bcdcc51 100644
--- a/apps/www/registry/new-york/example/DonutChartCustomTooltip.vue
+++ b/apps/www/src/registry/new-york/example/DonutChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+import { DonutChart } from '@/registry/new-york/ui/chart-donut'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/src/registry/new-york/example/DonutChartDemo.vue b/apps/www/src/registry/new-york/example/DonutChartDemo.vue
new file mode 100644
index 000000000..eb0152710
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/DonutChartDemo.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { DonutChart } from '@/registry/new-york/ui/chart-donut'
+
+const data = [
+  {
+    name: 'Jan',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+  {
+    name: 'Feb',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+  {
+    name: 'Mar',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+  {
+    name: 'Apr',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+  {
+    name: 'May',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+  {
+    name: 'Jun',
+    total: Math.floor(Math.random() * 2000) + 500,
+    predicted: Math.floor(Math.random() * 2000) + 500,
+  },
+]
+
+function valueFormatter(tick: number | Date) {
+  return typeof tick === 'number'
+    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+    : ''
+}
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+  />
+</template>
diff --git a/apps/www/registry/new-york/example/DonutChartPie.vue b/apps/www/src/registry/new-york/example/DonutChartPie.vue
similarity index 92%
rename from apps/www/registry/new-york/example/DonutChartPie.vue
rename to apps/www/src/registry/new-york/example/DonutChartPie.vue
index 9f29aea42..8fa1f7deb 100644
--- a/apps/www/registry/new-york/example/DonutChartPie.vue
+++ b/apps/www/src/registry/new-york/example/DonutChartPie.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+import { DonutChart } from '@/registry/new-york/ui/chart-donut'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/registry/new-york/example/DrawerDemo.vue b/apps/www/src/registry/new-york/example/DrawerDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/DrawerDemo.vue
rename to apps/www/src/registry/new-york/example/DrawerDemo.vue
index 877a7d3b0..8ed2ae6b2 100644
--- a/apps/www/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/registry/new-york/example/DrawerDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -9,7 +9,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/new-york/ui/drawer'
+} from '@/registry/new-york/ui/drawer'
 import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/DrawerDialog.vue b/apps/www/src/registry/new-york/example/DrawerDialog.vue
similarity index 89%
rename from apps/www/registry/new-york/example/DrawerDialog.vue
rename to apps/www/src/registry/new-york/example/DrawerDialog.vue
index ada16fed3..63a322c9f 100644
--- a/apps/www/registry/new-york/example/DrawerDialog.vue
+++ b/apps/www/src/registry/new-york/example/DrawerDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 import {
   Drawer,
   DrawerClose,
@@ -17,9 +17,9 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/new-york/ui/drawer'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/drawer'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/src/registry/new-york/example/DropdownMenuCheckboxes.vue
similarity index 91%
rename from apps/www/registry/new-york/example/DropdownMenuCheckboxes.vue
rename to apps/www/src/registry/new-york/example/DropdownMenuCheckboxes.vue
index 4c6ef62a5..b3335c599 100644
--- a/apps/www/registry/new-york/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DropdownMenuCheckboxItemProps } from 'reka-ui'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -8,7 +8,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import { ref } from 'vue'
 
 type Checked = DropdownMenuCheckboxItemProps['modelValue']
diff --git a/apps/www/registry/new-york/example/DropdownMenuDemo.vue b/apps/www/src/registry/new-york/example/DropdownMenuDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/DropdownMenuDemo.vue
rename to apps/www/src/registry/new-york/example/DropdownMenuDemo.vue
index 8d6aedd9b..509124612 100644
--- a/apps/www/registry/new-york/example/DropdownMenuDemo.vue
+++ b/apps/www/src/registry/new-york/example/DropdownMenuDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +13,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/DropdownMenuRadioGroup.vue b/apps/www/src/registry/new-york/example/DropdownMenuRadioGroup.vue
similarity index 89%
rename from apps/www/registry/new-york/example/DropdownMenuRadioGroup.vue
rename to apps/www/src/registry/new-york/example/DropdownMenuRadioGroup.vue
index 0a83cf650..42d93dad0 100644
--- a/apps/www/registry/new-york/example/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/registry/new-york/example/DropdownMenuRadioGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,7 +8,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
+} from '@/registry/new-york/ui/dropdown-menu'
 import { ref } from 'vue'
 
 const position = ref('bottom')
diff --git a/apps/www/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/registry/new-york/example/HoverCardDemo.vue
similarity index 88%
rename from apps/www/registry/new-york/example/HoverCardDemo.vue
rename to apps/www/src/registry/new-york/example/HoverCardDemo.vue
index 2ac6a4d57..337727f98 100644
--- a/apps/www/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/registry/new-york/example/HoverCardDemo.vue
@@ -3,14 +3,14 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/lib/registry/new-york/ui/avatar'
+} from '@/registry/new-york/ui/avatar'
 
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
+} from '@/registry/new-york/ui/hover-card'
 import { CalendarIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/InputDemo.vue b/apps/www/src/registry/new-york/example/InputDemo.vue
similarity index 64%
rename from apps/www/registry/new-york/example/InputDemo.vue
rename to apps/www/src/registry/new-york/example/InputDemo.vue
index bab30342a..d08188134 100644
--- a/apps/www/registry/new-york/example/InputDemo.vue
+++ b/apps/www/src/registry/new-york/example/InputDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Input } from '@/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/InputDisabled.vue b/apps/www/src/registry/new-york/example/InputDisabled.vue
similarity index 66%
rename from apps/www/registry/new-york/example/InputDisabled.vue
rename to apps/www/src/registry/new-york/example/InputDisabled.vue
index be43b244b..7285d8213 100644
--- a/apps/www/registry/new-york/example/InputDisabled.vue
+++ b/apps/www/src/registry/new-york/example/InputDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Input } from '@/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/InputFile.vue b/apps/www/src/registry/new-york/example/InputFile.vue
similarity index 64%
rename from apps/www/registry/new-york/example/InputFile.vue
rename to apps/www/src/registry/new-york/example/InputFile.vue
index 899bda7bc..1ba252acc 100644
--- a/apps/www/registry/new-york/example/InputFile.vue
+++ b/apps/www/src/registry/new-york/example/InputFile.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/InputForm.vue b/apps/www/src/registry/new-york/example/InputForm.vue
similarity index 85%
rename from apps/www/registry/new-york/example/InputForm.vue
rename to apps/www/src/registry/new-york/example/InputForm.vue
index d8e139c79..11e4a78c5 100644
--- a/apps/www/registry/new-york/example/InputForm.vue
+++ b/apps/www/src/registry/new-york/example/InputForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { toast } from '@/lib/registry/new-york/ui/toast/use-toast'
+} from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
+import { toast } from '@/registry/new-york/ui/toast/use-toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/InputFormAutoAnimate.vue b/apps/www/src/registry/new-york/example/InputFormAutoAnimate.vue
similarity index 86%
rename from apps/www/registry/new-york/example/InputFormAutoAnimate.vue
rename to apps/www/src/registry/new-york/example/InputFormAutoAnimate.vue
index a09979968..f046babdf 100644
--- a/apps/www/registry/new-york/example/InputFormAutoAnimate.vue
+++ b/apps/www/src/registry/new-york/example/InputFormAutoAnimate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
+import { toast } from '@/registry/new-york/ui/toast'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/registry/new-york/example/InputWithButton.vue b/apps/www/src/registry/new-york/example/InputWithButton.vue
similarity index 67%
rename from apps/www/registry/new-york/example/InputWithButton.vue
rename to apps/www/src/registry/new-york/example/InputWithButton.vue
index 5101ca951..f87d718c0 100644
--- a/apps/www/registry/new-york/example/InputWithButton.vue
+++ b/apps/www/src/registry/new-york/example/InputWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/InputWithIcon.vue b/apps/www/src/registry/new-york/example/InputWithIcon.vue
similarity index 87%
rename from apps/www/registry/new-york/example/InputWithIcon.vue
rename to apps/www/src/registry/new-york/example/InputWithIcon.vue
index d57d6e425..ee9e17d19 100644
--- a/apps/www/registry/new-york/example/InputWithIcon.vue
+++ b/apps/www/src/registry/new-york/example/InputWithIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Input } from '@/registry/new-york/ui/input'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
 </script>
 
diff --git a/apps/www/registry/new-york/example/InputWithLabel.vue b/apps/www/src/registry/new-york/example/InputWithLabel.vue
similarity index 65%
rename from apps/www/registry/new-york/example/InputWithLabel.vue
rename to apps/www/src/registry/new-york/example/InputWithLabel.vue
index 5b9c06f07..598dba370 100644
--- a/apps/www/registry/new-york/example/InputWithLabel.vue
+++ b/apps/www/src/registry/new-york/example/InputWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/LabelDemo.vue b/apps/www/src/registry/new-york/example/LabelDemo.vue
similarity index 65%
rename from apps/www/registry/new-york/example/LabelDemo.vue
rename to apps/www/src/registry/new-york/example/LabelDemo.vue
index d2cb788f2..be9e7d884 100644
--- a/apps/www/registry/new-york/example/LabelDemo.vue
+++ b/apps/www/src/registry/new-york/example/LabelDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { Label } from '@/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/LineChartCustomTooltip.vue b/apps/www/src/registry/new-york/example/LineChartCustomTooltip.vue
similarity index 98%
rename from apps/www/registry/new-york/example/LineChartCustomTooltip.vue
rename to apps/www/src/registry/new-york/example/LineChartCustomTooltip.vue
index 11b023dc8..d752eb593 100644
--- a/apps/www/registry/new-york/example/LineChartCustomTooltip.vue
+++ b/apps/www/src/registry/new-york/example/LineChartCustomTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { LineChart } from '@/registry/new-york/ui/chart-line'
 import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
diff --git a/apps/www/registry/new-york/example/LineChartDemo.vue b/apps/www/src/registry/new-york/example/LineChartDemo.vue
similarity index 98%
rename from apps/www/registry/new-york/example/LineChartDemo.vue
rename to apps/www/src/registry/new-york/example/LineChartDemo.vue
index ec6fe7a73..851476fbd 100644
--- a/apps/www/registry/new-york/example/LineChartDemo.vue
+++ b/apps/www/src/registry/new-york/example/LineChartDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { LineChart } from '@/registry/new-york/ui/chart-line'
 
 const data = [
   {
diff --git a/apps/www/registry/new-york/example/LineChartSparkline.vue b/apps/www/src/registry/new-york/example/LineChartSparkline.vue
similarity index 98%
rename from apps/www/registry/new-york/example/LineChartSparkline.vue
rename to apps/www/src/registry/new-york/example/LineChartSparkline.vue
index 86f074ae9..ccdbff5d2 100644
--- a/apps/www/registry/new-york/example/LineChartSparkline.vue
+++ b/apps/www/src/registry/new-york/example/LineChartSparkline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { LineChart } from '@/registry/new-york/ui/chart-line'
 
 const data = [
   {
diff --git a/apps/www/registry/new-york/example/MenubarDemo.vue b/apps/www/src/registry/new-york/example/MenubarDemo.vue
similarity index 98%
rename from apps/www/registry/new-york/example/MenubarDemo.vue
rename to apps/www/src/registry/new-york/example/MenubarDemo.vue
index 16455c041..98f972e47 100644
--- a/apps/www/registry/new-york/example/MenubarDemo.vue
+++ b/apps/www/src/registry/new-york/example/MenubarDemo.vue
@@ -13,7 +13,7 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from '@/lib/registry/new-york/ui/menubar'
+} from '@/registry/new-york/ui/menubar'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/registry/new-york/example/NavigationMenuDemo.vue
similarity index 99%
rename from apps/www/registry/new-york/example/NavigationMenuDemo.vue
rename to apps/www/src/registry/new-york/example/NavigationMenuDemo.vue
index 65c20ac43..c26838498 100644
--- a/apps/www/registry/new-york/example/NavigationMenuDemo.vue
+++ b/apps/www/src/registry/new-york/example/NavigationMenuDemo.vue
@@ -7,7 +7,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from '@/lib/registry/new-york/ui/navigation-menu'
+} from '@/registry/new-york/ui/navigation-menu'
 
 const components: { title: string, href: string, description: string }[] = [
   {
diff --git a/apps/www/registry/new-york/example/NumberFieldCurrency.vue b/apps/www/src/registry/new-york/example/NumberFieldCurrency.vue
similarity index 84%
rename from apps/www/registry/new-york/example/NumberFieldCurrency.vue
rename to apps/www/src/registry/new-york/example/NumberFieldCurrency.vue
index 4de56b55f..b33cc4994 100644
--- a/apps/www/registry/new-york/example/NumberFieldCurrency.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldCurrency.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
+} from '@/registry/new-york/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/NumberFieldDecimal.vue b/apps/www/src/registry/new-york/example/NumberFieldDecimal.vue
similarity index 83%
rename from apps/www/registry/new-york/example/NumberFieldDecimal.vue
rename to apps/www/src/registry/new-york/example/NumberFieldDecimal.vue
index 334847662..a4323d551 100644
--- a/apps/www/registry/new-york/example/NumberFieldDecimal.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldDecimal.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
+} from '@/registry/new-york/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/NumberFieldDemo.vue b/apps/www/src/registry/new-york/example/NumberFieldDemo.vue
similarity index 79%
rename from apps/www/registry/new-york/example/NumberFieldDemo.vue
rename to apps/www/src/registry/new-york/example/NumberFieldDemo.vue
index a6c7345f3..c8ab016fc 100644
--- a/apps/www/registry/new-york/example/NumberFieldDemo.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldDemo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
+} from '@/registry/new-york/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/NumberFieldDisabled.vue b/apps/www/src/registry/new-york/example/NumberFieldDisabled.vue
similarity index 80%
rename from apps/www/registry/new-york/example/NumberFieldDisabled.vue
rename to apps/www/src/registry/new-york/example/NumberFieldDisabled.vue
index b40d09062..849e0f8c3 100644
--- a/apps/www/registry/new-york/example/NumberFieldDisabled.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldDisabled.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
+} from '@/registry/new-york/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/NumberFieldForm.vue b/apps/www/src/registry/new-york/example/NumberFieldForm.vue
similarity index 90%
rename from apps/www/registry/new-york/example/NumberFieldForm.vue
rename to apps/www/src/registry/new-york/example/NumberFieldForm.vue
index d38b08577..3ff7c8e34 100644
--- a/apps/www/registry/new-york/example/NumberFieldForm.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,15 +7,15 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/number-field'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/NumberFieldPercentage.vue b/apps/www/src/registry/new-york/example/NumberFieldPercentage.vue
similarity index 82%
rename from apps/www/registry/new-york/example/NumberFieldPercentage.vue
rename to apps/www/src/registry/new-york/example/NumberFieldPercentage.vue
index 5696b2458..40a2ff467 100644
--- a/apps/www/registry/new-york/example/NumberFieldPercentage.vue
+++ b/apps/www/src/registry/new-york/example/NumberFieldPercentage.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@/lib/registry/new-york/ui/number-field'
+} from '@/registry/new-york/ui/number-field'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/PaginationDemo.vue b/apps/www/src/registry/new-york/example/PaginationDemo.vue
similarity index 91%
rename from apps/www/registry/new-york/example/PaginationDemo.vue
rename to apps/www/src/registry/new-york/example/PaginationDemo.vue
index fa6a0d7c4..14c4d6513 100644
--- a/apps/www/registry/new-york/example/PaginationDemo.vue
+++ b/apps/www/src/registry/new-york/example/PaginationDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
+} from '@/registry/new-york/ui/button'
 
 import {
   Pagination,
@@ -12,7 +12,7 @@ import {
   PaginationListItem,
   PaginationNext,
   PaginationPrev,
-} from '@/lib/registry/new-york/ui/pagination'
+} from '@/registry/new-york/ui/pagination'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/PinInputControlled.vue b/apps/www/src/registry/new-york/example/PinInputControlled.vue
similarity index 92%
rename from apps/www/registry/new-york/example/PinInputControlled.vue
rename to apps/www/src/registry/new-york/example/PinInputControlled.vue
index a01ce25d0..1ae88a768 100644
--- a/apps/www/registry/new-york/example/PinInputControlled.vue
+++ b/apps/www/src/registry/new-york/example/PinInputControlled.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/registry/new-york/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>(['1', '2', '3'])
diff --git a/apps/www/registry/new-york/example/PinInputDemo.vue b/apps/www/src/registry/new-york/example/PinInputDemo.vue
similarity index 92%
rename from apps/www/registry/new-york/example/PinInputDemo.vue
rename to apps/www/src/registry/new-york/example/PinInputDemo.vue
index 45dc8d66a..89aa8fca0 100644
--- a/apps/www/registry/new-york/example/PinInputDemo.vue
+++ b/apps/www/src/registry/new-york/example/PinInputDemo.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/registry/new-york/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/new-york/example/PinInputDisabled.vue b/apps/www/src/registry/new-york/example/PinInputDisabled.vue
similarity index 91%
rename from apps/www/registry/new-york/example/PinInputDisabled.vue
rename to apps/www/src/registry/new-york/example/PinInputDisabled.vue
index 4c238fdb6..4021f8cc8 100644
--- a/apps/www/registry/new-york/example/PinInputDisabled.vue
+++ b/apps/www/src/registry/new-york/example/PinInputDisabled.vue
@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/registry/new-york/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/new-york/example/PinInputFormDemo.vue b/apps/www/src/registry/new-york/example/PinInputFormDemo.vue
similarity index 90%
rename from apps/www/registry/new-york/example/PinInputFormDemo.vue
rename to apps/www/src/registry/new-york/example/PinInputFormDemo.vue
index 8546a60fc..747cd0bdb 100644
--- a/apps/www/registry/new-york/example/PinInputFormDemo.vue
+++ b/apps/www/src/registry/new-york/example/PinInputFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,13 +7,13 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/pin-input'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/new-york/example/PinInputSeparatorDemo.vue b/apps/www/src/registry/new-york/example/PinInputSeparatorDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/PinInputSeparatorDemo.vue
rename to apps/www/src/registry/new-york/example/PinInputSeparatorDemo.vue
index af28a9a35..4b16113c6 100644
--- a/apps/www/registry/new-york/example/PinInputSeparatorDemo.vue
+++ b/apps/www/src/registry/new-york/example/PinInputSeparatorDemo.vue
@@ -4,7 +4,7 @@ import {
   PinInputGroup,
   PinInputInput,
   PinInputSeparator,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/registry/new-york/ui/pin-input'
 import { ref } from 'vue'
 
 const value = ref<string[]>([])
diff --git a/apps/www/registry/new-york/example/PopoverDemo.vue b/apps/www/src/registry/new-york/example/PopoverDemo.vue
similarity index 89%
rename from apps/www/registry/new-york/example/PopoverDemo.vue
rename to apps/www/src/registry/new-york/example/PopoverDemo.vue
index b3ca4a55c..4fc6ee827 100644
--- a/apps/www/registry/new-york/example/PopoverDemo.vue
+++ b/apps/www/src/registry/new-york/example/PopoverDemo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/registry/new-york/ui/popover'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ProgressDemo.vue b/apps/www/src/registry/new-york/example/ProgressDemo.vue
similarity index 82%
rename from apps/www/registry/new-york/example/ProgressDemo.vue
rename to apps/www/src/registry/new-york/example/ProgressDemo.vue
index 478df4cab..57f343744 100644
--- a/apps/www/registry/new-york/example/ProgressDemo.vue
+++ b/apps/www/src/registry/new-york/example/ProgressDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Progress } from '@/lib/registry/new-york/ui/progress'
+import { Progress } from '@/registry/new-york/ui/progress'
 import { ref, watchEffect } from 'vue'
 
 const progress = ref(13)
diff --git a/apps/www/registry/new-york/example/RadioGroupDemo.vue b/apps/www/src/registry/new-york/example/RadioGroupDemo.vue
similarity index 80%
rename from apps/www/registry/new-york/example/RadioGroupDemo.vue
rename to apps/www/src/registry/new-york/example/RadioGroupDemo.vue
index 926fd2290..433676ea9 100644
--- a/apps/www/registry/new-york/example/RadioGroupDemo.vue
+++ b/apps/www/src/registry/new-york/example/RadioGroupDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+import { Label } from '@/registry/new-york/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/RadioGroupForm.vue b/apps/www/src/registry/new-york/example/RadioGroupForm.vue
similarity index 90%
rename from apps/www/registry/new-york/example/RadioGroupForm.vue
rename to apps/www/src/registry/new-york/example/RadioGroupForm.vue
index 71a6d2c8c..cc7e38271 100644
--- a/apps/www/registry/new-york/example/RadioGroupForm.vue
+++ b/apps/www/src/registry/new-york/example/RadioGroupForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/RangeCalendarDemo.vue b/apps/www/src/registry/new-york/example/RangeCalendarDemo.vue
similarity index 84%
rename from apps/www/registry/new-york/example/RangeCalendarDemo.vue
rename to apps/www/src/registry/new-york/example/RangeCalendarDemo.vue
index c4bb3cab1..5ff1bc641 100644
--- a/apps/www/registry/new-york/example/RangeCalendarDemo.vue
+++ b/apps/www/src/registry/new-york/example/RangeCalendarDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DateRange } from 'reka-ui'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import { RangeCalendar } from '@/registry/new-york/ui/range-calendar'
 import { getLocalTimeZone, today } from '@internationalized/date'
 import { type Ref, ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/ResizableDemo.vue b/apps/www/src/registry/new-york/example/ResizableDemo.vue
similarity index 96%
rename from apps/www/registry/new-york/example/ResizableDemo.vue
rename to apps/www/src/registry/new-york/example/ResizableDemo.vue
index 4a0782adf..2e6f19e94 100644
--- a/apps/www/registry/new-york/example/ResizableDemo.vue
+++ b/apps/www/src/registry/new-york/example/ResizableDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/new-york/ui/resizable'
+} from '@/registry/new-york/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ResizableHandleDemo.vue b/apps/www/src/registry/new-york/example/ResizableHandleDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/ResizableHandleDemo.vue
rename to apps/www/src/registry/new-york/example/ResizableHandleDemo.vue
index 8059519d9..7b80df168 100644
--- a/apps/www/registry/new-york/example/ResizableHandleDemo.vue
+++ b/apps/www/src/registry/new-york/example/ResizableHandleDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/new-york/ui/resizable'
+} from '@/registry/new-york/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ResizableVerticalDemo.vue b/apps/www/src/registry/new-york/example/ResizableVerticalDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/ResizableVerticalDemo.vue
rename to apps/www/src/registry/new-york/example/ResizableVerticalDemo.vue
index ca096faac..3e5f457af 100644
--- a/apps/www/registry/new-york/example/ResizableVerticalDemo.vue
+++ b/apps/www/src/registry/new-york/example/ResizableVerticalDemo.vue
@@ -3,7 +3,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from '@/lib/registry/new-york/ui/resizable'
+} from '@/registry/new-york/ui/resizable'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ScrollAreaDemo.vue b/apps/www/src/registry/new-york/example/ScrollAreaDemo.vue
similarity index 78%
rename from apps/www/registry/new-york/example/ScrollAreaDemo.vue
rename to apps/www/src/registry/new-york/example/ScrollAreaDemo.vue
index 891055ec6..dae5259e8 100644
--- a/apps/www/registry/new-york/example/ScrollAreaDemo.vue
+++ b/apps/www/src/registry/new-york/example/ScrollAreaDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { ScrollArea } from '@/registry/new-york/ui/scroll-area'
+import { Separator } from '@/registry/new-york/ui/separator'
 
 const tags = Array.from({ length: 50 }).map(
   (_, i, a) => `v1.2.0-beta.${a.length - i}`,
diff --git a/apps/www/registry/new-york/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/registry/new-york/example/ScrollAreaHorizontalDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/ScrollAreaHorizontalDemo.vue
rename to apps/www/src/registry/new-york/example/ScrollAreaHorizontalDemo.vue
index 13c8efcde..4968a16af 100644
--- a/apps/www/registry/new-york/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/registry/new-york/example/ScrollAreaHorizontalDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
+import { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'
 
 interface Artwork {
   id: string
diff --git a/apps/www/registry/new-york/example/SelectDemo.vue b/apps/www/src/registry/new-york/example/SelectDemo.vue
similarity index 94%
rename from apps/www/registry/new-york/example/SelectDemo.vue
rename to apps/www/src/registry/new-york/example/SelectDemo.vue
index ee1ac775f..9f8d114cf 100644
--- a/apps/www/registry/new-york/example/SelectDemo.vue
+++ b/apps/www/src/registry/new-york/example/SelectDemo.vue
@@ -7,7 +7,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SelectForm.vue b/apps/www/src/registry/new-york/example/SelectForm.vue
similarity index 90%
rename from apps/www/registry/new-york/example/SelectForm.vue
rename to apps/www/src/registry/new-york/example/SelectForm.vue
index 4aa99f08b..1bbbd598b 100644
--- a/apps/www/registry/new-york/example/SelectForm.vue
+++ b/apps/www/src/registry/new-york/example/SelectForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,7 +7,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
 import {
   Select,
   SelectContent,
@@ -15,8 +15,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/select'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/SelectScrollable.vue b/apps/www/src/registry/new-york/example/SelectScrollable.vue
similarity index 98%
rename from apps/www/registry/new-york/example/SelectScrollable.vue
rename to apps/www/src/registry/new-york/example/SelectScrollable.vue
index 50ff747be..37e2afd19 100644
--- a/apps/www/registry/new-york/example/SelectScrollable.vue
+++ b/apps/www/src/registry/new-york/example/SelectScrollable.vue
@@ -7,7 +7,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
+} from '@/registry/new-york/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SeparatorDemo.vue b/apps/www/src/registry/new-york/example/SeparatorDemo.vue
similarity index 89%
rename from apps/www/registry/new-york/example/SeparatorDemo.vue
rename to apps/www/src/registry/new-york/example/SeparatorDemo.vue
index 7e6483b08..8cbec6dec 100644
--- a/apps/www/registry/new-york/example/SeparatorDemo.vue
+++ b/apps/www/src/registry/new-york/example/SeparatorDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Separator } from '@/registry/new-york/ui/separator'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SheetDemo.vue b/apps/www/src/registry/new-york/example/SheetDemo.vue
similarity index 85%
rename from apps/www/registry/new-york/example/SheetDemo.vue
rename to apps/www/src/registry/new-york/example/SheetDemo.vue
index 0eb880d68..cdf5015ad 100644
--- a/apps/www/registry/new-york/example/SheetDemo.vue
+++ b/apps/www/src/registry/new-york/example/SheetDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@/lib/registry/new-york/ui/sheet'
+} from '@/registry/new-york/ui/sheet'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SheetSideDemo.vue b/apps/www/src/registry/new-york/example/SheetSideDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/SheetSideDemo.vue
rename to apps/www/src/registry/new-york/example/SheetSideDemo.vue
index bc44ad691..3b10d0bd9 100644
--- a/apps/www/registry/new-york/example/SheetSideDemo.vue
+++ b/apps/www/src/registry/new-york/example/SheetSideDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/registry/new-york/ui/button'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@/lib/registry/new-york/ui/sheet'
+} from '@/registry/new-york/ui/sheet'
 import { ref } from 'vue'
 
 const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
diff --git a/apps/www/registry/new-york/example/SkeletonCard.vue b/apps/www/src/registry/new-york/example/SkeletonCard.vue
similarity index 81%
rename from apps/www/registry/new-york/example/SkeletonCard.vue
rename to apps/www/src/registry/new-york/example/SkeletonCard.vue
index e780af88d..63a8e4773 100644
--- a/apps/www/registry/new-york/example/SkeletonCard.vue
+++ b/apps/www/src/registry/new-york/example/SkeletonCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
+import { Skeleton } from '@/registry/new-york/ui/skeleton'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SkeletonDemo.vue b/apps/www/src/registry/new-york/example/SkeletonDemo.vue
similarity index 81%
rename from apps/www/registry/new-york/example/SkeletonDemo.vue
rename to apps/www/src/registry/new-york/example/SkeletonDemo.vue
index a271ddbce..e9ce3107c 100644
--- a/apps/www/registry/new-york/example/SkeletonDemo.vue
+++ b/apps/www/src/registry/new-york/example/SkeletonDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
+import { Skeleton } from '@/registry/new-york/ui/skeleton'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SliderDemo.vue b/apps/www/src/registry/new-york/example/SliderDemo.vue
similarity index 81%
rename from apps/www/registry/new-york/example/SliderDemo.vue
rename to apps/www/src/registry/new-york/example/SliderDemo.vue
index 6a3934e9d..e674d6379 100644
--- a/apps/www/registry/new-york/example/SliderDemo.vue
+++ b/apps/www/src/registry/new-york/example/SliderDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Slider } from '@/lib/registry/new-york/ui/slider'
 import { cn } from '@/lib/utils'
+import { Slider } from '@/registry/new-york/ui/slider'
 import { ref } from 'vue'
 
 const modelValue = ref([50])
diff --git a/apps/www/registry/new-york/example/SliderForm.vue b/apps/www/src/registry/new-york/example/SliderForm.vue
similarity index 87%
rename from apps/www/registry/new-york/example/SliderForm.vue
rename to apps/www/src/registry/new-york/example/SliderForm.vue
index 8d51dbc0f..05a156196 100644
--- a/apps/www/registry/new-york/example/SliderForm.vue
+++ b/apps/www/src/registry/new-york/example/SliderForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Slider } from '@/lib/registry/new-york/ui/slider'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { Slider } from '@/registry/new-york/ui/slider'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/default/example/SonnerDemo.vue b/apps/www/src/registry/new-york/example/SonnerDemo.vue
similarity index 87%
rename from apps/www/registry/default/example/SonnerDemo.vue
rename to apps/www/src/registry/new-york/example/SonnerDemo.vue
index ae84c1d21..bb75e0875 100644
--- a/apps/www/registry/default/example/SonnerDemo.vue
+++ b/apps/www/src/registry/new-york/example/SonnerDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import { toast } from 'vue-sonner'
 </script>
 
diff --git a/apps/www/registry/new-york/example/SonnerWithDialog.vue b/apps/www/src/registry/new-york/example/SonnerWithDialog.vue
similarity index 92%
rename from apps/www/registry/new-york/example/SonnerWithDialog.vue
rename to apps/www/src/registry/new-york/example/SonnerWithDialog.vue
index 08a23a3e0..0054e7603 100644
--- a/apps/www/registry/new-york/example/SonnerWithDialog.vue
+++ b/apps/www/src/registry/new-york/example/SonnerWithDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/new-york/ui/dialog'
+} from '@/registry/new-york/ui/dialog'
 import { toast } from 'vue-sonner'
 </script>
 
diff --git a/apps/www/registry/new-york/example/StepperDemo.vue b/apps/www/src/registry/new-york/example/StepperDemo.vue
similarity index 93%
rename from apps/www/registry/new-york/example/StepperDemo.vue
rename to apps/www/src/registry/new-york/example/StepperDemo.vue
index 03b411ae2..692d40f92 100644
--- a/apps/www/registry/new-york/example/StepperDemo.vue
+++ b/apps/www/src/registry/new-york/example/StepperDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
 
 import { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'
 
diff --git a/apps/www/registry/new-york/example/StepperForm.vue b/apps/www/src/registry/new-york/example/StepperForm.vue
similarity index 95%
rename from apps/www/registry/new-york/example/StepperForm.vue
rename to apps/www/src/registry/new-york/example/StepperForm.vue
index 41b47d798..423af32cc 100644
--- a/apps/www/registry/new-york/example/StepperForm.vue
+++ b/apps/www/src/registry/new-york/example/StepperForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/registry/new-york/ui/button'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
 import {
   Select,
   SelectContent,
@@ -9,9 +9,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/select'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
+import { toast } from '@/registry/new-york/ui/toast'
 import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { h, ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/StepperHorizental.vue b/apps/www/src/registry/new-york/example/StepperHorizental.vue
similarity index 93%
rename from apps/www/registry/new-york/example/StepperHorizental.vue
rename to apps/www/src/registry/new-york/example/StepperHorizental.vue
index 3ac843a53..993bd9b47 100644
--- a/apps/www/registry/new-york/example/StepperHorizental.vue
+++ b/apps/www/src/registry/new-york/example/StepperHorizental.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
 import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 
 const steps = [
diff --git a/apps/www/registry/new-york/example/StepperVertical.vue b/apps/www/src/registry/new-york/example/StepperVertical.vue
similarity index 94%
rename from apps/www/registry/new-york/example/StepperVertical.vue
rename to apps/www/src/registry/new-york/example/StepperVertical.vue
index 4485a7075..72c969f68 100644
--- a/apps/www/registry/new-york/example/StepperVertical.vue
+++ b/apps/www/src/registry/new-york/example/StepperVertical.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/lib/registry/new-york/ui/stepper'
+import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
 import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 
 const steps = [
diff --git a/apps/www/registry/new-york/example/SwitchDemo.vue b/apps/www/src/registry/new-york/example/SwitchDemo.vue
similarity index 63%
rename from apps/www/registry/new-york/example/SwitchDemo.vue
rename to apps/www/src/registry/new-york/example/SwitchDemo.vue
index a68c5f67d..c9503649c 100644
--- a/apps/www/registry/new-york/example/SwitchDemo.vue
+++ b/apps/www/src/registry/new-york/example/SwitchDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
+import { Label } from '@/registry/new-york/ui/label'
+import { Switch } from '@/registry/new-york/ui/switch'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/SwitchForm.vue b/apps/www/src/registry/new-york/example/SwitchForm.vue
similarity index 92%
rename from apps/www/registry/new-york/example/SwitchForm.vue
rename to apps/www/src/registry/new-york/example/SwitchForm.vue
index 91ea847d0..025d0d378 100644
--- a/apps/www/registry/new-york/example/SwitchForm.vue
+++ b/apps/www/src/registry/new-york/example/SwitchForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
-} from '@/lib/registry/new-york/ui/form'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { Switch } from '@/registry/new-york/ui/switch'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/TableDemo.vue b/apps/www/src/registry/new-york/example/TableDemo.vue
similarity index 97%
rename from apps/www/registry/new-york/example/TableDemo.vue
rename to apps/www/src/registry/new-york/example/TableDemo.vue
index c17a6a68f..dd92cc282 100644
--- a/apps/www/registry/new-york/example/TableDemo.vue
+++ b/apps/www/src/registry/new-york/example/TableDemo.vue
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/new-york/ui/table'
+} from '@/registry/new-york/ui/table'
 
 const invoices = [
   {
diff --git a/apps/www/registry/new-york/example/TabsDemo.vue b/apps/www/src/registry/new-york/example/TabsDemo.vue
similarity index 88%
rename from apps/www/registry/new-york/example/TabsDemo.vue
rename to apps/www/src/registry/new-york/example/TabsDemo.vue
index 7efc902f9..3971df277 100644
--- a/apps/www/registry/new-york/example/TabsDemo.vue
+++ b/apps/www/src/registry/new-york/example/TabsDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,15 +7,15 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TabsVerticalDemo.vue b/apps/www/src/registry/new-york/example/TabsVerticalDemo.vue
similarity index 88%
rename from apps/www/registry/new-york/example/TabsVerticalDemo.vue
rename to apps/www/src/registry/new-york/example/TabsVerticalDemo.vue
index 7464971e7..e17f875ee 100644
--- a/apps/www/registry/new-york/example/TabsVerticalDemo.vue
+++ b/apps/www/src/registry/new-york/example/TabsVerticalDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,15 +7,15 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/new-york/ui/card'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
+} from '@/registry/new-york/ui/tabs'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/registry/new-york/example/TagsInputComboboxDemo.vue
similarity index 95%
rename from apps/www/registry/new-york/example/TagsInputComboboxDemo.vue
rename to apps/www/src/registry/new-york/example/TagsInputComboboxDemo.vue
index 241ffcad6..8342aafb5 100644
--- a/apps/www/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'
 import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'
 import { computed, ref } from 'vue'
 
diff --git a/apps/www/registry/new-york/example/TagsInputDemo.vue b/apps/www/src/registry/new-york/example/TagsInputDemo.vue
similarity index 85%
rename from apps/www/registry/new-york/example/TagsInputDemo.vue
rename to apps/www/src/registry/new-york/example/TagsInputDemo.vue
index b745bb51b..4530cbe57 100644
--- a/apps/www/registry/new-york/example/TagsInputDemo.vue
+++ b/apps/www/src/registry/new-york/example/TagsInputDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'
 import { ref } from 'vue'
 
 const modelValue = ref(['Apple', 'Banana'])
diff --git a/apps/www/registry/new-york/example/TagsInputFormDemo.vue b/apps/www/src/registry/new-york/example/TagsInputFormDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/TagsInputFormDemo.vue
rename to apps/www/src/registry/new-york/example/TagsInputFormDemo.vue
index 3e05cbb4f..0f57f573f 100644
--- a/apps/www/registry/new-york/example/TagsInputFormDemo.vue
+++ b/apps/www/src/registry/new-york/example/TagsInputFormDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'
+import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
diff --git a/apps/www/registry/new-york/example/TextareaDemo.vue b/apps/www/src/registry/new-york/example/TextareaDemo.vue
similarity index 64%
rename from apps/www/registry/new-york/example/TextareaDemo.vue
rename to apps/www/src/registry/new-york/example/TextareaDemo.vue
index 950820631..8c64175e7 100644
--- a/apps/www/registry/new-york/example/TextareaDemo.vue
+++ b/apps/www/src/registry/new-york/example/TextareaDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TextareaDisabled.vue b/apps/www/src/registry/new-york/example/TextareaDisabled.vue
similarity index 65%
rename from apps/www/registry/new-york/example/TextareaDisabled.vue
rename to apps/www/src/registry/new-york/example/TextareaDisabled.vue
index 803a2ce89..791157d55 100644
--- a/apps/www/registry/new-york/example/TextareaDisabled.vue
+++ b/apps/www/src/registry/new-york/example/TextareaDisabled.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TextareaForm.vue b/apps/www/src/registry/new-york/example/TextareaForm.vue
similarity index 87%
rename from apps/www/registry/new-york/example/TextareaForm.vue
rename to apps/www/src/registry/new-york/example/TextareaForm.vue
index 3530a97d7..e6cfa7b37 100644
--- a/apps/www/registry/new-york/example/TextareaForm.vue
+++ b/apps/www/src/registry/new-york/example/TextareaForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,9 +7,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { toast } from '@/lib/registry/new-york/ui/toast'
+} from '@/registry/new-york/ui/form'
+import { Textarea } from '@/registry/new-york/ui/textarea'
+import { toast } from '@/registry/new-york/ui/toast'
 
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
diff --git a/apps/www/registry/new-york/example/TextareaWithButton.vue b/apps/www/src/registry/new-york/example/TextareaWithButton.vue
similarity index 61%
rename from apps/www/registry/new-york/example/TextareaWithButton.vue
rename to apps/www/src/registry/new-york/example/TextareaWithButton.vue
index ff5aec108..8b5156ff5 100644
--- a/apps/www/registry/new-york/example/TextareaWithButton.vue
+++ b/apps/www/src/registry/new-york/example/TextareaWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Button } from '@/registry/new-york/ui/button'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TextareaWithLabel.vue b/apps/www/src/registry/new-york/example/TextareaWithLabel.vue
similarity index 64%
rename from apps/www/registry/new-york/example/TextareaWithLabel.vue
rename to apps/www/src/registry/new-york/example/TextareaWithLabel.vue
index 5d8fd5805..b3b9b5c75 100644
--- a/apps/www/registry/new-york/example/TextareaWithLabel.vue
+++ b/apps/www/src/registry/new-york/example/TextareaWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Label } from '@/registry/new-york/ui/label'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TextareaWithText.vue b/apps/www/src/registry/new-york/example/TextareaWithText.vue
similarity index 73%
rename from apps/www/registry/new-york/example/TextareaWithText.vue
rename to apps/www/src/registry/new-york/example/TextareaWithText.vue
index c3be99358..71cfbbefc 100644
--- a/apps/www/registry/new-york/example/TextareaWithText.vue
+++ b/apps/www/src/registry/new-york/example/TextareaWithText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Label } from '@/registry/new-york/ui/label'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/ToastDemo.vue b/apps/www/src/registry/new-york/example/ToastDemo.vue
similarity index 70%
rename from apps/www/registry/new-york/example/ToastDemo.vue
rename to apps/www/src/registry/new-york/example/ToastDemo.vue
index c6b0c02d8..30d1de66b 100644
--- a/apps/www/registry/new-york/example/ToastDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToastDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { Button } from '@/registry/new-york/ui/button'
+import { useToast } from '@/registry/new-york/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/new-york/example/ToastDestructive.vue b/apps/www/src/registry/new-york/example/ToastDestructive.vue
similarity index 71%
rename from apps/www/registry/new-york/example/ToastDestructive.vue
rename to apps/www/src/registry/new-york/example/ToastDestructive.vue
index 3b94931c7..298520ea4 100644
--- a/apps/www/registry/new-york/example/ToastDestructive.vue
+++ b/apps/www/src/registry/new-york/example/ToastDestructive.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ToastAction } from '@/lib/registry/new-york/ui/toast'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { Button } from '@/registry/new-york/ui/button'
+import { ToastAction } from '@/registry/new-york/ui/toast'
+import { useToast } from '@/registry/new-york/ui/toast/use-toast'
 import { h } from 'vue'
 
 const { toast } = useToast()
diff --git a/apps/www/registry/new-york/example/ToastSimple.vue b/apps/www/src/registry/new-york/example/ToastSimple.vue
similarity index 66%
rename from apps/www/registry/new-york/example/ToastSimple.vue
rename to apps/www/src/registry/new-york/example/ToastSimple.vue
index 620038fd6..b7729e683 100644
--- a/apps/www/registry/new-york/example/ToastSimple.vue
+++ b/apps/www/src/registry/new-york/example/ToastSimple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { Button } from '@/registry/new-york/ui/button'
+import { useToast } from '@/registry/new-york/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/new-york/example/ToastWithAction.vue b/apps/www/src/registry/new-york/example/ToastWithAction.vue
similarity index 70%
rename from apps/www/registry/new-york/example/ToastWithAction.vue
rename to apps/www/src/registry/new-york/example/ToastWithAction.vue
index 51b66408f..a27fa9289 100644
--- a/apps/www/registry/new-york/example/ToastWithAction.vue
+++ b/apps/www/src/registry/new-york/example/ToastWithAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ToastAction } from '@/lib/registry/new-york/ui/toast'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { Button } from '@/registry/new-york/ui/button'
+import { ToastAction } from '@/registry/new-york/ui/toast'
+import { useToast } from '@/registry/new-york/ui/toast/use-toast'
 import { h } from 'vue'
 
 const { toast } = useToast()
diff --git a/apps/www/registry/new-york/example/ToastWithTitle.vue b/apps/www/src/registry/new-york/example/ToastWithTitle.vue
similarity index 70%
rename from apps/www/registry/new-york/example/ToastWithTitle.vue
rename to apps/www/src/registry/new-york/example/ToastWithTitle.vue
index 5f30a0d28..15621a9e1 100644
--- a/apps/www/registry/new-york/example/ToastWithTitle.vue
+++ b/apps/www/src/registry/new-york/example/ToastWithTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { Button } from '@/registry/new-york/ui/button'
+import { useToast } from '@/registry/new-york/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleDemo.vue b/apps/www/src/registry/new-york/example/ToggleDemo.vue
similarity index 76%
rename from apps/www/registry/new-york/example/ToggleDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleDemo.vue
index 967169416..ce1b75357 100644
--- a/apps/www/registry/new-york/example/ToggleDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { FontBoldIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleDisabledDemo.vue b/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/ToggleDisabledDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
index f73de3955..f5f28f451 100644
--- a/apps/www/registry/new-york/example/ToggleDisabledDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { UnderlineIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleGroupDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
similarity index 86%
rename from apps/www/registry/new-york/example/ToggleGroupDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
index 2ad4828b2..69fdb158f 100644
--- a/apps/www/registry/new-york/example/ToggleGroupDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleGroupDisabledDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/ToggleGroupDisabledDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
index cc4b3f0e6..bdecd635d 100644
--- a/apps/www/registry/new-york/example/ToggleGroupDisabledDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleGroupLargeDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/ToggleGroupLargeDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
index 0414e1824..304dbde73 100644
--- a/apps/www/registry/new-york/example/ToggleGroupLargeDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleGroupOutlineDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/ToggleGroupOutlineDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
index e742a513f..035eafd66 100644
--- a/apps/www/registry/new-york/example/ToggleGroupOutlineDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleGroupSingleDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
similarity index 86%
rename from apps/www/registry/new-york/example/ToggleGroupSingleDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
index c4e129fec..559e3b1b1 100644
--- a/apps/www/registry/new-york/example/ToggleGroupSingleDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleGroupSmallDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
similarity index 87%
rename from apps/www/registry/new-york/example/ToggleGroupSmallDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
index 3b37639bc..b32939b04 100644
--- a/apps/www/registry/new-york/example/ToggleGroupSmallDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
 import {
   FontBoldIcon,
diff --git a/apps/www/registry/new-york/example/ToggleItalicDemo.vue b/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
similarity index 78%
rename from apps/www/registry/new-york/example/ToggleItalicDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
index 1e1fbb4ee..833b99238 100644
--- a/apps/www/registry/new-york/example/ToggleItalicDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { FontItalicIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleItalicWithTextDemo.vue b/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
similarity index 78%
rename from apps/www/registry/new-york/example/ToggleItalicWithTextDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
index 158e0e9eb..4ddf0a29d 100644
--- a/apps/www/registry/new-york/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { FontItalicIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleLargeDemo.vue b/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/ToggleLargeDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
index a866c5a54..5abe9236b 100644
--- a/apps/www/registry/new-york/example/ToggleLargeDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { FontItalicIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/ToggleSmallDemo.vue b/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
similarity index 77%
rename from apps/www/registry/new-york/example/ToggleSmallDemo.vue
rename to apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
index 18fa9956a..487f42cef 100644
--- a/apps/www/registry/new-york/example/ToggleSmallDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+import { Toggle } from '@/registry/new-york/ui/toggle'
 
 import { FontItalicIcon } from '@radix-icons/vue'
 </script>
diff --git a/apps/www/registry/new-york/example/TooltipDemo.vue b/apps/www/src/registry/new-york/example/TooltipDemo.vue
similarity index 79%
rename from apps/www/registry/new-york/example/TooltipDemo.vue
rename to apps/www/src/registry/new-york/example/TooltipDemo.vue
index be46487da..ec796de41 100644
--- a/apps/www/registry/new-york/example/TooltipDemo.vue
+++ b/apps/www/src/registry/new-york/example/TooltipDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
+} from '@/registry/new-york/ui/tooltip'
 </script>
 
 <template>
diff --git a/apps/www/registry/new-york/example/TypographyBlockquote.vue b/apps/www/src/registry/new-york/example/TypographyBlockquote.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyBlockquote.vue
rename to apps/www/src/registry/new-york/example/TypographyBlockquote.vue
diff --git a/apps/www/registry/new-york/example/TypographyDemo.vue b/apps/www/src/registry/new-york/example/TypographyDemo.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyDemo.vue
rename to apps/www/src/registry/new-york/example/TypographyDemo.vue
diff --git a/apps/www/registry/new-york/example/TypographyH1.vue b/apps/www/src/registry/new-york/example/TypographyH1.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyH1.vue
rename to apps/www/src/registry/new-york/example/TypographyH1.vue
diff --git a/apps/www/registry/new-york/example/TypographyH2.vue b/apps/www/src/registry/new-york/example/TypographyH2.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyH2.vue
rename to apps/www/src/registry/new-york/example/TypographyH2.vue
diff --git a/apps/www/registry/new-york/example/TypographyH3.vue b/apps/www/src/registry/new-york/example/TypographyH3.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyH3.vue
rename to apps/www/src/registry/new-york/example/TypographyH3.vue
diff --git a/apps/www/registry/new-york/example/TypographyH4.vue b/apps/www/src/registry/new-york/example/TypographyH4.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyH4.vue
rename to apps/www/src/registry/new-york/example/TypographyH4.vue
diff --git a/apps/www/registry/new-york/example/TypographyInlineCode.vue b/apps/www/src/registry/new-york/example/TypographyInlineCode.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyInlineCode.vue
rename to apps/www/src/registry/new-york/example/TypographyInlineCode.vue
diff --git a/apps/www/registry/new-york/example/TypographyLarge.vue b/apps/www/src/registry/new-york/example/TypographyLarge.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyLarge.vue
rename to apps/www/src/registry/new-york/example/TypographyLarge.vue
diff --git a/apps/www/registry/new-york/example/TypographyLead.vue b/apps/www/src/registry/new-york/example/TypographyLead.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyLead.vue
rename to apps/www/src/registry/new-york/example/TypographyLead.vue
diff --git a/apps/www/registry/new-york/example/TypographyList.vue b/apps/www/src/registry/new-york/example/TypographyList.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyList.vue
rename to apps/www/src/registry/new-york/example/TypographyList.vue
diff --git a/apps/www/registry/new-york/example/TypographyMuted.vue b/apps/www/src/registry/new-york/example/TypographyMuted.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyMuted.vue
rename to apps/www/src/registry/new-york/example/TypographyMuted.vue
diff --git a/apps/www/registry/new-york/example/TypographyP.vue b/apps/www/src/registry/new-york/example/TypographyP.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyP.vue
rename to apps/www/src/registry/new-york/example/TypographyP.vue
diff --git a/apps/www/registry/new-york/example/TypographySmall.vue b/apps/www/src/registry/new-york/example/TypographySmall.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographySmall.vue
rename to apps/www/src/registry/new-york/example/TypographySmall.vue
diff --git a/apps/www/registry/new-york/example/TypographyTable.vue b/apps/www/src/registry/new-york/example/TypographyTable.vue
similarity index 100%
rename from apps/www/registry/new-york/example/TypographyTable.vue
rename to apps/www/src/registry/new-york/example/TypographyTable.vue
diff --git a/apps/www/registry/new-york/example/VCalendarDemo.vue b/apps/www/src/registry/new-york/example/VCalendarDemo.vue
similarity index 72%
rename from apps/www/registry/new-york/example/VCalendarDemo.vue
rename to apps/www/src/registry/new-york/example/VCalendarDemo.vue
index d92989d50..87f7f6c9b 100644
--- a/apps/www/registry/new-york/example/VCalendarDemo.vue
+++ b/apps/www/src/registry/new-york/example/VCalendarDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { ref } from 'vue'
 
 const date = ref(new Date())
diff --git a/apps/www/registry/new-york/example/VDatePickerDemo.vue b/apps/www/src/registry/new-york/example/VDatePickerDemo.vue
similarity index 82%
rename from apps/www/registry/new-york/example/VDatePickerDemo.vue
rename to apps/www/src/registry/new-york/example/VDatePickerDemo.vue
index d326de8f8..2719cea1b 100644
--- a/apps/www/registry/new-york/example/VDatePickerDemo.vue
+++ b/apps/www/src/registry/new-york/example/VDatePickerDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+} from '@/registry/new-york/ui/popover'
 
-import { cn } from '@/lib/utils'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { CalendarIcon } from '@radix-icons/vue'
 import { format } from 'date-fns'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/VDatePickerForm.vue b/apps/www/src/registry/new-york/example/VDatePickerForm.vue
similarity index 88%
rename from apps/www/registry/new-york/example/VDatePickerForm.vue
rename to apps/www/src/registry/new-york/example/VDatePickerForm.vue
index defa9b055..2b72082a4 100644
--- a/apps/www/registry/new-york/example/VDatePickerForm.vue
+++ b/apps/www/src/registry/new-york/example/VDatePickerForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   FormControl,
   FormDescription,
@@ -7,15 +8,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/lib/registry/new-york/ui/form'
+} from '@/registry/new-york/ui/form'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
+import { toast } from '@/registry/new-york/ui/toast'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 
 import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
diff --git a/apps/www/registry/new-york/example/VDatePickerWithPresets.vue b/apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
similarity index 88%
rename from apps/www/registry/new-york/example/VDatePickerWithPresets.vue
rename to apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
index 075878481..b294f2c66 100644
--- a/apps/www/registry/new-york/example/VDatePickerWithPresets.vue
+++ b/apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-
+} from '@/registry/new-york/ui/popover'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/select'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { CalendarIcon } from '@radix-icons/vue'
 import { addDays, format } from 'date-fns'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/VDatePickerWithRange.vue b/apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
similarity index 87%
rename from apps/www/registry/new-york/example/VDatePickerWithRange.vue
rename to apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
index 2f9240f03..c898dc418 100644
--- a/apps/www/registry/new-york/example/VDatePickerWithRange.vue
+++ b/apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+} from '@/registry/new-york/ui/popover'
 
-import { cn } from '@/lib/utils'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { CalendarIcon } from '@radix-icons/vue'
 import { addDays, format } from 'date-fns'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/VDateTimePickerDemo.vue b/apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
similarity index 82%
rename from apps/www/registry/new-york/example/VDateTimePickerDemo.vue
rename to apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
index 337a963da..d5f0726c4 100644
--- a/apps/www/registry/new-york/example/VDateTimePickerDemo.vue
+++ b/apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/popover'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { CalendarIcon } from '@radix-icons/vue'
 import { format } from 'date-fns'
 import { ref } from 'vue'
diff --git a/apps/www/registry/new-york/example/VRangePickerWithSlot.vue b/apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
similarity index 91%
rename from apps/www/registry/new-york/example/VRangePickerWithSlot.vue
rename to apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
index 094392e8a..ff5024be8 100644
--- a/apps/www/registry/new-york/example/VRangePickerWithSlot.vue
+++ b/apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+} from '@/registry/new-york/ui/popover'
 
-import { cn } from '@/lib/utils'
+import { Calendar } from '@/registry/new-york/ui/v-calendar'
 import { CalendarIcon } from '@radix-icons/vue'
 import { addDays, format } from 'date-fns'
 import { ref } from 'vue'
diff --git a/apps/www/src/registry/new-york/lib/utils.ts b/apps/www/src/registry/new-york/lib/utils.ts
new file mode 100644
index 000000000..4c5199236
--- /dev/null
+++ b/apps/www/src/registry/new-york/lib/utils.ts
@@ -0,0 +1,15 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
diff --git a/apps/www/registry/new-york/ui/accordion/Accordion.vue b/apps/www/src/registry/new-york/ui/accordion/Accordion.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/accordion/Accordion.vue
rename to apps/www/src/registry/new-york/ui/accordion/Accordion.vue
diff --git a/apps/www/registry/new-york/ui/accordion/AccordionContent.vue b/apps/www/src/registry/new-york/ui/accordion/AccordionContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/accordion/AccordionContent.vue
rename to apps/www/src/registry/new-york/ui/accordion/AccordionContent.vue
diff --git a/apps/www/registry/new-york/ui/accordion/AccordionItem.vue b/apps/www/src/registry/new-york/ui/accordion/AccordionItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/accordion/AccordionItem.vue
rename to apps/www/src/registry/new-york/ui/accordion/AccordionItem.vue
diff --git a/apps/www/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/accordion/AccordionTrigger.vue
rename to apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue
diff --git a/apps/www/registry/new-york/ui/accordion/index.ts b/apps/www/src/registry/new-york/ui/accordion/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/accordion/index.ts
rename to apps/www/src/registry/new-york/ui/accordion/index.ts
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialog.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialog.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialog.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialog.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
similarity index 88%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
index ca60c2a1c..886b5b14a 100644
--- a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
+++ b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
similarity index 90%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
index b1affa9eb..26bc80787 100644
--- a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
+++ b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogDescription.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogFooter.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogTitle.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
rename to apps/www/src/registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue
diff --git a/apps/www/registry/new-york/ui/alert-dialog/index.ts b/apps/www/src/registry/new-york/ui/alert-dialog/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/alert-dialog/index.ts
rename to apps/www/src/registry/new-york/ui/alert-dialog/index.ts
diff --git a/apps/www/registry/new-york/ui/alert/Alert.vue b/apps/www/src/registry/new-york/ui/alert/Alert.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert/Alert.vue
rename to apps/www/src/registry/new-york/ui/alert/Alert.vue
diff --git a/apps/www/registry/new-york/ui/alert/AlertDescription.vue b/apps/www/src/registry/new-york/ui/alert/AlertDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert/AlertDescription.vue
rename to apps/www/src/registry/new-york/ui/alert/AlertDescription.vue
diff --git a/apps/www/registry/new-york/ui/alert/AlertTitle.vue b/apps/www/src/registry/new-york/ui/alert/AlertTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/alert/AlertTitle.vue
rename to apps/www/src/registry/new-york/ui/alert/AlertTitle.vue
diff --git a/apps/www/registry/new-york/ui/alert/index.ts b/apps/www/src/registry/new-york/ui/alert/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/alert/index.ts
rename to apps/www/src/registry/new-york/ui/alert/index.ts
diff --git a/apps/www/registry/new-york/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/registry/new-york/ui/aspect-ratio/AspectRatio.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/aspect-ratio/AspectRatio.vue
rename to apps/www/src/registry/new-york/ui/aspect-ratio/AspectRatio.vue
diff --git a/apps/www/registry/new-york/ui/aspect-ratio/index.ts b/apps/www/src/registry/new-york/ui/aspect-ratio/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/aspect-ratio/index.ts
rename to apps/www/src/registry/new-york/ui/aspect-ratio/index.ts
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoForm.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoForm.vue
similarity index 98%
rename from apps/www/registry/new-york/ui/auto-form/AutoForm.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoForm.vue
index 9e4e291b5..26d01a0a2 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoForm.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoForm.vue
@@ -2,7 +2,7 @@
 import type { FormContext, GenericObject } from 'vee-validate'
 import type { z, ZodAny } from 'zod'
 import type { Config, ConfigItem, Dependency, Shape } from './interface'
-import { Form } from '@/lib/registry/new-york/ui/form'
+import { Form } from '@/registry/new-york/ui/form'
 import { toTypedSchema } from '@vee-validate/zod'
 import { computed, toRefs } from 'vue'
 import AutoFormField from './AutoFormField.vue'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormField.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormField.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormField.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormField.vue
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldArray.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
index 43b287965..b6192ed9a 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends z.ZodAny">
 import type { Config, ConfigItem } from './interface'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'
+import { Button } from '@/registry/new-york/ui/button'
+import { FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Separator } from '@/registry/new-york/ui/separator'
 import { PlusIcon, TrashIcon } from 'lucide-vue-next'
 import { FieldArray, FieldContextKey, useField } from 'vee-validate'
 import { computed, provide } from 'vue'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
similarity index 88%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
index a9f15d416..6d7ed3354 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
+import { Checkbox } from '@/registry/new-york/ui/checkbox'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Switch } from '@/registry/new-york/ui/switch'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldDate.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
similarity index 87%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
index 77d1e1441..bee7d2caa 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 
 import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { CalendarIcon } from '@radix-icons/vue'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
similarity index 88%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
index 11df0804b..7988e51b9 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Label } from '@/registry/new-york/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldFile.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
similarity index 93%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
index ac003ee34..ea3d4d2ac 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/registry/new-york/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
 import { TrashIcon } from '@radix-icons/vue'
 import { ref } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldInput.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
similarity index 86%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
index 2c8676b61..dc8746223 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
+import { Textarea } from '@/registry/new-york/ui/textarea'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
similarity index 89%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
index 873f4dba1..31113cd57 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
+import { Input } from '@/registry/new-york/ui/input'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldObject.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
similarity index 95%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
index aad97a54f..889da2c78 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends ZodRawShape">
 import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
 import type { Config, ConfigItem, Shape } from './interface'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
-import { FormItem } from '@/lib/registry/new-york/ui/form'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'
+import { FormItem } from '@/registry/new-york/ui/form'
 import { FieldContextKey, useField } from 'vee-validate'
 import { computed, provide } from 'vue'
 import AutoFormField from './AutoFormField.vue'
diff --git a/apps/www/registry/new-york/ui/auto-form/AutoFormLabel.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormLabel.vue
similarity index 77%
rename from apps/www/registry/new-york/ui/auto-form/AutoFormLabel.vue
rename to apps/www/src/registry/new-york/ui/auto-form/AutoFormLabel.vue
index aaddb7c5e..066120829 100644
--- a/apps/www/registry/new-york/ui/auto-form/AutoFormLabel.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormLabel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FormLabel } from '@/lib/registry/new-york/ui/form'
+import { FormLabel } from '@/registry/new-york/ui/form'
 
 defineProps<{
   required?: boolean
diff --git a/apps/www/registry/new-york/ui/auto-form/constant.ts b/apps/www/src/registry/new-york/ui/auto-form/constant.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/constant.ts
rename to apps/www/src/registry/new-york/ui/auto-form/constant.ts
diff --git a/apps/www/registry/new-york/ui/auto-form/dependencies.ts b/apps/www/src/registry/new-york/ui/auto-form/dependencies.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/dependencies.ts
rename to apps/www/src/registry/new-york/ui/auto-form/dependencies.ts
diff --git a/apps/www/registry/new-york/ui/auto-form/index.ts b/apps/www/src/registry/new-york/ui/auto-form/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/index.ts
rename to apps/www/src/registry/new-york/ui/auto-form/index.ts
diff --git a/apps/www/registry/new-york/ui/auto-form/interface.ts b/apps/www/src/registry/new-york/ui/auto-form/interface.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/interface.ts
rename to apps/www/src/registry/new-york/ui/auto-form/interface.ts
diff --git a/apps/www/registry/new-york/ui/auto-form/utils.ts b/apps/www/src/registry/new-york/ui/auto-form/utils.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/auto-form/utils.ts
rename to apps/www/src/registry/new-york/ui/auto-form/utils.ts
diff --git a/apps/www/registry/new-york/ui/avatar/Avatar.vue b/apps/www/src/registry/new-york/ui/avatar/Avatar.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/avatar/Avatar.vue
rename to apps/www/src/registry/new-york/ui/avatar/Avatar.vue
diff --git a/apps/www/registry/new-york/ui/avatar/AvatarFallback.vue b/apps/www/src/registry/new-york/ui/avatar/AvatarFallback.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/avatar/AvatarFallback.vue
rename to apps/www/src/registry/new-york/ui/avatar/AvatarFallback.vue
diff --git a/apps/www/registry/new-york/ui/avatar/AvatarImage.vue b/apps/www/src/registry/new-york/ui/avatar/AvatarImage.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/avatar/AvatarImage.vue
rename to apps/www/src/registry/new-york/ui/avatar/AvatarImage.vue
diff --git a/apps/www/registry/new-york/ui/avatar/index.ts b/apps/www/src/registry/new-york/ui/avatar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/avatar/index.ts
rename to apps/www/src/registry/new-york/ui/avatar/index.ts
diff --git a/apps/www/registry/new-york/ui/badge/Badge.vue b/apps/www/src/registry/new-york/ui/badge/Badge.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/badge/Badge.vue
rename to apps/www/src/registry/new-york/ui/badge/Badge.vue
diff --git a/apps/www/registry/new-york/ui/badge/index.ts b/apps/www/src/registry/new-york/ui/badge/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/badge/index.ts
rename to apps/www/src/registry/new-york/ui/badge/index.ts
diff --git a/apps/www/registry/new-york/ui/breadcrumb/Breadcrumb.vue b/apps/www/src/registry/new-york/ui/breadcrumb/Breadcrumb.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/Breadcrumb.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/Breadcrumb.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbList.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbList.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
rename to apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
diff --git a/apps/www/registry/new-york/ui/breadcrumb/index.ts b/apps/www/src/registry/new-york/ui/breadcrumb/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/breadcrumb/index.ts
rename to apps/www/src/registry/new-york/ui/breadcrumb/index.ts
diff --git a/apps/www/registry/new-york/ui/button/Button.vue b/apps/www/src/registry/new-york/ui/button/Button.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/button/Button.vue
rename to apps/www/src/registry/new-york/ui/button/Button.vue
diff --git a/apps/www/registry/new-york/ui/button/index.ts b/apps/www/src/registry/new-york/ui/button/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/button/index.ts
rename to apps/www/src/registry/new-york/ui/button/index.ts
diff --git a/apps/www/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/registry/new-york/ui/calendar/Calendar.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/Calendar.vue
rename to apps/www/src/registry/new-york/ui/calendar/Calendar.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarCell.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarCell.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarCell.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarCell.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarCellTrigger.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarCellTrigger.vue
similarity index 95%
rename from apps/www/registry/new-york/ui/calendar/CalendarCellTrigger.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarCellTrigger.vue
index 8e59bb9e3..1232da7e2 100644
--- a/apps/www/registry/new-york/ui/calendar/CalendarCellTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/calendar/CalendarCellTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarGrid.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarGrid.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarGrid.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarGrid.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarGridBody.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarGridBody.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarGridBody.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarGridBody.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarGridHead.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarGridHead.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarGridHead.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarGridHead.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarGridRow.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarGridRow.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarGridRow.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarGridRow.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarHeadCell.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarHeadCell.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarHeadCell.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarHeadCell.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarHeader.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarHeader.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarHeader.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarHeading.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarHeading.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/CalendarHeading.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarHeading.vue
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarNextButton.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/calendar/CalendarNextButton.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
index 05e0fd443..e1247abe0 100644
--- a/apps/www/registry/new-york/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/calendar/CalendarPrevButton.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/calendar/CalendarPrevButton.vue
rename to apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
index 93bb59c02..7c5ac6a05 100644
--- a/apps/www/registry/new-york/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/calendar/index.ts b/apps/www/src/registry/new-york/ui/calendar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/calendar/index.ts
rename to apps/www/src/registry/new-york/ui/calendar/index.ts
diff --git a/apps/www/registry/new-york/ui/card/Card.vue b/apps/www/src/registry/new-york/ui/card/Card.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/Card.vue
rename to apps/www/src/registry/new-york/ui/card/Card.vue
diff --git a/apps/www/registry/new-york/ui/card/CardContent.vue b/apps/www/src/registry/new-york/ui/card/CardContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/CardContent.vue
rename to apps/www/src/registry/new-york/ui/card/CardContent.vue
diff --git a/apps/www/registry/new-york/ui/card/CardDescription.vue b/apps/www/src/registry/new-york/ui/card/CardDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/CardDescription.vue
rename to apps/www/src/registry/new-york/ui/card/CardDescription.vue
diff --git a/apps/www/registry/new-york/ui/card/CardFooter.vue b/apps/www/src/registry/new-york/ui/card/CardFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/CardFooter.vue
rename to apps/www/src/registry/new-york/ui/card/CardFooter.vue
diff --git a/apps/www/registry/new-york/ui/card/CardHeader.vue b/apps/www/src/registry/new-york/ui/card/CardHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/CardHeader.vue
rename to apps/www/src/registry/new-york/ui/card/CardHeader.vue
diff --git a/apps/www/registry/new-york/ui/card/CardTitle.vue b/apps/www/src/registry/new-york/ui/card/CardTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/card/CardTitle.vue
rename to apps/www/src/registry/new-york/ui/card/CardTitle.vue
diff --git a/apps/www/registry/new-york/ui/card/index.ts b/apps/www/src/registry/new-york/ui/card/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/card/index.ts
rename to apps/www/src/registry/new-york/ui/card/index.ts
diff --git a/apps/www/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/registry/new-york/ui/carousel/Carousel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/Carousel.vue
rename to apps/www/src/registry/new-york/ui/carousel/Carousel.vue
diff --git a/apps/www/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/CarouselContent.vue
rename to apps/www/src/registry/new-york/ui/carousel/CarouselContent.vue
diff --git a/apps/www/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/CarouselItem.vue
rename to apps/www/src/registry/new-york/ui/carousel/CarouselItem.vue
diff --git a/apps/www/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
similarity index 93%
rename from apps/www/registry/new-york/ui/carousel/CarouselNext.vue
rename to apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
index a51b85a8e..429b61201 100644
--- a/apps/www/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { Button } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import { ArrowRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 
diff --git a/apps/www/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
similarity index 93%
rename from apps/www/registry/new-york/ui/carousel/CarouselPrevious.vue
rename to apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
index 2367d5214..59e89a62e 100644
--- a/apps/www/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { Button } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
 import { ArrowLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 
diff --git a/apps/www/registry/new-york/ui/carousel/index.ts b/apps/www/src/registry/new-york/ui/carousel/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/index.ts
rename to apps/www/src/registry/new-york/ui/carousel/index.ts
diff --git a/apps/www/registry/new-york/ui/carousel/interface.ts b/apps/www/src/registry/new-york/ui/carousel/interface.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/interface.ts
rename to apps/www/src/registry/new-york/ui/carousel/interface.ts
diff --git a/apps/www/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/registry/new-york/ui/carousel/useCarousel.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/carousel/useCarousel.ts
rename to apps/www/src/registry/new-york/ui/carousel/useCarousel.ts
diff --git a/apps/www/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/registry/new-york/ui/chart-area/AreaChart.vue
similarity index 97%
rename from apps/www/registry/new-york/ui/chart-area/AreaChart.vue
rename to apps/www/src/registry/new-york/ui/chart-area/AreaChart.vue
index 451fb5bbb..8a1a899dc 100644
--- a/apps/www/registry/new-york/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/registry/new-york/ui/chart-area/AreaChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'
 import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Area, Axis, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
diff --git a/apps/www/registry/new-york/ui/chart-area/index.ts b/apps/www/src/registry/new-york/ui/chart-area/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart-area/index.ts
rename to apps/www/src/registry/new-york/ui/chart-area/index.ts
diff --git a/apps/www/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/registry/new-york/ui/chart-bar/BarChart.vue
similarity index 97%
rename from apps/www/registry/new-york/ui/chart-bar/BarChart.vue
rename to apps/www/src/registry/new-york/ui/chart-bar/BarChart.vue
index 060bc254c..d8e3e9a6c 100644
--- a/apps/www/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/registry/new-york/ui/chart-bar/BarChart.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
diff --git a/apps/www/registry/new-york/ui/chart-bar/index.ts b/apps/www/src/registry/new-york/ui/chart-bar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart-bar/index.ts
rename to apps/www/src/registry/new-york/ui/chart-bar/index.ts
diff --git a/apps/www/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/src/registry/new-york/ui/chart-donut/DonutChart.vue
similarity index 97%
rename from apps/www/registry/new-york/ui/chart-donut/DonutChart.vue
rename to apps/www/src/registry/new-york/ui/chart-donut/DonutChart.vue
index 506c7dd90..390401d2f 100644
--- a/apps/www/registry/new-york/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/registry/new-york/ui/chart-donut/DonutChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'
 import { Donut } from '@unovis/ts'
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
diff --git a/apps/www/registry/new-york/ui/chart-donut/index.ts b/apps/www/src/registry/new-york/ui/chart-donut/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart-donut/index.ts
rename to apps/www/src/registry/new-york/ui/chart-donut/index.ts
diff --git a/apps/www/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/src/registry/new-york/ui/chart-line/LineChart.vue
similarity index 97%
rename from apps/www/registry/new-york/ui/chart-line/LineChart.vue
rename to apps/www/src/registry/new-york/ui/chart-line/LineChart.vue
index d9e0d5090..d4a2bd34d 100644
--- a/apps/www/registry/new-york/ui/chart-line/LineChart.vue
+++ b/apps/www/src/registry/new-york/ui/chart-line/LineChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'
 import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
 import { Axis, Line } from '@unovis/ts'
 import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
diff --git a/apps/www/registry/new-york/ui/chart-line/index.ts b/apps/www/src/registry/new-york/ui/chart-line/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart-line/index.ts
rename to apps/www/src/registry/new-york/ui/chart-line/index.ts
diff --git a/apps/www/registry/new-york/ui/chart/ChartCrosshair.vue b/apps/www/src/registry/new-york/ui/chart/ChartCrosshair.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/chart/ChartCrosshair.vue
rename to apps/www/src/registry/new-york/ui/chart/ChartCrosshair.vue
diff --git a/apps/www/registry/new-york/ui/chart/ChartLegend.vue b/apps/www/src/registry/new-york/ui/chart/ChartLegend.vue
similarity index 95%
rename from apps/www/registry/new-york/ui/chart/ChartLegend.vue
rename to apps/www/src/registry/new-york/ui/chart/ChartLegend.vue
index b4e15f83e..b7deb8ca0 100644
--- a/apps/www/registry/new-york/ui/chart/ChartLegend.vue
+++ b/apps/www/src/registry/new-york/ui/chart/ChartLegend.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { BulletLegend } from '@unovis/ts'
 import { VisBulletLegend } from '@unovis/vue'
 import { nextTick, onMounted, ref } from 'vue'
diff --git a/apps/www/registry/new-york/ui/chart/ChartSingleTooltip.vue b/apps/www/src/registry/new-york/ui/chart/ChartSingleTooltip.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/chart/ChartSingleTooltip.vue
rename to apps/www/src/registry/new-york/ui/chart/ChartSingleTooltip.vue
diff --git a/apps/www/registry/new-york/ui/chart/ChartTooltip.vue b/apps/www/src/registry/new-york/ui/chart/ChartTooltip.vue
similarity index 91%
rename from apps/www/registry/new-york/ui/chart/ChartTooltip.vue
rename to apps/www/src/registry/new-york/ui/chart/ChartTooltip.vue
index 1f8e6e980..9253be5f1 100644
--- a/apps/www/registry/new-york/ui/chart/ChartTooltip.vue
+++ b/apps/www/src/registry/new-york/ui/chart/ChartTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
 
 defineProps<{
   title?: string
diff --git a/apps/www/registry/new-york/ui/chart/index.ts b/apps/www/src/registry/new-york/ui/chart/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart/index.ts
rename to apps/www/src/registry/new-york/ui/chart/index.ts
diff --git a/apps/www/registry/new-york/ui/chart/interface.ts b/apps/www/src/registry/new-york/ui/chart/interface.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/chart/interface.ts
rename to apps/www/src/registry/new-york/ui/chart/interface.ts
diff --git a/apps/www/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/checkbox/Checkbox.vue
rename to apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue
diff --git a/apps/www/registry/new-york/ui/checkbox/index.ts b/apps/www/src/registry/new-york/ui/checkbox/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/checkbox/index.ts
rename to apps/www/src/registry/new-york/ui/checkbox/index.ts
diff --git a/apps/www/registry/new-york/ui/collapsible/Collapsible.vue b/apps/www/src/registry/new-york/ui/collapsible/Collapsible.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/collapsible/Collapsible.vue
rename to apps/www/src/registry/new-york/ui/collapsible/Collapsible.vue
diff --git a/apps/www/registry/new-york/ui/collapsible/CollapsibleContent.vue b/apps/www/src/registry/new-york/ui/collapsible/CollapsibleContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/collapsible/CollapsibleContent.vue
rename to apps/www/src/registry/new-york/ui/collapsible/CollapsibleContent.vue
diff --git a/apps/www/registry/new-york/ui/collapsible/CollapsibleTrigger.vue b/apps/www/src/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
rename to apps/www/src/registry/new-york/ui/collapsible/CollapsibleTrigger.vue
diff --git a/apps/www/registry/new-york/ui/collapsible/index.ts b/apps/www/src/registry/new-york/ui/collapsible/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/collapsible/index.ts
rename to apps/www/src/registry/new-york/ui/collapsible/index.ts
diff --git a/apps/www/registry/new-york/ui/command/Command.vue b/apps/www/src/registry/new-york/ui/command/Command.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/Command.vue
rename to apps/www/src/registry/new-york/ui/command/Command.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandDialog.vue b/apps/www/src/registry/new-york/ui/command/CommandDialog.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/command/CommandDialog.vue
rename to apps/www/src/registry/new-york/ui/command/CommandDialog.vue
index eb7900781..8fcb51b5f 100644
--- a/apps/www/registry/new-york/ui/command/CommandDialog.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
+import { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'
 import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
 
diff --git a/apps/www/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/src/registry/new-york/ui/command/CommandEmpty.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandEmpty.vue
rename to apps/www/src/registry/new-york/ui/command/CommandEmpty.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/registry/new-york/ui/command/CommandGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandGroup.vue
rename to apps/www/src/registry/new-york/ui/command/CommandGroup.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/registry/new-york/ui/command/CommandInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandInput.vue
rename to apps/www/src/registry/new-york/ui/command/CommandInput.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandItem.vue
rename to apps/www/src/registry/new-york/ui/command/CommandItem.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandList.vue b/apps/www/src/registry/new-york/ui/command/CommandList.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandList.vue
rename to apps/www/src/registry/new-york/ui/command/CommandList.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/src/registry/new-york/ui/command/CommandSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandSeparator.vue
rename to apps/www/src/registry/new-york/ui/command/CommandSeparator.vue
diff --git a/apps/www/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/src/registry/new-york/ui/command/CommandShortcut.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/command/CommandShortcut.vue
rename to apps/www/src/registry/new-york/ui/command/CommandShortcut.vue
diff --git a/apps/www/registry/new-york/ui/command/index.ts b/apps/www/src/registry/new-york/ui/command/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/command/index.ts
rename to apps/www/src/registry/new-york/ui/command/index.ts
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenu.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenu.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenu.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenu.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuContent.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuContent.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuGroup.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuGroup.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuGroup.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuItem.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuItem.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuLabel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuLabel.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuLabel.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuPortal.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuPortal.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuPortal.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuPortal.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuSeparator.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuSub.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSub.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuSub.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuSub.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
rename to apps/www/src/registry/new-york/ui/context-menu/ContextMenuTrigger.vue
diff --git a/apps/www/registry/new-york/ui/context-menu/index.ts b/apps/www/src/registry/new-york/ui/context-menu/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/context-menu/index.ts
rename to apps/www/src/registry/new-york/ui/context-menu/index.ts
diff --git a/apps/www/registry/new-york/ui/dialog/Dialog.vue b/apps/www/src/registry/new-york/ui/dialog/Dialog.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/Dialog.vue
rename to apps/www/src/registry/new-york/ui/dialog/Dialog.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogClose.vue b/apps/www/src/registry/new-york/ui/dialog/DialogClose.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogClose.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogClose.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/registry/new-york/ui/dialog/DialogContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogContent.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogContent.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogDescription.vue b/apps/www/src/registry/new-york/ui/dialog/DialogDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogDescription.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogDescription.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogFooter.vue b/apps/www/src/registry/new-york/ui/dialog/DialogFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogFooter.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogFooter.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/registry/new-york/ui/dialog/DialogHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogHeader.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogHeader.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogScrollContent.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogTitle.vue b/apps/www/src/registry/new-york/ui/dialog/DialogTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogTitle.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogTitle.vue
diff --git a/apps/www/registry/new-york/ui/dialog/DialogTrigger.vue b/apps/www/src/registry/new-york/ui/dialog/DialogTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/DialogTrigger.vue
rename to apps/www/src/registry/new-york/ui/dialog/DialogTrigger.vue
diff --git a/apps/www/registry/new-york/ui/dialog/index.ts b/apps/www/src/registry/new-york/ui/dialog/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/dialog/index.ts
rename to apps/www/src/registry/new-york/ui/dialog/index.ts
diff --git a/apps/www/registry/new-york/ui/drawer/Drawer.vue b/apps/www/src/registry/new-york/ui/drawer/Drawer.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/Drawer.vue
rename to apps/www/src/registry/new-york/ui/drawer/Drawer.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerContent.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerContent.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerContent.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerDescription.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerDescription.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerDescription.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerFooter.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerFooter.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerFooter.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerHeader.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerHeader.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerHeader.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerOverlay.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerOverlay.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerOverlay.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerOverlay.vue
diff --git a/apps/www/registry/new-york/ui/drawer/DrawerTitle.vue b/apps/www/src/registry/new-york/ui/drawer/DrawerTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/DrawerTitle.vue
rename to apps/www/src/registry/new-york/ui/drawer/DrawerTitle.vue
diff --git a/apps/www/registry/new-york/ui/drawer/index.ts b/apps/www/src/registry/new-york/ui/drawer/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/drawer/index.ts
rename to apps/www/src/registry/new-york/ui/drawer/index.ts
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenu.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenu.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
rename to apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue
diff --git a/apps/www/registry/new-york/ui/dropdown-menu/index.ts b/apps/www/src/registry/new-york/ui/dropdown-menu/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/dropdown-menu/index.ts
rename to apps/www/src/registry/new-york/ui/dropdown-menu/index.ts
diff --git a/apps/www/registry/new-york/ui/form/FormControl.vue b/apps/www/src/registry/new-york/ui/form/FormControl.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/form/FormControl.vue
rename to apps/www/src/registry/new-york/ui/form/FormControl.vue
diff --git a/apps/www/registry/new-york/ui/form/FormDescription.vue b/apps/www/src/registry/new-york/ui/form/FormDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/form/FormDescription.vue
rename to apps/www/src/registry/new-york/ui/form/FormDescription.vue
diff --git a/apps/www/registry/new-york/ui/form/FormItem.vue b/apps/www/src/registry/new-york/ui/form/FormItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/form/FormItem.vue
rename to apps/www/src/registry/new-york/ui/form/FormItem.vue
diff --git a/apps/www/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/registry/new-york/ui/form/FormLabel.vue
similarity index 89%
rename from apps/www/registry/new-york/ui/form/FormLabel.vue
rename to apps/www/src/registry/new-york/ui/form/FormLabel.vue
index 075f1282f..44351ec6b 100644
--- a/apps/www/registry/new-york/ui/form/FormLabel.vue
+++ b/apps/www/src/registry/new-york/ui/form/FormLabel.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/lib/registry/new-york/ui/label'
 import { cn } from '@/lib/utils'
+import { Label } from '@/registry/new-york/ui/label'
 import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/apps/www/registry/new-york/ui/form/FormMessage.vue b/apps/www/src/registry/new-york/ui/form/FormMessage.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/form/FormMessage.vue
rename to apps/www/src/registry/new-york/ui/form/FormMessage.vue
diff --git a/apps/www/registry/new-york/ui/form/index.ts b/apps/www/src/registry/new-york/ui/form/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/form/index.ts
rename to apps/www/src/registry/new-york/ui/form/index.ts
diff --git a/apps/www/registry/new-york/ui/form/injectionKeys.ts b/apps/www/src/registry/new-york/ui/form/injectionKeys.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/form/injectionKeys.ts
rename to apps/www/src/registry/new-york/ui/form/injectionKeys.ts
diff --git a/apps/www/registry/new-york/ui/form/useFormField.ts b/apps/www/src/registry/new-york/ui/form/useFormField.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/form/useFormField.ts
rename to apps/www/src/registry/new-york/ui/form/useFormField.ts
diff --git a/apps/www/registry/new-york/ui/hover-card/HoverCard.vue b/apps/www/src/registry/new-york/ui/hover-card/HoverCard.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/hover-card/HoverCard.vue
rename to apps/www/src/registry/new-york/ui/hover-card/HoverCard.vue
diff --git a/apps/www/registry/new-york/ui/hover-card/HoverCardContent.vue b/apps/www/src/registry/new-york/ui/hover-card/HoverCardContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/hover-card/HoverCardContent.vue
rename to apps/www/src/registry/new-york/ui/hover-card/HoverCardContent.vue
diff --git a/apps/www/registry/new-york/ui/hover-card/HoverCardTrigger.vue b/apps/www/src/registry/new-york/ui/hover-card/HoverCardTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/hover-card/HoverCardTrigger.vue
rename to apps/www/src/registry/new-york/ui/hover-card/HoverCardTrigger.vue
diff --git a/apps/www/registry/new-york/ui/hover-card/index.ts b/apps/www/src/registry/new-york/ui/hover-card/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/hover-card/index.ts
rename to apps/www/src/registry/new-york/ui/hover-card/index.ts
diff --git a/apps/www/registry/new-york/ui/input/Input.vue b/apps/www/src/registry/new-york/ui/input/Input.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/input/Input.vue
rename to apps/www/src/registry/new-york/ui/input/Input.vue
diff --git a/apps/www/registry/new-york/ui/input/index.ts b/apps/www/src/registry/new-york/ui/input/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/input/index.ts
rename to apps/www/src/registry/new-york/ui/input/index.ts
diff --git a/apps/www/registry/new-york/ui/label/Label.vue b/apps/www/src/registry/new-york/ui/label/Label.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/label/Label.vue
rename to apps/www/src/registry/new-york/ui/label/Label.vue
diff --git a/apps/www/registry/new-york/ui/label/index.ts b/apps/www/src/registry/new-york/ui/label/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/label/index.ts
rename to apps/www/src/registry/new-york/ui/label/index.ts
diff --git a/apps/www/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/registry/new-york/ui/menubar/Menubar.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/Menubar.vue
rename to apps/www/src/registry/new-york/ui/menubar/Menubar.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarContent.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarContent.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarGroup.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarGroup.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarGroup.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarItem.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarItem.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarLabel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarLabel.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarLabel.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarMenu.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarMenu.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarMenu.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarMenu.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarRadioGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarRadioGroup.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarRadioGroup.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarRadioItem.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarSeparator.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarSeparator.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarSeparator.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarShortcut.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarShortcut.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarShortcut.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarSub.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarSub.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarSub.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarSub.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarSubContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarSubContent.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarSubContent.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarSubTrigger.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue
diff --git a/apps/www/registry/new-york/ui/menubar/MenubarTrigger.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/MenubarTrigger.vue
rename to apps/www/src/registry/new-york/ui/menubar/MenubarTrigger.vue
diff --git a/apps/www/registry/new-york/ui/menubar/index.ts b/apps/www/src/registry/new-york/ui/menubar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/menubar/index.ts
rename to apps/www/src/registry/new-york/ui/menubar/index.ts
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenu.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenu.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenu.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuContent.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuItem.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuLink.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
rename to apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
diff --git a/apps/www/registry/new-york/ui/navigation-menu/index.ts b/apps/www/src/registry/new-york/ui/navigation-menu/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/navigation-menu/index.ts
rename to apps/www/src/registry/new-york/ui/navigation-menu/index.ts
diff --git a/apps/www/registry/new-york/ui/number-field/NumberField.vue b/apps/www/src/registry/new-york/ui/number-field/NumberField.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/NumberField.vue
rename to apps/www/src/registry/new-york/ui/number-field/NumberField.vue
diff --git a/apps/www/registry/new-york/ui/number-field/NumberFieldContent.vue b/apps/www/src/registry/new-york/ui/number-field/NumberFieldContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/NumberFieldContent.vue
rename to apps/www/src/registry/new-york/ui/number-field/NumberFieldContent.vue
diff --git a/apps/www/registry/new-york/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/registry/new-york/ui/number-field/NumberFieldDecrement.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/NumberFieldDecrement.vue
rename to apps/www/src/registry/new-york/ui/number-field/NumberFieldDecrement.vue
diff --git a/apps/www/registry/new-york/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/registry/new-york/ui/number-field/NumberFieldIncrement.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/NumberFieldIncrement.vue
rename to apps/www/src/registry/new-york/ui/number-field/NumberFieldIncrement.vue
diff --git a/apps/www/registry/new-york/ui/number-field/NumberFieldInput.vue b/apps/www/src/registry/new-york/ui/number-field/NumberFieldInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/NumberFieldInput.vue
rename to apps/www/src/registry/new-york/ui/number-field/NumberFieldInput.vue
diff --git a/apps/www/registry/new-york/ui/number-field/index.ts b/apps/www/src/registry/new-york/ui/number-field/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/number-field/index.ts
rename to apps/www/src/registry/new-york/ui/number-field/index.ts
diff --git a/apps/www/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/pagination/PaginationEllipsis.vue
rename to apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue
diff --git a/apps/www/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
similarity index 94%
rename from apps/www/registry/new-york/ui/pagination/PaginationFirst.vue
rename to apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
index 5eb15f9bf..dfc1f3d2a 100644
--- a/apps/www/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/button'
 import { DoubleArrowLeftIcon } from '@radix-icons/vue'
 import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
similarity index 94%
rename from apps/www/registry/new-york/ui/pagination/PaginationLast.vue
rename to apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
index 03a73d845..a722ee03f 100644
--- a/apps/www/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/button'
 import { DoubleArrowRightIcon } from '@radix-icons/vue'
 import { PaginationLast, type PaginationLastProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
similarity index 94%
rename from apps/www/registry/new-york/ui/pagination/PaginationNext.vue
rename to apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
index dd9e2d61f..cf304c880 100644
--- a/apps/www/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/button'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { PaginationNext, type PaginationNextProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
similarity index 94%
rename from apps/www/registry/new-york/ui/pagination/PaginationPrev.vue
rename to apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
index 1e00a0ac8..b74f97b82 100644
--- a/apps/www/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   Button,
-} from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
+} from '@/registry/new-york/ui/button'
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/pagination/index.ts b/apps/www/src/registry/new-york/ui/pagination/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/pagination/index.ts
rename to apps/www/src/registry/new-york/ui/pagination/index.ts
diff --git a/apps/www/registry/new-york/ui/pin-input/PinInput.vue b/apps/www/src/registry/new-york/ui/pin-input/PinInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/pin-input/PinInput.vue
rename to apps/www/src/registry/new-york/ui/pin-input/PinInput.vue
diff --git a/apps/www/registry/new-york/ui/pin-input/PinInputGroup.vue b/apps/www/src/registry/new-york/ui/pin-input/PinInputGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/pin-input/PinInputGroup.vue
rename to apps/www/src/registry/new-york/ui/pin-input/PinInputGroup.vue
diff --git a/apps/www/registry/new-york/ui/pin-input/PinInputInput.vue b/apps/www/src/registry/new-york/ui/pin-input/PinInputInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/pin-input/PinInputInput.vue
rename to apps/www/src/registry/new-york/ui/pin-input/PinInputInput.vue
diff --git a/apps/www/registry/new-york/ui/pin-input/PinInputSeparator.vue b/apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/pin-input/PinInputSeparator.vue
rename to apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue
diff --git a/apps/www/registry/new-york/ui/pin-input/index.ts b/apps/www/src/registry/new-york/ui/pin-input/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/pin-input/index.ts
rename to apps/www/src/registry/new-york/ui/pin-input/index.ts
diff --git a/apps/www/registry/new-york/ui/popover/Popover.vue b/apps/www/src/registry/new-york/ui/popover/Popover.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/popover/Popover.vue
rename to apps/www/src/registry/new-york/ui/popover/Popover.vue
diff --git a/apps/www/registry/new-york/ui/popover/PopoverContent.vue b/apps/www/src/registry/new-york/ui/popover/PopoverContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/popover/PopoverContent.vue
rename to apps/www/src/registry/new-york/ui/popover/PopoverContent.vue
diff --git a/apps/www/registry/new-york/ui/popover/PopoverTrigger.vue b/apps/www/src/registry/new-york/ui/popover/PopoverTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/popover/PopoverTrigger.vue
rename to apps/www/src/registry/new-york/ui/popover/PopoverTrigger.vue
diff --git a/apps/www/registry/new-york/ui/popover/index.ts b/apps/www/src/registry/new-york/ui/popover/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/popover/index.ts
rename to apps/www/src/registry/new-york/ui/popover/index.ts
diff --git a/apps/www/registry/new-york/ui/progress/Progress.vue b/apps/www/src/registry/new-york/ui/progress/Progress.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/progress/Progress.vue
rename to apps/www/src/registry/new-york/ui/progress/Progress.vue
diff --git a/apps/www/registry/new-york/ui/progress/index.ts b/apps/www/src/registry/new-york/ui/progress/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/progress/index.ts
rename to apps/www/src/registry/new-york/ui/progress/index.ts
diff --git a/apps/www/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/registry/new-york/ui/radio-group/RadioGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/radio-group/RadioGroup.vue
rename to apps/www/src/registry/new-york/ui/radio-group/RadioGroup.vue
diff --git a/apps/www/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/radio-group/RadioGroupItem.vue
rename to apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
diff --git a/apps/www/registry/new-york/ui/radio-group/index.ts b/apps/www/src/registry/new-york/ui/radio-group/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/radio-group/index.ts
rename to apps/www/src/registry/new-york/ui/radio-group/index.ts
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendar.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendar.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendar.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendar.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarCell.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarCell.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
similarity index 96%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
index ae127f130..f99ceacde 100644
--- a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGrid.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarHeading.vue
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
index 98a3654e3..a9325725f 100644
--- a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
similarity index 92%
rename from apps/www/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
rename to apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
index 1892ec383..0c4d4d3c9 100644
--- a/apps/www/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
diff --git a/apps/www/registry/new-york/ui/range-calendar/index.ts b/apps/www/src/registry/new-york/ui/range-calendar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/range-calendar/index.ts
rename to apps/www/src/registry/new-york/ui/range-calendar/index.ts
diff --git a/apps/www/registry/new-york/ui/resizable/ResizableHandle.vue b/apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/resizable/ResizableHandle.vue
rename to apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue
diff --git a/apps/www/registry/new-york/ui/resizable/ResizablePanelGroup.vue b/apps/www/src/registry/new-york/ui/resizable/ResizablePanelGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/resizable/ResizablePanelGroup.vue
rename to apps/www/src/registry/new-york/ui/resizable/ResizablePanelGroup.vue
diff --git a/apps/www/registry/new-york/ui/resizable/index.ts b/apps/www/src/registry/new-york/ui/resizable/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/resizable/index.ts
rename to apps/www/src/registry/new-york/ui/resizable/index.ts
diff --git a/apps/www/registry/new-york/ui/scroll-area/ScrollArea.vue b/apps/www/src/registry/new-york/ui/scroll-area/ScrollArea.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/scroll-area/ScrollArea.vue
rename to apps/www/src/registry/new-york/ui/scroll-area/ScrollArea.vue
diff --git a/apps/www/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/registry/new-york/ui/scroll-area/ScrollBar.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/scroll-area/ScrollBar.vue
rename to apps/www/src/registry/new-york/ui/scroll-area/ScrollBar.vue
diff --git a/apps/www/registry/new-york/ui/scroll-area/index.ts b/apps/www/src/registry/new-york/ui/scroll-area/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/scroll-area/index.ts
rename to apps/www/src/registry/new-york/ui/scroll-area/index.ts
diff --git a/apps/www/registry/new-york/ui/select/Select.vue b/apps/www/src/registry/new-york/ui/select/Select.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/Select.vue
rename to apps/www/src/registry/new-york/ui/select/Select.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/registry/new-york/ui/select/SelectContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectContent.vue
rename to apps/www/src/registry/new-york/ui/select/SelectContent.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectGroup.vue b/apps/www/src/registry/new-york/ui/select/SelectGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectGroup.vue
rename to apps/www/src/registry/new-york/ui/select/SelectGroup.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/registry/new-york/ui/select/SelectItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectItem.vue
rename to apps/www/src/registry/new-york/ui/select/SelectItem.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectItemText.vue b/apps/www/src/registry/new-york/ui/select/SelectItemText.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectItemText.vue
rename to apps/www/src/registry/new-york/ui/select/SelectItemText.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectLabel.vue b/apps/www/src/registry/new-york/ui/select/SelectLabel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectLabel.vue
rename to apps/www/src/registry/new-york/ui/select/SelectLabel.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectScrollDownButton.vue
rename to apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectScrollUpButton.vue
rename to apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectSeparator.vue b/apps/www/src/registry/new-york/ui/select/SelectSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectSeparator.vue
rename to apps/www/src/registry/new-york/ui/select/SelectSeparator.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/registry/new-york/ui/select/SelectTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectTrigger.vue
rename to apps/www/src/registry/new-york/ui/select/SelectTrigger.vue
diff --git a/apps/www/registry/new-york/ui/select/SelectValue.vue b/apps/www/src/registry/new-york/ui/select/SelectValue.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/select/SelectValue.vue
rename to apps/www/src/registry/new-york/ui/select/SelectValue.vue
diff --git a/apps/www/registry/new-york/ui/select/index.ts b/apps/www/src/registry/new-york/ui/select/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/select/index.ts
rename to apps/www/src/registry/new-york/ui/select/index.ts
diff --git a/apps/www/registry/new-york/ui/separator/Separator.vue b/apps/www/src/registry/new-york/ui/separator/Separator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/separator/Separator.vue
rename to apps/www/src/registry/new-york/ui/separator/Separator.vue
diff --git a/apps/www/registry/new-york/ui/separator/index.ts b/apps/www/src/registry/new-york/ui/separator/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/separator/index.ts
rename to apps/www/src/registry/new-york/ui/separator/index.ts
diff --git a/apps/www/registry/new-york/ui/sheet/Sheet.vue b/apps/www/src/registry/new-york/ui/sheet/Sheet.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/Sheet.vue
rename to apps/www/src/registry/new-york/ui/sheet/Sheet.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetClose.vue b/apps/www/src/registry/new-york/ui/sheet/SheetClose.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetClose.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetClose.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/registry/new-york/ui/sheet/SheetContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetContent.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetContent.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetDescription.vue b/apps/www/src/registry/new-york/ui/sheet/SheetDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetDescription.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetDescription.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetFooter.vue b/apps/www/src/registry/new-york/ui/sheet/SheetFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetFooter.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetFooter.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/registry/new-york/ui/sheet/SheetHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetHeader.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetHeader.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetTitle.vue b/apps/www/src/registry/new-york/ui/sheet/SheetTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetTitle.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetTitle.vue
diff --git a/apps/www/registry/new-york/ui/sheet/SheetTrigger.vue b/apps/www/src/registry/new-york/ui/sheet/SheetTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/SheetTrigger.vue
rename to apps/www/src/registry/new-york/ui/sheet/SheetTrigger.vue
diff --git a/apps/www/registry/new-york/ui/sheet/index.ts b/apps/www/src/registry/new-york/ui/sheet/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/sheet/index.ts
rename to apps/www/src/registry/new-york/ui/sheet/index.ts
diff --git a/apps/www/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
similarity index 95%
rename from apps/www/registry/new-york/ui/sidebar/Sidebar.vue
rename to apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
index 0937ea454..2d785354a 100644
--- a/apps/www/registry/new-york/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Sheet from '@/lib/registry/new-york/ui/sheet/Sheet.vue'
-import SheetContent from '@/lib/registry/new-york/ui/sheet/SheetContent.vue'
 import { cn } from '@/lib/utils'
+import Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'
+import SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarContent.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarContent.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarContent.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarFooter.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarFooter.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarFooter.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarGroup.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarGroup.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarGroup.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarGroup.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarGroupAction.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarGroupAction.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarGroupAction.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarGroupAction.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarGroupContent.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarGroupContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarGroupContent.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarGroupContent.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarGroupLabel.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarGroupLabel.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarHeader.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarHeader.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarHeader.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
similarity index 86%
rename from apps/www/registry/new-york/ui/sidebar/SidebarInput.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
index 909aff593..8c79b34e0 100644
--- a/apps/www/registry/new-york/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Input from '@/lib/registry/new-york/ui/input/Input.vue'
 import { cn } from '@/lib/utils'
+import Input from '@/registry/new-york/ui/input/Input.vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarInset.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarInset.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarInset.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarInset.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenu.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenu.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenu.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenu.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuAction.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuAction.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuAction.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuAction.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuBadge.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuBadge.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
similarity index 83%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuButton.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
index f11c90e2c..2540af843 100644
--- a/apps/www/registry/new-york/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Tooltip from '@/lib/registry/new-york/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/lib/registry/new-york/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/lib/registry/new-york/ui/tooltip/TooltipTrigger.vue'
+import Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'
+import TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'
+import TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuItem.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuItem.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuItem.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
similarity index 90%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
index 9bcad9d0f..721612188 100644
--- a/apps/www/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Skeleton from '@/lib/registry/new-york/ui/skeleton/Skeleton.vue'
 import { cn } from '@/lib/utils'
+import Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuSub.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSub.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuSub.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSub.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarProvider.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarProvider.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarRail.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarRail.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/SidebarRail.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarRail.vue
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
similarity index 81%
rename from apps/www/registry/new-york/ui/sidebar/SidebarSeparator.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
index 0da3e2691..899053711 100644
--- a/apps/www/registry/new-york/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Separator from '@/lib/registry/new-york/ui/separator/Separator.vue'
 import { cn } from '@/lib/utils'
+import Separator from '@/registry/new-york/ui/separator/Separator.vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/registry/new-york/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
similarity index 89%
rename from apps/www/registry/new-york/ui/sidebar/SidebarTrigger.vue
rename to apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
index aa5cd942f..7f7c43217 100644
--- a/apps/www/registry/new-york/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import Button from '@/lib/registry/new-york/ui/button/Button.vue'
 import { cn } from '@/lib/utils'
+import Button from '@/registry/new-york/ui/button/Button.vue'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/apps/www/registry/new-york/ui/sidebar/index.ts b/apps/www/src/registry/new-york/ui/sidebar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/index.ts
rename to apps/www/src/registry/new-york/ui/sidebar/index.ts
diff --git a/apps/www/registry/new-york/ui/sidebar/utils.ts b/apps/www/src/registry/new-york/ui/sidebar/utils.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/sidebar/utils.ts
rename to apps/www/src/registry/new-york/ui/sidebar/utils.ts
diff --git a/apps/www/registry/new-york/ui/skeleton/Skeleton.vue b/apps/www/src/registry/new-york/ui/skeleton/Skeleton.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/skeleton/Skeleton.vue
rename to apps/www/src/registry/new-york/ui/skeleton/Skeleton.vue
diff --git a/apps/www/registry/new-york/ui/skeleton/index.ts b/apps/www/src/registry/new-york/ui/skeleton/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/skeleton/index.ts
rename to apps/www/src/registry/new-york/ui/skeleton/index.ts
diff --git a/apps/www/registry/new-york/ui/slider/Slider.vue b/apps/www/src/registry/new-york/ui/slider/Slider.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/slider/Slider.vue
rename to apps/www/src/registry/new-york/ui/slider/Slider.vue
diff --git a/apps/www/registry/new-york/ui/slider/index.ts b/apps/www/src/registry/new-york/ui/slider/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/slider/index.ts
rename to apps/www/src/registry/new-york/ui/slider/index.ts
diff --git a/apps/www/registry/new-york/ui/sonner/Sonner.vue b/apps/www/src/registry/new-york/ui/sonner/Sonner.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/sonner/Sonner.vue
rename to apps/www/src/registry/new-york/ui/sonner/Sonner.vue
diff --git a/apps/www/registry/new-york/ui/sonner/index.ts b/apps/www/src/registry/new-york/ui/sonner/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/sonner/index.ts
rename to apps/www/src/registry/new-york/ui/sonner/index.ts
diff --git a/apps/www/registry/new-york/ui/stepper/Stepper.vue b/apps/www/src/registry/new-york/ui/stepper/Stepper.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/Stepper.vue
rename to apps/www/src/registry/new-york/ui/stepper/Stepper.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperDescription.vue b/apps/www/src/registry/new-york/ui/stepper/StepperDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperDescription.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperDescription.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperIndicator.vue b/apps/www/src/registry/new-york/ui/stepper/StepperIndicator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperIndicator.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperIndicator.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperItem.vue b/apps/www/src/registry/new-york/ui/stepper/StepperItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperItem.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperItem.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperSeparator.vue b/apps/www/src/registry/new-york/ui/stepper/StepperSeparator.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperSeparator.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperSeparator.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperTitle.vue b/apps/www/src/registry/new-york/ui/stepper/StepperTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperTitle.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperTitle.vue
diff --git a/apps/www/registry/new-york/ui/stepper/StepperTrigger.vue b/apps/www/src/registry/new-york/ui/stepper/StepperTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/StepperTrigger.vue
rename to apps/www/src/registry/new-york/ui/stepper/StepperTrigger.vue
diff --git a/apps/www/registry/new-york/ui/stepper/index.ts b/apps/www/src/registry/new-york/ui/stepper/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/stepper/index.ts
rename to apps/www/src/registry/new-york/ui/stepper/index.ts
diff --git a/apps/www/registry/new-york/ui/switch/Switch.vue b/apps/www/src/registry/new-york/ui/switch/Switch.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/switch/Switch.vue
rename to apps/www/src/registry/new-york/ui/switch/Switch.vue
diff --git a/apps/www/registry/new-york/ui/switch/index.ts b/apps/www/src/registry/new-york/ui/switch/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/switch/index.ts
rename to apps/www/src/registry/new-york/ui/switch/index.ts
diff --git a/apps/www/registry/new-york/ui/table/Table.vue b/apps/www/src/registry/new-york/ui/table/Table.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/Table.vue
rename to apps/www/src/registry/new-york/ui/table/Table.vue
diff --git a/apps/www/registry/new-york/ui/table/TableBody.vue b/apps/www/src/registry/new-york/ui/table/TableBody.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableBody.vue
rename to apps/www/src/registry/new-york/ui/table/TableBody.vue
diff --git a/apps/www/registry/new-york/ui/table/TableCaption.vue b/apps/www/src/registry/new-york/ui/table/TableCaption.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableCaption.vue
rename to apps/www/src/registry/new-york/ui/table/TableCaption.vue
diff --git a/apps/www/registry/new-york/ui/table/TableCell.vue b/apps/www/src/registry/new-york/ui/table/TableCell.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableCell.vue
rename to apps/www/src/registry/new-york/ui/table/TableCell.vue
diff --git a/apps/www/registry/new-york/ui/table/TableEmpty.vue b/apps/www/src/registry/new-york/ui/table/TableEmpty.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableEmpty.vue
rename to apps/www/src/registry/new-york/ui/table/TableEmpty.vue
diff --git a/apps/www/registry/new-york/ui/table/TableFooter.vue b/apps/www/src/registry/new-york/ui/table/TableFooter.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableFooter.vue
rename to apps/www/src/registry/new-york/ui/table/TableFooter.vue
diff --git a/apps/www/registry/new-york/ui/table/TableHead.vue b/apps/www/src/registry/new-york/ui/table/TableHead.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableHead.vue
rename to apps/www/src/registry/new-york/ui/table/TableHead.vue
diff --git a/apps/www/registry/new-york/ui/table/TableHeader.vue b/apps/www/src/registry/new-york/ui/table/TableHeader.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableHeader.vue
rename to apps/www/src/registry/new-york/ui/table/TableHeader.vue
diff --git a/apps/www/registry/new-york/ui/table/TableRow.vue b/apps/www/src/registry/new-york/ui/table/TableRow.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/table/TableRow.vue
rename to apps/www/src/registry/new-york/ui/table/TableRow.vue
diff --git a/apps/www/registry/new-york/ui/table/index.ts b/apps/www/src/registry/new-york/ui/table/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/table/index.ts
rename to apps/www/src/registry/new-york/ui/table/index.ts
diff --git a/apps/www/registry/new-york/ui/tabs/Tabs.vue b/apps/www/src/registry/new-york/ui/tabs/Tabs.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tabs/Tabs.vue
rename to apps/www/src/registry/new-york/ui/tabs/Tabs.vue
diff --git a/apps/www/registry/new-york/ui/tabs/TabsContent.vue b/apps/www/src/registry/new-york/ui/tabs/TabsContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tabs/TabsContent.vue
rename to apps/www/src/registry/new-york/ui/tabs/TabsContent.vue
diff --git a/apps/www/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/registry/new-york/ui/tabs/TabsList.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tabs/TabsList.vue
rename to apps/www/src/registry/new-york/ui/tabs/TabsList.vue
diff --git a/apps/www/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/registry/new-york/ui/tabs/TabsTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tabs/TabsTrigger.vue
rename to apps/www/src/registry/new-york/ui/tabs/TabsTrigger.vue
diff --git a/apps/www/registry/new-york/ui/tabs/index.ts b/apps/www/src/registry/new-york/ui/tabs/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/tabs/index.ts
rename to apps/www/src/registry/new-york/ui/tabs/index.ts
diff --git a/apps/www/registry/new-york/ui/tags-input/TagsInput.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/TagsInput.vue
rename to apps/www/src/registry/new-york/ui/tags-input/TagsInput.vue
diff --git a/apps/www/registry/new-york/ui/tags-input/TagsInputInput.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInputInput.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/TagsInputInput.vue
rename to apps/www/src/registry/new-york/ui/tags-input/TagsInputInput.vue
diff --git a/apps/www/registry/new-york/ui/tags-input/TagsInputItem.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInputItem.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/TagsInputItem.vue
rename to apps/www/src/registry/new-york/ui/tags-input/TagsInputItem.vue
diff --git a/apps/www/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
rename to apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
diff --git a/apps/www/registry/new-york/ui/tags-input/TagsInputItemText.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemText.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/TagsInputItemText.vue
rename to apps/www/src/registry/new-york/ui/tags-input/TagsInputItemText.vue
diff --git a/apps/www/registry/new-york/ui/tags-input/index.ts b/apps/www/src/registry/new-york/ui/tags-input/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/tags-input/index.ts
rename to apps/www/src/registry/new-york/ui/tags-input/index.ts
diff --git a/apps/www/registry/new-york/ui/textarea/Textarea.vue b/apps/www/src/registry/new-york/ui/textarea/Textarea.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/textarea/Textarea.vue
rename to apps/www/src/registry/new-york/ui/textarea/Textarea.vue
diff --git a/apps/www/registry/new-york/ui/textarea/index.ts b/apps/www/src/registry/new-york/ui/textarea/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/textarea/index.ts
rename to apps/www/src/registry/new-york/ui/textarea/index.ts
diff --git a/apps/www/registry/new-york/ui/toast/Toast.vue b/apps/www/src/registry/new-york/ui/toast/Toast.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/Toast.vue
rename to apps/www/src/registry/new-york/ui/toast/Toast.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastAction.vue b/apps/www/src/registry/new-york/ui/toast/ToastAction.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastAction.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastAction.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/registry/new-york/ui/toast/ToastClose.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastClose.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastClose.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/src/registry/new-york/ui/toast/ToastDescription.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastDescription.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastDescription.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastProvider.vue b/apps/www/src/registry/new-york/ui/toast/ToastProvider.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastProvider.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastProvider.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastTitle.vue b/apps/www/src/registry/new-york/ui/toast/ToastTitle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastTitle.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastTitle.vue
diff --git a/apps/www/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/registry/new-york/ui/toast/ToastViewport.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/ToastViewport.vue
rename to apps/www/src/registry/new-york/ui/toast/ToastViewport.vue
diff --git a/apps/www/registry/new-york/ui/toast/Toaster.vue b/apps/www/src/registry/new-york/ui/toast/Toaster.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/Toaster.vue
rename to apps/www/src/registry/new-york/ui/toast/Toaster.vue
diff --git a/apps/www/registry/new-york/ui/toast/index.ts b/apps/www/src/registry/new-york/ui/toast/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/index.ts
rename to apps/www/src/registry/new-york/ui/toast/index.ts
diff --git a/apps/www/registry/new-york/ui/toast/use-toast.ts b/apps/www/src/registry/new-york/ui/toast/use-toast.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/toast/use-toast.ts
rename to apps/www/src/registry/new-york/ui/toast/use-toast.ts
diff --git a/apps/www/registry/new-york/ui/toggle-group/ToggleGroup.vue b/apps/www/src/registry/new-york/ui/toggle-group/ToggleGroup.vue
similarity index 93%
rename from apps/www/registry/new-york/ui/toggle-group/ToggleGroup.vue
rename to apps/www/src/registry/new-york/ui/toggle-group/ToggleGroup.vue
index 6122e3514..71f20e8a6 100644
--- a/apps/www/registry/new-york/ui/toggle-group/ToggleGroup.vue
+++ b/apps/www/src/registry/new-york/ui/toggle-group/ToggleGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
+import type { toggleVariants } from '@/registry/new-york/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'
diff --git a/apps/www/registry/new-york/ui/toggle-group/ToggleGroupItem.vue b/apps/www/src/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
similarity index 93%
rename from apps/www/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
rename to apps/www/src/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
index 8dc5100c6..7e12a2223 100644
--- a/apps/www/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/www/src/registry/new-york/ui/toggle-group/ToggleGroupItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority'
-import { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
 import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/registry/new-york/ui/toggle'
 import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes, inject } from 'vue'
 
diff --git a/apps/www/registry/new-york/ui/toggle-group/index.ts b/apps/www/src/registry/new-york/ui/toggle-group/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/toggle-group/index.ts
rename to apps/www/src/registry/new-york/ui/toggle-group/index.ts
diff --git a/apps/www/registry/new-york/ui/toggle/Toggle.vue b/apps/www/src/registry/new-york/ui/toggle/Toggle.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/toggle/Toggle.vue
rename to apps/www/src/registry/new-york/ui/toggle/Toggle.vue
diff --git a/apps/www/registry/new-york/ui/toggle/index.ts b/apps/www/src/registry/new-york/ui/toggle/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/toggle/index.ts
rename to apps/www/src/registry/new-york/ui/toggle/index.ts
diff --git a/apps/www/registry/new-york/ui/tooltip/Tooltip.vue b/apps/www/src/registry/new-york/ui/tooltip/Tooltip.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tooltip/Tooltip.vue
rename to apps/www/src/registry/new-york/ui/tooltip/Tooltip.vue
diff --git a/apps/www/registry/new-york/ui/tooltip/TooltipContent.vue b/apps/www/src/registry/new-york/ui/tooltip/TooltipContent.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tooltip/TooltipContent.vue
rename to apps/www/src/registry/new-york/ui/tooltip/TooltipContent.vue
diff --git a/apps/www/registry/new-york/ui/tooltip/TooltipProvider.vue b/apps/www/src/registry/new-york/ui/tooltip/TooltipProvider.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tooltip/TooltipProvider.vue
rename to apps/www/src/registry/new-york/ui/tooltip/TooltipProvider.vue
diff --git a/apps/www/registry/new-york/ui/tooltip/TooltipTrigger.vue b/apps/www/src/registry/new-york/ui/tooltip/TooltipTrigger.vue
similarity index 100%
rename from apps/www/registry/new-york/ui/tooltip/TooltipTrigger.vue
rename to apps/www/src/registry/new-york/ui/tooltip/TooltipTrigger.vue
diff --git a/apps/www/registry/new-york/ui/tooltip/index.ts b/apps/www/src/registry/new-york/ui/tooltip/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/tooltip/index.ts
rename to apps/www/src/registry/new-york/ui/tooltip/index.ts
diff --git a/apps/www/registry/new-york/ui/v-calendar/Calendar.vue b/apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
similarity index 99%
rename from apps/www/registry/new-york/ui/v-calendar/Calendar.vue
rename to apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
index 60d72f465..ee2838ea9 100644
--- a/apps/www/registry/new-york/ui/v-calendar/Calendar.vue
+++ b/apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Calendar } from 'v-calendar'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
 import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import { useVModel } from '@vueuse/core'
 import { DatePicker } from 'v-calendar'
diff --git a/apps/www/registry/new-york/ui/v-calendar/index.ts b/apps/www/src/registry/new-york/ui/v-calendar/index.ts
similarity index 100%
rename from apps/www/registry/new-york/ui/v-calendar/index.ts
rename to apps/www/src/registry/new-york/ui/v-calendar/index.ts
diff --git a/apps/www/registry/registry-base-colors.ts b/apps/www/src/registry/registry-base-colors.ts
similarity index 100%
rename from apps/www/registry/registry-base-colors.ts
rename to apps/www/src/registry/registry-base-colors.ts
diff --git a/apps/www/registry/registry-colors.ts b/apps/www/src/registry/registry-colors.ts
similarity index 100%
rename from apps/www/registry/registry-colors.ts
rename to apps/www/src/registry/registry-colors.ts
diff --git a/apps/www/registry/registry-icons.ts b/apps/www/src/registry/registry-icons.ts
similarity index 100%
rename from apps/www/registry/registry-icons.ts
rename to apps/www/src/registry/registry-icons.ts
diff --git a/apps/www/registry/registry-lib.ts b/apps/www/src/registry/registry-lib.ts
similarity index 81%
rename from apps/www/registry/registry-lib.ts
rename to apps/www/src/registry/registry-lib.ts
index ddc40c9ea..687a6ba71 100644
--- a/apps/www/registry/registry-lib.ts
+++ b/apps/www/src/registry/registry-lib.ts
@@ -1,4 +1,4 @@
-import type { Registry } from '../registry/schema'
+import type { Registry } from './schema'
 
 export const lib: Registry = [
   {
diff --git a/apps/www/registry/registry-styles.ts b/apps/www/src/registry/registry-styles.ts
similarity index 100%
rename from apps/www/registry/registry-styles.ts
rename to apps/www/src/registry/registry-styles.ts
diff --git a/apps/www/registry/registry-themes.ts b/apps/www/src/registry/registry-themes.ts
similarity index 100%
rename from apps/www/registry/registry-themes.ts
rename to apps/www/src/registry/registry-themes.ts
diff --git a/apps/www/registry/schema.ts b/apps/www/src/registry/schema.ts
similarity index 100%
rename from apps/www/registry/schema.ts
rename to apps/www/src/registry/schema.ts
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index caf97c31f..3de802066 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -1,8 +1,8 @@
-import { type Style, styles } from '@/lib/registry/styles'
+import { type Style, styles } from '@/registry/registry-styles'
+import { type Theme, themes } from '@/registry/registry-themes'
 import { useStorage } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
-import { type Theme, themes } from './../lib/registry/themes'
 
 interface Config {
   theme?: Theme['name']
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 2b3dae7d9..363717c6a 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -11,7 +11,7 @@
     "outDir": "dist",
     "sourceMap": true
   },
-  "include": ["src", "src/components.d.ts", "src/**/*.md", ".vitepress/**/*.vue", "scripts/build-registry.ts", ".vitepress/**/*.mts", ".vitepress/**/*.ts", "src/lib/**/*"],
+  "include": ["src", "src/components.d.ts", "src/**/*.md", ".vitepress/**/*.vue", "scripts/build-registry.ts", ".vitepress/**/*.mts", ".vitepress/**/*.ts", "src/registry/**/*"],
   "exclude": ["node_modules"],
   "vueCompilerOptions": {
     "vitePressExtensions": [".md"]
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index ecafa5752..206410cf7 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -16,8 +16,8 @@ export function transformImport(opts: TransformOpts): CodemodPlugin {
             if (typeof path.node.source.value === 'string') {
               const sourcePath = path.node.source.value
 
-              // Replace @/lib/registry/[style] with the components alias.
-              if (sourcePath.startsWith('@/lib/registry/')) {
+              // Replace @/registry/[style] with the components alias.
+              if (sourcePath.startsWith('@/registry/')) {
                 if (config.aliases.ui) {
                   path.node.source.value = sourcePath.replace(/^@\/lib\/registry\/[^/]+\/ui/, config.aliases.ui)
                 }
diff --git a/packages/cli/test/utils/transform-import.test.ts b/packages/cli/test/utils/transform-import.test.ts
index 069d0163d..c62ee65e5 100644
--- a/packages/cli/test/utils/transform-import.test.ts
+++ b/packages/cli/test/utils/transform-import.test.ts
@@ -6,9 +6,9 @@ it('transform import', async () => {
     await transform({
       filename: 'app.ts',
       raw: `import { Foo } from "bar"
-    import { Button } from "@/lib/registry/new-york/ui/button"
+    import { Button } from "@/registry/new-york/ui/button"
     import { Label} from "ui/label"
-    import { Box } from "@/lib/registry/new-york/box"
+    import { Box } from "@/registry/new-york/box"
 
     import { cn } from "@/lib/utils"
     `,
@@ -30,9 +30,9 @@ it('transform import', async () => {
     await transform({
       filename: 'app.ts',
       raw: `import { Foo } from "bar"
-      import { Button } from "@/lib/registry/new-york/ui/button"
+      import { Button } from "@/registry/new-york/ui/button"
       import { Label} from "ui/label"
-      import { Box } from "@/lib/registry/new-york/box"
+      import { Box } from "@/registry/new-york/box"
 
       import { cn, foo } from "@/lib/utils"
       import { bar } from "@/lib/utils/bar"
@@ -51,9 +51,9 @@ it('transform import', async () => {
     await transform({
       filename: 'app.ts',
       raw: `import { Foo } from "bar"
-      import { Button } from "@/lib/registry/new-york/ui/button"
+      import { Button } from "@/registry/new-york/ui/button"
       import { Label} from "ui/label"
-      import { Box } from "@/lib/registry/new-york/box"
+      import { Box } from "@/registry/new-york/box"
 
     import { cn } from "@/lib/utils"
     import { bar } from "@/lib/utils/bar"

From aec80c9342e7af7f962221ee1080021c5c1cbd94 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 21 Nov 2024 15:23:29 +0800
Subject: [PATCH 13/39] refactor: build registry

---
 apps/www/__registry__/.autogenerated          |    1 +
 apps/www/__registry__/index.ts                | 1812 ++++++++--
 apps/www/scripts/build-registry.ts            |  499 ++-
 apps/www/src/public/r/colors/gray.json        |    2 +-
 apps/www/src/public/r/colors/index.json       |    2 +-
 apps/www/src/public/r/colors/neutral.json     |    2 +-
 apps/www/src/public/r/colors/slate.json       |    2 +-
 apps/www/src/public/r/colors/stone.json       |    2 +-
 apps/www/src/public/r/colors/zinc.json        |    2 +-
 apps/www/src/public/r/icons/index.json        |  150 -
 apps/www/src/public/r/index.json              | 2904 +++++------------
 .../r/styles/default/AccordionDemo.json       |    2 +-
 .../public/r/styles/default/AlertDemo.json    |    2 +-
 .../styles/default/AlertDestructiveDemo.json  |    2 +-
 .../r/styles/default/AlertDialogDemo.json     |    2 +-
 .../default/AreaChartCustomTooltip.json       |    2 +-
 .../r/styles/default/AreaChartDemo.json       |    2 +-
 .../r/styles/default/AreaChartSparkline.json  |    2 +-
 .../r/styles/default/AspectRatioDemo.json     |    2 +-
 .../r/styles/default/Authentication01.json    |   18 +-
 .../r/styles/default/Authentication02.json    |   18 +-
 .../r/styles/default/Authentication03.json    |   18 +-
 .../r/styles/default/Authentication04.json    |   17 +-
 .../public/r/styles/default/AutoFormApi.json  |    2 +-
 .../r/styles/default/AutoFormArray.json       |    2 +-
 .../r/styles/default/AutoFormBasic.json       |    2 +-
 .../default/AutoFormConfirmPassword.json      |    2 +-
 .../r/styles/default/AutoFormControlled.json  |    2 +-
 .../styles/default/AutoFormDependencies.json  |    2 +-
 .../default/AutoFormInputWithoutLabel.json    |    2 +-
 .../r/styles/default/AutoFormSubObject.json   |    2 +-
 .../public/r/styles/default/AvatarDemo.json   |    2 +-
 .../public/r/styles/default/BadgeDemo.json    |    2 +-
 .../styles/default/BadgeDestructiveDemo.json  |    2 +-
 .../r/styles/default/BadgeOutlineDemo.json    |    2 +-
 .../r/styles/default/BadgeSecondaryDemo.json  |    2 +-
 .../styles/default/BarChartCustomTooltip.json |    2 +-
 .../public/r/styles/default/BarChartDemo.json |    2 +-
 .../r/styles/default/BarChartRounded.json     |    2 +-
 .../r/styles/default/BarChartStacked.json     |    2 +-
 .../r/styles/default/BreadcrumbDemo.json      |    2 +-
 .../r/styles/default/BreadcrumbDropdown.json  |    2 +-
 .../default/BreadcrumbEllipsisDemo.json       |    2 +-
 .../r/styles/default/BreadcrumbLinkDemo.json  |    2 +-
 .../styles/default/BreadcrumbResponsive.json  |    2 +-
 .../default/BreadcrumbSeparatorDemo.json      |    2 +-
 .../r/styles/default/ButtonAsChildDemo.json   |    2 +-
 .../public/r/styles/default/ButtonDemo.json   |    2 +-
 .../styles/default/ButtonDestructiveDemo.json |    2 +-
 .../r/styles/default/ButtonGhostDemo.json     |    2 +-
 .../r/styles/default/ButtonIconDemo.json      |    2 +-
 .../r/styles/default/ButtonLinkDemo.json      |    2 +-
 .../r/styles/default/ButtonLoadingDemo.json   |    2 +-
 .../r/styles/default/ButtonOutlineDemo.json   |    2 +-
 .../r/styles/default/ButtonSecondaryDemo.json |    2 +-
 .../r/styles/default/ButtonWithIconDemo.json  |    2 +-
 .../public/r/styles/default/CalendarDemo.json |    2 +-
 .../public/r/styles/default/CalendarForm.json |    8 +-
 .../r/styles/default/CalendarWithSelect.json  |    8 +-
 .../src/public/r/styles/default/CardChat.json |    8 +-
 .../src/public/r/styles/default/CardDemo.json |    8 +-
 .../public/r/styles/default/CardFormDemo.json |    2 +-
 .../public/r/styles/default/CardStats.json    |    2 +-
 .../public/r/styles/default/CardWithForm.json |    2 +-
 .../public/r/styles/default/CarouselApi.json  |    2 +-
 .../public/r/styles/default/CarouselDemo.json |    2 +-
 .../r/styles/default/CarouselOrientation.json |    2 +-
 .../r/styles/default/CarouselPlugin.json      |    2 +-
 .../public/r/styles/default/CarouselSize.json |    2 +-
 .../r/styles/default/CarouselSpacing.json     |    2 +-
 .../r/styles/default/CarouselThumbnails.json  |    2 +-
 .../public/r/styles/default/CheckboxDemo.json |    2 +-
 .../r/styles/default/CheckboxDisabled.json    |    2 +-
 .../styles/default/CheckboxFormMultiple.json  |    2 +-
 .../r/styles/default/CheckboxFormSingle.json  |    2 +-
 .../r/styles/default/CheckboxWithText.json    |    2 +-
 .../r/styles/default/CollapsibleDemo.json     |    2 +-
 .../public/r/styles/default/ComboboxDemo.json |    8 +-
 .../styles/default/ComboboxDropdownMenu.json  |    2 +-
 .../public/r/styles/default/ComboboxForm.json |    8 +-
 .../r/styles/default/ComboboxPopover.json     |    8 +-
 .../r/styles/default/ComboboxResponsive.json  |    2 +-
 .../public/r/styles/default/CommandDemo.json  |    2 +-
 .../r/styles/default/CommandDialogDemo.json   |    2 +-
 .../r/styles/default/ContextMenuDemo.json     |    2 +-
 .../r/styles/default/CustomChartTooltip.json  |    2 +-
 .../public/r/styles/default/Dashboard01.json  |   22 +-
 .../public/r/styles/default/Dashboard02.json  |   20 +-
 .../public/r/styles/default/Dashboard03.json  |   22 +-
 .../public/r/styles/default/Dashboard04.json  |   20 +-
 .../public/r/styles/default/Dashboard05.json  |   28 +-
 .../public/r/styles/default/Dashboard06.json  |   24 +-
 .../public/r/styles/default/Dashboard07.json  |   27 +-
 .../default/DataTableColumnPinningDemo.json   |    8 +-
 .../r/styles/default/DataTableDemo.json       |    8 +-
 .../r/styles/default/DataTableDemoColumn.json |    2 +-
 .../styles/default/DataTableReactiveDemo.json |    8 +-
 .../r/styles/default/DatePickerDemo.json      |    8 +-
 .../r/styles/default/DatePickerForm.json      |    8 +-
 .../DatePickerWithIndependentMonths.json      |    8 +-
 .../styles/default/DatePickerWithPresets.json |    8 +-
 .../r/styles/default/DatePickerWithRange.json |    8 +-
 .../default/DialogCustomCloseButton.json      |    2 +-
 .../public/r/styles/default/DialogDemo.json   |    2 +-
 .../public/r/styles/default/DialogForm.json   |    2 +-
 .../styles/default/DialogScrollBodyDemo.json  |    2 +-
 .../default/DialogScrollOverlayDemo.json      |    2 +-
 .../r/styles/default/DonutChartColor.json     |    2 +-
 .../default/DonutChartCustomTooltip.json      |    2 +-
 .../r/styles/default/DonutChartDemo.json      |    2 +-
 .../r/styles/default/DonutChartPie.json       |    2 +-
 .../public/r/styles/default/DrawerDemo.json   |    2 +-
 .../public/r/styles/default/DrawerDialog.json |    2 +-
 .../default/DropdownMenuCheckboxes.json       |    2 +-
 .../r/styles/default/DropdownMenuDemo.json    |    2 +-
 .../default/DropdownMenuRadioGroup.json       |    2 +-
 .../r/styles/default/HoverCardDemo.json       |    2 +-
 .../public/r/styles/default/InputDemo.json    |    2 +-
 .../r/styles/default/InputDisabled.json       |    2 +-
 .../public/r/styles/default/InputFile.json    |    2 +-
 .../public/r/styles/default/InputForm.json    |    2 +-
 .../styles/default/InputFormAutoAnimate.json  |    2 +-
 .../r/styles/default/InputWithButton.json     |    2 +-
 .../r/styles/default/InputWithIcon.json       |    2 +-
 .../r/styles/default/InputWithLabel.json      |    2 +-
 .../public/r/styles/default/LabelDemo.json    |    2 +-
 .../default/LineChartCustomTooltip.json       |    2 +-
 .../r/styles/default/LineChartDemo.json       |    2 +-
 .../r/styles/default/LineChartSparkline.json  |    2 +-
 .../public/r/styles/default/MenubarDemo.json  |    2 +-
 .../r/styles/default/NavigationMenuDemo.json  |    2 +-
 .../r/styles/default/NumberFieldCurrency.json |    2 +-
 .../r/styles/default/NumberFieldDecimal.json  |    2 +-
 .../r/styles/default/NumberFieldDemo.json     |    2 +-
 .../r/styles/default/NumberFieldDisabled.json |    2 +-
 .../r/styles/default/NumberFieldForm.json     |    2 +-
 .../styles/default/NumberFieldPercentage.json |    2 +-
 .../r/styles/default/PaginationDemo.json      |    2 +-
 .../r/styles/default/PinInputControlled.json  |    2 +-
 .../public/r/styles/default/PinInputDemo.json |    2 +-
 .../r/styles/default/PinInputDisabled.json    |    2 +-
 .../r/styles/default/PinInputFormDemo.json    |    2 +-
 .../styles/default/PinInputSeparatorDemo.json |    2 +-
 .../public/r/styles/default/PopoverDemo.json  |    2 +-
 .../public/r/styles/default/ProgressDemo.json |    2 +-
 .../r/styles/default/RadioGroupDemo.json      |    2 +-
 .../r/styles/default/RadioGroupForm.json      |    2 +-
 .../r/styles/default/RangeCalendarDemo.json   |    2 +-
 .../r/styles/default/ResizableDemo.json       |    2 +-
 .../r/styles/default/ResizableHandleDemo.json |    2 +-
 .../styles/default/ResizableVerticalDemo.json |    2 +-
 .../r/styles/default/ScrollAreaDemo.json      |    2 +-
 .../default/ScrollAreaHorizontalDemo.json     |    2 +-
 .../public/r/styles/default/SelectDemo.json   |    2 +-
 .../public/r/styles/default/SelectForm.json   |    2 +-
 .../r/styles/default/SelectScrollable.json    |    2 +-
 .../r/styles/default/SeparatorDemo.json       |    2 +-
 .../public/r/styles/default/SheetDemo.json    |    2 +-
 .../r/styles/default/SheetSideDemo.json       |    2 +-
 .../public/r/styles/default/Sidebar01.json    |   20 +
 .../public/r/styles/default/Sidebar07.json    |   21 +
 .../public/r/styles/default/SkeletonCard.json |    2 +-
 .../public/r/styles/default/SkeletonDemo.json |    2 +-
 .../public/r/styles/default/SliderDemo.json   |    8 +-
 .../public/r/styles/default/SliderForm.json   |    2 +-
 .../public/r/styles/default/SonnerDemo.json   |    4 +-
 .../r/styles/default/SonnerWithDialog.json    |    2 +-
 .../public/r/styles/default/StepperDemo.json  |    2 +-
 .../public/r/styles/default/StepperForm.json  |    2 +-
 .../r/styles/default/StepperHorizental.json   |    2 +-
 .../r/styles/default/StepperVertical.json     |    2 +-
 .../public/r/styles/default/SwitchDemo.json   |    2 +-
 .../public/r/styles/default/SwitchForm.json   |    2 +-
 .../public/r/styles/default/TableDemo.json    |    2 +-
 .../src/public/r/styles/default/TabsDemo.json |    2 +-
 .../r/styles/default/TabsVerticalDemo.json    |    2 +-
 .../styles/default/TagsInputComboboxDemo.json |    2 +-
 .../r/styles/default/TagsInputDemo.json       |    2 +-
 .../r/styles/default/TagsInputFormDemo.json   |    2 +-
 .../public/r/styles/default/TextareaDemo.json |    2 +-
 .../r/styles/default/TextareaDisabled.json    |    2 +-
 .../public/r/styles/default/TextareaForm.json |    2 +-
 .../r/styles/default/TextareaWithButton.json  |    2 +-
 .../r/styles/default/TextareaWithLabel.json   |    2 +-
 .../r/styles/default/TextareaWithText.json    |    2 +-
 .../public/r/styles/default/ToastDemo.json    |    2 +-
 .../r/styles/default/ToastDestructive.json    |    2 +-
 .../public/r/styles/default/ToastSimple.json  |    2 +-
 .../r/styles/default/ToastWithAction.json     |    2 +-
 .../r/styles/default/ToastWithTitle.json      |    2 +-
 .../public/r/styles/default/ToggleDemo.json   |    2 +-
 .../r/styles/default/ToggleDisabledDemo.json  |    2 +-
 .../r/styles/default/ToggleGroupDemo.json     |    2 +-
 .../default/ToggleGroupDisabledDemo.json      |    2 +-
 .../styles/default/ToggleGroupLargeDemo.json  |    2 +-
 .../default/ToggleGroupOutlineDemo.json       |    2 +-
 .../styles/default/ToggleGroupSingleDemo.json |    2 +-
 .../styles/default/ToggleGroupSmallDemo.json  |    2 +-
 .../r/styles/default/ToggleItalicDemo.json    |    2 +-
 .../default/ToggleItalicWithTextDemo.json     |    2 +-
 .../r/styles/default/ToggleLargeDemo.json     |    2 +-
 .../r/styles/default/ToggleSmallDemo.json     |    2 +-
 .../public/r/styles/default/TooltipDemo.json  |    2 +-
 .../styles/default/TypographyBlockquote.json  |    2 +-
 .../r/styles/default/TypographyDemo.json      |    2 +-
 .../public/r/styles/default/TypographyH1.json |    2 +-
 .../public/r/styles/default/TypographyH2.json |    2 +-
 .../public/r/styles/default/TypographyH3.json |    2 +-
 .../public/r/styles/default/TypographyH4.json |    2 +-
 .../styles/default/TypographyInlineCode.json  |    2 +-
 .../r/styles/default/TypographyLarge.json     |    2 +-
 .../r/styles/default/TypographyLead.json      |    2 +-
 .../r/styles/default/TypographyList.json      |    2 +-
 .../r/styles/default/TypographyMuted.json     |    2 +-
 .../public/r/styles/default/TypographyP.json  |    2 +-
 .../r/styles/default/TypographySmall.json     |    2 +-
 .../r/styles/default/TypographyTable.json     |    2 +-
 .../r/styles/default/VCalendarDemo.json       |    2 +-
 .../r/styles/default/VDatePickerDemo.json     |    8 +-
 .../r/styles/default/VDatePickerForm.json     |    8 +-
 .../default/VDatePickerWithPresets.json       |    8 +-
 .../styles/default/VDatePickerWithRange.json  |    8 +-
 .../r/styles/default/VDateTimePickerDemo.json |    8 +-
 .../styles/default/VRangePickerWithSlot.json  |    8 +-
 .../public/r/styles/default/accordion.json    |    2 +-
 .../public/r/styles/default/alert-dialog.json |   10 +-
 .../src/public/r/styles/default/alert.json    |    2 +-
 .../public/r/styles/default/aspect-ratio.json |    2 +-
 .../public/r/styles/default/auto-form.json    |    6 +-
 .../src/public/r/styles/default/avatar.json   |    2 +-
 .../src/public/r/styles/default/badge.json    |    2 +-
 .../public/r/styles/default/breadcrumb.json   |    2 +-
 .../src/public/r/styles/default/button.json   |    2 +-
 .../src/public/r/styles/default/calendar.json |    8 +-
 .../www/src/public/r/styles/default/card.json |    2 +-
 .../src/public/r/styles/default/carousel.json |    6 +-
 .../public/r/styles/default/chart-area.json   |    8 +-
 .../public/r/styles/default/chart-bar.json    |    8 +-
 .../public/r/styles/default/chart-donut.json  |    8 +-
 .../public/r/styles/default/chart-line.json   |    8 +-
 .../src/public/r/styles/default/chart.json    |    2 +-
 .../src/public/r/styles/default/checkbox.json |    2 +-
 .../public/r/styles/default/collapsible.json  |    2 +-
 .../src/public/r/styles/default/command.json  |    2 +-
 .../public/r/styles/default/context-menu.json |    2 +-
 .../src/public/r/styles/default/dialog.json   |    2 +-
 .../src/public/r/styles/default/drawer.json   |    2 +-
 .../r/styles/default/dropdown-menu.json       |    2 +-
 .../www/src/public/r/styles/default/form.json |    4 +-
 .../public/r/styles/default/hover-card.json   |    2 +-
 .../src/public/r/styles/default/index.json    |    2 +-
 .../src/public/r/styles/default/input.json    |    2 +-
 .../src/public/r/styles/default/label.json    |    2 +-
 .../src/public/r/styles/default/menubar.json  |    2 +-
 .../r/styles/default/navigation-menu.json     |    2 +-
 .../public/r/styles/default/number-field.json |    2 +-
 .../public/r/styles/default/pagination.json   |   10 +-
 .../public/r/styles/default/pin-input.json    |    2 +-
 .../src/public/r/styles/default/popover.json  |    2 +-
 .../src/public/r/styles/default/progress.json |    2 +-
 .../public/r/styles/default/radio-group.json  |    2 +-
 .../r/styles/default/range-calendar.json      |    8 +-
 .../public/r/styles/default/resizable.json    |    2 +-
 .../public/r/styles/default/scroll-area.json  |    2 +-
 .../src/public/r/styles/default/select.json   |    2 +-
 .../public/r/styles/default/separator.json    |    2 +-
 .../src/public/r/styles/default/sheet.json    |    2 +-
 .../src/public/r/styles/default/sidebar.json  |   14 +-
 .../src/public/r/styles/default/skeleton.json |    2 +-
 .../src/public/r/styles/default/slider.json   |    2 +-
 .../src/public/r/styles/default/sonner.json   |    2 +-
 .../src/public/r/styles/default/stepper.json  |    2 +-
 .../src/public/r/styles/default/switch.json   |    2 +-
 .../src/public/r/styles/default/table.json    |    2 +-
 .../www/src/public/r/styles/default/tabs.json |    2 +-
 .../public/r/styles/default/tags-input.json   |    2 +-
 .../src/public/r/styles/default/textarea.json |    2 +-
 .../r/styles/default/theme-daylight.json      |    2 +-
 .../r/styles/default/theme-emerald.json       |    2 +-
 .../r/styles/default/theme-midnight.json      |    2 +-
 .../src/public/r/styles/default/toast.json    |    2 +-
 .../public/r/styles/default/toggle-group.json |    4 +-
 .../src/public/r/styles/default/toggle.json   |    2 +-
 .../src/public/r/styles/default/tooltip.json  |    2 +-
 .../src/public/r/styles/default/utils.json    |    2 +-
 .../public/r/styles/default/v-calendar.json   |    8 +-
 .../r/styles/new-york/AccordionDemo.json      |    2 +-
 .../public/r/styles/new-york/AlertDemo.json   |    2 +-
 .../styles/new-york/AlertDestructiveDemo.json |    2 +-
 .../r/styles/new-york/AlertDialogDemo.json    |    2 +-
 .../new-york/AreaChartCustomTooltip.json      |    2 +-
 .../r/styles/new-york/AreaChartDemo.json      |    2 +-
 .../r/styles/new-york/AreaChartSparkline.json |    2 +-
 .../r/styles/new-york/AspectRatioDemo.json    |    2 +-
 .../r/styles/new-york/Authentication01.json   |   18 +-
 .../r/styles/new-york/Authentication02.json   |   18 +-
 .../r/styles/new-york/Authentication03.json   |   18 +-
 .../r/styles/new-york/Authentication04.json   |   17 +-
 .../public/r/styles/new-york/AutoFormApi.json |    2 +-
 .../r/styles/new-york/AutoFormArray.json      |    2 +-
 .../r/styles/new-york/AutoFormBasic.json      |    2 +-
 .../new-york/AutoFormConfirmPassword.json     |    2 +-
 .../r/styles/new-york/AutoFormControlled.json |    2 +-
 .../styles/new-york/AutoFormDependencies.json |    2 +-
 .../new-york/AutoFormInputWithoutLabel.json   |    2 +-
 .../r/styles/new-york/AutoFormSubObject.json  |    2 +-
 .../public/r/styles/new-york/AvatarDemo.json  |    2 +-
 .../public/r/styles/new-york/BadgeDemo.json   |    2 +-
 .../styles/new-york/BadgeDestructiveDemo.json |    2 +-
 .../r/styles/new-york/BadgeOutlineDemo.json   |    2 +-
 .../r/styles/new-york/BadgeSecondaryDemo.json |    2 +-
 .../new-york/BarChartCustomTooltip.json       |    2 +-
 .../r/styles/new-york/BarChartDemo.json       |    2 +-
 .../r/styles/new-york/BarChartRounded.json    |    2 +-
 .../r/styles/new-york/BarChartStacked.json    |    2 +-
 .../r/styles/new-york/BreadcrumbDemo.json     |    2 +-
 .../r/styles/new-york/BreadcrumbDropdown.json |    2 +-
 .../new-york/BreadcrumbEllipsisDemo.json      |    2 +-
 .../r/styles/new-york/BreadcrumbLinkDemo.json |    2 +-
 .../styles/new-york/BreadcrumbResponsive.json |    2 +-
 .../new-york/BreadcrumbSeparatorDemo.json     |    2 +-
 .../r/styles/new-york/ButtonAsChildDemo.json  |    2 +-
 .../public/r/styles/new-york/ButtonDemo.json  |    2 +-
 .../new-york/ButtonDestructiveDemo.json       |    2 +-
 .../r/styles/new-york/ButtonGhostDemo.json    |    2 +-
 .../r/styles/new-york/ButtonIconDemo.json     |    2 +-
 .../r/styles/new-york/ButtonLinkDemo.json     |    2 +-
 .../r/styles/new-york/ButtonLoadingDemo.json  |    2 +-
 .../r/styles/new-york/ButtonOutlineDemo.json  |    2 +-
 .../styles/new-york/ButtonSecondaryDemo.json  |    2 +-
 .../r/styles/new-york/ButtonWithIconDemo.json |    2 +-
 .../r/styles/new-york/CalendarDemo.json       |    2 +-
 .../r/styles/new-york/CalendarForm.json       |    8 +-
 .../r/styles/new-york/CalendarWithSelect.json |    8 +-
 .../public/r/styles/new-york/CardChat.json    |    8 +-
 .../public/r/styles/new-york/CardDemo.json    |    8 +-
 .../r/styles/new-york/CardFormDemo.json       |    2 +-
 .../public/r/styles/new-york/CardStats.json   |    2 +-
 .../r/styles/new-york/CardWithForm.json       |    2 +-
 .../public/r/styles/new-york/CarouselApi.json |    2 +-
 .../r/styles/new-york/CarouselDemo.json       |    2 +-
 .../styles/new-york/CarouselOrientation.json  |    2 +-
 .../r/styles/new-york/CarouselPlugin.json     |    2 +-
 .../r/styles/new-york/CarouselSize.json       |    2 +-
 .../r/styles/new-york/CarouselSpacing.json    |    2 +-
 .../r/styles/new-york/CarouselThumbnails.json |    2 +-
 .../r/styles/new-york/CheckboxDemo.json       |    2 +-
 .../r/styles/new-york/CheckboxDisabled.json   |    2 +-
 .../styles/new-york/CheckboxFormMultiple.json |    2 +-
 .../r/styles/new-york/CheckboxFormSingle.json |    2 +-
 .../r/styles/new-york/CheckboxWithText.json   |    2 +-
 .../r/styles/new-york/CollapsibleDemo.json    |    2 +-
 .../r/styles/new-york/ComboboxDemo.json       |    8 +-
 .../styles/new-york/ComboboxDropdownMenu.json |    2 +-
 .../r/styles/new-york/ComboboxForm.json       |    8 +-
 .../r/styles/new-york/ComboboxPopover.json    |    6 +-
 .../r/styles/new-york/ComboboxResponsive.json |    2 +-
 .../public/r/styles/new-york/CommandDemo.json |    2 +-
 .../r/styles/new-york/CommandDialogDemo.json  |    2 +-
 .../r/styles/new-york/ContextMenuDemo.json    |    2 +-
 .../r/styles/new-york/CustomChartTooltip.json |    2 +-
 .../public/r/styles/new-york/Dashboard01.json |   22 +-
 .../public/r/styles/new-york/Dashboard02.json |   20 +-
 .../public/r/styles/new-york/Dashboard03.json |   22 +-
 .../public/r/styles/new-york/Dashboard04.json |   20 +-
 .../public/r/styles/new-york/Dashboard05.json |   28 +-
 .../public/r/styles/new-york/Dashboard06.json |   24 +-
 .../public/r/styles/new-york/Dashboard07.json |   27 +-
 .../new-york/DataTableColumnPinningDemo.json  |    8 +-
 .../r/styles/new-york/DataTableDemo.json      |    8 +-
 .../styles/new-york/DataTableDemoColumn.json  |    2 +-
 .../new-york/DataTableReactiveDemo.json       |    8 +-
 .../r/styles/new-york/DatePickerDemo.json     |    8 +-
 .../r/styles/new-york/DatePickerForm.json     |    8 +-
 .../DatePickerWithIndependentMonths.json      |    8 +-
 .../new-york/DatePickerWithPresets.json       |    8 +-
 .../styles/new-york/DatePickerWithRange.json  |    8 +-
 .../new-york/DialogCustomCloseButton.json     |    2 +-
 .../public/r/styles/new-york/DialogDemo.json  |    2 +-
 .../public/r/styles/new-york/DialogForm.json  |    2 +-
 .../styles/new-york/DialogScrollBodyDemo.json |    2 +-
 .../new-york/DialogScrollOverlayDemo.json     |    2 +-
 .../r/styles/new-york/DonutChartColor.json    |    2 +-
 .../new-york/DonutChartCustomTooltip.json     |    2 +-
 .../r/styles/new-york/DonutChartDemo.json     |    4 +-
 .../r/styles/new-york/DonutChartPie.json      |    2 +-
 .../public/r/styles/new-york/DrawerDemo.json  |    2 +-
 .../r/styles/new-york/DrawerDialog.json       |    2 +-
 .../new-york/DropdownMenuCheckboxes.json      |    2 +-
 .../r/styles/new-york/DropdownMenuDemo.json   |    2 +-
 .../new-york/DropdownMenuRadioGroup.json      |    2 +-
 .../r/styles/new-york/HoverCardDemo.json      |    2 +-
 .../public/r/styles/new-york/InputDemo.json   |    2 +-
 .../r/styles/new-york/InputDisabled.json      |    2 +-
 .../public/r/styles/new-york/InputFile.json   |    2 +-
 .../public/r/styles/new-york/InputForm.json   |    2 +-
 .../styles/new-york/InputFormAutoAnimate.json |    2 +-
 .../r/styles/new-york/InputWithButton.json    |    2 +-
 .../r/styles/new-york/InputWithIcon.json      |    2 +-
 .../r/styles/new-york/InputWithLabel.json     |    2 +-
 .../public/r/styles/new-york/LabelDemo.json   |    2 +-
 .../new-york/LineChartCustomTooltip.json      |    2 +-
 .../r/styles/new-york/LineChartDemo.json      |    2 +-
 .../r/styles/new-york/LineChartSparkline.json |    2 +-
 .../public/r/styles/new-york/MenubarDemo.json |    2 +-
 .../r/styles/new-york/NavigationMenuDemo.json |    2 +-
 .../styles/new-york/NumberFieldCurrency.json  |    2 +-
 .../r/styles/new-york/NumberFieldDecimal.json |    2 +-
 .../r/styles/new-york/NumberFieldDemo.json    |    2 +-
 .../styles/new-york/NumberFieldDisabled.json  |    2 +-
 .../r/styles/new-york/NumberFieldForm.json    |    2 +-
 .../new-york/NumberFieldPercentage.json       |    2 +-
 .../r/styles/new-york/PaginationDemo.json     |    2 +-
 .../r/styles/new-york/PinInputControlled.json |    2 +-
 .../r/styles/new-york/PinInputDemo.json       |    2 +-
 .../r/styles/new-york/PinInputDisabled.json   |    2 +-
 .../r/styles/new-york/PinInputFormDemo.json   |    2 +-
 .../new-york/PinInputSeparatorDemo.json       |    2 +-
 .../public/r/styles/new-york/PopoverDemo.json |    2 +-
 .../r/styles/new-york/ProgressDemo.json       |    2 +-
 .../r/styles/new-york/RadioGroupDemo.json     |    2 +-
 .../r/styles/new-york/RadioGroupForm.json     |    2 +-
 .../r/styles/new-york/RangeCalendarDemo.json  |    2 +-
 .../r/styles/new-york/ResizableDemo.json      |    2 +-
 .../styles/new-york/ResizableHandleDemo.json  |    2 +-
 .../new-york/ResizableVerticalDemo.json       |    2 +-
 .../r/styles/new-york/ScrollAreaDemo.json     |    2 +-
 .../new-york/ScrollAreaHorizontalDemo.json    |    2 +-
 .../public/r/styles/new-york/SelectDemo.json  |    2 +-
 .../public/r/styles/new-york/SelectForm.json  |    2 +-
 .../r/styles/new-york/SelectScrollable.json   |    2 +-
 .../r/styles/new-york/SeparatorDemo.json      |    2 +-
 .../public/r/styles/new-york/SheetDemo.json   |    2 +-
 .../r/styles/new-york/SheetSideDemo.json      |    2 +-
 .../public/r/styles/new-york/Sidebar01.json   |   20 +
 .../public/r/styles/new-york/Sidebar07.json   |   21 +
 .../r/styles/new-york/SkeletonCard.json       |    2 +-
 .../r/styles/new-york/SkeletonDemo.json       |    2 +-
 .../public/r/styles/new-york/SliderDemo.json  |    8 +-
 .../public/r/styles/new-york/SliderForm.json  |    2 +-
 .../public/r/styles/new-york/SonnerDemo.json  |    2 +-
 .../r/styles/new-york/SonnerWithDialog.json   |    2 +-
 .../public/r/styles/new-york/StepperDemo.json |    2 +-
 .../public/r/styles/new-york/StepperForm.json |    2 +-
 .../r/styles/new-york/StepperHorizental.json  |    2 +-
 .../r/styles/new-york/StepperVertical.json    |    2 +-
 .../public/r/styles/new-york/SwitchDemo.json  |    2 +-
 .../public/r/styles/new-york/SwitchForm.json  |    2 +-
 .../public/r/styles/new-york/TableDemo.json   |    2 +-
 .../public/r/styles/new-york/TabsDemo.json    |    2 +-
 .../r/styles/new-york/TabsVerticalDemo.json   |    2 +-
 .../new-york/TagsInputComboboxDemo.json       |    2 +-
 .../r/styles/new-york/TagsInputDemo.json      |    2 +-
 .../r/styles/new-york/TagsInputFormDemo.json  |    2 +-
 .../r/styles/new-york/TextareaDemo.json       |    2 +-
 .../r/styles/new-york/TextareaDisabled.json   |    2 +-
 .../r/styles/new-york/TextareaForm.json       |    2 +-
 .../r/styles/new-york/TextareaWithButton.json |    2 +-
 .../r/styles/new-york/TextareaWithLabel.json  |    2 +-
 .../r/styles/new-york/TextareaWithText.json   |    2 +-
 .../public/r/styles/new-york/ToastDemo.json   |    2 +-
 .../r/styles/new-york/ToastDestructive.json   |    2 +-
 .../public/r/styles/new-york/ToastSimple.json |    2 +-
 .../r/styles/new-york/ToastWithAction.json    |    2 +-
 .../r/styles/new-york/ToastWithTitle.json     |    2 +-
 .../public/r/styles/new-york/ToggleDemo.json  |    2 +-
 .../r/styles/new-york/ToggleDisabledDemo.json |    2 +-
 .../r/styles/new-york/ToggleGroupDemo.json    |    2 +-
 .../new-york/ToggleGroupDisabledDemo.json     |    2 +-
 .../styles/new-york/ToggleGroupLargeDemo.json |    2 +-
 .../new-york/ToggleGroupOutlineDemo.json      |    2 +-
 .../new-york/ToggleGroupSingleDemo.json       |    2 +-
 .../styles/new-york/ToggleGroupSmallDemo.json |    2 +-
 .../r/styles/new-york/ToggleItalicDemo.json   |    2 +-
 .../new-york/ToggleItalicWithTextDemo.json    |    2 +-
 .../r/styles/new-york/ToggleLargeDemo.json    |    2 +-
 .../r/styles/new-york/ToggleSmallDemo.json    |    2 +-
 .../public/r/styles/new-york/TooltipDemo.json |    2 +-
 .../styles/new-york/TypographyBlockquote.json |    2 +-
 .../r/styles/new-york/TypographyDemo.json     |    2 +-
 .../r/styles/new-york/TypographyH1.json       |    2 +-
 .../r/styles/new-york/TypographyH2.json       |    2 +-
 .../r/styles/new-york/TypographyH3.json       |    2 +-
 .../r/styles/new-york/TypographyH4.json       |    2 +-
 .../styles/new-york/TypographyInlineCode.json |    2 +-
 .../r/styles/new-york/TypographyLarge.json    |    2 +-
 .../r/styles/new-york/TypographyLead.json     |    2 +-
 .../r/styles/new-york/TypographyList.json     |    2 +-
 .../r/styles/new-york/TypographyMuted.json    |    2 +-
 .../public/r/styles/new-york/TypographyP.json |    2 +-
 .../r/styles/new-york/TypographySmall.json    |    2 +-
 .../r/styles/new-york/TypographyTable.json    |    2 +-
 .../r/styles/new-york/VCalendarDemo.json      |    2 +-
 .../r/styles/new-york/VDatePickerDemo.json    |    8 +-
 .../r/styles/new-york/VDatePickerForm.json    |    8 +-
 .../new-york/VDatePickerWithPresets.json      |    8 +-
 .../styles/new-york/VDatePickerWithRange.json |    8 +-
 .../styles/new-york/VDateTimePickerDemo.json  |    8 +-
 .../styles/new-york/VRangePickerWithSlot.json |    8 +-
 .../public/r/styles/new-york/accordion.json   |    2 +-
 .../r/styles/new-york/alert-dialog.json       |   10 +-
 .../src/public/r/styles/new-york/alert.json   |    2 +-
 .../r/styles/new-york/aspect-ratio.json       |    2 +-
 .../public/r/styles/new-york/auto-form.json   |    6 +-
 .../src/public/r/styles/new-york/avatar.json  |    2 +-
 .../src/public/r/styles/new-york/badge.json   |    2 +-
 .../public/r/styles/new-york/breadcrumb.json  |    2 +-
 .../src/public/r/styles/new-york/button.json  |    2 +-
 .../public/r/styles/new-york/calendar.json    |    8 +-
 .../src/public/r/styles/new-york/card.json    |    2 +-
 .../public/r/styles/new-york/carousel.json    |    6 +-
 .../public/r/styles/new-york/chart-area.json  |    8 +-
 .../public/r/styles/new-york/chart-bar.json   |    8 +-
 .../public/r/styles/new-york/chart-donut.json |    8 +-
 .../public/r/styles/new-york/chart-line.json  |    8 +-
 .../src/public/r/styles/new-york/chart.json   |    2 +-
 .../public/r/styles/new-york/checkbox.json    |    2 +-
 .../public/r/styles/new-york/collapsible.json |    2 +-
 .../src/public/r/styles/new-york/command.json |    2 +-
 .../r/styles/new-york/context-menu.json       |    2 +-
 .../src/public/r/styles/new-york/dialog.json  |    2 +-
 .../src/public/r/styles/new-york/drawer.json  |    2 +-
 .../r/styles/new-york/dropdown-menu.json      |    2 +-
 .../src/public/r/styles/new-york/form.json    |    4 +-
 .../public/r/styles/new-york/hover-card.json  |    2 +-
 .../src/public/r/styles/new-york/index.json   |    2 +-
 .../src/public/r/styles/new-york/input.json   |    2 +-
 .../src/public/r/styles/new-york/label.json   |    2 +-
 .../src/public/r/styles/new-york/menubar.json |    2 +-
 .../r/styles/new-york/navigation-menu.json    |    2 +-
 .../r/styles/new-york/number-field.json       |    2 +-
 .../public/r/styles/new-york/pagination.json  |   10 +-
 .../public/r/styles/new-york/pin-input.json   |    2 +-
 .../src/public/r/styles/new-york/popover.json |    2 +-
 .../public/r/styles/new-york/progress.json    |    2 +-
 .../public/r/styles/new-york/radio-group.json |    2 +-
 .../r/styles/new-york/range-calendar.json     |    8 +-
 .../public/r/styles/new-york/resizable.json   |    2 +-
 .../public/r/styles/new-york/scroll-area.json |    2 +-
 .../src/public/r/styles/new-york/select.json  |    2 +-
 .../public/r/styles/new-york/separator.json   |    2 +-
 .../src/public/r/styles/new-york/sheet.json   |    2 +-
 .../src/public/r/styles/new-york/sidebar.json |   14 +-
 .../public/r/styles/new-york/skeleton.json    |    2 +-
 .../src/public/r/styles/new-york/slider.json  |    2 +-
 .../src/public/r/styles/new-york/sonner.json  |    2 +-
 .../src/public/r/styles/new-york/stepper.json |    2 +-
 .../src/public/r/styles/new-york/switch.json  |    2 +-
 .../src/public/r/styles/new-york/table.json   |    2 +-
 .../src/public/r/styles/new-york/tabs.json    |    2 +-
 .../public/r/styles/new-york/tags-input.json  |    2 +-
 .../public/r/styles/new-york/textarea.json    |    2 +-
 .../r/styles/new-york/theme-daylight.json     |    2 +-
 .../r/styles/new-york/theme-emerald.json      |    2 +-
 .../r/styles/new-york/theme-midnight.json     |    2 +-
 .../src/public/r/styles/new-york/toast.json   |    2 +-
 .../r/styles/new-york/toggle-group.json       |    4 +-
 .../src/public/r/styles/new-york/toggle.json  |    2 +-
 .../src/public/r/styles/new-york/tooltip.json |    2 +-
 .../src/public/r/styles/new-york/utils.json   |    2 +-
 .../public/r/styles/new-york/v-calendar.json  |   14 +-
 apps/www/src/public/r/temp.json               |  496 +--
 apps/www/src/registry/crawl-content.ts        |   28 +-
 .../{Sidebar01.vue => Sidebar01/page.vue}     |    0
 .../{Sidebar07.vue => Sidebar07/page.vue}     |    0
 .../{Sidebar01.vue => Sidebar01/page.vue}     |    0
 .../{Sidebar07.vue => Sidebar07/page.vue}     |    0
 567 files changed, 4018 insertions(+), 3918 deletions(-)
 create mode 100644 apps/www/__registry__/.autogenerated
 delete mode 100644 apps/www/src/public/r/icons/index.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar01.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar07.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar01.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar07.json
 rename apps/www/src/registry/default/block/{Sidebar01.vue => Sidebar01/page.vue} (100%)
 rename apps/www/src/registry/default/block/{Sidebar07.vue => Sidebar07/page.vue} (100%)
 rename apps/www/src/registry/new-york/block/{Sidebar01.vue => Sidebar01/page.vue} (100%)
 rename apps/www/src/registry/new-york/block/{Sidebar07.vue => Sidebar07/page.vue} (100%)

diff --git a/apps/www/__registry__/.autogenerated b/apps/www/__registry__/.autogenerated
new file mode 100644
index 000000000..0055c2a3e
--- /dev/null
+++ b/apps/www/__registry__/.autogenerated
@@ -0,0 +1 @@
+// The content of this directory is autogenerated by the registry server.
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 1b9234724..6c74205f5 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -81,7 +81,7 @@ export const Index: Record<string, any> = {
       name: "alert-dialog",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
@@ -151,7 +151,7 @@ export const Index: Record<string, any> = {
       name: "auto-form",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","utils","calendar","popover","label","radio-group","select","input","textarea"],
       files: [{
         path: "registry/new-york/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
@@ -514,7 +514,7 @@ export const Index: Record<string, any> = {
       name: "chart-area",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
@@ -533,7 +533,7 @@ export const Index: Record<string, any> = {
       name: "chart-bar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
@@ -552,7 +552,7 @@ export const Index: Record<string, any> = {
       name: "chart-donut",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
@@ -571,7 +571,7 @@ export const Index: Record<string, any> = {
       name: "chart-line",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-line/LineChart.vue",
         type: "registry:ui",
@@ -1561,7 +1561,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -2055,7 +2055,7 @@ export const Index: Record<string, any> = {
       name: "v-calendar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/new-york/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
@@ -2704,7 +2704,7 @@ export const Index: Record<string, any> = {
       name: "CalendarForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
@@ -2719,7 +2719,7 @@ export const Index: Record<string, any> = {
       name: "CalendarWithSelect",
       description: "",
       type: "registry:example",
-      registryDependencies: ["calendar","select","utils"],
+      registryDependencies: ["utils","calendar","select"],
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
@@ -2734,7 +2734,7 @@ export const Index: Record<string, any> = {
       name: "CardChat",
       description: "",
       type: "registry:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["utils","avatar","button","card","command","dialog","input","tooltip"],
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
@@ -2749,7 +2749,7 @@ export const Index: Record<string, any> = {
       name: "CardDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","card","switch","utils"],
+      registryDependencies: ["utils","button","card","switch"],
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
@@ -3004,7 +3004,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -3034,7 +3034,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
@@ -3139,7 +3139,7 @@ export const Index: Record<string, any> = {
       name: "DataTableColumnPinningDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
@@ -3154,7 +3154,7 @@ export const Index: Record<string, any> = {
       name: "DataTableDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
@@ -3184,7 +3184,7 @@ export const Index: Record<string, any> = {
       name: "DataTableReactiveDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
@@ -3199,7 +3199,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["utils","button","calendar","popover"],
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
@@ -3214,7 +3214,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
@@ -3229,7 +3229,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithIndependentMonths",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
@@ -3244,7 +3244,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["utils","button","calendar","popover","select"],
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
@@ -3259,7 +3259,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
@@ -4159,7 +4159,7 @@ export const Index: Record<string, any> = {
       name: "SliderDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
@@ -4984,7 +4984,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
@@ -4999,7 +4999,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
@@ -5014,7 +5014,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","select","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
@@ -5029,7 +5029,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
@@ -5044,7 +5044,7 @@ export const Index: Record<string, any> = {
       name: "VDateTimePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
@@ -5059,7 +5059,7 @@ export const Index: Record<string, any> = {
       name: "VRangePickerWithSlot",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
@@ -5070,6 +5070,322 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "Authentication01.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "Authentication02.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "Authentication03.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "Authentication04.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "Dashboard01.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "Dashboard02.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "Dashboard03.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "Dashboard04.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard05").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "Dashboard05.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard06").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "Dashboard06.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard07").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "Dashboard07.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "Sidebar01Page.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "Sidebar07Page.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -5132,7 +5448,7 @@ export const Index: Record<string, any> = {
       name: "alert-dialog",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
@@ -5202,7 +5518,7 @@ export const Index: Record<string, any> = {
       name: "auto-form",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","utils","calendar","popover","label","radio-group","select","input","textarea"],
       files: [{
         path: "registry/new-york/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
@@ -5565,7 +5881,7 @@ export const Index: Record<string, any> = {
       name: "chart-area",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
@@ -5584,7 +5900,7 @@ export const Index: Record<string, any> = {
       name: "chart-bar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
@@ -5603,7 +5919,7 @@ export const Index: Record<string, any> = {
       name: "chart-donut",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
@@ -5622,7 +5938,7 @@ export const Index: Record<string, any> = {
       name: "chart-line",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/new-york/ui/chart-line/LineChart.vue",
         type: "registry:ui",
@@ -6612,7 +6928,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -7106,7 +7422,7 @@ export const Index: Record<string, any> = {
       name: "v-calendar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/new-york/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
@@ -7755,7 +8071,7 @@ export const Index: Record<string, any> = {
       name: "CalendarForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
@@ -7770,7 +8086,7 @@ export const Index: Record<string, any> = {
       name: "CalendarWithSelect",
       description: "",
       type: "registry:example",
-      registryDependencies: ["calendar","select","utils"],
+      registryDependencies: ["utils","calendar","select"],
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
@@ -7785,7 +8101,7 @@ export const Index: Record<string, any> = {
       name: "CardChat",
       description: "",
       type: "registry:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["utils","avatar","button","card","command","dialog","input","tooltip"],
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
@@ -7800,7 +8116,7 @@ export const Index: Record<string, any> = {
       name: "CardDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","card","switch","utils"],
+      registryDependencies: ["utils","button","card","switch"],
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
@@ -8055,7 +8371,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -8085,7 +8401,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
@@ -8100,7 +8416,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxPopover",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/new-york/example/ComboboxPopover.vue",
         type: "registry:example",
@@ -8190,7 +8506,7 @@ export const Index: Record<string, any> = {
       name: "DataTableColumnPinningDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
@@ -8205,7 +8521,7 @@ export const Index: Record<string, any> = {
       name: "DataTableDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
@@ -8235,7 +8551,7 @@ export const Index: Record<string, any> = {
       name: "DataTableReactiveDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
@@ -8250,7 +8566,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["utils","button","calendar","popover"],
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
@@ -8265,7 +8581,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
@@ -8280,7 +8596,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithIndependentMonths",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
@@ -8295,7 +8611,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["utils","button","calendar","popover","select"],
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
@@ -8310,7 +8626,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
@@ -9210,7 +9526,7 @@ export const Index: Record<string, any> = {
       name: "SliderDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
@@ -10035,7 +10351,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
@@ -10050,7 +10366,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
@@ -10065,7 +10381,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","select","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
@@ -10080,7 +10396,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
@@ -10095,7 +10411,7 @@ export const Index: Record<string, any> = {
       name: "VDateTimePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
@@ -10110,7 +10426,7 @@ export const Index: Record<string, any> = {
       name: "VRangePickerWithSlot",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
@@ -10121,101 +10437,417 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-  },  "default": {
-    "utils": {
-      name: "utils",
+    "Authentication01": {
+      name: "Authentication01",
       description: "",
-      type: "registry:lib",
-      registryDependencies: undefined,
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
       files: [{
-        path: "registry/default/lib/utils.ts",
-        type: "registry:lib",
-        target: ""
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "Authentication01.vue"
       }],
-      component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "accordion": {
-      name: "accordion",
+    "Authentication02": {
+      name: "Authentication02",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils"],
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
       files: [{
-        path: "registry/default/ui/accordion/Accordion.vue",
-        type: "registry:ui",
-        target: "accordion/Accordion.vue"
-      },{
-        path: "registry/default/ui/accordion/AccordionContent.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
-      },{
-        path: "registry/default/ui/accordion/AccordionItem.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
-      },{
-        path: "registry/default/ui/accordion/AccordionTrigger.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
-      },{
-        path: "registry/default/ui/accordion/index.ts",
-        type: "registry:ui",
-        target: "accordion/index.ts"
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "Authentication02.vue"
       }],
-      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "alert": {
-      name: "alert",
+    "Authentication03": {
+      name: "Authentication03",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils"],
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
       files: [{
-        path: "registry/default/ui/alert/Alert.vue",
-        type: "registry:ui",
-        target: "alert/Alert.vue"
-      },{
-        path: "registry/default/ui/alert/AlertDescription.vue",
-        type: "registry:ui",
-        target: "alert/AlertDescription.vue"
-      },{
-        path: "registry/default/ui/alert/AlertTitle.vue",
-        type: "registry:ui",
-        target: "alert/AlertTitle.vue"
-      },{
-        path: "registry/default/ui/alert/index.ts",
-        type: "registry:ui",
-        target: "alert/index.ts"
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "Authentication03.vue"
       }],
-      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "alert-dialog": {
-      name: "alert-dialog",
+    "Authentication04": {
+      name: "Authentication04",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Authentication04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
       files: [{
-        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
-      },{
-        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
-      },{
-        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialogCancel.vue"
-      },{
-        path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialogContent.vue"
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "Authentication04.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "Dashboard01.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "Dashboard02.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "Dashboard03.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "Dashboard04.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard05").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "Dashboard05.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard06").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "Dashboard06.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/new-york/block/Dashboard07").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "Dashboard07.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "Sidebar01Page.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "Sidebar07Page.vue"
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/default/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/default/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/default/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/default/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogCancel.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogContent.vue"
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogDescription.vue",
         type: "registry:ui",
@@ -10269,7 +10901,7 @@ export const Index: Record<string, any> = {
       name: "auto-form",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","utils","calendar","popover","label","radio-group","select","input","textarea"],
       files: [{
         path: "registry/default/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
@@ -10632,7 +11264,7 @@ export const Index: Record<string, any> = {
       name: "chart-area",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
@@ -10651,7 +11283,7 @@ export const Index: Record<string, any> = {
       name: "chart-bar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
@@ -10670,7 +11302,7 @@ export const Index: Record<string, any> = {
       name: "chart-donut",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
@@ -10689,7 +11321,7 @@ export const Index: Record<string, any> = {
       name: "chart-line",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-line/LineChart.vue",
         type: "registry:ui",
@@ -11679,7 +12311,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -12173,7 +12805,7 @@ export const Index: Record<string, any> = {
       name: "v-calendar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/default/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
@@ -12822,7 +13454,7 @@ export const Index: Record<string, any> = {
       name: "CalendarForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
@@ -12837,7 +13469,7 @@ export const Index: Record<string, any> = {
       name: "CalendarWithSelect",
       description: "",
       type: "registry:example",
-      registryDependencies: ["calendar","select","utils"],
+      registryDependencies: ["utils","calendar","select"],
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
@@ -12852,7 +13484,7 @@ export const Index: Record<string, any> = {
       name: "CardChat",
       description: "",
       type: "registry:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["utils","avatar","button","card","command","dialog","input","tooltip"],
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
@@ -12867,7 +13499,7 @@ export const Index: Record<string, any> = {
       name: "CardDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","card","switch","utils"],
+      registryDependencies: ["utils","button","card","switch"],
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
@@ -13122,7 +13754,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -13152,7 +13784,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
@@ -13257,7 +13889,7 @@ export const Index: Record<string, any> = {
       name: "DataTableColumnPinningDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
@@ -13272,7 +13904,7 @@ export const Index: Record<string, any> = {
       name: "DataTableDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
@@ -13302,7 +13934,7 @@ export const Index: Record<string, any> = {
       name: "DataTableReactiveDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
@@ -13317,7 +13949,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["utils","button","calendar","popover"],
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
@@ -13332,7 +13964,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
@@ -13347,7 +13979,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithIndependentMonths",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
@@ -13362,7 +13994,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["utils","button","calendar","popover","select"],
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
@@ -13377,7 +14009,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
@@ -14277,7 +14909,7 @@ export const Index: Record<string, any> = {
       name: "SliderDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
@@ -15023,167 +15655,483 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "TypographyMuted": {
-      name: "TypographyMuted",
+    "TypographyMuted": {
+      name: "TypographyMuted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyMuted.vue",
+        type: "registry:example",
+        target: "TypographyMuted.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyP": {
+      name: "TypographyP",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyP.vue",
+        type: "registry:example",
+        target: "TypographyP.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographySmall": {
+      name: "TypographySmall",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographySmall.vue",
+        type: "registry:example",
+        target: "TypographySmall.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "TypographyTable": {
+      name: "TypographyTable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: [{
+        path: "registry/default/example/TypographyTable.vue",
+        type: "registry:example",
+        target: "TypographyTable.vue"
+      }],
+      component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VCalendarDemo": {
+      name: "VCalendarDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["v-calendar"],
+      files: [{
+        path: "registry/default/example/VCalendarDemo.vue",
+        type: "registry:example",
+        target: "VCalendarDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerDemo": {
+      name: "VDatePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerDemo.vue",
+        type: "registry:example",
+        target: "VDatePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerForm": {
+      name: "VDatePickerForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: "VDatePickerForm.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","select","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: "VDatePickerWithPresets.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: "VDatePickerWithRange.vue"
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: "VDateTimePickerDemo.vue"
+      }],
+      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: "VRangePickerWithSlot.vue"
+      }],
+      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "Authentication01.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "Authentication02.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "Authentication03.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "Authentication04.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "Dashboard01.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
       description: "",
-      type: "registry:example",
-      registryDependencies: [],
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
       files: [{
-        path: "registry/default/example/TypographyMuted.vue",
-        type: "registry:example",
-        target: "TypographyMuted.vue"
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "Dashboard02.vue"
       }],
-      component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "TypographyP": {
-      name: "TypographyP",
+    "Dashboard03": {
+      name: "Dashboard03",
       description: "",
-      type: "registry:example",
+      type: "registry:block",
       registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
       files: [{
-        path: "registry/default/example/TypographyP.vue",
-        type: "registry:example",
-        target: "TypographyP.vue"
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "Dashboard03.vue"
       }],
-      component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "TypographySmall": {
-      name: "TypographySmall",
+    "Dashboard04": {
+      name: "Dashboard04",
       description: "",
-      type: "registry:example",
+      type: "registry:block",
       registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
       files: [{
-        path: "registry/default/example/TypographySmall.vue",
-        type: "registry:example",
-        target: "TypographySmall.vue"
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "Dashboard04.vue"
       }],
-      component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "TypographyTable": {
-      name: "TypographyTable",
+    "Dashboard05": {
+      name: "Dashboard05",
       description: "",
-      type: "registry:example",
+      type: "registry:block",
       registryDependencies: [],
-      files: [{
-        path: "registry/default/example/TypographyTable.vue",
-        type: "registry:example",
-        target: "TypographyTable.vue"
-      }],
-      component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard05").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
+    "Dashboard05": {
+      name: "Dashboard05",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
       files: [{
-        path: "registry/default/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: "VCalendarDemo.vue"
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "Dashboard05.vue"
       }],
-      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
+    "Dashboard06": {
+      name: "Dashboard06",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
-      files: [{
-        path: "registry/default/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: "VDatePickerDemo.vue"
-      }],
-      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard06").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
+    "Dashboard06": {
+      name: "Dashboard06",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
       files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: "VDatePickerForm.vue"
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "Dashboard06.vue"
       }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
+    "Dashboard07": {
+      name: "Dashboard07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard07").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
+    "Dashboard07": {
+      name: "Dashboard07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
       files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "Dashboard07.vue"
       }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
+    "Sidebar01": {
+      name: "Sidebar01",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
       files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "Sidebar01Page.vue"
       }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
+    "Sidebar07": {
+      name: "Sidebar07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
       files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "Sidebar07Page.vue"
       }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15250,7 +16198,7 @@ export const Index: Record<string, any> = {
       name: "alert-dialog",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/default/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
@@ -15320,7 +16268,7 @@ export const Index: Record<string, any> = {
       name: "auto-form",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["form","accordion","button","separator","checkbox","switch","calendar","popover","utils","label","radio-group","select","input","textarea"],
+      registryDependencies: ["form","accordion","button","separator","checkbox","switch","utils","calendar","popover","label","radio-group","select","input","textarea"],
       files: [{
         path: "registry/default/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
@@ -15683,7 +16631,7 @@ export const Index: Record<string, any> = {
       name: "chart-area",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
@@ -15702,7 +16650,7 @@ export const Index: Record<string, any> = {
       name: "chart-bar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
@@ -15721,7 +16669,7 @@ export const Index: Record<string, any> = {
       name: "chart-donut",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
@@ -15740,7 +16688,7 @@ export const Index: Record<string, any> = {
       name: "chart-line",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["chart","utils"],
+      registryDependencies: ["utils","chart"],
       files: [{
         path: "registry/default/ui/chart-line/LineChart.vue",
         type: "registry:ui",
@@ -16730,7 +17678,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["Sheet.vue","SheetContent.vue","utils","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -17224,7 +18172,7 @@ export const Index: Record<string, any> = {
       name: "v-calendar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","utils"],
+      registryDependencies: ["utils","button"],
       files: [{
         path: "registry/default/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
@@ -17873,7 +18821,7 @@ export const Index: Record<string, any> = {
       name: "CalendarForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
@@ -17888,7 +18836,7 @@ export const Index: Record<string, any> = {
       name: "CalendarWithSelect",
       description: "",
       type: "registry:example",
-      registryDependencies: ["calendar","select","utils"],
+      registryDependencies: ["utils","calendar","select"],
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
@@ -17903,7 +18851,7 @@ export const Index: Record<string, any> = {
       name: "CardChat",
       description: "",
       type: "registry:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["utils","avatar","button","card","command","dialog","input","tooltip"],
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
@@ -17918,7 +18866,7 @@ export const Index: Record<string, any> = {
       name: "CardDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","card","switch","utils"],
+      registryDependencies: ["utils","button","card","switch"],
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
@@ -18173,7 +19121,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -18203,7 +19151,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
@@ -18218,7 +19166,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxPopover",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       files: [{
         path: "registry/default/example/ComboboxPopover.vue",
         type: "registry:example",
@@ -18308,7 +19256,7 @@ export const Index: Record<string, any> = {
       name: "DataTableColumnPinningDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
@@ -18323,7 +19271,7 @@ export const Index: Record<string, any> = {
       name: "DataTableDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
@@ -18353,7 +19301,7 @@ export const Index: Record<string, any> = {
       name: "DataTableReactiveDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["utils","button","checkbox","dropdown-menu","input","table"],
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
@@ -18368,7 +19316,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["utils","button","calendar","popover"],
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
@@ -18383,7 +19331,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","calendar","form","popover","toast"],
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
@@ -18398,7 +19346,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithIndependentMonths",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
@@ -18413,7 +19361,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["utils","button","calendar","popover","select"],
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
@@ -18428,7 +19376,7 @@ export const Index: Record<string, any> = {
       name: "DatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["utils","button","popover","range-calendar"],
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
@@ -19328,7 +20276,7 @@ export const Index: Record<string, any> = {
       name: "SliderDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
@@ -20153,7 +21101,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/default/example/VDatePickerDemo.vue",
         type: "registry:example",
@@ -20168,7 +21116,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
       files: [{
         path: "registry/default/example/VDatePickerForm.vue",
         type: "registry:example",
@@ -20183,7 +21131,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithPresets",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","select","v-calendar"],
       files: [{
         path: "registry/default/example/VDatePickerWithPresets.vue",
         type: "registry:example",
@@ -20198,7 +21146,7 @@ export const Index: Record<string, any> = {
       name: "VDatePickerWithRange",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/default/example/VDatePickerWithRange.vue",
         type: "registry:example",
@@ -20213,7 +21161,7 @@ export const Index: Record<string, any> = {
       name: "VDateTimePickerDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/default/example/VDateTimePickerDemo.vue",
         type: "registry:example",
@@ -20228,7 +21176,7 @@ export const Index: Record<string, any> = {
       name: "VRangePickerWithSlot",
       description: "",
       type: "registry:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","popover","v-calendar"],
       files: [{
         path: "registry/default/example/VRangePickerWithSlot.vue",
         type: "registry:example",
@@ -20239,5 +21187,321 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "Authentication01.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "Authentication02.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "Authentication03.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Authentication04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "Authentication04.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard01").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "Dashboard01.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard02").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "Dashboard02.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard03").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "Dashboard03.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard04").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "Dashboard04.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard05").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "Dashboard05.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard06").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "Dashboard06.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: [],
+      files: [],
+      component: () => import("@/registry/default/block/Dashboard07").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "Dashboard07.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "Sidebar01Page.vue"
+      }],
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "Sidebar07Page.vue"
+      }],
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },
 }
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 755fbdd64..cacd04d57 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -6,7 +6,6 @@ import type {
 } from '../src/registry/schema'
 // @sts-nocheck
 import { existsSync, promises as fs } from 'node:fs'
-import { tmpdir } from 'node:os'
 import path from 'node:path'
 import { template } from 'lodash-es'
 import { rimraf } from 'rimraf'
@@ -21,7 +20,6 @@ import {
   registryEntrySchema,
   registrySchema,
 } from '../src/registry/schema'
-import { fixImport } from './fix-import'
 
 const REGISTRY_PATH = path.join(process.cwd(), 'src/public/r')
 
@@ -38,10 +36,10 @@ const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
 //   compilerOptions: {},
 // })
 
-async function createTempSourceFile(filename: string) {
-  const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
-  return path.join(dir, filename)
-}
+// async function createTempSourceFile(filename: string) {
+//   const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+//   return path.join(dir, filename)
+// }
 
 // ----------------------------------------------------------------------------
 // Build __registry__/index.ts.
@@ -70,206 +68,207 @@ export const Index: Record<string, any> = {
       }
 
       const type = item.type.split(':')[1]
-      let sourceFilename = ''
+      const sourceFilename = ''
 
       // const chunks: any = []
-      if (item.type === 'registry:block') {
-        const file = resolveFiles[0]
-        console.log(item, file)
-        let raw: string
-        try {
-          const filename = path.basename(file)
-          raw = await fs.readFile(file, 'utf8')
-        }
-        catch (error) {
-          continue
-        }
-        // const tempFile = await createTempSourceFile(filename)
-        // const sourceFile = project.createSourceFile(tempFile, raw, {
-        //   scriptKind: ScriptKind.TS,
-        // })
-
-        // const description = sourceFile
-        //   .getVariableDeclaration('description')
-        //   ?.getInitializerOrThrow()
-        //   .asKindOrThrow(SyntaxKind.StringLiteral)
-        //   .getLiteralValue()
-
-        // item.description = description ?? ''
-
-        // // Find all imports.
-        // const imports = new Map<
-        //   string,
-        //   {
-        //     module: string
-        //     text: string
-        //     isDefault?: boolean
-        //   }
-        // >()
-        // sourceFile.getImportDeclarations().forEach((node) => {
-        //   const module = node.getModuleSpecifier().getLiteralValue()
-        //   node.getNamedImports().forEach((item) => {
-        //     imports.set(item.getText(), {
-        //       module,
-        //       text: node.getText(),
-        //     })
-        //   })
-
-        //   const defaultImport = node.getDefaultImport()
-        //   if (defaultImport) {
-        //     imports.set(defaultImport.getText(), {
-        //       module,
-        //       text: defaultImport.getText(),
-        //       isDefault: true,
-        //     })
-        //   }
-        // })
-
-        // Find all opening tags with x-chunk attribute.
-        // const components = sourceFile
-        //   .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-        //   .filter((node) => {
-        //     return node.getAttribute('x-chunk') !== undefined
-        //   })
-
-        // chunks = await Promise.all(
-        //   components.map(async (component, index) => {
-        //     const chunkName = `${item.name}-chunk-${index}`
-
-        //     // Get the value of x-chunk attribute.
-        //     const attr = component
-        //       .getAttributeOrThrow('x-chunk')
-        //       .asKindOrThrow(SyntaxKind.JsxAttribute)
-
-        //     const description = attr
-        //       .getInitializerOrThrow()
-        //       .asKindOrThrow(SyntaxKind.StringLiteral)
-        //       .getLiteralValue()
-
-        //     // Delete the x-chunk attribute.
-        //     attr.remove()
-
-        //     // Add a new attribute to the component.
-        //     component.addAttribute({
-        //       name: 'x-chunk',
-        //       initializer: `"${chunkName}"`,
-        //     })
-
-        //     // Get the value of x-chunk-container attribute.
-        //     const containerAttr = component
-        //       .getAttribute('x-chunk-container')
-        //       ?.asKindOrThrow(SyntaxKind.JsxAttribute)
-
-        //     const containerClassName = containerAttr
-        //       ?.getInitializer()
-        //       ?.asKindOrThrow(SyntaxKind.StringLiteral)
-        //       .getLiteralValue()
-
-        //     containerAttr?.remove()
-
-        //     const parentJsxElement = component.getParentIfKindOrThrow(
-        //       SyntaxKind.JsxElement,
-        //     )
-
-        //     // Find all opening tags on component.
-        //     const children = parentJsxElement
-        //       .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-        //       .map((node) => {
-        //         return node.getTagNameNode().getText()
-        //       })
-        //       .concat(
-        //         parentJsxElement
-        //           .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
-        //           .map((node) => {
-        //             return node.getTagNameNode().getText()
-        //           }),
-        //       )
-
-        //     const componentImports = new Map<
-        //       string,
-        //       string | string[] | Set<string>
-        //     >()
-        //     children.forEach((child) => {
-        //       const importLine = imports.get(child)
-        //       if (importLine) {
-        //         const imports = componentImports.get(importLine.module) || []
-
-        //         const newImports = importLine.isDefault
-        //           ? importLine.text
-        //           : new Set([...imports, child])
-
-        //         componentImports.set(
-        //           importLine.module,
-        //           importLine?.isDefault ? newImports : Array.from(newImports),
-        //         )
-        //       }
-        //     })
-
-        //     const componnetImportLines = Array.from(
-        //       componentImports.keys(),
-        //     ).map((key) => {
-        //       const values = componentImports.get(key)
-        //       const specifier = Array.isArray(values)
-        //         ? `{${values.join(',')}}`
-        //         : values
-
-        //       return `import ${specifier} from "${key}"`
-        //     })
-
-        //     const code = `
-        //     'use client'
-
-        //     ${componnetImportLines.join('\n')}
-
-        //     export default function Component() {
-        //       return (${parentJsxElement.getText()})
-        //     }`
-
-        //     const targetFile = file.replace(item.name, `${chunkName}`)
-        //     const targetFilePath = path.join(
-        //       cwd(),
-        //       `registry/${style.name}/${type}/${chunkName}.ts`,
-        //     )
-
-        //     // Write component file.
-        //     rimraf.sync(targetFilePath)
-        //     await fs.writeFile(targetFilePath, code, 'utf8')
-
-        //     return {
-        //       name: chunkName,
-        //       description,
-        //       component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`,
-        //       file: targetFile,
-        //       container: {
-        //         className: containerClassName,
-        //       },
-        //     }
-        //   }),
-        // )
-
-        // // Write the source file for blocks only.
-        sourceFilename = `__registry__/${style.name}/${type}/${item.name}.ts`
-
-        if (item.files) {
-          const files = item.files.map(file =>
-            typeof file === 'string'
-              ? { type: 'registry:page', path: file }
-              : file,
-          )
-          if (files?.length) {
-            sourceFilename = `__registry__/${style.name}/${files[0].path}`
-          }
-        }
-
-        const sourcePath = path.join(process.cwd(), sourceFilename)
-        if (!existsSync(sourcePath)) {
-          await fs.mkdir(sourcePath, { recursive: true })
-        }
-
-        rimraf.sync(sourcePath)
-        // await fs.writeFile(sourcePath, sourceFile.getText())
-        await fs.writeFile(sourcePath, raw)
-      }
+      // if (item.type === 'registry:block') {
+      //   const file = resolveFiles[0]
+      //   let raw: string
+      //   try {
+      //     if (file) {
+      //       const filename = path.basename(file)
+      //     }
+      //     raw = await fs.readFile(file, 'utf8')
+      //   }
+      //   catch (error) {
+      //     continue
+      //   }
+      //   // const tempFile = await createTempSourceFile(filename)
+      //   // const sourceFile = project.createSourceFile(tempFile, raw, {
+      //   //   scriptKind: ScriptKind.TS,
+      //   // })
+
+      //   // const description = sourceFile
+      //   //   .getVariableDeclaration('description')
+      //   //   ?.getInitializerOrThrow()
+      //   //   .asKindOrThrow(SyntaxKind.StringLiteral)
+      //   //   .getLiteralValue()
+
+      //   // item.description = description ?? ''
+
+      //   // // Find all imports.
+      //   // const imports = new Map<
+      //   //   string,
+      //   //   {
+      //   //     module: string
+      //   //     text: string
+      //   //     isDefault?: boolean
+      //   //   }
+      //   // >()
+      //   // sourceFile.getImportDeclarations().forEach((node) => {
+      //   //   const module = node.getModuleSpecifier().getLiteralValue()
+      //   //   node.getNamedImports().forEach((item) => {
+      //   //     imports.set(item.getText(), {
+      //   //       module,
+      //   //       text: node.getText(),
+      //   //     })
+      //   //   })
+
+      //   //   const defaultImport = node.getDefaultImport()
+      //   //   if (defaultImport) {
+      //   //     imports.set(defaultImport.getText(), {
+      //   //       module,
+      //   //       text: defaultImport.getText(),
+      //   //       isDefault: true,
+      //   //     })
+      //   //   }
+      //   // })
+
+      //   // Find all opening tags with x-chunk attribute.
+      //   // const components = sourceFile
+      //   //   .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+      //   //   .filter((node) => {
+      //   //     return node.getAttribute('x-chunk') !== undefined
+      //   //   })
+
+      //   // chunks = await Promise.all(
+      //   //   components.map(async (component, index) => {
+      //   //     const chunkName = `${item.name}-chunk-${index}`
+
+      //   //     // Get the value of x-chunk attribute.
+      //   //     const attr = component
+      //   //       .getAttributeOrThrow('x-chunk')
+      //   //       .asKindOrThrow(SyntaxKind.JsxAttribute)
+
+      //   //     const description = attr
+      //   //       .getInitializerOrThrow()
+      //   //       .asKindOrThrow(SyntaxKind.StringLiteral)
+      //   //       .getLiteralValue()
+
+      //   //     // Delete the x-chunk attribute.
+      //   //     attr.remove()
+
+      //   //     // Add a new attribute to the component.
+      //   //     component.addAttribute({
+      //   //       name: 'x-chunk',
+      //   //       initializer: `"${chunkName}"`,
+      //   //     })
+
+      //   //     // Get the value of x-chunk-container attribute.
+      //   //     const containerAttr = component
+      //   //       .getAttribute('x-chunk-container')
+      //   //       ?.asKindOrThrow(SyntaxKind.JsxAttribute)
+
+      //   //     const containerClassName = containerAttr
+      //   //       ?.getInitializer()
+      //   //       ?.asKindOrThrow(SyntaxKind.StringLiteral)
+      //   //       .getLiteralValue()
+
+      //   //     containerAttr?.remove()
+
+      //   //     const parentJsxElement = component.getParentIfKindOrThrow(
+      //   //       SyntaxKind.JsxElement,
+      //   //     )
+
+      //   //     // Find all opening tags on component.
+      //   //     const children = parentJsxElement
+      //   //       .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+      //   //       .map((node) => {
+      //   //         return node.getTagNameNode().getText()
+      //   //       })
+      //   //       .concat(
+      //   //         parentJsxElement
+      //   //           .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+      //   //           .map((node) => {
+      //   //             return node.getTagNameNode().getText()
+      //   //           }),
+      //   //       )
+
+      //   //     const componentImports = new Map<
+      //   //       string,
+      //   //       string | string[] | Set<string>
+      //   //     >()
+      //   //     children.forEach((child) => {
+      //   //       const importLine = imports.get(child)
+      //   //       if (importLine) {
+      //   //         const imports = componentImports.get(importLine.module) || []
+
+      //   //         const newImports = importLine.isDefault
+      //   //           ? importLine.text
+      //   //           : new Set([...imports, child])
+
+      //   //         componentImports.set(
+      //   //           importLine.module,
+      //   //           importLine?.isDefault ? newImports : Array.from(newImports),
+      //   //         )
+      //   //       }
+      //   //     })
+
+      //   //     const componnetImportLines = Array.from(
+      //   //       componentImports.keys(),
+      //   //     ).map((key) => {
+      //   //       const values = componentImports.get(key)
+      //   //       const specifier = Array.isArray(values)
+      //   //         ? `{${values.join(',')}}`
+      //   //         : values
+
+      //   //       return `import ${specifier} from "${key}"`
+      //   //     })
+
+      //   //     const code = `
+      //   //     'use client'
+
+      //   //     ${componnetImportLines.join('\n')}
+
+      //   //     export default function Component() {
+      //   //       return (${parentJsxElement.getText()})
+      //   //     }`
+
+      //   //     const targetFile = file.replace(item.name, `${chunkName}`)
+      //   //     const targetFilePath = path.join(
+      //   //       cwd(),
+      //   //       `registry/${style.name}/${type}/${chunkName}.ts`,
+      //   //     )
+
+      //   //     // Write component file.
+      //   //     rimraf.sync(targetFilePath)
+      //   //     await fs.writeFile(targetFilePath, code, 'utf8')
+
+      //   //     return {
+      //   //       name: chunkName,
+      //   //       description,
+      //   //       component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`,
+      //   //       file: targetFile,
+      //   //       container: {
+      //   //         className: containerClassName,
+      //   //       },
+      //   //     }
+      //   //   }),
+      //   // )
+
+      //   // // Write the source file for blocks only.
+      //   sourceFilename = `__registry__/${style.name}/${type}/${item.name}.ts`
+
+      //   if (item.files) {
+      //     const files = item.files.map(file =>
+      //       typeof file === 'string'
+      //         ? { type: 'registry:page', path: file }
+      //         : file,
+      //     )
+      //     if (files?.length) {
+      //       sourceFilename = `__registry__/${style.name}/${files[0].path}`
+      //     }
+      //   }
+
+      //   const sourcePath = path.join(process.cwd(), sourceFilename)
+      //   if (!existsSync(sourcePath)) {
+      //     await fs.mkdir(sourcePath, { recursive: true })
+      //   }
+
+      //   rimraf.sync(sourcePath)
+      //   // await fs.writeFile(sourcePath, sourceFile.getText())
+      //   await fs.writeFile(sourcePath, raw)
+      // }
 
       let componentPath = `@/registry/${style.name}/${type}/${item.name}`
 
@@ -340,14 +339,7 @@ export const Index: Record<string, any> = {
       return {
         ...item,
         files: item.files?.map((_file) => {
-          const file
-            = typeof _file === 'string'
-              ? {
-                  path: _file,
-                  type: item.type,
-                }
-              : _file
-
+          const file = { path: _file.path, type: item.type }
           return file
         }),
       }
@@ -386,27 +378,19 @@ async function buildStyles(registry: Registry) {
       if (item.files) {
         files = await Promise.all(
           item.files.map(async (_file) => {
-            const file
-              = typeof _file === 'string'
-                ? {
-                    path: _file,
-                    type: item.type,
-                    content: '',
-                    target: '',
-                  }
-                : _file
+            const file = {
+              path: _file.path,
+              type: _file.type,
+              content: '',
+              target: _file.target ?? '',
+            }
 
             let content: string
             try {
               content = await fs.readFile(
-                path.join(process.cwd(), 'registry', style.name, file.path),
+                path.join(process.cwd(), 'src', 'registry', style.name, file.path),
                 'utf8',
               )
-
-              // Only fix imports for v0- blocks.
-              if (item.name.startsWith('v0-')) {
-                content = fixImport(content)
-              }
             }
             catch (error) {
               return
@@ -422,30 +406,30 @@ async function buildStyles(registry: Registry) {
             // sourceFile.getVariableDeclaration('containerClassName')?.remove()
             // sourceFile.getVariableDeclaration('description')?.remove()
 
-            let target = file.target || ''
-
-            if ((!target || target === '') && item.name.startsWith('v0-')) {
-              const fileName = file.path.split('/').pop()
-              if (
-                file.type === 'registry:block'
-                || file.type === 'registry:component'
-                || file.type === 'registry:example'
-              ) {
-                target = `components/${fileName}`
-              }
-
-              if (file.type === 'registry:ui') {
-                target = `components/ui/${fileName}`
-              }
-
-              if (file.type === 'registry:hook') {
-                target = `hooks/${fileName}`
-              }
-
-              if (file.type === 'registry:lib') {
-                target = `lib/${fileName}`
-              }
-            }
+            const target = file.target || ''
+
+            // if ((!target || target === '') && item.name.startsWith('v0-')) {
+            //   const fileName = file.path.split('/').pop()
+            //   if (
+            //     file.type === 'registry:block'
+            //     || file.type === 'registry:component'
+            //     || file.type === 'registry:example'
+            //   ) {
+            //     target = `components/${fileName}`
+            //   }
+
+            //   if (file.type === 'registry:ui') {
+            //     target = `components/ui/${fileName}`
+            //   }
+
+            //   if (file.type === 'registry:hook') {
+            //     target = `hooks/${fileName}`
+            //   }
+
+            //   if (file.type === 'registry:lib') {
+            //     target = `lib/${fileName}`
+            //   }
+            // }
 
             return {
               path: file.path,
@@ -458,6 +442,9 @@ async function buildStyles(registry: Registry) {
         )
       }
 
+      // if (item.type === 'registry:block' && item.name === 'Sidebar01')
+      //   console.log(item.name, item.files?.[0], files?.[0])
+
       const payload = registryEntrySchema
         .omit({
           // source: true,
@@ -473,7 +460,7 @@ async function buildStyles(registry: Registry) {
       if (payload.success) {
         await fs.writeFile(
           path.join(targetPath, `${item.name}.json`),
-          JSON.stringify(payload.data, null, 2),
+          `${JSON.stringify(payload.data, null, 2)}\r\n`,
           'utf8',
         )
       }
@@ -501,10 +488,10 @@ async function buildStylesIndex() {
     const dependencies = [
       'tailwindcss-animate',
       'class-variance-authority',
-      'lucide-react',
+      'lucide-vue-next',
     ]
 
-    // TODO: Remove this when we migrate to lucide-react.
+    // TODO: Remove this when we migrate to lucide-vue-next.
     // if (style.name === "new-york") {
     //   dependencies.push("@radix-ui/react-icons")
     // }
@@ -575,7 +562,7 @@ async function buildThemes() {
 
   await fs.writeFile(
     path.join(colorsTargetPath, 'index.json'),
-    JSON.stringify(colorsData, null, 2),
+    `${JSON.stringify(colorsData, null, 2)}\r\n`,
     'utf8',
   )
 
@@ -697,7 +684,7 @@ async function buildThemes() {
 
     await fs.writeFile(
       path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
-      JSON.stringify(base, null, 2),
+      `${JSON.stringify(base, null, 2)}\r\n`,
       'utf8',
     )
 
diff --git a/apps/www/src/public/r/colors/gray.json b/apps/www/src/public/r/colors/gray.json
index 0f3cd093e..af314d925 100644
--- a/apps/www/src/public/r/colors/gray.json
+++ b/apps/www/src/public/r/colors/gray.json
@@ -99,4 +99,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
diff --git a/apps/www/src/public/r/colors/index.json b/apps/www/src/public/r/colors/index.json
index 6b70773e7..a535a7701 100644
--- a/apps/www/src/public/r/colors/index.json
+++ b/apps/www/src/public/r/colors/index.json
@@ -1996,4 +1996,4 @@
       "hslChannel": "343.1 87.7% 15.9%"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/colors/neutral.json b/apps/www/src/public/r/colors/neutral.json
index c47c15745..5fc067a8a 100644
--- a/apps/www/src/public/r/colors/neutral.json
+++ b/apps/www/src/public/r/colors/neutral.json
@@ -99,4 +99,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
diff --git a/apps/www/src/public/r/colors/slate.json b/apps/www/src/public/r/colors/slate.json
index f5bd98b31..85b9c2c64 100644
--- a/apps/www/src/public/r/colors/slate.json
+++ b/apps/www/src/public/r/colors/slate.json
@@ -99,4 +99,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
diff --git a/apps/www/src/public/r/colors/stone.json b/apps/www/src/public/r/colors/stone.json
index c2f58bb23..726ee758d 100644
--- a/apps/www/src/public/r/colors/stone.json
+++ b/apps/www/src/public/r/colors/stone.json
@@ -99,4 +99,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
diff --git a/apps/www/src/public/r/colors/zinc.json b/apps/www/src/public/r/colors/zinc.json
index 47b381443..6ba58beb2 100644
--- a/apps/www/src/public/r/colors/zinc.json
+++ b/apps/www/src/public/r/colors/zinc.json
@@ -99,4 +99,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
diff --git a/apps/www/src/public/r/icons/index.json b/apps/www/src/public/r/icons/index.json
deleted file mode 100644
index 6561bf321..000000000
--- a/apps/www/src/public/r/icons/index.json
+++ /dev/null
@@ -1,150 +0,0 @@
-{
-  "AlertCircle": {
-    "lucide": "AlertCircle",
-    "radix": "ExclamationTriangleIcon"
-  },
-  "ArrowLeft": {
-    "lucide": "ArrowLeft",
-    "radix": "ArrowLeftIcon"
-  },
-  "ArrowRight": {
-    "lucide": "ArrowRight",
-    "radix": "ArrowRightIcon"
-  },
-  "ArrowUpDown": {
-    "lucide": "ArrowUpDown",
-    "radix": "CaretSortIcon"
-  },
-  "BellRing": {
-    "lucide": "BellRing",
-    "radix": "BellIcon"
-  },
-  "Bold": {
-    "lucide": "Bold",
-    "radix": "FontBoldIcon"
-  },
-  "Calculator": {
-    "lucide": "Calculator",
-    "radix": "ComponentPlaceholderIcon"
-  },
-  "Calendar": {
-    "lucide": "Calendar",
-    "radix": "CalendarIcon"
-  },
-  "Check": {
-    "lucide": "Check",
-    "radix": "CheckIcon"
-  },
-  "ChevronDown": {
-    "lucide": "ChevronDown",
-    "radix": "ChevronDownIcon"
-  },
-  "ChevronLeft": {
-    "lucide": "ChevronLeft",
-    "radix": "ChevronLeftIcon"
-  },
-  "ChevronRight": {
-    "lucide": "ChevronRight",
-    "radix": "ChevronRightIcon"
-  },
-  "ChevronUp": {
-    "lucide": "ChevronUp",
-    "radix": "ChevronUpIcon"
-  },
-  "ChevronsUpDown": {
-    "lucide": "ChevronsUpDown",
-    "radix": "CaretSortIcon"
-  },
-  "Circle": {
-    "lucide": "Circle",
-    "radix": "DotFilledIcon"
-  },
-  "Copy": {
-    "lucide": "Copy",
-    "radix": "CopyIcon"
-  },
-  "CreditCard": {
-    "lucide": "CreditCard",
-    "radix": "ComponentPlaceholderIcon"
-  },
-  "GripVertical": {
-    "lucide": "GripVertical",
-    "radix": "DragHandleDots2Icon"
-  },
-  "Italic": {
-    "lucide": "Italic",
-    "radix": "FontItalicIcon"
-  },
-  "Loader2": {
-    "lucide": "Loader2",
-    "radix": "ReloadIcon"
-  },
-  "Mail": {
-    "lucide": "Mail",
-    "radix": "EnvelopeClosedIcon"
-  },
-  "MailOpen": {
-    "lucide": "MailOpen",
-    "radix": "EnvelopeOpenIcon"
-  },
-  "Minus": {
-    "lucide": "Minus",
-    "radix": "MinusIcon"
-  },
-  "Moon": {
-    "lucide": "Moon",
-    "radix": "MoonIcon"
-  },
-  "MoreHorizontal": {
-    "lucide": "MoreHorizontal",
-    "radix": "DotsHorizontalIcon"
-  },
-  "PanelLeft": {
-    "lucide": "PanelLeft",
-    "radix": "ViewVerticalIcon"
-  },
-  "Plus": {
-    "lucide": "Plus",
-    "radix": "PlusIcon"
-  },
-  "Search": {
-    "lucide": "Search",
-    "radix": "MagnifyingGlassIcon"
-  },
-  "Send": {
-    "lucide": "Send",
-    "radix": "PaperPlaneIcon"
-  },
-  "Settings": {
-    "lucide": "Settings",
-    "radix": "GearIcon"
-  },
-  "Slash": {
-    "lucide": "Slash",
-    "radix": "SlashIcon"
-  },
-  "Smile": {
-    "lucide": "Smile",
-    "radix": "FaceIcon"
-  },
-  "Sun": {
-    "lucide": "Sun",
-    "radix": "SunIcon"
-  },
-  "Terminal": {
-    "lucide": "Terminal",
-    "radix": "RocketIcon"
-  },
-  "Underline": {
-    "lucide": "Underline",
-    "radix": "UnderlineIcon"
-  },
-  "User": {
-    "lucide": "User",
-    "radix": "PersonIcon"
-  },
-  "X": {
-    "lucide": "X",
-    "radix": "Cross2Icon"
-  }
-}
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index e323d0010..309e2cdc5 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -9,33 +9,23 @@
     "files": [
       {
         "path": "ui/accordion/Accordion.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/Accordion.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/index.ts",
-        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "accordion/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -49,27 +39,19 @@
     "files": [
       {
         "path": "ui/alert/Alert.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/Alert.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/AlertDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/AlertDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/AlertTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/AlertTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
-        "type": "registry:ui",
-        "target": "alert/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -78,69 +60,49 @@
     "type": "registry:ui",
     "dependencies": [],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/alert-dialog/AlertDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogCancel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/index.ts",
-        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -152,15 +114,11 @@
     "files": [
       {
         "path": "ui/aspect-ratio/AspectRatio.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
-        "type": "registry:ui",
-        "target": "aspect-ratio/AspectRatio.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/aspect-ratio/index.ts",
-        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
-        "type": "registry:ui",
-        "target": "aspect-ratio/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -179,9 +137,9 @@
       "separator",
       "checkbox",
       "switch",
+      "utils",
       "calendar",
       "popover",
-      "utils",
       "label",
       "radio-group",
       "select",
@@ -191,99 +149,67 @@
     "files": [
       {
         "path": "ui/auto-form/AutoForm.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoForm.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormField.vue",
-        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormField.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldArray.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldArray.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldBoolean.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldBoolean.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldDate.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldEnum.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldEnum.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldFile.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldFile.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldNumber.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldNumber.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldObject.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldObject.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/constant.ts",
-        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/constant.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/dependencies.ts",
-        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/dependencies.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/index.ts",
-        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
-        "type": "registry:ui",
-        "target": "auto-form/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/interface.ts",
-        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
-        "type": "registry:ui",
-        "target": "auto-form/interface.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/utils.ts",
-        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/utils.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -297,27 +223,19 @@
     "files": [
       {
         "path": "ui/avatar/Avatar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/Avatar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/AvatarFallback.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/AvatarFallback.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/AvatarImage.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/AvatarImage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
-        "type": "registry:ui",
-        "target": "avatar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -331,15 +249,11 @@
     "files": [
       {
         "path": "ui/badge/Badge.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "badge/Badge.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/badge/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
-        "type": "registry:ui",
-        "target": "badge/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -353,51 +267,35 @@
     "files": [
       {
         "path": "ui/breadcrumb/Breadcrumb.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/Breadcrumb.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbLink.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbLink.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbList.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbPage.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbPage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/index.ts",
-        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -411,15 +309,11 @@
     "files": [
       {
         "path": "ui/button/Button.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "button/Button.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/button/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
-        "type": "registry:ui",
-        "target": "button/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -434,81 +328,55 @@
     "files": [
       {
         "path": "ui/calendar/Calendar.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/Calendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarCellTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGrid.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGrid.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridBody.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridHead.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridRow.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeadCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeadCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeading.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeading.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarNextButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarPrevButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
-        "type": "registry:ui",
-        "target": "calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -522,45 +390,31 @@
     "files": [
       {
         "path": "ui/card/Card.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/Card.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/index.ts",
-        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
-        "type": "registry:ui",
-        "target": "card/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -578,51 +432,35 @@
     "files": [
       {
         "path": "ui/carousel/Carousel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/Carousel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselNext.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselPrevious.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/index.ts",
-        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
-        "type": "registry:ui",
-        "target": "carousel/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/interface.ts",
-        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
-        "type": "registry:ui",
-        "target": "carousel/interface.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/useCarousel.ts",
-        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
-        "type": "registry:ui",
-        "target": "carousel/useCarousel.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -640,39 +478,27 @@
     "files": [
       {
         "path": "ui/chart/ChartCrosshair.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartCrosshair.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartLegend.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartLegend.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartSingleTooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartSingleTooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartTooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartTooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/index.ts",
-        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
-        "type": "registry:ui",
-        "target": "chart/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/interface.ts",
-        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart/interface.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -685,21 +511,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-area/AreaChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-area/AreaChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-area/index.ts",
-        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-area/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -712,21 +534,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-bar/BarChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-bar/BarChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-bar/index.ts",
-        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-bar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -739,21 +557,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-donut/DonutChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-donut/DonutChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-donut/index.ts",
-        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-donut/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -766,21 +580,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-line/LineChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-line/LineChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-line/index.ts",
-        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-line/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -794,15 +604,11 @@
     "files": [
       {
         "path": "ui/checkbox/Checkbox.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "checkbox/Checkbox.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/checkbox/index.ts",
-        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
-        "type": "registry:ui",
-        "target": "checkbox/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -814,27 +620,19 @@
     "files": [
       {
         "path": "ui/collapsible/Collapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/Collapsible.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/CollapsibleContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/CollapsibleContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/CollapsibleTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/CollapsibleTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/index.ts",
-        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "collapsible/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -849,63 +647,43 @@
     "files": [
       {
         "path": "ui/command/Command.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/Command.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandDialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandEmpty.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandList.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/index.ts",
-        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
-        "type": "registry:ui",
-        "target": "command/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -919,99 +697,67 @@
     "files": [
       {
         "path": "ui/context-menu/ContextMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuPortal.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuPortal.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/index.ts",
-        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "context-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1025,63 +771,43 @@
     "files": [
       {
         "path": "ui/dialog/Dialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/Dialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogScrollContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogScrollContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/index.ts",
-        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "dialog/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1097,51 +823,35 @@
     "files": [
       {
         "path": "ui/drawer/Drawer.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/Drawer.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerContent.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerFooter.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerOverlay.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerOverlay.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerTitle.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/index.ts",
-        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
-        "type": "registry:ui",
-        "target": "drawer/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1155,93 +865,63 @@
     "files": [
       {
         "path": "ui/dropdown-menu/DropdownMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/index.ts",
-        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1260,51 +940,35 @@
     "files": [
       {
         "path": "ui/form/FormControl.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormControl.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormLabel.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormMessage.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormMessage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/index.ts",
-        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
-        "type": "registry:ui",
-        "target": "form/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/injectionKeys.ts",
-        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
-        "type": "registry:ui",
-        "target": "form/injectionKeys.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/useFormField.ts",
-        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
-        "type": "registry:ui",
-        "target": "form/useFormField.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1318,27 +982,19 @@
     "files": [
       {
         "path": "ui/hover-card/HoverCard.vue",
-        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCard.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/HoverCardContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCardContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/HoverCardTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCardTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/index.ts",
-        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "hover-card/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1354,15 +1010,11 @@
     "files": [
       {
         "path": "ui/input/Input.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
-        "type": "registry:ui",
-        "target": "input/Input.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/input/index.ts",
-        "content": "export { default as Input } from './Input.vue'\n",
-        "type": "registry:ui",
-        "target": "input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1376,15 +1028,11 @@
     "files": [
       {
         "path": "ui/label/Label.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
-        "type": "registry:ui",
-        "target": "label/Label.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/label/index.ts",
-        "content": "export { default as Label } from './Label.vue'\n",
-        "type": "registry:ui",
-        "target": "label/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1398,99 +1046,67 @@
     "files": [
       {
         "path": "ui/menubar/Menubar.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/Menubar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/index.ts",
-        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "menubar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1504,57 +1120,39 @@
     "files": [
       {
         "path": "ui/navigation-menu/NavigationMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuIndicator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuLink.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuLink.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuList.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuViewport.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuViewport.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/index.ts",
-        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1568,39 +1166,27 @@
     "files": [
       {
         "path": "ui/number-field/NumberField.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberField.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldDecrement.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldDecrement.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldIncrement.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldIncrement.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/index.ts",
-        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
-        "type": "registry:ui",
-        "target": "number-field/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1615,39 +1201,27 @@
     "files": [
       {
         "path": "ui/pagination/PaginationEllipsis.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationEllipsis.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationFirst.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationLast.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationNext.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationPrev.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/index.ts",
-        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "pagination/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1661,33 +1235,23 @@
     "files": [
       {
         "path": "ui/pin-input/PinInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/index.ts",
-        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
-        "type": "registry:ui",
-        "target": "pin-input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1701,27 +1265,19 @@
     "files": [
       {
         "path": "ui/popover/Popover.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/Popover.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/PopoverContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/PopoverContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/PopoverTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/PopoverTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/index.ts",
-        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "popover/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1735,15 +1291,11 @@
     "files": [
       {
         "path": "ui/progress/Progress.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "progress/Progress.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/progress/index.ts",
-        "content": "export { default as Progress } from './Progress.vue'\n",
-        "type": "registry:ui",
-        "target": "progress/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1757,21 +1309,15 @@
     "files": [
       {
         "path": "ui/radio-group/RadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "radio-group/RadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "radio-group/RadioGroupItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/radio-group/index.ts",
-        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
-        "type": "registry:ui",
-        "target": "radio-group/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1786,81 +1332,55 @@
     "files": [
       {
         "path": "ui/range-calendar/RangeCalendar.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGrid.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGrid.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridBody.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridHead.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridRow.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeadCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeading.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeading.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarNextButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarPrevButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/index.ts",
-        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
-        "type": "registry:ui",
-        "target": "range-calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1874,21 +1394,15 @@
     "files": [
       {
         "path": "ui/resizable/ResizableHandle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "resizable/ResizableHandle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/resizable/ResizablePanelGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "resizable/ResizablePanelGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/resizable/index.ts",
-        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "resizable/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1902,21 +1416,15 @@
     "files": [
       {
         "path": "ui/scroll-area/ScrollArea.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "scroll-area/ScrollArea.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/scroll-area/ScrollBar.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
-        "type": "registry:ui",
-        "target": "scroll-area/ScrollBar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/scroll-area/index.ts",
-        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
-        "type": "registry:ui",
-        "target": "scroll-area/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -1930,75 +1438,51 @@
     "files": [
       {
         "path": "ui/select/Select.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/Select.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectItemText.vue",
-        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectItemText.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectScrollDownButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectScrollDownButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectScrollUpButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectScrollUpButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectValue.vue",
-        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectValue.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/index.ts",
-        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
-        "type": "registry:ui",
-        "target": "select/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2012,15 +1496,11 @@
     "files": [
       {
         "path": "ui/separator/Separator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "separator/Separator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/separator/index.ts",
-        "content": "export { default as Separator } from './Separator.vue'\n",
-        "type": "registry:ui",
-        "target": "separator/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2034,57 +1514,39 @@
     "files": [
       {
         "path": "ui/sheet/Sheet.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/Sheet.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
-        "type": "registry:ui",
-        "target": "sheet/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2095,9 +1557,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "Sheet.vue",
       "SheetContent.vue",
-      "utils",
       "Input.vue",
       "Tooltip.vue",
       "TooltipContent.vue",
@@ -2109,159 +1571,107 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/Sidebar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarInset.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarInset.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuBadge.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuBadge.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuButtonChild.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButtonChild.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSkeleton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSubButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSubItem.vue",
-        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarRail.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarRail.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
-        "type": "registry:ui",
-        "target": "sidebar/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/utils.ts",
-        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
-        "type": "registry:ui",
-        "target": "sidebar/utils.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2275,15 +1685,11 @@
     "files": [
       {
         "path": "ui/skeleton/Skeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "skeleton/Skeleton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/skeleton/index.ts",
-        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
-        "type": "registry:ui",
-        "target": "skeleton/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2297,15 +1703,11 @@
     "files": [
       {
         "path": "ui/slider/Slider.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "slider/Slider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/slider/index.ts",
-        "content": "export { default as Slider } from './Slider.vue'\n",
-        "type": "registry:ui",
-        "target": "slider/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2319,15 +1721,11 @@
     "files": [
       {
         "path": "ui/sonner/Sonner.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "sonner/Sonner.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sonner/index.ts",
-        "content": "export { default as Toaster } from './Sonner.vue'\n",
-        "type": "registry:ui",
-        "target": "sonner/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2341,51 +1739,35 @@
     "files": [
       {
         "path": "ui/stepper/Stepper.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/Stepper.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperIndicator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperIndicator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperSeparator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperTitle.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/index.ts",
-        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "stepper/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2399,15 +1781,11 @@
     "files": [
       {
         "path": "ui/switch/Switch.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "switch/Switch.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/switch/index.ts",
-        "content": "export { default as Switch } from './Switch.vue'\n",
-        "type": "registry:ui",
-        "target": "switch/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2421,63 +1799,43 @@
     "files": [
       {
         "path": "ui/table/Table.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/Table.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableBody.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableCaption.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableCaption.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableCell.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableEmpty.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableHead.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableRow.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/index.ts",
-        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
-        "type": "registry:ui",
-        "target": "table/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2491,33 +1849,23 @@
     "files": [
       {
         "path": "ui/tabs/Tabs.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/Tabs.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsList.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/index.ts",
-        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "tabs/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2531,39 +1879,27 @@
     "files": [
       {
         "path": "ui/tags-input/TagsInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItemDelete.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItemDelete.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItemText.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItemText.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/index.ts",
-        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
-        "type": "registry:ui",
-        "target": "tags-input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2579,15 +1915,11 @@
     "files": [
       {
         "path": "ui/textarea/Textarea.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "textarea/Textarea.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/textarea/index.ts",
-        "content": "export { default as Textarea } from './Textarea.vue'\n",
-        "type": "registry:ui",
-        "target": "textarea/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2601,63 +1933,43 @@
     "files": [
       {
         "path": "ui/toast/Toast.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/Toast.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastViewport.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastViewport.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/Toaster.vue",
-        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/Toaster.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/index.ts",
-        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
-        "type": "registry:ui",
-        "target": "toast/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/use-toast.ts",
-        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
-        "type": "registry:ui",
-        "target": "toast/use-toast.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2671,15 +1983,11 @@
     "files": [
       {
         "path": "ui/toggle/Toggle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle/Toggle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
-        "type": "registry:ui",
-        "target": "toggle/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2694,21 +2002,15 @@
     "files": [
       {
         "path": "ui/toggle-group/ToggleGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle-group/ToggleGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle-group/ToggleGroupItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle-group/index.ts",
-        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
-        "type": "registry:ui",
-        "target": "toggle-group/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2722,33 +2024,23 @@
     "files": [
       {
         "path": "ui/tooltip/Tooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/Tooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/index.ts",
-        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "tooltip/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2760,21 +2052,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-        "type": "registry:ui",
-        "target": "v-calendar/Calendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/v-calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-        "type": "registry:ui",
-        "target": "v-calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2788,33 +2076,23 @@
     "files": [
       {
         "path": "ui/accordion/Accordion.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/Accordion.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/AccordionTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "accordion/AccordionTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/accordion/index.ts",
-        "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "accordion/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2828,27 +2106,19 @@
     "files": [
       {
         "path": "ui/alert/Alert.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/Alert.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/AlertDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/AlertDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/AlertTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert/AlertTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
-        "type": "registry:ui",
-        "target": "alert/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2857,69 +2127,49 @@
     "type": "registry:ui",
     "dependencies": [],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/alert-dialog/AlertDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogCancel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/AlertDialogTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/alert-dialog/index.ts",
-        "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "alert-dialog/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2931,15 +2181,11 @@
     "files": [
       {
         "path": "ui/aspect-ratio/AspectRatio.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
-        "type": "registry:ui",
-        "target": "aspect-ratio/AspectRatio.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/aspect-ratio/index.ts",
-        "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
-        "type": "registry:ui",
-        "target": "aspect-ratio/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -2958,9 +2204,9 @@
       "separator",
       "checkbox",
       "switch",
+      "utils",
       "calendar",
       "popover",
-      "utils",
       "label",
       "radio-group",
       "select",
@@ -2970,99 +2216,67 @@
     "files": [
       {
         "path": "ui/auto-form/AutoForm.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoForm.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormField.vue",
-        "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormField.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldArray.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldArray.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldBoolean.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldBoolean.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldDate.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldEnum.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldEnum.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldFile.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldFile.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldNumber.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldNumber.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormFieldObject.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldObject.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/AutoFormLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "auto-form/AutoFormLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/constant.ts",
-        "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/constant.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/dependencies.ts",
-        "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/dependencies.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/index.ts",
-        "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
-        "type": "registry:ui",
-        "target": "auto-form/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/interface.ts",
-        "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
-        "type": "registry:ui",
-        "target": "auto-form/interface.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/auto-form/utils.ts",
-        "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
-        "type": "registry:ui",
-        "target": "auto-form/utils.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3076,27 +2290,19 @@
     "files": [
       {
         "path": "ui/avatar/Avatar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/Avatar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/AvatarFallback.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/AvatarFallback.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/AvatarImage.vue",
-        "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "avatar/AvatarImage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/avatar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
-        "type": "registry:ui",
-        "target": "avatar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3110,15 +2316,11 @@
     "files": [
       {
         "path": "ui/badge/Badge.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "badge/Badge.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/badge/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
-        "type": "registry:ui",
-        "target": "badge/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3132,51 +2334,35 @@
     "files": [
       {
         "path": "ui/breadcrumb/Breadcrumb.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/Breadcrumb.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbLink.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbLink.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbList.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbPage.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbPage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/breadcrumb/index.ts",
-        "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
-        "type": "registry:ui",
-        "target": "breadcrumb/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3190,15 +2376,11 @@
     "files": [
       {
         "path": "ui/button/Button.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "button/Button.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/button/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
-        "type": "registry:ui",
-        "target": "button/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3213,81 +2395,55 @@
     "files": [
       {
         "path": "ui/calendar/Calendar.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/Calendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarCellTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGrid.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGrid.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridBody.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridHead.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarGridRow.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarGridRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeadCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeadCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarHeading.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarHeading.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarNextButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "calendar/CalendarPrevButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
-        "type": "registry:ui",
-        "target": "calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3301,45 +2457,31 @@
     "files": [
       {
         "path": "ui/card/Card.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/Card.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/CardTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
-        "type": "registry:ui",
-        "target": "card/CardTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/card/index.ts",
-        "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
-        "type": "registry:ui",
-        "target": "card/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3357,51 +2499,35 @@
     "files": [
       {
         "path": "ui/carousel/Carousel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/Carousel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselNext.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "carousel/CarouselPrevious.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/index.ts",
-        "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
-        "type": "registry:ui",
-        "target": "carousel/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/interface.ts",
-        "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
-        "type": "registry:ui",
-        "target": "carousel/interface.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/carousel/useCarousel.ts",
-        "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
-        "type": "registry:ui",
-        "target": "carousel/useCarousel.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3419,39 +2545,27 @@
     "files": [
       {
         "path": "ui/chart/ChartCrosshair.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartCrosshair.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartLegend.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartLegend.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartSingleTooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartSingleTooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/ChartTooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart/ChartTooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/index.ts",
-        "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
-        "type": "registry:ui",
-        "target": "chart/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart/interface.ts",
-        "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart/interface.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3464,21 +2578,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-area/AreaChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-area/AreaChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-area/index.ts",
-        "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-area/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3491,21 +2601,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-bar/BarChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-bar/BarChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-bar/index.ts",
-        "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-bar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3518,21 +2624,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-donut/DonutChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-donut/DonutChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-donut/index.ts",
-        "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-donut/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3545,21 +2647,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-line/LineChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "chart-line/LineChart.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/chart-line/index.ts",
-        "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
-        "type": "registry:ui",
-        "target": "chart-line/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3573,15 +2671,11 @@
     "files": [
       {
         "path": "ui/checkbox/Checkbox.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "checkbox/Checkbox.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/checkbox/index.ts",
-        "content": "export { default as Checkbox } from './Checkbox.vue'\n",
-        "type": "registry:ui",
-        "target": "checkbox/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3593,27 +2687,19 @@
     "files": [
       {
         "path": "ui/collapsible/Collapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/Collapsible.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/CollapsibleContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/CollapsibleContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/CollapsibleTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "collapsible/CollapsibleTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/collapsible/index.ts",
-        "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "collapsible/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3628,63 +2714,43 @@
     "files": [
       {
         "path": "ui/command/Command.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/Command.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandDialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandEmpty.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandList.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/CommandShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "command/CommandShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/command/index.ts",
-        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
-        "type": "registry:ui",
-        "target": "command/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3698,99 +2764,67 @@
     "files": [
       {
         "path": "ui/context-menu/ContextMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuPortal.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuPortal.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/ContextMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "context-menu/ContextMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/context-menu/index.ts",
-        "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "context-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3804,63 +2838,43 @@
     "files": [
       {
         "path": "ui/dialog/Dialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/Dialog.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogScrollContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogScrollContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/DialogTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dialog/DialogTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dialog/index.ts",
-        "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "dialog/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3876,51 +2890,35 @@
     "files": [
       {
         "path": "ui/drawer/Drawer.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/Drawer.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerContent.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerFooter.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerOverlay.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerOverlay.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/DrawerTitle.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "drawer/DrawerTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/drawer/index.ts",
-        "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
-        "type": "registry:ui",
-        "target": "drawer/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -3934,93 +2932,63 @@
     "files": [
       {
         "path": "ui/dropdown-menu/DropdownMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/dropdown-menu/index.ts",
-        "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "dropdown-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4039,51 +3007,35 @@
     "files": [
       {
         "path": "ui/form/FormControl.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormControl.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormLabel.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/FormMessage.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "form/FormMessage.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/index.ts",
-        "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
-        "type": "registry:ui",
-        "target": "form/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/injectionKeys.ts",
-        "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
-        "type": "registry:ui",
-        "target": "form/injectionKeys.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/form/useFormField.ts",
-        "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
-        "type": "registry:ui",
-        "target": "form/useFormField.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4097,27 +3049,19 @@
     "files": [
       {
         "path": "ui/hover-card/HoverCard.vue",
-        "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCard.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/HoverCardContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCardContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/HoverCardTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "hover-card/HoverCardTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/hover-card/index.ts",
-        "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "hover-card/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4133,15 +3077,11 @@
     "files": [
       {
         "path": "ui/input/Input.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
-        "type": "registry:ui",
-        "target": "input/Input.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/input/index.ts",
-        "content": "export { default as Input } from './Input.vue'\n",
-        "type": "registry:ui",
-        "target": "input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4155,15 +3095,11 @@
     "files": [
       {
         "path": "ui/label/Label.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
-        "type": "registry:ui",
-        "target": "label/Label.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/label/index.ts",
-        "content": "export { default as Label } from './Label.vue'\n",
-        "type": "registry:ui",
-        "target": "label/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4177,99 +3113,67 @@
     "files": [
       {
         "path": "ui/menubar/Menubar.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/Menubar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarCheckboxItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarRadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarRadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarRadioItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarShortcut.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarShortcut.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSubContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSubContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarSubTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/MenubarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "menubar/MenubarTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/menubar/index.ts",
-        "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "menubar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4283,57 +3187,39 @@
     "files": [
       {
         "path": "ui/navigation-menu/NavigationMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuIndicator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuLink.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuLink.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuList.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/NavigationMenuViewport.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuViewport.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/navigation-menu/index.ts",
-        "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
-        "type": "registry:ui",
-        "target": "navigation-menu/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4347,39 +3233,27 @@
     "files": [
       {
         "path": "ui/number-field/NumberField.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberField.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldDecrement.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldDecrement.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldIncrement.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldIncrement.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/NumberFieldInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "number-field/NumberFieldInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/number-field/index.ts",
-        "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
-        "type": "registry:ui",
-        "target": "number-field/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4394,39 +3268,27 @@
     "files": [
       {
         "path": "ui/pagination/PaginationEllipsis.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationEllipsis.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationFirst.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationLast.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationNext.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pagination/PaginationPrev.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pagination/index.ts",
-        "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "pagination/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4440,33 +3302,23 @@
     "files": [
       {
         "path": "ui/pin-input/PinInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/PinInputSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "pin-input/PinInputSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/pin-input/index.ts",
-        "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
-        "type": "registry:ui",
-        "target": "pin-input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4480,27 +3332,19 @@
     "files": [
       {
         "path": "ui/popover/Popover.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/Popover.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/PopoverContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/PopoverContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/PopoverTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "popover/PopoverTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/popover/index.ts",
-        "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "popover/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4514,15 +3358,11 @@
     "files": [
       {
         "path": "ui/progress/Progress.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "progress/Progress.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/progress/index.ts",
-        "content": "export { default as Progress } from './Progress.vue'\n",
-        "type": "registry:ui",
-        "target": "progress/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4536,21 +3376,15 @@
     "files": [
       {
         "path": "ui/radio-group/RadioGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "radio-group/RadioGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "radio-group/RadioGroupItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/radio-group/index.ts",
-        "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
-        "type": "registry:ui",
-        "target": "radio-group/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4565,81 +3399,55 @@
     "files": [
       {
         "path": "ui/range-calendar/RangeCalendar.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGrid.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGrid.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridBody.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridHead.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridRow.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeadCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeader.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeading.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeading.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarNextButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
-        "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarPrevButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/range-calendar/index.ts",
-        "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
-        "type": "registry:ui",
-        "target": "range-calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4653,21 +3461,15 @@
     "files": [
       {
         "path": "ui/resizable/ResizableHandle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "resizable/ResizableHandle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/resizable/ResizablePanelGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "resizable/ResizablePanelGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/resizable/index.ts",
-        "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
-        "type": "registry:ui",
-        "target": "resizable/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4681,21 +3483,15 @@
     "files": [
       {
         "path": "ui/scroll-area/ScrollArea.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "scroll-area/ScrollArea.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/scroll-area/ScrollBar.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
-        "type": "registry:ui",
-        "target": "scroll-area/ScrollBar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/scroll-area/index.ts",
-        "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
-        "type": "registry:ui",
-        "target": "scroll-area/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4709,75 +3505,51 @@
     "files": [
       {
         "path": "ui/select/Select.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/Select.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectItemText.vue",
-        "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectItemText.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectScrollDownButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectScrollDownButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectScrollUpButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectScrollUpButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/SelectValue.vue",
-        "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
-        "type": "registry:ui",
-        "target": "select/SelectValue.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/select/index.ts",
-        "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
-        "type": "registry:ui",
-        "target": "select/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4791,15 +3563,11 @@
     "files": [
       {
         "path": "ui/separator/Separator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "separator/Separator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/separator/index.ts",
-        "content": "export { default as Separator } from './Separator.vue'\n",
-        "type": "registry:ui",
-        "target": "separator/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4813,57 +3581,39 @@
     "files": [
       {
         "path": "ui/sheet/Sheet.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/Sheet.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/SheetTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sheet/SheetTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sheet/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
-        "type": "registry:ui",
-        "target": "sheet/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -4874,9 +3624,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "Sheet.vue",
       "SheetContent.vue",
-      "utils",
       "Input.vue",
       "Tooltip.vue",
       "TooltipContent.vue",
@@ -4888,159 +3638,107 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/Sidebar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarGroupLabel.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarGroupLabel.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarInset.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarInset.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenu.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuBadge.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuBadge.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuButtonChild.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButtonChild.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSkeleton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSub.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSub.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSubButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubButton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarMenuSubItem.vue",
-        "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarRail.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarRail.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
-        "type": "registry:ui",
-        "target": "sidebar/SidebarTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
-        "type": "registry:ui",
-        "target": "sidebar/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sidebar/utils.ts",
-        "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
-        "type": "registry:ui",
-        "target": "sidebar/utils.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5054,15 +3752,11 @@
     "files": [
       {
         "path": "ui/skeleton/Skeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "skeleton/Skeleton.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/skeleton/index.ts",
-        "content": "export { default as Skeleton } from './Skeleton.vue'\n",
-        "type": "registry:ui",
-        "target": "skeleton/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5076,15 +3770,11 @@
     "files": [
       {
         "path": "ui/slider/Slider.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "slider/Slider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/slider/index.ts",
-        "content": "export { default as Slider } from './Slider.vue'\n",
-        "type": "registry:ui",
-        "target": "slider/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5098,15 +3788,11 @@
     "files": [
       {
         "path": "ui/sonner/Sonner.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "sonner/Sonner.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/sonner/index.ts",
-        "content": "export { default as Toaster } from './Sonner.vue'\n",
-        "type": "registry:ui",
-        "target": "sonner/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5120,51 +3806,35 @@
     "files": [
       {
         "path": "ui/stepper/Stepper.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/Stepper.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperDescription.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperIndicator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperIndicator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperItem.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperSeparator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperSeparator.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperTitle.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/StepperTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "stepper/StepperTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/stepper/index.ts",
-        "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "stepper/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5178,15 +3848,11 @@
     "files": [
       {
         "path": "ui/switch/Switch.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "switch/Switch.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/switch/index.ts",
-        "content": "export { default as Switch } from './Switch.vue'\n",
-        "type": "registry:ui",
-        "target": "switch/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5200,63 +3866,43 @@
     "files": [
       {
         "path": "ui/table/Table.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/Table.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableBody.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableBody.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableCaption.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableCaption.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableCell.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableCell.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableEmpty.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableFooter.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableHead.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableHead.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableHeader.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/TableRow.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
-        "type": "registry:ui",
-        "target": "table/TableRow.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/table/index.ts",
-        "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
-        "type": "registry:ui",
-        "target": "table/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5270,33 +3916,23 @@
     "files": [
       {
         "path": "ui/tabs/Tabs.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/Tabs.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsList.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsList.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/TabsTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tabs/TabsTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tabs/index.ts",
-        "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "tabs/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5310,39 +3946,27 @@
     "files": [
       {
         "path": "ui/tags-input/TagsInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputInput.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItemDelete.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItemDelete.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/TagsInputItemText.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "tags-input/TagsInputItemText.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tags-input/index.ts",
-        "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
-        "type": "registry:ui",
-        "target": "tags-input/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5358,15 +3982,11 @@
     "files": [
       {
         "path": "ui/textarea/Textarea.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "textarea/Textarea.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/textarea/index.ts",
-        "content": "export { default as Textarea } from './Textarea.vue'\n",
-        "type": "registry:ui",
-        "target": "textarea/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5380,63 +4000,43 @@
     "files": [
       {
         "path": "ui/toast/Toast.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/Toast.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastAction.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastClose.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastDescription.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastDescription.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastTitle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastTitle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/ToastViewport.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/ToastViewport.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/Toaster.vue",
-        "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toast/Toaster.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/index.ts",
-        "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
-        "type": "registry:ui",
-        "target": "toast/index.ts"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toast/use-toast.ts",
-        "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
-        "type": "registry:ui",
-        "target": "toast/use-toast.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5450,15 +4050,11 @@
     "files": [
       {
         "path": "ui/toggle/Toggle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle/Toggle.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
-        "type": "registry:ui",
-        "target": "toggle/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5473,21 +4069,15 @@
     "files": [
       {
         "path": "ui/toggle-group/ToggleGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle-group/ToggleGroup.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
-        "type": "registry:ui",
-        "target": "toggle-group/ToggleGroupItem.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toggle-group/index.ts",
-        "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
-        "type": "registry:ui",
-        "target": "toggle-group/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5501,33 +4091,23 @@
     "files": [
       {
         "path": "ui/tooltip/Tooltip.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/Tooltip.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipContent.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipProvider.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/TooltipTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
-        "type": "registry:ui",
-        "target": "tooltip/TooltipTrigger.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/tooltip/index.ts",
-        "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
-        "type": "registry:ui",
-        "target": "tooltip/index.ts"
+        "type": "registry:ui"
       }
     ]
   },
@@ -5539,21 +4119,17 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-        "type": "registry:ui",
-        "target": "v-calendar/Calendar.vue"
+        "type": "registry:ui"
       },
       {
         "path": "ui/v-calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-        "type": "registry:ui",
-        "target": "v-calendar/index.ts"
+        "type": "registry:ui"
       }
     ]
   }
diff --git a/apps/www/src/public/r/styles/default/AccordionDemo.json b/apps/www/src/public/r/styles/default/AccordionDemo.json
index 67c82eb96..30f64874d 100644
--- a/apps/www/src/public/r/styles/default/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/default/AccordionDemo.json
@@ -13,4 +13,4 @@
       "target": "AccordionDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDemo.json b/apps/www/src/public/r/styles/default/AlertDemo.json
index a4978a65e..ea1a6bdc0 100644
--- a/apps/www/src/public/r/styles/default/AlertDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDemo.json
@@ -13,4 +13,4 @@
       "target": "AlertDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
index 7e103c480..ecc3f1ef5 100644
--- a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "AlertDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AlertDialogDemo.json b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
index ab38b57cf..4d0e2f783 100644
--- a/apps/www/src/public/r/styles/default/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
@@ -14,4 +14,4 @@
       "target": "AlertDialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
index 5355c282f..76e16a907 100644
--- a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "AreaChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartDemo.json b/apps/www/src/public/r/styles/default/AreaChartDemo.json
index 9d5531192..abcde0434 100644
--- a/apps/www/src/public/r/styles/default/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/default/AreaChartDemo.json
@@ -13,4 +13,4 @@
       "target": "AreaChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AreaChartSparkline.json b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
index f1aeed38c..6323eb4a8 100644
--- a/apps/www/src/public/r/styles/default/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
@@ -13,4 +13,4 @@
       "target": "AreaChartSparkline.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AspectRatioDemo.json b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
index 55764cdf1..d51a0f2a9 100644
--- a/apps/www/src/public/r/styles/default/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
@@ -13,4 +13,4 @@
       "target": "AspectRatioDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication01.json b/apps/www/src/public/r/styles/default/Authentication01.json
index 4eb8ac5ff..edf4db2a3 100644
--- a/apps/www/src/public/r/styles/default/Authentication01.json
+++ b/apps/www/src/public/r/styles/default/Authentication01.json
@@ -2,6 +2,18 @@
   "name": "Authentication01",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication01.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication01.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication02.json b/apps/www/src/public/r/styles/default/Authentication02.json
index dd2c2f64c..87e76db24 100644
--- a/apps/www/src/public/r/styles/default/Authentication02.json
+++ b/apps/www/src/public/r/styles/default/Authentication02.json
@@ -2,6 +2,18 @@
   "name": "Authentication02",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication02.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication02.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication03.json b/apps/www/src/public/r/styles/default/Authentication03.json
index d14c95e5d..8126e15f6 100644
--- a/apps/www/src/public/r/styles/default/Authentication03.json
+++ b/apps/www/src/public/r/styles/default/Authentication03.json
@@ -2,6 +2,18 @@
   "name": "Authentication03",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication03.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication03.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Authentication04.json b/apps/www/src/public/r/styles/default/Authentication04.json
index a8fec2ac8..e7c319e04 100644
--- a/apps/www/src/public/r/styles/default/Authentication04.json
+++ b/apps/www/src/public/r/styles/default/Authentication04.json
@@ -2,6 +2,17 @@
   "name": "Authentication04",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication04.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication04.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormApi.json b/apps/www/src/public/r/styles/default/AutoFormApi.json
index 670ea3fea..f79b6ce9d 100644
--- a/apps/www/src/public/r/styles/default/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/default/AutoFormApi.json
@@ -15,4 +15,4 @@
       "target": "AutoFormApi.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormArray.json b/apps/www/src/public/r/styles/default/AutoFormArray.json
index 60c1777c2..af6b41bfd 100644
--- a/apps/www/src/public/r/styles/default/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/default/AutoFormArray.json
@@ -15,4 +15,4 @@
       "target": "AutoFormArray.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormBasic.json b/apps/www/src/public/r/styles/default/AutoFormBasic.json
index 166d33e8a..3a1dbcdea 100644
--- a/apps/www/src/public/r/styles/default/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/default/AutoFormBasic.json
@@ -15,4 +15,4 @@
       "target": "AutoFormBasic.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
index 6aad81883..69d0d8702 100644
--- a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
@@ -15,4 +15,4 @@
       "target": "AutoFormConfirmPassword.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormControlled.json b/apps/www/src/public/r/styles/default/AutoFormControlled.json
index a49eef5f8..98366a02c 100644
--- a/apps/www/src/public/r/styles/default/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/default/AutoFormControlled.json
@@ -19,4 +19,4 @@
       "target": "AutoFormControlled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormDependencies.json b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
index 73de25918..0b4241deb 100644
--- a/apps/www/src/public/r/styles/default/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
@@ -15,4 +15,4 @@
       "target": "AutoFormDependencies.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
index 2c3215c63..86bf84c56 100644
--- a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
@@ -15,4 +15,4 @@
       "target": "AutoFormInputWithoutLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AutoFormSubObject.json b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
index 4386cf799..2f9102b9b 100644
--- a/apps/www/src/public/r/styles/default/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
@@ -15,4 +15,4 @@
       "target": "AutoFormSubObject.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/AvatarDemo.json b/apps/www/src/public/r/styles/default/AvatarDemo.json
index db9f7846d..5e5322066 100644
--- a/apps/www/src/public/r/styles/default/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/default/AvatarDemo.json
@@ -13,4 +13,4 @@
       "target": "AvatarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeDemo.json b/apps/www/src/public/r/styles/default/BadgeDemo.json
index 57075e91f..dbe0cdb74 100644
--- a/apps/www/src/public/r/styles/default/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
index 43b0e2e85..e88da1bb2 100644
--- a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
index 1d5607b0f..1fc9b59b9 100644
--- a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
index 7ae39020a..e372282bf 100644
--- a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeSecondaryDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
index 3915d380b..9c1c212ba 100644
--- a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "BarChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartDemo.json b/apps/www/src/public/r/styles/default/BarChartDemo.json
index bb43aa647..667b0307f 100644
--- a/apps/www/src/public/r/styles/default/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/default/BarChartDemo.json
@@ -13,4 +13,4 @@
       "target": "BarChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartRounded.json b/apps/www/src/public/r/styles/default/BarChartRounded.json
index 125e2acf8..07486456a 100644
--- a/apps/www/src/public/r/styles/default/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/default/BarChartRounded.json
@@ -13,4 +13,4 @@
       "target": "BarChartRounded.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BarChartStacked.json b/apps/www/src/public/r/styles/default/BarChartStacked.json
index 02b51ebbe..777742fc7 100644
--- a/apps/www/src/public/r/styles/default/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/default/BarChartStacked.json
@@ -13,4 +13,4 @@
       "target": "BarChartStacked.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
index 69a825e93..e7f70f852 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
@@ -14,4 +14,4 @@
       "target": "BreadcrumbDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
index a25113108..a81ec9621 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
@@ -14,4 +14,4 @@
       "target": "BreadcrumbDropdown.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
index 81d330f7d..a38486a1e 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbEllipsisDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
index 988e7a349..18f3f2b2b 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbLinkDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
index d6bf80ca3..c6b627579 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
@@ -18,4 +18,4 @@
       "target": "BreadcrumbResponsive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
index 714bf5a65..09f256561 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbSeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
index 0376cfd04..910b831e8 100644
--- a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonAsChildDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonDemo.json b/apps/www/src/public/r/styles/default/ButtonDemo.json
index 0446f9009..b4c936400 100644
--- a/apps/www/src/public/r/styles/default/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
index 93e2c997c..0b7164e60 100644
--- a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
index 2325ae0ee..d91d6888a 100644
--- a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonGhostDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonIconDemo.json b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
index 82fbb7a41..94e4a7c2b 100644
--- a/apps/www/src/public/r/styles/default/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonIconDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
index b154bb9ce..f82645a66 100644
--- a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonLinkDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
index 596ee0422..6e2b9607a 100644
--- a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonLoadingDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
index fe3476ed0..f423b53ce 100644
--- a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
index 0766c8394..492bb1968 100644
--- a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonSecondaryDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
index 1c1f401ed..8e2fde092 100644
--- a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonWithIconDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarDemo.json b/apps/www/src/public/r/styles/default/CalendarDemo.json
index 45aa55bf5..3ef883563 100644
--- a/apps/www/src/public/r/styles/default/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/CalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "CalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarForm.json b/apps/www/src/public/r/styles/default/CalendarForm.json
index 28f4be492..a8f77ad19 100644
--- a/apps/www/src/public/r/styles/default/CalendarForm.json
+++ b/apps/www/src/public/r/styles/default/CalendarForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/CalendarForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "CalendarForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CalendarWithSelect.json b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
index a2cb3498c..20969c443 100644
--- a/apps/www/src/public/r/styles/default/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
@@ -5,16 +5,16 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
+    "utils",
     "calendar",
-    "select",
-    "utils"
+    "select"
   ],
   "files": [
     {
       "path": "example/CalendarWithSelect.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
       "target": "CalendarWithSelect.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CardChat.json b/apps/www/src/public/r/styles/default/CardChat.json
index bbe92e7fa..d1ea45bd4 100644
--- a/apps/www/src/public/r/styles/default/CardChat.json
+++ b/apps/www/src/public/r/styles/default/CardChat.json
@@ -3,21 +3,21 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "avatar",
     "button",
     "card",
     "command",
     "dialog",
     "input",
-    "tooltip",
-    "utils"
+    "tooltip"
   ],
   "files": [
     {
       "path": "example/CardChat.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\n\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
       "target": "CardChat.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CardDemo.json b/apps/www/src/public/r/styles/default/CardDemo.json
index d4a60f524..8219b0973 100644
--- a/apps/www/src/public/r/styles/default/CardDemo.json
+++ b/apps/www/src/public/r/styles/default/CardDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "card",
-    "switch",
-    "utils"
+    "switch"
   ],
   "files": [
     {
       "path": "example/CardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
       "target": "CardDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CardFormDemo.json b/apps/www/src/public/r/styles/default/CardFormDemo.json
index fee8273e0..eb128e857 100644
--- a/apps/www/src/public/r/styles/default/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/default/CardFormDemo.json
@@ -17,4 +17,4 @@
       "target": "CardFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CardStats.json b/apps/www/src/public/r/styles/default/CardStats.json
index 09cc42dc7..e736139c4 100644
--- a/apps/www/src/public/r/styles/default/CardStats.json
+++ b/apps/www/src/public/r/styles/default/CardStats.json
@@ -18,4 +18,4 @@
       "target": "CardStats.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CardWithForm.json b/apps/www/src/public/r/styles/default/CardWithForm.json
index 03ef5d687..faa6d4791 100644
--- a/apps/www/src/public/r/styles/default/CardWithForm.json
+++ b/apps/www/src/public/r/styles/default/CardWithForm.json
@@ -17,4 +17,4 @@
       "target": "CardWithForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselApi.json b/apps/www/src/public/r/styles/default/CarouselApi.json
index 8554faffc..986e2b388 100644
--- a/apps/www/src/public/r/styles/default/CarouselApi.json
+++ b/apps/www/src/public/r/styles/default/CarouselApi.json
@@ -16,4 +16,4 @@
       "target": "CarouselApi.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselDemo.json b/apps/www/src/public/r/styles/default/CarouselDemo.json
index 623dbccca..820beb498 100644
--- a/apps/www/src/public/r/styles/default/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/default/CarouselDemo.json
@@ -14,4 +14,4 @@
       "target": "CarouselDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselOrientation.json b/apps/www/src/public/r/styles/default/CarouselOrientation.json
index 1d1d5e2f3..508e815b7 100644
--- a/apps/www/src/public/r/styles/default/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/default/CarouselOrientation.json
@@ -14,4 +14,4 @@
       "target": "CarouselOrientation.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselPlugin.json b/apps/www/src/public/r/styles/default/CarouselPlugin.json
index a0aed9547..79b0f5be2 100644
--- a/apps/www/src/public/r/styles/default/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/default/CarouselPlugin.json
@@ -14,4 +14,4 @@
       "target": "CarouselPlugin.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselSize.json b/apps/www/src/public/r/styles/default/CarouselSize.json
index 38bf4ac52..c9eb7f2a4 100644
--- a/apps/www/src/public/r/styles/default/CarouselSize.json
+++ b/apps/www/src/public/r/styles/default/CarouselSize.json
@@ -14,4 +14,4 @@
       "target": "CarouselSize.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselSpacing.json b/apps/www/src/public/r/styles/default/CarouselSpacing.json
index 5fdd24077..603957012 100644
--- a/apps/www/src/public/r/styles/default/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/default/CarouselSpacing.json
@@ -14,4 +14,4 @@
       "target": "CarouselSpacing.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CarouselThumbnails.json b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
index d66fe2f36..32091f87f 100644
--- a/apps/www/src/public/r/styles/default/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
@@ -16,4 +16,4 @@
       "target": "CarouselThumbnails.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxDemo.json b/apps/www/src/public/r/styles/default/CheckboxDemo.json
index b14de095b..834710e2a 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDemo.json
@@ -13,4 +13,4 @@
       "target": "CheckboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxDisabled.json b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
index 644fbe639..2fb5b64eb 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
@@ -13,4 +13,4 @@
       "target": "CheckboxDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
index 59c2a286b..d0c9a81f8 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
@@ -20,4 +20,4 @@
       "target": "CheckboxFormMultiple.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
index b9633175b..8a5761e38 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
@@ -20,4 +20,4 @@
       "target": "CheckboxFormSingle.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CheckboxWithText.json b/apps/www/src/public/r/styles/default/CheckboxWithText.json
index 9f3f1328f..597eee293 100644
--- a/apps/www/src/public/r/styles/default/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/default/CheckboxWithText.json
@@ -13,4 +13,4 @@
       "target": "CheckboxWithText.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CollapsibleDemo.json b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
index 0b934ca45..5adf17910 100644
--- a/apps/www/src/public/r/styles/default/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
@@ -14,4 +14,4 @@
       "target": "CollapsibleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxDemo.json b/apps/www/src/public/r/styles/default/ComboboxDemo.json
index 3da509ce6..d368b6c39 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "ComboboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
index 25307b288..2ab1f2a54 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
@@ -15,4 +15,4 @@
       "target": "ComboboxDropdownMenu.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxForm.json b/apps/www/src/public/r/styles/default/ComboboxForm.json
index d7d54183e..34505223d 100644
--- a/apps/www/src/public/r/styles/default/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/default/ComboboxForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": "ComboboxForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxPopover.json b/apps/www/src/public/r/styles/default/ComboboxPopover.json
index 1cbddc6bd..d9b721df5 100644
--- a/apps/www/src/public/r/styles/default/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/default/ComboboxPopover.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
       "path": "example/ComboboxPopover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "ComboboxPopover.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ComboboxResponsive.json b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
index 78bfa7469..327d29608 100644
--- a/apps/www/src/public/r/styles/default/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
@@ -18,4 +18,4 @@
       "target": "ComboboxResponsive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CommandDemo.json b/apps/www/src/public/r/styles/default/CommandDemo.json
index 5d2718a1d..d9f2bcbad 100644
--- a/apps/www/src/public/r/styles/default/CommandDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDemo.json
@@ -13,4 +13,4 @@
       "target": "CommandDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CommandDialogDemo.json b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
index e472da790..98f56eef0 100644
--- a/apps/www/src/public/r/styles/default/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
@@ -15,4 +15,4 @@
       "target": "CommandDialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ContextMenuDemo.json b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
index c8a85b039..a6e1efbe9 100644
--- a/apps/www/src/public/r/styles/default/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
@@ -13,4 +13,4 @@
       "target": "ContextMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/CustomChartTooltip.json b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
index bcbbb1abd..d49c4c2d5 100644
--- a/apps/www/src/public/r/styles/default/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
@@ -13,4 +13,4 @@
       "target": "CustomChartTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard01.json b/apps/www/src/public/r/styles/default/Dashboard01.json
index 382915cfc..c4e1a9681 100644
--- a/apps/www/src/public/r/styles/default/Dashboard01.json
+++ b/apps/www/src/public/r/styles/default/Dashboard01.json
@@ -2,6 +2,22 @@
   "name": "Dashboard01",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "avatar",
+    "badge",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet",
+    "table"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard01.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard01.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard02.json b/apps/www/src/public/r/styles/default/Dashboard02.json
index 8082f6c11..039890f6e 100644
--- a/apps/www/src/public/r/styles/default/Dashboard02.json
+++ b/apps/www/src/public/r/styles/default/Dashboard02.json
@@ -2,6 +2,20 @@
   "name": "Dashboard02",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard02.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard02.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard03.json b/apps/www/src/public/r/styles/default/Dashboard03.json
index 049c155f7..4c3e8edb5 100644
--- a/apps/www/src/public/r/styles/default/Dashboard03.json
+++ b/apps/www/src/public/r/styles/default/Dashboard03.json
@@ -2,6 +2,22 @@
   "name": "Dashboard03",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "button",
+    "drawer",
+    "input",
+    "label",
+    "select",
+    "textarea",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard03.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard03.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard04.json b/apps/www/src/public/r/styles/default/Dashboard04.json
index a90bccd8c..022aaa530 100644
--- a/apps/www/src/public/r/styles/default/Dashboard04.json
+++ b/apps/www/src/public/r/styles/default/Dashboard04.json
@@ -2,6 +2,20 @@
   "name": "Dashboard04",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard04.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard04.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard05.json b/apps/www/src/public/r/styles/default/Dashboard05.json
index 792037a6a..07b58be21 100644
--- a/apps/www/src/public/r/styles/default/Dashboard05.json
+++ b/apps/www/src/public/r/styles/default/Dashboard05.json
@@ -2,6 +2,28 @@
   "name": "Dashboard05",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "pagination",
+    "progress",
+    "separator",
+    "sheet",
+    "table",
+    "tabs",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard05.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard05.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard06.json b/apps/www/src/public/r/styles/default/Dashboard06.json
index 30fce9934..657a7df11 100644
--- a/apps/www/src/public/r/styles/default/Dashboard06.json
+++ b/apps/www/src/public/r/styles/default/Dashboard06.json
@@ -2,6 +2,24 @@
   "name": "Dashboard06",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet",
+    "table",
+    "tabs",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard06.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard06.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Dashboard07.json b/apps/www/src/public/r/styles/default/Dashboard07.json
index 83cd11900..74bc669ff 100644
--- a/apps/www/src/public/r/styles/default/Dashboard07.json
+++ b/apps/www/src/public/r/styles/default/Dashboard07.json
@@ -2,6 +2,27 @@
   "name": "Dashboard07",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "label",
+    "select",
+    "sheet",
+    "table",
+    "textarea",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard07.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard07.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
index a3e46cdd3..ab6d0f6d1 100644
--- a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableColumnPinningDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableColumnPinningDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableDemo.json b/apps/www/src/public/r/styles/default/DataTableDemo.json
index fa1cfa7b7..71d6cc8a2 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
index 90eed3f9c..e7f683c6e 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
@@ -14,4 +14,4 @@
       "target": "DataTableDemoColumn.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
index 610924063..50b3eb3c4 100644
--- a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableReactiveDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableReactiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerDemo.json b/apps/www/src/public/r/styles/default/DatePickerDemo.json
index d7e74d425..85470af78 100644
--- a/apps/www/src/public/r/styles/default/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/DatePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
       "path": "example/DatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerForm.json b/apps/www/src/public/r/styles/default/DatePickerForm.json
index 0983f5c48..76ddb647c 100644
--- a/apps/www/src/public/r/styles/default/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/DatePickerForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/DatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
index 51a4c1d09..7765660cf 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "range-calendar",
-    "utils"
+    "range-calendar"
   ],
   "files": [
     {
       "path": "example/DatePickerWithIndependentMonths.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithIndependentMonths.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
index 0c4425f7f..3a8e5685e 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
@@ -3,18 +3,18 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "popover",
-    "select",
-    "utils"
+    "select"
   ],
   "files": [
     {
       "path": "example/DatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithPresets.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithRange.json b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
index 91df74a57..3b56fa627 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "range-calendar",
-    "utils"
+    "range-calendar"
   ],
   "files": [
     {
       "path": "example/DatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithRange.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
index 9e1155bdf..476b8373f 100644
--- a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
@@ -16,4 +16,4 @@
       "target": "DialogCustomCloseButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DialogDemo.json b/apps/www/src/public/r/styles/default/DialogDemo.json
index f9d729fae..049e7d7a0 100644
--- a/apps/www/src/public/r/styles/default/DialogDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogDemo.json
@@ -16,4 +16,4 @@
       "target": "DialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DialogForm.json b/apps/www/src/public/r/styles/default/DialogForm.json
index 2fcd3afd5..f65b731e4 100644
--- a/apps/www/src/public/r/styles/default/DialogForm.json
+++ b/apps/www/src/public/r/styles/default/DialogForm.json
@@ -17,4 +17,4 @@
       "target": "DialogForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
index 472bd072b..4de859502 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
@@ -14,4 +14,4 @@
       "target": "DialogScrollBodyDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
index 23676107d..d3eee6109 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
@@ -14,4 +14,4 @@
       "target": "DialogScrollOverlayDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartColor.json b/apps/www/src/public/r/styles/default/DonutChartColor.json
index 4f45b1086..35e13fbc7 100644
--- a/apps/www/src/public/r/styles/default/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/default/DonutChartColor.json
@@ -13,4 +13,4 @@
       "target": "DonutChartColor.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
index c65d72094..bad06ce81 100644
--- a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "DonutChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartDemo.json b/apps/www/src/public/r/styles/default/DonutChartDemo.json
index bc38705c5..daf21911d 100644
--- a/apps/www/src/public/r/styles/default/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/default/DonutChartDemo.json
@@ -13,4 +13,4 @@
       "target": "DonutChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DonutChartPie.json b/apps/www/src/public/r/styles/default/DonutChartPie.json
index c857ac908..8c45b965a 100644
--- a/apps/www/src/public/r/styles/default/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/default/DonutChartPie.json
@@ -13,4 +13,4 @@
       "target": "DonutChartPie.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DrawerDemo.json b/apps/www/src/public/r/styles/default/DrawerDemo.json
index aeec0d467..2215cd6ff 100644
--- a/apps/www/src/public/r/styles/default/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/default/DrawerDemo.json
@@ -17,4 +17,4 @@
       "target": "DrawerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DrawerDialog.json b/apps/www/src/public/r/styles/default/DrawerDialog.json
index 9cfc3720e..56c2dd8ad 100644
--- a/apps/www/src/public/r/styles/default/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/default/DrawerDialog.json
@@ -19,4 +19,4 @@
       "target": "DrawerDialog.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
index 2f5df9f82..30de381aa 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuCheckboxes.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
index fb99f6397..7c35a7ad7 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
index 3522ab992..615f8d9f5 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuRadioGroup.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/HoverCardDemo.json b/apps/www/src/public/r/styles/default/HoverCardDemo.json
index 3272d44ba..e25166538 100644
--- a/apps/www/src/public/r/styles/default/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/default/HoverCardDemo.json
@@ -15,4 +15,4 @@
       "target": "HoverCardDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputDemo.json b/apps/www/src/public/r/styles/default/InputDemo.json
index 7c6dab873..b0ef33a4b 100644
--- a/apps/www/src/public/r/styles/default/InputDemo.json
+++ b/apps/www/src/public/r/styles/default/InputDemo.json
@@ -13,4 +13,4 @@
       "target": "InputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputDisabled.json b/apps/www/src/public/r/styles/default/InputDisabled.json
index b50982f29..88b9242e6 100644
--- a/apps/www/src/public/r/styles/default/InputDisabled.json
+++ b/apps/www/src/public/r/styles/default/InputDisabled.json
@@ -13,4 +13,4 @@
       "target": "InputDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputFile.json b/apps/www/src/public/r/styles/default/InputFile.json
index 0efb8da50..e62cc6bf5 100644
--- a/apps/www/src/public/r/styles/default/InputFile.json
+++ b/apps/www/src/public/r/styles/default/InputFile.json
@@ -14,4 +14,4 @@
       "target": "InputFile.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputForm.json b/apps/www/src/public/r/styles/default/InputForm.json
index 37f1bef76..5236e7a3e 100644
--- a/apps/www/src/public/r/styles/default/InputForm.json
+++ b/apps/www/src/public/r/styles/default/InputForm.json
@@ -20,4 +20,4 @@
       "target": "InputForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
index 0bc1c1e07..35bcc0bf0 100644
--- a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
@@ -20,4 +20,4 @@
       "target": "InputFormAutoAnimate.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithButton.json b/apps/www/src/public/r/styles/default/InputWithButton.json
index 2336a8fcb..11fb50200 100644
--- a/apps/www/src/public/r/styles/default/InputWithButton.json
+++ b/apps/www/src/public/r/styles/default/InputWithButton.json
@@ -14,4 +14,4 @@
       "target": "InputWithButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithIcon.json b/apps/www/src/public/r/styles/default/InputWithIcon.json
index 77a6e715d..491e07bdb 100644
--- a/apps/www/src/public/r/styles/default/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/default/InputWithIcon.json
@@ -13,4 +13,4 @@
       "target": "InputWithIcon.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/InputWithLabel.json b/apps/www/src/public/r/styles/default/InputWithLabel.json
index 1eaa05bf7..c59c80566 100644
--- a/apps/www/src/public/r/styles/default/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/default/InputWithLabel.json
@@ -14,4 +14,4 @@
       "target": "InputWithLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/LabelDemo.json b/apps/www/src/public/r/styles/default/LabelDemo.json
index 8770ce07b..63bfd3e67 100644
--- a/apps/www/src/public/r/styles/default/LabelDemo.json
+++ b/apps/www/src/public/r/styles/default/LabelDemo.json
@@ -14,4 +14,4 @@
       "target": "LabelDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
index 1bb7424c4..ade69861e 100644
--- a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "LineChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartDemo.json b/apps/www/src/public/r/styles/default/LineChartDemo.json
index 116bf7256..a1fa65935 100644
--- a/apps/www/src/public/r/styles/default/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/default/LineChartDemo.json
@@ -13,4 +13,4 @@
       "target": "LineChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/LineChartSparkline.json b/apps/www/src/public/r/styles/default/LineChartSparkline.json
index 4c4f86c32..66647eff8 100644
--- a/apps/www/src/public/r/styles/default/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/LineChartSparkline.json
@@ -13,4 +13,4 @@
       "target": "LineChartSparkline.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/MenubarDemo.json b/apps/www/src/public/r/styles/default/MenubarDemo.json
index dc187b4a7..a57e26996 100644
--- a/apps/www/src/public/r/styles/default/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/default/MenubarDemo.json
@@ -13,4 +13,4 @@
       "target": "MenubarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
index 62a7737a4..bfd71b479 100644
--- a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
@@ -13,4 +13,4 @@
       "target": "NavigationMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
index 9ef6bdb4e..d1de70ed8 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldCurrency.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
index 6418993f0..ec09bd0a4 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDecimal.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDemo.json b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
index 0b66a6ae2..b7541ef63 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
index d4b588b8f..7245d9825 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldForm.json b/apps/www/src/public/r/styles/default/NumberFieldForm.json
index 0f3a85b99..6b892e247 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldForm.json
@@ -20,4 +20,4 @@
       "target": "NumberFieldForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
index 48b89af53..0e46c128e 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldPercentage.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PaginationDemo.json b/apps/www/src/public/r/styles/default/PaginationDemo.json
index 12779137f..cf93fa3b7 100644
--- a/apps/www/src/public/r/styles/default/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/default/PaginationDemo.json
@@ -14,4 +14,4 @@
       "target": "PaginationDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputControlled.json b/apps/www/src/public/r/styles/default/PinInputControlled.json
index 3fdd9de5c..a36cb4efd 100644
--- a/apps/www/src/public/r/styles/default/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/default/PinInputControlled.json
@@ -13,4 +13,4 @@
       "target": "PinInputControlled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputDemo.json b/apps/www/src/public/r/styles/default/PinInputDemo.json
index c62edcb8c..c9a511848 100644
--- a/apps/www/src/public/r/styles/default/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputDemo.json
@@ -13,4 +13,4 @@
       "target": "PinInputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputDisabled.json b/apps/www/src/public/r/styles/default/PinInputDisabled.json
index 9b5a793bd..cbf0f58e5 100644
--- a/apps/www/src/public/r/styles/default/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/default/PinInputDisabled.json
@@ -13,4 +13,4 @@
       "target": "PinInputDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputFormDemo.json b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
index a4debbf58..44d9ecac0 100644
--- a/apps/www/src/public/r/styles/default/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
@@ -20,4 +20,4 @@
       "target": "PinInputFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
index 256c8a095..e8904dcd3 100644
--- a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "PinInputSeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/PopoverDemo.json b/apps/www/src/public/r/styles/default/PopoverDemo.json
index d942a5888..92d00fdba 100644
--- a/apps/www/src/public/r/styles/default/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/default/PopoverDemo.json
@@ -16,4 +16,4 @@
       "target": "PopoverDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ProgressDemo.json b/apps/www/src/public/r/styles/default/ProgressDemo.json
index 9d01a67a2..36ba4d3cf 100644
--- a/apps/www/src/public/r/styles/default/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/default/ProgressDemo.json
@@ -13,4 +13,4 @@
       "target": "ProgressDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/RadioGroupDemo.json b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
index 979dc8ba6..5c1b7840d 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
@@ -14,4 +14,4 @@
       "target": "RadioGroupDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/RadioGroupForm.json b/apps/www/src/public/r/styles/default/RadioGroupForm.json
index 4ebf495a9..2fd26b171 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupForm.json
@@ -20,4 +20,4 @@
       "target": "RadioGroupForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
index 98c09b39f..f453ce692 100644
--- a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "RangeCalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableDemo.json b/apps/www/src/public/r/styles/default/ResizableDemo.json
index 0981109b7..eb3e006c9 100644
--- a/apps/www/src/public/r/styles/default/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
index bef96cf93..a33b84e29 100644
--- a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableHandleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
index ca850a023..42b640061 100644
--- a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableVerticalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
index a705d24e7..e8b2fa4b6 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
@@ -14,4 +14,4 @@
       "target": "ScrollAreaDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
index 961737e97..57109bf05 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
@@ -13,4 +13,4 @@
       "target": "ScrollAreaHorizontalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SelectDemo.json b/apps/www/src/public/r/styles/default/SelectDemo.json
index 2e43fc0ac..4d4b699da 100644
--- a/apps/www/src/public/r/styles/default/SelectDemo.json
+++ b/apps/www/src/public/r/styles/default/SelectDemo.json
@@ -13,4 +13,4 @@
       "target": "SelectDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SelectForm.json b/apps/www/src/public/r/styles/default/SelectForm.json
index b819e8eda..464a8c0e0 100644
--- a/apps/www/src/public/r/styles/default/SelectForm.json
+++ b/apps/www/src/public/r/styles/default/SelectForm.json
@@ -20,4 +20,4 @@
       "target": "SelectForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SelectScrollable.json b/apps/www/src/public/r/styles/default/SelectScrollable.json
index 273dee224..a5da63a6f 100644
--- a/apps/www/src/public/r/styles/default/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/default/SelectScrollable.json
@@ -13,4 +13,4 @@
       "target": "SelectScrollable.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SeparatorDemo.json b/apps/www/src/public/r/styles/default/SeparatorDemo.json
index d703d65cd..07e30543c 100644
--- a/apps/www/src/public/r/styles/default/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/SeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "SeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SheetDemo.json b/apps/www/src/public/r/styles/default/SheetDemo.json
index b6e72cd02..609a9a927 100644
--- a/apps/www/src/public/r/styles/default/SheetDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetDemo.json
@@ -16,4 +16,4 @@
       "target": "SheetDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SheetSideDemo.json b/apps/www/src/public/r/styles/default/SheetSideDemo.json
index 92d882a71..8f8898694 100644
--- a/apps/www/src/public/r/styles/default/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetSideDemo.json
@@ -16,4 +16,4 @@
       "target": "SheetSideDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
new file mode 100644
index 000000000..85af65291
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -0,0 +1,20 @@
+{
+  "name": "Sidebar01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu",
+    "label",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar01/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "Sidebar01Page.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
new file mode 100644
index 000000000..aa8255a9a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -0,0 +1,21 @@
+{
+  "name": "Sidebar07",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "breadcrumb",
+    "collapsible",
+    "dropdown-menu",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar07/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "Sidebar07Page.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/SkeletonCard.json b/apps/www/src/public/r/styles/default/SkeletonCard.json
index 283ddd8a9..b4abdfe3c 100644
--- a/apps/www/src/public/r/styles/default/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/default/SkeletonCard.json
@@ -13,4 +13,4 @@
       "target": "SkeletonCard.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SkeletonDemo.json b/apps/www/src/public/r/styles/default/SkeletonDemo.json
index e46f73c67..613f32bdb 100644
--- a/apps/www/src/public/r/styles/default/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/default/SkeletonDemo.json
@@ -13,4 +13,4 @@
       "target": "SkeletonDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SliderDemo.json b/apps/www/src/public/r/styles/default/SliderDemo.json
index 33746499d..0f6ed8162 100644
--- a/apps/www/src/public/r/styles/default/SliderDemo.json
+++ b/apps/www/src/public/r/styles/default/SliderDemo.json
@@ -3,15 +3,15 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
-    "slider",
-    "utils"
+    "utils",
+    "slider"
   ],
   "files": [
     {
       "path": "example/SliderDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/default/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
       "target": "SliderDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SliderForm.json b/apps/www/src/public/r/styles/default/SliderForm.json
index d1172ec09..82cd0de83 100644
--- a/apps/www/src/public/r/styles/default/SliderForm.json
+++ b/apps/www/src/public/r/styles/default/SliderForm.json
@@ -20,4 +20,4 @@
       "target": "SliderForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SonnerDemo.json b/apps/www/src/public/r/styles/default/SonnerDemo.json
index b3bc1b32a..7bc351174 100644
--- a/apps/www/src/public/r/styles/default/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/default/SonnerDemo.json
@@ -10,9 +10,9 @@
   "files": [
     {
       "path": "example/SonnerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": "SonnerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SonnerWithDialog.json b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
index 3a00bed38..86ff9b277 100644
--- a/apps/www/src/public/r/styles/default/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
@@ -16,4 +16,4 @@
       "target": "SonnerWithDialog.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/StepperDemo.json b/apps/www/src/public/r/styles/default/StepperDemo.json
index 23c4f3d56..958abd0c4 100644
--- a/apps/www/src/public/r/styles/default/StepperDemo.json
+++ b/apps/www/src/public/r/styles/default/StepperDemo.json
@@ -13,4 +13,4 @@
       "target": "StepperDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/StepperForm.json b/apps/www/src/public/r/styles/default/StepperForm.json
index c4da6731c..c010bc1c4 100644
--- a/apps/www/src/public/r/styles/default/StepperForm.json
+++ b/apps/www/src/public/r/styles/default/StepperForm.json
@@ -18,4 +18,4 @@
       "target": "StepperForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/StepperHorizental.json b/apps/www/src/public/r/styles/default/StepperHorizental.json
index aecf71e66..2484332e4 100644
--- a/apps/www/src/public/r/styles/default/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/default/StepperHorizental.json
@@ -14,4 +14,4 @@
       "target": "StepperHorizental.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/StepperVertical.json b/apps/www/src/public/r/styles/default/StepperVertical.json
index 36fd1a087..93709f5fc 100644
--- a/apps/www/src/public/r/styles/default/StepperVertical.json
+++ b/apps/www/src/public/r/styles/default/StepperVertical.json
@@ -14,4 +14,4 @@
       "target": "StepperVertical.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SwitchDemo.json b/apps/www/src/public/r/styles/default/SwitchDemo.json
index 217b26f57..b78f675b3 100644
--- a/apps/www/src/public/r/styles/default/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/default/SwitchDemo.json
@@ -14,4 +14,4 @@
       "target": "SwitchDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/SwitchForm.json b/apps/www/src/public/r/styles/default/SwitchForm.json
index 3e156df7b..8a1ede1b9 100644
--- a/apps/www/src/public/r/styles/default/SwitchForm.json
+++ b/apps/www/src/public/r/styles/default/SwitchForm.json
@@ -20,4 +20,4 @@
       "target": "SwitchForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TableDemo.json b/apps/www/src/public/r/styles/default/TableDemo.json
index 31658c645..ee863c7c1 100644
--- a/apps/www/src/public/r/styles/default/TableDemo.json
+++ b/apps/www/src/public/r/styles/default/TableDemo.json
@@ -13,4 +13,4 @@
       "target": "TableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TabsDemo.json b/apps/www/src/public/r/styles/default/TabsDemo.json
index 75491122a..d8bc74797 100644
--- a/apps/www/src/public/r/styles/default/TabsDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsDemo.json
@@ -17,4 +17,4 @@
       "target": "TabsDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
index bed9f70eb..cd789b2cd 100644
--- a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
@@ -17,4 +17,4 @@
       "target": "TabsVerticalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
index aea6d7e87..6a8534b2e 100644
--- a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
@@ -14,4 +14,4 @@
       "target": "TagsInputComboboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputDemo.json b/apps/www/src/public/r/styles/default/TagsInputDemo.json
index 196a564a7..6818e1abf 100644
--- a/apps/www/src/public/r/styles/default/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputDemo.json
@@ -13,4 +13,4 @@
       "target": "TagsInputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
index 3db19bace..d744c9db4 100644
--- a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
@@ -20,4 +20,4 @@
       "target": "TagsInputFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaDemo.json b/apps/www/src/public/r/styles/default/TextareaDemo.json
index b20016bdc..5cbecfa88 100644
--- a/apps/www/src/public/r/styles/default/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/default/TextareaDemo.json
@@ -13,4 +13,4 @@
       "target": "TextareaDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaDisabled.json b/apps/www/src/public/r/styles/default/TextareaDisabled.json
index 1732242ee..9c148a70b 100644
--- a/apps/www/src/public/r/styles/default/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/default/TextareaDisabled.json
@@ -13,4 +13,4 @@
       "target": "TextareaDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaForm.json b/apps/www/src/public/r/styles/default/TextareaForm.json
index 6162a213d..64b757357 100644
--- a/apps/www/src/public/r/styles/default/TextareaForm.json
+++ b/apps/www/src/public/r/styles/default/TextareaForm.json
@@ -20,4 +20,4 @@
       "target": "TextareaForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithButton.json b/apps/www/src/public/r/styles/default/TextareaWithButton.json
index d6f3a79e7..4001677eb 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithButton.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithLabel.json b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
index 716cd2303..8cc8bfa54 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TextareaWithText.json b/apps/www/src/public/r/styles/default/TextareaWithText.json
index 016de0197..faafeec81 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithText.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithText.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToastDemo.json b/apps/www/src/public/r/styles/default/ToastDemo.json
index 427fb8696..357990a7d 100644
--- a/apps/www/src/public/r/styles/default/ToastDemo.json
+++ b/apps/www/src/public/r/styles/default/ToastDemo.json
@@ -14,4 +14,4 @@
       "target": "ToastDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToastDestructive.json b/apps/www/src/public/r/styles/default/ToastDestructive.json
index 85330fee0..cb8e6a496 100644
--- a/apps/www/src/public/r/styles/default/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/default/ToastDestructive.json
@@ -15,4 +15,4 @@
       "target": "ToastDestructive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToastSimple.json b/apps/www/src/public/r/styles/default/ToastSimple.json
index 7dfe0b1c3..e5664275c 100644
--- a/apps/www/src/public/r/styles/default/ToastSimple.json
+++ b/apps/www/src/public/r/styles/default/ToastSimple.json
@@ -14,4 +14,4 @@
       "target": "ToastSimple.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToastWithAction.json b/apps/www/src/public/r/styles/default/ToastWithAction.json
index 35d55e967..24580e1f8 100644
--- a/apps/www/src/public/r/styles/default/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/default/ToastWithAction.json
@@ -15,4 +15,4 @@
       "target": "ToastWithAction.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToastWithTitle.json b/apps/www/src/public/r/styles/default/ToastWithTitle.json
index 4ab908a5f..f7bb9562e 100644
--- a/apps/www/src/public/r/styles/default/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/default/ToastWithTitle.json
@@ -14,4 +14,4 @@
       "target": "ToastWithTitle.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleDemo.json b/apps/www/src/public/r/styles/default/ToggleDemo.json
index e8c628d4d..c90c73197 100644
--- a/apps/www/src/public/r/styles/default/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
index 29dfe032f..70809381a 100644
--- a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleDisabledDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
index 5f3f63733..79cbfd09c 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
index 5f425b765..6e6818a59 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupDisabledDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
index c1a629eef..86e88b492 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupLargeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
index bcc043cdb..e49a11d5c 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
index 8a5afdda0..ce09688a7 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupSingleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
index 3c7a1d9bf..31de53f8e 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupSmallDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
index f257893cd..1db3b49b2 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleItalicDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
index b6207f8be..2bc3c99ec 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleItalicWithTextDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
index a151a0741..aee4f4c7b 100644
--- a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleLargeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
index 095e5cbfc..d43603b11 100644
--- a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleSmallDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TooltipDemo.json b/apps/www/src/public/r/styles/default/TooltipDemo.json
index d9104bb4b..083ba344a 100644
--- a/apps/www/src/public/r/styles/default/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/default/TooltipDemo.json
@@ -14,4 +14,4 @@
       "target": "TooltipDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyBlockquote.json b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
index c29800cd3..9819d203c 100644
--- a/apps/www/src/public/r/styles/default/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
@@ -11,4 +11,4 @@
       "target": "TypographyBlockquote.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyDemo.json b/apps/www/src/public/r/styles/default/TypographyDemo.json
index 0bc3f1afc..7dc911d6b 100644
--- a/apps/www/src/public/r/styles/default/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/default/TypographyDemo.json
@@ -11,4 +11,4 @@
       "target": "TypographyDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH1.json b/apps/www/src/public/r/styles/default/TypographyH1.json
index e2135d497..4688e1d9b 100644
--- a/apps/www/src/public/r/styles/default/TypographyH1.json
+++ b/apps/www/src/public/r/styles/default/TypographyH1.json
@@ -11,4 +11,4 @@
       "target": "TypographyH1.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH2.json b/apps/www/src/public/r/styles/default/TypographyH2.json
index 3c5a8a96e..50d1467bf 100644
--- a/apps/www/src/public/r/styles/default/TypographyH2.json
+++ b/apps/www/src/public/r/styles/default/TypographyH2.json
@@ -11,4 +11,4 @@
       "target": "TypographyH2.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH3.json b/apps/www/src/public/r/styles/default/TypographyH3.json
index 2e029d96b..3819ad2a7 100644
--- a/apps/www/src/public/r/styles/default/TypographyH3.json
+++ b/apps/www/src/public/r/styles/default/TypographyH3.json
@@ -11,4 +11,4 @@
       "target": "TypographyH3.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyH4.json b/apps/www/src/public/r/styles/default/TypographyH4.json
index f47a94348..72b7f9a0b 100644
--- a/apps/www/src/public/r/styles/default/TypographyH4.json
+++ b/apps/www/src/public/r/styles/default/TypographyH4.json
@@ -11,4 +11,4 @@
       "target": "TypographyH4.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyInlineCode.json b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
index 502a19eda..70a6eb50b 100644
--- a/apps/www/src/public/r/styles/default/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
@@ -11,4 +11,4 @@
       "target": "TypographyInlineCode.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyLarge.json b/apps/www/src/public/r/styles/default/TypographyLarge.json
index cf38db41b..d0d2febcd 100644
--- a/apps/www/src/public/r/styles/default/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/default/TypographyLarge.json
@@ -11,4 +11,4 @@
       "target": "TypographyLarge.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyLead.json b/apps/www/src/public/r/styles/default/TypographyLead.json
index 9855ec437..40e1b5bb7 100644
--- a/apps/www/src/public/r/styles/default/TypographyLead.json
+++ b/apps/www/src/public/r/styles/default/TypographyLead.json
@@ -11,4 +11,4 @@
       "target": "TypographyLead.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyList.json b/apps/www/src/public/r/styles/default/TypographyList.json
index e08f0a71f..6d20c56b5 100644
--- a/apps/www/src/public/r/styles/default/TypographyList.json
+++ b/apps/www/src/public/r/styles/default/TypographyList.json
@@ -11,4 +11,4 @@
       "target": "TypographyList.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyMuted.json b/apps/www/src/public/r/styles/default/TypographyMuted.json
index 358a61d4f..5a5beda40 100644
--- a/apps/www/src/public/r/styles/default/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/default/TypographyMuted.json
@@ -11,4 +11,4 @@
       "target": "TypographyMuted.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyP.json b/apps/www/src/public/r/styles/default/TypographyP.json
index b2157b831..cb7406559 100644
--- a/apps/www/src/public/r/styles/default/TypographyP.json
+++ b/apps/www/src/public/r/styles/default/TypographyP.json
@@ -11,4 +11,4 @@
       "target": "TypographyP.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographySmall.json b/apps/www/src/public/r/styles/default/TypographySmall.json
index 96f2819a3..1ec9e7cfe 100644
--- a/apps/www/src/public/r/styles/default/TypographySmall.json
+++ b/apps/www/src/public/r/styles/default/TypographySmall.json
@@ -11,4 +11,4 @@
       "target": "TypographySmall.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/TypographyTable.json b/apps/www/src/public/r/styles/default/TypographyTable.json
index a206d765f..69146da49 100644
--- a/apps/www/src/public/r/styles/default/TypographyTable.json
+++ b/apps/www/src/public/r/styles/default/TypographyTable.json
@@ -11,4 +11,4 @@
       "target": "TypographyTable.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
index acc7a192b..b490b0988 100644
--- a/apps/www/src/public/r/styles/default/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/VCalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "VCalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
index 76146dfcf..4a04ec4ab 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
index 16e5658fa..bf9329f08 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "form",
     "popover",
     "toast",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
index 1e688cdf6..6619fd89e 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
@@ -3,18 +3,18 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
     "select",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerWithPresets.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
index c9ddc2019..eb48ccc21 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerWithRange.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
index ce008d18a..2db2beabb 100644
--- a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDateTimePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
index 0242e6b46..cffdfca8b 100644
--- a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "VRangePickerWithSlot.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/accordion.json b/apps/www/src/public/r/styles/default/accordion.json
index a14f5fd59..08dd71528 100644
--- a/apps/www/src/public/r/styles/default/accordion.json
+++ b/apps/www/src/public/r/styles/default/accordion.json
@@ -37,4 +37,4 @@
       "target": "accordion/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/alert-dialog.json b/apps/www/src/public/r/styles/default/alert-dialog.json
index ff72041d8..fc87d419f 100644
--- a/apps/www/src/public/r/styles/default/alert-dialog.json
+++ b/apps/www/src/public/r/styles/default/alert-dialog.json
@@ -3,8 +3,8 @@
   "type": "registry:ui",
   "dependencies": [],
   "registryDependencies": [
-    "button",
-    "utils"
+    "utils",
+    "button"
   ],
   "files": [
     {
@@ -15,13 +15,13 @@
     },
     {
       "path": "ui/alert-dialog/AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
       "type": "registry:ui",
       "target": "alert-dialog/AlertDialogAction.vue"
     },
     {
       "path": "ui/alert-dialog/AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
       "type": "registry:ui",
       "target": "alert-dialog/AlertDialogCancel.vue"
     },
@@ -68,4 +68,4 @@
       "target": "alert-dialog/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/alert.json b/apps/www/src/public/r/styles/default/alert.json
index 723cae1ff..c3d581e0e 100644
--- a/apps/www/src/public/r/styles/default/alert.json
+++ b/apps/www/src/public/r/styles/default/alert.json
@@ -31,4 +31,4 @@
       "target": "alert/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/aspect-ratio.json b/apps/www/src/public/r/styles/default/aspect-ratio.json
index e770dca61..97080b06e 100644
--- a/apps/www/src/public/r/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/default/aspect-ratio.json
@@ -17,4 +17,4 @@
       "target": "aspect-ratio/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/auto-form.json b/apps/www/src/public/r/styles/default/auto-form.json
index f33df9a55..dbf096b39 100644
--- a/apps/www/src/public/r/styles/default/auto-form.json
+++ b/apps/www/src/public/r/styles/default/auto-form.json
@@ -13,9 +13,9 @@
     "separator",
     "checkbox",
     "switch",
+    "utils",
     "calendar",
     "popover",
-    "utils",
     "label",
     "radio-group",
     "select",
@@ -49,7 +49,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": "auto-form/AutoFormFieldDate.vue"
     },
@@ -120,4 +120,4 @@
       "target": "auto-form/utils.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/avatar.json b/apps/www/src/public/r/styles/default/avatar.json
index f22212d4b..454a63643 100644
--- a/apps/www/src/public/r/styles/default/avatar.json
+++ b/apps/www/src/public/r/styles/default/avatar.json
@@ -31,4 +31,4 @@
       "target": "avatar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/badge.json b/apps/www/src/public/r/styles/default/badge.json
index 5bb6f4769..28c2597b4 100644
--- a/apps/www/src/public/r/styles/default/badge.json
+++ b/apps/www/src/public/r/styles/default/badge.json
@@ -19,4 +19,4 @@
       "target": "badge/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/breadcrumb.json b/apps/www/src/public/r/styles/default/breadcrumb.json
index 1c7cfeb5c..0807b031b 100644
--- a/apps/www/src/public/r/styles/default/breadcrumb.json
+++ b/apps/www/src/public/r/styles/default/breadcrumb.json
@@ -55,4 +55,4 @@
       "target": "breadcrumb/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/button.json b/apps/www/src/public/r/styles/default/button.json
index 5e3296fc0..5e4dad92a 100644
--- a/apps/www/src/public/r/styles/default/button.json
+++ b/apps/www/src/public/r/styles/default/button.json
@@ -19,4 +19,4 @@
       "target": "button/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/calendar.json b/apps/www/src/public/r/styles/default/calendar.json
index 298a24c01..b1baaec3f 100644
--- a/apps/www/src/public/r/styles/default/calendar.json
+++ b/apps/www/src/public/r/styles/default/calendar.json
@@ -21,7 +21,7 @@
     },
     {
       "path": "ui/calendar/CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarCellTrigger.vue"
     },
@@ -69,13 +69,13 @@
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarNextButton.vue"
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarPrevButton.vue"
     },
@@ -86,4 +86,4 @@
       "target": "calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/card.json b/apps/www/src/public/r/styles/default/card.json
index 6125c05cd..0ad806880 100644
--- a/apps/www/src/public/r/styles/default/card.json
+++ b/apps/www/src/public/r/styles/default/card.json
@@ -49,4 +49,4 @@
       "target": "card/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/carousel.json b/apps/www/src/public/r/styles/default/carousel.json
index 698e406b9..1631d6e79 100644
--- a/apps/www/src/public/r/styles/default/carousel.json
+++ b/apps/www/src/public/r/styles/default/carousel.json
@@ -30,13 +30,13 @@
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "carousel/CarouselNext.vue"
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "carousel/CarouselPrevious.vue"
     },
@@ -59,4 +59,4 @@
       "target": "carousel/useCarousel.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/chart-area.json b/apps/www/src/public/r/styles/default/chart-area.json
index 684764e42..54bd968fe 100644
--- a/apps/www/src/public/r/styles/default/chart-area.json
+++ b/apps/www/src/public/r/styles/default/chart-area.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-area/AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-area/AreaChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-area/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/chart-bar.json b/apps/www/src/public/r/styles/default/chart-bar.json
index 9520ac61a..49208bd31 100644
--- a/apps/www/src/public/r/styles/default/chart-bar.json
+++ b/apps/www/src/public/r/styles/default/chart-bar.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-bar/BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-bar/BarChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-bar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/chart-donut.json b/apps/www/src/public/r/styles/default/chart-donut.json
index 983bee5c7..cfe68abf8 100644
--- a/apps/www/src/public/r/styles/default/chart-donut.json
+++ b/apps/www/src/public/r/styles/default/chart-donut.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-donut/DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-donut/DonutChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-donut/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/chart-line.json b/apps/www/src/public/r/styles/default/chart-line.json
index 05c701d39..8047ed988 100644
--- a/apps/www/src/public/r/styles/default/chart-line.json
+++ b/apps/www/src/public/r/styles/default/chart-line.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-line/LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-line/LineChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-line/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/chart.json b/apps/www/src/public/r/styles/default/chart.json
index e396d770b..3b6fb98cd 100644
--- a/apps/www/src/public/r/styles/default/chart.json
+++ b/apps/www/src/public/r/styles/default/chart.json
@@ -47,4 +47,4 @@
       "target": "chart/interface.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/checkbox.json b/apps/www/src/public/r/styles/default/checkbox.json
index 09fb20ce6..aa676ea91 100644
--- a/apps/www/src/public/r/styles/default/checkbox.json
+++ b/apps/www/src/public/r/styles/default/checkbox.json
@@ -19,4 +19,4 @@
       "target": "checkbox/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/collapsible.json b/apps/www/src/public/r/styles/default/collapsible.json
index ebc478113..43003ad3c 100644
--- a/apps/www/src/public/r/styles/default/collapsible.json
+++ b/apps/www/src/public/r/styles/default/collapsible.json
@@ -29,4 +29,4 @@
       "target": "collapsible/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/command.json b/apps/www/src/public/r/styles/default/command.json
index 116af75c8..664656cb0 100644
--- a/apps/www/src/public/r/styles/default/command.json
+++ b/apps/www/src/public/r/styles/default/command.json
@@ -68,4 +68,4 @@
       "target": "command/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/context-menu.json b/apps/www/src/public/r/styles/default/context-menu.json
index 6b1a25baf..a06ceed07 100644
--- a/apps/www/src/public/r/styles/default/context-menu.json
+++ b/apps/www/src/public/r/styles/default/context-menu.json
@@ -103,4 +103,4 @@
       "target": "context-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/dialog.json b/apps/www/src/public/r/styles/default/dialog.json
index cf0936544..dbeb74f3a 100644
--- a/apps/www/src/public/r/styles/default/dialog.json
+++ b/apps/www/src/public/r/styles/default/dialog.json
@@ -67,4 +67,4 @@
       "target": "dialog/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/drawer.json b/apps/www/src/public/r/styles/default/drawer.json
index cefdf8418..31faeb6e3 100644
--- a/apps/www/src/public/r/styles/default/drawer.json
+++ b/apps/www/src/public/r/styles/default/drawer.json
@@ -57,4 +57,4 @@
       "target": "drawer/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/dropdown-menu.json b/apps/www/src/public/r/styles/default/dropdown-menu.json
index 7f5a215ba..51ba28ecf 100644
--- a/apps/www/src/public/r/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/default/dropdown-menu.json
@@ -97,4 +97,4 @@
       "target": "dropdown-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/form.json b/apps/www/src/public/r/styles/default/form.json
index ddec56558..b948dcf13 100644
--- a/apps/www/src/public/r/styles/default/form.json
+++ b/apps/www/src/public/r/styles/default/form.json
@@ -31,7 +31,7 @@
     },
     {
       "path": "ui/form/FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/default/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
       "target": "form/FormLabel.vue"
     },
@@ -60,4 +60,4 @@
       "target": "form/useFormField.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/hover-card.json b/apps/www/src/public/r/styles/default/hover-card.json
index 0f32ccf99..90eda7444 100644
--- a/apps/www/src/public/r/styles/default/hover-card.json
+++ b/apps/www/src/public/r/styles/default/hover-card.json
@@ -31,4 +31,4 @@
       "target": "hover-card/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/index.json b/apps/www/src/public/r/styles/default/index.json
index 272020210..cfc8b34e6 100644
--- a/apps/www/src/public/r/styles/default/index.json
+++ b/apps/www/src/public/r/styles/default/index.json
@@ -4,7 +4,7 @@
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "utils"
diff --git a/apps/www/src/public/r/styles/default/input.json b/apps/www/src/public/r/styles/default/input.json
index 509abdc2f..5c69b4886 100644
--- a/apps/www/src/public/r/styles/default/input.json
+++ b/apps/www/src/public/r/styles/default/input.json
@@ -21,4 +21,4 @@
       "target": "input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/label.json b/apps/www/src/public/r/styles/default/label.json
index 447ee607b..839718f1f 100644
--- a/apps/www/src/public/r/styles/default/label.json
+++ b/apps/www/src/public/r/styles/default/label.json
@@ -19,4 +19,4 @@
       "target": "label/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/menubar.json b/apps/www/src/public/r/styles/default/menubar.json
index 4ceaa3b80..9d550a1f9 100644
--- a/apps/www/src/public/r/styles/default/menubar.json
+++ b/apps/www/src/public/r/styles/default/menubar.json
@@ -103,4 +103,4 @@
       "target": "menubar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/navigation-menu.json b/apps/www/src/public/r/styles/default/navigation-menu.json
index 345cca4e3..3d7ea69ca 100644
--- a/apps/www/src/public/r/styles/default/navigation-menu.json
+++ b/apps/www/src/public/r/styles/default/navigation-menu.json
@@ -61,4 +61,4 @@
       "target": "navigation-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/number-field.json b/apps/www/src/public/r/styles/default/number-field.json
index 582a9f18c..0413588a3 100644
--- a/apps/www/src/public/r/styles/default/number-field.json
+++ b/apps/www/src/public/r/styles/default/number-field.json
@@ -43,4 +43,4 @@
       "target": "number-field/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/pagination.json b/apps/www/src/public/r/styles/default/pagination.json
index f71d59ede..43cd31373 100644
--- a/apps/www/src/public/r/styles/default/pagination.json
+++ b/apps/www/src/public/r/styles/default/pagination.json
@@ -15,25 +15,25 @@
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationFirst.vue"
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationLast.vue"
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationNext.vue"
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationPrev.vue"
     },
@@ -44,4 +44,4 @@
       "target": "pagination/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/pin-input.json b/apps/www/src/public/r/styles/default/pin-input.json
index 0b4c000d1..880e4d534 100644
--- a/apps/www/src/public/r/styles/default/pin-input.json
+++ b/apps/www/src/public/r/styles/default/pin-input.json
@@ -37,4 +37,4 @@
       "target": "pin-input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/popover.json b/apps/www/src/public/r/styles/default/popover.json
index 27529b24d..e38b8ce56 100644
--- a/apps/www/src/public/r/styles/default/popover.json
+++ b/apps/www/src/public/r/styles/default/popover.json
@@ -31,4 +31,4 @@
       "target": "popover/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/progress.json b/apps/www/src/public/r/styles/default/progress.json
index 8731ac316..4d52d771a 100644
--- a/apps/www/src/public/r/styles/default/progress.json
+++ b/apps/www/src/public/r/styles/default/progress.json
@@ -19,4 +19,4 @@
       "target": "progress/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/radio-group.json b/apps/www/src/public/r/styles/default/radio-group.json
index b196176c0..a64552baa 100644
--- a/apps/www/src/public/r/styles/default/radio-group.json
+++ b/apps/www/src/public/r/styles/default/radio-group.json
@@ -25,4 +25,4 @@
       "target": "radio-group/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/range-calendar.json b/apps/www/src/public/r/styles/default/range-calendar.json
index cff986fd1..88bf8e25f 100644
--- a/apps/www/src/public/r/styles/default/range-calendar.json
+++ b/apps/www/src/public/r/styles/default/range-calendar.json
@@ -21,7 +21,7 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarCellTrigger.vue"
     },
@@ -69,13 +69,13 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarNextButton.vue"
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarPrevButton.vue"
     },
@@ -86,4 +86,4 @@
       "target": "range-calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/resizable.json b/apps/www/src/public/r/styles/default/resizable.json
index dadc0770e..6b165949f 100644
--- a/apps/www/src/public/r/styles/default/resizable.json
+++ b/apps/www/src/public/r/styles/default/resizable.json
@@ -25,4 +25,4 @@
       "target": "resizable/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/scroll-area.json b/apps/www/src/public/r/styles/default/scroll-area.json
index 3f38eae3f..f3cbbe4b7 100644
--- a/apps/www/src/public/r/styles/default/scroll-area.json
+++ b/apps/www/src/public/r/styles/default/scroll-area.json
@@ -25,4 +25,4 @@
       "target": "scroll-area/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/select.json b/apps/www/src/public/r/styles/default/select.json
index cfc6ae646..88f02a6f0 100644
--- a/apps/www/src/public/r/styles/default/select.json
+++ b/apps/www/src/public/r/styles/default/select.json
@@ -79,4 +79,4 @@
       "target": "select/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/separator.json b/apps/www/src/public/r/styles/default/separator.json
index 602e568f3..bc1e11aa5 100644
--- a/apps/www/src/public/r/styles/default/separator.json
+++ b/apps/www/src/public/r/styles/default/separator.json
@@ -19,4 +19,4 @@
       "target": "separator/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/sheet.json b/apps/www/src/public/r/styles/default/sheet.json
index 25ce1bfb2..ed21bc795 100644
--- a/apps/www/src/public/r/styles/default/sheet.json
+++ b/apps/www/src/public/r/styles/default/sheet.json
@@ -61,4 +61,4 @@
       "target": "sheet/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index 4b368e0eb..82cd655c9 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -5,9 +5,9 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
+    "utils",
     "Sheet.vue",
     "SheetContent.vue",
-    "utils",
     "Input.vue",
     "Tooltip.vue",
     "TooltipContent.vue",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +67,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -115,7 +115,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +151,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
@@ -174,4 +174,4 @@
       "target": "sidebar/utils.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/skeleton.json b/apps/www/src/public/r/styles/default/skeleton.json
index 690cc5ade..abf64aef3 100644
--- a/apps/www/src/public/r/styles/default/skeleton.json
+++ b/apps/www/src/public/r/styles/default/skeleton.json
@@ -19,4 +19,4 @@
       "target": "skeleton/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/slider.json b/apps/www/src/public/r/styles/default/slider.json
index aa526172f..0201c0191 100644
--- a/apps/www/src/public/r/styles/default/slider.json
+++ b/apps/www/src/public/r/styles/default/slider.json
@@ -19,4 +19,4 @@
       "target": "slider/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/sonner.json b/apps/www/src/public/r/styles/default/sonner.json
index c0c4d6cbf..4dfc04d8b 100644
--- a/apps/www/src/public/r/styles/default/sonner.json
+++ b/apps/www/src/public/r/styles/default/sonner.json
@@ -19,4 +19,4 @@
       "target": "sonner/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/stepper.json b/apps/www/src/public/r/styles/default/stepper.json
index 7dbbbba90..3ab451f16 100644
--- a/apps/www/src/public/r/styles/default/stepper.json
+++ b/apps/www/src/public/r/styles/default/stepper.json
@@ -55,4 +55,4 @@
       "target": "stepper/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/switch.json b/apps/www/src/public/r/styles/default/switch.json
index 8aaf54fbc..9898c3997 100644
--- a/apps/www/src/public/r/styles/default/switch.json
+++ b/apps/www/src/public/r/styles/default/switch.json
@@ -19,4 +19,4 @@
       "target": "switch/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/table.json b/apps/www/src/public/r/styles/default/table.json
index 0aff8b52e..5225660f5 100644
--- a/apps/www/src/public/r/styles/default/table.json
+++ b/apps/www/src/public/r/styles/default/table.json
@@ -67,4 +67,4 @@
       "target": "table/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/tabs.json b/apps/www/src/public/r/styles/default/tabs.json
index 9a0f80327..b0351aa1c 100644
--- a/apps/www/src/public/r/styles/default/tabs.json
+++ b/apps/www/src/public/r/styles/default/tabs.json
@@ -37,4 +37,4 @@
       "target": "tabs/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/tags-input.json b/apps/www/src/public/r/styles/default/tags-input.json
index 085e595b2..a3936cd38 100644
--- a/apps/www/src/public/r/styles/default/tags-input.json
+++ b/apps/www/src/public/r/styles/default/tags-input.json
@@ -43,4 +43,4 @@
       "target": "tags-input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/textarea.json b/apps/www/src/public/r/styles/default/textarea.json
index 13cf01d29..eab8d994e 100644
--- a/apps/www/src/public/r/styles/default/textarea.json
+++ b/apps/www/src/public/r/styles/default/textarea.json
@@ -21,4 +21,4 @@
       "target": "textarea/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/theme-daylight.json b/apps/www/src/public/r/styles/default/theme-daylight.json
index 0626993e4..5b6c0f36d 100644
--- a/apps/www/src/public/r/styles/default/theme-daylight.json
+++ b/apps/www/src/public/r/styles/default/theme-daylight.json
@@ -55,4 +55,4 @@
       "chart-5": "35 43% 53%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/default/theme-emerald.json b/apps/www/src/public/r/styles/default/theme-emerald.json
index 7160d552c..428bd1425 100644
--- a/apps/www/src/public/r/styles/default/theme-emerald.json
+++ b/apps/www/src/public/r/styles/default/theme-emerald.json
@@ -55,4 +55,4 @@
       "chart-5": "141 40% 9%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/default/theme-midnight.json b/apps/www/src/public/r/styles/default/theme-midnight.json
index 7cd62f243..e5db55577 100644
--- a/apps/www/src/public/r/styles/default/theme-midnight.json
+++ b/apps/www/src/public/r/styles/default/theme-midnight.json
@@ -55,4 +55,4 @@
       "chart-5": "240 2% 26%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/default/toast.json b/apps/www/src/public/r/styles/default/toast.json
index d9a95c08e..772187f50 100644
--- a/apps/www/src/public/r/styles/default/toast.json
+++ b/apps/www/src/public/r/styles/default/toast.json
@@ -67,4 +67,4 @@
       "target": "toast/use-toast.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/toggle-group.json b/apps/www/src/public/r/styles/default/toggle-group.json
index 34c68d07f..6338eb2fb 100644
--- a/apps/www/src/public/r/styles/default/toggle-group.json
+++ b/apps/www/src/public/r/styles/default/toggle-group.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/toggle-group/ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
       "type": "registry:ui",
       "target": "toggle-group/ToggleGroupItem.vue"
     },
@@ -26,4 +26,4 @@
       "target": "toggle-group/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
index 334977fa0..7727f5d59 100644
--- a/apps/www/src/public/r/styles/default/toggle.json
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -19,4 +19,4 @@
       "target": "toggle/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/tooltip.json b/apps/www/src/public/r/styles/default/tooltip.json
index 24feaa5c0..01ebfbc1d 100644
--- a/apps/www/src/public/r/styles/default/tooltip.json
+++ b/apps/www/src/public/r/styles/default/tooltip.json
@@ -37,4 +37,4 @@
       "target": "tooltip/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/utils.json b/apps/www/src/public/r/styles/default/utils.json
index 96d3ac6e3..d6b06fed2 100644
--- a/apps/www/src/public/r/styles/default/utils.json
+++ b/apps/www/src/public/r/styles/default/utils.json
@@ -13,4 +13,4 @@
       "target": ""
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/default/v-calendar.json b/apps/www/src/public/r/styles/default/v-calendar.json
index a666b21f6..df70fdc77 100644
--- a/apps/www/src/public/r/styles/default/v-calendar.json
+++ b/apps/www/src/public/r/styles/default/v-calendar.json
@@ -6,13 +6,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "button",
-    "utils"
+    "utils",
+    "button"
   ],
   "files": [
     {
       "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
       "type": "registry:ui",
       "target": "v-calendar/Calendar.vue"
     },
@@ -23,4 +23,4 @@
       "target": "v-calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AccordionDemo.json b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
index 31ad2d326..fc7460cfc 100644
--- a/apps/www/src/public/r/styles/new-york/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
@@ -13,4 +13,4 @@
       "target": "AccordionDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDemo.json b/apps/www/src/public/r/styles/new-york/AlertDemo.json
index c01f5e941..1818c5cec 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDemo.json
@@ -13,4 +13,4 @@
       "target": "AlertDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
index f0946ce19..829d78d94 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "AlertDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
index 3782e22a9..0e8dfff6c 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
@@ -14,4 +14,4 @@
       "target": "AlertDialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
index 6aabaea4c..c1042e33d 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "AreaChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
index 60436de7a..b7b4121eb 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
@@ -13,4 +13,4 @@
       "target": "AreaChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
index 2b62dea02..ceef96995 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
@@ -13,4 +13,4 @@
       "target": "AreaChartSparkline.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
index 49787e14f..bac768042 100644
--- a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
@@ -13,4 +13,4 @@
       "target": "AspectRatioDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication01.json b/apps/www/src/public/r/styles/new-york/Authentication01.json
index 4eb8ac5ff..87f2675ad 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication01.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication01.json
@@ -2,6 +2,18 @@
   "name": "Authentication01",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication01.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication01.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication02.json b/apps/www/src/public/r/styles/new-york/Authentication02.json
index dd2c2f64c..79773353e 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication02.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication02.json
@@ -2,6 +2,18 @@
   "name": "Authentication02",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication02.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication02.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication03.json b/apps/www/src/public/r/styles/new-york/Authentication03.json
index d14c95e5d..fc4fe797f 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication03.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication03.json
@@ -2,6 +2,18 @@
   "name": "Authentication03",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication03.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication03.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Authentication04.json b/apps/www/src/public/r/styles/new-york/Authentication04.json
index a8fec2ac8..4a40f8721 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication04.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication04.json
@@ -2,6 +2,17 @@
   "name": "Authentication04",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Authentication04.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Authentication04.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormApi.json b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
index 68b406b76..163f480b1 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
@@ -15,4 +15,4 @@
       "target": "AutoFormApi.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormArray.json b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
index f881357ab..a7a0b40f4 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
@@ -15,4 +15,4 @@
       "target": "AutoFormArray.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
index 03c00575d..f5aec7700 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
@@ -15,4 +15,4 @@
       "target": "AutoFormBasic.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
index e683c8faa..f342e8605 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
@@ -15,4 +15,4 @@
       "target": "AutoFormConfirmPassword.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
index 0ec09df7d..56f2a4fb0 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
@@ -19,4 +19,4 @@
       "target": "AutoFormControlled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
index 9e95a474c..62ffcbf33 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
@@ -15,4 +15,4 @@
       "target": "AutoFormDependencies.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
index c799d755a..9ef746a11 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
@@ -15,4 +15,4 @@
       "target": "AutoFormInputWithoutLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
index bd26cc540..658cc8db6 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
@@ -15,4 +15,4 @@
       "target": "AutoFormSubObject.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/AvatarDemo.json b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
index b610d897b..da66e5747 100644
--- a/apps/www/src/public/r/styles/new-york/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
@@ -13,4 +13,4 @@
       "target": "AvatarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
index 4b8a70c4a..02754d1e6 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
index 39ca72d8b..c7e89d23d 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
index 4a039a793..bf6647a21 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
index 0f845ba48..73d091c4e 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
@@ -13,4 +13,4 @@
       "target": "BadgeSecondaryDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
index b14cdc211..c04e4028f 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "BarChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartDemo.json b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
index 3d5540e3b..b20a4648b 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
@@ -13,4 +13,4 @@
       "target": "BarChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartRounded.json b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
index a4bc0f4b6..17a37ac37 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
@@ -13,4 +13,4 @@
       "target": "BarChartRounded.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BarChartStacked.json b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
index 7583fa333..25d407d2f 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
@@ -13,4 +13,4 @@
       "target": "BarChartStacked.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
index bc468941c..50b5b443f 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
@@ -14,4 +14,4 @@
       "target": "BreadcrumbDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index 11e539f79..7f65da64a 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -14,4 +14,4 @@
       "target": "BreadcrumbDropdown.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
index 1bda540bf..361dfb46c 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbEllipsisDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
index 5a221cc40..0f23025fd 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbLinkDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
index 562d0e6cc..f7e634f87 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
@@ -18,4 +18,4 @@
       "target": "BreadcrumbResponsive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
index 299bb950a..b40f1e2c7 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "BreadcrumbSeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
index 4aee58713..6c5bba886 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonAsChildDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
index 5ac965814..03fc37fee 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
index d8e24de44..d6bdd34be 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonDestructiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
index 6587d41e6..6c11d1d6b 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonGhostDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
index 8983a3bd8..3574402f2 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonIconDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
index 63574014d..a0760893b 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonLinkDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
index 45883228c..95afd90c0 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonLoadingDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
index 5de7cc072..408e64077 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
index e4311779f..2f72c751e 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonSecondaryDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
index 0a9a9b59e..48aaa6d06 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
@@ -13,4 +13,4 @@
       "target": "ButtonWithIconDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarDemo.json b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
index 4fe3505a8..67094f7f2 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "CalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarForm.json b/apps/www/src/public/r/styles/new-york/CalendarForm.json
index d580928f0..c1cb14eea 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarForm.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/CalendarForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "CalendarForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
index b1a96b185..943221cd7 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
@@ -5,16 +5,16 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
+    "utils",
     "calendar",
-    "select",
-    "utils"
+    "select"
   ],
   "files": [
     {
       "path": "example/CalendarWithSelect.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
       "target": "CalendarWithSelect.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardChat.json b/apps/www/src/public/r/styles/new-york/CardChat.json
index 73d94d7f8..d4ab81a2d 100644
--- a/apps/www/src/public/r/styles/new-york/CardChat.json
+++ b/apps/www/src/public/r/styles/new-york/CardChat.json
@@ -3,21 +3,21 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "avatar",
     "button",
     "card",
     "command",
     "dialog",
     "input",
-    "tooltip",
-    "utils"
+    "tooltip"
   ],
   "files": [
     {
       "path": "example/CardChat.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
       "target": "CardChat.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardDemo.json b/apps/www/src/public/r/styles/new-york/CardDemo.json
index 1babf6cb2..a3a48c543 100644
--- a/apps/www/src/public/r/styles/new-york/CardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "card",
-    "switch",
-    "utils"
+    "switch"
   ],
   "files": [
     {
       "path": "example/CardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
       "target": "CardDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardFormDemo.json b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
index b7a50e181..4ef325176 100644
--- a/apps/www/src/public/r/styles/new-york/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
@@ -17,4 +17,4 @@
       "target": "CardFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardStats.json b/apps/www/src/public/r/styles/new-york/CardStats.json
index eb2c28083..5f3a947b8 100644
--- a/apps/www/src/public/r/styles/new-york/CardStats.json
+++ b/apps/www/src/public/r/styles/new-york/CardStats.json
@@ -18,4 +18,4 @@
       "target": "CardStats.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CardWithForm.json b/apps/www/src/public/r/styles/new-york/CardWithForm.json
index 8c5902d01..0e4d1a2b4 100644
--- a/apps/www/src/public/r/styles/new-york/CardWithForm.json
+++ b/apps/www/src/public/r/styles/new-york/CardWithForm.json
@@ -17,4 +17,4 @@
       "target": "CardWithForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselApi.json b/apps/www/src/public/r/styles/new-york/CarouselApi.json
index 47aeaf653..fdc029b06 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselApi.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselApi.json
@@ -16,4 +16,4 @@
       "target": "CarouselApi.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselDemo.json b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
index 3df97eae2..bd1a3a28d 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
@@ -14,4 +14,4 @@
       "target": "CarouselDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
index ed15459b6..665d43d85 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
@@ -14,4 +14,4 @@
       "target": "CarouselOrientation.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
index e25b6d85b..7f57329fb 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
@@ -14,4 +14,4 @@
       "target": "CarouselPlugin.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSize.json b/apps/www/src/public/r/styles/new-york/CarouselSize.json
index 33f909180..393af4ec2 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSize.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSize.json
@@ -14,4 +14,4 @@
       "target": "CarouselSize.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
index 164315bc4..ae36ba5a8 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
@@ -14,4 +14,4 @@
       "target": "CarouselSpacing.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
index 718e6d30a..8f561d5f5 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
@@ -16,4 +16,4 @@
       "target": "CarouselThumbnails.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
index 78b3ed8c3..fd6e2f97c 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
@@ -13,4 +13,4 @@
       "target": "CheckboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
index f0e48a13a..ce94c014f 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
@@ -13,4 +13,4 @@
       "target": "CheckboxDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
index 91162fbac..4a47b62c4 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
@@ -20,4 +20,4 @@
       "target": "CheckboxFormMultiple.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
index af2864f52..cfb66bdff 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
@@ -20,4 +20,4 @@
       "target": "CheckboxFormSingle.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
index 5980590e2..bdce2d951 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
@@ -13,4 +13,4 @@
       "target": "CheckboxWithText.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
index a84232411..9d0784502 100644
--- a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
@@ -14,4 +14,4 @@
       "target": "CollapsibleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
index ac83b1970..61969e431 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "ComboboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
index 8df81a022..dd1aafc0d 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
@@ -15,4 +15,4 @@
       "target": "ComboboxDropdownMenu.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
index 836cf7035..c1ef6df67 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": "ComboboxForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
index d564a5c94..92629bcdc 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
@@ -3,10 +3,10 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "command",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
@@ -16,4 +16,4 @@
       "target": "ComboboxPopover.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
index ee99c6add..efb22ef0a 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
@@ -18,4 +18,4 @@
       "target": "ComboboxResponsive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index 8b02a1e7f..48578973e 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -13,4 +13,4 @@
       "target": "CommandDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
index 89c471fdc..f1d8e0ed7 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
@@ -15,4 +15,4 @@
       "target": "CommandDialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
index 3809d16d1..9366283cb 100644
--- a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
@@ -13,4 +13,4 @@
       "target": "ContextMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
index e6aca4200..1ae12efda 100644
--- a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
@@ -13,4 +13,4 @@
       "target": "CustomChartTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard01.json b/apps/www/src/public/r/styles/new-york/Dashboard01.json
index 382915cfc..10d4dd117 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard01.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard01.json
@@ -2,6 +2,22 @@
   "name": "Dashboard01",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "avatar",
+    "badge",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet",
+    "table"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard01.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard01.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard02.json b/apps/www/src/public/r/styles/new-york/Dashboard02.json
index 8082f6c11..c459fe3bd 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard02.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard02.json
@@ -2,6 +2,20 @@
   "name": "Dashboard02",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard02.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard02.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard03.json b/apps/www/src/public/r/styles/new-york/Dashboard03.json
index 049c155f7..626263638 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard03.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard03.json
@@ -2,6 +2,22 @@
   "name": "Dashboard03",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "button",
+    "drawer",
+    "input",
+    "label",
+    "select",
+    "textarea",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard03.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard03.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard04.json b/apps/www/src/public/r/styles/new-york/Dashboard04.json
index a90bccd8c..d6d532d08 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard04.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard04.json
@@ -2,6 +2,20 @@
   "name": "Dashboard04",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "button",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "sheet"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard04.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard04.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard05.json b/apps/www/src/public/r/styles/new-york/Dashboard05.json
index 792037a6a..3d081777d 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard05.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard05.json
@@ -2,6 +2,28 @@
   "name": "Dashboard05",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "input",
+    "pagination",
+    "progress",
+    "separator",
+    "sheet",
+    "table",
+    "tabs",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard05.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard05.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard06.json b/apps/www/src/public/r/styles/new-york/Dashboard06.json
index 30fce9934..13332dd1d 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard06.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard06.json
@@ -2,6 +2,24 @@
   "name": "Dashboard06",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "sheet",
+    "table",
+    "tabs",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard06.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard06.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard07.json b/apps/www/src/public/r/styles/new-york/Dashboard07.json
index 83cd11900..92ea3a4c7 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard07.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard07.json
@@ -2,6 +2,27 @@
   "name": "Dashboard07",
   "type": "registry:block",
   "dependencies": [],
-  "registryDependencies": [],
-  "files": []
-}
+  "registryDependencies": [
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "dropdown-menu",
+    "input",
+    "label",
+    "select",
+    "sheet",
+    "table",
+    "textarea",
+    "toggle-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "block/Dashboard07.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:block",
+      "target": "Dashboard07.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
index 462316832..347d8d344 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableColumnPinningDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableColumnPinningDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemo.json b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
index 29cea2c2f..676bd2139 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
index 0cbfa7435..d53e6eae5 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
@@ -14,4 +14,4 @@
       "target": "DataTableDemoColumn.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
index ba8ffb893..87492229a 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
@@ -5,19 +5,19 @@
     "@tanstack/vue-table"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "checkbox",
     "dropdown-menu",
     "input",
-    "table",
-    "utils"
+    "table"
   ],
   "files": [
     {
       "path": "example/DataTableReactiveDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "DataTableReactiveDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
index e27f77a85..c6a5c2c70 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
-    "popover",
-    "utils"
+    "popover"
   ],
   "files": [
     {
       "path": "example/DatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerForm.json b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
index 8e177df48..8f03c34b6 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "form",
     "popover",
-    "toast",
-    "utils"
+    "toast"
   ],
   "files": [
     {
       "path": "example/DatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
index 5925634c3..104611ca9 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "range-calendar",
-    "utils"
+    "range-calendar"
   ],
   "files": [
     {
       "path": "example/DatePickerWithIndependentMonths.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithIndependentMonths.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
index 07c87c2ad..ef0564ed4 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
@@ -3,18 +3,18 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "calendar",
     "popover",
-    "select",
-    "utils"
+    "select"
   ],
   "files": [
     {
       "path": "example/DatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithPresets.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
index f5cdd69e7..a9cd76242 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "range-calendar",
-    "utils"
+    "range-calendar"
   ],
   "files": [
     {
       "path": "example/DatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "DatePickerWithRange.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
index 68e7d104d..271c932f5 100644
--- a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
@@ -16,4 +16,4 @@
       "target": "DialogCustomCloseButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogDemo.json b/apps/www/src/public/r/styles/new-york/DialogDemo.json
index 4db93383a..c432603c5 100644
--- a/apps/www/src/public/r/styles/new-york/DialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogDemo.json
@@ -16,4 +16,4 @@
       "target": "DialogDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogForm.json b/apps/www/src/public/r/styles/new-york/DialogForm.json
index cbf108e03..5ce3d0a94 100644
--- a/apps/www/src/public/r/styles/new-york/DialogForm.json
+++ b/apps/www/src/public/r/styles/new-york/DialogForm.json
@@ -17,4 +17,4 @@
       "target": "DialogForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
index 23e0f0b80..c8355c4e8 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
@@ -14,4 +14,4 @@
       "target": "DialogScrollBodyDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
index a20b0b532..9ddd9bae1 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
@@ -14,4 +14,4 @@
       "target": "DialogScrollOverlayDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartColor.json b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
index 8c226f878..a5cbe913a 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
@@ -13,4 +13,4 @@
       "target": "DonutChartColor.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
index 518cf8861..91d0bde56 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "DonutChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
index 1010e3b03..3adf64db6 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
@@ -8,9 +8,9 @@
   "files": [
     {
       "path": "example/DonutChartDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
       "type": "registry:example",
       "target": "DonutChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartPie.json b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
index be9647269..b044e476d 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
@@ -13,4 +13,4 @@
       "target": "DonutChartPie.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDemo.json b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
index e323b7976..c195110c9 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
@@ -17,4 +17,4 @@
       "target": "DrawerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDialog.json b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
index c7a56958f..94e9152be 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
@@ -19,4 +19,4 @@
       "target": "DrawerDialog.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
index 53d267f6d..be25743ed 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuCheckboxes.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
index edc176dec..c2e1c6b10 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
index 9b733dbf7..eaec51f16 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
@@ -14,4 +14,4 @@
       "target": "DropdownMenuRadioGroup.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
index c211bc8cc..7f107ffb9 100644
--- a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
@@ -15,4 +15,4 @@
       "target": "HoverCardDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputDemo.json b/apps/www/src/public/r/styles/new-york/InputDemo.json
index ff60b1263..189a9dfa6 100644
--- a/apps/www/src/public/r/styles/new-york/InputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/InputDemo.json
@@ -13,4 +13,4 @@
       "target": "InputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputDisabled.json b/apps/www/src/public/r/styles/new-york/InputDisabled.json
index dd67814ed..f33362d9c 100644
--- a/apps/www/src/public/r/styles/new-york/InputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/InputDisabled.json
@@ -13,4 +13,4 @@
       "target": "InputDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputFile.json b/apps/www/src/public/r/styles/new-york/InputFile.json
index 72286de31..0b12da10f 100644
--- a/apps/www/src/public/r/styles/new-york/InputFile.json
+++ b/apps/www/src/public/r/styles/new-york/InputFile.json
@@ -14,4 +14,4 @@
       "target": "InputFile.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputForm.json b/apps/www/src/public/r/styles/new-york/InputForm.json
index bef564b41..16e4a3e2a 100644
--- a/apps/www/src/public/r/styles/new-york/InputForm.json
+++ b/apps/www/src/public/r/styles/new-york/InputForm.json
@@ -20,4 +20,4 @@
       "target": "InputForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
index 9a9ef9851..750bf1ba8 100644
--- a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
@@ -20,4 +20,4 @@
       "target": "InputFormAutoAnimate.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithButton.json b/apps/www/src/public/r/styles/new-york/InputWithButton.json
index f4dca276c..147d9b554 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithButton.json
@@ -14,4 +14,4 @@
       "target": "InputWithButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithIcon.json b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
index fe1b7d8d7..8fcc8ab0f 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
@@ -13,4 +13,4 @@
       "target": "InputWithIcon.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/InputWithLabel.json b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
index f3f3bfdda..25be20666 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
@@ -14,4 +14,4 @@
       "target": "InputWithLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/LabelDemo.json b/apps/www/src/public/r/styles/new-york/LabelDemo.json
index 88c805233..6f69175bc 100644
--- a/apps/www/src/public/r/styles/new-york/LabelDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LabelDemo.json
@@ -14,4 +14,4 @@
       "target": "LabelDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
index e2aa013be..543e8d09e 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
@@ -13,4 +13,4 @@
       "target": "LineChartCustomTooltip.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartDemo.json b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
index 2e068e31b..bae2df196 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
@@ -13,4 +13,4 @@
       "target": "LineChartDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
index 093823d89..e9eca28cb 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
@@ -13,4 +13,4 @@
       "target": "LineChartSparkline.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/MenubarDemo.json b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
index bb807c1ce..6b4214564 100644
--- a/apps/www/src/public/r/styles/new-york/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
@@ -13,4 +13,4 @@
       "target": "MenubarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
index a13c7a135..e43bb722a 100644
--- a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
@@ -13,4 +13,4 @@
       "target": "NavigationMenuDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
index 8fdd0567c..c89ab567e 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldCurrency.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
index 8e2ca8df5..bd2e3714e 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDecimal.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
index 22e662b03..e55406cf1 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
index 1aeb9e429..cc8291ff8 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
index 904e4ee86..f0292f522 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
@@ -20,4 +20,4 @@
       "target": "NumberFieldForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
index d02abb6bd..a700c334e 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
@@ -14,4 +14,4 @@
       "target": "NumberFieldPercentage.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PaginationDemo.json b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
index 67fc08dc0..8c5bd9011 100644
--- a/apps/www/src/public/r/styles/new-york/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
@@ -14,4 +14,4 @@
       "target": "PaginationDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputControlled.json b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
index d8c15433d..00a265818 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
@@ -13,4 +13,4 @@
       "target": "PinInputControlled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDemo.json b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
index 894ff5da8..e54b52222 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
@@ -13,4 +13,4 @@
       "target": "PinInputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
index 0a05d304e..33c81d459 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
@@ -13,4 +13,4 @@
       "target": "PinInputDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
index bd74b22e4..c82019e0a 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
@@ -20,4 +20,4 @@
       "target": "PinInputFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
index 31b16c341..102e102e2 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "PinInputSeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/PopoverDemo.json b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
index d6c196807..388a8e67b 100644
--- a/apps/www/src/public/r/styles/new-york/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
@@ -16,4 +16,4 @@
       "target": "PopoverDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ProgressDemo.json b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
index 59ff7df72..a4a6fb66d 100644
--- a/apps/www/src/public/r/styles/new-york/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
@@ -13,4 +13,4 @@
       "target": "ProgressDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
index f60105e2e..f061eca6d 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
@@ -14,4 +14,4 @@
       "target": "RadioGroupDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
index d39f68557..39d8bcf1e 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
@@ -20,4 +20,4 @@
       "target": "RadioGroupForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
index 6bf2c775b..fa18daa75 100644
--- a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "RangeCalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableDemo.json b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
index 34171cb60..a3ded18f6 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
index fa59ac14e..1329aed70 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableHandleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
index 8886582ad..0bac1e59a 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
@@ -13,4 +13,4 @@
       "target": "ResizableVerticalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
index a4b181dac..475919c71 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
@@ -14,4 +14,4 @@
       "target": "ScrollAreaDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
index 2265eea3f..d5140d467 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
@@ -13,4 +13,4 @@
       "target": "ScrollAreaHorizontalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectDemo.json b/apps/www/src/public/r/styles/new-york/SelectDemo.json
index 91a9d89f7..0ca1c9ccd 100644
--- a/apps/www/src/public/r/styles/new-york/SelectDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SelectDemo.json
@@ -13,4 +13,4 @@
       "target": "SelectDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectForm.json b/apps/www/src/public/r/styles/new-york/SelectForm.json
index b80f4d141..31b082188 100644
--- a/apps/www/src/public/r/styles/new-york/SelectForm.json
+++ b/apps/www/src/public/r/styles/new-york/SelectForm.json
@@ -20,4 +20,4 @@
       "target": "SelectForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SelectScrollable.json b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
index c2b3acdc2..3533bb948 100644
--- a/apps/www/src/public/r/styles/new-york/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
@@ -13,4 +13,4 @@
       "target": "SelectScrollable.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
index 03b9c0384..9d1bbacee 100644
--- a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
@@ -13,4 +13,4 @@
       "target": "SeparatorDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SheetDemo.json b/apps/www/src/public/r/styles/new-york/SheetDemo.json
index 79b560b9a..c56748f70 100644
--- a/apps/www/src/public/r/styles/new-york/SheetDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetDemo.json
@@ -16,4 +16,4 @@
       "target": "SheetDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
index 0391d5c03..e4d838d13 100644
--- a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
@@ -16,4 +16,4 @@
       "target": "SheetSideDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
new file mode 100644
index 000000000..2bfd9aa56
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -0,0 +1,20 @@
+{
+  "name": "Sidebar01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu",
+    "label",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar01/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "Sidebar01Page.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
new file mode 100644
index 000000000..b54fc18a2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -0,0 +1,21 @@
+{
+  "name": "Sidebar07",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "avatar",
+    "breadcrumb",
+    "collapsible",
+    "dropdown-menu",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar07/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "Sidebar07Page.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonCard.json b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
index 2e1b9d90d..54cd04fc2 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
@@ -13,4 +13,4 @@
       "target": "SkeletonCard.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
index 66eaf765f..911b57043 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
@@ -13,4 +13,4 @@
       "target": "SkeletonDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SliderDemo.json b/apps/www/src/public/r/styles/new-york/SliderDemo.json
index 48b9ceacd..9c18fc3f3 100644
--- a/apps/www/src/public/r/styles/new-york/SliderDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SliderDemo.json
@@ -3,15 +3,15 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
-    "slider",
-    "utils"
+    "utils",
+    "slider"
   ],
   "files": [
     {
       "path": "example/SliderDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
       "target": "SliderDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SliderForm.json b/apps/www/src/public/r/styles/new-york/SliderForm.json
index 2204fedb2..eeb4265bc 100644
--- a/apps/www/src/public/r/styles/new-york/SliderForm.json
+++ b/apps/www/src/public/r/styles/new-york/SliderForm.json
@@ -20,4 +20,4 @@
       "target": "SliderForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SonnerDemo.json b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
index f45eb8371..e907e7f05 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
@@ -15,4 +15,4 @@
       "target": "SonnerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
index 44ad65bb2..f4e89c44b 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
@@ -16,4 +16,4 @@
       "target": "SonnerWithDialog.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperDemo.json b/apps/www/src/public/r/styles/new-york/StepperDemo.json
index 518b9f2d6..40814330c 100644
--- a/apps/www/src/public/r/styles/new-york/StepperDemo.json
+++ b/apps/www/src/public/r/styles/new-york/StepperDemo.json
@@ -13,4 +13,4 @@
       "target": "StepperDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperForm.json b/apps/www/src/public/r/styles/new-york/StepperForm.json
index e558f6269..c722236be 100644
--- a/apps/www/src/public/r/styles/new-york/StepperForm.json
+++ b/apps/www/src/public/r/styles/new-york/StepperForm.json
@@ -18,4 +18,4 @@
       "target": "StepperForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperHorizental.json b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
index 2efc155e9..f0450393e 100644
--- a/apps/www/src/public/r/styles/new-york/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
@@ -14,4 +14,4 @@
       "target": "StepperHorizental.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/StepperVertical.json b/apps/www/src/public/r/styles/new-york/StepperVertical.json
index 89c4c00fc..47727b5a9 100644
--- a/apps/www/src/public/r/styles/new-york/StepperVertical.json
+++ b/apps/www/src/public/r/styles/new-york/StepperVertical.json
@@ -14,4 +14,4 @@
       "target": "StepperVertical.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SwitchDemo.json b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
index 3598e33b4..cfe3454b7 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
@@ -14,4 +14,4 @@
       "target": "SwitchDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/SwitchForm.json b/apps/www/src/public/r/styles/new-york/SwitchForm.json
index d0f0ced25..b2e95aea8 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchForm.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchForm.json
@@ -20,4 +20,4 @@
       "target": "SwitchForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TableDemo.json b/apps/www/src/public/r/styles/new-york/TableDemo.json
index 91fdb3b0e..bb7d10b90 100644
--- a/apps/www/src/public/r/styles/new-york/TableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TableDemo.json
@@ -13,4 +13,4 @@
       "target": "TableDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TabsDemo.json b/apps/www/src/public/r/styles/new-york/TabsDemo.json
index ef60ab622..dfd5f1254 100644
--- a/apps/www/src/public/r/styles/new-york/TabsDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsDemo.json
@@ -17,4 +17,4 @@
       "target": "TabsDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
index c198612c9..a10d3118c 100644
--- a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
@@ -17,4 +17,4 @@
       "target": "TabsVerticalDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
index 235d65a2b..eefb3ea9d 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
@@ -14,4 +14,4 @@
       "target": "TagsInputComboboxDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
index 42ee02b05..5af8fba8f 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
@@ -13,4 +13,4 @@
       "target": "TagsInputDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
index 0938b8048..e560c54c3 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
@@ -20,4 +20,4 @@
       "target": "TagsInputFormDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDemo.json b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
index 3e3738a5e..d53d10ff3 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
@@ -13,4 +13,4 @@
       "target": "TextareaDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
index 605680bf5..844cd2776 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
@@ -13,4 +13,4 @@
       "target": "TextareaDisabled.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaForm.json b/apps/www/src/public/r/styles/new-york/TextareaForm.json
index 339f2dd11..d919cddaf 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaForm.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaForm.json
@@ -20,4 +20,4 @@
       "target": "TextareaForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
index f4cd212a3..8a3e870a7 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithButton.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
index f06f3d3ce..ab334a3d4 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithLabel.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithText.json b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
index efe73930d..219f6ee2e 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
@@ -14,4 +14,4 @@
       "target": "TextareaWithText.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastDemo.json b/apps/www/src/public/r/styles/new-york/ToastDemo.json
index 547493277..29ed6da97 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDemo.json
@@ -14,4 +14,4 @@
       "target": "ToastDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastDestructive.json b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
index e969335ff..840cc942e 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
@@ -15,4 +15,4 @@
       "target": "ToastDestructive.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastSimple.json b/apps/www/src/public/r/styles/new-york/ToastSimple.json
index e014a61f0..dbb3b924e 100644
--- a/apps/www/src/public/r/styles/new-york/ToastSimple.json
+++ b/apps/www/src/public/r/styles/new-york/ToastSimple.json
@@ -14,4 +14,4 @@
       "target": "ToastSimple.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithAction.json b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
index f7eb31186..43c02a99d 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
@@ -15,4 +15,4 @@
       "target": "ToastWithAction.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
index 586a74302..8932b4556 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
@@ -14,4 +14,4 @@
       "target": "ToastWithTitle.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
index 8c4c9108f..f9de4936f 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
index 491993b5a..48ed38d35 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleDisabledDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
index a2cfff692..75b3b0c0a 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
index 89ec40d38..adbf3e393 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupDisabledDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
index b1ecee406..1c0cb40bd 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupLargeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
index 5ba25fe00..fbfa2f3f2 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupOutlineDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
index 5b9c3fdfc..bcb804c2d 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupSingleDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
index bd1fe000a..1524d7f80 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleGroupSmallDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
index 66bbcae3f..c6706d7e6 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleItalicDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
index b7056a13e..966d414f0 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleItalicWithTextDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
index ba4e84938..c03fb3299 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleLargeDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
index 2d39e38be..f90f9018d 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
@@ -13,4 +13,4 @@
       "target": "ToggleSmallDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TooltipDemo.json b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
index 9a2e1dee2..c0cdeb161 100644
--- a/apps/www/src/public/r/styles/new-york/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
@@ -14,4 +14,4 @@
       "target": "TooltipDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
index c29800cd3..9819d203c 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
@@ -11,4 +11,4 @@
       "target": "TypographyBlockquote.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyDemo.json b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
index 0bc3f1afc..7dc911d6b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
@@ -11,4 +11,4 @@
       "target": "TypographyDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH1.json b/apps/www/src/public/r/styles/new-york/TypographyH1.json
index e2135d497..4688e1d9b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH1.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH1.json
@@ -11,4 +11,4 @@
       "target": "TypographyH1.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH2.json b/apps/www/src/public/r/styles/new-york/TypographyH2.json
index 3c5a8a96e..50d1467bf 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH2.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH2.json
@@ -11,4 +11,4 @@
       "target": "TypographyH2.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH3.json b/apps/www/src/public/r/styles/new-york/TypographyH3.json
index 2e029d96b..3819ad2a7 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH3.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH3.json
@@ -11,4 +11,4 @@
       "target": "TypographyH3.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH4.json b/apps/www/src/public/r/styles/new-york/TypographyH4.json
index f47a94348..72b7f9a0b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH4.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH4.json
@@ -11,4 +11,4 @@
       "target": "TypographyH4.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
index 502a19eda..70a6eb50b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
@@ -11,4 +11,4 @@
       "target": "TypographyInlineCode.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLarge.json b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
index cf38db41b..d0d2febcd 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
@@ -11,4 +11,4 @@
       "target": "TypographyLarge.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLead.json b/apps/www/src/public/r/styles/new-york/TypographyLead.json
index 9855ec437..40e1b5bb7 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLead.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLead.json
@@ -11,4 +11,4 @@
       "target": "TypographyLead.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyList.json b/apps/www/src/public/r/styles/new-york/TypographyList.json
index e08f0a71f..6d20c56b5 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyList.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyList.json
@@ -11,4 +11,4 @@
       "target": "TypographyList.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyMuted.json b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
index 358a61d4f..5a5beda40 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
@@ -11,4 +11,4 @@
       "target": "TypographyMuted.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyP.json b/apps/www/src/public/r/styles/new-york/TypographyP.json
index b2157b831..cb7406559 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyP.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyP.json
@@ -11,4 +11,4 @@
       "target": "TypographyP.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographySmall.json b/apps/www/src/public/r/styles/new-york/TypographySmall.json
index 96f2819a3..1ec9e7cfe 100644
--- a/apps/www/src/public/r/styles/new-york/TypographySmall.json
+++ b/apps/www/src/public/r/styles/new-york/TypographySmall.json
@@ -11,4 +11,4 @@
       "target": "TypographySmall.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/TypographyTable.json b/apps/www/src/public/r/styles/new-york/TypographyTable.json
index a206d765f..69146da49 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyTable.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyTable.json
@@ -11,4 +11,4 @@
       "target": "TypographyTable.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
index ed232c98f..ade41d1d4 100644
--- a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
@@ -13,4 +13,4 @@
       "target": "VCalendarDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
index 5843592f6..e8ea4063d 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
index ac19e537c..87a279200 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
@@ -7,19 +7,19 @@
     "zod"
   ],
   "registryDependencies": [
+    "utils",
     "button",
     "form",
     "popover",
     "toast",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerForm.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
index 703995687..85790287b 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
@@ -3,18 +3,18 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
     "select",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerWithPresets.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
index e3ec30318..35d2da114 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "VDatePickerWithRange.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
index 354c0bae7..30f5517e5 100644
--- a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": "VDateTimePickerDemo.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
index 58d3eed48..3b4edd336 100644
--- a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
@@ -3,17 +3,17 @@
   "type": "registry:example",
   "dependencies": [],
   "registryDependencies": [
+    "utils",
     "button",
     "popover",
-    "v-calendar",
-    "utils"
+    "v-calendar"
   ],
   "files": [
     {
       "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "VRangePickerWithSlot.vue"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/accordion.json b/apps/www/src/public/r/styles/new-york/accordion.json
index a06c23722..5a44bd29e 100644
--- a/apps/www/src/public/r/styles/new-york/accordion.json
+++ b/apps/www/src/public/r/styles/new-york/accordion.json
@@ -37,4 +37,4 @@
       "target": "accordion/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/alert-dialog.json b/apps/www/src/public/r/styles/new-york/alert-dialog.json
index 376464580..4c895b8f4 100644
--- a/apps/www/src/public/r/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/r/styles/new-york/alert-dialog.json
@@ -3,8 +3,8 @@
   "type": "registry:ui",
   "dependencies": [],
   "registryDependencies": [
-    "button",
-    "utils"
+    "utils",
+    "button"
   ],
   "files": [
     {
@@ -15,13 +15,13 @@
     },
     {
       "path": "ui/alert-dialog/AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
       "type": "registry:ui",
       "target": "alert-dialog/AlertDialogAction.vue"
     },
     {
       "path": "ui/alert-dialog/AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
       "type": "registry:ui",
       "target": "alert-dialog/AlertDialogCancel.vue"
     },
@@ -68,4 +68,4 @@
       "target": "alert-dialog/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/alert.json b/apps/www/src/public/r/styles/new-york/alert.json
index bacf9667d..9a947b5a9 100644
--- a/apps/www/src/public/r/styles/new-york/alert.json
+++ b/apps/www/src/public/r/styles/new-york/alert.json
@@ -31,4 +31,4 @@
       "target": "alert/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/aspect-ratio.json b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
index e770dca61..97080b06e 100644
--- a/apps/www/src/public/r/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
@@ -17,4 +17,4 @@
       "target": "aspect-ratio/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/auto-form.json b/apps/www/src/public/r/styles/new-york/auto-form.json
index eab596305..f4b60fc2e 100644
--- a/apps/www/src/public/r/styles/new-york/auto-form.json
+++ b/apps/www/src/public/r/styles/new-york/auto-form.json
@@ -13,9 +13,9 @@
     "separator",
     "checkbox",
     "switch",
+    "utils",
     "calendar",
     "popover",
-    "utils",
     "label",
     "radio-group",
     "select",
@@ -49,7 +49,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": "auto-form/AutoFormFieldDate.vue"
     },
@@ -120,4 +120,4 @@
       "target": "auto-form/utils.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/avatar.json b/apps/www/src/public/r/styles/new-york/avatar.json
index f22212d4b..454a63643 100644
--- a/apps/www/src/public/r/styles/new-york/avatar.json
+++ b/apps/www/src/public/r/styles/new-york/avatar.json
@@ -31,4 +31,4 @@
       "target": "avatar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/badge.json b/apps/www/src/public/r/styles/new-york/badge.json
index bb348f54f..2a25a5399 100644
--- a/apps/www/src/public/r/styles/new-york/badge.json
+++ b/apps/www/src/public/r/styles/new-york/badge.json
@@ -19,4 +19,4 @@
       "target": "badge/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/breadcrumb.json b/apps/www/src/public/r/styles/new-york/breadcrumb.json
index 2f0f6d11f..2a6831477 100644
--- a/apps/www/src/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/r/styles/new-york/breadcrumb.json
@@ -55,4 +55,4 @@
       "target": "breadcrumb/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/button.json b/apps/www/src/public/r/styles/new-york/button.json
index 9ca92b989..0597ef899 100644
--- a/apps/www/src/public/r/styles/new-york/button.json
+++ b/apps/www/src/public/r/styles/new-york/button.json
@@ -19,4 +19,4 @@
       "target": "button/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/calendar.json b/apps/www/src/public/r/styles/new-york/calendar.json
index 382784e0d..67070517d 100644
--- a/apps/www/src/public/r/styles/new-york/calendar.json
+++ b/apps/www/src/public/r/styles/new-york/calendar.json
@@ -21,7 +21,7 @@
     },
     {
       "path": "ui/calendar/CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarCellTrigger.vue"
     },
@@ -69,13 +69,13 @@
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarNextButton.vue"
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "calendar/CalendarPrevButton.vue"
     },
@@ -86,4 +86,4 @@
       "target": "calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/card.json b/apps/www/src/public/r/styles/new-york/card.json
index c813e227b..932da894a 100644
--- a/apps/www/src/public/r/styles/new-york/card.json
+++ b/apps/www/src/public/r/styles/new-york/card.json
@@ -49,4 +49,4 @@
       "target": "card/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/carousel.json b/apps/www/src/public/r/styles/new-york/carousel.json
index 658b3d34a..df94c1e6c 100644
--- a/apps/www/src/public/r/styles/new-york/carousel.json
+++ b/apps/www/src/public/r/styles/new-york/carousel.json
@@ -30,13 +30,13 @@
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "carousel/CarouselNext.vue"
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "carousel/CarouselPrevious.vue"
     },
@@ -59,4 +59,4 @@
       "target": "carousel/useCarousel.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-area.json b/apps/www/src/public/r/styles/new-york/chart-area.json
index 6c5027679..72dc617c1 100644
--- a/apps/www/src/public/r/styles/new-york/chart-area.json
+++ b/apps/www/src/public/r/styles/new-york/chart-area.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-area/AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-area/AreaChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-area/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-bar.json b/apps/www/src/public/r/styles/new-york/chart-bar.json
index 5c07e9d41..688a4c55d 100644
--- a/apps/www/src/public/r/styles/new-york/chart-bar.json
+++ b/apps/www/src/public/r/styles/new-york/chart-bar.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-bar/BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-bar/BarChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-bar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-donut.json b/apps/www/src/public/r/styles/new-york/chart-donut.json
index 1f4b3a8df..efdff2bc2 100644
--- a/apps/www/src/public/r/styles/new-york/chart-donut.json
+++ b/apps/www/src/public/r/styles/new-york/chart-donut.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-donut/DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-donut/DonutChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-donut/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart-line.json b/apps/www/src/public/r/styles/new-york/chart-line.json
index f4cafc551..b0505eaaa 100644
--- a/apps/www/src/public/r/styles/new-york/chart-line.json
+++ b/apps/www/src/public/r/styles/new-york/chart-line.json
@@ -7,13 +7,13 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "chart",
-    "utils"
+    "utils",
+    "chart"
   ],
   "files": [
     {
       "path": "ui/chart-line/LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "chart-line/LineChart.vue"
     },
@@ -24,4 +24,4 @@
       "target": "chart-line/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/chart.json b/apps/www/src/public/r/styles/new-york/chart.json
index dde675ed7..a94700e91 100644
--- a/apps/www/src/public/r/styles/new-york/chart.json
+++ b/apps/www/src/public/r/styles/new-york/chart.json
@@ -47,4 +47,4 @@
       "target": "chart/interface.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/checkbox.json b/apps/www/src/public/r/styles/new-york/checkbox.json
index 280e3f4e5..a783cec66 100644
--- a/apps/www/src/public/r/styles/new-york/checkbox.json
+++ b/apps/www/src/public/r/styles/new-york/checkbox.json
@@ -19,4 +19,4 @@
       "target": "checkbox/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/collapsible.json b/apps/www/src/public/r/styles/new-york/collapsible.json
index ebc478113..43003ad3c 100644
--- a/apps/www/src/public/r/styles/new-york/collapsible.json
+++ b/apps/www/src/public/r/styles/new-york/collapsible.json
@@ -29,4 +29,4 @@
       "target": "collapsible/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 856447bbe..4748136f9 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -68,4 +68,4 @@
       "target": "command/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/context-menu.json b/apps/www/src/public/r/styles/new-york/context-menu.json
index 15b4b9bfa..f1af8b6a9 100644
--- a/apps/www/src/public/r/styles/new-york/context-menu.json
+++ b/apps/www/src/public/r/styles/new-york/context-menu.json
@@ -103,4 +103,4 @@
       "target": "context-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/dialog.json b/apps/www/src/public/r/styles/new-york/dialog.json
index a0a5f3096..bfee9736d 100644
--- a/apps/www/src/public/r/styles/new-york/dialog.json
+++ b/apps/www/src/public/r/styles/new-york/dialog.json
@@ -67,4 +67,4 @@
       "target": "dialog/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/drawer.json b/apps/www/src/public/r/styles/new-york/drawer.json
index cefdf8418..31faeb6e3 100644
--- a/apps/www/src/public/r/styles/new-york/drawer.json
+++ b/apps/www/src/public/r/styles/new-york/drawer.json
@@ -57,4 +57,4 @@
       "target": "drawer/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/dropdown-menu.json b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
index 349dc1296..a63fbbc71 100644
--- a/apps/www/src/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
@@ -97,4 +97,4 @@
       "target": "dropdown-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/form.json b/apps/www/src/public/r/styles/new-york/form.json
index c9ebe7c72..10ed46c5e 100644
--- a/apps/www/src/public/r/styles/new-york/form.json
+++ b/apps/www/src/public/r/styles/new-york/form.json
@@ -31,7 +31,7 @@
     },
     {
       "path": "ui/form/FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
       "target": "form/FormLabel.vue"
     },
@@ -60,4 +60,4 @@
       "target": "form/useFormField.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/hover-card.json b/apps/www/src/public/r/styles/new-york/hover-card.json
index 0f32ccf99..90eda7444 100644
--- a/apps/www/src/public/r/styles/new-york/hover-card.json
+++ b/apps/www/src/public/r/styles/new-york/hover-card.json
@@ -31,4 +31,4 @@
       "target": "hover-card/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/index.json b/apps/www/src/public/r/styles/new-york/index.json
index ab1090b1c..238a76756 100644
--- a/apps/www/src/public/r/styles/new-york/index.json
+++ b/apps/www/src/public/r/styles/new-york/index.json
@@ -4,7 +4,7 @@
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "utils"
diff --git a/apps/www/src/public/r/styles/new-york/input.json b/apps/www/src/public/r/styles/new-york/input.json
index b000ccffe..06f9244aa 100644
--- a/apps/www/src/public/r/styles/new-york/input.json
+++ b/apps/www/src/public/r/styles/new-york/input.json
@@ -21,4 +21,4 @@
       "target": "input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/label.json b/apps/www/src/public/r/styles/new-york/label.json
index 447ee607b..839718f1f 100644
--- a/apps/www/src/public/r/styles/new-york/label.json
+++ b/apps/www/src/public/r/styles/new-york/label.json
@@ -19,4 +19,4 @@
       "target": "label/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/menubar.json b/apps/www/src/public/r/styles/new-york/menubar.json
index b3af76409..929eb32fa 100644
--- a/apps/www/src/public/r/styles/new-york/menubar.json
+++ b/apps/www/src/public/r/styles/new-york/menubar.json
@@ -103,4 +103,4 @@
       "target": "menubar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/navigation-menu.json b/apps/www/src/public/r/styles/new-york/navigation-menu.json
index 416df7c30..2e83cf267 100644
--- a/apps/www/src/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/r/styles/new-york/navigation-menu.json
@@ -61,4 +61,4 @@
       "target": "navigation-menu/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/number-field.json b/apps/www/src/public/r/styles/new-york/number-field.json
index 072a7d327..bcb77b720 100644
--- a/apps/www/src/public/r/styles/new-york/number-field.json
+++ b/apps/www/src/public/r/styles/new-york/number-field.json
@@ -43,4 +43,4 @@
       "target": "number-field/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/pagination.json b/apps/www/src/public/r/styles/new-york/pagination.json
index 6537b45f0..91ae815ea 100644
--- a/apps/www/src/public/r/styles/new-york/pagination.json
+++ b/apps/www/src/public/r/styles/new-york/pagination.json
@@ -15,25 +15,25 @@
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationFirst.vue"
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationLast.vue"
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationNext.vue"
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "pagination/PaginationPrev.vue"
     },
@@ -44,4 +44,4 @@
       "target": "pagination/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/pin-input.json b/apps/www/src/public/r/styles/new-york/pin-input.json
index e4cfcf6b1..d64094549 100644
--- a/apps/www/src/public/r/styles/new-york/pin-input.json
+++ b/apps/www/src/public/r/styles/new-york/pin-input.json
@@ -37,4 +37,4 @@
       "target": "pin-input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/popover.json b/apps/www/src/public/r/styles/new-york/popover.json
index d071e5e83..b11ced75c 100644
--- a/apps/www/src/public/r/styles/new-york/popover.json
+++ b/apps/www/src/public/r/styles/new-york/popover.json
@@ -31,4 +31,4 @@
       "target": "popover/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/progress.json b/apps/www/src/public/r/styles/new-york/progress.json
index 6101ea508..be04580a3 100644
--- a/apps/www/src/public/r/styles/new-york/progress.json
+++ b/apps/www/src/public/r/styles/new-york/progress.json
@@ -19,4 +19,4 @@
       "target": "progress/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
index 78aa35d93..309c48fa8 100644
--- a/apps/www/src/public/r/styles/new-york/radio-group.json
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -25,4 +25,4 @@
       "target": "radio-group/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/range-calendar.json b/apps/www/src/public/r/styles/new-york/range-calendar.json
index 9930a876d..3ba49fa8b 100644
--- a/apps/www/src/public/r/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/range-calendar.json
@@ -21,7 +21,7 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarCellTrigger.vue"
     },
@@ -69,13 +69,13 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarNextButton.vue"
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": "range-calendar/RangeCalendarPrevButton.vue"
     },
@@ -86,4 +86,4 @@
       "target": "range-calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/resizable.json b/apps/www/src/public/r/styles/new-york/resizable.json
index eca8718de..30be3b24f 100644
--- a/apps/www/src/public/r/styles/new-york/resizable.json
+++ b/apps/www/src/public/r/styles/new-york/resizable.json
@@ -25,4 +25,4 @@
       "target": "resizable/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/scroll-area.json b/apps/www/src/public/r/styles/new-york/scroll-area.json
index 3f38eae3f..f3cbbe4b7 100644
--- a/apps/www/src/public/r/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/r/styles/new-york/scroll-area.json
@@ -25,4 +25,4 @@
       "target": "scroll-area/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/select.json b/apps/www/src/public/r/styles/new-york/select.json
index 86e9eea03..232adf2d3 100644
--- a/apps/www/src/public/r/styles/new-york/select.json
+++ b/apps/www/src/public/r/styles/new-york/select.json
@@ -79,4 +79,4 @@
       "target": "select/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/separator.json b/apps/www/src/public/r/styles/new-york/separator.json
index 9893189c9..e5a78b265 100644
--- a/apps/www/src/public/r/styles/new-york/separator.json
+++ b/apps/www/src/public/r/styles/new-york/separator.json
@@ -19,4 +19,4 @@
       "target": "separator/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/sheet.json b/apps/www/src/public/r/styles/new-york/sheet.json
index 535e631ef..47bd776cd 100644
--- a/apps/www/src/public/r/styles/new-york/sheet.json
+++ b/apps/www/src/public/r/styles/new-york/sheet.json
@@ -61,4 +61,4 @@
       "target": "sheet/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index 87e12676b..dc484fc79 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -5,9 +5,9 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
+    "utils",
     "Sheet.vue",
     "SheetContent.vue",
-    "utils",
     "Input.vue",
     "Tooltip.vue",
     "TooltipContent.vue",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +67,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -115,7 +115,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +151,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
@@ -174,4 +174,4 @@
       "target": "sidebar/utils.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/skeleton.json b/apps/www/src/public/r/styles/new-york/skeleton.json
index 91283dae4..0702b002d 100644
--- a/apps/www/src/public/r/styles/new-york/skeleton.json
+++ b/apps/www/src/public/r/styles/new-york/skeleton.json
@@ -19,4 +19,4 @@
       "target": "skeleton/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/slider.json b/apps/www/src/public/r/styles/new-york/slider.json
index 38c2b1f8c..f83999cd8 100644
--- a/apps/www/src/public/r/styles/new-york/slider.json
+++ b/apps/www/src/public/r/styles/new-york/slider.json
@@ -19,4 +19,4 @@
       "target": "slider/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/sonner.json b/apps/www/src/public/r/styles/new-york/sonner.json
index c0c4d6cbf..4dfc04d8b 100644
--- a/apps/www/src/public/r/styles/new-york/sonner.json
+++ b/apps/www/src/public/r/styles/new-york/sonner.json
@@ -19,4 +19,4 @@
       "target": "sonner/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/stepper.json b/apps/www/src/public/r/styles/new-york/stepper.json
index da3ab0189..6aebbcc06 100644
--- a/apps/www/src/public/r/styles/new-york/stepper.json
+++ b/apps/www/src/public/r/styles/new-york/stepper.json
@@ -55,4 +55,4 @@
       "target": "stepper/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/switch.json b/apps/www/src/public/r/styles/new-york/switch.json
index afbb494f0..cd41cba4c 100644
--- a/apps/www/src/public/r/styles/new-york/switch.json
+++ b/apps/www/src/public/r/styles/new-york/switch.json
@@ -19,4 +19,4 @@
       "target": "switch/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/table.json b/apps/www/src/public/r/styles/new-york/table.json
index 997d80ea5..f94f5f41c 100644
--- a/apps/www/src/public/r/styles/new-york/table.json
+++ b/apps/www/src/public/r/styles/new-york/table.json
@@ -67,4 +67,4 @@
       "target": "table/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/tabs.json b/apps/www/src/public/r/styles/new-york/tabs.json
index 23ca70dbe..a3417c5ae 100644
--- a/apps/www/src/public/r/styles/new-york/tabs.json
+++ b/apps/www/src/public/r/styles/new-york/tabs.json
@@ -37,4 +37,4 @@
       "target": "tabs/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/tags-input.json b/apps/www/src/public/r/styles/new-york/tags-input.json
index 14c070244..7c95a30e2 100644
--- a/apps/www/src/public/r/styles/new-york/tags-input.json
+++ b/apps/www/src/public/r/styles/new-york/tags-input.json
@@ -43,4 +43,4 @@
       "target": "tags-input/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/textarea.json b/apps/www/src/public/r/styles/new-york/textarea.json
index 4fa99fd41..67128cce3 100644
--- a/apps/www/src/public/r/styles/new-york/textarea.json
+++ b/apps/www/src/public/r/styles/new-york/textarea.json
@@ -21,4 +21,4 @@
       "target": "textarea/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-daylight.json b/apps/www/src/public/r/styles/new-york/theme-daylight.json
index 0626993e4..5b6c0f36d 100644
--- a/apps/www/src/public/r/styles/new-york/theme-daylight.json
+++ b/apps/www/src/public/r/styles/new-york/theme-daylight.json
@@ -55,4 +55,4 @@
       "chart-5": "35 43% 53%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-emerald.json b/apps/www/src/public/r/styles/new-york/theme-emerald.json
index 7160d552c..428bd1425 100644
--- a/apps/www/src/public/r/styles/new-york/theme-emerald.json
+++ b/apps/www/src/public/r/styles/new-york/theme-emerald.json
@@ -55,4 +55,4 @@
       "chart-5": "141 40% 9%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/theme-midnight.json b/apps/www/src/public/r/styles/new-york/theme-midnight.json
index 7cd62f243..e5db55577 100644
--- a/apps/www/src/public/r/styles/new-york/theme-midnight.json
+++ b/apps/www/src/public/r/styles/new-york/theme-midnight.json
@@ -55,4 +55,4 @@
       "chart-5": "240 2% 26%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/toast.json b/apps/www/src/public/r/styles/new-york/toast.json
index 112e10e9f..6ed9ac15a 100644
--- a/apps/www/src/public/r/styles/new-york/toast.json
+++ b/apps/www/src/public/r/styles/new-york/toast.json
@@ -67,4 +67,4 @@
       "target": "toast/use-toast.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/toggle-group.json b/apps/www/src/public/r/styles/new-york/toggle-group.json
index 837d76644..5050ed113 100644
--- a/apps/www/src/public/r/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/r/styles/new-york/toggle-group.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/toggle-group/ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
       "type": "registry:ui",
       "target": "toggle-group/ToggleGroupItem.vue"
     },
@@ -26,4 +26,4 @@
       "target": "toggle-group/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
index cfdba55dd..77f542864 100644
--- a/apps/www/src/public/r/styles/new-york/toggle.json
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -19,4 +19,4 @@
       "target": "toggle/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/tooltip.json b/apps/www/src/public/r/styles/new-york/tooltip.json
index 0dea70d20..c5ad65e26 100644
--- a/apps/www/src/public/r/styles/new-york/tooltip.json
+++ b/apps/www/src/public/r/styles/new-york/tooltip.json
@@ -37,4 +37,4 @@
       "target": "tooltip/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/utils.json b/apps/www/src/public/r/styles/new-york/utils.json
index 96d3ac6e3..d6b06fed2 100644
--- a/apps/www/src/public/r/styles/new-york/utils.json
+++ b/apps/www/src/public/r/styles/new-york/utils.json
@@ -13,4 +13,4 @@
       "target": ""
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/styles/new-york/v-calendar.json b/apps/www/src/public/r/styles/new-york/v-calendar.json
index 2ce12a0a7..8f99520fb 100644
--- a/apps/www/src/public/r/styles/new-york/v-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/v-calendar.json
@@ -1,12 +1,18 @@
 {
   "name": "v-calendar",
   "type": "registry:ui",
-  "dependencies": ["v-calendar@next", "@vueuse/core"],
-  "registryDependencies": ["button", "utils"],
+  "dependencies": [
+    "v-calendar@next",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
   "files": [
     {
       "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
       "type": "registry:ui",
       "target": "v-calendar/Calendar.vue"
     },
@@ -17,4 +23,4 @@
       "target": "v-calendar/index.ts"
     }
   ]
-}
+}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 66772c093..6a655987a 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -266,8 +266,8 @@
     "type": "registry:ui",
     "dependencies": [],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
@@ -278,13 +278,13 @@
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
         "type": "registry:ui",
         "target": "alert-dialog/AlertDialogAction.vue"
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
         "type": "registry:ui",
         "target": "alert-dialog/AlertDialogCancel.vue"
       },
@@ -367,9 +367,9 @@
       "separator",
       "checkbox",
       "switch",
+      "utils",
       "calendar",
       "popover",
-      "utils",
       "label",
       "radio-group",
       "select",
@@ -403,7 +403,7 @@
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
         "target": "auto-form/AutoFormFieldDate.vue"
       },
@@ -634,7 +634,7 @@
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarCellTrigger.vue"
       },
@@ -682,13 +682,13 @@
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarNextButton.vue"
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarPrevButton.vue"
       },
@@ -784,13 +784,13 @@
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "carousel/CarouselNext.vue"
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "carousel/CarouselPrevious.vue"
       },
@@ -873,13 +873,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-area/AreaChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-area/AreaChart.vue"
       },
@@ -900,13 +900,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-bar/BarChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-bar/BarChart.vue"
       },
@@ -927,13 +927,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-donut/DonutChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-donut/DonutChart.vue"
       },
@@ -954,13 +954,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-line/LineChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-line/LineChart.vue"
       },
@@ -1466,7 +1466,7 @@
       },
       {
         "path": "ui/form/FormLabel.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
         "target": "form/FormLabel.vue"
       },
@@ -1809,25 +1809,25 @@
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationFirst.vue"
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationLast.vue"
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationNext.vue"
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationPrev.vue"
       },
@@ -1986,7 +1986,7 @@
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarCellTrigger.vue"
       },
@@ -2034,13 +2034,13 @@
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarNextButton.vue"
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarPrevButton.vue"
       },
@@ -2283,9 +2283,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "Sheet.vue",
       "SheetContent.vue",
-      "utils",
       "Input.vue",
       "Tooltip.vue",
       "TooltipContent.vue",
@@ -2297,7 +2297,7 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2345,7 +2345,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -2393,7 +2393,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -2429,13 +2429,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -2888,7 +2888,7 @@
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
         "type": "registry:ui",
         "target": "toggle-group/ToggleGroupItem.vue"
       },
@@ -2948,13 +2948,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
         "type": "registry:ui",
         "target": "v-calendar/Calendar.vue"
       },
@@ -3675,17 +3675,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/CalendarForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "CalendarForm.vue"
       }
@@ -3698,14 +3698,14 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "calendar",
-      "select",
-      "utils"
+      "select"
     ],
     "files": [
       {
         "path": "example/CalendarWithSelect.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
         "target": "CalendarWithSelect.vue"
       }
@@ -3716,19 +3716,19 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "avatar",
       "button",
       "card",
       "command",
       "dialog",
       "input",
-      "tooltip",
-      "utils"
+      "tooltip"
     ],
     "files": [
       {
         "path": "example/CardChat.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
         "target": "CardChat.vue"
       }
@@ -3739,15 +3739,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "card",
-      "switch",
-      "utils"
+      "switch"
     ],
     "files": [
       {
         "path": "example/CardDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
         "target": "CardDemo.vue"
       }
@@ -4053,15 +4053,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "command",
-      "popover",
-      "utils"
+      "popover"
     ],
     "files": [
       {
         "path": "example/ComboboxDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "ComboboxDemo.vue"
       }
@@ -4094,17 +4094,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "command",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/ComboboxForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
         "target": "ComboboxForm.vue"
       }
@@ -4222,17 +4222,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableColumnPinningDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableColumnPinningDemo.vue"
       }
@@ -4245,17 +4245,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableDemo.vue"
       }
@@ -4285,17 +4285,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableReactiveDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableReactiveDemo.vue"
       }
@@ -4306,15 +4306,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
-      "popover",
-      "utils"
+      "popover"
     ],
     "files": [
       {
         "path": "example/DatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerDemo.vue"
       }
@@ -4329,17 +4329,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/DatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerForm.vue"
       }
@@ -4350,15 +4350,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "range-calendar",
-      "utils"
+      "range-calendar"
     ],
     "files": [
       {
         "path": "example/DatePickerWithIndependentMonths.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithIndependentMonths.vue"
       }
@@ -4369,16 +4369,16 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "popover",
-      "select",
-      "utils"
+      "select"
     ],
     "files": [
       {
         "path": "example/DatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithPresets.vue"
       }
@@ -4389,15 +4389,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "range-calendar",
-      "utils"
+      "range-calendar"
     ],
     "files": [
       {
         "path": "example/DatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithRange.vue"
       }
@@ -4537,7 +4537,7 @@
     "files": [
       {
         "path": "example/DonutChartDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from \"@/registry/new-york/ui/chart-donut\";\n\nconst data = [\n  {\n    name: \"Jan\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Feb\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Mar\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Apr\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"May\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: \"Jun\",\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n];\n\nconst valueFormatter = (tick: number | Date) =>\n  typeof tick === \"number\"\n    ? `$ ${new Intl.NumberFormat(\"us\").format(tick).toString()}`\n    : \"\";\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
         "type": "registry:example",
         "target": "DonutChartDemo.vue"
       }
@@ -5442,13 +5442,13 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
-      "slider",
-      "utils"
+      "utils",
+      "slider"
     ],
     "files": [
       {
         "path": "example/SliderDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
         "target": "SliderDemo.vue"
       }
@@ -5940,7 +5940,7 @@
     "files": [
       {
         "path": "example/ToggleDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from \"@/registry/new-york/ui/toggle\";\n\nimport { FontBoldIcon } from \"@radix-icons/vue\";\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": "ToggleDemo.vue"
       }
@@ -6356,15 +6356,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerDemo.vue"
       }
@@ -6379,17 +6379,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "form",
       "popover",
       "toast",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerForm.vue"
       }
@@ -6400,16 +6400,16 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
       "select",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerWithPresets.vue"
       }
@@ -6420,15 +6420,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerWithRange.vue"
       }
@@ -6439,15 +6439,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDateTimePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDateTimePickerDemo.vue"
       }
@@ -6458,15 +6458,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VRangePickerWithSlot.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { cn } from '@/lib/utils'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "VRangePickerWithSlot.vue"
       }
@@ -6491,7 +6491,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication01.vue",
+        "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication01.vue"
@@ -6517,7 +6517,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication02.vue",
+        "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication02.vue"
@@ -6543,7 +6543,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication03.vue",
+        "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication03.vue"
@@ -6568,7 +6568,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication04.vue",
+        "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication04.vue"
@@ -6598,7 +6598,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard01.vue",
+        "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard01.vue"
@@ -6626,7 +6626,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard02.vue",
+        "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard02.vue"
@@ -6656,7 +6656,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard03.vue",
+        "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard03.vue"
@@ -6684,7 +6684,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard04.vue",
+        "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard04.vue"
@@ -6720,7 +6720,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard05.vue",
+        "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard05.vue"
@@ -6752,7 +6752,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard06.vue",
+        "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard06.vue"
@@ -6787,7 +6787,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard07.vue",
+        "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard07.vue"
@@ -6807,10 +6807,10 @@
     ],
     "files": [
       {
-        "path": "example/Sidebar01.vue",
+        "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
-        "type": "registry:block",
-        "target": "Sidebar01.vue"
+        "type": "registry:page",
+        "target": "Sidebar01Page.vue"
       }
     ]
   },
@@ -6828,10 +6828,10 @@
     ],
     "files": [
       {
-        "path": "example/Sidebar07.vue",
+        "path": "block/Sidebar07/page.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
-        "type": "registry:block",
-        "target": "Sidebar07.vue"
+        "type": "registry:page",
+        "target": "Sidebar07Page.vue"
       }
     ]
   },
@@ -6914,8 +6914,8 @@
     "type": "registry:ui",
     "dependencies": [],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
@@ -6926,13 +6926,13 @@
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
         "type": "registry:ui",
         "target": "alert-dialog/AlertDialogAction.vue"
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
-        "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
         "type": "registry:ui",
         "target": "alert-dialog/AlertDialogCancel.vue"
       },
@@ -7015,9 +7015,9 @@
       "separator",
       "checkbox",
       "switch",
+      "utils",
       "calendar",
       "popover",
-      "utils",
       "label",
       "radio-group",
       "select",
@@ -7051,7 +7051,7 @@
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
         "target": "auto-form/AutoFormFieldDate.vue"
       },
@@ -7282,7 +7282,7 @@
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarCellTrigger.vue"
       },
@@ -7330,13 +7330,13 @@
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarNextButton.vue"
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "calendar/CalendarPrevButton.vue"
       },
@@ -7432,13 +7432,13 @@
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "carousel/CarouselNext.vue"
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "carousel/CarouselPrevious.vue"
       },
@@ -7521,13 +7521,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-area/AreaChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-area/AreaChart.vue"
       },
@@ -7548,13 +7548,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-bar/BarChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-bar/BarChart.vue"
       },
@@ -7575,13 +7575,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-donut/DonutChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-donut/DonutChart.vue"
       },
@@ -7602,13 +7602,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "chart",
-      "utils"
+      "utils",
+      "chart"
     ],
     "files": [
       {
         "path": "ui/chart-line/LineChart.vue",
-        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "chart-line/LineChart.vue"
       },
@@ -8114,7 +8114,7 @@
       },
       {
         "path": "ui/form/FormLabel.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/default/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
         "target": "form/FormLabel.vue"
       },
@@ -8457,25 +8457,25 @@
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationFirst.vue"
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationLast.vue"
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationNext.vue"
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "pagination/PaginationPrev.vue"
       },
@@ -8634,7 +8634,7 @@
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarCellTrigger.vue"
       },
@@ -8682,13 +8682,13 @@
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarNextButton.vue"
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": "range-calendar/RangeCalendarPrevButton.vue"
       },
@@ -8931,9 +8931,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "Sheet.vue",
       "SheetContent.vue",
-      "utils",
       "Input.vue",
       "Tooltip.vue",
       "TooltipContent.vue",
@@ -8945,7 +8945,7 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -8993,7 +8993,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -9041,7 +9041,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -9077,13 +9077,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -9536,7 +9536,7 @@
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
         "type": "registry:ui",
         "target": "toggle-group/ToggleGroupItem.vue"
       },
@@ -9596,13 +9596,13 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "button",
-      "utils"
+      "utils",
+      "button"
     ],
     "files": [
       {
         "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
         "type": "registry:ui",
         "target": "v-calendar/Calendar.vue"
       },
@@ -10323,17 +10323,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/CalendarForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "CalendarForm.vue"
       }
@@ -10346,14 +10346,14 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
+      "utils",
       "calendar",
-      "select",
-      "utils"
+      "select"
     ],
     "files": [
       {
         "path": "example/CalendarWithSelect.vue",
-        "content": "<script setup lang=\"ts\">\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
         "target": "CalendarWithSelect.vue"
       }
@@ -10364,19 +10364,19 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "avatar",
       "button",
       "card",
       "command",
       "dialog",
       "input",
-      "tooltip",
-      "utils"
+      "tooltip"
     ],
     "files": [
       {
         "path": "example/CardChat.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\n\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { cn } from '@/lib/utils'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
         "target": "CardChat.vue"
       }
@@ -10387,15 +10387,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "card",
-      "switch",
-      "utils"
+      "switch"
     ],
     "files": [
       {
         "path": "example/CardDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { cn } from '@/lib/utils'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
         "target": "CardDemo.vue"
       }
@@ -10701,15 +10701,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "command",
-      "popover",
-      "utils"
+      "popover"
     ],
     "files": [
       {
         "path": "example/ComboboxDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "ComboboxDemo.vue"
       }
@@ -10742,17 +10742,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "command",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/ComboboxForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
         "target": "ComboboxForm.vue"
       }
@@ -10763,15 +10763,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "command",
-      "popover",
-      "utils"
+      "popover"
     ],
     "files": [
       {
         "path": "example/ComboboxPopover.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "ComboboxPopover.vue"
       }
@@ -10871,17 +10871,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableColumnPinningDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableColumnPinningDemo.vue"
       }
@@ -10894,17 +10894,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableDemo.vue"
       }
@@ -10934,17 +10934,17 @@
       "@tanstack/vue-table"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "checkbox",
       "dropdown-menu",
       "input",
-      "table",
-      "utils"
+      "table"
     ],
     "files": [
       {
         "path": "example/DataTableReactiveDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { valueUpdater } from '@/lib/utils'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "DataTableReactiveDemo.vue"
       }
@@ -10955,15 +10955,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
-      "popover",
-      "utils"
+      "popover"
     ],
     "files": [
       {
         "path": "example/DatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerDemo.vue"
       }
@@ -10978,17 +10978,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "form",
       "popover",
-      "toast",
-      "utils"
+      "toast"
     ],
     "files": [
       {
         "path": "example/DatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { cn } from '@/lib/utils'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerForm.vue"
       }
@@ -10999,15 +10999,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "range-calendar",
-      "utils"
+      "range-calendar"
     ],
     "files": [
       {
         "path": "example/DatePickerWithIndependentMonths.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\n\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithIndependentMonths.vue"
       }
@@ -11018,16 +11018,16 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "calendar",
       "popover",
-      "select",
-      "utils"
+      "select"
     ],
     "files": [
       {
         "path": "example/DatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { cn } from '@/lib/utils'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithPresets.vue"
       }
@@ -11038,15 +11038,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "range-calendar",
-      "utils"
+      "range-calendar"
     ],
     "files": [
       {
         "path": "example/DatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { cn } from '@/lib/utils'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "DatePickerWithRange.vue"
       }
@@ -12091,13 +12091,13 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
-      "slider",
-      "utils"
+      "utils",
+      "slider"
     ],
     "files": [
       {
         "path": "example/SliderDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Slider } from '@/registry/default/ui/slider'\nimport { cn } from '@/lib/utils'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
         "target": "SliderDemo.vue"
       }
@@ -12138,7 +12138,7 @@
     "files": [
       {
         "path": "example/SonnerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toast } from \"vue-sonner\";\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
         "target": "SonnerDemo.vue"
       }
@@ -13005,15 +13005,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerDemo.vue"
       }
@@ -13028,17 +13028,17 @@
       "zod"
     ],
     "registryDependencies": [
+      "utils",
       "button",
       "form",
       "popover",
       "toast",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerForm.vue"
       }
@@ -13049,16 +13049,16 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
       "select",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerWithPresets.vue"
       }
@@ -13069,15 +13069,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "VDatePickerWithRange.vue"
       }
@@ -13088,15 +13088,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VDateTimePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": "VDateTimePickerDemo.vue"
       }
@@ -13107,15 +13107,15 @@
     "type": "registry:example",
     "dependencies": [],
     "registryDependencies": [
+      "utils",
       "button",
       "popover",
-      "v-calendar",
-      "utils"
+      "v-calendar"
     ],
     "files": [
       {
         "path": "example/VRangePickerWithSlot.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { cn } from '@/lib/utils'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "VRangePickerWithSlot.vue"
       }
@@ -13140,7 +13140,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication01.vue",
+        "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication01.vue"
@@ -13166,7 +13166,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication02.vue",
+        "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication02.vue"
@@ -13192,7 +13192,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication03.vue",
+        "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication03.vue"
@@ -13217,7 +13217,7 @@
     ],
     "files": [
       {
-        "path": "example/Authentication04.vue",
+        "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Authentication04.vue"
@@ -13247,7 +13247,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard01.vue",
+        "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard01.vue"
@@ -13275,7 +13275,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard02.vue",
+        "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard02.vue"
@@ -13305,7 +13305,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard03.vue",
+        "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard03.vue"
@@ -13333,7 +13333,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard04.vue",
+        "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard04.vue"
@@ -13369,7 +13369,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard05.vue",
+        "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard05.vue"
@@ -13401,7 +13401,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard06.vue",
+        "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard06.vue"
@@ -13436,7 +13436,7 @@
     ],
     "files": [
       {
-        "path": "example/Dashboard07.vue",
+        "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
         "target": "Dashboard07.vue"
@@ -13456,10 +13456,10 @@
     ],
     "files": [
       {
-        "path": "example/Sidebar01.vue",
+        "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
-        "type": "registry:block",
-        "target": "Sidebar01.vue"
+        "type": "registry:page",
+        "target": "Sidebar01Page.vue"
       }
     ]
   },
@@ -13477,10 +13477,10 @@
     ],
     "files": [
       {
-        "path": "example/Sidebar07.vue",
+        "path": "block/Sidebar07/page.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
-        "type": "registry:block",
-        "target": "Sidebar07.vue"
+        "type": "registry:page",
+        "target": "Sidebar07Page.vue"
       }
     ]
   }
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index 7c5ffe951..e77fba0a1 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -36,10 +36,10 @@ export async function buildRegistry() {
     // const hookPath = resolve(registryRootPath, style, 'hook')
 
     const [ui, example, block] = await Promise.all([
-      crawlUI(uiPath, style),
-      crawlExample(examplePath, style),
-      crawlBlock(blockPath, style),
-      // crawlHook(hookPath, style),
+      crawlUI(uiPath),
+      crawlExample(examplePath),
+      crawlBlock(blockPath),
+      // crawlHook(hookPath),
     ])
 
     registry.push(...ui, ...example, ...block)
@@ -48,7 +48,7 @@ export async function buildRegistry() {
   return registry
 }
 
-async function crawlUI(rootPath: string, style: RegistryStyle) {
+async function crawlUI(rootPath: string) {
   const dir = await readdir(rootPath, { recursive: true, withFileTypes: true })
 
   const uiRegistry: Registry = []
@@ -58,14 +58,14 @@ async function crawlUI(rootPath: string, style: RegistryStyle) {
       continue
 
     const componentPath = resolve(rootPath, dirent.name)
-    const ui = await buildUIRegistry(componentPath, dirent.name, style)
+    const ui = await buildUIRegistry(componentPath, dirent.name)
     uiRegistry.push(ui)
   }
 
   return uiRegistry
 }
 
-async function crawlExample(rootPath: string, style: RegistryStyle) {
+async function crawlExample(rootPath: string) {
   const type = `registry:example` as const
 
   const dir = await readdir(rootPath, { withFileTypes: true })
@@ -86,7 +86,7 @@ async function crawlExample(rootPath: string, style: RegistryStyle) {
       name: dirent.name,
       content: source,
       path: relativePath,
-      style,
+      // style,
       target: dirent.name,
       type,
     }
@@ -105,7 +105,7 @@ async function crawlExample(rootPath: string, style: RegistryStyle) {
   return registry
 }
 
-async function crawlBlock(rootPath: string, style: RegistryStyle) {
+async function crawlBlock(rootPath: string) {
   const type = `registry:block` as const
 
   const dir = await readdir(rootPath, { withFileTypes: true })
@@ -117,7 +117,6 @@ async function crawlBlock(rootPath: string, style: RegistryStyle) {
       const result = await buildBlockRegistry(
         `${rootPath}/${dirent.name}`,
         dirent.name,
-        style,
       )
       registry.push(result)
       continue
@@ -129,13 +128,12 @@ async function crawlBlock(rootPath: string, style: RegistryStyle) {
 
     const filepath = join(rootPath, dirent.name)
     const source = await readFile(filepath, { encoding: 'utf8' })
-    const relativePath = join('example', dirent.name)
+    const relativePath = join('block', dirent.name)
 
     const file = {
       name: dirent.name,
       content: source,
       path: relativePath,
-      style,
       target: dirent.name,
       type,
     }
@@ -192,7 +190,7 @@ async function crawlHook(rootPath: string, style: RegistryStyle) {
   return registry
 }
 
-async function buildUIRegistry(componentPath: string, componentName: string, style: RegistryStyle) {
+async function buildUIRegistry(componentPath: string, componentName: string) {
   const dir = await readdir(componentPath, {
     withFileTypes: true,
   })
@@ -234,7 +232,7 @@ async function buildUIRegistry(componentPath: string, componentName: string, sty
   } satisfies RegistryItem
 }
 
-async function buildBlockRegistry(blockPath: string, blockName: string, style: RegistryStyle) {
+async function buildBlockRegistry(blockPath: string, blockName: string) {
   const dir = await readdir(blockPath, { withFileTypes: true, recursive: true })
 
   const files: RegistryFiles[] = []
@@ -244,7 +242,7 @@ async function buildBlockRegistry(blockPath: string, blockName: string, style: R
   for (const dirent of dir) {
     if (!dirent.isFile())
       continue
-    const isPage = dirent.name === '+page.vue'
+    const isPage = dirent.name === 'page.vue'
     const type = isPage ? 'registry:page' : 'registry:component'
 
     // TODO: fix
diff --git a/apps/www/src/registry/default/block/Sidebar01.vue b/apps/www/src/registry/default/block/Sidebar01/page.vue
similarity index 100%
rename from apps/www/src/registry/default/block/Sidebar01.vue
rename to apps/www/src/registry/default/block/Sidebar01/page.vue
diff --git a/apps/www/src/registry/default/block/Sidebar07.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
similarity index 100%
rename from apps/www/src/registry/default/block/Sidebar07.vue
rename to apps/www/src/registry/default/block/Sidebar07/page.vue
diff --git a/apps/www/src/registry/new-york/block/Sidebar01.vue b/apps/www/src/registry/new-york/block/Sidebar01/page.vue
similarity index 100%
rename from apps/www/src/registry/new-york/block/Sidebar01.vue
rename to apps/www/src/registry/new-york/block/Sidebar01/page.vue
diff --git a/apps/www/src/registry/new-york/block/Sidebar07.vue b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
similarity index 100%
rename from apps/www/src/registry/new-york/block/Sidebar07.vue
rename to apps/www/src/registry/new-york/block/Sidebar07/page.vue

From ec54afa796c38c26619b023f99c94d0c9c735425 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 21 Nov 2024 15:56:39 +0800
Subject: [PATCH 14/39] chore: lint generated files

---
 apps/www/__registry__/index.ts                |  1 +
 apps/www/scripts/build-registry.ts            | 58 +++++++++----------
 apps/www/src/public/r/index.json              |  2 +-
 .../src/public/r/styles/default/index.json    |  2 +-
 apps/www/src/public/r/styles/index.json       |  2 +-
 .../src/public/r/styles/new-york/index.json   |  2 +-
 apps/www/src/public/r/temp.json               |  2 +-
 apps/www/src/public/r/themes.css              |  2 +-
 apps/www/src/public/r/themes/gray.json        |  2 +-
 apps/www/src/public/r/themes/neutral.json     |  2 +-
 apps/www/src/public/r/themes/slate.json       |  2 +-
 apps/www/src/public/r/themes/stone.json       |  2 +-
 apps/www/src/public/r/themes/zinc.json        |  2 +-
 13 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6c74205f5..002898429 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -21505,3 +21505,4 @@ export const Index: Record<string, any> = {
     },
   },
 }
+
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index cacd04d57..e9e5e9d49 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -232,7 +232,7 @@ export const Index: Record<string, any> = {
 
       //   //     // Write component file.
       //   //     rimraf.sync(targetFilePath)
-      //   //     await fs.writeFile(targetFilePath, code, 'utf8')
+      //   //     await writeFile(targetFilePath, code, 'utf8')
 
       //   //     return {
       //   //       name: chunkName,
@@ -266,8 +266,8 @@ export const Index: Record<string, any> = {
       //   }
 
       //   rimraf.sync(sourcePath)
-      //   // await fs.writeFile(sourcePath, sourceFile.getText())
-      //   await fs.writeFile(sourcePath, raw)
+      //   // await writeFile(sourcePath, sourceFile.getText())
+      //   await writeFile(sourcePath, raw)
       // }
 
       let componentPath = `@/registry/${style.name}/${type}/${item.name}`
@@ -346,15 +346,14 @@ export const Index: Record<string, any> = {
     })
   const registryJson = JSON.stringify(items, null, 2)
   rimraf.sync(path.join(REGISTRY_PATH, 'index.json'))
-  await fs.writeFile(
+  await writeFile(
     path.join(REGISTRY_PATH, 'index.json'),
     registryJson,
-    'utf8',
   )
 
   // Write style index.
   rimraf.sync(path.join(process.cwd(), '__registry__/index.ts'))
-  await fs.writeFile(path.join(process.cwd(), '__registry__/index.ts'), index)
+  await writeFile(path.join(process.cwd(), '__registry__/index.ts'), index)
 }
 
 // ----------------------------------------------------------------------------
@@ -458,10 +457,9 @@ async function buildStyles(registry: Registry) {
         })
 
       if (payload.success) {
-        await fs.writeFile(
+        await writeFile(
           path.join(targetPath, `${item.name}.json`),
-          `${JSON.stringify(payload.data, null, 2)}\r\n`,
-          'utf8',
+          JSON.stringify(payload.data, null, 2),
         )
       }
     }
@@ -471,10 +469,10 @@ async function buildStyles(registry: Registry) {
   // Build registry/styles/index.json.
   // ----------------------------------------------------------------------------
   const stylesJson = JSON.stringify(styles, null, 2)
-  await fs.writeFile(
+  await writeFile(
     path.join(REGISTRY_PATH, 'styles/index.json'),
     stylesJson,
-    'utf8',
+
   )
 }
 
@@ -510,10 +508,10 @@ async function buildStylesIndex() {
       files: [],
     }
 
-    await fs.writeFile(
+    await writeFile(
       path.join(targetPath, 'index.json'),
       JSON.stringify(payload, null, 2),
-      'utf8',
+
     )
   }
 }
@@ -560,10 +558,10 @@ async function buildThemes() {
     }
   }
 
-  await fs.writeFile(
+  await writeFile(
     path.join(colorsTargetPath, 'index.json'),
-    `${JSON.stringify(colorsData, null, 2)}\r\n`,
-    'utf8',
+    JSON.stringify(colorsData, null, 2),
+
   )
 
   // ----------------------------------------------------------------------------
@@ -682,10 +680,9 @@ async function buildThemes() {
       colors: base.cssVars,
     })
 
-    await fs.writeFile(
+    await writeFile(
       path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
-      `${JSON.stringify(base, null, 2)}\r\n`,
-      'utf8',
+      JSON.stringify(base, null, 2),
     )
 
     // ----------------------------------------------------------------------------
@@ -766,10 +763,9 @@ async function buildThemes() {
       )
     }
 
-    await fs.writeFile(
+    await writeFile(
       path.join(REGISTRY_PATH, `themes.css`),
       themeCSS.join('\n'),
-      'utf8',
     )
 
     // ----------------------------------------------------------------------------
@@ -809,10 +805,9 @@ async function buildThemes() {
         await fs.mkdir(targetPath, { recursive: true })
       }
 
-      await fs.writeFile(
+      await writeFile(
         path.join(targetPath, `${payload.name}.json`),
         JSON.stringify(payload, null, 2),
-        'utf8',
       )
     }
   }
@@ -830,10 +825,9 @@ async function buildIcons() {
 
   const iconsData = icons
 
-  await fs.writeFile(
+  await writeFile(
     path.join(iconsTargetPath, 'index.json'),
     JSON.stringify(iconsData, null, 2),
-    'utf8',
   )
 }
 
@@ -870,10 +864,9 @@ export const Icons = {
 
   // Write style index.
   rimraf.sync(path.join(process.cwd(), '__registry__/icons.ts'))
-  await fs.writeFile(
+  await writeFile(
     path.join(process.cwd(), '__registry__/icons.ts'),
     index,
-    'utf8',
   )
 }
 
@@ -881,10 +874,9 @@ try {
   const content = await crawlContent()
   const result = registrySchema.safeParse([...registry, ...content])
 
-  await fs.writeFile(
+  await writeFile(
     path.join(REGISTRY_PATH, 'temp.json'),
     JSON.stringify(result.data ?? '', null, 2),
-    'utf8',
   )
 
   if (!result.success) {
@@ -907,3 +899,11 @@ catch (error) {
   console.error(error)
   process.exit(1)
 }
+
+async function writeFile(path: string, payload: any) {
+  return fs.writeFile(
+    path,
+    `${payload}\r\n`,
+    'utf8',
+  )
+}
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index 309e2cdc5..ce9989f0d 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -4133,4 +4133,4 @@
       }
     ]
   }
-]
+]
diff --git a/apps/www/src/public/r/styles/default/index.json b/apps/www/src/public/r/styles/default/index.json
index cfc8b34e6..2ea6ce1fd 100644
--- a/apps/www/src/public/r/styles/default/index.json
+++ b/apps/www/src/public/r/styles/default/index.json
@@ -18,4 +18,4 @@
   },
   "cssVars": {},
   "files": []
-}
+}
diff --git a/apps/www/src/public/r/styles/index.json b/apps/www/src/public/r/styles/index.json
index 01e5b23fd..f814dface 100644
--- a/apps/www/src/public/r/styles/index.json
+++ b/apps/www/src/public/r/styles/index.json
@@ -7,4 +7,4 @@
     "name": "default",
     "label": "Default"
   }
-]
+]
diff --git a/apps/www/src/public/r/styles/new-york/index.json b/apps/www/src/public/r/styles/new-york/index.json
index 238a76756..5baa4e050 100644
--- a/apps/www/src/public/r/styles/new-york/index.json
+++ b/apps/www/src/public/r/styles/new-york/index.json
@@ -18,4 +18,4 @@
   },
   "cssVars": {},
   "files": []
-}
+}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 6a655987a..35ca9c805 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -13484,4 +13484,4 @@
       }
     ]
   }
-]
+]
diff --git a/apps/www/src/public/r/themes.css b/apps/www/src/public/r/themes.css
index f953bb054..de03d7495 100644
--- a/apps/www/src/public/r/themes.css
+++ b/apps/www/src/public/r/themes.css
@@ -765,4 +765,4 @@
   --destructive-foreground: 210 20% 98%;
 
   --ring: 263.4 70% 50.4%;
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/r/themes/gray.json b/apps/www/src/public/r/themes/gray.json
index 789a82039..a3ade59bd 100644
--- a/apps/www/src/public/r/themes/gray.json
+++ b/apps/www/src/public/r/themes/gray.json
@@ -55,4 +55,4 @@
       "chart-5": "340 75% 55%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/themes/neutral.json b/apps/www/src/public/r/themes/neutral.json
index cb928ac29..dae819bb4 100644
--- a/apps/www/src/public/r/themes/neutral.json
+++ b/apps/www/src/public/r/themes/neutral.json
@@ -55,4 +55,4 @@
       "chart-5": "340 75% 55%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/themes/slate.json b/apps/www/src/public/r/themes/slate.json
index b0f1bb856..7a9e142f1 100644
--- a/apps/www/src/public/r/themes/slate.json
+++ b/apps/www/src/public/r/themes/slate.json
@@ -55,4 +55,4 @@
       "chart-5": "340 75% 55%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/themes/stone.json b/apps/www/src/public/r/themes/stone.json
index 425b2ee88..d809ac856 100644
--- a/apps/www/src/public/r/themes/stone.json
+++ b/apps/www/src/public/r/themes/stone.json
@@ -55,4 +55,4 @@
       "chart-5": "340 75% 55%"
     }
   }
-}
+}
diff --git a/apps/www/src/public/r/themes/zinc.json b/apps/www/src/public/r/themes/zinc.json
index edd349eb9..cec2d0066 100644
--- a/apps/www/src/public/r/themes/zinc.json
+++ b/apps/www/src/public/r/themes/zinc.json
@@ -55,4 +55,4 @@
       "chart-5": "340 75% 55%"
     }
   }
-}
+}

From 01808de25ce4a1e46f8842b58a9d7d5f88514f9e Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 22 Nov 2024 15:03:41 +0800
Subject: [PATCH 15/39] refactor: cli, add test

---
 .gitignore                                    |    4 +-
 .../theme/components/CodeSandbox.vue          |    4 +-
 .../theme/components/Stackblitz.vue           |    4 +-
 apps/www/.vitepress/theme/utils/codeeditor.ts |   10 +-
 apps/www/__registry__/index.ts                |  484 ------
 apps/www/src/public/r/temp.json               |  154 --
 apps/www/src/public/r/themes.css              |    2 +-
 apps/www/src/registry/crawl-content.ts        |    6 +-
 package.json                                  |    1 +
 packages/cli/package.json                     |    4 +-
 packages/cli/src/commands/init.ts             |   42 +-
 .../cli/src/migrations/migrate-icons.test.ts  |   23 +-
 packages/cli/src/utils/get-config.ts          |   21 +-
 packages/cli/src/utils/get-project-info.ts    |   24 +-
 packages/cli/src/utils/handle-error.ts        |    1 +
 packages/cli/src/utils/registry/index.ts      |   57 +-
 .../utils/transformers/transform-import.ts    |    4 +-
 .../cli/src/utils/updaters/update-css-vars.ts |    2 +-
 packages/cli/test/commands/init.test.ts       |  172 +-
 .../test/fixtures/config-full/components.json |    4 +-
 .../test/fixtures/config-js/components.json   |    3 +-
 .../fixtures/config-nuxt/.nuxt/tsconfig.json  |   99 ++
 .../test/fixtures/config-ui/components.json   |   15 +
 .../cli/test/fixtures/config-ui/package.json  |    7 +
 .../cli/test/fixtures/config-ui/tsconfig.json |   33 +
 .../frameworks/nuxt/.nuxt/tsconfig.json       |   99 ++
 .../fixtures/{ => frameworks}/nuxt/app.vue    |    0
 .../nuxt/assets/css/tailwind.css              |    0
 .../{ => frameworks}/nuxt/components.json     |    0
 .../ui/alert-dialog/AlertDialog.vue           |    0
 .../ui/alert-dialog/AlertDialogAction.vue     |    0
 .../ui/alert-dialog/AlertDialogCancel.vue     |    0
 .../ui/alert-dialog/AlertDialogContent.vue    |    0
 .../alert-dialog/AlertDialogDescription.vue   |    0
 .../ui/alert-dialog/AlertDialogFooter.vue     |    0
 .../ui/alert-dialog/AlertDialogHeader.vue     |    0
 .../ui/alert-dialog/AlertDialogTitle.vue      |    0
 .../ui/alert-dialog/AlertDialogTrigger.vue    |    0
 .../nuxt/components/ui/alert-dialog/index.ts  |    0
 .../nuxt/components/ui/button/Button.vue      |    0
 .../nuxt/components/ui/button/index.ts        |    0
 .../{ => frameworks}/nuxt/lib/utils.ts        |    0
 .../{ => frameworks}/nuxt/nuxt.config.ts      |    0
 .../{ => frameworks}/nuxt/package.json        |    0
 .../frameworks/nuxt/tailwind.config.ts        |   18 +
 .../{ => frameworks}/nuxt/tsconfig.json       |    0
 .../test/fixtures/frameworks/vite/.gitignore  |   30 +
 .../test/fixtures/frameworks/vite/env.d.ts    |    1 +
 .../test/fixtures/frameworks/vite/index.html  |   13 +
 .../fixtures/frameworks/vite/package.json     |   27 +
 .../frameworks/vite/postcss.config.js         |    6 +
 .../test/fixtures/frameworks/vite/src/App.vue |   47 +
 .../vite/src/components/HelloWorld.vue        |   43 +
 .../fixtures/frameworks/vite/src/index.css    |    3 +
 .../test/fixtures/frameworks/vite/src/main.ts |    6 +
 .../frameworks/vite/tailwind.config.js        |    8 +
 .../frameworks/vite/tsconfig.app.json         |   13 +
 .../fixtures/frameworks/vite/tsconfig.json    |    7 +
 .../frameworks/vite/tsconfig.node.json        |   18 +
 .../fixtures/frameworks/vite/vite.config.ts   |   18 +
 packages/cli/test/fixtures/nuxt/.gitignore    |   24 -
 packages/cli/test/fixtures/nuxt/.npmrc        |    1 -
 packages/cli/test/fixtures/nuxt/README.md     |   75 -
 .../cli/test/fixtures/nuxt/tailwind.config.js |   70 -
 packages/cli/test/utils/get-config.test.ts    |   40 +-
 .../test/utils/get-item-target-path.test.ts   |   39 +
 .../cli/test/utils/get-project-info.test.ts   |   36 +
 .../test/utils/get-tailwind-css-file.test.ts  |   23 +
 .../utils/get-ts-config-alias-prefix.test.ts  |   27 +
 .../test/utils/is-typescript-project.test.ts  |   19 +
 .../registry-resolve-items-tree.test.ts.snap  |  951 ++++++++++++
 .../registry-resolve-items-tree.test.ts       |   38 +
 .../update-tailwind-config.test.ts.snap       |  572 +++++++
 .../update-tailwind-content.test.ts.snap      |   52 +
 .../utils/updaters/update-css-vars.test.ts    |  175 +++
 .../test/utils/updaters/update-files.test.ts  |   65 +
 .../updaters/update-tailwind-config.test.ts   | 1383 +++++++++++++++++
 .../updaters/update-tailwind-content.test.ts  |   94 ++
 packages/cli/tsup.config.ts                   |    2 +-
 pnpm-lock.yaml                                |    3 +
 80 files changed, 4197 insertions(+), 1029 deletions(-)
 create mode 100644 packages/cli/test/fixtures/config-nuxt/.nuxt/tsconfig.json
 create mode 100644 packages/cli/test/fixtures/config-ui/components.json
 create mode 100644 packages/cli/test/fixtures/config-ui/package.json
 create mode 100644 packages/cli/test/fixtures/config-ui/tsconfig.json
 create mode 100644 packages/cli/test/fixtures/frameworks/nuxt/.nuxt/tsconfig.json
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/app.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/assets/css/tailwind.css (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components.json (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialog.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogAction.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogContent.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/alert-dialog/index.ts (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/button/Button.vue (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/components/ui/button/index.ts (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/lib/utils.ts (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/nuxt.config.ts (100%)
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/package.json (100%)
 create mode 100644 packages/cli/test/fixtures/frameworks/nuxt/tailwind.config.ts
 rename packages/cli/test/fixtures/{ => frameworks}/nuxt/tsconfig.json (100%)
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/.gitignore
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/env.d.ts
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/index.html
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/package.json
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/postcss.config.js
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/src/App.vue
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/src/components/HelloWorld.vue
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/src/index.css
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/src/main.ts
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/tailwind.config.js
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/tsconfig.app.json
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/tsconfig.json
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/tsconfig.node.json
 create mode 100644 packages/cli/test/fixtures/frameworks/vite/vite.config.ts
 delete mode 100644 packages/cli/test/fixtures/nuxt/.gitignore
 delete mode 100644 packages/cli/test/fixtures/nuxt/.npmrc
 delete mode 100644 packages/cli/test/fixtures/nuxt/README.md
 delete mode 100644 packages/cli/test/fixtures/nuxt/tailwind.config.js
 create mode 100644 packages/cli/test/utils/get-item-target-path.test.ts
 create mode 100644 packages/cli/test/utils/get-project-info.test.ts
 create mode 100644 packages/cli/test/utils/get-tailwind-css-file.test.ts
 create mode 100644 packages/cli/test/utils/get-ts-config-alias-prefix.test.ts
 create mode 100644 packages/cli/test/utils/is-typescript-project.test.ts
 create mode 100644 packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
 create mode 100644 packages/cli/test/utils/schema/registry-resolve-items-tree.test.ts
 create mode 100644 packages/cli/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
 create mode 100644 packages/cli/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap
 create mode 100644 packages/cli/test/utils/updaters/update-css-vars.test.ts
 create mode 100644 packages/cli/test/utils/updaters/update-files.test.ts
 create mode 100644 packages/cli/test/utils/updaters/update-tailwind-config.test.ts
 create mode 100644 packages/cli/test/utils/updaters/update-tailwind-content.test.ts

diff --git a/.gitignore b/.gitignore
index b49484881..3b0b3496e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-.nuxt
+# .nuxt
 .env
 node_modules
 .DS_Store
@@ -34,4 +34,4 @@ test-results/
 playwright-report/
 vite.config.ts.timestamp*
 
-**/.vitepress/cache/*
\ No newline at end of file
+**/.vitepress/cache/*
diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue
index 89f20b516..363a3f018 100644
--- a/apps/www/.vitepress/theme/components/CodeSandbox.vue
+++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Style } from '@/registry/registry-styles'
+import type { RegistryStyle } from '@/registry/registry-styles'
 import { Button } from '@/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
@@ -9,7 +9,7 @@ import Tooltip from './Tooltip.vue'
 const props = defineProps<{
   name: string
   code: string
-  style: Style
+  style: RegistryStyle
 }>()
 
 const { code } = toRefs(props)
diff --git a/apps/www/.vitepress/theme/components/Stackblitz.vue b/apps/www/.vitepress/theme/components/Stackblitz.vue
index cf183b556..79bf95d38 100644
--- a/apps/www/.vitepress/theme/components/Stackblitz.vue
+++ b/apps/www/.vitepress/theme/components/Stackblitz.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Style } from '@/registry/registry-styles'
+import type { RegistryStyle } from '@/registry/registry-styles'
 import { Button } from '@/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
@@ -9,7 +9,7 @@ import Tooltip from './Tooltip.vue'
 const props = defineProps<{
   name: string
   code: string
-  style: Style
+  style: RegistryStyle
 }>()
 
 const { code } = toRefs(props)
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index 98839602c..f406f56b8 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -1,13 +1,13 @@
-import type { Style } from '@/registry/registry-styles'
+import type { RegistryStyle } from '@/registry/registry-styles'
 import sdk from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
 import { Index as demoIndex } from '../../../../www/__registry__'
 // @ts-expect-error ?raw
 import tailwindConfigRaw from '../../../tailwind.config?raw'
 // @ts-expect-error ?raw
-import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw'
+import cssRaw from '../../../../../packages/cli/test/fixtures/frameworks/nuxt/assets/css/tailwind.css?raw'
 
-export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
+export function makeCodeSandboxParams(componentName: string, style: RegistryStyle, sources: Record<string, string>) {
   let files: Record<string, any> = {}
   files = constructFiles(componentName, style, sources)
   files['.codesandbox/Dockerfile'] = {
@@ -16,7 +16,7 @@ export function makeCodeSandboxParams(componentName: string, style: Style, sourc
   return getParameters({ files, template: 'node' })
 }
 
-export function makeStackblitzParams(componentName: string, style: Style, sources: Record<string, string>) {
+export function makeStackblitzParams(componentName: string, style: RegistryStyle, sources: Record<string, string>) {
   const files: Record<string, string> = {}
   Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content))
 
@@ -73,7 +73,7 @@ export default defineConfig({
   },
 }
 
-function constructFiles(componentName: string, style: Style, sources: Record<string, string>) {
+function constructFiles(componentName: string, style: RegistryStyle, sources: Record<string, string>) {
   const componentsJson = {
     style,
     tailwind: {
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 002898429..53a31398d 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5070,17 +5070,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication01": {
-      name: "Authentication01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -5096,17 +5085,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication02": {
       name: "Authentication02",
       description: "",
@@ -5122,17 +5100,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication03": {
       name: "Authentication03",
       description: "",
@@ -5148,17 +5115,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication04": {
       name: "Authentication04",
       description: "",
@@ -5174,17 +5130,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard01": {
       name: "Dashboard01",
       description: "",
@@ -5200,17 +5145,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard02": {
       name: "Dashboard02",
       description: "",
@@ -5226,17 +5160,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard03": {
       name: "Dashboard03",
       description: "",
@@ -5252,17 +5175,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard04": {
       name: "Dashboard04",
       description: "",
@@ -5278,17 +5190,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard05").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard05": {
       name: "Dashboard05",
       description: "",
@@ -5304,17 +5205,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard06").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard06": {
       name: "Dashboard06",
       description: "",
@@ -5330,17 +5220,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard07").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard07": {
       name: "Dashboard07",
       description: "",
@@ -10437,17 +10316,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication01": {
-      name: "Authentication01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -10463,17 +10331,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication02": {
       name: "Authentication02",
       description: "",
@@ -10489,17 +10346,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication03": {
       name: "Authentication03",
       description: "",
@@ -10515,17 +10361,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Authentication04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication04": {
       name: "Authentication04",
       description: "",
@@ -10541,17 +10376,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard01": {
       name: "Dashboard01",
       description: "",
@@ -10567,17 +10391,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard02": {
       name: "Dashboard02",
       description: "",
@@ -10593,17 +10406,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard03": {
       name: "Dashboard03",
       description: "",
@@ -10619,17 +10421,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard04": {
       name: "Dashboard04",
       description: "",
@@ -10645,17 +10436,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard05").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard05": {
       name: "Dashboard05",
       description: "",
@@ -10671,17 +10451,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard06").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard06": {
       name: "Dashboard06",
       description: "",
@@ -10697,17 +10466,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/new-york/block/Dashboard07").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard07": {
       name: "Dashboard07",
       description: "",
@@ -15820,17 +15578,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication01": {
-      name: "Authentication01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -15846,17 +15593,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication02": {
       name: "Authentication02",
       description: "",
@@ -15872,17 +15608,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication03": {
       name: "Authentication03",
       description: "",
@@ -15898,17 +15623,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication04": {
       name: "Authentication04",
       description: "",
@@ -15924,17 +15638,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard01": {
       name: "Dashboard01",
       description: "",
@@ -15950,17 +15653,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard02": {
       name: "Dashboard02",
       description: "",
@@ -15976,17 +15668,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard03": {
       name: "Dashboard03",
       description: "",
@@ -16002,17 +15683,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard04": {
       name: "Dashboard04",
       description: "",
@@ -16028,17 +15698,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard05").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard05": {
       name: "Dashboard05",
       description: "",
@@ -16054,17 +15713,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard06").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard06": {
       name: "Dashboard06",
       description: "",
@@ -16080,17 +15728,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard07").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard07": {
       name: "Dashboard07",
       description: "",
@@ -21187,17 +20824,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication01": {
-      name: "Authentication01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -21213,17 +20839,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication02": {
       name: "Authentication02",
       description: "",
@@ -21239,17 +20854,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication03": {
       name: "Authentication03",
       description: "",
@@ -21265,17 +20869,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Authentication04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication04": {
       name: "Authentication04",
       description: "",
@@ -21291,17 +20884,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard01").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard01": {
       name: "Dashboard01",
       description: "",
@@ -21317,17 +20899,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard02").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard02": {
       name: "Dashboard02",
       description: "",
@@ -21343,17 +20914,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard03").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard03": {
       name: "Dashboard03",
       description: "",
@@ -21369,17 +20929,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard04").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard04": {
       name: "Dashboard04",
       description: "",
@@ -21395,17 +20944,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard05").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard05": {
       name: "Dashboard05",
       description: "",
@@ -21421,17 +20959,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard06").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard06": {
       name: "Dashboard06",
       description: "",
@@ -21447,17 +20974,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [],
-      files: [],
-      component: () => import("@/registry/default/block/Dashboard07").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Dashboard07": {
       name: "Dashboard07",
       description: "",
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 35ca9c805..aa71417a7 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -6472,13 +6472,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication01",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication01",
     "type": "registry:block",
@@ -6498,13 +6491,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication02",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication02",
     "type": "registry:block",
@@ -6524,13 +6510,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication03",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication03",
     "type": "registry:block",
@@ -6550,13 +6529,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication04",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication04",
     "type": "registry:block",
@@ -6575,13 +6547,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard01",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard01",
     "type": "registry:block",
@@ -6605,13 +6570,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard02",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard02",
     "type": "registry:block",
@@ -6633,13 +6591,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard03",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard03",
     "type": "registry:block",
@@ -6663,13 +6614,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard04",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard04",
     "type": "registry:block",
@@ -6691,13 +6635,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard05",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard05",
     "type": "registry:block",
@@ -6727,13 +6664,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard06",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard06",
     "type": "registry:block",
@@ -6759,13 +6689,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard07",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard07",
     "type": "registry:block",
@@ -13121,13 +13044,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication01",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication01",
     "type": "registry:block",
@@ -13147,13 +13063,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication02",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication02",
     "type": "registry:block",
@@ -13173,13 +13082,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication03",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication03",
     "type": "registry:block",
@@ -13199,13 +13101,6 @@
       }
     ]
   },
-  {
-    "name": "Authentication04",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Authentication04",
     "type": "registry:block",
@@ -13224,13 +13119,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard01",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard01",
     "type": "registry:block",
@@ -13254,13 +13142,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard02",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard02",
     "type": "registry:block",
@@ -13282,13 +13163,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard03",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard03",
     "type": "registry:block",
@@ -13312,13 +13186,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard04",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard04",
     "type": "registry:block",
@@ -13340,13 +13207,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard05",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard05",
     "type": "registry:block",
@@ -13376,13 +13236,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard06",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard06",
     "type": "registry:block",
@@ -13408,13 +13261,6 @@
       }
     ]
   },
-  {
-    "name": "Dashboard07",
-    "type": "registry:block",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": []
-  },
   {
     "name": "Dashboard07",
     "type": "registry:block",
diff --git a/apps/www/src/public/r/themes.css b/apps/www/src/public/r/themes.css
index de03d7495..904a09083 100644
--- a/apps/www/src/public/r/themes.css
+++ b/apps/www/src/public/r/themes.css
@@ -765,4 +765,4 @@
   --destructive-foreground: 210 20% 98%;
 
   --ring: 263.4 70% 50.4%;
-}
+}
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index e77fba0a1..af95f0e90 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -118,7 +118,11 @@ async function crawlBlock(rootPath: string) {
         `${rootPath}/${dirent.name}`,
         dirent.name,
       )
-      registry.push(result)
+
+      // console.log(result.name, result.files.length)
+      if (result.files.length) {
+        registry.push(result)
+      }
       continue
     }
     if (!dirent.name.endsWith('.vue') || !dirent.isFile())
diff --git a/package.json b/package.json
index 9cb74ab73..e3cb146d6 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "lint:fix": "eslint . --fix",
     "dev:cli": "pnpm --filter shadcn-vue dev",
     "dev:nuxt": "pnpm --filter shadcn-nuxt dev",
+    "start:cli": "pnpm --filter shadcn-vue start:dev",
     "build:cli": "pnpm --filter shadcn-vue build",
     "build:registry": "pnpm --filter=www build:registry",
     "bumpp": "bumpp package.json packages/*/package.json apps/*/package.json",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 2f3b432ec..9d5597741 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -36,13 +36,13 @@
     "clean": "node ./scripts/rimraf.js",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "start:dev": "COMPONENTS_REGISTRY_URL=http://localhost:3001 node dist/index.js",
+    "start:dev": "REGISTRY_URL=http://localhost:5173/r node dist/index.js",
     "start": "node dist/index.js",
     "release": "changeset version",
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
     "pub:release": "pnpm build && pnpm publish  --no-git-checks --access public",
-    "test": "vitest run",
+    "test": "REGISTRY_URL=http://localhost:5173/r vitest run",
     "test:update": "vitest run -u",
     "test:ui": "vitest --ui"
   },
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index d302c7093..6f0453f4d 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,6 +1,5 @@
 import { promises as fs } from 'node:fs'
 import path from 'node:path'
-import { preFlightInit } from '@/src/preflights/preflight-init'
 import { addComponents } from '@/src/utils/add-components'
 import {
   type Config,
@@ -84,24 +83,27 @@ export async function runInit(
     skipPreflight?: boolean
   },
 ) {
-  let projectInfo
-  if (!options.skipPreflight) {
-    const preflight = await preFlightInit(options)
-    // if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-    //   const { projectPath } = await createProject(options)
-    //   if (!projectPath) {
-    //     process.exit(1)
-    //   }
-    //   options.cwd = projectPath
-    //   options.isNewProject = true
-    // }
-    projectInfo = preflight.projectInfo
-  }
-  else {
-    projectInfo = await getProjectInfo(options.cwd)
-  }
-
+  // let projectInfo
+  // if (!options.skipPreflight) {
+  //   const preflight = await preFlightInit(options)
+  //   if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+  //     process.exit(1)
+  //   }
+  //   // if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
+  //   //   const { projectPath } = await createProject(options)
+  //   //   if (!projectPath) {
+  //   //     process.exit(1)
+  //   //   }
+  //   //   options.cwd = projectPath
+  //   //   options.isNewProject = true
+  //   // }
+  //   projectInfo = preflight.projectInfo
+  // }
+  // else {
+  // }
+  const projectInfo = await getProjectInfo(options.cwd)
   const projectConfig = await getProjectConfig(options.cwd, projectInfo)
+
   const config = projectConfig
     ? await promptForMinimalConfig(projectConfig, options)
     : await promptForConfig(await getConfig(options.cwd))
@@ -240,7 +242,7 @@ async function promptForConfig(defaultConfig: Config | null = null) {
   ])
 
   return rawConfigSchema.parse({
-    $schema: 'https://ui.shadcn.com/schema.json',
+    $schema: 'https://shadcn-vue.com/schema.json',
     style: options.style,
     tailwind: {
       config: options.tailwindConfig,
@@ -255,7 +257,7 @@ async function promptForConfig(defaultConfig: Config | null = null) {
       components: options.components,
       // TODO: fix this.
       lib: options.components.replace(/\/components$/, 'lib'),
-      hooks: options.components.replace(/\/components$/, 'hooks'),
+      // hooks: options.components.replace(/\/components$/, 'hooks'),
     },
   })
 }
diff --git a/packages/cli/src/migrations/migrate-icons.test.ts b/packages/cli/src/migrations/migrate-icons.test.ts
index cb2b72c45..0d27eef49 100644
--- a/packages/cli/src/migrations/migrate-icons.test.ts
+++ b/packages/cli/src/migrations/migrate-icons.test.ts
@@ -29,14 +29,14 @@ describe('migrateIconsFile', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import { Something } from "other-package"
-      import { Check, X } from "lucide-react";
+      "import { CheckIcon, CloseIcon } from "@radix-ui/react-icons"
+            import { Something } from "other-package"
 
             export function Component() {
               return (
                 <div>
-                  <Check className="w-4 h-4" />
-                  <X />
+                  <CheckIcon className="w-4 h-4" />
+                  <CloseIcon />
                 </div>
               )
             }"
@@ -90,16 +90,17 @@ describe('migrateIconsFile', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import { AlertCircle } from "lucide-react"
+      "import { CheckIcon } from "@radix-ui/react-icons"
+            import { AlertCircle } from "lucide-react"
             import { Something } from "other-package"
-      import { Check, X } from "lucide-react";
+            import { Cross2Icon } from "@radix-ui/react-icons"
 
             export function Component() {
               return (
                 <div>
-                  <Check className="w-4 h-4" />
+                  <CheckIcon className="w-4 h-4" />
                   <AlertCircle />
-                  <X />
+                  <Cross2Icon />
                 </div>
               )
             }"
@@ -137,9 +138,9 @@ describe('migrateIconsFile', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import { Check, X } from "lucide-react";
+      "import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
 
-                  export function Component() {
+            export function Component() {
               return (
                 <div>
                   <CheckIcon
@@ -149,7 +150,7 @@ describe('migrateIconsFile', () => {
                   >
                     <span>Child content</span>
                   </CheckIcon>
-                  <X style={{ color: 'red' }} aria-label="Close" />
+                  <Cross2Icon style={{ color: 'red' }} aria-label="Close" />
                 </div>
               )
             }"
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index 0d517f615..a8a0fed0f 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -36,7 +36,7 @@ export const rawConfigSchema = z
       utils: z.string(),
       ui: z.string().optional(),
       lib: z.string().optional(),
-      hooks: z.string().optional(),
+      // hooks: z.string().optional(),
     }),
     iconLibrary: z.string().optional(),
   })
@@ -52,7 +52,7 @@ export const configSchema = rawConfigSchema.extend({
     utils: z.string(),
     components: z.string(),
     lib: z.string(),
-    hooks: z.string(),
+    // hooks: z.string(),
     ui: z.string(),
   }),
 })
@@ -109,17 +109,18 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
           (await resolveImport(config.aliases.utils, tsConfig)) ?? cwd,
           '..',
         ),
-      hooks: config.aliases.hooks
-        ? await resolveImport(config.aliases.hooks, tsConfig)
-        : path.resolve(
-          (await resolveImport(config.aliases.components, tsConfig))
-          ?? cwd,
-          '..',
-          'hooks',
-        ),
+      // hooks: config.aliases.hooks
+      //   ? await resolveImport(config.aliases.hooks, tsConfig)
+      //   : path.resolve(
+      //     (await resolveImport(config.aliases.components, tsConfig))
+      //     ?? cwd,
+      //     '..',
+      //     'hooks',
+      //   ),
     },
   })
 }
+
 export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
   try {
     const configResult = await c12LoadConfig({
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index 2b047d889..9c03d9d8c 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -3,7 +3,6 @@ import type {
   Config,
   RawConfig,
 } from '@/src/utils/get-config'
-import path from 'node:path'
 import { FRAMEWORKS } from '@/src/utils/frameworks'
 import {
   getConfig,
@@ -12,14 +11,13 @@ import {
 import { getPackageInfo } from '@/src/utils/get-package-info'
 import fg from 'fast-glob'
 import fs from 'fs-extra'
+import path from 'pathe'
 import { loadConfig } from 'tsconfig-paths'
 import { z } from 'zod'
 
 export interface ProjectInfo {
   framework: Framework
-  isSrcDir: boolean
-  isRSC: boolean
-  isTsx: boolean
+  typescript: boolean
   tailwindConfigFile: string | null
   tailwindCssFile: string | null
   aliasPrefix: string | null
@@ -42,8 +40,7 @@ const TS_CONFIG_SCHEMA = z.object({
 export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
   const [
     configFiles,
-    isSrcDir,
-    isTsx,
+    typescript,
     tailwindConfigFile,
     tailwindCssFile,
     aliasPrefix,
@@ -54,7 +51,6 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
       deep: 3,
       ignore: PROJECT_SHARED_IGNORE,
     }),
-    fs.pathExists(path.resolve(cwd, 'src')),
     isTypeScriptProject(cwd),
     getTailwindConfigFile(cwd),
     getTailwindCssFile(cwd),
@@ -62,15 +58,9 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     getPackageInfo(cwd, false),
   ])
 
-  const isUsingAppDir = await fs.pathExists(
-    path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`),
-  )
-
   const type: ProjectInfo = {
     framework: FRAMEWORKS.vite, // TODO: Maybe add a manual installation
-    isSrcDir,
-    isRSC: false,
-    isTsx,
+    typescript,
     tailwindConfigFile,
     tailwindCssFile,
     aliasPrefix,
@@ -158,7 +148,9 @@ export async function getTsConfigAliasPrefix(cwd: string) {
       || paths.includes('./app/*')
       || paths.includes('./resources/js/*') // Laravel.
     ) {
-      return alias.replace(/\/\*$/, '') ?? null
+      const cleanAlias = alias.replace(/\/\*$/, '') ?? null
+      // handle Nuxt
+      return cleanAlias === '#build' ? '@' : cleanAlias
     }
   }
 
@@ -241,7 +233,7 @@ export async function getProjectConfig(
     aliases: {
       components: `${projectInfo.aliasPrefix}/components`,
       ui: `${projectInfo.aliasPrefix}/components/ui`,
-      hooks: `${projectInfo.aliasPrefix}/hooks`,
+      // hooks: `${projectInfo.aliasPrefix}/hooks`,
       lib: `${projectInfo.aliasPrefix}/lib`,
       utils: `${projectInfo.aliasPrefix}/lib/utils`,
     },
diff --git a/packages/cli/src/utils/handle-error.ts b/packages/cli/src/utils/handle-error.ts
index 2280fd430..fc68fe8a6 100644
--- a/packages/cli/src/utils/handle-error.ts
+++ b/packages/cli/src/utils/handle-error.ts
@@ -1,6 +1,7 @@
 import { consola } from 'consola'
 
 export function handleError(error: unknown) {
+  consola.log('this is error: ', error)
   if (typeof error === 'string') {
     consola.error(error)
     process.exit(1)
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index fb7dbbbe9..2a96ef983 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -4,7 +4,6 @@ import type {
 } from '@/src/utils/registry/schema'
 import path from 'node:path'
 import { handleError } from '@/src/utils/handle-error'
-import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import {
   iconsSchema,
@@ -183,52 +182,12 @@ async function fetchRegistry(paths: string[]) {
     const results = await Promise.all(
       paths.map(async (path) => {
         const url = getRegistryUrl(path)
-        const response = await ofetch(url, { agent })
-
-        if (!response.ok) {
-          const errorMessages: { [key: number]: string } = {
-            400: 'Bad request',
-            401: 'Unauthorized',
-            403: 'Forbidden',
-            404: 'Not found',
-            500: 'Internal server error',
-          }
-
-          if (response.status === 401) {
-            throw new Error(
-              `You are not authorized to access the component at ${highlighter.info(
-                url,
-              )}.\nIf this is a remote registry, you may need to authenticate.`,
-            )
-          }
-
-          if (response.status === 404) {
-            throw new Error(
-              `The component at ${highlighter.info(
-                url,
-              )} was not found.\nIt may not exist at the registry. Please make sure it is a valid component.`,
-            )
-          }
-
-          if (response.status === 403) {
-            throw new Error(
-              `You do not have access to the component at ${highlighter.info(
-                url,
-              )}.\nIf this is a remote registry, you may need to authenticate or a token.`,
-            )
-          }
-
-          const result = await response.json()
-          const message
-            = result && typeof result === 'object' && 'error' in result
-              ? result.error
-              : response.statusText || errorMessages[response.status]
-          throw new Error(
-            `Failed to fetch from ${highlighter.info(url)}.\n${message}`,
-          )
-        }
+        const response = await ofetch(url, { agent, parseResponse: JSON.parse })
+          .catch((error) => {
+            throw new Error(error.data)
+          })
 
-        return response.json()
+        return response
       }),
     )
 
@@ -262,9 +221,9 @@ export function getRegistryItemFileTargetPath(
     return config.resolvedPaths.components
   }
 
-  if (file.type === 'registry:hook') {
-    return config.resolvedPaths.hooks
-  }
+  // if (file.type === 'registry:hook') {
+  //   return config.resolvedPaths.hooks
+  // }
 
   // TODO: we put this in components for now.
   // We should move this to pages as per framework.
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index 206410cf7..0b01eebd6 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -19,10 +19,10 @@ export function transformImport(opts: TransformOpts): CodemodPlugin {
               // Replace @/registry/[style] with the components alias.
               if (sourcePath.startsWith('@/registry/')) {
                 if (config.aliases.ui) {
-                  path.node.source.value = sourcePath.replace(/^@\/lib\/registry\/[^/]+\/ui/, config.aliases.ui)
+                  path.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui)
                 }
                 else {
-                  path.node.source.value = sourcePath.replace(/^@\/lib\/registry\/[^/]+/, config.aliases.components)
+                  path.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+/, config.aliases.components)
                 }
               }
 
diff --git a/packages/cli/src/utils/updaters/update-css-vars.ts b/packages/cli/src/utils/updaters/update-css-vars.ts
index f9dc61f86..afb4a9ce7 100644
--- a/packages/cli/src/utils/updaters/update-css-vars.ts
+++ b/packages/cli/src/utils/updaters/update-css-vars.ts
@@ -54,7 +54,7 @@ export async function transformCssVars(
   input: string,
   cssVars: z.infer<typeof registryItemCssVarsSchema>,
   config: Config,
-  options: {
+  options?: {
     cleanupDefaultNextStyles?: boolean
   },
 ) {
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
index 750be3a1c..53ba10ac4 100644
--- a/packages/cli/test/commands/init.test.ts
+++ b/packages/cli/test/commands/init.test.ts
@@ -14,7 +14,7 @@ vi.mock('fs/promises', () => ({
 }))
 vi.mock('ora')
 
-it('init config-full', async () => {
+it.skip('init config-full', async () => {
   vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
     inlineColors: {},
     cssVars: {},
@@ -23,26 +23,54 @@ it('init config-full', async () => {
     cssVarsTemplate:
       '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
   })
+  vi.spyOn(registry, 'getRegistryItem').mockResolvedValue({
+    name: 'new-york',
+    dependencies: [
+      'tailwindcss-animate',
+      'class-variance-authority',
+      'clsx',
+      'tailwind-merge',
+      'lucide-vue-next',
+      '@radix-icons/vue',
+    ],
+    registryDependencies: [],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            borderRadius: {
+              lg: 'var(--radius)',
+              md: 'calc(var(--radius) - 2px)',
+              sm: 'calc(var(--radius) - 4px)',
+            },
+          },
+        },
+        plugins: ['require("tailwindcss-animate")'],
+      },
+    },
+    files: [],
+    cssVariables: {
+      light: {
+        '--radius': '0.5rem',
+      },
+    },
+  })
+
   const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
   const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
 
   const targetDir = path.resolve(__dirname, '../fixtures/config-full')
   const config = await getConfig(targetDir)
 
-  await runInit(targetDir, config!)
+  await runInit(config!)
 
   expect(mockMkdir).toHaveBeenNthCalledWith(
     1,
-    expect.stringMatching(/src\/app$/),
-    expect.anything(),
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
     expect.stringMatching(/src\/lib$/),
     expect.anything(),
   )
   expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
+    2,
     expect.stringMatching(/src\/components$/),
     expect.anything(),
   )
@@ -83,74 +111,74 @@ it('init config-full', async () => {
   mockWriteFile.mockRestore()
 })
 
-it('init config-partial', async () => {
-  vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
-    cssVarsTemplate:
-      '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
-  })
-  const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
+// it('init config-partial', async () => {
+//   vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
+//     inlineColors: {},
+//     cssVars: {},
+//     inlineColorsTemplate:
+//       '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
+//     cssVarsTemplate:
+//       '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
+//   })
+//   const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
+//   const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
 
-  const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
-  const config = await getConfig(targetDir)
+//   const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
+//   const config = await getConfig(targetDir)
 
-  await runInit(targetDir, config!)
+//   await runInit(config!)
 
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/assets\/css$/),
-    expect.anything(),
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/lib$/),
-    expect.anything(),
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/components$/),
-    expect.anything(),
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/tailwind.config.ts$/),
-    expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
-    'utf8',
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
-    expect.stringContaining('@tailwind base'),
-    'utf8',
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/utils.ts$/),
-    expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
-    'utf8',
-  )
-  expect(addDependency).toHaveBeenCalledWith(
-    [
-      'tailwindcss-animate',
-      'class-variance-authority',
-      'clsx',
-      'tailwind-merge',
-      'reka-ui',
-      'lucide-vue-next',
-    ],
-    {
-      cwd: targetDir,
-      silent: true,
-    },
-  )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     1,
+//     expect.stringMatching(/src\/assets\/css$/),
+//     expect.anything(),
+//   )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     2,
+//     expect.stringMatching(/lib$/),
+//     expect.anything(),
+//   )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     3,
+//     expect.stringMatching(/components$/),
+//     expect.anything(),
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     1,
+//     expect.stringMatching(/tailwind.config.ts$/),
+//     expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
+//     'utf8',
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     2,
+//     expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
+//     expect.stringContaining('@tailwind base'),
+//     'utf8',
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     3,
+//     expect.stringMatching(/utils.ts$/),
+//     expect.stringContaining('import { type ClassValue, clsx } from \'clsx\''),
+//     'utf8',
+//   )
+//   expect(addDependency).toHaveBeenCalledWith(
+//     [
+//       'tailwindcss-animate',
+//       'class-variance-authority',
+//       'clsx',
+//       'tailwind-merge',
+//       'reka-ui',
+//       'lucide-vue-next',
+//     ],
+//     {
+//       cwd: targetDir,
+//       silent: true,
+//     },
+//   )
 
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
+//   mockMkdir.mockRestore()
+//   mockWriteFile.mockRestore()
+// })
 
 afterEach(() => {
   vi.resetAllMocks()
diff --git a/packages/cli/test/fixtures/config-full/components.json b/packages/cli/test/fixtures/config-full/components.json
index 280c7de9a..41457189e 100644
--- a/packages/cli/test/fixtures/config-full/components.json
+++ b/packages/cli/test/fixtures/config-full/components.json
@@ -10,6 +10,8 @@
   "aliases": {
     "utils": "~/lib/utils",
     "components": "~/components",
+    "lib": "~/lib",
     "ui": "~/ui"
-  }
+  },
+  "iconLibrary": "lucide"
 }
diff --git a/packages/cli/test/fixtures/config-js/components.json b/packages/cli/test/fixtures/config-js/components.json
index 102ff7a63..361d0dcca 100644
--- a/packages/cli/test/fixtures/config-js/components.json
+++ b/packages/cli/test/fixtures/config-js/components.json
@@ -10,5 +10,6 @@
     "utils": "@/lib/utils",
     "components": "@/components"
   },
-  "typescript": false
+  "typescript": false,
+  "iconLibrary": "radix"
 }
diff --git a/packages/cli/test/fixtures/config-nuxt/.nuxt/tsconfig.json b/packages/cli/test/fixtures/config-nuxt/.nuxt/tsconfig.json
new file mode 100644
index 000000000..9918b56de
--- /dev/null
+++ b/packages/cli/test/fixtures/config-nuxt/.nuxt/tsconfig.json
@@ -0,0 +1,99 @@
+// Generated by nuxi
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "strict": true,
+    "noImplicitThis": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "~": [
+        ".."
+      ],
+      "~/*": [
+        "../*"
+      ],
+      "@": [
+        ".."
+      ],
+      "@/*": [
+        "../*"
+      ],
+      "~~": [
+        ".."
+      ],
+      "~~/*": [
+        "../*"
+      ],
+      "@@": [
+        ".."
+      ],
+      "@@/*": [
+        "../*"
+      ],
+      "assets": [
+        "../assets"
+      ],
+      "assets/*": [
+        "../assets/*"
+      ],
+      "public": [
+        "../public"
+      ],
+      "#app": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app"
+      ],
+      "#app/*": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app/*"
+      ],
+      "vue-demi": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app/compat/vue-demi"
+      ],
+      "#vue-router": [
+        "./vue-router"
+      ],
+      "#imports": [
+        "./imports"
+      ],
+      "#build": [
+        "."
+      ],
+      "#build/*": [
+        "./*"
+      ],
+      "#components": [
+        "./components"
+      ]
+    }
+  },
+  "include": [
+    "./nuxt.d.ts",
+    "../**/*",
+    "../node_modules/.pnpm/@nuxtjs+tailwindcss@6.8.0_webpack@5.88.2/node_modules/@nuxtjs/tailwindcss/runtime",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools/module.cjs/runtime",
+    "../node_modules/.pnpm/@nuxt+telemetry@2.5.2/node_modules/@nuxt/telemetry/runtime",
+    ".."
+  ],
+  "exclude": [
+    "../node_modules",
+    "../../../../../../node_modules",
+    "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/node_modules",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools",
+    "../node_modules/.pnpm/@nuxtjs+tailwindcss@6.8.0_webpack@5.88.2/node_modules/@nuxtjs/tailwindcss/runtime/server",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools/module.cjs/runtime/server",
+    "../node_modules/.pnpm/@nuxt+telemetry@2.5.2/node_modules/@nuxt/telemetry/runtime/server",
+    "../dist",
+    "../.output"
+  ]
+}
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/config-ui/components.json b/packages/cli/test/fixtures/config-ui/components.json
new file mode 100644
index 000000000..280c7de9a
--- /dev/null
+++ b/packages/cli/test/fixtures/config-ui/components.json
@@ -0,0 +1,15 @@
+{
+  "style": "new-york",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": "tw-"
+  },
+  "aliases": {
+    "utils": "~/lib/utils",
+    "components": "~/components",
+    "ui": "~/ui"
+  }
+}
diff --git a/packages/cli/test/fixtures/config-ui/package.json b/packages/cli/test/fixtures/config-ui/package.json
new file mode 100644
index 000000000..ec81887dc
--- /dev/null
+++ b/packages/cli/test/fixtures/config-ui/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "test-cli-config-ui",
+  "version": "1.0.0",
+  "author": "shadcn",
+  "license": "MIT",
+  "main": "index.js"
+}
diff --git a/packages/cli/test/fixtures/config-ui/tsconfig.json b/packages/cli/test/fixtures/config-ui/tsconfig.json
new file mode 100644
index 000000000..0d658b173
--- /dev/null
+++ b/packages/cli/test/fixtures/config-ui/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "target": "es2017",
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    ".eslintrc.cjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.mjs"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/cli/test/fixtures/frameworks/nuxt/.nuxt/tsconfig.json b/packages/cli/test/fixtures/frameworks/nuxt/.nuxt/tsconfig.json
new file mode 100644
index 000000000..0a9f6ab7a
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/nuxt/.nuxt/tsconfig.json
@@ -0,0 +1,99 @@
+// Generated by nuxi
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "strict": true,
+    "noImplicitThis": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "~": [
+        ".."
+      ],
+      "~/*": [
+        "../*"
+      ],
+      "@": [
+        ".."
+      ],
+      "@/*": [
+        "../*"
+      ],
+      "~~": [
+        ".."
+      ],
+      "~~/*": [
+        "../*"
+      ],
+      "@@": [
+        ".."
+      ],
+      "@@/*": [
+        "../*"
+      ],
+      "assets": [
+        "../assets"
+      ],
+      "assets/*": [
+        "../assets/*"
+      ],
+      "public": [
+        "../public"
+      ],
+      "#app": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app"
+      ],
+      "#app/*": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app/*"
+      ],
+      "vue-demi": [
+        "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/dist/app/compat/vue-demi"
+      ],
+      "#vue-router": [
+        "./vue-router"
+      ],
+      "#imports": [
+        "./imports"
+      ],
+      "#build": [
+        "."
+      ],
+      "#build/*": [
+        "./*"
+      ],
+      "#components": [
+        "./components"
+      ]
+    }
+  },
+  "include": [
+    "./nuxt.d.ts",
+    "../**/*",
+    "../node_modules/.pnpm/@nuxtjs+tailwindcss@6.8.0_webpack@5.88.2/node_modules/@nuxtjs/tailwindcss/runtime",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools/module.cjs/runtime",
+    "../node_modules/.pnpm/@nuxt+telemetry@2.5.2/node_modules/@nuxt/telemetry/runtime",
+    ".."
+  ],
+  "exclude": [
+    "../node_modules",
+    "../../../../../../node_modules",
+    "../node_modules/.pnpm/nuxt@3.7.3/node_modules/nuxt/node_modules",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools",
+    "../node_modules/.pnpm/@nuxtjs+tailwindcss@6.8.0_webpack@5.88.2/node_modules/@nuxtjs/tailwindcss/runtime/server",
+    "../../../../../../../../../../../opt/homebrew/lib/node_modules/@nuxt/devtools/module.cjs/runtime/server",
+    "../node_modules/.pnpm/@nuxt+telemetry@2.5.2/node_modules/@nuxt/telemetry/runtime/server",
+    "../dist",
+    "../.output"
+  ]
+}
diff --git a/packages/cli/test/fixtures/nuxt/app.vue b/packages/cli/test/fixtures/frameworks/nuxt/app.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/app.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/app.vue
diff --git a/packages/cli/test/fixtures/nuxt/assets/css/tailwind.css b/packages/cli/test/fixtures/frameworks/nuxt/assets/css/tailwind.css
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/assets/css/tailwind.css
rename to packages/cli/test/fixtures/frameworks/nuxt/assets/css/tailwind.css
diff --git a/packages/cli/test/fixtures/nuxt/components.json b/packages/cli/test/fixtures/frameworks/nuxt/components.json
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components.json
rename to packages/cli/test/fixtures/frameworks/nuxt/components.json
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialog.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialog.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogAction.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/index.ts
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/alert-dialog/index.ts
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/button/Button.vue
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/button/Button.vue
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/button/index.ts b/packages/cli/test/fixtures/frameworks/nuxt/components/ui/button/index.ts
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/components/ui/button/index.ts
rename to packages/cli/test/fixtures/frameworks/nuxt/components/ui/button/index.ts
diff --git a/packages/cli/test/fixtures/nuxt/lib/utils.ts b/packages/cli/test/fixtures/frameworks/nuxt/lib/utils.ts
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/lib/utils.ts
rename to packages/cli/test/fixtures/frameworks/nuxt/lib/utils.ts
diff --git a/packages/cli/test/fixtures/nuxt/nuxt.config.ts b/packages/cli/test/fixtures/frameworks/nuxt/nuxt.config.ts
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/nuxt.config.ts
rename to packages/cli/test/fixtures/frameworks/nuxt/nuxt.config.ts
diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/frameworks/nuxt/package.json
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/package.json
rename to packages/cli/test/fixtures/frameworks/nuxt/package.json
diff --git a/packages/cli/test/fixtures/frameworks/nuxt/tailwind.config.ts b/packages/cli/test/fixtures/frameworks/nuxt/tailwind.config.ts
new file mode 100644
index 000000000..cf815ff6e
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/nuxt/tailwind.config.ts
@@ -0,0 +1,18 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './**/*.{js,ts,mdx,vue}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
diff --git a/packages/cli/test/fixtures/nuxt/tsconfig.json b/packages/cli/test/fixtures/frameworks/nuxt/tsconfig.json
similarity index 100%
rename from packages/cli/test/fixtures/nuxt/tsconfig.json
rename to packages/cli/test/fixtures/frameworks/nuxt/tsconfig.json
diff --git a/packages/cli/test/fixtures/frameworks/vite/.gitignore b/packages/cli/test/fixtures/frameworks/vite/.gitignore
new file mode 100644
index 000000000..8ee54e8d3
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/packages/cli/test/fixtures/frameworks/vite/env.d.ts b/packages/cli/test/fixtures/frameworks/vite/env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/cli/test/fixtures/frameworks/vite/index.html b/packages/cli/test/fixtures/frameworks/vite/index.html
new file mode 100644
index 000000000..9e5fc8f06
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/cli/test/fixtures/frameworks/vite/package.json b/packages/cli/test/fixtures/frameworks/vite/package.json
new file mode 100644
index 000000000..bd54a9b3b
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "test-cli-vite",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/tsconfig": "^0.5.1",
+    "npm-run-all2": "^7.0.1",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-vue-devtools": "^7.5.4",
+    "vue-tsc": "^2.1.10"
+  }
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/postcss.config.js b/packages/cli/test/fixtures/frameworks/vite/postcss.config.js
new file mode 100644
index 000000000..2e7af2b7f
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/src/App.vue b/packages/cli/test/fixtures/frameworks/vite/src/App.vue
new file mode 100644
index 000000000..be21c8165
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/src/App.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125">
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+    </div>
+  </header>
+
+  <main>
+    <TheWelcome />
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/packages/cli/test/fixtures/frameworks/vite/src/components/HelloWorld.vue b/packages/cli/test/fixtures/frameworks/vite/src/components/HelloWorld.vue
new file mode 100644
index 000000000..02ed36589
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">
+      {{ msg }}
+    </h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
diff --git a/packages/cli/test/fixtures/frameworks/vite/src/index.css b/packages/cli/test/fixtures/frameworks/vite/src/index.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/cli/test/fixtures/frameworks/vite/src/main.ts b/packages/cli/test/fixtures/frameworks/vite/src/main.ts
new file mode 100644
index 000000000..14a813bd3
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import './assets/main.css'
+
+createApp(App).mount('#app')
diff --git a/packages/cli/test/fixtures/frameworks/vite/tailwind.config.js b/packages/cli/test/fixtures/frameworks/vite/tailwind.config.js
new file mode 100644
index 000000000..7141e4528
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/tsconfig.app.json b/packages/cli/test/fixtures/frameworks/vite/tsconfig.app.json
new file mode 100644
index 000000000..b279a350b
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/tsconfig.json b/packages/cli/test/fixtures/frameworks/vite/tsconfig.json
new file mode 100644
index 000000000..a2efd4691
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "files": []
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/tsconfig.node.json b/packages/cli/test/fixtures/frameworks/vite/tsconfig.node.json
new file mode 100644
index 000000000..559a19300
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/tsconfig.node.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
+}
diff --git a/packages/cli/test/fixtures/frameworks/vite/vite.config.ts b/packages/cli/test/fixtures/frameworks/vite/vite.config.ts
new file mode 100644
index 000000000..48e16d2b4
--- /dev/null
+++ b/packages/cli/test/fixtures/frameworks/vite/vite.config.ts
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})
diff --git a/packages/cli/test/fixtures/nuxt/.gitignore b/packages/cli/test/fixtures/nuxt/.gitignore
deleted file mode 100644
index 4a7f73a2e..000000000
--- a/packages/cli/test/fixtures/nuxt/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
-# Logs
-logs
-*.log
-
-# Misc
-.DS_Store
-.fleet
-.idea
-
-# Local env files
-.env
-.env.*
-!.env.example
diff --git a/packages/cli/test/fixtures/nuxt/.npmrc b/packages/cli/test/fixtures/nuxt/.npmrc
deleted file mode 100644
index c483022c0..000000000
--- a/packages/cli/test/fixtures/nuxt/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-shamefully-hoist=true
\ No newline at end of file
diff --git a/packages/cli/test/fixtures/nuxt/README.md b/packages/cli/test/fixtures/nuxt/README.md
deleted file mode 100644
index f5db2a2db..000000000
--- a/packages/cli/test/fixtures/nuxt/README.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/packages/cli/test/fixtures/nuxt/tailwind.config.js b/packages/cli/test/fixtures/nuxt/tailwind.config.js
deleted file mode 100644
index 1d96084e4..000000000
--- a/packages/cli/test/fixtures/nuxt/tailwind.config.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--reka-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--reka-accordion-content-height)' },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-}
diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts
index 477265eff..bbf917288 100644
--- a/packages/cli/test/utils/get-config.test.ts
+++ b/packages/cli/test/utils/get-config.test.ts
@@ -12,14 +12,13 @@ it('get raw config', async () => {
     await getRawConfig(path.resolve(__dirname, '../fixtures/config-partial')),
   ).toEqual({
     style: 'default',
-    framework: 'Vite',
     tailwind: {
       config: './tailwind.config.ts',
       css: './src/assets/css/tailwind.css',
       baseColor: 'neutral',
       cssVariables: false,
     },
-    tsConfigPath: './tsconfig.json',
+    // tsConfigPath: './tsconfig.json',
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
@@ -51,13 +50,14 @@ it('get config', async () => {
       baseColor: 'neutral',
       cssVariables: false,
     },
+    typescript: true,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
-    framework: 'Vite',
-    tsConfigPath: './tsconfig.json',
+    // tsConfigPath: './tsconfig.json',
     resolvedPaths: {
+      cwd: path.resolve(__dirname, '../fixtures/config-partial'),
       tailwindConfig: path.resolve(
         __dirname,
         '../fixtures/config-partial',
@@ -76,21 +76,23 @@ it('get config', async () => {
       ui: path.resolve(
         __dirname,
         '../fixtures/config-partial',
-        './components',
+        './components/ui',
       ),
       utils: path.resolve(
         __dirname,
         '../fixtures/config-partial',
         './lib/utils',
       ),
+      lib: path.resolve(__dirname, '../fixtures/config-partial', './lib'),
     },
-    typescript: true,
+    iconLibrary: 'lucide',
   })
 
   expect(
     await getConfig(path.resolve(__dirname, '../fixtures/config-full')),
   ).toEqual({
     style: 'new-york',
+    typescript: true,
     tailwind: {
       config: 'tailwind.config.ts',
       baseColor: 'zinc',
@@ -100,12 +102,13 @@ it('get config', async () => {
     },
     aliases: {
       components: '~/components',
-      ui: '~/ui',
       utils: '~/lib/utils',
+      lib: '~/lib',
+      ui: '~/ui',
     },
-    framework: 'Vite',
-    tsConfigPath: './tsconfig.json',
+    iconLibrary: 'lucide',
     resolvedPaths: {
+      cwd: path.resolve(__dirname, '../fixtures/config-full'),
       tailwindConfig: path.resolve(
         __dirname,
         '../fixtures/config-full',
@@ -121,18 +124,14 @@ it('get config', async () => {
         '../fixtures/config-full',
         './src/components',
       ),
-      ui: path.resolve(
-        __dirname,
-        '../fixtures/config-full',
-        './src/ui',
-      ),
+      ui: path.resolve(__dirname, '../fixtures/config-full', './src/ui'),
+      lib: path.resolve(__dirname, '../fixtures/config-full', './src/lib'),
       utils: path.resolve(
         __dirname,
         '../fixtures/config-full',
         './src/lib/utils',
       ),
     },
-    typescript: true,
   })
 
   expect(
@@ -150,9 +149,9 @@ it('get config', async () => {
       components: '@/components',
       utils: '@/lib/utils',
     },
-    framework: 'Vite',
-    tsConfigPath: './tsconfig.json',
+    iconLibrary: 'radix',
     resolvedPaths: {
+      cwd: path.resolve(__dirname, '../fixtures/config-js'),
       tailwindConfig: path.resolve(
         __dirname,
         '../fixtures/config-js',
@@ -168,12 +167,9 @@ it('get config', async () => {
         '../fixtures/config-js',
         './components',
       ),
-      ui: path.resolve(
-        __dirname,
-        '../fixtures/config-js',
-        './components',
-      ),
+      ui: path.resolve(__dirname, '../fixtures/config-js', './components/ui'),
       utils: path.resolve(__dirname, '../fixtures/config-js', './lib/utils'),
+      lib: path.resolve(__dirname, '../fixtures/config-js', './lib'),
     },
   })
 })
diff --git a/packages/cli/test/utils/get-item-target-path.test.ts b/packages/cli/test/utils/get-item-target-path.test.ts
new file mode 100644
index 000000000..6cad37f4c
--- /dev/null
+++ b/packages/cli/test/utils/get-item-target-path.test.ts
@@ -0,0 +1,39 @@
+import path from 'node:path'
+import { expect, it } from 'vitest'
+
+import { getConfig } from '../../src/utils/get-config'
+import { getItemTargetPath } from '../../src/utils/registry'
+
+it('get item target path', async () => {
+  // Full config.
+  let appDir = path.resolve(__dirname, '../fixtures/config-full')
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: 'registry:ui',
+    }),
+  ).toEqual(path.resolve(appDir, './src/ui'))
+
+  // Partial config.
+  appDir = path.resolve(__dirname, '../fixtures/config-partial')
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: 'registry:ui',
+    }),
+  ).toEqual(path.resolve(appDir, './components/ui'))
+
+  // JS.
+  appDir = path.resolve(__dirname, '../fixtures/config-js')
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: 'registry:ui',
+    }),
+  ).toEqual(path.resolve(appDir, './components/ui'))
+
+  // Custom paths.
+  appDir = path.resolve(__dirname, '../fixtures/config-ui')
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: 'registry:ui',
+    }),
+  ).toEqual(path.resolve(appDir, './src/ui'))
+})
diff --git a/packages/cli/test/utils/get-project-info.test.ts b/packages/cli/test/utils/get-project-info.test.ts
new file mode 100644
index 000000000..52f061c73
--- /dev/null
+++ b/packages/cli/test/utils/get-project-info.test.ts
@@ -0,0 +1,36 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { FRAMEWORKS } from '../../src/utils/frameworks'
+import { getProjectInfo } from '../../src/utils/get-project-info'
+
+describe('get project info', async () => {
+  it.each([
+    {
+      name: 'nuxt',
+      type: {
+        framework: FRAMEWORKS.nuxt,
+        typescript: true,
+        tailwindConfigFile: 'tailwind.config.ts',
+        tailwindCssFile: 'assets/css/tailwind.css',
+        aliasPrefix: '@',
+      },
+    },
+    {
+      name: 'vite',
+      type: {
+        framework: FRAMEWORKS.vite,
+        typescript: true,
+        tailwindConfigFile: 'tailwind.config.js',
+        tailwindCssFile: 'src/index.css',
+        aliasPrefix: null,
+      },
+    },
+  ])(`getProjectType($name) -> $type`, async ({ name, type }) => {
+    expect(
+      await getProjectInfo(
+        path.resolve(__dirname, `../fixtures/frameworks/${name}`),
+      ),
+    ).toStrictEqual(type)
+  })
+})
diff --git a/packages/cli/test/utils/get-tailwind-css-file.test.ts b/packages/cli/test/utils/get-tailwind-css-file.test.ts
new file mode 100644
index 000000000..1ab624065
--- /dev/null
+++ b/packages/cli/test/utils/get-tailwind-css-file.test.ts
@@ -0,0 +1,23 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { getTailwindCssFile } from '../../src/utils/get-project-info'
+
+describe('get tailwindcss file', async () => {
+  it.each([
+    {
+      name: 'nuxt',
+      file: 'assets/css/tailwind.css',
+    },
+    {
+      name: 'vite',
+      file: 'src/index.css',
+    },
+  ])(`getTailwindCssFile($name) -> $file`, async ({ name, file }) => {
+    expect(
+      await getTailwindCssFile(
+        path.resolve(__dirname, `../fixtures/frameworks/${name}`),
+      ),
+    ).toBe(file)
+  })
+})
diff --git a/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts b/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts
new file mode 100644
index 000000000..7154465ca
--- /dev/null
+++ b/packages/cli/test/utils/get-ts-config-alias-prefix.test.ts
@@ -0,0 +1,27 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { getTsConfigAliasPrefix } from '../../src/utils/get-project-info'
+
+describe('get ts config alias prefix', async () => {
+  it.each([
+    {
+      name: 'nuxt',
+      prefix: '@',
+    },
+    // {
+    //   name: 'vite',
+    //   prefix: '@',
+    // },
+    // {
+    //   name: 'next-app-custom-alias',
+    //   prefix: '@custom-alias',
+    // },
+  ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => {
+    expect(
+      await getTsConfigAliasPrefix(
+        path.resolve(__dirname, `../fixtures/frameworks/${name}`),
+      ),
+    ).toBe(prefix)
+  })
+})
diff --git a/packages/cli/test/utils/is-typescript-project.test.ts b/packages/cli/test/utils/is-typescript-project.test.ts
new file mode 100644
index 000000000..5d8636546
--- /dev/null
+++ b/packages/cli/test/utils/is-typescript-project.test.ts
@@ -0,0 +1,19 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { isTypeScriptProject } from '../../src/utils/get-project-info'
+
+describe('is TypeScript project', async () => {
+  it.each([
+    {
+      name: 'nuxt',
+      result: true,
+    },
+  ])(`isTypeScriptProject($name) -> $result`, async ({ name, result }) => {
+    expect(
+      await isTypeScriptProject(
+        path.resolve(__dirname, `../fixtures/frameworks/${name}`),
+      ),
+    ).toBe(result)
+  })
+})
diff --git a/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
new file mode 100644
index 000000000..c1c9205aa
--- /dev/null
+++ b/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
@@ -0,0 +1,951 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`registryResolveItemTree > should resolve index 1`] = `
+{
+  "cssVars": {
+    "dark": {},
+    "light": {
+      "radius": "0.5rem",
+    },
+  },
+  "dependencies": [
+    "tailwindcss-animate",
+    "class-variance-authority",
+    "lucide-vue-next",
+    "clsx",
+    "tailwind-merge",
+  ],
+  "devDependencies": [],
+  "docs": "",
+  "files": [
+    {
+      "content": "import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
+",
+      "path": "lib/utils.ts",
+      "target": "",
+      "type": "registry:lib",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
+",
+      "path": "ui/label/Label.vue",
+      "target": "label/Label.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "export { default as Label } from './Label.vue'
+",
+      "path": "ui/label/index.ts",
+      "target": "label/index.ts",
+      "type": "registry:ui",
+    },
+  ],
+  "tailwind": {
+    "config": {
+      "plugins": [
+        "require("tailwindcss-animate")",
+      ],
+      "theme": {
+        "extend": {
+          "borderRadius": {
+            "lg": "var(--radius)",
+            "md": "calc(var(--radius) - 2px)",
+            "sm": "calc(var(--radius) - 4px)",
+          },
+          "colors": {},
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`registryResolveItemTree > should resolve items tree 1`] = `
+{
+  "cssVars": {},
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+  ],
+  "devDependencies": [],
+  "docs": "",
+  "files": [
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, 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
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+",
+      "path": "ui/button/Button.vue",
+      "target": "button/Button.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "import { cva, type VariantProps } 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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+",
+      "path": "ui/button/index.ts",
+      "target": "button/index.ts",
+      "type": "registry:ui",
+    },
+    {
+      "content": "import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
+",
+      "path": "lib/utils.ts",
+      "target": "",
+      "type": "registry:lib",
+    },
+  ],
+  "tailwind": {},
+}
+`;
+
+exports[`registryResolveItemTree > should resolve multiple items tree 1`] = `
+{
+  "cssVars": {},
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@vueuse/core",
+  ],
+  "devDependencies": [],
+  "docs": "",
+  "files": [
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, 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
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+",
+      "path": "ui/button/Button.vue",
+      "target": "button/Button.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "import { cva, type VariantProps } 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 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+",
+      "path": "ui/button/index.ts",
+      "target": "button/index.ts",
+      "type": "registry:ui",
+    },
+    {
+      "content": "import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
+",
+      "path": "lib/utils.ts",
+      "target": "",
+      "type": "registry:lib",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
+",
+      "path": "ui/input/Input.vue",
+      "target": "input/Input.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "export { default as Input } from './Input.vue'
+",
+      "path": "ui/input/index.ts",
+      "target": "input/index.ts",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+",
+      "path": "ui/command/Command.vue",
+      "target": "command/Command.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent } from '@/registry/default/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
+",
+      "path": "ui/command/CommandDialog.vue",
+      "target": "command/CommandDialog.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
+",
+      "path": "ui/command/CommandEmpty.vue",
+      "target": "command/CommandEmpty.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
+",
+      "path": "ui/command/CommandGroup.vue",
+      "target": "command/CommandGroup.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
+",
+      "path": "ui/command/CommandInput.vue",
+      "target": "command/CommandInput.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+",
+      "path": "ui/command/CommandItem.vue",
+      "target": "command/CommandItem.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
+",
+      "path": "ui/command/CommandList.vue",
+      "target": "command/CommandList.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+",
+      "path": "ui/command/CommandSeparator.vue",
+      "target": "command/CommandSeparator.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
+",
+      "path": "ui/command/CommandShortcut.vue",
+      "target": "command/CommandShortcut.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+",
+      "path": "ui/command/index.ts",
+      "target": "command/index.ts",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
+",
+      "path": "ui/dialog/Dialog.vue",
+      "target": "dialog/Dialog.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
+",
+      "path": "ui/dialog/DialogClose.vue",
+      "target": "dialog/DialogClose.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="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"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
+",
+      "path": "ui/dialog/DialogContent.vue",
+      "target": "dialog/DialogContent.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+",
+      "path": "ui/dialog/DialogDescription.vue",
+      "target": "dialog/DialogDescription.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+",
+      "path": "ui/dialog/DialogFooter.vue",
+      "target": "dialog/DialogFooter.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+",
+      "path": "ui/dialog/DialogHeader.vue",
+      "target": "dialog/DialogHeader.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
+",
+      "path": "ui/dialog/DialogScrollContent.vue",
+      "target": "dialog/DialogScrollContent.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
+",
+      "path": "ui/dialog/DialogTitle.vue",
+      "target": "dialog/DialogTitle.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
+",
+      "path": "ui/dialog/DialogTrigger.vue",
+      "target": "dialog/DialogTrigger.vue",
+      "type": "registry:ui",
+    },
+    {
+      "content": "export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
+",
+      "path": "ui/dialog/index.ts",
+      "target": "dialog/index.ts",
+      "type": "registry:ui",
+    },
+  ],
+  "tailwind": {},
+}
+`;
diff --git a/packages/cli/test/utils/schema/registry-resolve-items-tree.test.ts b/packages/cli/test/utils/schema/registry-resolve-items-tree.test.ts
new file mode 100644
index 000000000..4893ef74c
--- /dev/null
+++ b/packages/cli/test/utils/schema/registry-resolve-items-tree.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { registryResolveItemsTree } from '../../../src/utils/registry'
+
+describe('registryResolveItemTree', () => {
+  it('should resolve items tree', async () => {
+    expect(
+      await registryResolveItemsTree(['button'], {
+        style: 'new-york',
+        tailwind: {
+          baseColor: 'stone',
+        },
+      }),
+    ).toMatchSnapshot()
+  })
+
+  it('should resolve multiple items tree', async () => {
+    expect(
+      await registryResolveItemsTree(['button', 'input', 'command'], {
+        style: 'default',
+        tailwind: {
+          baseColor: 'zinc',
+        },
+      }),
+    ).toMatchSnapshot()
+  })
+
+  it('should resolve index', async () => {
+    expect(
+      await registryResolveItemsTree(['index', 'label'], {
+        style: 'default',
+        tailwind: {
+          baseColor: 'zinc',
+        },
+      }),
+    ).toMatchSnapshot()
+  })
+})
diff --git a/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap b/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
new file mode 100644
index 000000000..ec6f16468
--- /dev/null
+++ b/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
@@ -0,0 +1,572 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 2`] = `
+"/** @type {import('tailwindcss').Config} */
+
+export default {
+    darkMode: ['class'],
+    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should add darkMode property if not in config 3`] = `
+"/** @type {import('tailwindcss').Config} */
+const foo = {
+  bar: 'baz',
+}
+
+export default {
+    darkMode: ['class'],
+    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should append class to darkMode property if existing array 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ["selector", "class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should convert string to array and add class if darkMode is string 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ["selector", "class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should not add darkMode property if already in config 2`] = `
+"import type { Config } from 'tailwindcss'
+
+  const config: Config = {
+  darkMode: ['class', 'selector'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+  }
+  export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should preserve quote kind 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['selector', '[data-mode="dark"]', 'class'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> darkMode property > should work with multiple darkMode selectors 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['variant', [
+    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
+    '&:is(.dark *)',
+  ], 'class'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> plugin > should add plugin if not in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+    plugins: [require("tailwindcss-animate")]
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> plugin > should append plugin to existing array 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> plugin > should not add plugin if already in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should add theme if not in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+  const config: Config = {
+      darkMode: ["class"],
+    content: [
+      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+      "./components/**/*.{js,ts,jsx,tsx,mdx}",
+      "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+      theme: {
+      	extend: {
+      		colors: {
+      			background: 'hsl(var(--background))',
+      			foreground: 'hsl(var(--foreground))',
+      			primary: {
+      				DEFAULT: 'hsl(var(--primary))',
+      				foreground: 'hsl(var(--primary-foreground))'
+      			}
+      		}
+      	}
+      }
+}
+  export default config
+    "
+`;
+
+exports[`transformTailwindConfig -> theme > should handle multiple properties 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'var(--font-geist-sans)',
+                    ...fontFamily.sans
+                ],
+  			mono: [
+  				'var(--font-mono)',
+                    ...fontFamily.mono
+                ],
+  			heading: [
+  				'var(--font-geist-sans)'
+  			]
+  		},
+  		colors: {
+                ...defaultColors,
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			}
+  		},
+  		boxShadow: {
+                ...defaultBoxShadow,
+  			'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)'
+  		},
+  		borderRadius: {
+  			'3xl': '2rem',
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		animation: {
+                ...defaultAnimation,
+  			'spin-slow': 'spin 3s linear infinite',
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should handle objects nested in arrays 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontSize: {
+  			xs: [
+  				'0.75rem',
+  				{
+  					lineHeight: '1rem'
+  				}
+  			],
+  			sm: [
+  				'0.875rem',
+  				{
+  					lineHeight: '1.25rem'
+  				}
+  			],
+  			xl: [
+  				'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
+  				{
+  					lineHeight: '1.2',
+  					letterSpacing: '-0.02em',
+  					fontWeight: '600'
+  				}
+  			]
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should keep arrays when formatted on multilines 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'Figtree',
+                    ...defaultTheme.fontFamily.sans
+                ],
+  			mono: [
+  				'Foo'
+  			]
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should keep quotes in strings 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'Figtree',
+                    ...defaultTheme.fontFamily.sans
+                ]
+  		},
+  		colors: {
+                ...defaultColors,
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			}
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should keep spread assignments 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		colors: {
+                ...defaultColors,
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			}
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should merge existing theme 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'ui-sans-serif',
+  				'sans-serif'
+  			]
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			}
+  		}
+  	}
+  },
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindConfig -> theme > should preserve boolean values 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    container: {
+      center: true
+    }
+  },
+}
+export default config
+  "
+`;
diff --git a/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap b/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap
new file mode 100644
index 000000000..6f82d6b72
--- /dev/null
+++ b/packages/cli/test/utils/updaters/__snapshots__/update-tailwind-content.test.ts.snap
@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformTailwindContent -> content property > should NOT add content property if already in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
+    ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
+
+exports[`transformTailwindContent -> content property > should add content property if not in config 1`] = `
+"import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./foo/**/*.{js,ts,jsx,tsx,mdx}",
+        "./bar/**/*.{js,ts,jsx,tsx,mdx}"
+    ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  "
+`;
diff --git a/packages/cli/test/utils/updaters/update-css-vars.test.ts b/packages/cli/test/utils/updaters/update-css-vars.test.ts
new file mode 100644
index 000000000..a21c6673c
--- /dev/null
+++ b/packages/cli/test/utils/updaters/update-css-vars.test.ts
@@ -0,0 +1,175 @@
+import { describe, expect, it } from 'vitest'
+
+import { transformCssVars } from '../../../src/utils/updaters/update-css-vars'
+
+describe('transformCssVars', () => {
+  it('should add light and dark css vars if not present', async () => {
+    expect(
+      await transformCssVars(
+        `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+  `,
+        {
+          light: {
+            background: 'white',
+            foreground: 'black',
+          },
+          dark: {
+            background: 'black',
+            foreground: 'white',
+          },
+        },
+        {
+          tailwind: {
+            cssVariables: true,
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+      @layer base {
+        :root {
+          --background: white;
+          --foreground: black
+        }
+        .dark {
+          --background: black;
+          --foreground: white
+        }
+      }
+      @layer base {
+        * {
+          @apply border-border;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+        "
+    `)
+  })
+
+  it('should update light and dark css vars if present', async () => {
+    expect(
+      await transformCssVars(
+        `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base{
+  :root{
+    --background: 210 40% 98%;
+  }
+
+  .dark{
+    --background: 222.2 84% 4.9%;
+  }
+}
+  `,
+        {
+          light: {
+            background: '215 20.2% 65.1%',
+            foreground: '222.2 84% 4.9%',
+          },
+          dark: {
+            foreground: '60 9.1% 97.8%',
+          },
+        },
+        {
+          tailwind: {
+            cssVariables: true,
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base{
+        :root{
+          --background: 215 20.2% 65.1%;
+          --foreground: 222.2 84% 4.9%;
+        }
+
+        .dark{
+          --background: 222.2 84% 4.9%;
+          --foreground: 60 9.1% 97.8%;
+        }
+      }
+
+      @layer base {
+        * {
+          @apply border-border;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+        "
+    `)
+  })
+
+  it('should not add the base layer if it is already present', async () => {
+    expect(
+      await transformCssVars(
+        `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base{
+  :root{
+    --background: 210 40% 98%;
+  }
+
+  .dark{
+    --background: 222.2 84% 4.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+  `,
+        {},
+        {
+          tailwind: {
+            cssVariables: true,
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base{
+        :root{
+          --background: 210 40% 98%;
+        }
+
+        .dark{
+          --background: 222.2 84% 4.9%;
+        }
+      }
+
+      @layer base {
+        * {
+          @apply border-border;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+        "
+    `)
+  })
+})
diff --git a/packages/cli/test/utils/updaters/update-files.test.ts b/packages/cli/test/utils/updaters/update-files.test.ts
new file mode 100644
index 000000000..43fb4bff0
--- /dev/null
+++ b/packages/cli/test/utils/updaters/update-files.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveTargetDir } from '../../../src/utils/updaters/update-files'
+
+describe('resolveTargetDir', () => {
+  it('should handle a home target without a src directory', () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: false,
+      },
+      {
+        resolvedPaths: {
+          cwd: '/foo/bar',
+        },
+      },
+      '~/.env',
+    )
+    expect(targetDir).toBe('/foo/bar/.env')
+  })
+
+  it('should handle a home target even with a src directory', () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: true,
+      },
+      {
+        resolvedPaths: {
+          cwd: '/foo/bar',
+        },
+      },
+      '~/.env',
+    )
+    expect(targetDir).toBe('/foo/bar/.env')
+  })
+
+  it('should handle a simple target', () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: false,
+      },
+      {
+        resolvedPaths: {
+          cwd: '/foo/bar',
+        },
+      },
+      './components/ui/button.tsx',
+    )
+    expect(targetDir).toBe('/foo/bar/components/ui/button.tsx')
+  })
+
+  it('should handle a simple target with src directory', () => {
+    const targetDir = resolveTargetDir(
+      {
+        isSrcDir: true,
+      },
+      {
+        resolvedPaths: {
+          cwd: '/foo/bar',
+        },
+      },
+      './components/ui/button.tsx',
+    )
+    expect(targetDir).toBe('/foo/bar/src/components/ui/button.tsx')
+  })
+})
diff --git a/packages/cli/test/utils/updaters/update-tailwind-config.test.ts b/packages/cli/test/utils/updaters/update-tailwind-config.test.ts
new file mode 100644
index 000000000..fc26eb24c
--- /dev/null
+++ b/packages/cli/test/utils/updaters/update-tailwind-config.test.ts
@@ -0,0 +1,1383 @@
+import { Project, SyntaxKind } from 'ts-morph'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  buildTailwindThemeColorsFromCssVars,
+  nestSpreadElements,
+  nestSpreadProperties,
+  transformTailwindConfig,
+  unnestSpreadProperties,
+  unnsetSpreadElements,
+} from '../../../src/utils/updaters/update-tailwind-config'
+
+const SHARED_CONFIG = {
+  $schema: 'https://shadcn-vue.com/schema.json',
+  style: 'new-york',
+  rsc: true,
+  tsx: true,
+  tailwind: {
+    config: 'tailwind.config.ts',
+    css: 'app/globals.css',
+    baseColor: 'slate',
+    cssVariables: true,
+  },
+  aliases: {
+    components: '@/components',
+    utils: '@/lib/utils',
+  },
+  resolvedPaths: {
+    cwd: '.',
+    tailwindConfig: 'tailwind.config.ts',
+    tailwindCss: 'app/globals.css',
+    components: './components',
+    utils: './lib/utils',
+    ui: './components/ui',
+  },
+}
+
+describe('transformTailwindConfig -> darkMode property', () => {
+  it('should add darkMode property if not in config', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+
+    expect(
+      await transformTailwindConfig(
+        `/** @type {import('tailwindcss').Config} */
+
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+
+    expect(
+      await transformTailwindConfig(
+        `/** @type {import('tailwindcss').Config} */
+const foo = {
+  bar: 'baz',
+}
+
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should append class to darkMode property if existing array', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ["selector"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should preserve quote kind', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['selector', '[data-mode="dark"]'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should convert string to array and add class if darkMode is string', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: "selector",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should work with multiple darkMode selectors', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['variant', [
+    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
+    '&:is(.dark *)',
+  ]],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should not add darkMode property if already in config', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+  const config: Config = {
+  darkMode: ['class', 'selector'],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+  }
+  export default config
+  `,
+        {
+          properties: [
+            {
+              name: 'darkMode',
+              value: 'class',
+            },
+          ],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('transformTailwindConfig -> plugin', () => {
+  it('should add plugin if not in config', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          plugins: ['require("tailwindcss-animate")'],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should append plugin to existing array', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+}
+export default config
+  `,
+        {
+          plugins: ['require("tailwindcss-animate")'],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should not add plugin if already in config', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
+}
+export default config
+  `,
+        {
+          plugins: ['require(\'tailwindcss-animate\')'],
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('transformTailwindConfig -> theme', () => {
+  it('should add theme if not in config', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+  const config: Config = {
+    content: [
+      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+      "./components/**/*.{js,ts,jsx,tsx,mdx}",
+      "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+  }
+  export default config
+    `,
+        {
+          theme: {
+            extend: {
+              colors: {
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                  DEFAULT: 'hsl(var(--primary))',
+                  foreground: 'hsl(var(--primary-foreground))',
+                },
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should merge existing theme', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          "ui-sans-serif",
+          "sans-serif",
+        ],
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              colors: {
+                primary: {
+                  DEFAULT: 'hsl(var(--primary))',
+                  foreground: 'hsl(var(--primary-foreground))',
+                },
+                card: {
+                  DEFAULT: 'hsl(var(--card))',
+                  foreground: 'hsl(var(--card-foreground))',
+                },
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should keep spread assignments', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        ...defaultColors,
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              colors: {
+                primary: {
+                  DEFAULT: 'hsl(var(--primary))',
+                  foreground: 'hsl(var(--primary-foreground))',
+                },
+                card: {
+                  DEFAULT: 'hsl(var(--card))',
+                  foreground: 'hsl(var(--card-foreground))',
+                },
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should handle multiple properties', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
+      },
+      colors: {
+        ...defaultColors,
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+      },
+      boxShadow: {
+        ...defaultBoxShadow,
+        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
+      },
+      borderRadius: {
+        "3xl": "2rem",
+      },
+      animation: {
+        ...defaultAnimation,
+        "spin-slow": "spin 3s linear infinite",
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              fontFamily: {
+                heading: ['var(--font-geist-sans)'],
+              },
+              colors: {
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                primary: {
+                  DEFAULT: 'hsl(var(--primary))',
+                  foreground: 'hsl(var(--primary-foreground))',
+                },
+                card: {
+                  DEFAULT: 'hsl(var(--card))',
+                  foreground: 'hsl(var(--card-foreground))',
+                },
+              },
+              borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+              },
+              animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should not make any updates running on already updated config', async () => {
+    const input = `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+content: [
+  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+  "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  "./app/**/*.{js,ts,jsx,tsx,mdx}",
+],
+theme: {
+  extend: {
+    fontFamily: {
+      sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+      mono: ["var(--font-mono)", ...fontFamily.mono],
+    },
+    colors: {
+      ...defaultColors,
+      background: "hsl(var(--background))",
+      foreground: "hsl(var(--foreground))",
+    },
+    boxShadow: {
+      ...defaultBoxShadow,
+      "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
+    },
+    borderRadius: {
+      "3xl": "2rem",
+    },
+    animation: {
+      ...defaultAnimation,
+      "spin-slow": "spin 3s linear infinite",
+    },
+  },
+},
+}
+export default config
+`
+
+    const tailwindConfig = {
+      theme: {
+        extend: {
+          fontFamily: {
+            heading: ['var(--font-geist-sans)'],
+          },
+          colors: {
+            border: 'hsl(var(--border))',
+            input: 'hsl(var(--input))',
+            ring: 'hsl(var(--ring))',
+            primary: {
+              DEFAULT: 'hsl(var(--primary))',
+              foreground: 'hsl(var(--primary-foreground))',
+            },
+            card: {
+              DEFAULT: 'hsl(var(--card))',
+              foreground: 'hsl(var(--card-foreground))',
+            },
+          },
+          borderRadius: {
+            lg: 'var(--radius)',
+            md: 'calc(var(--radius) - 2px)',
+            sm: 'calc(var(--radius) - 4px)',
+          },
+          animation: {
+            'accordion-down': 'accordion-down 0.2s ease-out',
+            'accordion-up': 'accordion-up 0.2s ease-out',
+          },
+        },
+      },
+    }
+
+    const output1 = await transformTailwindConfig(input, tailwindConfig, {
+      config: SHARED_CONFIG,
+    })
+
+    const output2 = await transformTailwindConfig(output1, tailwindConfig, {
+      config: SHARED_CONFIG,
+    })
+
+    const output3 = await transformTailwindConfig(output2, tailwindConfig, {
+      config: SHARED_CONFIG,
+    })
+
+    expect(output3).toBe(output1)
+    expect(output3).toBe(output2)
+  })
+
+  it('should keep quotes in strings', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+          sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        ...defaultColors,
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              colors: {
+                primary: {
+                  DEFAULT: 'hsl(var(--primary))',
+                  foreground: 'hsl(var(--primary-foreground))',
+                },
+                card: {
+                  DEFAULT: 'hsl(var(--card))',
+                  foreground: 'hsl(var(--card-foreground))',
+                },
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should keep arrays when formatted on multilines', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Figtree',
+          ...defaultTheme.fontFamily.sans
+        ],
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              fontFamily: {
+                mono: ['Foo'],
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should handle objects nested in arrays', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1rem' }],
+        sm: [
+          '0.875rem',
+          {
+            lineHeight: '1.25rem',
+          },
+        ],
+      },
+    },
+  },
+}
+export default config
+  `,
+        {
+          theme: {
+            extend: {
+              fontSize: {
+                xl: [
+                  'clamp(1.5rem, 1.04vi + 1.17rem, 2rem)',
+                  {
+                    lineHeight: '1.2',
+                    letterSpacing: '-0.02em',
+                    fontWeight: '600',
+                  },
+                ],
+              },
+            },
+          },
+        },
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should preserve boolean values', async () => {
+    expect(
+      await transformTailwindConfig(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    container: {
+      center: true
+    }
+  },
+}
+export default config
+  `,
+        {},
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('nestSpreadProperties', () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      'test.ts',
+      `const config = ${input};`,
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ObjectLiteralExpression,
+    )
+    if (!configObject)
+      throw new Error('Config object not found')
+
+    nestSpreadProperties(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, '')).toBe(expected.replace(/\s+/g, ''))
+  }
+
+  it('should nest spread properties', () => {
+    testTransformation(
+      `{ theme: { ...foo, bar: { ...baz, one: "two" }, other: { a: "b", ...c } } }`,
+      `{ theme: { "___foo": "...foo", bar: { "___baz": "...baz", one: "two" }, other: { a: "b", "___c": "...c" } } }`,
+    )
+  })
+
+  it('should handle mixed property assignments', () => {
+    testTransformation(
+      `{ ...foo, a: 1, b() {}, ...bar, c: { ...baz } }`,
+      `{ "___foo": "...foo", a: 1, b() {}, "___bar": "...bar", c: { "___baz": "...baz" } }`,
+    )
+  })
+
+  it('should handle objects with only spread properties', () => {
+    testTransformation(
+      `{ ...foo, ...bar, ...baz }`,
+      `{ "___foo": "...foo", "___bar": "...bar", "___baz": "...baz" }`,
+    )
+  })
+
+  it('should handle property name conflicts', () => {
+    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, "___foo": "...foo" }`)
+  })
+
+  it('should handle shorthand property names', () => {
+    testTransformation(`{ a, ...foo, b }`, `{ a, "___foo": "...foo", b }`)
+  })
+
+  it('should handle computed property names', () => {
+    testTransformation(
+      `{ ["computed"]: 1, ...foo }`,
+      `{ ["computed"]: 1, "___foo": "...foo" }`,
+    )
+  })
+
+  it('should handle spreads in arrays', () => {
+    testTransformation(
+      `{ foo: [{ ...bar }] }`,
+      `{ foo: [{ "___bar": "...bar" }] }`,
+    )
+  })
+
+  it('should handle deep nesting in arrays', () => {
+    testTransformation(
+      `{ foo: [{ baz: { ...other.baz }, ...bar }] }`,
+      `{ foo: [{ baz: { "___other.baz": "...other.baz" }, "___bar": "...bar" }] }`,
+    )
+  })
+})
+
+describe('nestSpreadElements', () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      'test.ts',
+      `const config = ${input};`,
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ArrayLiteralExpression,
+    )
+    if (!configObject)
+      throw new Error('Config object not found')
+
+    nestSpreadElements(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, '')).toBe(expected.replace(/\s+/g, ''))
+  }
+
+  it('should spread elements', () => {
+    testTransformation(
+      `[...bar]`,
+      `["...bar"]`,
+    )
+  })
+
+  it('should handle mixed element types', () => {
+    testTransformation(
+      `['foo', 2, true, ...bar, "baz"]`,
+      `['foo', 2, true, "...bar", "baz"]`,
+    )
+  })
+
+  it('should handle arrays with only spread elements', () => {
+    testTransformation(
+      `[...foo, ...foo.bar, ...baz]`,
+      `["...foo", "...foo.bar", "...baz"]`,
+    )
+  })
+
+  it('should handle nested arrays with spreads', () => {
+    testTransformation(
+      `[...foo, [...bar]]`,
+      `["...foo", ["...bar"]]`,
+    )
+  })
+
+  it('should handle nested arrays within objects', () => {
+    testTransformation(
+      `[{ foo: [...foo] }]`,
+      `[{ foo: ["...foo"] }]`,
+    )
+  })
+
+  it('should handle deeply nested arrays within spread objects', () => {
+    testTransformation(
+      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
+      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`,
+    )
+  })
+
+  it('should handle optional paths in spread', () => {
+    testTransformation(
+      `[{ foo: [...foo?.bar] }]`,
+      `[{ foo: ["...foo?.bar"] }]`,
+    )
+  })
+
+  it('should handle computed property paths within spread', () => {
+    testTransformation(
+      `[{ foo: [...foo["bar"]] }]`,
+      `[{ foo: ["...foo["bar"]"] }]`,
+    )
+  })
+
+  it('should handle indexed paths in spread', () => {
+    testTransformation(
+      `[{ foo: [...foo[0]] }]`,
+      `[{ foo: ["...foo[0]"] }]`,
+    )
+  })
+})
+
+describe('unnestSpreadProperties', () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      'test.ts',
+      `const config = ${input};`,
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ObjectLiteralExpression,
+    )
+    if (!configObject)
+      throw new Error('Config object not found')
+
+    unnestSpreadProperties(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, '')).toBe(expected.replace(/\s+/g, ''))
+  }
+
+  it('should nest spread properties', () => {
+    testTransformation(
+      `{ theme: { ___foo: "...foo", bar: { ___baz: "...baz", one: "two" }, other: { a: "b", ___c: "...c" } } }`,
+      `{ theme: { ...foo, bar: { ...baz, one: "two" }, other: { a: "b", ...c } } }`,
+    )
+  })
+
+  it('should handle mixed property assignments', () => {
+    testTransformation(
+      `{ ___foo: "...foo", a: 1, b() {}, ___bar: "...bar", c: { ___baz: "...baz" } }`,
+      `{ ...foo, a: 1, b() {}, ...bar, c: { ...baz } }`,
+    )
+  })
+
+  it('should handle objects with only spread properties', () => {
+    testTransformation(
+      `{ ___foo: "...foo", ___bar: "...bar", ___baz: "...baz" }`,
+      `{ ...foo, ...bar, ...baz }`,
+    )
+  })
+
+  it('should handle property name conflicts', () => {
+    testTransformation(`{ foo: 1, ___foo: "...foo" }`, `{ foo: 1, ...foo }`)
+  })
+
+  it('should handle shorthand property names', () => {
+    testTransformation(`{ a, ___foo: "...foo", b }`, `{ a, ...foo, b }`)
+  })
+
+  it('should handle computed property names', () => {
+    testTransformation(
+      `{ ["computed"]: 1, "___foo": "...foo" }`,
+      `{ ["computed"]: 1, ...foo }`,
+    )
+  })
+
+  it('should handle spread objects within arrays', () => {
+    testTransformation(
+      `{ ["computed"]: 1, foo: [{ "___foo": "...foo" }] }`,
+      `{ ["computed"]: 1, foo: [{...foo}] }`,
+    )
+  })
+
+  it('should handle deeply nested spread objects within an array', () => {
+    testTransformation(
+      `{ ["computed"]: 1, foo: [{ "___foo": "...foo", bar: { baz: 'baz', "___foo.bar": "...foo.bar" } }] }`,
+      `{ ["computed"]: 1, foo: [{...foo, bar: { baz: 'baz', ...foo.bar } }] }`,
+    )
+  })
+})
+
+describe('unnestSpreadElements', () => {
+  let project: Project
+
+  beforeEach(() => {
+    project = new Project({ useInMemoryFileSystem: true })
+  })
+
+  function testTransformation(input: string, expected: string) {
+    const sourceFile = project.createSourceFile(
+      'test.ts',
+      `const config = ${input};`,
+    )
+    const configObject = sourceFile.getFirstDescendantByKind(
+      SyntaxKind.ArrayLiteralExpression,
+    )
+    if (!configObject)
+      throw new Error('Config object not found')
+
+    unnsetSpreadElements(configObject)
+
+    const result = configObject.getText()
+    expect(result.replace(/\s+/g, '')).toBe(expected.replace(/\s+/g, ''))
+  }
+
+  it('should spread elements', () => {
+    testTransformation(
+      `["...bar"]`,
+      `[...bar]`,
+    )
+  })
+
+  it('should handle mixed element types', () => {
+    testTransformation(
+      `['foo', 2, true, "...bar", "baz"]`,
+      `['foo', 2, true, ...bar, "baz"]`,
+    )
+  })
+
+  it('should handle arrays with only spread elements', () => {
+    testTransformation(
+      `["...foo", "...foo.bar", "...baz"]`,
+      `[...foo, ...foo.bar, ...baz]`,
+    )
+  })
+
+  it('should handle nested arrays with spreads', () => {
+    testTransformation(
+      `["...foo", ["...bar"]]`,
+      `[...foo, [...bar]]`,
+    )
+  })
+
+  it('should handle nested arrays within objects', () => {
+    testTransformation(
+      `[{ foo: ["...foo"] }]`,
+      `[{ foo: [...foo] }]`,
+    )
+  })
+
+  it('should handle deeply nested arrays within spread objects', () => {
+    testTransformation(
+      `[{ foo: ["...foo", { bar: ['bar', "...bar" ]}] }]`,
+      `[{ foo: [...foo, { bar: ['bar', ...bar ]}] }]`,
+    )
+  })
+
+  it('should handle optional paths in spread', () => {
+    testTransformation(
+      `[{ foo: ["...foo?.bar"] }]`,
+      `[{ foo: [...foo?.bar] }]`,
+
+    )
+  })
+
+  it('should handle computed property paths (\') within spread', () => {
+    testTransformation(
+      `[{ foo: ["...foo['bar']"] }]`,
+      `[{ foo: [...foo['bar']] }]`,
+    )
+  })
+
+  it('should handle computed property paths (") within spread', () => {
+    testTransformation(
+      `[{ foo: ['...foo["bar"]'] }]`,
+      `[{ foo: [...foo["bar"]] }]`,
+    )
+  })
+
+  it('should handle indexed paths in spread', () => {
+    testTransformation(
+      `[{ foo: ["...foo[0]"] }]`,
+      `[{ foo: [...foo[0]] }]`,
+    )
+  })
+})
+
+describe('buildTailwindThemeColorsFromCssVars', () => {
+  it('should inline color names', () => {
+    expect(
+      buildTailwindThemeColorsFromCssVars({
+        'primary': 'blue',
+        'primary-light': 'skyblue',
+        'primary-dark': 'navy',
+        'secondary': 'green',
+        'accent': 'orange',
+        'accent-hover': 'darkorange',
+        'accent-active': 'orangered',
+      }),
+    ).toEqual({
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        light: 'hsl(var(--primary-light))',
+        dark: 'hsl(var(--primary-dark))',
+      },
+      secondary: 'hsl(var(--secondary))',
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        hover: 'hsl(var(--accent-hover))',
+        active: 'hsl(var(--accent-active))',
+      },
+    })
+  })
+
+  it('should not add a DEFAULT if not present', () => {
+    expect(
+      buildTailwindThemeColorsFromCssVars({
+        'primary-light': 'skyblue',
+        'primary-dark': 'navy',
+        'secondary': 'green',
+        'accent': 'orange',
+        'accent-hover': 'darkorange',
+        'accent-active': 'orangered',
+      }),
+    ).toEqual({
+      primary: {
+        light: 'hsl(var(--primary-light))',
+        dark: 'hsl(var(--primary-dark))',
+      },
+      secondary: 'hsl(var(--secondary))',
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        hover: 'hsl(var(--accent-hover))',
+        active: 'hsl(var(--accent-active))',
+      },
+    })
+  })
+
+  it('should build tailwind theme colors from css vars', () => {
+    expect(
+      buildTailwindThemeColorsFromCssVars({
+        'background': '0 0% 100%',
+        'foreground': '224 71.4% 4.1%',
+        'card': '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        'popover': '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        'primary': '220.9 39.3% 11%',
+        'primary-foreground': '210 20% 98%',
+        'secondary': '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        'muted': '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        'accent': '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        'destructive': '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        'border': '220 13% 91%',
+        'input': '220 13% 91%',
+        'ring': '224 71.4% 4.1%',
+      }),
+    ).toEqual({
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+      background: 'hsl(var(--background))',
+      foreground: 'hsl(var(--foreground))',
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))',
+      },
+      secondary: {
+        DEFAULT: 'hsl(var(--secondary))',
+        foreground: 'hsl(var(--secondary-foreground))',
+      },
+      destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))',
+      },
+      muted: {
+        DEFAULT: 'hsl(var(--muted))',
+        foreground: 'hsl(var(--muted-foreground))',
+      },
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        foreground: 'hsl(var(--accent-foreground))',
+      },
+      popover: {
+        DEFAULT: 'hsl(var(--popover))',
+        foreground: 'hsl(var(--popover-foreground))',
+      },
+      card: {
+        DEFAULT: 'hsl(var(--card))',
+        foreground: 'hsl(var(--card-foreground))',
+      },
+    })
+  })
+})
diff --git a/packages/cli/test/utils/updaters/update-tailwind-content.test.ts b/packages/cli/test/utils/updaters/update-tailwind-content.test.ts
new file mode 100644
index 000000000..541d694b6
--- /dev/null
+++ b/packages/cli/test/utils/updaters/update-tailwind-content.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+
+import { transformTailwindContent } from '../../../src/utils/updaters/update-tailwind-content'
+
+const SHARED_CONFIG = {
+  $schema: 'https://shadcn-vue.com/schema.json',
+  style: 'new-york',
+  rsc: true,
+  tsx: true,
+  tailwind: {
+    config: 'tailwind.config.ts',
+    css: 'app/globals.css',
+    baseColor: 'slate',
+    cssVariables: true,
+  },
+  aliases: {
+    components: '@/components',
+    utils: '@/lib/utils',
+  },
+  resolvedPaths: {
+    cwd: '.',
+    tailwindConfig: 'tailwind.config.ts',
+    tailwindCss: 'app/globals.css',
+    components: './components',
+    utils: './lib/utils',
+    ui: './components/ui',
+  },
+}
+
+describe('transformTailwindContent -> content property', () => {
+  it('should add content property if not in config', async () => {
+    expect(
+      await transformTailwindContent(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        ['./foo/**/*.{js,ts,jsx,tsx,mdx}', './bar/**/*.{js,ts,jsx,tsx,mdx}'],
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should NOT add content property if already in config', async () => {
+    expect(
+      await transformTailwindContent(
+        `import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+  `,
+        ['./app/**/*.{js,ts,jsx,tsx,mdx}', './bar/**/*.{js,ts,jsx,tsx,mdx}'],
+        {
+          config: SHARED_CONFIG,
+        },
+      ),
+    ).toMatchSnapshot()
+  })
+})
diff --git a/packages/cli/tsup.config.ts b/packages/cli/tsup.config.ts
index 47a0b3582..54208735b 100644
--- a/packages/cli/tsup.config.ts
+++ b/packages/cli/tsup.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
   clean: true,
-  dts: true,
+  dts: false,
   entry: ['src/index.ts'],
   format: ['esm'],
   sourcemap: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97350e403..551d4e15d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -246,6 +246,9 @@ importers:
 
   packages/cli:
     dependencies:
+      '@nuxt/kit':
+        specifier: ^3.14.159
+        version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       '@unovue/detypes':
         specifier: ^0.8.4
         version: 0.8.4

From 097830a15ca2879072dc896db3898e15b51bb44a Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 22 Nov 2024 17:58:53 +0800
Subject: [PATCH 16/39] docs: fix build, update paths

---
 CONTRIBUTING.md                               |    4 +-
 .../theme/components/BlockContainer.vue       |   27 +-
 .../.vitepress/theme/components/Blocks.vue    |   11 +-
 .../theme/components/ComponentLoader.vue      |    6 +-
 .../theme/components/ComponentPreview.vue     |    2 +-
 .../theme/components/CustomizerCode.vue       |   30 +-
 .../theme/components/InlineThemePicker.vue    |    2 +-
 .../www/.vitepress/theme/composables/style.ts |    2 +-
 .../.vitepress/theme/layout/ThemingLayout.vue |    9 +-
 apps/www/__registry__/index.ts                | 1086 ++++++++++++++++-
 apps/www/scripts/autogen.ts                   |    2 +-
 apps/www/scripts/build-registry.ts            |    1 +
 apps/www/src/assets/diagrams.drawio           |    2 +-
 apps/www/src/content/docs/charts.md           |    2 +-
 apps/www/src/content/docs/charts/area.md      |    2 +-
 apps/www/src/content/docs/charts/bar.md       |    2 +-
 apps/www/src/content/docs/charts/donut.md     |    2 +-
 apps/www/src/content/docs/charts/line.md      |    2 +-
 .../src/content/docs/components/accordion.md  |    2 +-
 .../content/docs/components/alert-dialog.md   |    2 +-
 .../content/docs/components/aspect-ratio.md   |    2 +-
 .../www/src/content/docs/components/avatar.md |    2 +-
 .../src/content/docs/components/calendar.md   |    2 +-
 .../src/content/docs/components/carousel.md   |    2 +-
 .../src/content/docs/components/checkbox.md   |    2 +-
 .../content/docs/components/collapsible.md    |    2 +-
 .../src/content/docs/components/command.md    |    2 +-
 .../content/docs/components/context-menu.md   |    2 +-
 .../content/docs/components/date-picker.md    |    2 +-
 .../www/src/content/docs/components/dialog.md |    2 +-
 .../www/src/content/docs/components/drawer.md |    2 +-
 .../content/docs/components/dropdown-menu.md  |    2 +-
 .../src/content/docs/components/hover-card.md |    2 +-
 apps/www/src/content/docs/components/label.md |    2 +-
 .../src/content/docs/components/menubar.md    |    2 +-
 .../docs/components/navigation-menu.md        |    2 +-
 .../content/docs/components/number-field.md   |    2 +-
 .../src/content/docs/components/pagination.md |    2 +-
 .../src/content/docs/components/pin-input.md  |    2 +-
 .../src/content/docs/components/popover.md    |    2 +-
 .../src/content/docs/components/progress.md   |    2 +-
 .../content/docs/components/radio-group.md    |    2 +-
 .../content/docs/components/range-calendar.md |    2 +-
 .../src/content/docs/components/resizable.md  |    2 +-
 .../content/docs/components/scroll-area.md    |    2 +-
 .../www/src/content/docs/components/select.md |    2 +-
 .../src/content/docs/components/separator.md  |    2 +-
 apps/www/src/content/docs/components/sheet.md |    2 +-
 .../www/src/content/docs/components/slider.md |    2 +-
 .../www/src/content/docs/components/sonner.md |    2 +-
 .../src/content/docs/components/stepper.md    |    2 +-
 .../www/src/content/docs/components/switch.md |    2 +-
 apps/www/src/content/docs/components/tabs.md  |    2 +-
 .../src/content/docs/components/tags-input.md |    2 +-
 apps/www/src/content/docs/components/toast.md |    2 +-
 .../content/docs/components/toggle-group.md   |    2 +-
 .../www/src/content/docs/components/toggle.md |    2 +-
 .../src/content/docs/components/tooltip.md    |    2 +-
 .../src/content/docs/components/v-calendar.md |    2 +-
 apps/www/src/content/docs/contribution.md     |    4 +-
 .../src/public/diagrams/structure-dark.svg    |    2 +-
 .../src/public/diagrams/structure-light.svg   |    2 +-
 .../public/r/styles/default/CardStats.json    |    4 +-
 .../public/r/styles/new-york/CardStats.json   |    2 +-
 apps/www/src/public/r/temp.json               |    4 +-
 .../registry/default/example/CardStats.vue    |    4 +-
 apps/www/src/registry/registry-themes.ts      |    2 +
 apps/www/src/stores/config.ts                 |    5 +-
 apps/www/tsconfig.registry.json               |    2 +-
 pnpm-lock.yaml                                |    3 -
 70 files changed, 1196 insertions(+), 114 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 565a11742..a7cc07c4f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -36,7 +36,7 @@ packages
 | ----------------------------| -------------------------------------------|
 | `apps/www/.vitepress`       | The Vitepress application for the website. |
 | `apps/www/src/content`      | The content for the website.               |
-| `apps/www/src/lib/registry` | The registry for the components.           |
+| `apps/www/registry` | The registry for the components.           |
 | `packages/cli`              | The `shadcn-vue` package.                  |
 
 ## Development
@@ -83,7 +83,7 @@ Documentation is written using [md](https://vitepress.dev/guide/markdown). You c
 
 ## Components
 
-We use a registry system for developing components. You can find the source code for the components under `apps/www/src/lib/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.
 
 ```bash
 apps
diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 586e133ec..4fcf5885b 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
+import { Badge } from '@/registry/new-york/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
+import { Separator } from '@/registry/new-york/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import { useConfigStore } from '@/stores/config'
 import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
 import MagicString from 'magic-string'
+
 import { reactive, ref, watch } from 'vue'
 import { compileScript, parse, walk } from 'vue/compiler-sfc'
+import { Index } from '../../../__registry__'
 import { highlight } from '../config/shiki'
 import BlockCopyButton from './BlockCopyButton.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
-
-// import { V0Button } from '@/components/v0-button'
-import { Badge } from '@/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
-import { Separator } from '@/registry/new-york/ui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
-import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import BlockPreview from './BlockPreview.vue'
+import StyleSwitcher from './StyleSwitcher.vue'
 
 const props = defineProps<{
   name: string
@@ -57,11 +57,12 @@ function transformImportPath(code: string) {
 
 watch([style, codeConfig], async () => {
   try {
-    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
-    rawString.value = transformImportPath(removeScript(baseRawString))
+    const styleIndex = Index[style.value]
+    const componentRegistry = styleIndex[props.name]
 
+    const rawString = await componentRegistry.raw()
     if (!metadata.description) {
-      const { descriptor } = parse(baseRawString)
+      const { descriptor } = parse(rawString)
       const ast = compileScript(descriptor, { id: '' })
       walk(ast.scriptAst, {
         enter(node: any) {
@@ -78,7 +79,7 @@ watch([style, codeConfig], async () => {
       })
     }
 
-    codeHtml.value = highlight(rawString.value, 'vue')
+    codeHtml.value = highlight(removeScript(rawString), 'vue')
   }
   catch (err) {
     console.error(err)
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index e71cd2c10..64592b502 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -2,20 +2,17 @@
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/registry/new-york/ui/button'
 import GitHubIcon from '~icons/radix-icons/github-logo'
-import { ref } from 'vue'
+import { Index } from '../../../__registry__'
 import Announcement from '../components/Announcement.vue'
 import PageAction from '../components/PageAction.vue'
+
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
-const blocks = ref<string[]>([])
-
-import('../../../__registry__/index').then((res) => {
-  blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
-})
+const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
 </script>
 
 <template>
@@ -47,7 +44,7 @@ import('../../../__registry__/index').then((res) => {
     </PageAction>
   </PageHeader>
 
-  <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
+  <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48 container py-6">
     <BlockContainer v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>
diff --git a/apps/www/.vitepress/theme/components/ComponentLoader.vue b/apps/www/.vitepress/theme/components/ComponentLoader.vue
index e7ed23e51..603414680 100644
--- a/apps/www/.vitepress/theme/components/ComponentLoader.vue
+++ b/apps/www/.vitepress/theme/components/ComponentLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useConfigStore } from '@/stores/config'
 import { defineAsyncComponent } from 'vue'
+import { Index } from '../../../__registry__'
 import Spinner from './Spinner.vue'
 
 const props = defineProps<{
@@ -9,9 +10,12 @@ const props = defineProps<{
 }>()
 const { style } = useConfigStore()
 
+const styleIndex = Index[style.value]
+const componentRegistry = styleIndex[props.name]
+
 const Component = defineAsyncComponent({
   loadingComponent: Spinner,
-  loader: () => import(`../../../src/lib/registry/${style.value}/${props.typeName}/${props.name}.vue`),
+  loader: componentRegistry.component,
   timeout: 5000,
 })
 </script>
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index febe7ad6d..30db8acc8 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -35,7 +35,7 @@ function transformImportPath(code: string) {
 
 watch([style, codeConfig], async () => {
   try {
-    rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
+    rawString.value = await import(`../../../src/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
     codeHtml.value = highlight(transformedRawString.value, 'vue')
   }
   catch (err) {
diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index 970ffa31e..c180c5e7b 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { themes } from '@/registry'
 import { Button } from '@/registry/new-york/ui/button'
+import { themes } from '@/registry/registry-themes'
 import { useConfigStore } from '@/stores/config'
 import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
@@ -25,28 +25,28 @@ async function copyCode() {
 <code ref="codeRef" class="relative block rounded font-mono text-sm">
 <span class="line text-white">@layer base &#123;</span>
   <span class="line text-white">:root &#123;</span>
-  <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars?.light?.background }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars?.light?.foreground }};</span>
   <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
-    <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
+    <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars?.light?.[prefix] }};</span>
+    <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars?.light?.[ `${prefix}-foreground`] }};</span>
   </template>
-  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars?.light?.border }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars?.light?.input }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars?.light?.ring }};</span>
   <span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
   <span class="line text-white">&#125;</span>
   <span class="line text-white">&nbsp;</span>
   <span class="line text-white">.dark &#123;</span>
-  <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars?.dark?.background }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars?.dark?.foreground }};</span>
   <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
-    <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
+    <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars?.dark?.[ prefix] }};</span>
+    <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars?.dark?.[ `${prefix}-foreground`] }};</span>
   </template>
-  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars?.dark?.border }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars?.dark?.input }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars?.dark?.ring }};</span>
   <span class="line text-white">&#125;</span>
 <span class="line text-white">&#125;</span>
 </code>
diff --git a/apps/www/.vitepress/theme/components/InlineThemePicker.vue b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
index 0fbdc3971..2dc50dcd2 100644
--- a/apps/www/.vitepress/theme/components/InlineThemePicker.vue
+++ b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
-import { colors } from '@/registry'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
+import { colors } from '@/registry/registry-colors'
 import { useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 
diff --git a/apps/www/.vitepress/theme/composables/style.ts b/apps/www/.vitepress/theme/composables/style.ts
index 3a0ec2217..1d63283c3 100644
--- a/apps/www/.vitepress/theme/composables/style.ts
+++ b/apps/www/.vitepress/theme/composables/style.ts
@@ -1,4 +1,4 @@
+import { styles } from '@/registry/registry-styles'
 import { useStorage } from '@vueuse/core'
-import { styles } from '../../../src/lib/registry/styles'
 
 export const useStyle = () => useStorage('selected-style', styles[0].name)
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index 94e8b8fb4..00ef9534f 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -54,7 +54,7 @@ watch(radius, (radius) => {
 </script>
 
 <template>
-  <div class="container relative">
+  <div>
     <PageHeader>
       <PageHeaderHeading class="hidden md:block">
         Add colors. Make it yours.
@@ -111,9 +111,8 @@ watch(radius, (radius) => {
         </Dialog>
       </PageAction>
     </PageHeader>
-
-    <section>
-      <slot />
-    </section>
   </div>
+  <section class="container py-6">
+    <slot />
+  </section>
 </template>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 53a31398d..93ed8fecc 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -15,6 +15,7 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/new-york/lib/utils.ts").then((m) => m.default),
+      raw: () => import("@/registry/new-york/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -46,6 +47,7 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -73,6 +75,7 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -124,6 +127,7 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -143,6 +147,7 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -218,6 +223,7 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -245,6 +251,7 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -264,6 +271,7 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -307,6 +315,7 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -326,6 +335,7 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -389,6 +399,7 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -428,6 +439,7 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -471,6 +483,7 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -506,6 +519,7 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -525,6 +539,7 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -544,6 +559,7 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -563,6 +579,7 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -582,6 +599,7 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -601,6 +619,7 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -628,6 +647,7 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -679,6 +699,7 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -754,6 +775,7 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -805,6 +827,7 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -848,6 +871,7 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -919,6 +943,7 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -962,6 +987,7 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -989,6 +1015,7 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1008,6 +1035,7 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1027,6 +1055,7 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1102,6 +1131,7 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1149,6 +1179,7 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1184,6 +1215,7 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1219,6 +1251,7 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1250,6 +1283,7 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1277,6 +1311,7 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1296,6 +1331,7 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1319,6 +1355,7 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1382,6 +1419,7 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1405,6 +1443,7 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1428,6 +1467,7 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1487,6 +1527,7 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1506,6 +1547,7 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1553,6 +1595,7 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1668,6 +1711,7 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1687,6 +1731,7 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1706,6 +1751,7 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1725,6 +1771,7 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1768,6 +1815,7 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1787,6 +1835,7 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1838,6 +1887,7 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1869,6 +1919,7 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1904,6 +1955,7 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1923,6 +1975,7 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1974,6 +2027,7 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1993,6 +2047,7 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2016,6 +2071,7 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2047,6 +2103,7 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2066,6 +2123,7 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2081,6 +2139,7 @@ export const Index: Record<string, any> = {
         target: "AccordionDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2096,6 +2155,7 @@ export const Index: Record<string, any> = {
         target: "AlertDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2111,6 +2171,7 @@ export const Index: Record<string, any> = {
         target: "AlertDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2126,6 +2187,7 @@ export const Index: Record<string, any> = {
         target: "AlertDialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2141,6 +2203,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2156,6 +2219,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2171,6 +2235,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartSparkline.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2186,6 +2251,7 @@ export const Index: Record<string, any> = {
         target: "AspectRatioDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2201,6 +2267,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormApi.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2216,6 +2283,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormArray.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2231,6 +2299,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormBasic.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2246,6 +2315,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormConfirmPassword.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2261,6 +2331,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormControlled.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2276,6 +2347,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormDependencies.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2291,6 +2363,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormInputWithoutLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2306,6 +2379,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormSubObject.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2321,6 +2395,7 @@ export const Index: Record<string, any> = {
         target: "AvatarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2336,6 +2411,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2351,6 +2427,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2366,6 +2443,7 @@ export const Index: Record<string, any> = {
         target: "BadgeOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2381,6 +2459,7 @@ export const Index: Record<string, any> = {
         target: "BadgeSecondaryDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2396,6 +2475,7 @@ export const Index: Record<string, any> = {
         target: "BarChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2411,6 +2491,7 @@ export const Index: Record<string, any> = {
         target: "BarChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2426,6 +2507,7 @@ export const Index: Record<string, any> = {
         target: "BarChartRounded.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2441,6 +2523,7 @@ export const Index: Record<string, any> = {
         target: "BarChartStacked.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2456,6 +2539,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2471,6 +2555,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDropdown.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2486,6 +2571,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbEllipsisDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2501,6 +2587,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbLinkDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2516,6 +2603,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbResponsive.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2531,6 +2619,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbSeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2546,6 +2635,7 @@ export const Index: Record<string, any> = {
         target: "ButtonAsChildDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2561,6 +2651,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2576,6 +2667,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2591,6 +2683,7 @@ export const Index: Record<string, any> = {
         target: "ButtonGhostDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2606,6 +2699,7 @@ export const Index: Record<string, any> = {
         target: "ButtonIconDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2621,6 +2715,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLinkDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2636,6 +2731,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLoadingDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2651,6 +2747,7 @@ export const Index: Record<string, any> = {
         target: "ButtonOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2666,6 +2763,7 @@ export const Index: Record<string, any> = {
         target: "ButtonSecondaryDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2681,6 +2779,7 @@ export const Index: Record<string, any> = {
         target: "ButtonWithIconDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2696,6 +2795,7 @@ export const Index: Record<string, any> = {
         target: "CalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2711,6 +2811,7 @@ export const Index: Record<string, any> = {
         target: "CalendarForm.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2726,6 +2827,7 @@ export const Index: Record<string, any> = {
         target: "CalendarWithSelect.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2741,6 +2843,7 @@ export const Index: Record<string, any> = {
         target: "CardChat.vue"
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2756,6 +2859,7 @@ export const Index: Record<string, any> = {
         target: "CardDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2771,6 +2875,7 @@ export const Index: Record<string, any> = {
         target: "CardFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2786,6 +2891,7 @@ export const Index: Record<string, any> = {
         target: "CardStats.vue"
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2801,6 +2907,7 @@ export const Index: Record<string, any> = {
         target: "CardWithForm.vue"
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2816,6 +2923,7 @@ export const Index: Record<string, any> = {
         target: "CarouselApi.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2831,6 +2939,7 @@ export const Index: Record<string, any> = {
         target: "CarouselDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2846,6 +2955,7 @@ export const Index: Record<string, any> = {
         target: "CarouselOrientation.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2861,6 +2971,7 @@ export const Index: Record<string, any> = {
         target: "CarouselPlugin.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2876,6 +2987,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSize.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2891,6 +3003,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSpacing.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2906,6 +3019,7 @@ export const Index: Record<string, any> = {
         target: "CarouselThumbnails.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2921,6 +3035,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2936,6 +3051,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2951,6 +3067,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormMultiple.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2966,6 +3083,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormSingle.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2981,6 +3099,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxWithText.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2996,6 +3115,7 @@ export const Index: Record<string, any> = {
         target: "CollapsibleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3011,6 +3131,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3026,6 +3147,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDropdownMenu.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3041,6 +3163,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxForm.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3056,6 +3179,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxPopover.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3071,6 +3195,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxResponsive.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3086,6 +3211,7 @@ export const Index: Record<string, any> = {
         target: "CommandDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3101,6 +3227,7 @@ export const Index: Record<string, any> = {
         target: "CommandDialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3116,6 +3243,7 @@ export const Index: Record<string, any> = {
         target: "ContextMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3131,6 +3259,7 @@ export const Index: Record<string, any> = {
         target: "CustomChartTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3146,6 +3275,7 @@ export const Index: Record<string, any> = {
         target: "DataTableColumnPinningDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3161,6 +3291,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3176,6 +3307,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemoColumn.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3191,6 +3323,7 @@ export const Index: Record<string, any> = {
         target: "DataTableReactiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3206,6 +3339,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3221,6 +3355,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerForm.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3236,6 +3371,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithIndependentMonths.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3251,6 +3387,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3266,6 +3403,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithRange.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3281,6 +3419,7 @@ export const Index: Record<string, any> = {
         target: "DialogCustomCloseButton.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3296,6 +3435,7 @@ export const Index: Record<string, any> = {
         target: "DialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3311,6 +3451,7 @@ export const Index: Record<string, any> = {
         target: "DialogForm.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3326,6 +3467,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollBodyDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3341,6 +3483,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollOverlayDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3356,6 +3499,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartColor.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3371,6 +3515,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3386,6 +3531,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3401,6 +3547,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartPie.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3416,6 +3563,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3431,6 +3579,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDialog.vue"
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3446,6 +3595,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuCheckboxes.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3461,6 +3611,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3476,6 +3627,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuRadioGroup.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3491,6 +3643,7 @@ export const Index: Record<string, any> = {
         target: "HoverCardDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3506,6 +3659,7 @@ export const Index: Record<string, any> = {
         target: "InputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3521,6 +3675,7 @@ export const Index: Record<string, any> = {
         target: "InputDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3536,6 +3691,7 @@ export const Index: Record<string, any> = {
         target: "InputFile.vue"
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3551,6 +3707,7 @@ export const Index: Record<string, any> = {
         target: "InputForm.vue"
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3566,6 +3723,7 @@ export const Index: Record<string, any> = {
         target: "InputFormAutoAnimate.vue"
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3581,6 +3739,7 @@ export const Index: Record<string, any> = {
         target: "InputWithButton.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3596,6 +3755,7 @@ export const Index: Record<string, any> = {
         target: "InputWithIcon.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3611,6 +3771,7 @@ export const Index: Record<string, any> = {
         target: "InputWithLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3626,6 +3787,7 @@ export const Index: Record<string, any> = {
         target: "LabelDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3641,6 +3803,7 @@ export const Index: Record<string, any> = {
         target: "LineChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3656,6 +3819,7 @@ export const Index: Record<string, any> = {
         target: "LineChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3671,6 +3835,7 @@ export const Index: Record<string, any> = {
         target: "LineChartSparkline.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3686,6 +3851,7 @@ export const Index: Record<string, any> = {
         target: "MenubarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3701,6 +3867,7 @@ export const Index: Record<string, any> = {
         target: "NavigationMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3716,6 +3883,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldCurrency.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3731,6 +3899,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDecimal.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3746,6 +3915,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3761,6 +3931,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3776,6 +3947,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldForm.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3791,6 +3963,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldPercentage.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3806,6 +3979,7 @@ export const Index: Record<string, any> = {
         target: "PaginationDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3821,6 +3995,7 @@ export const Index: Record<string, any> = {
         target: "PinInputControlled.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3836,6 +4011,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3851,6 +4027,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3866,6 +4043,7 @@ export const Index: Record<string, any> = {
         target: "PinInputFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3881,6 +4059,7 @@ export const Index: Record<string, any> = {
         target: "PinInputSeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3896,6 +4075,7 @@ export const Index: Record<string, any> = {
         target: "PopoverDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3911,6 +4091,7 @@ export const Index: Record<string, any> = {
         target: "ProgressDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3926,6 +4107,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3941,6 +4123,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupForm.vue"
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3956,6 +4139,7 @@ export const Index: Record<string, any> = {
         target: "RangeCalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3971,6 +4155,7 @@ export const Index: Record<string, any> = {
         target: "ResizableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3986,6 +4171,7 @@ export const Index: Record<string, any> = {
         target: "ResizableHandleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4001,6 +4187,7 @@ export const Index: Record<string, any> = {
         target: "ResizableVerticalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4016,6 +4203,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4031,6 +4219,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaHorizontalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4046,6 +4235,7 @@ export const Index: Record<string, any> = {
         target: "SelectDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4061,6 +4251,7 @@ export const Index: Record<string, any> = {
         target: "SelectForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4076,6 +4267,7 @@ export const Index: Record<string, any> = {
         target: "SelectScrollable.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4091,6 +4283,7 @@ export const Index: Record<string, any> = {
         target: "SeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4106,6 +4299,7 @@ export const Index: Record<string, any> = {
         target: "SheetDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4121,6 +4315,7 @@ export const Index: Record<string, any> = {
         target: "SheetSideDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4136,6 +4331,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonCard.vue"
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4151,6 +4347,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4166,6 +4363,7 @@ export const Index: Record<string, any> = {
         target: "SliderDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4181,6 +4379,7 @@ export const Index: Record<string, any> = {
         target: "SliderForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4196,6 +4395,7 @@ export const Index: Record<string, any> = {
         target: "SonnerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4211,6 +4411,7 @@ export const Index: Record<string, any> = {
         target: "SonnerWithDialog.vue"
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4226,6 +4427,7 @@ export const Index: Record<string, any> = {
         target: "StepperDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4241,6 +4443,7 @@ export const Index: Record<string, any> = {
         target: "StepperForm.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4256,6 +4459,7 @@ export const Index: Record<string, any> = {
         target: "StepperHorizental.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4271,6 +4475,7 @@ export const Index: Record<string, any> = {
         target: "StepperVertical.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4286,6 +4491,7 @@ export const Index: Record<string, any> = {
         target: "SwitchDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4301,6 +4507,7 @@ export const Index: Record<string, any> = {
         target: "SwitchForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4316,6 +4523,7 @@ export const Index: Record<string, any> = {
         target: "TableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4331,6 +4539,7 @@ export const Index: Record<string, any> = {
         target: "TabsDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4346,6 +4555,7 @@ export const Index: Record<string, any> = {
         target: "TabsVerticalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4361,6 +4571,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputComboboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4376,6 +4587,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4391,6 +4603,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4406,6 +4619,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4421,6 +4635,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4436,6 +4651,7 @@ export const Index: Record<string, any> = {
         target: "TextareaForm.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4451,6 +4667,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithButton.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4466,6 +4683,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4481,6 +4699,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithText.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4496,6 +4715,7 @@ export const Index: Record<string, any> = {
         target: "ToastDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4511,6 +4731,7 @@ export const Index: Record<string, any> = {
         target: "ToastDestructive.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4526,6 +4747,7 @@ export const Index: Record<string, any> = {
         target: "ToastSimple.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4541,6 +4763,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithAction.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4556,6 +4779,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithTitle.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4571,6 +4795,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4586,6 +4811,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDisabledDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4601,6 +4827,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4616,6 +4843,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDisabledDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4631,6 +4859,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupLargeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4646,6 +4875,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4661,6 +4891,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSingleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4676,6 +4907,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSmallDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4691,6 +4923,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4706,6 +4939,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicWithTextDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4721,6 +4955,7 @@ export const Index: Record<string, any> = {
         target: "ToggleLargeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4736,6 +4971,7 @@ export const Index: Record<string, any> = {
         target: "ToggleSmallDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4751,6 +4987,7 @@ export const Index: Record<string, any> = {
         target: "TooltipDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4766,6 +5003,7 @@ export const Index: Record<string, any> = {
         target: "TypographyBlockquote.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4781,6 +5019,7 @@ export const Index: Record<string, any> = {
         target: "TypographyDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4796,6 +5035,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH1.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4811,6 +5051,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH2.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4826,6 +5067,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH3.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4841,6 +5083,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH4.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4856,6 +5099,7 @@ export const Index: Record<string, any> = {
         target: "TypographyInlineCode.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4871,6 +5115,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLarge.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4886,6 +5131,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLead.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4901,6 +5147,7 @@ export const Index: Record<string, any> = {
         target: "TypographyList.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4916,6 +5163,7 @@ export const Index: Record<string, any> = {
         target: "TypographyMuted.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4931,6 +5179,7 @@ export const Index: Record<string, any> = {
         target: "TypographyP.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4946,6 +5195,7 @@ export const Index: Record<string, any> = {
         target: "TypographySmall.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4961,6 +5211,7 @@ export const Index: Record<string, any> = {
         target: "TypographyTable.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4976,6 +5227,7 @@ export const Index: Record<string, any> = {
         target: "VCalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4991,6 +5243,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5006,6 +5259,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerForm.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5021,6 +5275,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5036,6 +5291,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithRange.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5051,6 +5307,7 @@ export const Index: Record<string, any> = {
         target: "VDateTimePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5066,6 +5323,7 @@ export const Index: Record<string, any> = {
         target: "VRangePickerWithSlot.vue"
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5081,6 +5339,7 @@ export const Index: Record<string, any> = {
         target: "Authentication01.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5096,6 +5355,7 @@ export const Index: Record<string, any> = {
         target: "Authentication02.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5111,6 +5371,7 @@ export const Index: Record<string, any> = {
         target: "Authentication03.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5126,6 +5387,7 @@ export const Index: Record<string, any> = {
         target: "Authentication04.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5141,6 +5403,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard01.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5156,6 +5419,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard02.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5171,6 +5435,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard03.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5186,6 +5451,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard04.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5201,6 +5467,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard05.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5216,6 +5483,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard06.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5231,6 +5499,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard07.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5246,6 +5515,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar01Page.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5261,6 +5531,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar07Page.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5292,6 +5563,7 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5319,6 +5591,7 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5370,6 +5643,7 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5389,6 +5663,7 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5464,6 +5739,7 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5491,6 +5767,7 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5510,6 +5787,7 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5553,6 +5831,7 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5572,6 +5851,7 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5635,6 +5915,7 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5674,6 +5955,7 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5717,6 +5999,7 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5752,6 +6035,7 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5771,6 +6055,7 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5790,6 +6075,7 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5809,6 +6095,7 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5828,6 +6115,7 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5847,6 +6135,7 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5874,6 +6163,7 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5925,6 +6215,7 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6000,6 +6291,7 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6051,6 +6343,7 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6094,6 +6387,7 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6165,6 +6459,7 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6208,6 +6503,7 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6235,6 +6531,7 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6254,6 +6551,7 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6273,6 +6571,7 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6348,6 +6647,7 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6395,6 +6695,7 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6430,6 +6731,7 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6465,6 +6767,7 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6496,6 +6799,7 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6523,6 +6827,7 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6542,6 +6847,7 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6565,6 +6871,7 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6628,6 +6935,7 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6651,6 +6959,7 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6674,6 +6983,7 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6733,6 +7043,7 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6752,6 +7063,7 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6799,6 +7111,7 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6914,6 +7227,7 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6933,6 +7247,7 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6952,6 +7267,7 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6971,6 +7287,7 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7014,6 +7331,7 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7033,6 +7351,7 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7084,6 +7403,7 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7115,6 +7435,7 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7150,6 +7471,7 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7169,6 +7491,7 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7220,6 +7543,7 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7239,6 +7563,7 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7262,6 +7587,7 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7293,6 +7619,7 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7312,6 +7639,7 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7327,6 +7655,7 @@ export const Index: Record<string, any> = {
         target: "AccordionDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7342,6 +7671,7 @@ export const Index: Record<string, any> = {
         target: "AlertDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7357,6 +7687,7 @@ export const Index: Record<string, any> = {
         target: "AlertDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7372,6 +7703,7 @@ export const Index: Record<string, any> = {
         target: "AlertDialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7387,6 +7719,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7402,6 +7735,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7417,6 +7751,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartSparkline.vue"
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7432,6 +7767,7 @@ export const Index: Record<string, any> = {
         target: "AspectRatioDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7447,6 +7783,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormApi.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7462,6 +7799,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormArray.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7477,6 +7815,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormBasic.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7492,6 +7831,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormConfirmPassword.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7507,6 +7847,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormControlled.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7522,6 +7863,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormDependencies.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7537,6 +7879,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormInputWithoutLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7552,6 +7895,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormSubObject.vue"
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7567,6 +7911,7 @@ export const Index: Record<string, any> = {
         target: "AvatarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7582,6 +7927,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7597,6 +7943,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7612,6 +7959,7 @@ export const Index: Record<string, any> = {
         target: "BadgeOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7627,6 +7975,7 @@ export const Index: Record<string, any> = {
         target: "BadgeSecondaryDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7642,6 +7991,7 @@ export const Index: Record<string, any> = {
         target: "BarChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7657,6 +8007,7 @@ export const Index: Record<string, any> = {
         target: "BarChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7672,6 +8023,7 @@ export const Index: Record<string, any> = {
         target: "BarChartRounded.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7687,6 +8039,7 @@ export const Index: Record<string, any> = {
         target: "BarChartStacked.vue"
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7702,6 +8055,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7717,6 +8071,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDropdown.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7732,6 +8087,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbEllipsisDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7747,6 +8103,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbLinkDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7762,6 +8119,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbResponsive.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7777,6 +8135,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbSeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7792,6 +8151,7 @@ export const Index: Record<string, any> = {
         target: "ButtonAsChildDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7807,6 +8167,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7822,6 +8183,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDestructiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7837,6 +8199,7 @@ export const Index: Record<string, any> = {
         target: "ButtonGhostDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7852,6 +8215,7 @@ export const Index: Record<string, any> = {
         target: "ButtonIconDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7867,6 +8231,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLinkDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7882,6 +8247,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLoadingDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7897,6 +8263,7 @@ export const Index: Record<string, any> = {
         target: "ButtonOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7912,6 +8279,7 @@ export const Index: Record<string, any> = {
         target: "ButtonSecondaryDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7927,6 +8295,7 @@ export const Index: Record<string, any> = {
         target: "ButtonWithIconDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7942,6 +8311,7 @@ export const Index: Record<string, any> = {
         target: "CalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7957,6 +8327,7 @@ export const Index: Record<string, any> = {
         target: "CalendarForm.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7972,6 +8343,7 @@ export const Index: Record<string, any> = {
         target: "CalendarWithSelect.vue"
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7987,6 +8359,7 @@ export const Index: Record<string, any> = {
         target: "CardChat.vue"
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8002,6 +8375,7 @@ export const Index: Record<string, any> = {
         target: "CardDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8017,6 +8391,7 @@ export const Index: Record<string, any> = {
         target: "CardFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8025,13 +8400,14 @@ export const Index: Record<string, any> = {
       name: "CardStats",
       description: "",
       type: "registry:example",
-      registryDependencies: ["card","themes","config"],
+      registryDependencies: ["card","registry-themes","config"],
       files: [{
         path: "registry/new-york/example/CardStats.vue",
         type: "registry:example",
         target: "CardStats.vue"
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8047,6 +8423,7 @@ export const Index: Record<string, any> = {
         target: "CardWithForm.vue"
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8062,6 +8439,7 @@ export const Index: Record<string, any> = {
         target: "CarouselApi.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8077,6 +8455,7 @@ export const Index: Record<string, any> = {
         target: "CarouselDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8092,6 +8471,7 @@ export const Index: Record<string, any> = {
         target: "CarouselOrientation.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8107,6 +8487,7 @@ export const Index: Record<string, any> = {
         target: "CarouselPlugin.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8122,6 +8503,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSize.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8137,6 +8519,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSpacing.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8152,6 +8535,7 @@ export const Index: Record<string, any> = {
         target: "CarouselThumbnails.vue"
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8167,6 +8551,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8182,6 +8567,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8197,6 +8583,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormMultiple.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8212,6 +8599,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormSingle.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8227,6 +8615,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxWithText.vue"
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8242,6 +8631,7 @@ export const Index: Record<string, any> = {
         target: "CollapsibleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8257,6 +8647,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8272,6 +8663,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDropdownMenu.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8287,6 +8679,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxForm.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8302,6 +8695,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxPopover.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8317,6 +8711,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxResponsive.vue"
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8332,6 +8727,7 @@ export const Index: Record<string, any> = {
         target: "CommandDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8347,6 +8743,7 @@ export const Index: Record<string, any> = {
         target: "CommandDialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8362,6 +8759,7 @@ export const Index: Record<string, any> = {
         target: "ContextMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8377,6 +8775,7 @@ export const Index: Record<string, any> = {
         target: "CustomChartTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8392,6 +8791,7 @@ export const Index: Record<string, any> = {
         target: "DataTableColumnPinningDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8407,6 +8807,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8422,6 +8823,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemoColumn.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8437,6 +8839,7 @@ export const Index: Record<string, any> = {
         target: "DataTableReactiveDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8452,6 +8855,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8467,6 +8871,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerForm.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8482,6 +8887,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithIndependentMonths.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8497,6 +8903,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8512,6 +8919,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithRange.vue"
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8527,6 +8935,7 @@ export const Index: Record<string, any> = {
         target: "DialogCustomCloseButton.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8542,6 +8951,7 @@ export const Index: Record<string, any> = {
         target: "DialogDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8557,6 +8967,7 @@ export const Index: Record<string, any> = {
         target: "DialogForm.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8572,6 +8983,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollBodyDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8587,6 +8999,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollOverlayDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8602,6 +9015,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartColor.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8617,6 +9031,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8632,6 +9047,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8647,6 +9063,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartPie.vue"
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8662,6 +9079,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8677,6 +9095,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDialog.vue"
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8692,6 +9111,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuCheckboxes.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8707,6 +9127,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8722,6 +9143,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuRadioGroup.vue"
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8737,6 +9159,7 @@ export const Index: Record<string, any> = {
         target: "HoverCardDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8752,6 +9175,7 @@ export const Index: Record<string, any> = {
         target: "InputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8767,6 +9191,7 @@ export const Index: Record<string, any> = {
         target: "InputDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8782,6 +9207,7 @@ export const Index: Record<string, any> = {
         target: "InputFile.vue"
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8797,6 +9223,7 @@ export const Index: Record<string, any> = {
         target: "InputForm.vue"
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8812,6 +9239,7 @@ export const Index: Record<string, any> = {
         target: "InputFormAutoAnimate.vue"
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8827,6 +9255,7 @@ export const Index: Record<string, any> = {
         target: "InputWithButton.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8842,6 +9271,7 @@ export const Index: Record<string, any> = {
         target: "InputWithIcon.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8857,6 +9287,7 @@ export const Index: Record<string, any> = {
         target: "InputWithLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8872,6 +9303,7 @@ export const Index: Record<string, any> = {
         target: "LabelDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8887,6 +9319,7 @@ export const Index: Record<string, any> = {
         target: "LineChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8902,6 +9335,7 @@ export const Index: Record<string, any> = {
         target: "LineChartDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8917,6 +9351,7 @@ export const Index: Record<string, any> = {
         target: "LineChartSparkline.vue"
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8932,6 +9367,7 @@ export const Index: Record<string, any> = {
         target: "MenubarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8947,6 +9383,7 @@ export const Index: Record<string, any> = {
         target: "NavigationMenuDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8962,6 +9399,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldCurrency.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8977,6 +9415,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDecimal.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8992,6 +9431,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9007,6 +9447,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9022,6 +9463,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldForm.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9037,6 +9479,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldPercentage.vue"
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9052,6 +9495,7 @@ export const Index: Record<string, any> = {
         target: "PaginationDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9067,6 +9511,7 @@ export const Index: Record<string, any> = {
         target: "PinInputControlled.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9082,6 +9527,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9097,6 +9543,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9112,6 +9559,7 @@ export const Index: Record<string, any> = {
         target: "PinInputFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9127,6 +9575,7 @@ export const Index: Record<string, any> = {
         target: "PinInputSeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9142,6 +9591,7 @@ export const Index: Record<string, any> = {
         target: "PopoverDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9157,6 +9607,7 @@ export const Index: Record<string, any> = {
         target: "ProgressDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9172,6 +9623,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9187,6 +9639,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupForm.vue"
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9202,6 +9655,7 @@ export const Index: Record<string, any> = {
         target: "RangeCalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9217,6 +9671,7 @@ export const Index: Record<string, any> = {
         target: "ResizableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9232,6 +9687,7 @@ export const Index: Record<string, any> = {
         target: "ResizableHandleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9247,6 +9703,7 @@ export const Index: Record<string, any> = {
         target: "ResizableVerticalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9262,6 +9719,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9277,6 +9735,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaHorizontalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9292,6 +9751,7 @@ export const Index: Record<string, any> = {
         target: "SelectDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9307,6 +9767,7 @@ export const Index: Record<string, any> = {
         target: "SelectForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9322,6 +9783,7 @@ export const Index: Record<string, any> = {
         target: "SelectScrollable.vue"
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9337,6 +9799,7 @@ export const Index: Record<string, any> = {
         target: "SeparatorDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9352,6 +9815,7 @@ export const Index: Record<string, any> = {
         target: "SheetDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9367,6 +9831,7 @@ export const Index: Record<string, any> = {
         target: "SheetSideDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9382,6 +9847,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonCard.vue"
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9397,6 +9863,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9412,6 +9879,7 @@ export const Index: Record<string, any> = {
         target: "SliderDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9427,6 +9895,7 @@ export const Index: Record<string, any> = {
         target: "SliderForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9442,6 +9911,7 @@ export const Index: Record<string, any> = {
         target: "SonnerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9457,6 +9927,7 @@ export const Index: Record<string, any> = {
         target: "SonnerWithDialog.vue"
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9472,6 +9943,7 @@ export const Index: Record<string, any> = {
         target: "StepperDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9487,6 +9959,7 @@ export const Index: Record<string, any> = {
         target: "StepperForm.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9502,6 +9975,7 @@ export const Index: Record<string, any> = {
         target: "StepperHorizental.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9517,6 +9991,7 @@ export const Index: Record<string, any> = {
         target: "StepperVertical.vue"
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9532,6 +10007,7 @@ export const Index: Record<string, any> = {
         target: "SwitchDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9547,6 +10023,7 @@ export const Index: Record<string, any> = {
         target: "SwitchForm.vue"
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9562,6 +10039,7 @@ export const Index: Record<string, any> = {
         target: "TableDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9577,6 +10055,7 @@ export const Index: Record<string, any> = {
         target: "TabsDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9592,6 +10071,7 @@ export const Index: Record<string, any> = {
         target: "TabsVerticalDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9607,6 +10087,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputComboboxDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9622,6 +10103,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9637,6 +10119,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputFormDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9652,6 +10135,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9667,6 +10151,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDisabled.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9682,6 +10167,7 @@ export const Index: Record<string, any> = {
         target: "TextareaForm.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9697,6 +10183,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithButton.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9712,6 +10199,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithLabel.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9727,6 +10215,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithText.vue"
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9742,6 +10231,7 @@ export const Index: Record<string, any> = {
         target: "ToastDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9757,6 +10247,7 @@ export const Index: Record<string, any> = {
         target: "ToastDestructive.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9772,6 +10263,7 @@ export const Index: Record<string, any> = {
         target: "ToastSimple.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9787,6 +10279,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithAction.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9802,6 +10295,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithTitle.vue"
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9817,6 +10311,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9832,6 +10327,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDisabledDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9847,6 +10343,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9862,6 +10359,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDisabledDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9877,6 +10375,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupLargeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9892,6 +10391,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupOutlineDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9907,6 +10407,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSingleDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9922,6 +10423,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSmallDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9937,6 +10439,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9952,6 +10455,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicWithTextDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9967,6 +10471,7 @@ export const Index: Record<string, any> = {
         target: "ToggleLargeDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9982,6 +10487,7 @@ export const Index: Record<string, any> = {
         target: "ToggleSmallDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9997,6 +10503,7 @@ export const Index: Record<string, any> = {
         target: "TooltipDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10012,6 +10519,7 @@ export const Index: Record<string, any> = {
         target: "TypographyBlockquote.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10027,6 +10535,7 @@ export const Index: Record<string, any> = {
         target: "TypographyDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10042,6 +10551,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH1.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10057,6 +10567,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH2.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10072,6 +10583,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH3.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10087,6 +10599,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH4.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10102,6 +10615,7 @@ export const Index: Record<string, any> = {
         target: "TypographyInlineCode.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10117,6 +10631,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLarge.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10132,6 +10647,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLead.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10147,6 +10663,7 @@ export const Index: Record<string, any> = {
         target: "TypographyList.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10162,6 +10679,7 @@ export const Index: Record<string, any> = {
         target: "TypographyMuted.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10177,6 +10695,7 @@ export const Index: Record<string, any> = {
         target: "TypographyP.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10192,6 +10711,7 @@ export const Index: Record<string, any> = {
         target: "TypographySmall.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10207,6 +10727,7 @@ export const Index: Record<string, any> = {
         target: "TypographyTable.vue"
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10222,6 +10743,7 @@ export const Index: Record<string, any> = {
         target: "VCalendarDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10237,6 +10759,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10252,6 +10775,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerForm.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10267,6 +10791,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10282,6 +10807,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithRange.vue"
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10297,6 +10823,7 @@ export const Index: Record<string, any> = {
         target: "VDateTimePickerDemo.vue"
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10312,6 +10839,7 @@ export const Index: Record<string, any> = {
         target: "VRangePickerWithSlot.vue"
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10327,6 +10855,7 @@ export const Index: Record<string, any> = {
         target: "Authentication01.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10342,6 +10871,7 @@ export const Index: Record<string, any> = {
         target: "Authentication02.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10357,6 +10887,7 @@ export const Index: Record<string, any> = {
         target: "Authentication03.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10372,6 +10903,7 @@ export const Index: Record<string, any> = {
         target: "Authentication04.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10387,6 +10919,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard01.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10402,6 +10935,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard02.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10417,6 +10951,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard03.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10432,6 +10967,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard04.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10447,6 +10983,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard05.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10462,6 +10999,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard06.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10477,6 +11015,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard07.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10492,6 +11031,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar01Page.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10507,6 +11047,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar07Page.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10523,6 +11064,7 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      raw: () => import("@/registry/default/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10554,6 +11096,7 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10581,6 +11124,7 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10632,6 +11176,7 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10651,6 +11196,7 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10726,6 +11272,7 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10753,6 +11300,7 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10772,6 +11320,7 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10815,6 +11364,7 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10834,6 +11384,7 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10897,6 +11448,7 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10936,6 +11488,7 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10979,6 +11532,7 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11014,6 +11568,7 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11033,6 +11588,7 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11052,6 +11608,7 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11071,6 +11628,7 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11090,6 +11648,7 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11109,6 +11668,7 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11136,6 +11696,7 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11187,6 +11748,7 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11262,6 +11824,7 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11313,6 +11876,7 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11356,6 +11920,7 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11427,6 +11992,7 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11470,6 +12036,7 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11497,6 +12064,7 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11516,6 +12084,7 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11535,6 +12104,7 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11610,6 +12180,7 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11657,6 +12228,7 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11692,6 +12264,7 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11727,6 +12300,7 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11758,6 +12332,7 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11785,6 +12360,7 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11804,6 +12380,7 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11827,6 +12404,7 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11890,6 +12468,7 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11913,6 +12492,7 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11936,6 +12516,7 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11995,6 +12576,7 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12014,6 +12596,7 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12061,6 +12644,7 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12176,6 +12760,7 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12195,6 +12780,7 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12214,6 +12800,7 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12233,6 +12820,7 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12276,6 +12864,7 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12295,6 +12884,7 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12346,6 +12936,7 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12377,6 +12968,7 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12412,6 +13004,7 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12431,6 +13024,7 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12482,6 +13076,7 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12501,6 +13096,7 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12524,6 +13120,7 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12555,6 +13152,7 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12574,6 +13172,7 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12589,6 +13188,7 @@ export const Index: Record<string, any> = {
         target: "AccordionDemo.vue"
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12604,6 +13204,7 @@ export const Index: Record<string, any> = {
         target: "AlertDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12619,6 +13220,7 @@ export const Index: Record<string, any> = {
         target: "AlertDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12634,6 +13236,7 @@ export const Index: Record<string, any> = {
         target: "AlertDialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12649,6 +13252,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12664,6 +13268,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12679,6 +13284,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartSparkline.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12694,6 +13300,7 @@ export const Index: Record<string, any> = {
         target: "AspectRatioDemo.vue"
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12709,6 +13316,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormApi.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12724,6 +13332,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormArray.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12739,6 +13348,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormBasic.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12754,6 +13364,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormConfirmPassword.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12769,6 +13380,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormControlled.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12784,6 +13396,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormDependencies.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12799,6 +13412,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormInputWithoutLabel.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12814,6 +13428,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormSubObject.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12829,6 +13444,7 @@ export const Index: Record<string, any> = {
         target: "AvatarDemo.vue"
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12844,6 +13460,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12859,6 +13476,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12874,6 +13492,7 @@ export const Index: Record<string, any> = {
         target: "BadgeOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12889,6 +13508,7 @@ export const Index: Record<string, any> = {
         target: "BadgeSecondaryDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12904,6 +13524,7 @@ export const Index: Record<string, any> = {
         target: "BarChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12919,6 +13540,7 @@ export const Index: Record<string, any> = {
         target: "BarChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12934,6 +13556,7 @@ export const Index: Record<string, any> = {
         target: "BarChartRounded.vue"
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12949,6 +13572,7 @@ export const Index: Record<string, any> = {
         target: "BarChartStacked.vue"
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12964,6 +13588,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12979,6 +13604,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDropdown.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12994,6 +13620,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbEllipsisDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13009,6 +13636,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbLinkDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13024,6 +13652,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbResponsive.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13039,6 +13668,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbSeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13054,6 +13684,7 @@ export const Index: Record<string, any> = {
         target: "ButtonAsChildDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13069,6 +13700,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13084,6 +13716,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13099,6 +13732,7 @@ export const Index: Record<string, any> = {
         target: "ButtonGhostDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13114,6 +13748,7 @@ export const Index: Record<string, any> = {
         target: "ButtonIconDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13129,6 +13764,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLinkDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13144,6 +13780,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLoadingDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13159,6 +13796,7 @@ export const Index: Record<string, any> = {
         target: "ButtonOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13174,6 +13812,7 @@ export const Index: Record<string, any> = {
         target: "ButtonSecondaryDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13189,6 +13828,7 @@ export const Index: Record<string, any> = {
         target: "ButtonWithIconDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13204,6 +13844,7 @@ export const Index: Record<string, any> = {
         target: "CalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13219,6 +13860,7 @@ export const Index: Record<string, any> = {
         target: "CalendarForm.vue"
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13234,6 +13876,7 @@ export const Index: Record<string, any> = {
         target: "CalendarWithSelect.vue"
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13249,6 +13892,7 @@ export const Index: Record<string, any> = {
         target: "CardChat.vue"
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13264,6 +13908,7 @@ export const Index: Record<string, any> = {
         target: "CardDemo.vue"
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13279,6 +13924,7 @@ export const Index: Record<string, any> = {
         target: "CardFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13294,6 +13940,7 @@ export const Index: Record<string, any> = {
         target: "CardStats.vue"
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13309,6 +13956,7 @@ export const Index: Record<string, any> = {
         target: "CardWithForm.vue"
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13324,6 +13972,7 @@ export const Index: Record<string, any> = {
         target: "CarouselApi.vue"
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13339,6 +13988,7 @@ export const Index: Record<string, any> = {
         target: "CarouselDemo.vue"
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13354,6 +14004,7 @@ export const Index: Record<string, any> = {
         target: "CarouselOrientation.vue"
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13369,6 +14020,7 @@ export const Index: Record<string, any> = {
         target: "CarouselPlugin.vue"
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13384,6 +14036,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSize.vue"
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13399,6 +14052,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSpacing.vue"
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13414,6 +14068,7 @@ export const Index: Record<string, any> = {
         target: "CarouselThumbnails.vue"
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13429,6 +14084,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13444,6 +14100,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDisabled.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13459,6 +14116,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormMultiple.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13474,6 +14132,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormSingle.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13489,6 +14148,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxWithText.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13504,6 +14164,7 @@ export const Index: Record<string, any> = {
         target: "CollapsibleDemo.vue"
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13519,6 +14180,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13534,6 +14196,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDropdownMenu.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13549,6 +14212,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxForm.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13564,6 +14228,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxPopover.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13579,6 +14244,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxResponsive.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13594,6 +14260,7 @@ export const Index: Record<string, any> = {
         target: "CommandDemo.vue"
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13609,6 +14276,7 @@ export const Index: Record<string, any> = {
         target: "CommandDialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13624,6 +14292,7 @@ export const Index: Record<string, any> = {
         target: "ContextMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13639,6 +14308,7 @@ export const Index: Record<string, any> = {
         target: "CustomChartTooltip.vue"
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13654,6 +14324,7 @@ export const Index: Record<string, any> = {
         target: "DataTableColumnPinningDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13669,6 +14340,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13684,6 +14356,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemoColumn.vue"
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13699,6 +14372,7 @@ export const Index: Record<string, any> = {
         target: "DataTableReactiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13714,6 +14388,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13729,6 +14404,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerForm.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13744,6 +14420,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithIndependentMonths.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13759,6 +14436,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13774,6 +14452,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithRange.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13789,6 +14468,7 @@ export const Index: Record<string, any> = {
         target: "DialogCustomCloseButton.vue"
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13804,6 +14484,7 @@ export const Index: Record<string, any> = {
         target: "DialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13819,6 +14500,7 @@ export const Index: Record<string, any> = {
         target: "DialogForm.vue"
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13834,6 +14516,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollBodyDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13849,6 +14532,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollOverlayDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13864,6 +14548,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartColor.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13879,6 +14564,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13894,6 +14580,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13909,6 +14596,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartPie.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13924,6 +14612,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDemo.vue"
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13939,6 +14628,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDialog.vue"
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13954,6 +14644,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuCheckboxes.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13969,6 +14660,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13984,6 +14676,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuRadioGroup.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13999,6 +14692,7 @@ export const Index: Record<string, any> = {
         target: "HoverCardDemo.vue"
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14014,6 +14708,7 @@ export const Index: Record<string, any> = {
         target: "InputDemo.vue"
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14029,6 +14724,7 @@ export const Index: Record<string, any> = {
         target: "InputDisabled.vue"
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14044,6 +14740,7 @@ export const Index: Record<string, any> = {
         target: "InputFile.vue"
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14059,6 +14756,7 @@ export const Index: Record<string, any> = {
         target: "InputForm.vue"
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14074,6 +14772,7 @@ export const Index: Record<string, any> = {
         target: "InputFormAutoAnimate.vue"
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14089,6 +14788,7 @@ export const Index: Record<string, any> = {
         target: "InputWithButton.vue"
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14104,6 +14804,7 @@ export const Index: Record<string, any> = {
         target: "InputWithIcon.vue"
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14119,6 +14820,7 @@ export const Index: Record<string, any> = {
         target: "InputWithLabel.vue"
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14134,6 +14836,7 @@ export const Index: Record<string, any> = {
         target: "LabelDemo.vue"
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14149,6 +14852,7 @@ export const Index: Record<string, any> = {
         target: "LineChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14164,6 +14868,7 @@ export const Index: Record<string, any> = {
         target: "LineChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14179,6 +14884,7 @@ export const Index: Record<string, any> = {
         target: "LineChartSparkline.vue"
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14194,6 +14900,7 @@ export const Index: Record<string, any> = {
         target: "MenubarDemo.vue"
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14209,6 +14916,7 @@ export const Index: Record<string, any> = {
         target: "NavigationMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14224,6 +14932,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldCurrency.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14239,6 +14948,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDecimal.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14254,6 +14964,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDemo.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14269,6 +14980,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDisabled.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14284,6 +14996,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldForm.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14299,6 +15012,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldPercentage.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14314,6 +15028,7 @@ export const Index: Record<string, any> = {
         target: "PaginationDemo.vue"
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14329,6 +15044,7 @@ export const Index: Record<string, any> = {
         target: "PinInputControlled.vue"
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14344,6 +15060,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14359,6 +15076,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDisabled.vue"
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14374,6 +15092,7 @@ export const Index: Record<string, any> = {
         target: "PinInputFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14389,6 +15108,7 @@ export const Index: Record<string, any> = {
         target: "PinInputSeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14404,6 +15124,7 @@ export const Index: Record<string, any> = {
         target: "PopoverDemo.vue"
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14419,6 +15140,7 @@ export const Index: Record<string, any> = {
         target: "ProgressDemo.vue"
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14434,6 +15156,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupDemo.vue"
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14449,6 +15172,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupForm.vue"
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14464,6 +15188,7 @@ export const Index: Record<string, any> = {
         target: "RangeCalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14479,6 +15204,7 @@ export const Index: Record<string, any> = {
         target: "ResizableDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14494,6 +15220,7 @@ export const Index: Record<string, any> = {
         target: "ResizableHandleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14509,6 +15236,7 @@ export const Index: Record<string, any> = {
         target: "ResizableVerticalDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14524,6 +15252,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaDemo.vue"
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14539,6 +15268,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaHorizontalDemo.vue"
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14554,6 +15284,7 @@ export const Index: Record<string, any> = {
         target: "SelectDemo.vue"
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14569,6 +15300,7 @@ export const Index: Record<string, any> = {
         target: "SelectForm.vue"
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14584,6 +15316,7 @@ export const Index: Record<string, any> = {
         target: "SelectScrollable.vue"
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14599,6 +15332,7 @@ export const Index: Record<string, any> = {
         target: "SeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14614,6 +15348,7 @@ export const Index: Record<string, any> = {
         target: "SheetDemo.vue"
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14629,6 +15364,7 @@ export const Index: Record<string, any> = {
         target: "SheetSideDemo.vue"
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14644,6 +15380,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonCard.vue"
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14659,6 +15396,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonDemo.vue"
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14674,6 +15412,7 @@ export const Index: Record<string, any> = {
         target: "SliderDemo.vue"
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14689,6 +15428,7 @@ export const Index: Record<string, any> = {
         target: "SliderForm.vue"
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14704,6 +15444,7 @@ export const Index: Record<string, any> = {
         target: "SonnerDemo.vue"
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14719,6 +15460,7 @@ export const Index: Record<string, any> = {
         target: "SonnerWithDialog.vue"
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14734,6 +15476,7 @@ export const Index: Record<string, any> = {
         target: "StepperDemo.vue"
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14749,6 +15492,7 @@ export const Index: Record<string, any> = {
         target: "StepperForm.vue"
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14764,6 +15508,7 @@ export const Index: Record<string, any> = {
         target: "StepperHorizental.vue"
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14779,6 +15524,7 @@ export const Index: Record<string, any> = {
         target: "StepperVertical.vue"
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14794,6 +15540,7 @@ export const Index: Record<string, any> = {
         target: "SwitchDemo.vue"
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14809,6 +15556,7 @@ export const Index: Record<string, any> = {
         target: "SwitchForm.vue"
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14824,6 +15572,7 @@ export const Index: Record<string, any> = {
         target: "TableDemo.vue"
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14839,6 +15588,7 @@ export const Index: Record<string, any> = {
         target: "TabsDemo.vue"
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14854,6 +15604,7 @@ export const Index: Record<string, any> = {
         target: "TabsVerticalDemo.vue"
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14869,6 +15620,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputComboboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14884,6 +15636,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14899,6 +15652,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14914,6 +15668,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDemo.vue"
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14929,6 +15684,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDisabled.vue"
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14944,6 +15700,7 @@ export const Index: Record<string, any> = {
         target: "TextareaForm.vue"
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14959,6 +15716,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithButton.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14974,6 +15732,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithLabel.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14989,6 +15748,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithText.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15004,6 +15764,7 @@ export const Index: Record<string, any> = {
         target: "ToastDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15019,6 +15780,7 @@ export const Index: Record<string, any> = {
         target: "ToastDestructive.vue"
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15034,6 +15796,7 @@ export const Index: Record<string, any> = {
         target: "ToastSimple.vue"
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15049,6 +15812,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithAction.vue"
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15064,6 +15828,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithTitle.vue"
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15079,6 +15844,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15094,6 +15860,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDisabledDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15109,6 +15876,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15124,6 +15892,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDisabledDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15139,6 +15908,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupLargeDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15154,6 +15924,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15169,6 +15940,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSingleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15184,6 +15956,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSmallDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15199,6 +15972,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15214,6 +15988,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicWithTextDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15229,6 +16004,7 @@ export const Index: Record<string, any> = {
         target: "ToggleLargeDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15244,6 +16020,7 @@ export const Index: Record<string, any> = {
         target: "ToggleSmallDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15259,6 +16036,7 @@ export const Index: Record<string, any> = {
         target: "TooltipDemo.vue"
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15274,6 +16052,7 @@ export const Index: Record<string, any> = {
         target: "TypographyBlockquote.vue"
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15289,6 +16068,7 @@ export const Index: Record<string, any> = {
         target: "TypographyDemo.vue"
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15304,6 +16084,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH1.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15319,6 +16100,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH2.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15334,6 +16116,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH3.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15349,6 +16132,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH4.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15364,6 +16148,7 @@ export const Index: Record<string, any> = {
         target: "TypographyInlineCode.vue"
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15379,6 +16164,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLarge.vue"
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15394,6 +16180,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLead.vue"
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15409,6 +16196,7 @@ export const Index: Record<string, any> = {
         target: "TypographyList.vue"
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15424,6 +16212,7 @@ export const Index: Record<string, any> = {
         target: "TypographyMuted.vue"
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15439,6 +16228,7 @@ export const Index: Record<string, any> = {
         target: "TypographyP.vue"
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15454,6 +16244,7 @@ export const Index: Record<string, any> = {
         target: "TypographySmall.vue"
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15469,6 +16260,7 @@ export const Index: Record<string, any> = {
         target: "TypographyTable.vue"
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15484,6 +16276,7 @@ export const Index: Record<string, any> = {
         target: "VCalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15499,6 +16292,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15514,6 +16308,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerForm.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15529,6 +16324,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15544,6 +16340,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithRange.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15559,6 +16356,7 @@ export const Index: Record<string, any> = {
         target: "VDateTimePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15574,6 +16372,7 @@ export const Index: Record<string, any> = {
         target: "VRangePickerWithSlot.vue"
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15589,6 +16388,7 @@ export const Index: Record<string, any> = {
         target: "Authentication01.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15604,6 +16404,7 @@ export const Index: Record<string, any> = {
         target: "Authentication02.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15619,6 +16420,7 @@ export const Index: Record<string, any> = {
         target: "Authentication03.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15634,6 +16436,7 @@ export const Index: Record<string, any> = {
         target: "Authentication04.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15649,6 +16452,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard01.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15664,6 +16468,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard02.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15679,6 +16484,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard03.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15694,6 +16500,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard04.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15709,6 +16516,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard05.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15724,6 +16532,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard06.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15739,6 +16548,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard07.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15754,6 +16564,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar01Page.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15769,6 +16580,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar07Page.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15800,6 +16612,7 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15827,6 +16640,7 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15878,6 +16692,7 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15897,6 +16712,7 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15972,6 +16788,7 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15999,6 +16816,7 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16018,6 +16836,7 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16061,6 +16880,7 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16080,6 +16900,7 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16143,6 +16964,7 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16182,6 +17004,7 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16225,6 +17048,7 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16260,6 +17084,7 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16279,6 +17104,7 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16298,6 +17124,7 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16317,6 +17144,7 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16336,6 +17164,7 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16355,6 +17184,7 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16382,6 +17212,7 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16433,6 +17264,7 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16508,6 +17340,7 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16559,6 +17392,7 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16602,6 +17436,7 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16673,6 +17508,7 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16716,6 +17552,7 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16743,6 +17580,7 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16762,6 +17600,7 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16781,6 +17620,7 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16856,6 +17696,7 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16903,6 +17744,7 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16938,6 +17780,7 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16973,6 +17816,7 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17004,6 +17848,7 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17031,6 +17876,7 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17050,6 +17896,7 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17073,6 +17920,7 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17136,6 +17984,7 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17159,6 +18008,7 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17182,6 +18032,7 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17241,6 +18092,7 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17260,6 +18112,7 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17307,6 +18160,7 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17422,6 +18276,7 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17441,6 +18296,7 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17460,6 +18316,7 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17479,6 +18336,7 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17522,6 +18380,7 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17541,6 +18400,7 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17592,6 +18452,7 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17623,6 +18484,7 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17658,6 +18520,7 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17677,6 +18540,7 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17728,6 +18592,7 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17747,6 +18612,7 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17770,6 +18636,7 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17801,6 +18668,7 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17820,6 +18688,7 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17835,6 +18704,7 @@ export const Index: Record<string, any> = {
         target: "AccordionDemo.vue"
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17850,6 +18720,7 @@ export const Index: Record<string, any> = {
         target: "AlertDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17865,6 +18736,7 @@ export const Index: Record<string, any> = {
         target: "AlertDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17880,6 +18752,7 @@ export const Index: Record<string, any> = {
         target: "AlertDialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17895,6 +18768,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17910,6 +18784,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17925,6 +18800,7 @@ export const Index: Record<string, any> = {
         target: "AreaChartSparkline.vue"
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17940,6 +18816,7 @@ export const Index: Record<string, any> = {
         target: "AspectRatioDemo.vue"
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17955,6 +18832,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormApi.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17970,6 +18848,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormArray.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17985,6 +18864,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormBasic.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18000,6 +18880,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormConfirmPassword.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18015,6 +18896,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormControlled.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18030,6 +18912,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormDependencies.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18045,6 +18928,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormInputWithoutLabel.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18060,6 +18944,7 @@ export const Index: Record<string, any> = {
         target: "AutoFormSubObject.vue"
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18075,6 +18960,7 @@ export const Index: Record<string, any> = {
         target: "AvatarDemo.vue"
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18090,6 +18976,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18105,6 +18992,7 @@ export const Index: Record<string, any> = {
         target: "BadgeDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18120,6 +19008,7 @@ export const Index: Record<string, any> = {
         target: "BadgeOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18135,6 +19024,7 @@ export const Index: Record<string, any> = {
         target: "BadgeSecondaryDemo.vue"
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18150,6 +19040,7 @@ export const Index: Record<string, any> = {
         target: "BarChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18165,6 +19056,7 @@ export const Index: Record<string, any> = {
         target: "BarChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18180,6 +19072,7 @@ export const Index: Record<string, any> = {
         target: "BarChartRounded.vue"
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18195,6 +19088,7 @@ export const Index: Record<string, any> = {
         target: "BarChartStacked.vue"
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18210,6 +19104,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18225,6 +19120,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbDropdown.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18240,6 +19136,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbEllipsisDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18255,6 +19152,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbLinkDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18270,6 +19168,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbResponsive.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18285,6 +19184,7 @@ export const Index: Record<string, any> = {
         target: "BreadcrumbSeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18300,6 +19200,7 @@ export const Index: Record<string, any> = {
         target: "ButtonAsChildDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18315,6 +19216,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18330,6 +19232,7 @@ export const Index: Record<string, any> = {
         target: "ButtonDestructiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18345,6 +19248,7 @@ export const Index: Record<string, any> = {
         target: "ButtonGhostDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18360,6 +19264,7 @@ export const Index: Record<string, any> = {
         target: "ButtonIconDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18375,6 +19280,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLinkDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18390,6 +19296,7 @@ export const Index: Record<string, any> = {
         target: "ButtonLoadingDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18405,6 +19312,7 @@ export const Index: Record<string, any> = {
         target: "ButtonOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18420,6 +19328,7 @@ export const Index: Record<string, any> = {
         target: "ButtonSecondaryDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18435,6 +19344,7 @@ export const Index: Record<string, any> = {
         target: "ButtonWithIconDemo.vue"
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18450,6 +19360,7 @@ export const Index: Record<string, any> = {
         target: "CalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18465,6 +19376,7 @@ export const Index: Record<string, any> = {
         target: "CalendarForm.vue"
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18480,6 +19392,7 @@ export const Index: Record<string, any> = {
         target: "CalendarWithSelect.vue"
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18495,6 +19408,7 @@ export const Index: Record<string, any> = {
         target: "CardChat.vue"
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18510,6 +19424,7 @@ export const Index: Record<string, any> = {
         target: "CardDemo.vue"
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18525,6 +19440,7 @@ export const Index: Record<string, any> = {
         target: "CardFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18533,13 +19449,14 @@ export const Index: Record<string, any> = {
       name: "CardStats",
       description: "",
       type: "registry:example",
-      registryDependencies: ["card","themes","config"],
+      registryDependencies: ["card","registry-themes","config"],
       files: [{
         path: "registry/default/example/CardStats.vue",
         type: "registry:example",
         target: "CardStats.vue"
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18555,6 +19472,7 @@ export const Index: Record<string, any> = {
         target: "CardWithForm.vue"
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18570,6 +19488,7 @@ export const Index: Record<string, any> = {
         target: "CarouselApi.vue"
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18585,6 +19504,7 @@ export const Index: Record<string, any> = {
         target: "CarouselDemo.vue"
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18600,6 +19520,7 @@ export const Index: Record<string, any> = {
         target: "CarouselOrientation.vue"
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18615,6 +19536,7 @@ export const Index: Record<string, any> = {
         target: "CarouselPlugin.vue"
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18630,6 +19552,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSize.vue"
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18645,6 +19568,7 @@ export const Index: Record<string, any> = {
         target: "CarouselSpacing.vue"
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18660,6 +19584,7 @@ export const Index: Record<string, any> = {
         target: "CarouselThumbnails.vue"
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18675,6 +19600,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18690,6 +19616,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxDisabled.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18705,6 +19632,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormMultiple.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18720,6 +19648,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxFormSingle.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18735,6 +19664,7 @@ export const Index: Record<string, any> = {
         target: "CheckboxWithText.vue"
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18750,6 +19680,7 @@ export const Index: Record<string, any> = {
         target: "CollapsibleDemo.vue"
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18765,6 +19696,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18780,6 +19712,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxDropdownMenu.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18795,6 +19728,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxForm.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18810,6 +19744,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxPopover.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18825,6 +19760,7 @@ export const Index: Record<string, any> = {
         target: "ComboboxResponsive.vue"
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18840,6 +19776,7 @@ export const Index: Record<string, any> = {
         target: "CommandDemo.vue"
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18855,6 +19792,7 @@ export const Index: Record<string, any> = {
         target: "CommandDialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18870,6 +19808,7 @@ export const Index: Record<string, any> = {
         target: "ContextMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18885,6 +19824,7 @@ export const Index: Record<string, any> = {
         target: "CustomChartTooltip.vue"
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18900,6 +19840,7 @@ export const Index: Record<string, any> = {
         target: "DataTableColumnPinningDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18915,6 +19856,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18930,6 +19872,7 @@ export const Index: Record<string, any> = {
         target: "DataTableDemoColumn.vue"
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18945,6 +19888,7 @@ export const Index: Record<string, any> = {
         target: "DataTableReactiveDemo.vue"
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18960,6 +19904,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18975,6 +19920,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerForm.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18990,6 +19936,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithIndependentMonths.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19005,6 +19952,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19020,6 +19968,7 @@ export const Index: Record<string, any> = {
         target: "DatePickerWithRange.vue"
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19035,6 +19984,7 @@ export const Index: Record<string, any> = {
         target: "DialogCustomCloseButton.vue"
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19050,6 +20000,7 @@ export const Index: Record<string, any> = {
         target: "DialogDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19065,6 +20016,7 @@ export const Index: Record<string, any> = {
         target: "DialogForm.vue"
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19080,6 +20032,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollBodyDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19095,6 +20048,7 @@ export const Index: Record<string, any> = {
         target: "DialogScrollOverlayDemo.vue"
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19110,6 +20064,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartColor.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19125,6 +20080,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19140,6 +20096,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19155,6 +20112,7 @@ export const Index: Record<string, any> = {
         target: "DonutChartPie.vue"
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19170,6 +20128,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDemo.vue"
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19185,6 +20144,7 @@ export const Index: Record<string, any> = {
         target: "DrawerDialog.vue"
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19200,6 +20160,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuCheckboxes.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19215,6 +20176,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19230,6 +20192,7 @@ export const Index: Record<string, any> = {
         target: "DropdownMenuRadioGroup.vue"
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19245,6 +20208,7 @@ export const Index: Record<string, any> = {
         target: "HoverCardDemo.vue"
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19260,6 +20224,7 @@ export const Index: Record<string, any> = {
         target: "InputDemo.vue"
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19275,6 +20240,7 @@ export const Index: Record<string, any> = {
         target: "InputDisabled.vue"
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19290,6 +20256,7 @@ export const Index: Record<string, any> = {
         target: "InputFile.vue"
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19305,6 +20272,7 @@ export const Index: Record<string, any> = {
         target: "InputForm.vue"
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19320,6 +20288,7 @@ export const Index: Record<string, any> = {
         target: "InputFormAutoAnimate.vue"
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19335,6 +20304,7 @@ export const Index: Record<string, any> = {
         target: "InputWithButton.vue"
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19350,6 +20320,7 @@ export const Index: Record<string, any> = {
         target: "InputWithIcon.vue"
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19365,6 +20336,7 @@ export const Index: Record<string, any> = {
         target: "InputWithLabel.vue"
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19380,6 +20352,7 @@ export const Index: Record<string, any> = {
         target: "LabelDemo.vue"
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19395,6 +20368,7 @@ export const Index: Record<string, any> = {
         target: "LineChartCustomTooltip.vue"
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19410,6 +20384,7 @@ export const Index: Record<string, any> = {
         target: "LineChartDemo.vue"
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19425,6 +20400,7 @@ export const Index: Record<string, any> = {
         target: "LineChartSparkline.vue"
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19440,6 +20416,7 @@ export const Index: Record<string, any> = {
         target: "MenubarDemo.vue"
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19455,6 +20432,7 @@ export const Index: Record<string, any> = {
         target: "NavigationMenuDemo.vue"
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19470,6 +20448,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldCurrency.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19485,6 +20464,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDecimal.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19500,6 +20480,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDemo.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19515,6 +20496,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldDisabled.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19530,6 +20512,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldForm.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19545,6 +20528,7 @@ export const Index: Record<string, any> = {
         target: "NumberFieldPercentage.vue"
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19560,6 +20544,7 @@ export const Index: Record<string, any> = {
         target: "PaginationDemo.vue"
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19575,6 +20560,7 @@ export const Index: Record<string, any> = {
         target: "PinInputControlled.vue"
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19590,6 +20576,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19605,6 +20592,7 @@ export const Index: Record<string, any> = {
         target: "PinInputDisabled.vue"
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19620,6 +20608,7 @@ export const Index: Record<string, any> = {
         target: "PinInputFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19635,6 +20624,7 @@ export const Index: Record<string, any> = {
         target: "PinInputSeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19650,6 +20640,7 @@ export const Index: Record<string, any> = {
         target: "PopoverDemo.vue"
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19665,6 +20656,7 @@ export const Index: Record<string, any> = {
         target: "ProgressDemo.vue"
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19680,6 +20672,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupDemo.vue"
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19695,6 +20688,7 @@ export const Index: Record<string, any> = {
         target: "RadioGroupForm.vue"
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19710,6 +20704,7 @@ export const Index: Record<string, any> = {
         target: "RangeCalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19725,6 +20720,7 @@ export const Index: Record<string, any> = {
         target: "ResizableDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19740,6 +20736,7 @@ export const Index: Record<string, any> = {
         target: "ResizableHandleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19755,6 +20752,7 @@ export const Index: Record<string, any> = {
         target: "ResizableVerticalDemo.vue"
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19770,6 +20768,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaDemo.vue"
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19785,6 +20784,7 @@ export const Index: Record<string, any> = {
         target: "ScrollAreaHorizontalDemo.vue"
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19800,6 +20800,7 @@ export const Index: Record<string, any> = {
         target: "SelectDemo.vue"
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19815,6 +20816,7 @@ export const Index: Record<string, any> = {
         target: "SelectForm.vue"
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19830,6 +20832,7 @@ export const Index: Record<string, any> = {
         target: "SelectScrollable.vue"
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19845,6 +20848,7 @@ export const Index: Record<string, any> = {
         target: "SeparatorDemo.vue"
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19860,6 +20864,7 @@ export const Index: Record<string, any> = {
         target: "SheetDemo.vue"
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19875,6 +20880,7 @@ export const Index: Record<string, any> = {
         target: "SheetSideDemo.vue"
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19890,6 +20896,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonCard.vue"
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19905,6 +20912,7 @@ export const Index: Record<string, any> = {
         target: "SkeletonDemo.vue"
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19920,6 +20928,7 @@ export const Index: Record<string, any> = {
         target: "SliderDemo.vue"
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19935,6 +20944,7 @@ export const Index: Record<string, any> = {
         target: "SliderForm.vue"
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19950,6 +20960,7 @@ export const Index: Record<string, any> = {
         target: "SonnerDemo.vue"
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19965,6 +20976,7 @@ export const Index: Record<string, any> = {
         target: "SonnerWithDialog.vue"
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19980,6 +20992,7 @@ export const Index: Record<string, any> = {
         target: "StepperDemo.vue"
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19995,6 +21008,7 @@ export const Index: Record<string, any> = {
         target: "StepperForm.vue"
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20010,6 +21024,7 @@ export const Index: Record<string, any> = {
         target: "StepperHorizental.vue"
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20025,6 +21040,7 @@ export const Index: Record<string, any> = {
         target: "StepperVertical.vue"
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20040,6 +21056,7 @@ export const Index: Record<string, any> = {
         target: "SwitchDemo.vue"
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20055,6 +21072,7 @@ export const Index: Record<string, any> = {
         target: "SwitchForm.vue"
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20070,6 +21088,7 @@ export const Index: Record<string, any> = {
         target: "TableDemo.vue"
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20085,6 +21104,7 @@ export const Index: Record<string, any> = {
         target: "TabsDemo.vue"
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20100,6 +21120,7 @@ export const Index: Record<string, any> = {
         target: "TabsVerticalDemo.vue"
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20115,6 +21136,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputComboboxDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20130,6 +21152,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20145,6 +21168,7 @@ export const Index: Record<string, any> = {
         target: "TagsInputFormDemo.vue"
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20160,6 +21184,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDemo.vue"
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20175,6 +21200,7 @@ export const Index: Record<string, any> = {
         target: "TextareaDisabled.vue"
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20190,6 +21216,7 @@ export const Index: Record<string, any> = {
         target: "TextareaForm.vue"
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20205,6 +21232,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithButton.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20220,6 +21248,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithLabel.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20235,6 +21264,7 @@ export const Index: Record<string, any> = {
         target: "TextareaWithText.vue"
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20250,6 +21280,7 @@ export const Index: Record<string, any> = {
         target: "ToastDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20265,6 +21296,7 @@ export const Index: Record<string, any> = {
         target: "ToastDestructive.vue"
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20280,6 +21312,7 @@ export const Index: Record<string, any> = {
         target: "ToastSimple.vue"
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20295,6 +21328,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithAction.vue"
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20310,6 +21344,7 @@ export const Index: Record<string, any> = {
         target: "ToastWithTitle.vue"
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20325,6 +21360,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20340,6 +21376,7 @@ export const Index: Record<string, any> = {
         target: "ToggleDisabledDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20355,6 +21392,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20370,6 +21408,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupDisabledDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20385,6 +21424,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupLargeDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20400,6 +21440,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupOutlineDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20415,6 +21456,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSingleDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20430,6 +21472,7 @@ export const Index: Record<string, any> = {
         target: "ToggleGroupSmallDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20445,6 +21488,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20460,6 +21504,7 @@ export const Index: Record<string, any> = {
         target: "ToggleItalicWithTextDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20475,6 +21520,7 @@ export const Index: Record<string, any> = {
         target: "ToggleLargeDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20490,6 +21536,7 @@ export const Index: Record<string, any> = {
         target: "ToggleSmallDemo.vue"
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20505,6 +21552,7 @@ export const Index: Record<string, any> = {
         target: "TooltipDemo.vue"
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20520,6 +21568,7 @@ export const Index: Record<string, any> = {
         target: "TypographyBlockquote.vue"
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20535,6 +21584,7 @@ export const Index: Record<string, any> = {
         target: "TypographyDemo.vue"
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20550,6 +21600,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH1.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20565,6 +21616,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH2.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20580,6 +21632,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH3.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20595,6 +21648,7 @@ export const Index: Record<string, any> = {
         target: "TypographyH4.vue"
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20610,6 +21664,7 @@ export const Index: Record<string, any> = {
         target: "TypographyInlineCode.vue"
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20625,6 +21680,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLarge.vue"
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20640,6 +21696,7 @@ export const Index: Record<string, any> = {
         target: "TypographyLead.vue"
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20655,6 +21712,7 @@ export const Index: Record<string, any> = {
         target: "TypographyList.vue"
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20670,6 +21728,7 @@ export const Index: Record<string, any> = {
         target: "TypographyMuted.vue"
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20685,6 +21744,7 @@ export const Index: Record<string, any> = {
         target: "TypographyP.vue"
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20700,6 +21760,7 @@ export const Index: Record<string, any> = {
         target: "TypographySmall.vue"
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20715,6 +21776,7 @@ export const Index: Record<string, any> = {
         target: "TypographyTable.vue"
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20730,6 +21792,7 @@ export const Index: Record<string, any> = {
         target: "VCalendarDemo.vue"
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20745,6 +21808,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20760,6 +21824,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerForm.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20775,6 +21840,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithPresets.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20790,6 +21856,7 @@ export const Index: Record<string, any> = {
         target: "VDatePickerWithRange.vue"
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20805,6 +21872,7 @@ export const Index: Record<string, any> = {
         target: "VDateTimePickerDemo.vue"
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20820,6 +21888,7 @@ export const Index: Record<string, any> = {
         target: "VRangePickerWithSlot.vue"
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20835,6 +21904,7 @@ export const Index: Record<string, any> = {
         target: "Authentication01.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20850,6 +21920,7 @@ export const Index: Record<string, any> = {
         target: "Authentication02.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20865,6 +21936,7 @@ export const Index: Record<string, any> = {
         target: "Authentication03.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20880,6 +21952,7 @@ export const Index: Record<string, any> = {
         target: "Authentication04.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20895,6 +21968,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard01.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20910,6 +21984,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard02.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20925,6 +22000,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard03.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20940,6 +22016,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard04.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20955,6 +22032,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard05.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20970,6 +22048,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard06.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20985,6 +22064,7 @@ export const Index: Record<string, any> = {
         target: "Dashboard07.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21000,6 +22080,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar01Page.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21015,6 +22096,7 @@ export const Index: Record<string, any> = {
         target: "Sidebar07Page.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
diff --git a/apps/www/scripts/autogen.ts b/apps/www/scripts/autogen.ts
index 43b9a7d73..16ccf7a67 100644
--- a/apps/www/scripts/autogen.ts
+++ b/apps/www/scripts/autogen.ts
@@ -24,7 +24,7 @@ const tsconfigChecker = createComponentMetaChecker(
 )
 
 const components = fg.sync(['chart/**/*.vue', 'chart*/**/*.vue'], {
-  cwd: resolve(__dirname, ROOTPATH, 'src/lib/registry/default/ui/'),
+  cwd: resolve(__dirname, ROOTPATH, 'registry/default/ui/'),
   absolute: true,
 })
 
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index e9e5e9d49..576f7c8df 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -303,6 +303,7 @@ export const Index: Record<string, any> = {
       }`
       })}],
       component: () => import("${componentPath}").then((m) => m.default),
+      raw: () => import("${componentPath}?raw").then((m) => m.default),
       source: "${sourceFilename}",
       category: "${item.category ?? ''}",
       subcategory: "${item.subcategory ?? ''}"
diff --git a/apps/www/src/assets/diagrams.drawio b/apps/www/src/assets/diagrams.drawio
index 0801ae38e..75e8badcb 100644
--- a/apps/www/src/assets/diagrams.drawio
+++ b/apps/www/src/assets/diagrams.drawio
@@ -86,7 +86,7 @@
         <mxCell id="PaMXV6_IjdSjTMUUNi7L-12" value="Examples" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
           <mxGeometry x="570" y="500" width="120" height="60" as="geometry" />
         </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="Lib/Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
           <mxGeometry x="720" y="500" width="120" height="60" as="geometry" />
         </mxCell>
         <mxCell id="PaMXV6_IjdSjTMUUNi7L-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.308;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-11">
diff --git a/apps/www/src/content/docs/charts.md b/apps/www/src/content/docs/charts.md
index fe0c89c52..5964db90c 100644
--- a/apps/www/src/content/docs/charts.md
+++ b/apps/www/src/content/docs/charts.md
@@ -91,7 +91,7 @@ However, you can always pass in the desired `color` into each chart.
 ## Custom tooltip
 
 If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
-The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
+The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/unovue/shadcn-vue/tree/dev/apps/www/registry/default/ui/chart/ChartTooltip.vue) for example.
 
 The expected prop definition would be:
 
diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
index da04b680b..6871f186b 100644
--- a/apps/www/src/content/docs/charts/area.md
+++ b/apps/www/src/content/docs/charts/area.md
@@ -1,7 +1,7 @@
 ---
 title: Area
 description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
-source: apps/www/src/lib/registry/default/ui/chart-area
+source: apps/www/registry/default/ui/chart-area
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
index 73e69c3b8..b61185a1c 100644
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -1,7 +1,7 @@
 ---
 title: Bar
 description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
-source: apps/www/src/lib/registry/default/ui/chart-bar
+source: apps/www/registry/default/ui/chart-bar
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
index b238dee90..90af60b6c 100644
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -1,7 +1,7 @@
 ---
 title: Donut
 description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
-source: apps/www/src/lib/registry/default/ui/chart-donut
+source: apps/www/registry/default/ui/chart-donut
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index b984f8229..799a66563 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -1,7 +1,7 @@
 ---
 title: Line
 description: A line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
-source: apps/www/src/lib/registry/default/ui/chart-line
+source: apps/www/registry/default/ui/chart-line
 label: Alpha
 ---
 
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index 6638ec031..5927a2246 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -1,7 +1,7 @@
 ---
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
-source: apps/www/src/lib/registry/default/ui/accordion
+source: apps/www/registry/default/ui/accordion
 primitive: https://www.reka-ui.com/docs/components/accordion.html
 ---
 
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index 5a15b7362..fe961f62e 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -1,7 +1,7 @@
 ---
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
-source: apps/www/src/lib/registry/default/ui/alert-dialog
+source: apps/www/registry/default/ui/alert-dialog
 primitive: https://www.reka-ui.com/docs/components/alert-dialog.html
 ---
 
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 94d342cd5..6a2b9c318 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -1,7 +1,7 @@
 ---
 title: Aspect Ratio
 description: Displays content within a desired ratio.
-source: apps/www/src/lib/registry/default/ui/aspect-ratio
+source: apps/www/registry/default/ui/aspect-ratio
 primitive: https://www.reka-ui.com/docs/components/aspect-ratio.html
 ---
 
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index 2794e877b..3ea8116e7 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -1,7 +1,7 @@
 ---
 title: Avatar
 description: An image element with a fallback for representing the user.
-source: apps/www/src/lib/registry/default/ui/avatar
+source: apps/www/registry/default/ui/avatar
 primitive: https://www.reka-ui.com/docs/components/avatar.html
 ---
 
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 36df7161e..ce56ccc9e 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -1,7 +1,7 @@
 ---
 title: Calendar
 description: A date field component that allows users to enter and edit date.
-source: apps/www/src/lib/registry/default/ui/calendar
+source: apps/www/registry/default/ui/calendar
 primitive: https://www.reka-ui.com/docs/components/calendar.html
 ---
 
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 053c7a147..70efbdadc 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -1,7 +1,7 @@
 ---
 title: Carousel
 description: A carousel with motion and swipe built using Embla.
-source: apps/www/src/lib/registry/default/ui/carousel
+source: apps/www/registry/default/ui/carousel
 primitive: https://www.embla-carousel.com/api
 ---
 
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 1a398ec4f..0feb28961 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: A control that allows the user to toggle between checked and not checked.
-source: apps/www/src/lib/registry/default/ui/checkbox
+source: apps/www/registry/default/ui/checkbox
 primitive: https://www.reka-ui.com/docs/components/checkbox.html
 ---
 
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index dfb275674..07b6f7dfb 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -1,7 +1,7 @@
 ---
 title: Collapsible
 description: An interactive component which expands/collapses a panel.
-source: apps/www/src/lib/registry/default/ui/collapsible
+source: apps/www/registry/default/ui/collapsible
 primitive: https://www.reka-ui.com/docs/components/collapsible.html
 ---
 
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 646c03142..6d095839a 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -1,7 +1,7 @@
 ---
 title: Command
 description: Fast, composable, unstyled command menu.
-source: apps/www/src/lib/registry/default/ui/command
+source: apps/www/registry/default/ui/command
 primitive: https://www.reka-ui.com/docs/components/combobox.html
 ---
 
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 8c9b0e5c9..e3cef1b9a 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Context Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
-source: apps/www/src/lib/registry/default/ui/context-menu
+source: apps/www/registry/default/ui/context-menu
 primitive: https://www.reka-ui.com/docs/components/context-menu.html
 ---
 
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 2bed2ea9b..cf5e676e5 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -1,7 +1,7 @@
 ---
 title: Date Picker
 description: A date picker component with range and presets.
-source: apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+source: apps/www/registry/default/example/DatePickerDemo.vue
 primitive: https://www.reka-ui.com/docs/components/calendar.html
 ---
 
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index 4f5548231..5243a2713 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -1,7 +1,7 @@
 ---
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
-source: apps/www/src/lib/registry/default/ui/dialog
+source: apps/www/registry/default/ui/dialog
 primitive: https://www.reka-ui.com/docs/components/dialog.html
 ---
 
diff --git a/apps/www/src/content/docs/components/drawer.md b/apps/www/src/content/docs/components/drawer.md
index 3c16bac89..0682fadbc 100644
--- a/apps/www/src/content/docs/components/drawer.md
+++ b/apps/www/src/content/docs/components/drawer.md
@@ -1,7 +1,7 @@
 ---
 title: Drawer
 description: A drawer component for vue.
-source: apps/www/src/lib/registry/default/ui/drawer
+source: apps/www/registry/default/ui/drawer
 primitive: https://github.com/unovue/vaul-vue
 ---
 
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index b4aebf23a..32dee0b64 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Dropdown Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
-source: apps/www/src/lib/registry/default/ui/dropdown-menu
+source: apps/www/registry/default/ui/dropdown-menu
 primitive: https://www.reka-ui.com/docs/components/dropdown-menu.html
 ---
 
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 4ec4c310d..eb73c94c5 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -1,7 +1,7 @@
 ---
 title: Hover Card
 description: For sighted users to preview content available behind a link.
-source: apps/www/src/lib/registry/default/ui/hover-card
+source: apps/www/registry/default/ui/hover-card
 primitive: https://www.reka-ui.com/docs/components/hover-card.html
 ---
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 4306cd8e9..2a878dd6f 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -1,7 +1,7 @@
 ---
 title: Label
 description: Renders an accessible label associated with controls.
-source: apps/www/src/lib/registry/default/ui/label
+source: apps/www/registry/default/ui/label
 primitive: https://www.reka-ui.com/docs/components/label.html
 ---
 
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index bcc933837..593fc7e1c 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -1,7 +1,7 @@
 ---
 title: Menubar
 description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
-source: apps/www/src/lib/registry/default/ui/menubar
+source: apps/www/registry/default/ui/menubar
 primitive: https://www.reka-ui.com/docs/components/menubar.html
 ---
 
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index d7eb6de14..336b69955 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Navigation Menu
 description: A collection of links for navigating websites.
-source: apps/www/src/lib/registry/default/ui/navigation-menu
+source: apps/www/registry/default/ui/navigation-menu
 primitive: https://www.reka-ui.com/docs/components/navigation-menu.html
 ---
 
diff --git a/apps/www/src/content/docs/components/number-field.md b/apps/www/src/content/docs/components/number-field.md
index 474de6323..3fd170eec 100644
--- a/apps/www/src/content/docs/components/number-field.md
+++ b/apps/www/src/content/docs/components/number-field.md
@@ -1,7 +1,7 @@
 ---
 title: Number Field
 description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
-source: apps/www/src/lib/registry/default/ui/number-field
+source: apps/www/registry/default/ui/number-field
 primitive: https://www.reka-ui.com/docs/components/number-field.html
 ---
 
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index a820363c2..6d202036c 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Displays data in paged format and provides navigation between pages.
-source: apps/www/src/lib/registry/default/ui/pagination
+source: apps/www/registry/default/ui/pagination
 primitive: https://www.reka-ui.com/docs/components/pagination.html
 ---
 
diff --git a/apps/www/src/content/docs/components/pin-input.md b/apps/www/src/content/docs/components/pin-input.md
index eb4099007..f712b11ee 100644
--- a/apps/www/src/content/docs/components/pin-input.md
+++ b/apps/www/src/content/docs/components/pin-input.md
@@ -1,7 +1,7 @@
 ---
 title: PIN Input
 description: Allows users to input a sequence of one-character alphanumeric inputs.
-source: apps/www/src/lib/registry/default/ui/pin-input
+source: apps/www/registry/default/ui/pin-input
 primitive: https://www.reka-ui.com/docs/components/pin-input.html
 ---
 
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index 06db37d9c..1edc79aea 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -1,7 +1,7 @@
 ---
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
-source: apps/www/src/lib/registry/default/ui/popover
+source: apps/www/registry/default/ui/popover
 primitive: https://www.reka-ui.com/docs/components/popover.html
 ---
 
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 577a319da..24ad41b55 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -1,7 +1,7 @@
 ---
 title: Progress
 description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
-source: apps/www/src/lib/registry/default/ui/progress
+source: apps/www/registry/default/ui/progress
 primitive: https://www.reka-ui.com/docs/components/progress.html
 ---
 
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index 0576414c9..fbc673a99 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -1,7 +1,7 @@
 ---
 title: Radio Group
 description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
-source: apps/www/src/lib/registry/default/ui/radio-group
+source: apps/www/registry/default/ui/radio-group
 primitive: https://www.reka-ui.com/docs/components/radio-group.html
 ---
 
diff --git a/apps/www/src/content/docs/components/range-calendar.md b/apps/www/src/content/docs/components/range-calendar.md
index 2d0959475..61b1f76ab 100644
--- a/apps/www/src/content/docs/components/range-calendar.md
+++ b/apps/www/src/content/docs/components/range-calendar.md
@@ -1,7 +1,7 @@
 ---
 title: Range Calendar
 description: A calendar component that allows users to select a range of dates.
-source: apps/www/src/lib/registry/default/ui/range-calendar
+source: apps/www/registry/default/ui/range-calendar
 primitive: https://www.reka-ui.com/docs/components/range-calendar.html
 ---
 
diff --git a/apps/www/src/content/docs/components/resizable.md b/apps/www/src/content/docs/components/resizable.md
index 86877afe7..4cbf457ec 100644
--- a/apps/www/src/content/docs/components/resizable.md
+++ b/apps/www/src/content/docs/components/resizable.md
@@ -1,7 +1,7 @@
 ---
 title: Resizable
 description: Accessible resizable panel groups and layouts with keyboard support.
-source: apps/www/src/lib/registry/default/ui/resizable
+source: apps/www/registry/default/ui/resizable
 primitive: https://www.reka-ui.com/docs/components/splitter.html
 ---
 
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index b8bacd557..8aec84714 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -1,7 +1,7 @@
 ---
 title: Scroll-area
 description: Augments native scroll functionality for custom, cross-browser styling.
-source: apps/www/src/lib/registry/default/ui/scroll-area
+source: apps/www/registry/default/ui/scroll-area
 primitive: https://www.reka-ui.com/docs/components/scroll-area.html
 ---
 
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index ad69d5ee3..0998688ae 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -1,7 +1,7 @@
 ---
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
-source: apps/www/src/lib/registry/default/ui/select
+source: apps/www/registry/default/ui/select
 primitive: https://www.reka-ui.com/docs/components/select.html
 ---
 
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index e655a74e6..9e36af8f8 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -1,7 +1,7 @@
 ---
 title: Separator
 description: Visually or semantically separates content.
-source: apps/www/src/lib/registry/default/ui/separator
+source: apps/www/registry/default/ui/separator
 primitive: https://www.reka-ui.com/docs/components/separator.html
 ---
 
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 568288e74..9cecf2423 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -1,7 +1,7 @@
 ---
 title: Sheet
 description: Extends the Dialog component to display content that complements the main content of the screen.
-source: apps/www/src/lib/registry/default/ui/sheet
+source: apps/www/registry/default/ui/sheet
 primitive: https://www.reka-ui.com/docs/components/dialog.html
 ---
 
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index 3ef17bb2c..37fc6cd26 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -1,7 +1,7 @@
 ---
 title: Slider
 description: An input where the user selects a value from within a given range.
-source: apps/www/src/lib/registry/default/ui/slider
+source: apps/www/registry/default/ui/slider
 primitive: https://www.reka-ui.com/docs/components/slider.html
 ---
 
diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
index 96cda888d..01347095e 100644
--- a/apps/www/src/content/docs/components/sonner.md
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -2,7 +2,7 @@
 title: Sonner
 description: An opinionated toast component for Vue.
 docs: https://vue-sonner.vercel.app
-source: apps/www/src/lib/registry/default/ui/sonner
+source: apps/www/registry/default/ui/sonner
 ---
 
 <ComponentPreview name="SonnerDemo" />
diff --git a/apps/www/src/content/docs/components/stepper.md b/apps/www/src/content/docs/components/stepper.md
index 2c75017d1..ae965a63c 100644
--- a/apps/www/src/content/docs/components/stepper.md
+++ b/apps/www/src/content/docs/components/stepper.md
@@ -1,7 +1,7 @@
 ---
 title: Stepper
 description: A set of steps that are used to indicate progress through a multi-step process.
-source: apps/www/src/lib/registry/default/ui/stepper
+source: apps/www/registry/default/ui/stepper
 primitive: https://www.reka-ui.com/docs/components/stepper.html
 ---
 
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index cd7b9f55d..18a589176 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -1,7 +1,7 @@
 ---
 title: Switch
 description: A control that allows the user to toggle between checked and not checked.
-source: apps/www/src/lib/registry/default/ui/switch
+source: apps/www/registry/default/ui/switch
 primitive: https://www.reka-ui.com/docs/components/switch.html
 ---
 
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 32a28e9fb..3d15b5e3d 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -1,7 +1,7 @@
 ---
 title: Tabs
 description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
-source: apps/www/src/lib/registry/default/ui/tabs
+source: apps/www/registry/default/ui/tabs
 primitive: https://www.reka-ui.com/docs/components/tabs.html
 ---
 
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
index 6f691e5b9..fc42c9e08 100644
--- a/apps/www/src/content/docs/components/tags-input.md
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -1,7 +1,7 @@
 ---
 title: Tags Input
 description: Tag inputs render tags inside an input, followed by an actual text input.
-source: apps/www/src/lib/registry/default/ui/tags-input
+source: apps/www/registry/default/ui/tags-input
 primitive: https://www.reka-ui.com/docs/components/tags-input.html
 ---
 
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index 568adb3be..27e84e5eb 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -1,7 +1,7 @@
 ---
 title: Toast
 description: A succinct message that is displayed temporarily.
-source: apps/www/src/lib/registry/default/ui/toast
+source: apps/www/registry/default/ui/toast
 primitive: https://www.reka-ui.com/docs/components/toast.html
 ---
 
diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md
index a466d573c..3134ea415 100644
--- a/apps/www/src/content/docs/components/toggle-group.md
+++ b/apps/www/src/content/docs/components/toggle-group.md
@@ -1,7 +1,7 @@
 ---
 title: Toggle Group
 description: A set of two-state buttons that can be toggled on or off.
-source: apps/www/src/lib/registry/default/ui/toggle-group
+source: apps/www/registry/default/ui/toggle-group
 primitive: https://www.reka-ui.com/docs/components/toggle-group.html
 ---
 
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 93128c80e..892c63f85 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -1,7 +1,7 @@
 ---
 title: Toggle
 description: A two-state button that can be either on or off.
-source: apps/www/src/lib/registry/default/ui/toggle
+source: apps/www/registry/default/ui/toggle
 primitive: https://www.reka-ui.com/docs/components/toggle.html
 ---
 
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index bc33c9aa0..c95c736a9 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -1,7 +1,7 @@
 ---
 title: Tooltip
 description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
-source: apps/www/src/lib/registry/default/ui/tooltip
+source: apps/www/registry/default/ui/tooltip
 primitive: https://www.reka-ui.com/docs/components/tooltip.html
 ---
 
diff --git a/apps/www/src/content/docs/components/v-calendar.md b/apps/www/src/content/docs/components/v-calendar.md
index 1145af1ee..9c8d837b5 100644
--- a/apps/www/src/content/docs/components/v-calendar.md
+++ b/apps/www/src/content/docs/components/v-calendar.md
@@ -1,7 +1,7 @@
 ---
 title: VCalendar
 description: A date field component that allows users to enter and edit date.
-source: apps/www/src/lib/registry/default/ui/calendar
+source: apps/www/registry/default/ui/calendar
 primitive: https://vcalendar.io/
 ---
 
diff --git a/apps/www/src/content/docs/contribution.md b/apps/www/src/content/docs/contribution.md
index 38d2a33cb..6f08b4ee6 100644
--- a/apps/www/src/content/docs/contribution.md
+++ b/apps/www/src/content/docs/contribution.md
@@ -63,7 +63,7 @@ This folder holds all the documentation for the `/docs` route. Each component ha
 8. **examples** -
 Holds all examples not part of `/docs`, like the [main page](/).
 
-9. **lib/registry** -
+9. **registry** -
 The main folder hosts the source code for different styles of every component. This is likely the main folder you'll be changing.
 
 We support two different styles for every component in `shadcn/vue`:
@@ -170,7 +170,7 @@ If you are interested in the detailed specification you can visit [Conventional
 
 Multiple components are integrated into one file in `shadcn/ui` - the React version of `shadcn` - while Vue only supports one component per file, hence the name Single File Component (SFC). In such cases, you need to create separate files for each component part and then export them all in an `index.ts` file.
 
-See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/src/lib/registry/default/ui/accordion) source code as an example.
+See the [`Accordion`](https://github.com/unovue/shadcn-vue/tree/v0.10.2/apps/www/registry/default/ui/accordion) source code as an example.
 
 ## Wrapping Reka UI Components
 
diff --git a/apps/www/src/public/diagrams/structure-dark.svg b/apps/www/src/public/diagrams/structure-dark.svg
index 07ef91e02..6ad820c31 100644
--- a/apps/www/src/public/diagrams/structure-dark.svg
+++ b/apps/www/src/public/diagrams/structure-dark.svg
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1010px" height="680px" viewBox="-0.5 -0.5 1010 680" class="ge-export-svg-dark"><defs><style type="text/css">svg.ge-export-svg-dark { filter: invert(100%) hue-rotate(180deg); }&#xa;svg.ge-export-svg-dark foreignObject img,&#xa;svg.ge-export-svg-dark image:not(svg.ge-export-svg-dark switch image),&#xa;svg.ge-export-svg-dark svg { filter: invert(100%) hue-rotate(180deg) }</style></defs><g><g><rect x="0" y="0" width="1010" height="680" fill="none" stroke="none" pointer-events="all"/></g><g><rect x="350" y="60" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 362.94 59.81 L 463.34 62.39 L 467.12 64.16 L 468.71 67.17 L 469.75 115.68 L 463.78 117.5 L 458.76 117.31 L 352.44 119 L 350.99 118.37 L 351.73 109.61 L 352.23 72.66 L 352.35 60.14 L 358.23 59.43" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 359 60 M 359 60 C 385.23 60.55 418.74 63.44 461 60 M 359 60 C 381.08 61.02 406.7 61.12 461 60 M 461 60 C 465.4 61.87 473.19 63.81 470 69 M 461 60 C 471.58 60.36 470.75 61.28 470 69 M 470 69 C 472.9 79.23 471.88 91.7 470 111 M 470 69 C 469.11 81.69 471.27 95.14 470 111 M 470 111 C 472.67 116.6 467.63 121.56 461 120 M 470 111 C 466.79 120.97 462.75 119.32 461 120 M 461 120 C 438.09 122.06 412.06 121.92 359 120 M 461 120 C 422.7 118.87 388.75 117.8 359 120 M 359 120 C 353.16 120.16 350.16 119.27 350 111 M 359 120 C 350.02 119.64 349.76 115.32 350 111 M 350 111 C 346.84 95.53 346.74 77.23 350 69 M 350 111 C 352.18 98.06 349.58 88.94 350 69 M 350 69 C 346.5 62.94 356.42 63.32 359 60 M 350 69 C 352.54 64.59 349.28 55.69 359 60" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 90px; margin-left: 351px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shadcn/Vue</div></div></div></foreignObject><text x="410" y="95" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Shadcn/Vue</text></switch></g></g><g><rect x="130" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 142.94 180.49 L 248.15 180.1 L 245.04 179.52 L 247.04 190.05 L 250.29 238.09 L 248.57 238.35 L 241.85 243.04 L 133.84 236.06 L 128.75 237.62 L 128.07 234.59 L 133.9 191.67 L 133.05 182.29 L 135.14 178.51" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 139 180 M 139 180 C 166.09 177.97 200.08 174.41 241 180 M 139 180 C 170.65 180.58 199.14 180.56 241 180 M 241 180 C 246.46 177.98 250.82 181.22 250 189 M 241 180 C 243.1 176.96 250.7 179.1 250 189 M 250 189 C 246.8 205.5 252.83 214.39 250 231 M 250 189 C 249.87 202.4 249.74 211.64 250 231 M 250 231 C 251.85 240.57 247.38 237.73 241 240 M 250 231 C 250.79 239.71 247.06 242.27 241 240 M 241 240 C 204.38 238.9 171.71 235.99 139 240 M 241 240 C 208.83 239.54 176.59 239.16 139 240 M 139 240 C 136.08 240.56 127.92 239.22 130 231 M 139 240 C 130.94 242.91 127.57 234.88 130 231 M 130 231 C 125.8 220.18 131.11 204.52 130 189 M 130 231 C 128.86 214.93 129.48 197.79 130 189 M 130 189 C 127.98 182.62 134.88 177.06 139 180 M 130 189 C 129.57 182.48 131.75 180.92 139 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Packages</div></div></div></foreignObject><text x="190" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Packages</text></switch></g></g><g><rect x="600" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 612.94 181.17 L 714.96 177.82 L 720.97 182.88 L 723.36 192.93 L 720.82 232.51 L 715.35 239.21 L 714.94 240.77 L 605.25 241.12 L 604.5 236.88 L 602.42 231.56 L 597.58 190.68 L 603.75 184.45 L 610.05 177.58" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 609 180 M 609 180 C 636.95 179.47 671.41 177.45 711 180 M 609 180 C 646.22 180.15 685.57 180.01 711 180 M 711 180 C 717.52 182.09 718.44 186.63 720 189 M 711 180 C 713.82 182.77 720.65 186.12 720 189 M 720 189 C 717.03 195.38 722.1 208.29 720 231 M 720 189 C 720.62 199.1 722.21 212.15 720 231 M 720 231 C 721.04 236.53 717.14 241.89 711 240 M 720 231 C 715.58 238.45 721.37 236.01 711 240 M 711 240 C 689.07 235.75 670.16 238.06 609 240 M 711 240 C 680.96 240.2 654.43 240.52 609 240 M 609 240 C 601 240.96 603.68 239.17 600 231 M 609 240 C 601.86 236.98 604.57 234.45 600 231 M 600 231 C 602.77 224.83 597.49 211.8 600 189 M 600 231 C 599.53 216.2 599.37 203.44 600 189 M 600 189 C 599.46 182.3 603.35 178.81 609 180 M 600 189 C 596.6 180.38 604.23 176.95 609 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Apps/www</div></div></div></foreignObject><text x="660" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Apps/www</text></switch></g></g><g><path d="M 620 180 L 600 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 620 180 M 620 180 C 615 180.83 608.05 181.37 600 180 M 620 180 C 615.79 181.15 608.7 179.25 600 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 355 120 L 245 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 355 120 M 355 120 C 312.6 143.9 267.43 168.75 245 180 M 355 120 C 317.68 143.43 281.5 160.5 245 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="50" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 62.94 286.57 L 165.01 292.39 L 168.61 293.68 L 172.99 301.33 L 165.52 346.57 L 165.28 345.48 L 164.37 347.4 L 54.27 352.41 L 51.29 351.15 L 50.15 342.44 L 47.97 295.74 L 49.25 289.21 L 60.62 290.95" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 59 290 M 59 290 C 99.24 292.91 136.1 290.61 161 290 M 59 290 C 91.28 288.07 120.16 287.31 161 290 M 161 290 C 164.84 288.63 172.58 291.68 170 299 M 161 290 C 167.43 294.17 170.41 294.43 170 299 M 170 299 C 169.84 311.98 170.1 322.17 170 341 M 170 299 C 171.03 313 169.17 329.47 170 341 M 170 341 C 166.95 350.38 165.92 348.73 161 350 M 170 341 C 167.15 351.34 165.33 351.52 161 350 M 161 350 C 135.33 349.87 108.04 346.32 59 350 M 161 350 C 129.22 349.44 98.83 349.25 59 350 M 59 350 C 49.61 352.95 50.5 348.93 50 341 M 59 350 C 56.46 354.13 52.8 351.47 50 341 M 50 341 C 49.28 324.88 47.05 307.83 50 299 M 50 341 C 50.59 327.74 50.55 312.08 50 299 M 50 299 C 48.87 290.69 53.7 289.54 59 290 M 50 299 C 50.15 289.07 57.42 285.52 59 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 51px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Module</div></div></div></foreignObject><text x="110" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Module</text></switch></g></g><g><rect x="190" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 202.94 287.25 L 301.82 290.11 L 306.54 289.04 L 311.32 296.21 L 306.06 340.98 L 310.06 346.33 L 299.46 353.13 L 195.68 349.47 L 189.05 350.41 L 186.49 339.42 L 189.65 302.75 L 189.95 291.37 L 197.53 290.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 199 290 M 199 290 C 240.1 286.42 277.43 293.65 301 290 M 199 290 C 236.86 291.71 276.59 290.84 301 290 M 301 290 C 305.9 292.74 310.21 289.09 310 299 M 301 290 C 308.15 290.77 310.36 292.25 310 299 M 310 299 C 310.06 310.25 309.37 324.87 310 341 M 310 299 C 310.1 313.7 309.96 325.97 310 341 M 310 341 C 306.14 346.35 305.67 352.9 301 350 M 310 341 C 311.14 350.08 309.64 354.46 301 350 M 301 350 C 269.62 346.71 235.69 348.39 199 350 M 301 350 C 275.35 350.11 246.67 350.61 199 350 M 199 350 C 192.53 353.35 188.26 348.89 190 341 M 199 350 C 197.38 348.2 190.6 351.04 190 341 M 190 341 C 188.25 329.53 191.43 315.11 190 299 M 190 341 C 188.94 329 192.13 317.73 190 299 M 190 299 C 190.35 290.37 192.17 291.28 199 290 M 190 299 C 187.18 296.17 190.69 290.76 199 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CLI</div></div></div></foreignObject><text x="250" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">CLI</text></switch></g></g><g><path d="M 168.18 240 L 131.82 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 168.18 240 M 168.18 240 C 156.4 258.47 143.57 276.59 131.82 290 M 168.18 240 C 158.3 248.99 152.76 261.23 131.82 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 206.36 240 L 233.64 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 206.36 240 M 206.36 240 C 215.05 256.64 222.45 275.16 233.64 290 M 206.36 240 C 215.36 253.8 221.32 268.08 233.64 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 240 L 480 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 240 M 600 240 C 554.25 259.11 515.03 281.58 480 300 M 600 240 C 554.92 262.18 511.49 286.2 480 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 680 240 L 720 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 680 240 M 680 240 C 696.94 263.88 712.15 286.75 720 300 M 680 240 C 687.57 253.37 697.38 268.15 720 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="690" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 701.09 296.05 L 804.96 303.54 L 805.53 305.98 L 810.5 309.06 L 812.18 351.39 L 806.84 357.32 L 799.83 357.58 L 691.56 358.96 L 694.83 356.51 L 688.09 347.25 L 687.22 312.98 L 694.2 298.61 L 699.66 301.55" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 300 M 699 300 C 736.82 297.41 771.45 300.3 801 300 M 699 300 C 730.22 298.82 762.91 297.14 801 300 M 801 300 C 809.7 303.91 813.56 305.07 810 309 M 801 300 C 803.4 298.23 813.3 306.96 810 309 M 810 309 C 809.76 321.55 814.34 339.05 810 351 M 810 309 C 811.23 321.66 808.02 331.08 810 351 M 810 351 C 809.03 358.82 804.03 363.23 801 360 M 810 351 C 806.3 355.47 802.42 356.68 801 360 M 801 360 C 765.37 355.52 722.58 357.06 699 360 M 801 360 C 765.21 358.25 730.31 360.67 699 360 M 699 360 C 692.47 359.9 692.35 355.61 690 351 M 699 360 C 689.11 361.76 693.54 353.09 690 351 M 690 351 C 690.81 334.66 691.97 319.88 690 309 M 690 351 C 690.6 340.94 691.38 329.95 690 309 M 690 309 C 689.05 299.66 692.48 297.34 699 300 M 690 309 C 693.59 301.74 692.44 300.73 699 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Registry</div></div></div></foreignObject><text x="750" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Registry</text></switch></g></g><g><rect x="390" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 401.1 296.73 L 501.77 301.25 L 511.45 301.34 L 508.82 311.94 L 512.72 353.81 L 511.63 358.18 L 502.91 363.3 L 392.97 356.02 L 392.59 355.76 L 392.44 352.22 L 388.9 312 L 394.9 300.77 L 396.58 300.62" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 300 M 399 300 C 437.68 294.83 480.79 299.26 501 300 M 399 300 C 435.79 298.39 475.35 296.59 501 300 M 501 300 C 510.76 300.02 511.19 302.48 510 309 M 501 300 C 504.12 304.03 513.25 304.78 510 309 M 510 309 C 509.98 319.43 513.6 332.94 510 351 M 510 309 C 511.98 318.36 510.49 331.59 510 351 M 510 351 C 508.21 354.79 503.78 359.39 501 360 M 510 351 C 510.3 354.21 506.73 359.62 501 360 M 501 360 C 472.06 360.37 443.03 359.13 399 360 M 501 360 C 467.34 358.91 438.15 358.03 399 360 M 399 360 C 395.4 360.3 390.11 355.56 390 351 M 399 360 C 390.02 355.83 391.34 352.65 390 351 M 390 351 C 389.78 339.32 388.35 327.17 390 309 M 390 351 C 391.28 333.8 391.28 318.8 390 309 M 390 309 C 390.54 299.34 390.95 299.08 399 300 M 390 309 C 390.62 299.64 394.92 296.76 399 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.vitepress</div></div></div></foreignObject><text x="450" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">.vitepress</text></switch></g></g><g><rect x="840" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 851.1 297.41 L 956.58 298.96 L 959.38 304.7 L 957.15 306.82 L 963.26 356.22 L 958.41 359.03 L 948 361.03 L 844.37 361.08 L 840.35 355.02 L 838.79 349.2 L 840.58 311.01 L 845.6 302.92 L 851.49 299.69" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 849 300 M 849 300 C 888.54 296.33 932.13 302.31 951 300 M 849 300 C 874.97 302.03 900.99 300.11 951 300 M 951 300 C 953.83 296.13 958.81 299.89 960 309 M 951 300 C 954.84 300.63 963.2 302.6 960 309 M 960 309 C 960.21 325.71 962.87 343.64 960 351 M 960 309 C 958.73 319.06 958.95 328.09 960 351 M 960 351 C 957.39 358.76 953.54 363.56 951 360 M 960 351 C 964.29 352.95 961.04 362.56 951 360 M 951 360 C 916.35 357.21 880.69 361.2 849 360 M 951 360 C 923.47 359.58 895.99 359.39 849 360 M 849 360 C 840.32 360.7 837.88 355.51 840 351 M 849 360 C 840.94 359.1 839.15 361.42 840 351 M 840 351 C 838.75 335.57 842.72 317.65 840 309 M 840 351 C 837.95 339.07 841.18 324.44 840 309 M 840 309 C 842.02 299.01 839.42 300.83 849 300 M 840 309 C 837.65 306.74 847.39 302 849 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 841px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Scripts</div></div></div></foreignObject><text x="900" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Scripts</text></switch></g></g><g><rect x="540" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 551.1 298.09 L 653.39 296.68 L 657.31 300.06 L 663.48 309.7 L 655.79 358.63 L 655.2 359.88 L 651.09 358.76 L 545.78 358.14 L 546.11 354.27 L 543.13 354.17 L 542.26 310.02 L 538.3 305.07 L 548.4 298.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 300 M 549 300 C 568.99 297.84 592.66 297.36 651 300 M 549 300 C 580.54 301.6 613.42 299.56 651 300 M 651 300 C 654.89 300.24 656.44 305.3 660 309 M 651 300 C 655.56 297.23 663.15 300.42 660 309 M 660 309 C 662.11 323.59 663.81 329.54 660 351 M 660 309 C 657.81 315.76 659.74 324.59 660 351 M 660 351 C 656.58 354.73 653.3 359.73 651 360 M 660 351 C 659.08 360.88 656.16 356.31 651 360 M 651 360 C 623.04 362.05 601.14 363.27 549 360 M 651 360 C 625.6 360.24 603.83 360.75 549 360 M 549 360 C 543.24 361.1 543.64 355.46 540 351 M 549 360 C 541.86 362.36 536.95 360.98 540 351 M 540 351 C 537.71 340.22 539.1 324.94 540 309 M 540 351 C 540.31 340.34 538.76 330.09 540 309 M 540 309 C 543.5 306.69 545.89 302.57 549 300 M 540 309 C 543.87 304.64 540.67 298.03 549 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Src</div></div></div></foreignObject><text x="600" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Src</text></switch></g></g><g><path d="M 720 240 L 879.96 301.02" fill="none" stroke="none" pointer-events="stroke"/><path d="M 720 240 M 720 240 C 773.67 265.34 832.67 283.95 879.96 301.02 M 720 240 C 774.61 256.35 826.72 278.31 879.96 301.02" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 642.96 241.02 L 600 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 642.96 241.02 M 642.96 241.02 C 628.95 258.68 611.74 285.38 600 300 M 642.96 241.02 C 629.45 256.53 618.61 275.38 600 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="390" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 399.95 428.83 L 501.31 426.72 L 505.3 432.57 L 507.44 437.89 L 508.77 485.28 L 506.1 484.33 L 503.93 487.46 L 395.4 490.64 L 394.42 484.76 L 391.87 480.46 L 386.18 442.08 L 390.94 433.05 L 396.3 432.5" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 430 M 399 430 C 425.85 433.77 455.34 431 501 430 M 399 430 C 434.71 429.58 471.32 427.6 501 430 M 501 430 C 506.82 432.56 512.08 434.36 510 439 M 501 430 C 504.25 429.37 508.77 430.52 510 439 M 510 439 C 505.86 455.42 512.86 469.82 510 481 M 510 439 C 507.52 447.37 508.03 459.42 510 481 M 510 481 C 511.85 489.96 506.89 490.2 501 490 M 510 481 C 508.26 488.1 502.7 494.46 501 490 M 501 490 C 480.28 485.11 456.16 484.97 399 490 M 501 490 C 461.12 491.98 424.21 489.23 399 490 M 399 490 C 391.85 490.48 393.25 489.42 390 481 M 399 490 C 390.9 493.05 392.16 491.55 390 481 M 390 481 C 387.27 463.31 392.24 450.94 390 439 M 390 481 C 391.16 470.76 389.35 456.37 390 439 M 390 439 C 393.27 433.61 389.83 433.02 399 430 M 390 439 C 392.43 429.03 395.82 433.02 399 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Content</div></div></div></foreignObject><text x="450" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Content</text></switch></g></g><g><rect x="540" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 549.95 429.51 L 656.12 432.44 L 661.22 435.93 L 663.77 440.77 L 659.31 487.69 L 660.89 485.19 L 649.01 493.18 L 546.8 487.7 L 542.18 484.01 L 538.21 477.44 L 537.86 441.09 L 541.64 435.21 L 551.21 431.57" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 430 M 549 430 C 576.71 427.28 614.68 434.05 651 430 M 549 430 C 573.89 433.23 596.96 431.13 651 430 M 651 430 C 657.88 428.67 659.7 431.77 660 439 M 651 430 C 654.97 425.97 658.72 437.54 660 439 M 660 439 C 657.77 453.3 663.8 463.72 660 481 M 660 439 C 658.27 448.07 660.5 455.92 660 481 M 660 481 C 661.03 485.93 656.65 486.37 651 490 M 660 481 C 662.25 486.84 657.01 488.2 651 490 M 651 490 C 616.57 489.95 585.81 487.04 549 490 M 651 490 C 617.25 492.64 582.05 490.59 549 490 M 549 490 C 544.77 490.88 541.01 489.37 540 481 M 549 490 C 541.82 487.12 539.97 491.12 540 481 M 540 481 C 536.23 467.96 538.62 458.22 540 439 M 540 481 C 537.84 472.03 539.25 462.01 540 439 M 540 439 C 536.75 433.29 546.3 426.76 549 430 M 540 439 C 539.46 436.13 539.1 429.05 549 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Examples</div></div></div></foreignObject><text x="600" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Examples</text></switch></g></g><g><rect x="690" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 699.95 430.19 L 802.93 430.15 L 809.15 431.29 L 812.09 435.65 L 809.85 482.1 L 807.67 486.04 L 802.1 490.91 L 698.21 492.76 L 689.94 491.27 L 692.56 482.41 L 689.53 440.1 L 692.34 429.36 L 698.13 430.64" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 430 M 699 430 C 727.57 428.78 766.01 429.1 801 430 M 699 430 C 729.46 428.8 759.4 430.57 801 430 M 801 430 C 808.94 432.78 807.33 429.18 810 439 M 801 430 C 805.69 431.77 808.67 435.36 810 439 M 810 439 C 807.99 451.58 813.07 466.42 810 481 M 810 439 C 809.03 453.17 808.96 469.22 810 481 M 810 481 C 810.22 489.9 806.4 490.53 801 490 M 810 481 C 807.04 485.58 811.32 491.14 801 490 M 801 490 C 760.86 486.79 723.47 489.11 699 490 M 801 490 C 769.39 493.31 735.89 491.95 699 490 M 699 490 C 689.69 491.28 688.77 489.32 690 481 M 699 490 C 692.74 490.39 687.77 490.68 690 481 M 690 481 C 693.2 464.21 692.99 448.71 690 439 M 690 481 C 688.51 464.89 689.15 450.86 690 439 M 690 439 C 688.23 432.96 694.77 428.51 699 430 M 690 439 C 686.49 434.03 691.58 434.29 699 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Lib/Registry</div></div></div></foreignObject><text x="750" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Lib/Registry</text></switch></g></g><g><path d="M 576.96 361.98 L 450 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 576.96 361.98 M 576.96 361.98 C 533.45 385.11 497.44 408.23 450 430 M 576.96 361.98 C 539.05 380.88 502.21 400.23 450 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 360 L 600 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 360 M 600 360 C 603.56 379.92 598.31 404.08 600 430 M 600 360 C 601.27 385.21 600.16 408.6 600 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 630 360 L 750 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 630 360 M 630 360 C 670.37 388 709.62 404.55 750 430 M 630 360 C 657.71 378.84 687.61 395.7 750 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="620" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 629.96 563.24 L 731.63 560.16 L 737.13 559.39 L 743.23 566.28 L 738.96 615.66 L 735.64 615.96 L 730.53 621.26 L 627.56 620.39 L 621.16 616.4 L 616.24 607.74 L 618.53 566.42 L 625.94 563.65 L 629.67 558.7" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 629 560 M 629 560 C 656.81 560.4 683.85 555.92 731 560 M 629 560 C 651.47 563.15 673.63 561.52 731 560 M 731 560 C 736.69 557.84 742.9 566.63 740 569 M 731 560 C 737.47 558.61 737.28 559.56 740 569 M 740 569 C 740.07 576.18 742.27 589.52 740 611 M 740 569 C 741.66 580 741.5 595.74 740 611 M 740 611 C 741.36 619.04 737.57 617.22 731 620 M 740 611 C 738.45 617.05 733.26 620.73 731 620 M 731 620 C 687.84 620.1 653.39 624.8 629 620 M 731 620 C 701.07 621.52 669.41 619.64 629 620 M 629 620 C 621.48 616.43 620.14 617.98 620 611 M 629 620 C 620.88 619.94 620.7 617.72 620 611 M 620 611 C 621.63 599.64 620.9 581.08 620 569 M 620 611 C 618.84 602.4 621.77 590.99 620 569 M 620 569 C 619.73 561.95 621.92 559.38 629 560 M 620 569 C 616.11 560.36 626.53 563.63 629 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 621px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Default</div></div></div></foreignObject><text x="680" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Default</text></switch></g></g><g><rect x="770" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 779.96 563.92 L 886.44 557.87 L 885.06 562.75 L 891.56 569.16 L 889.5 618.07 L 890.43 616.81 L 883.62 618.99 L 778.96 617.45 L 768.91 615.66 L 770.58 612.72 L 770.21 565.43 L 768.64 565.8 L 776.59 557.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 779 560 M 779 560 C 807.67 561.9 835.18 558.96 881 560 M 779 560 C 807.04 562.72 836.07 560.97 881 560 M 881 560 C 887.75 561.94 890.53 564.04 890 569 M 881 560 C 888.19 564.41 887.23 566.58 890 569 M 890 569 C 890.29 582.46 891.53 600.21 890 611 M 890 569 C 890.73 580.7 888.29 592.25 890 611 M 890 611 C 890.54 615.01 887.32 621.39 881 620 M 890 611 C 892.45 615.79 887.57 623.68 881 620 M 881 620 C 852.53 624.94 823.85 618.86 779 620 M 881 620 C 853.21 622.18 827.25 621 779 620 M 779 620 C 774.4 616.82 767.9 617.93 770 611 M 779 620 C 771.8 623.21 768.51 617.28 770 611 M 770 611 C 770.59 604.29 767.27 588.36 770 569 M 770 611 C 769.52 595.26 771.67 579.84 770 569 M 770 569 C 771.22 561.62 770.39 561.12 779 560 M 770 569 C 772.34 567.45 769.81 559.66 779 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 771px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">New York</div></div></div></foreignObject><text x="830" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">New York</text></switch></g></g><g><path d="M 750 490 L 680 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 729.16 515.32 707.32 534.64 680 560 M 750 490 C 723.62 515.42 696.43 540.14 680 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 750 490 L 830 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 775.7 512.59 800.1 532.31 830 560 M 750 490 C 768.36 507.76 790.47 525.95 830 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 130 160 L 150 180 L 130 200 L 110 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 130.96 159.32 L 151.55 181.88 L 132.95 201.3 L 111.19 178.56 L 132.76 159.2" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 130 160 M 130 160 C 141.25 170.02 144.24 175.85 150 180 M 130 160 C 137.22 166.57 143.96 173.08 150 180 M 150 180 C 141.6 184.98 137.73 187.53 130 200 M 150 180 C 145.08 184.97 138.01 191.82 130 200 M 130 200 C 122.23 190.48 113.83 183.99 110 180 M 130 200 C 127.5 194.95 120.34 192.8 110 180 M 110 180 C 120.33 175.37 124.02 160.18 130 160 M 110 180 C 114.64 174.43 122.4 166.17 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="130" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">1</text></switch></g></g><g><path d="M 390 280 L 410 300 L 390 320 L 370 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 280.68 L 413.17 297.31 L 388.8 320.02 L 367.84 296.32 L 393.84 276.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 280 M 390 280 C 392.86 281.8 399.3 285.11 410 300 M 390 280 C 398.23 285.44 403.23 294.35 410 300 M 410 300 C 404.9 302.91 394.88 310.89 390 320 M 410 300 C 403.21 305.94 401.29 310.73 390 320 M 390 320 C 381.37 312.98 374.6 303.52 370 300 M 390 320 C 386.03 315.59 377.88 306.97 370 300 M 370 300 C 376.99 295.11 382.06 283.74 390 280 M 370 300 C 377.31 294.77 381.08 287.28 390 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="390" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">3</text></switch></g></g><g><path d="M 540 280 L 560 300 L 540 320 L 520 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 281.36 L 559.98 303.03 L 536.73 323.38 L 516.17 299.2 L 536.38 278.44" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 280 M 540 280 C 543.07 285.29 551.22 295.35 560 300 M 540 280 C 545.13 284.08 553.27 290.18 560 300 M 560 300 C 554.55 307.88 547.45 308.57 540 320 M 560 300 C 556.67 305.62 551.33 309.38 540 320 M 540 320 C 537.74 312.22 525.79 307.28 520 300 M 540 320 C 535.3 316.71 532.64 310.85 520 300 M 520 300 C 527.33 289.38 539.07 281.92 540 280 M 520 300 C 528.25 291.33 534.01 286.23 540 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="540" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">4</text></switch></g></g><g><path d="M 690 280 L 710 300 L 690 320 L 670 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 280.33 L 711.82 300.75 L 689.14 317.31 L 669.35 298.55 L 690.26 283.52" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 280 M 690 280 C 699.97 285.24 702.05 295.69 710 300 M 690 280 C 697.35 285.26 702.54 289.72 710 300 M 710 300 C 703.23 307.55 700.52 311.95 690 320 M 710 300 C 702.11 306.63 697.42 315.82 690 320 M 690 320 C 683.07 317.32 685.05 315.71 670 300 M 690 320 C 681.21 311.72 675.51 306.66 670 300 M 670 300 C 679.84 292.1 682.66 286.68 690 280 M 670 300 C 674.92 293.4 680.65 288.8 690 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="690" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">5</text></switch></g></g><g><path d="M 840 280 L 860 300 L 840 320 L 820 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 840.96 281.01 L 858.63 298.46 L 837.07 320.67 L 817.67 301.43 L 840.8 277.93" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 840 280 M 840 280 C 846.17 284.73 853.98 289.92 860 300 M 840 280 C 843.45 283.89 851.78 289.56 860 300 M 860 300 C 852.88 304.52 853.1 309.63 840 320 M 860 300 C 854.77 306.31 846.66 310.47 840 320 M 840 320 C 834.63 312.57 827.44 303.48 820 300 M 840 320 C 834.48 312.04 826.28 309.75 820 300 M 820 300 C 826.18 298.36 831.67 292.86 840 280 M 820 300 C 826.66 293.17 834.39 286.95 840 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 821px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6</div></div></div></foreignObject><text x="840" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">6</text></switch></g></g><g><path d="M 390 410 L 410 430 L 390 450 L 370 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 411.69 L 413.44 426.17 L 393 446.03 L 374 426.31 L 391.34 410.34" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 410 M 390 410 C 396.38 419.02 405.91 422.96 410 430 M 390 410 C 394.36 413.33 401.82 420.19 410 430 M 410 430 C 406.53 435.48 397.67 445.32 390 450 M 410 430 C 404.24 436.8 396.7 439.93 390 450 M 390 450 C 382.2 441.82 377.82 437.24 370 430 M 390 450 C 387.75 446.36 381.05 438.83 370 430 M 370 430 C 376.51 421.83 380.69 420.24 390 410 M 370 430 C 373.6 423.73 379.33 419.91 390 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">7</div></div></div></foreignObject><text x="390" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">7</text></switch></g></g><g><path d="M 540 410 L 560 430 L 540 450 L 520 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 412.37 L 560.25 431.89 L 540.92 449.39 L 522.33 429.19 L 541.88 412.76" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 410 M 540 410 C 550.58 418.51 549.84 425.19 560 430 M 540 410 C 544.46 416.76 551.06 420.82 560 430 M 560 430 C 556.18 432.45 550.25 443 540 450 M 560 430 C 553.7 437.28 550.74 439.39 540 450 M 540 450 C 533.77 445.07 528.21 433.01 520 430 M 540 450 C 533.02 442.68 527.81 433.91 520 430 M 520 430 C 526.84 423.3 537.71 417.62 540 410 M 520 430 C 525.34 424.3 533.07 418.86 540 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">8</div></div></div></foreignObject><text x="540" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">8</text></switch></g></g><g><path d="M 690 410 L 710 430 L 690 450 L 670 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 413.05 L 707.06 429.6 L 688.85 452.76 L 670.65 432.07 L 692.41 407.17" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 410 M 690 410 C 695.99 418 700.97 419.43 710 430 M 690 410 C 694.56 415.4 696.3 416.66 710 430 M 710 430 C 705.82 437.42 702.82 440.68 690 450 M 710 430 C 707.17 432.96 700.78 438.04 690 450 M 690 450 C 681.34 443.52 678.59 435.97 670 430 M 690 450 C 686.28 443.8 678.58 437.79 670 430 M 670 430 C 673.17 429.57 678.73 423.8 690 410 M 670 430 C 672.28 424.07 678.01 421.01 690 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">9</div></div></div></foreignObject><text x="690" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">9</text></switch></g></g><g><path d="M 620 540 L 640 560 L 620 580 L 600 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 620.96 536.41 L 638.68 563.03 L 622.71 581.48 L 597.3 559.83 L 623.49 542" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 620 540 M 620 540 C 622.4 543.78 626.82 554.69 640 560 M 620 540 C 625.56 548.27 633.58 555.92 640 560 M 640 560 C 631.12 565.35 629.98 574.04 620 580 M 640 560 C 631.3 567.93 626.06 574.96 620 580 M 620 580 C 610.48 576.02 609.36 565.5 600 560 M 620 580 C 614.82 574.43 606.11 565.96 600 560 M 600 560 C 603.84 555.31 614.76 549.36 620 540 M 600 560 C 608.96 551.2 614.68 544.92 620 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">10</div></div></div></foreignObject><text x="620" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">10</text></switch></g></g><g><path d="M 770 540 L 790 560 L 770 580 L 750 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 770.96 537.77 L 790.3 558.46 L 768.56 580.2 L 751.96 557.59 L 766.57 538.82" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 770 540 M 770 540 C 776.81 547.56 780.68 551.96 790 560 M 770 540 C 776.56 546.34 782.86 552.39 790 560 M 790 560 C 785.22 563.28 777.93 569.4 770 580 M 790 560 C 783.43 564.09 779.34 573.07 770 580 M 770 580 C 760.42 570.51 752.93 565.03 750 560 M 770 580 C 762.56 571.87 752.85 564.92 750 560 M 750 560 C 758.51 554.25 762.8 552.12 770 540 M 750 560 C 757.64 551.53 763.36 546.02 770 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 751px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">11</div></div></div></foreignObject><text x="770" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">11</text></switch></g></g><g><path d="M 470 118.42 L 580 170.53" fill="none" stroke="none" pointer-events="stroke"/><path d="M 470 118.42 M 470 118.42 C 501.42 133.39 544.46 154.07 580 170.53 M 470 118.42 C 502.18 134.17 539.34 149.4 580 170.53" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 160 L 620 180 L 600 200 L 580 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.96 160 L 618.36 179.6 L 600.87 196.66 L 579.51 181.44 L 603.3 161.61" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 600 160 M 600 160 C 606.66 162.31 607.37 170.88 620 180 M 600 160 C 608.12 166.01 614 173.71 620 180 M 620 180 C 615.25 185.95 602.3 193.21 600 200 M 620 180 C 613.74 185.46 607.25 191.27 600 200 M 600 200 C 597.8 197.73 592.22 187.75 580 180 M 600 200 C 592.76 191.27 587.11 183.88 580 180 M 580 180 C 586.66 173.64 593.04 166.36 600 160 M 580 180 C 586.38 175 588.14 173.12 600 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 581px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="600" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">2</text></switch></g></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1010px" height="680px" viewBox="-0.5 -0.5 1010 680" class="ge-export-svg-dark"><defs><style type="text/css">svg.ge-export-svg-dark { filter: invert(100%) hue-rotate(180deg); }&#xa;svg.ge-export-svg-dark foreignObject img,&#xa;svg.ge-export-svg-dark image:not(svg.ge-export-svg-dark switch image),&#xa;svg.ge-export-svg-dark svg { filter: invert(100%) hue-rotate(180deg) }</style></defs><g><g><rect x="0" y="0" width="1010" height="680" fill="none" stroke="none" pointer-events="all"/></g><g><rect x="350" y="60" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 362.94 59.81 L 463.34 62.39 L 467.12 64.16 L 468.71 67.17 L 469.75 115.68 L 463.78 117.5 L 458.76 117.31 L 352.44 119 L 350.99 118.37 L 351.73 109.61 L 352.23 72.66 L 352.35 60.14 L 358.23 59.43" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 359 60 M 359 60 C 385.23 60.55 418.74 63.44 461 60 M 359 60 C 381.08 61.02 406.7 61.12 461 60 M 461 60 C 465.4 61.87 473.19 63.81 470 69 M 461 60 C 471.58 60.36 470.75 61.28 470 69 M 470 69 C 472.9 79.23 471.88 91.7 470 111 M 470 69 C 469.11 81.69 471.27 95.14 470 111 M 470 111 C 472.67 116.6 467.63 121.56 461 120 M 470 111 C 466.79 120.97 462.75 119.32 461 120 M 461 120 C 438.09 122.06 412.06 121.92 359 120 M 461 120 C 422.7 118.87 388.75 117.8 359 120 M 359 120 C 353.16 120.16 350.16 119.27 350 111 M 359 120 C 350.02 119.64 349.76 115.32 350 111 M 350 111 C 346.84 95.53 346.74 77.23 350 69 M 350 111 C 352.18 98.06 349.58 88.94 350 69 M 350 69 C 346.5 62.94 356.42 63.32 359 60 M 350 69 C 352.54 64.59 349.28 55.69 359 60" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 90px; margin-left: 351px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shadcn/Vue</div></div></div></foreignObject><text x="410" y="95" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Shadcn/Vue</text></switch></g></g><g><rect x="130" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 142.94 180.49 L 248.15 180.1 L 245.04 179.52 L 247.04 190.05 L 250.29 238.09 L 248.57 238.35 L 241.85 243.04 L 133.84 236.06 L 128.75 237.62 L 128.07 234.59 L 133.9 191.67 L 133.05 182.29 L 135.14 178.51" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 139 180 M 139 180 C 166.09 177.97 200.08 174.41 241 180 M 139 180 C 170.65 180.58 199.14 180.56 241 180 M 241 180 C 246.46 177.98 250.82 181.22 250 189 M 241 180 C 243.1 176.96 250.7 179.1 250 189 M 250 189 C 246.8 205.5 252.83 214.39 250 231 M 250 189 C 249.87 202.4 249.74 211.64 250 231 M 250 231 C 251.85 240.57 247.38 237.73 241 240 M 250 231 C 250.79 239.71 247.06 242.27 241 240 M 241 240 C 204.38 238.9 171.71 235.99 139 240 M 241 240 C 208.83 239.54 176.59 239.16 139 240 M 139 240 C 136.08 240.56 127.92 239.22 130 231 M 139 240 C 130.94 242.91 127.57 234.88 130 231 M 130 231 C 125.8 220.18 131.11 204.52 130 189 M 130 231 C 128.86 214.93 129.48 197.79 130 189 M 130 189 C 127.98 182.62 134.88 177.06 139 180 M 130 189 C 129.57 182.48 131.75 180.92 139 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Packages</div></div></div></foreignObject><text x="190" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Packages</text></switch></g></g><g><rect x="600" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 612.94 181.17 L 714.96 177.82 L 720.97 182.88 L 723.36 192.93 L 720.82 232.51 L 715.35 239.21 L 714.94 240.77 L 605.25 241.12 L 604.5 236.88 L 602.42 231.56 L 597.58 190.68 L 603.75 184.45 L 610.05 177.58" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 609 180 M 609 180 C 636.95 179.47 671.41 177.45 711 180 M 609 180 C 646.22 180.15 685.57 180.01 711 180 M 711 180 C 717.52 182.09 718.44 186.63 720 189 M 711 180 C 713.82 182.77 720.65 186.12 720 189 M 720 189 C 717.03 195.38 722.1 208.29 720 231 M 720 189 C 720.62 199.1 722.21 212.15 720 231 M 720 231 C 721.04 236.53 717.14 241.89 711 240 M 720 231 C 715.58 238.45 721.37 236.01 711 240 M 711 240 C 689.07 235.75 670.16 238.06 609 240 M 711 240 C 680.96 240.2 654.43 240.52 609 240 M 609 240 C 601 240.96 603.68 239.17 600 231 M 609 240 C 601.86 236.98 604.57 234.45 600 231 M 600 231 C 602.77 224.83 597.49 211.8 600 189 M 600 231 C 599.53 216.2 599.37 203.44 600 189 M 600 189 C 599.46 182.3 603.35 178.81 609 180 M 600 189 C 596.6 180.38 604.23 176.95 609 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Apps/www</div></div></div></foreignObject><text x="660" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Apps/www</text></switch></g></g><g><path d="M 620 180 L 600 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 620 180 M 620 180 C 615 180.83 608.05 181.37 600 180 M 620 180 C 615.79 181.15 608.7 179.25 600 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 355 120 L 245 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 355 120 M 355 120 C 312.6 143.9 267.43 168.75 245 180 M 355 120 C 317.68 143.43 281.5 160.5 245 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="50" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 62.94 286.57 L 165.01 292.39 L 168.61 293.68 L 172.99 301.33 L 165.52 346.57 L 165.28 345.48 L 164.37 347.4 L 54.27 352.41 L 51.29 351.15 L 50.15 342.44 L 47.97 295.74 L 49.25 289.21 L 60.62 290.95" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 59 290 M 59 290 C 99.24 292.91 136.1 290.61 161 290 M 59 290 C 91.28 288.07 120.16 287.31 161 290 M 161 290 C 164.84 288.63 172.58 291.68 170 299 M 161 290 C 167.43 294.17 170.41 294.43 170 299 M 170 299 C 169.84 311.98 170.1 322.17 170 341 M 170 299 C 171.03 313 169.17 329.47 170 341 M 170 341 C 166.95 350.38 165.92 348.73 161 350 M 170 341 C 167.15 351.34 165.33 351.52 161 350 M 161 350 C 135.33 349.87 108.04 346.32 59 350 M 161 350 C 129.22 349.44 98.83 349.25 59 350 M 59 350 C 49.61 352.95 50.5 348.93 50 341 M 59 350 C 56.46 354.13 52.8 351.47 50 341 M 50 341 C 49.28 324.88 47.05 307.83 50 299 M 50 341 C 50.59 327.74 50.55 312.08 50 299 M 50 299 C 48.87 290.69 53.7 289.54 59 290 M 50 299 C 50.15 289.07 57.42 285.52 59 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 51px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Module</div></div></div></foreignObject><text x="110" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Module</text></switch></g></g><g><rect x="190" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 202.94 287.25 L 301.82 290.11 L 306.54 289.04 L 311.32 296.21 L 306.06 340.98 L 310.06 346.33 L 299.46 353.13 L 195.68 349.47 L 189.05 350.41 L 186.49 339.42 L 189.65 302.75 L 189.95 291.37 L 197.53 290.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 199 290 M 199 290 C 240.1 286.42 277.43 293.65 301 290 M 199 290 C 236.86 291.71 276.59 290.84 301 290 M 301 290 C 305.9 292.74 310.21 289.09 310 299 M 301 290 C 308.15 290.77 310.36 292.25 310 299 M 310 299 C 310.06 310.25 309.37 324.87 310 341 M 310 299 C 310.1 313.7 309.96 325.97 310 341 M 310 341 C 306.14 346.35 305.67 352.9 301 350 M 310 341 C 311.14 350.08 309.64 354.46 301 350 M 301 350 C 269.62 346.71 235.69 348.39 199 350 M 301 350 C 275.35 350.11 246.67 350.61 199 350 M 199 350 C 192.53 353.35 188.26 348.89 190 341 M 199 350 C 197.38 348.2 190.6 351.04 190 341 M 190 341 C 188.25 329.53 191.43 315.11 190 299 M 190 341 C 188.94 329 192.13 317.73 190 299 M 190 299 C 190.35 290.37 192.17 291.28 199 290 M 190 299 C 187.18 296.17 190.69 290.76 199 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CLI</div></div></div></foreignObject><text x="250" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">CLI</text></switch></g></g><g><path d="M 168.18 240 L 131.82 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 168.18 240 M 168.18 240 C 156.4 258.47 143.57 276.59 131.82 290 M 168.18 240 C 158.3 248.99 152.76 261.23 131.82 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 206.36 240 L 233.64 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 206.36 240 M 206.36 240 C 215.05 256.64 222.45 275.16 233.64 290 M 206.36 240 C 215.36 253.8 221.32 268.08 233.64 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 240 L 480 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 240 M 600 240 C 554.25 259.11 515.03 281.58 480 300 M 600 240 C 554.92 262.18 511.49 286.2 480 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 680 240 L 720 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 680 240 M 680 240 C 696.94 263.88 712.15 286.75 720 300 M 680 240 C 687.57 253.37 697.38 268.15 720 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="690" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 701.09 296.05 L 804.96 303.54 L 805.53 305.98 L 810.5 309.06 L 812.18 351.39 L 806.84 357.32 L 799.83 357.58 L 691.56 358.96 L 694.83 356.51 L 688.09 347.25 L 687.22 312.98 L 694.2 298.61 L 699.66 301.55" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 300 M 699 300 C 736.82 297.41 771.45 300.3 801 300 M 699 300 C 730.22 298.82 762.91 297.14 801 300 M 801 300 C 809.7 303.91 813.56 305.07 810 309 M 801 300 C 803.4 298.23 813.3 306.96 810 309 M 810 309 C 809.76 321.55 814.34 339.05 810 351 M 810 309 C 811.23 321.66 808.02 331.08 810 351 M 810 351 C 809.03 358.82 804.03 363.23 801 360 M 810 351 C 806.3 355.47 802.42 356.68 801 360 M 801 360 C 765.37 355.52 722.58 357.06 699 360 M 801 360 C 765.21 358.25 730.31 360.67 699 360 M 699 360 C 692.47 359.9 692.35 355.61 690 351 M 699 360 C 689.11 361.76 693.54 353.09 690 351 M 690 351 C 690.81 334.66 691.97 319.88 690 309 M 690 351 C 690.6 340.94 691.38 329.95 690 309 M 690 309 C 689.05 299.66 692.48 297.34 699 300 M 690 309 C 693.59 301.74 692.44 300.73 699 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Registry</div></div></div></foreignObject><text x="750" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Registry</text></switch></g></g><g><rect x="390" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 401.1 296.73 L 501.77 301.25 L 511.45 301.34 L 508.82 311.94 L 512.72 353.81 L 511.63 358.18 L 502.91 363.3 L 392.97 356.02 L 392.59 355.76 L 392.44 352.22 L 388.9 312 L 394.9 300.77 L 396.58 300.62" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 300 M 399 300 C 437.68 294.83 480.79 299.26 501 300 M 399 300 C 435.79 298.39 475.35 296.59 501 300 M 501 300 C 510.76 300.02 511.19 302.48 510 309 M 501 300 C 504.12 304.03 513.25 304.78 510 309 M 510 309 C 509.98 319.43 513.6 332.94 510 351 M 510 309 C 511.98 318.36 510.49 331.59 510 351 M 510 351 C 508.21 354.79 503.78 359.39 501 360 M 510 351 C 510.3 354.21 506.73 359.62 501 360 M 501 360 C 472.06 360.37 443.03 359.13 399 360 M 501 360 C 467.34 358.91 438.15 358.03 399 360 M 399 360 C 395.4 360.3 390.11 355.56 390 351 M 399 360 C 390.02 355.83 391.34 352.65 390 351 M 390 351 C 389.78 339.32 388.35 327.17 390 309 M 390 351 C 391.28 333.8 391.28 318.8 390 309 M 390 309 C 390.54 299.34 390.95 299.08 399 300 M 390 309 C 390.62 299.64 394.92 296.76 399 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.vitepress</div></div></div></foreignObject><text x="450" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">.vitepress</text></switch></g></g><g><rect x="840" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 851.1 297.41 L 956.58 298.96 L 959.38 304.7 L 957.15 306.82 L 963.26 356.22 L 958.41 359.03 L 948 361.03 L 844.37 361.08 L 840.35 355.02 L 838.79 349.2 L 840.58 311.01 L 845.6 302.92 L 851.49 299.69" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 849 300 M 849 300 C 888.54 296.33 932.13 302.31 951 300 M 849 300 C 874.97 302.03 900.99 300.11 951 300 M 951 300 C 953.83 296.13 958.81 299.89 960 309 M 951 300 C 954.84 300.63 963.2 302.6 960 309 M 960 309 C 960.21 325.71 962.87 343.64 960 351 M 960 309 C 958.73 319.06 958.95 328.09 960 351 M 960 351 C 957.39 358.76 953.54 363.56 951 360 M 960 351 C 964.29 352.95 961.04 362.56 951 360 M 951 360 C 916.35 357.21 880.69 361.2 849 360 M 951 360 C 923.47 359.58 895.99 359.39 849 360 M 849 360 C 840.32 360.7 837.88 355.51 840 351 M 849 360 C 840.94 359.1 839.15 361.42 840 351 M 840 351 C 838.75 335.57 842.72 317.65 840 309 M 840 351 C 837.95 339.07 841.18 324.44 840 309 M 840 309 C 842.02 299.01 839.42 300.83 849 300 M 840 309 C 837.65 306.74 847.39 302 849 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 841px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Scripts</div></div></div></foreignObject><text x="900" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Scripts</text></switch></g></g><g><rect x="540" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 551.1 298.09 L 653.39 296.68 L 657.31 300.06 L 663.48 309.7 L 655.79 358.63 L 655.2 359.88 L 651.09 358.76 L 545.78 358.14 L 546.11 354.27 L 543.13 354.17 L 542.26 310.02 L 538.3 305.07 L 548.4 298.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 300 M 549 300 C 568.99 297.84 592.66 297.36 651 300 M 549 300 C 580.54 301.6 613.42 299.56 651 300 M 651 300 C 654.89 300.24 656.44 305.3 660 309 M 651 300 C 655.56 297.23 663.15 300.42 660 309 M 660 309 C 662.11 323.59 663.81 329.54 660 351 M 660 309 C 657.81 315.76 659.74 324.59 660 351 M 660 351 C 656.58 354.73 653.3 359.73 651 360 M 660 351 C 659.08 360.88 656.16 356.31 651 360 M 651 360 C 623.04 362.05 601.14 363.27 549 360 M 651 360 C 625.6 360.24 603.83 360.75 549 360 M 549 360 C 543.24 361.1 543.64 355.46 540 351 M 549 360 C 541.86 362.36 536.95 360.98 540 351 M 540 351 C 537.71 340.22 539.1 324.94 540 309 M 540 351 C 540.31 340.34 538.76 330.09 540 309 M 540 309 C 543.5 306.69 545.89 302.57 549 300 M 540 309 C 543.87 304.64 540.67 298.03 549 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Src</div></div></div></foreignObject><text x="600" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Src</text></switch></g></g><g><path d="M 720 240 L 879.96 301.02" fill="none" stroke="none" pointer-events="stroke"/><path d="M 720 240 M 720 240 C 773.67 265.34 832.67 283.95 879.96 301.02 M 720 240 C 774.61 256.35 826.72 278.31 879.96 301.02" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 642.96 241.02 L 600 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 642.96 241.02 M 642.96 241.02 C 628.95 258.68 611.74 285.38 600 300 M 642.96 241.02 C 629.45 256.53 618.61 275.38 600 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="390" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 399.95 428.83 L 501.31 426.72 L 505.3 432.57 L 507.44 437.89 L 508.77 485.28 L 506.1 484.33 L 503.93 487.46 L 395.4 490.64 L 394.42 484.76 L 391.87 480.46 L 386.18 442.08 L 390.94 433.05 L 396.3 432.5" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 430 M 399 430 C 425.85 433.77 455.34 431 501 430 M 399 430 C 434.71 429.58 471.32 427.6 501 430 M 501 430 C 506.82 432.56 512.08 434.36 510 439 M 501 430 C 504.25 429.37 508.77 430.52 510 439 M 510 439 C 505.86 455.42 512.86 469.82 510 481 M 510 439 C 507.52 447.37 508.03 459.42 510 481 M 510 481 C 511.85 489.96 506.89 490.2 501 490 M 510 481 C 508.26 488.1 502.7 494.46 501 490 M 501 490 C 480.28 485.11 456.16 484.97 399 490 M 501 490 C 461.12 491.98 424.21 489.23 399 490 M 399 490 C 391.85 490.48 393.25 489.42 390 481 M 399 490 C 390.9 493.05 392.16 491.55 390 481 M 390 481 C 387.27 463.31 392.24 450.94 390 439 M 390 481 C 391.16 470.76 389.35 456.37 390 439 M 390 439 C 393.27 433.61 389.83 433.02 399 430 M 390 439 C 392.43 429.03 395.82 433.02 399 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Content</div></div></div></foreignObject><text x="450" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Content</text></switch></g></g><g><rect x="540" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 549.95 429.51 L 656.12 432.44 L 661.22 435.93 L 663.77 440.77 L 659.31 487.69 L 660.89 485.19 L 649.01 493.18 L 546.8 487.7 L 542.18 484.01 L 538.21 477.44 L 537.86 441.09 L 541.64 435.21 L 551.21 431.57" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 430 M 549 430 C 576.71 427.28 614.68 434.05 651 430 M 549 430 C 573.89 433.23 596.96 431.13 651 430 M 651 430 C 657.88 428.67 659.7 431.77 660 439 M 651 430 C 654.97 425.97 658.72 437.54 660 439 M 660 439 C 657.77 453.3 663.8 463.72 660 481 M 660 439 C 658.27 448.07 660.5 455.92 660 481 M 660 481 C 661.03 485.93 656.65 486.37 651 490 M 660 481 C 662.25 486.84 657.01 488.2 651 490 M 651 490 C 616.57 489.95 585.81 487.04 549 490 M 651 490 C 617.25 492.64 582.05 490.59 549 490 M 549 490 C 544.77 490.88 541.01 489.37 540 481 M 549 490 C 541.82 487.12 539.97 491.12 540 481 M 540 481 C 536.23 467.96 538.62 458.22 540 439 M 540 481 C 537.84 472.03 539.25 462.01 540 439 M 540 439 C 536.75 433.29 546.3 426.76 549 430 M 540 439 C 539.46 436.13 539.1 429.05 549 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Examples</div></div></div></foreignObject><text x="600" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Examples</text></switch></g></g><g><rect x="690" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 699.95 430.19 L 802.93 430.15 L 809.15 431.29 L 812.09 435.65 L 809.85 482.1 L 807.67 486.04 L 802.1 490.91 L 698.21 492.76 L 689.94 491.27 L 692.56 482.41 L 689.53 440.1 L 692.34 429.36 L 698.13 430.64" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 430 M 699 430 C 727.57 428.78 766.01 429.1 801 430 M 699 430 C 729.46 428.8 759.4 430.57 801 430 M 801 430 C 808.94 432.78 807.33 429.18 810 439 M 801 430 C 805.69 431.77 808.67 435.36 810 439 M 810 439 C 807.99 451.58 813.07 466.42 810 481 M 810 439 C 809.03 453.17 808.96 469.22 810 481 M 810 481 C 810.22 489.9 806.4 490.53 801 490 M 810 481 C 807.04 485.58 811.32 491.14 801 490 M 801 490 C 760.86 486.79 723.47 489.11 699 490 M 801 490 C 769.39 493.31 735.89 491.95 699 490 M 699 490 C 689.69 491.28 688.77 489.32 690 481 M 699 490 C 692.74 490.39 687.77 490.68 690 481 M 690 481 C 693.2 464.21 692.99 448.71 690 439 M 690 481 C 688.51 464.89 689.15 450.86 690 439 M 690 439 C 688.23 432.96 694.77 428.51 699 430 M 690 439 C 686.49 434.03 691.58 434.29 699 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">registry</div></div></div></foreignObject><text x="750" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">registry</text></switch></g></g><g><path d="M 576.96 361.98 L 450 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 576.96 361.98 M 576.96 361.98 C 533.45 385.11 497.44 408.23 450 430 M 576.96 361.98 C 539.05 380.88 502.21 400.23 450 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 360 L 600 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 360 M 600 360 C 603.56 379.92 598.31 404.08 600 430 M 600 360 C 601.27 385.21 600.16 408.6 600 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 630 360 L 750 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 630 360 M 630 360 C 670.37 388 709.62 404.55 750 430 M 630 360 C 657.71 378.84 687.61 395.7 750 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="620" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 629.96 563.24 L 731.63 560.16 L 737.13 559.39 L 743.23 566.28 L 738.96 615.66 L 735.64 615.96 L 730.53 621.26 L 627.56 620.39 L 621.16 616.4 L 616.24 607.74 L 618.53 566.42 L 625.94 563.65 L 629.67 558.7" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 629 560 M 629 560 C 656.81 560.4 683.85 555.92 731 560 M 629 560 C 651.47 563.15 673.63 561.52 731 560 M 731 560 C 736.69 557.84 742.9 566.63 740 569 M 731 560 C 737.47 558.61 737.28 559.56 740 569 M 740 569 C 740.07 576.18 742.27 589.52 740 611 M 740 569 C 741.66 580 741.5 595.74 740 611 M 740 611 C 741.36 619.04 737.57 617.22 731 620 M 740 611 C 738.45 617.05 733.26 620.73 731 620 M 731 620 C 687.84 620.1 653.39 624.8 629 620 M 731 620 C 701.07 621.52 669.41 619.64 629 620 M 629 620 C 621.48 616.43 620.14 617.98 620 611 M 629 620 C 620.88 619.94 620.7 617.72 620 611 M 620 611 C 621.63 599.64 620.9 581.08 620 569 M 620 611 C 618.84 602.4 621.77 590.99 620 569 M 620 569 C 619.73 561.95 621.92 559.38 629 560 M 620 569 C 616.11 560.36 626.53 563.63 629 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 621px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Default</div></div></div></foreignObject><text x="680" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Default</text></switch></g></g><g><rect x="770" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 779.96 563.92 L 886.44 557.87 L 885.06 562.75 L 891.56 569.16 L 889.5 618.07 L 890.43 616.81 L 883.62 618.99 L 778.96 617.45 L 768.91 615.66 L 770.58 612.72 L 770.21 565.43 L 768.64 565.8 L 776.59 557.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 779 560 M 779 560 C 807.67 561.9 835.18 558.96 881 560 M 779 560 C 807.04 562.72 836.07 560.97 881 560 M 881 560 C 887.75 561.94 890.53 564.04 890 569 M 881 560 C 888.19 564.41 887.23 566.58 890 569 M 890 569 C 890.29 582.46 891.53 600.21 890 611 M 890 569 C 890.73 580.7 888.29 592.25 890 611 M 890 611 C 890.54 615.01 887.32 621.39 881 620 M 890 611 C 892.45 615.79 887.57 623.68 881 620 M 881 620 C 852.53 624.94 823.85 618.86 779 620 M 881 620 C 853.21 622.18 827.25 621 779 620 M 779 620 C 774.4 616.82 767.9 617.93 770 611 M 779 620 C 771.8 623.21 768.51 617.28 770 611 M 770 611 C 770.59 604.29 767.27 588.36 770 569 M 770 611 C 769.52 595.26 771.67 579.84 770 569 M 770 569 C 771.22 561.62 770.39 561.12 779 560 M 770 569 C 772.34 567.45 769.81 559.66 779 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 771px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">New York</div></div></div></foreignObject><text x="830" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">New York</text></switch></g></g><g><path d="M 750 490 L 680 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 729.16 515.32 707.32 534.64 680 560 M 750 490 C 723.62 515.42 696.43 540.14 680 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 750 490 L 830 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 775.7 512.59 800.1 532.31 830 560 M 750 490 C 768.36 507.76 790.47 525.95 830 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 130 160 L 150 180 L 130 200 L 110 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 130.96 159.32 L 151.55 181.88 L 132.95 201.3 L 111.19 178.56 L 132.76 159.2" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 130 160 M 130 160 C 141.25 170.02 144.24 175.85 150 180 M 130 160 C 137.22 166.57 143.96 173.08 150 180 M 150 180 C 141.6 184.98 137.73 187.53 130 200 M 150 180 C 145.08 184.97 138.01 191.82 130 200 M 130 200 C 122.23 190.48 113.83 183.99 110 180 M 130 200 C 127.5 194.95 120.34 192.8 110 180 M 110 180 C 120.33 175.37 124.02 160.18 130 160 M 110 180 C 114.64 174.43 122.4 166.17 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="130" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">1</text></switch></g></g><g><path d="M 390 280 L 410 300 L 390 320 L 370 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 280.68 L 413.17 297.31 L 388.8 320.02 L 367.84 296.32 L 393.84 276.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 280 M 390 280 C 392.86 281.8 399.3 285.11 410 300 M 390 280 C 398.23 285.44 403.23 294.35 410 300 M 410 300 C 404.9 302.91 394.88 310.89 390 320 M 410 300 C 403.21 305.94 401.29 310.73 390 320 M 390 320 C 381.37 312.98 374.6 303.52 370 300 M 390 320 C 386.03 315.59 377.88 306.97 370 300 M 370 300 C 376.99 295.11 382.06 283.74 390 280 M 370 300 C 377.31 294.77 381.08 287.28 390 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="390" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">3</text></switch></g></g><g><path d="M 540 280 L 560 300 L 540 320 L 520 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 281.36 L 559.98 303.03 L 536.73 323.38 L 516.17 299.2 L 536.38 278.44" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 280 M 540 280 C 543.07 285.29 551.22 295.35 560 300 M 540 280 C 545.13 284.08 553.27 290.18 560 300 M 560 300 C 554.55 307.88 547.45 308.57 540 320 M 560 300 C 556.67 305.62 551.33 309.38 540 320 M 540 320 C 537.74 312.22 525.79 307.28 520 300 M 540 320 C 535.3 316.71 532.64 310.85 520 300 M 520 300 C 527.33 289.38 539.07 281.92 540 280 M 520 300 C 528.25 291.33 534.01 286.23 540 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="540" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">4</text></switch></g></g><g><path d="M 690 280 L 710 300 L 690 320 L 670 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 280.33 L 711.82 300.75 L 689.14 317.31 L 669.35 298.55 L 690.26 283.52" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 280 M 690 280 C 699.97 285.24 702.05 295.69 710 300 M 690 280 C 697.35 285.26 702.54 289.72 710 300 M 710 300 C 703.23 307.55 700.52 311.95 690 320 M 710 300 C 702.11 306.63 697.42 315.82 690 320 M 690 320 C 683.07 317.32 685.05 315.71 670 300 M 690 320 C 681.21 311.72 675.51 306.66 670 300 M 670 300 C 679.84 292.1 682.66 286.68 690 280 M 670 300 C 674.92 293.4 680.65 288.8 690 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="690" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">5</text></switch></g></g><g><path d="M 840 280 L 860 300 L 840 320 L 820 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 840.96 281.01 L 858.63 298.46 L 837.07 320.67 L 817.67 301.43 L 840.8 277.93" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 840 280 M 840 280 C 846.17 284.73 853.98 289.92 860 300 M 840 280 C 843.45 283.89 851.78 289.56 860 300 M 860 300 C 852.88 304.52 853.1 309.63 840 320 M 860 300 C 854.77 306.31 846.66 310.47 840 320 M 840 320 C 834.63 312.57 827.44 303.48 820 300 M 840 320 C 834.48 312.04 826.28 309.75 820 300 M 820 300 C 826.18 298.36 831.67 292.86 840 280 M 820 300 C 826.66 293.17 834.39 286.95 840 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 821px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6</div></div></div></foreignObject><text x="840" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">6</text></switch></g></g><g><path d="M 390 410 L 410 430 L 390 450 L 370 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 411.69 L 413.44 426.17 L 393 446.03 L 374 426.31 L 391.34 410.34" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 410 M 390 410 C 396.38 419.02 405.91 422.96 410 430 M 390 410 C 394.36 413.33 401.82 420.19 410 430 M 410 430 C 406.53 435.48 397.67 445.32 390 450 M 410 430 C 404.24 436.8 396.7 439.93 390 450 M 390 450 C 382.2 441.82 377.82 437.24 370 430 M 390 450 C 387.75 446.36 381.05 438.83 370 430 M 370 430 C 376.51 421.83 380.69 420.24 390 410 M 370 430 C 373.6 423.73 379.33 419.91 390 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">7</div></div></div></foreignObject><text x="390" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">7</text></switch></g></g><g><path d="M 540 410 L 560 430 L 540 450 L 520 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 412.37 L 560.25 431.89 L 540.92 449.39 L 522.33 429.19 L 541.88 412.76" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 410 M 540 410 C 550.58 418.51 549.84 425.19 560 430 M 540 410 C 544.46 416.76 551.06 420.82 560 430 M 560 430 C 556.18 432.45 550.25 443 540 450 M 560 430 C 553.7 437.28 550.74 439.39 540 450 M 540 450 C 533.77 445.07 528.21 433.01 520 430 M 540 450 C 533.02 442.68 527.81 433.91 520 430 M 520 430 C 526.84 423.3 537.71 417.62 540 410 M 520 430 C 525.34 424.3 533.07 418.86 540 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">8</div></div></div></foreignObject><text x="540" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">8</text></switch></g></g><g><path d="M 690 410 L 710 430 L 690 450 L 670 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 413.05 L 707.06 429.6 L 688.85 452.76 L 670.65 432.07 L 692.41 407.17" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 410 M 690 410 C 695.99 418 700.97 419.43 710 430 M 690 410 C 694.56 415.4 696.3 416.66 710 430 M 710 430 C 705.82 437.42 702.82 440.68 690 450 M 710 430 C 707.17 432.96 700.78 438.04 690 450 M 690 450 C 681.34 443.52 678.59 435.97 670 430 M 690 450 C 686.28 443.8 678.58 437.79 670 430 M 670 430 C 673.17 429.57 678.73 423.8 690 410 M 670 430 C 672.28 424.07 678.01 421.01 690 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">9</div></div></div></foreignObject><text x="690" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">9</text></switch></g></g><g><path d="M 620 540 L 640 560 L 620 580 L 600 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 620.96 536.41 L 638.68 563.03 L 622.71 581.48 L 597.3 559.83 L 623.49 542" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 620 540 M 620 540 C 622.4 543.78 626.82 554.69 640 560 M 620 540 C 625.56 548.27 633.58 555.92 640 560 M 640 560 C 631.12 565.35 629.98 574.04 620 580 M 640 560 C 631.3 567.93 626.06 574.96 620 580 M 620 580 C 610.48 576.02 609.36 565.5 600 560 M 620 580 C 614.82 574.43 606.11 565.96 600 560 M 600 560 C 603.84 555.31 614.76 549.36 620 540 M 600 560 C 608.96 551.2 614.68 544.92 620 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">10</div></div></div></foreignObject><text x="620" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">10</text></switch></g></g><g><path d="M 770 540 L 790 560 L 770 580 L 750 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 770.96 537.77 L 790.3 558.46 L 768.56 580.2 L 751.96 557.59 L 766.57 538.82" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 770 540 M 770 540 C 776.81 547.56 780.68 551.96 790 560 M 770 540 C 776.56 546.34 782.86 552.39 790 560 M 790 560 C 785.22 563.28 777.93 569.4 770 580 M 790 560 C 783.43 564.09 779.34 573.07 770 580 M 770 580 C 760.42 570.51 752.93 565.03 750 560 M 770 580 C 762.56 571.87 752.85 564.92 750 560 M 750 560 C 758.51 554.25 762.8 552.12 770 540 M 750 560 C 757.64 551.53 763.36 546.02 770 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 751px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">11</div></div></div></foreignObject><text x="770" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">11</text></switch></g></g><g><path d="M 470 118.42 L 580 170.53" fill="none" stroke="none" pointer-events="stroke"/><path d="M 470 118.42 M 470 118.42 C 501.42 133.39 544.46 154.07 580 170.53 M 470 118.42 C 502.18 134.17 539.34 149.4 580 170.53" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 160 L 620 180 L 600 200 L 580 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.96 160 L 618.36 179.6 L 600.87 196.66 L 579.51 181.44 L 603.3 161.61" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 600 160 M 600 160 C 606.66 162.31 607.37 170.88 620 180 M 600 160 C 608.12 166.01 614 173.71 620 180 M 620 180 C 615.25 185.95 602.3 193.21 600 200 M 620 180 C 613.74 185.46 607.25 191.27 600 200 M 600 200 C 597.8 197.73 592.22 187.75 580 180 M 600 200 C 592.76 191.27 587.11 183.88 580 180 M 580 180 C 586.66 173.64 593.04 166.36 600 160 M 580 180 C 586.38 175 588.14 173.12 600 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 581px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="600" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">2</text></switch></g></g></g></svg>
diff --git a/apps/www/src/public/diagrams/structure-light.svg b/apps/www/src/public/diagrams/structure-light.svg
index 756f5b50b..546278a15 100644
--- a/apps/www/src/public/diagrams/structure-light.svg
+++ b/apps/www/src/public/diagrams/structure-light.svg
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1010px" height="680px" viewBox="-0.5 -0.5 1010 680"><defs/><g><g><rect x="0" y="0" width="1010" height="680" fill="none" stroke="none" pointer-events="all"/></g><g><rect x="350" y="60" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 362.94 59.81 L 463.34 62.39 L 467.12 64.16 L 468.71 67.17 L 469.75 115.68 L 463.78 117.5 L 458.76 117.31 L 352.44 119 L 350.99 118.37 L 351.73 109.61 L 352.23 72.66 L 352.35 60.14 L 358.23 59.43" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 359 60 M 359 60 C 385.23 60.55 418.74 63.44 461 60 M 359 60 C 381.08 61.02 406.7 61.12 461 60 M 461 60 C 465.4 61.87 473.19 63.81 470 69 M 461 60 C 471.58 60.36 470.75 61.28 470 69 M 470 69 C 472.9 79.23 471.88 91.7 470 111 M 470 69 C 469.11 81.69 471.27 95.14 470 111 M 470 111 C 472.67 116.6 467.63 121.56 461 120 M 470 111 C 466.79 120.97 462.75 119.32 461 120 M 461 120 C 438.09 122.06 412.06 121.92 359 120 M 461 120 C 422.7 118.87 388.75 117.8 359 120 M 359 120 C 353.16 120.16 350.16 119.27 350 111 M 359 120 C 350.02 119.64 349.76 115.32 350 111 M 350 111 C 346.84 95.53 346.74 77.23 350 69 M 350 111 C 352.18 98.06 349.58 88.94 350 69 M 350 69 C 346.5 62.94 356.42 63.32 359 60 M 350 69 C 352.54 64.59 349.28 55.69 359 60" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 90px; margin-left: 351px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shadcn/Vue</div></div></div></foreignObject><text x="410" y="95" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Shadcn/Vue</text></switch></g></g><g><rect x="130" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 142.94 180.49 L 248.15 180.1 L 245.04 179.52 L 247.04 190.05 L 250.29 238.09 L 248.57 238.35 L 241.85 243.04 L 133.84 236.06 L 128.75 237.62 L 128.07 234.59 L 133.9 191.67 L 133.05 182.29 L 135.14 178.51" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 139 180 M 139 180 C 166.09 177.97 200.08 174.41 241 180 M 139 180 C 170.65 180.58 199.14 180.56 241 180 M 241 180 C 246.46 177.98 250.82 181.22 250 189 M 241 180 C 243.1 176.96 250.7 179.1 250 189 M 250 189 C 246.8 205.5 252.83 214.39 250 231 M 250 189 C 249.87 202.4 249.74 211.64 250 231 M 250 231 C 251.85 240.57 247.38 237.73 241 240 M 250 231 C 250.79 239.71 247.06 242.27 241 240 M 241 240 C 204.38 238.9 171.71 235.99 139 240 M 241 240 C 208.83 239.54 176.59 239.16 139 240 M 139 240 C 136.08 240.56 127.92 239.22 130 231 M 139 240 C 130.94 242.91 127.57 234.88 130 231 M 130 231 C 125.8 220.18 131.11 204.52 130 189 M 130 231 C 128.86 214.93 129.48 197.79 130 189 M 130 189 C 127.98 182.62 134.88 177.06 139 180 M 130 189 C 129.57 182.48 131.75 180.92 139 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Packages</div></div></div></foreignObject><text x="190" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Packages</text></switch></g></g><g><rect x="600" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 612.94 181.17 L 714.96 177.82 L 720.97 182.88 L 723.36 192.93 L 720.82 232.51 L 715.35 239.21 L 714.94 240.77 L 605.25 241.12 L 604.5 236.88 L 602.42 231.56 L 597.58 190.68 L 603.75 184.45 L 610.05 177.58" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 609 180 M 609 180 C 636.95 179.47 671.41 177.45 711 180 M 609 180 C 646.22 180.15 685.57 180.01 711 180 M 711 180 C 717.52 182.09 718.44 186.63 720 189 M 711 180 C 713.82 182.77 720.65 186.12 720 189 M 720 189 C 717.03 195.38 722.1 208.29 720 231 M 720 189 C 720.62 199.1 722.21 212.15 720 231 M 720 231 C 721.04 236.53 717.14 241.89 711 240 M 720 231 C 715.58 238.45 721.37 236.01 711 240 M 711 240 C 689.07 235.75 670.16 238.06 609 240 M 711 240 C 680.96 240.2 654.43 240.52 609 240 M 609 240 C 601 240.96 603.68 239.17 600 231 M 609 240 C 601.86 236.98 604.57 234.45 600 231 M 600 231 C 602.77 224.83 597.49 211.8 600 189 M 600 231 C 599.53 216.2 599.37 203.44 600 189 M 600 189 C 599.46 182.3 603.35 178.81 609 180 M 600 189 C 596.6 180.38 604.23 176.95 609 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Apps/www</div></div></div></foreignObject><text x="660" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Apps/www</text></switch></g></g><g><path d="M 620 180 L 600 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 620 180 M 620 180 C 615 180.83 608.05 181.37 600 180 M 620 180 C 615.79 181.15 608.7 179.25 600 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 355 120 L 245 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 355 120 M 355 120 C 312.6 143.9 267.43 168.75 245 180 M 355 120 C 317.68 143.43 281.5 160.5 245 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="50" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 62.94 286.57 L 165.01 292.39 L 168.61 293.68 L 172.99 301.33 L 165.52 346.57 L 165.28 345.48 L 164.37 347.4 L 54.27 352.41 L 51.29 351.15 L 50.15 342.44 L 47.97 295.74 L 49.25 289.21 L 60.62 290.95" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 59 290 M 59 290 C 99.24 292.91 136.1 290.61 161 290 M 59 290 C 91.28 288.07 120.16 287.31 161 290 M 161 290 C 164.84 288.63 172.58 291.68 170 299 M 161 290 C 167.43 294.17 170.41 294.43 170 299 M 170 299 C 169.84 311.98 170.1 322.17 170 341 M 170 299 C 171.03 313 169.17 329.47 170 341 M 170 341 C 166.95 350.38 165.92 348.73 161 350 M 170 341 C 167.15 351.34 165.33 351.52 161 350 M 161 350 C 135.33 349.87 108.04 346.32 59 350 M 161 350 C 129.22 349.44 98.83 349.25 59 350 M 59 350 C 49.61 352.95 50.5 348.93 50 341 M 59 350 C 56.46 354.13 52.8 351.47 50 341 M 50 341 C 49.28 324.88 47.05 307.83 50 299 M 50 341 C 50.59 327.74 50.55 312.08 50 299 M 50 299 C 48.87 290.69 53.7 289.54 59 290 M 50 299 C 50.15 289.07 57.42 285.52 59 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 51px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Module</div></div></div></foreignObject><text x="110" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Module</text></switch></g></g><g><rect x="190" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 202.94 287.25 L 301.82 290.11 L 306.54 289.04 L 311.32 296.21 L 306.06 340.98 L 310.06 346.33 L 299.46 353.13 L 195.68 349.47 L 189.05 350.41 L 186.49 339.42 L 189.65 302.75 L 189.95 291.37 L 197.53 290.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 199 290 M 199 290 C 240.1 286.42 277.43 293.65 301 290 M 199 290 C 236.86 291.71 276.59 290.84 301 290 M 301 290 C 305.9 292.74 310.21 289.09 310 299 M 301 290 C 308.15 290.77 310.36 292.25 310 299 M 310 299 C 310.06 310.25 309.37 324.87 310 341 M 310 299 C 310.1 313.7 309.96 325.97 310 341 M 310 341 C 306.14 346.35 305.67 352.9 301 350 M 310 341 C 311.14 350.08 309.64 354.46 301 350 M 301 350 C 269.62 346.71 235.69 348.39 199 350 M 301 350 C 275.35 350.11 246.67 350.61 199 350 M 199 350 C 192.53 353.35 188.26 348.89 190 341 M 199 350 C 197.38 348.2 190.6 351.04 190 341 M 190 341 C 188.25 329.53 191.43 315.11 190 299 M 190 341 C 188.94 329 192.13 317.73 190 299 M 190 299 C 190.35 290.37 192.17 291.28 199 290 M 190 299 C 187.18 296.17 190.69 290.76 199 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CLI</div></div></div></foreignObject><text x="250" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">CLI</text></switch></g></g><g><path d="M 168.18 240 L 131.82 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 168.18 240 M 168.18 240 C 156.4 258.47 143.57 276.59 131.82 290 M 168.18 240 C 158.3 248.99 152.76 261.23 131.82 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 206.36 240 L 233.64 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 206.36 240 M 206.36 240 C 215.05 256.64 222.45 275.16 233.64 290 M 206.36 240 C 215.36 253.8 221.32 268.08 233.64 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 240 L 480 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 240 M 600 240 C 554.25 259.11 515.03 281.58 480 300 M 600 240 C 554.92 262.18 511.49 286.2 480 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 680 240 L 720 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 680 240 M 680 240 C 696.94 263.88 712.15 286.75 720 300 M 680 240 C 687.57 253.37 697.38 268.15 720 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="690" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 701.09 296.05 L 804.96 303.54 L 805.53 305.98 L 810.5 309.06 L 812.18 351.39 L 806.84 357.32 L 799.83 357.58 L 691.56 358.96 L 694.83 356.51 L 688.09 347.25 L 687.22 312.98 L 694.2 298.61 L 699.66 301.55" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 300 M 699 300 C 736.82 297.41 771.45 300.3 801 300 M 699 300 C 730.22 298.82 762.91 297.14 801 300 M 801 300 C 809.7 303.91 813.56 305.07 810 309 M 801 300 C 803.4 298.23 813.3 306.96 810 309 M 810 309 C 809.76 321.55 814.34 339.05 810 351 M 810 309 C 811.23 321.66 808.02 331.08 810 351 M 810 351 C 809.03 358.82 804.03 363.23 801 360 M 810 351 C 806.3 355.47 802.42 356.68 801 360 M 801 360 C 765.37 355.52 722.58 357.06 699 360 M 801 360 C 765.21 358.25 730.31 360.67 699 360 M 699 360 C 692.47 359.9 692.35 355.61 690 351 M 699 360 C 689.11 361.76 693.54 353.09 690 351 M 690 351 C 690.81 334.66 691.97 319.88 690 309 M 690 351 C 690.6 340.94 691.38 329.95 690 309 M 690 309 C 689.05 299.66 692.48 297.34 699 300 M 690 309 C 693.59 301.74 692.44 300.73 699 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Registry</div></div></div></foreignObject><text x="750" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Registry</text></switch></g></g><g><rect x="390" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 401.1 296.73 L 501.77 301.25 L 511.45 301.34 L 508.82 311.94 L 512.72 353.81 L 511.63 358.18 L 502.91 363.3 L 392.97 356.02 L 392.59 355.76 L 392.44 352.22 L 388.9 312 L 394.9 300.77 L 396.58 300.62" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 300 M 399 300 C 437.68 294.83 480.79 299.26 501 300 M 399 300 C 435.79 298.39 475.35 296.59 501 300 M 501 300 C 510.76 300.02 511.19 302.48 510 309 M 501 300 C 504.12 304.03 513.25 304.78 510 309 M 510 309 C 509.98 319.43 513.6 332.94 510 351 M 510 309 C 511.98 318.36 510.49 331.59 510 351 M 510 351 C 508.21 354.79 503.78 359.39 501 360 M 510 351 C 510.3 354.21 506.73 359.62 501 360 M 501 360 C 472.06 360.37 443.03 359.13 399 360 M 501 360 C 467.34 358.91 438.15 358.03 399 360 M 399 360 C 395.4 360.3 390.11 355.56 390 351 M 399 360 C 390.02 355.83 391.34 352.65 390 351 M 390 351 C 389.78 339.32 388.35 327.17 390 309 M 390 351 C 391.28 333.8 391.28 318.8 390 309 M 390 309 C 390.54 299.34 390.95 299.08 399 300 M 390 309 C 390.62 299.64 394.92 296.76 399 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.vitepress</div></div></div></foreignObject><text x="450" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">.vitepress</text></switch></g></g><g><rect x="840" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 851.1 297.41 L 956.58 298.96 L 959.38 304.7 L 957.15 306.82 L 963.26 356.22 L 958.41 359.03 L 948 361.03 L 844.37 361.08 L 840.35 355.02 L 838.79 349.2 L 840.58 311.01 L 845.6 302.92 L 851.49 299.69" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 849 300 M 849 300 C 888.54 296.33 932.13 302.31 951 300 M 849 300 C 874.97 302.03 900.99 300.11 951 300 M 951 300 C 953.83 296.13 958.81 299.89 960 309 M 951 300 C 954.84 300.63 963.2 302.6 960 309 M 960 309 C 960.21 325.71 962.87 343.64 960 351 M 960 309 C 958.73 319.06 958.95 328.09 960 351 M 960 351 C 957.39 358.76 953.54 363.56 951 360 M 960 351 C 964.29 352.95 961.04 362.56 951 360 M 951 360 C 916.35 357.21 880.69 361.2 849 360 M 951 360 C 923.47 359.58 895.99 359.39 849 360 M 849 360 C 840.32 360.7 837.88 355.51 840 351 M 849 360 C 840.94 359.1 839.15 361.42 840 351 M 840 351 C 838.75 335.57 842.72 317.65 840 309 M 840 351 C 837.95 339.07 841.18 324.44 840 309 M 840 309 C 842.02 299.01 839.42 300.83 849 300 M 840 309 C 837.65 306.74 847.39 302 849 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 841px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Scripts</div></div></div></foreignObject><text x="900" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Scripts</text></switch></g></g><g><rect x="540" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 551.1 298.09 L 653.39 296.68 L 657.31 300.06 L 663.48 309.7 L 655.79 358.63 L 655.2 359.88 L 651.09 358.76 L 545.78 358.14 L 546.11 354.27 L 543.13 354.17 L 542.26 310.02 L 538.3 305.07 L 548.4 298.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 300 M 549 300 C 568.99 297.84 592.66 297.36 651 300 M 549 300 C 580.54 301.6 613.42 299.56 651 300 M 651 300 C 654.89 300.24 656.44 305.3 660 309 M 651 300 C 655.56 297.23 663.15 300.42 660 309 M 660 309 C 662.11 323.59 663.81 329.54 660 351 M 660 309 C 657.81 315.76 659.74 324.59 660 351 M 660 351 C 656.58 354.73 653.3 359.73 651 360 M 660 351 C 659.08 360.88 656.16 356.31 651 360 M 651 360 C 623.04 362.05 601.14 363.27 549 360 M 651 360 C 625.6 360.24 603.83 360.75 549 360 M 549 360 C 543.24 361.1 543.64 355.46 540 351 M 549 360 C 541.86 362.36 536.95 360.98 540 351 M 540 351 C 537.71 340.22 539.1 324.94 540 309 M 540 351 C 540.31 340.34 538.76 330.09 540 309 M 540 309 C 543.5 306.69 545.89 302.57 549 300 M 540 309 C 543.87 304.64 540.67 298.03 549 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Src</div></div></div></foreignObject><text x="600" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Src</text></switch></g></g><g><path d="M 720 240 L 879.96 301.02" fill="none" stroke="none" pointer-events="stroke"/><path d="M 720 240 M 720 240 C 773.67 265.34 832.67 283.95 879.96 301.02 M 720 240 C 774.61 256.35 826.72 278.31 879.96 301.02" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 642.96 241.02 L 600 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 642.96 241.02 M 642.96 241.02 C 628.95 258.68 611.74 285.38 600 300 M 642.96 241.02 C 629.45 256.53 618.61 275.38 600 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="390" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 399.95 428.83 L 501.31 426.72 L 505.3 432.57 L 507.44 437.89 L 508.77 485.28 L 506.1 484.33 L 503.93 487.46 L 395.4 490.64 L 394.42 484.76 L 391.87 480.46 L 386.18 442.08 L 390.94 433.05 L 396.3 432.5" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 430 M 399 430 C 425.85 433.77 455.34 431 501 430 M 399 430 C 434.71 429.58 471.32 427.6 501 430 M 501 430 C 506.82 432.56 512.08 434.36 510 439 M 501 430 C 504.25 429.37 508.77 430.52 510 439 M 510 439 C 505.86 455.42 512.86 469.82 510 481 M 510 439 C 507.52 447.37 508.03 459.42 510 481 M 510 481 C 511.85 489.96 506.89 490.2 501 490 M 510 481 C 508.26 488.1 502.7 494.46 501 490 M 501 490 C 480.28 485.11 456.16 484.97 399 490 M 501 490 C 461.12 491.98 424.21 489.23 399 490 M 399 490 C 391.85 490.48 393.25 489.42 390 481 M 399 490 C 390.9 493.05 392.16 491.55 390 481 M 390 481 C 387.27 463.31 392.24 450.94 390 439 M 390 481 C 391.16 470.76 389.35 456.37 390 439 M 390 439 C 393.27 433.61 389.83 433.02 399 430 M 390 439 C 392.43 429.03 395.82 433.02 399 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Content</div></div></div></foreignObject><text x="450" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Content</text></switch></g></g><g><rect x="540" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 549.95 429.51 L 656.12 432.44 L 661.22 435.93 L 663.77 440.77 L 659.31 487.69 L 660.89 485.19 L 649.01 493.18 L 546.8 487.7 L 542.18 484.01 L 538.21 477.44 L 537.86 441.09 L 541.64 435.21 L 551.21 431.57" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 430 M 549 430 C 576.71 427.28 614.68 434.05 651 430 M 549 430 C 573.89 433.23 596.96 431.13 651 430 M 651 430 C 657.88 428.67 659.7 431.77 660 439 M 651 430 C 654.97 425.97 658.72 437.54 660 439 M 660 439 C 657.77 453.3 663.8 463.72 660 481 M 660 439 C 658.27 448.07 660.5 455.92 660 481 M 660 481 C 661.03 485.93 656.65 486.37 651 490 M 660 481 C 662.25 486.84 657.01 488.2 651 490 M 651 490 C 616.57 489.95 585.81 487.04 549 490 M 651 490 C 617.25 492.64 582.05 490.59 549 490 M 549 490 C 544.77 490.88 541.01 489.37 540 481 M 549 490 C 541.82 487.12 539.97 491.12 540 481 M 540 481 C 536.23 467.96 538.62 458.22 540 439 M 540 481 C 537.84 472.03 539.25 462.01 540 439 M 540 439 C 536.75 433.29 546.3 426.76 549 430 M 540 439 C 539.46 436.13 539.1 429.05 549 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Examples</div></div></div></foreignObject><text x="600" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Examples</text></switch></g></g><g><rect x="690" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 699.95 430.19 L 802.93 430.15 L 809.15 431.29 L 812.09 435.65 L 809.85 482.1 L 807.67 486.04 L 802.1 490.91 L 698.21 492.76 L 689.94 491.27 L 692.56 482.41 L 689.53 440.1 L 692.34 429.36 L 698.13 430.64" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 430 M 699 430 C 727.57 428.78 766.01 429.1 801 430 M 699 430 C 729.46 428.8 759.4 430.57 801 430 M 801 430 C 808.94 432.78 807.33 429.18 810 439 M 801 430 C 805.69 431.77 808.67 435.36 810 439 M 810 439 C 807.99 451.58 813.07 466.42 810 481 M 810 439 C 809.03 453.17 808.96 469.22 810 481 M 810 481 C 810.22 489.9 806.4 490.53 801 490 M 810 481 C 807.04 485.58 811.32 491.14 801 490 M 801 490 C 760.86 486.79 723.47 489.11 699 490 M 801 490 C 769.39 493.31 735.89 491.95 699 490 M 699 490 C 689.69 491.28 688.77 489.32 690 481 M 699 490 C 692.74 490.39 687.77 490.68 690 481 M 690 481 C 693.2 464.21 692.99 448.71 690 439 M 690 481 C 688.51 464.89 689.15 450.86 690 439 M 690 439 C 688.23 432.96 694.77 428.51 699 430 M 690 439 C 686.49 434.03 691.58 434.29 699 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Lib/Registry</div></div></div></foreignObject><text x="750" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Lib/Registry</text></switch></g></g><g><path d="M 576.96 361.98 L 450 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 576.96 361.98 M 576.96 361.98 C 533.45 385.11 497.44 408.23 450 430 M 576.96 361.98 C 539.05 380.88 502.21 400.23 450 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 360 L 600 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 360 M 600 360 C 603.56 379.92 598.31 404.08 600 430 M 600 360 C 601.27 385.21 600.16 408.6 600 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 630 360 L 750 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 630 360 M 630 360 C 670.37 388 709.62 404.55 750 430 M 630 360 C 657.71 378.84 687.61 395.7 750 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="620" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 629.96 563.24 L 731.63 560.16 L 737.13 559.39 L 743.23 566.28 L 738.96 615.66 L 735.64 615.96 L 730.53 621.26 L 627.56 620.39 L 621.16 616.4 L 616.24 607.74 L 618.53 566.42 L 625.94 563.65 L 629.67 558.7" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 629 560 M 629 560 C 656.81 560.4 683.85 555.92 731 560 M 629 560 C 651.47 563.15 673.63 561.52 731 560 M 731 560 C 736.69 557.84 742.9 566.63 740 569 M 731 560 C 737.47 558.61 737.28 559.56 740 569 M 740 569 C 740.07 576.18 742.27 589.52 740 611 M 740 569 C 741.66 580 741.5 595.74 740 611 M 740 611 C 741.36 619.04 737.57 617.22 731 620 M 740 611 C 738.45 617.05 733.26 620.73 731 620 M 731 620 C 687.84 620.1 653.39 624.8 629 620 M 731 620 C 701.07 621.52 669.41 619.64 629 620 M 629 620 C 621.48 616.43 620.14 617.98 620 611 M 629 620 C 620.88 619.94 620.7 617.72 620 611 M 620 611 C 621.63 599.64 620.9 581.08 620 569 M 620 611 C 618.84 602.4 621.77 590.99 620 569 M 620 569 C 619.73 561.95 621.92 559.38 629 560 M 620 569 C 616.11 560.36 626.53 563.63 629 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 621px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Default</div></div></div></foreignObject><text x="680" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Default</text></switch></g></g><g><rect x="770" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 779.96 563.92 L 886.44 557.87 L 885.06 562.75 L 891.56 569.16 L 889.5 618.07 L 890.43 616.81 L 883.62 618.99 L 778.96 617.45 L 768.91 615.66 L 770.58 612.72 L 770.21 565.43 L 768.64 565.8 L 776.59 557.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 779 560 M 779 560 C 807.67 561.9 835.18 558.96 881 560 M 779 560 C 807.04 562.72 836.07 560.97 881 560 M 881 560 C 887.75 561.94 890.53 564.04 890 569 M 881 560 C 888.19 564.41 887.23 566.58 890 569 M 890 569 C 890.29 582.46 891.53 600.21 890 611 M 890 569 C 890.73 580.7 888.29 592.25 890 611 M 890 611 C 890.54 615.01 887.32 621.39 881 620 M 890 611 C 892.45 615.79 887.57 623.68 881 620 M 881 620 C 852.53 624.94 823.85 618.86 779 620 M 881 620 C 853.21 622.18 827.25 621 779 620 M 779 620 C 774.4 616.82 767.9 617.93 770 611 M 779 620 C 771.8 623.21 768.51 617.28 770 611 M 770 611 C 770.59 604.29 767.27 588.36 770 569 M 770 611 C 769.52 595.26 771.67 579.84 770 569 M 770 569 C 771.22 561.62 770.39 561.12 779 560 M 770 569 C 772.34 567.45 769.81 559.66 779 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 771px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">New York</div></div></div></foreignObject><text x="830" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">New York</text></switch></g></g><g><path d="M 750 490 L 680 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 729.16 515.32 707.32 534.64 680 560 M 750 490 C 723.62 515.42 696.43 540.14 680 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 750 490 L 830 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 775.7 512.59 800.1 532.31 830 560 M 750 490 C 768.36 507.76 790.47 525.95 830 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 130 160 L 150 180 L 130 200 L 110 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 130.96 159.32 L 151.55 181.88 L 132.95 201.3 L 111.19 178.56 L 132.76 159.2" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 130 160 M 130 160 C 141.25 170.02 144.24 175.85 150 180 M 130 160 C 137.22 166.57 143.96 173.08 150 180 M 150 180 C 141.6 184.98 137.73 187.53 130 200 M 150 180 C 145.08 184.97 138.01 191.82 130 200 M 130 200 C 122.23 190.48 113.83 183.99 110 180 M 130 200 C 127.5 194.95 120.34 192.8 110 180 M 110 180 C 120.33 175.37 124.02 160.18 130 160 M 110 180 C 114.64 174.43 122.4 166.17 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="130" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">1</text></switch></g></g><g><path d="M 390 280 L 410 300 L 390 320 L 370 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 280.68 L 413.17 297.31 L 388.8 320.02 L 367.84 296.32 L 393.84 276.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 280 M 390 280 C 392.86 281.8 399.3 285.11 410 300 M 390 280 C 398.23 285.44 403.23 294.35 410 300 M 410 300 C 404.9 302.91 394.88 310.89 390 320 M 410 300 C 403.21 305.94 401.29 310.73 390 320 M 390 320 C 381.37 312.98 374.6 303.52 370 300 M 390 320 C 386.03 315.59 377.88 306.97 370 300 M 370 300 C 376.99 295.11 382.06 283.74 390 280 M 370 300 C 377.31 294.77 381.08 287.28 390 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="390" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">3</text></switch></g></g><g><path d="M 540 280 L 560 300 L 540 320 L 520 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 281.36 L 559.98 303.03 L 536.73 323.38 L 516.17 299.2 L 536.38 278.44" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 280 M 540 280 C 543.07 285.29 551.22 295.35 560 300 M 540 280 C 545.13 284.08 553.27 290.18 560 300 M 560 300 C 554.55 307.88 547.45 308.57 540 320 M 560 300 C 556.67 305.62 551.33 309.38 540 320 M 540 320 C 537.74 312.22 525.79 307.28 520 300 M 540 320 C 535.3 316.71 532.64 310.85 520 300 M 520 300 C 527.33 289.38 539.07 281.92 540 280 M 520 300 C 528.25 291.33 534.01 286.23 540 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="540" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">4</text></switch></g></g><g><path d="M 690 280 L 710 300 L 690 320 L 670 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 280.33 L 711.82 300.75 L 689.14 317.31 L 669.35 298.55 L 690.26 283.52" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 280 M 690 280 C 699.97 285.24 702.05 295.69 710 300 M 690 280 C 697.35 285.26 702.54 289.72 710 300 M 710 300 C 703.23 307.55 700.52 311.95 690 320 M 710 300 C 702.11 306.63 697.42 315.82 690 320 M 690 320 C 683.07 317.32 685.05 315.71 670 300 M 690 320 C 681.21 311.72 675.51 306.66 670 300 M 670 300 C 679.84 292.1 682.66 286.68 690 280 M 670 300 C 674.92 293.4 680.65 288.8 690 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="690" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">5</text></switch></g></g><g><path d="M 840 280 L 860 300 L 840 320 L 820 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 840.96 281.01 L 858.63 298.46 L 837.07 320.67 L 817.67 301.43 L 840.8 277.93" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 840 280 M 840 280 C 846.17 284.73 853.98 289.92 860 300 M 840 280 C 843.45 283.89 851.78 289.56 860 300 M 860 300 C 852.88 304.52 853.1 309.63 840 320 M 860 300 C 854.77 306.31 846.66 310.47 840 320 M 840 320 C 834.63 312.57 827.44 303.48 820 300 M 840 320 C 834.48 312.04 826.28 309.75 820 300 M 820 300 C 826.18 298.36 831.67 292.86 840 280 M 820 300 C 826.66 293.17 834.39 286.95 840 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 821px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6</div></div></div></foreignObject><text x="840" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">6</text></switch></g></g><g><path d="M 390 410 L 410 430 L 390 450 L 370 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 411.69 L 413.44 426.17 L 393 446.03 L 374 426.31 L 391.34 410.34" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 410 M 390 410 C 396.38 419.02 405.91 422.96 410 430 M 390 410 C 394.36 413.33 401.82 420.19 410 430 M 410 430 C 406.53 435.48 397.67 445.32 390 450 M 410 430 C 404.24 436.8 396.7 439.93 390 450 M 390 450 C 382.2 441.82 377.82 437.24 370 430 M 390 450 C 387.75 446.36 381.05 438.83 370 430 M 370 430 C 376.51 421.83 380.69 420.24 390 410 M 370 430 C 373.6 423.73 379.33 419.91 390 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">7</div></div></div></foreignObject><text x="390" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">7</text></switch></g></g><g><path d="M 540 410 L 560 430 L 540 450 L 520 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 412.37 L 560.25 431.89 L 540.92 449.39 L 522.33 429.19 L 541.88 412.76" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 410 M 540 410 C 550.58 418.51 549.84 425.19 560 430 M 540 410 C 544.46 416.76 551.06 420.82 560 430 M 560 430 C 556.18 432.45 550.25 443 540 450 M 560 430 C 553.7 437.28 550.74 439.39 540 450 M 540 450 C 533.77 445.07 528.21 433.01 520 430 M 540 450 C 533.02 442.68 527.81 433.91 520 430 M 520 430 C 526.84 423.3 537.71 417.62 540 410 M 520 430 C 525.34 424.3 533.07 418.86 540 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">8</div></div></div></foreignObject><text x="540" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">8</text></switch></g></g><g><path d="M 690 410 L 710 430 L 690 450 L 670 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 413.05 L 707.06 429.6 L 688.85 452.76 L 670.65 432.07 L 692.41 407.17" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 410 M 690 410 C 695.99 418 700.97 419.43 710 430 M 690 410 C 694.56 415.4 696.3 416.66 710 430 M 710 430 C 705.82 437.42 702.82 440.68 690 450 M 710 430 C 707.17 432.96 700.78 438.04 690 450 M 690 450 C 681.34 443.52 678.59 435.97 670 430 M 690 450 C 686.28 443.8 678.58 437.79 670 430 M 670 430 C 673.17 429.57 678.73 423.8 690 410 M 670 430 C 672.28 424.07 678.01 421.01 690 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">9</div></div></div></foreignObject><text x="690" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">9</text></switch></g></g><g><path d="M 620 540 L 640 560 L 620 580 L 600 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 620.96 536.41 L 638.68 563.03 L 622.71 581.48 L 597.3 559.83 L 623.49 542" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 620 540 M 620 540 C 622.4 543.78 626.82 554.69 640 560 M 620 540 C 625.56 548.27 633.58 555.92 640 560 M 640 560 C 631.12 565.35 629.98 574.04 620 580 M 640 560 C 631.3 567.93 626.06 574.96 620 580 M 620 580 C 610.48 576.02 609.36 565.5 600 560 M 620 580 C 614.82 574.43 606.11 565.96 600 560 M 600 560 C 603.84 555.31 614.76 549.36 620 540 M 600 560 C 608.96 551.2 614.68 544.92 620 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">10</div></div></div></foreignObject><text x="620" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">10</text></switch></g></g><g><path d="M 770 540 L 790 560 L 770 580 L 750 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 770.96 537.77 L 790.3 558.46 L 768.56 580.2 L 751.96 557.59 L 766.57 538.82" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 770 540 M 770 540 C 776.81 547.56 780.68 551.96 790 560 M 770 540 C 776.56 546.34 782.86 552.39 790 560 M 790 560 C 785.22 563.28 777.93 569.4 770 580 M 790 560 C 783.43 564.09 779.34 573.07 770 580 M 770 580 C 760.42 570.51 752.93 565.03 750 560 M 770 580 C 762.56 571.87 752.85 564.92 750 560 M 750 560 C 758.51 554.25 762.8 552.12 770 540 M 750 560 C 757.64 551.53 763.36 546.02 770 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 751px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">11</div></div></div></foreignObject><text x="770" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">11</text></switch></g></g><g><path d="M 470 118.42 L 580 170.53" fill="none" stroke="none" pointer-events="stroke"/><path d="M 470 118.42 M 470 118.42 C 501.42 133.39 544.46 154.07 580 170.53 M 470 118.42 C 502.18 134.17 539.34 149.4 580 170.53" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 160 L 620 180 L 600 200 L 580 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.96 160 L 618.36 179.6 L 600.87 196.66 L 579.51 181.44 L 603.3 161.61" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 600 160 M 600 160 C 606.66 162.31 607.37 170.88 620 180 M 600 160 C 608.12 166.01 614 173.71 620 180 M 620 180 C 615.25 185.95 602.3 193.21 600 200 M 620 180 C 613.74 185.46 607.25 191.27 600 200 M 600 200 C 597.8 197.73 592.22 187.75 580 180 M 600 200 C 592.76 191.27 587.11 183.88 580 180 M 580 180 C 586.66 173.64 593.04 166.36 600 160 M 580 180 C 586.38 175 588.14 173.12 600 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 581px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="600" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">2</text></switch></g></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1010px" height="680px" viewBox="-0.5 -0.5 1010 680"><defs/><g><g><rect x="0" y="0" width="1010" height="680" fill="none" stroke="none" pointer-events="all"/></g><g><rect x="350" y="60" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 362.94 59.81 L 463.34 62.39 L 467.12 64.16 L 468.71 67.17 L 469.75 115.68 L 463.78 117.5 L 458.76 117.31 L 352.44 119 L 350.99 118.37 L 351.73 109.61 L 352.23 72.66 L 352.35 60.14 L 358.23 59.43" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 359 60 M 359 60 C 385.23 60.55 418.74 63.44 461 60 M 359 60 C 381.08 61.02 406.7 61.12 461 60 M 461 60 C 465.4 61.87 473.19 63.81 470 69 M 461 60 C 471.58 60.36 470.75 61.28 470 69 M 470 69 C 472.9 79.23 471.88 91.7 470 111 M 470 69 C 469.11 81.69 471.27 95.14 470 111 M 470 111 C 472.67 116.6 467.63 121.56 461 120 M 470 111 C 466.79 120.97 462.75 119.32 461 120 M 461 120 C 438.09 122.06 412.06 121.92 359 120 M 461 120 C 422.7 118.87 388.75 117.8 359 120 M 359 120 C 353.16 120.16 350.16 119.27 350 111 M 359 120 C 350.02 119.64 349.76 115.32 350 111 M 350 111 C 346.84 95.53 346.74 77.23 350 69 M 350 111 C 352.18 98.06 349.58 88.94 350 69 M 350 69 C 346.5 62.94 356.42 63.32 359 60 M 350 69 C 352.54 64.59 349.28 55.69 359 60" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 90px; margin-left: 351px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shadcn/Vue</div></div></div></foreignObject><text x="410" y="95" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Shadcn/Vue</text></switch></g></g><g><rect x="130" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 142.94 180.49 L 248.15 180.1 L 245.04 179.52 L 247.04 190.05 L 250.29 238.09 L 248.57 238.35 L 241.85 243.04 L 133.84 236.06 L 128.75 237.62 L 128.07 234.59 L 133.9 191.67 L 133.05 182.29 L 135.14 178.51" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 139 180 M 139 180 C 166.09 177.97 200.08 174.41 241 180 M 139 180 C 170.65 180.58 199.14 180.56 241 180 M 241 180 C 246.46 177.98 250.82 181.22 250 189 M 241 180 C 243.1 176.96 250.7 179.1 250 189 M 250 189 C 246.8 205.5 252.83 214.39 250 231 M 250 189 C 249.87 202.4 249.74 211.64 250 231 M 250 231 C 251.85 240.57 247.38 237.73 241 240 M 250 231 C 250.79 239.71 247.06 242.27 241 240 M 241 240 C 204.38 238.9 171.71 235.99 139 240 M 241 240 C 208.83 239.54 176.59 239.16 139 240 M 139 240 C 136.08 240.56 127.92 239.22 130 231 M 139 240 C 130.94 242.91 127.57 234.88 130 231 M 130 231 C 125.8 220.18 131.11 204.52 130 189 M 130 231 C 128.86 214.93 129.48 197.79 130 189 M 130 189 C 127.98 182.62 134.88 177.06 139 180 M 130 189 C 129.57 182.48 131.75 180.92 139 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Packages</div></div></div></foreignObject><text x="190" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Packages</text></switch></g></g><g><rect x="600" y="180" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 612.94 181.17 L 714.96 177.82 L 720.97 182.88 L 723.36 192.93 L 720.82 232.51 L 715.35 239.21 L 714.94 240.77 L 605.25 241.12 L 604.5 236.88 L 602.42 231.56 L 597.58 190.68 L 603.75 184.45 L 610.05 177.58" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 609 180 M 609 180 C 636.95 179.47 671.41 177.45 711 180 M 609 180 C 646.22 180.15 685.57 180.01 711 180 M 711 180 C 717.52 182.09 718.44 186.63 720 189 M 711 180 C 713.82 182.77 720.65 186.12 720 189 M 720 189 C 717.03 195.38 722.1 208.29 720 231 M 720 189 C 720.62 199.1 722.21 212.15 720 231 M 720 231 C 721.04 236.53 717.14 241.89 711 240 M 720 231 C 715.58 238.45 721.37 236.01 711 240 M 711 240 C 689.07 235.75 670.16 238.06 609 240 M 711 240 C 680.96 240.2 654.43 240.52 609 240 M 609 240 C 601 240.96 603.68 239.17 600 231 M 609 240 C 601.86 236.98 604.57 234.45 600 231 M 600 231 C 602.77 224.83 597.49 211.8 600 189 M 600 231 C 599.53 216.2 599.37 203.44 600 189 M 600 189 C 599.46 182.3 603.35 178.81 609 180 M 600 189 C 596.6 180.38 604.23 176.95 609 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Apps/www</div></div></div></foreignObject><text x="660" y="215" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Apps/www</text></switch></g></g><g><path d="M 620 180 L 600 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 620 180 M 620 180 C 615 180.83 608.05 181.37 600 180 M 620 180 C 615.79 181.15 608.7 179.25 600 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 355 120 L 245 180" fill="none" stroke="none" pointer-events="stroke"/><path d="M 355 120 M 355 120 C 312.6 143.9 267.43 168.75 245 180 M 355 120 C 317.68 143.43 281.5 160.5 245 180" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="50" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 62.94 286.57 L 165.01 292.39 L 168.61 293.68 L 172.99 301.33 L 165.52 346.57 L 165.28 345.48 L 164.37 347.4 L 54.27 352.41 L 51.29 351.15 L 50.15 342.44 L 47.97 295.74 L 49.25 289.21 L 60.62 290.95" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 59 290 M 59 290 C 99.24 292.91 136.1 290.61 161 290 M 59 290 C 91.28 288.07 120.16 287.31 161 290 M 161 290 C 164.84 288.63 172.58 291.68 170 299 M 161 290 C 167.43 294.17 170.41 294.43 170 299 M 170 299 C 169.84 311.98 170.1 322.17 170 341 M 170 299 C 171.03 313 169.17 329.47 170 341 M 170 341 C 166.95 350.38 165.92 348.73 161 350 M 170 341 C 167.15 351.34 165.33 351.52 161 350 M 161 350 C 135.33 349.87 108.04 346.32 59 350 M 161 350 C 129.22 349.44 98.83 349.25 59 350 M 59 350 C 49.61 352.95 50.5 348.93 50 341 M 59 350 C 56.46 354.13 52.8 351.47 50 341 M 50 341 C 49.28 324.88 47.05 307.83 50 299 M 50 341 C 50.59 327.74 50.55 312.08 50 299 M 50 299 C 48.87 290.69 53.7 289.54 59 290 M 50 299 C 50.15 289.07 57.42 285.52 59 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 51px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Module</div></div></div></foreignObject><text x="110" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Module</text></switch></g></g><g><rect x="190" y="290" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 202.94 287.25 L 301.82 290.11 L 306.54 289.04 L 311.32 296.21 L 306.06 340.98 L 310.06 346.33 L 299.46 353.13 L 195.68 349.47 L 189.05 350.41 L 186.49 339.42 L 189.65 302.75 L 189.95 291.37 L 197.53 290.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 199 290 M 199 290 C 240.1 286.42 277.43 293.65 301 290 M 199 290 C 236.86 291.71 276.59 290.84 301 290 M 301 290 C 305.9 292.74 310.21 289.09 310 299 M 301 290 C 308.15 290.77 310.36 292.25 310 299 M 310 299 C 310.06 310.25 309.37 324.87 310 341 M 310 299 C 310.1 313.7 309.96 325.97 310 341 M 310 341 C 306.14 346.35 305.67 352.9 301 350 M 310 341 C 311.14 350.08 309.64 354.46 301 350 M 301 350 C 269.62 346.71 235.69 348.39 199 350 M 301 350 C 275.35 350.11 246.67 350.61 199 350 M 199 350 C 192.53 353.35 188.26 348.89 190 341 M 199 350 C 197.38 348.2 190.6 351.04 190 341 M 190 341 C 188.25 329.53 191.43 315.11 190 299 M 190 341 C 188.94 329 192.13 317.73 190 299 M 190 299 C 190.35 290.37 192.17 291.28 199 290 M 190 299 C 187.18 296.17 190.69 290.76 199 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 320px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CLI</div></div></div></foreignObject><text x="250" y="325" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">CLI</text></switch></g></g><g><path d="M 168.18 240 L 131.82 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 168.18 240 M 168.18 240 C 156.4 258.47 143.57 276.59 131.82 290 M 168.18 240 C 158.3 248.99 152.76 261.23 131.82 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 206.36 240 L 233.64 290" fill="none" stroke="none" pointer-events="stroke"/><path d="M 206.36 240 M 206.36 240 C 215.05 256.64 222.45 275.16 233.64 290 M 206.36 240 C 215.36 253.8 221.32 268.08 233.64 290" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 240 L 480 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 240 M 600 240 C 554.25 259.11 515.03 281.58 480 300 M 600 240 C 554.92 262.18 511.49 286.2 480 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 680 240 L 720 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 680 240 M 680 240 C 696.94 263.88 712.15 286.75 720 300 M 680 240 C 687.57 253.37 697.38 268.15 720 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="690" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 701.09 296.05 L 804.96 303.54 L 805.53 305.98 L 810.5 309.06 L 812.18 351.39 L 806.84 357.32 L 799.83 357.58 L 691.56 358.96 L 694.83 356.51 L 688.09 347.25 L 687.22 312.98 L 694.2 298.61 L 699.66 301.55" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 300 M 699 300 C 736.82 297.41 771.45 300.3 801 300 M 699 300 C 730.22 298.82 762.91 297.14 801 300 M 801 300 C 809.7 303.91 813.56 305.07 810 309 M 801 300 C 803.4 298.23 813.3 306.96 810 309 M 810 309 C 809.76 321.55 814.34 339.05 810 351 M 810 309 C 811.23 321.66 808.02 331.08 810 351 M 810 351 C 809.03 358.82 804.03 363.23 801 360 M 810 351 C 806.3 355.47 802.42 356.68 801 360 M 801 360 C 765.37 355.52 722.58 357.06 699 360 M 801 360 C 765.21 358.25 730.31 360.67 699 360 M 699 360 C 692.47 359.9 692.35 355.61 690 351 M 699 360 C 689.11 361.76 693.54 353.09 690 351 M 690 351 C 690.81 334.66 691.97 319.88 690 309 M 690 351 C 690.6 340.94 691.38 329.95 690 309 M 690 309 C 689.05 299.66 692.48 297.34 699 300 M 690 309 C 693.59 301.74 692.44 300.73 699 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Registry</div></div></div></foreignObject><text x="750" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Registry</text></switch></g></g><g><rect x="390" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 401.1 296.73 L 501.77 301.25 L 511.45 301.34 L 508.82 311.94 L 512.72 353.81 L 511.63 358.18 L 502.91 363.3 L 392.97 356.02 L 392.59 355.76 L 392.44 352.22 L 388.9 312 L 394.9 300.77 L 396.58 300.62" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 300 M 399 300 C 437.68 294.83 480.79 299.26 501 300 M 399 300 C 435.79 298.39 475.35 296.59 501 300 M 501 300 C 510.76 300.02 511.19 302.48 510 309 M 501 300 C 504.12 304.03 513.25 304.78 510 309 M 510 309 C 509.98 319.43 513.6 332.94 510 351 M 510 309 C 511.98 318.36 510.49 331.59 510 351 M 510 351 C 508.21 354.79 503.78 359.39 501 360 M 510 351 C 510.3 354.21 506.73 359.62 501 360 M 501 360 C 472.06 360.37 443.03 359.13 399 360 M 501 360 C 467.34 358.91 438.15 358.03 399 360 M 399 360 C 395.4 360.3 390.11 355.56 390 351 M 399 360 C 390.02 355.83 391.34 352.65 390 351 M 390 351 C 389.78 339.32 388.35 327.17 390 309 M 390 351 C 391.28 333.8 391.28 318.8 390 309 M 390 309 C 390.54 299.34 390.95 299.08 399 300 M 390 309 C 390.62 299.64 394.92 296.76 399 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.vitepress</div></div></div></foreignObject><text x="450" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">.vitepress</text></switch></g></g><g><rect x="840" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 851.1 297.41 L 956.58 298.96 L 959.38 304.7 L 957.15 306.82 L 963.26 356.22 L 958.41 359.03 L 948 361.03 L 844.37 361.08 L 840.35 355.02 L 838.79 349.2 L 840.58 311.01 L 845.6 302.92 L 851.49 299.69" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 849 300 M 849 300 C 888.54 296.33 932.13 302.31 951 300 M 849 300 C 874.97 302.03 900.99 300.11 951 300 M 951 300 C 953.83 296.13 958.81 299.89 960 309 M 951 300 C 954.84 300.63 963.2 302.6 960 309 M 960 309 C 960.21 325.71 962.87 343.64 960 351 M 960 309 C 958.73 319.06 958.95 328.09 960 351 M 960 351 C 957.39 358.76 953.54 363.56 951 360 M 960 351 C 964.29 352.95 961.04 362.56 951 360 M 951 360 C 916.35 357.21 880.69 361.2 849 360 M 951 360 C 923.47 359.58 895.99 359.39 849 360 M 849 360 C 840.32 360.7 837.88 355.51 840 351 M 849 360 C 840.94 359.1 839.15 361.42 840 351 M 840 351 C 838.75 335.57 842.72 317.65 840 309 M 840 351 C 837.95 339.07 841.18 324.44 840 309 M 840 309 C 842.02 299.01 839.42 300.83 849 300 M 840 309 C 837.65 306.74 847.39 302 849 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 841px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Scripts</div></div></div></foreignObject><text x="900" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Scripts</text></switch></g></g><g><rect x="540" y="300" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 551.1 298.09 L 653.39 296.68 L 657.31 300.06 L 663.48 309.7 L 655.79 358.63 L 655.2 359.88 L 651.09 358.76 L 545.78 358.14 L 546.11 354.27 L 543.13 354.17 L 542.26 310.02 L 538.3 305.07 L 548.4 298.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 300 M 549 300 C 568.99 297.84 592.66 297.36 651 300 M 549 300 C 580.54 301.6 613.42 299.56 651 300 M 651 300 C 654.89 300.24 656.44 305.3 660 309 M 651 300 C 655.56 297.23 663.15 300.42 660 309 M 660 309 C 662.11 323.59 663.81 329.54 660 351 M 660 309 C 657.81 315.76 659.74 324.59 660 351 M 660 351 C 656.58 354.73 653.3 359.73 651 360 M 660 351 C 659.08 360.88 656.16 356.31 651 360 M 651 360 C 623.04 362.05 601.14 363.27 549 360 M 651 360 C 625.6 360.24 603.83 360.75 549 360 M 549 360 C 543.24 361.1 543.64 355.46 540 351 M 549 360 C 541.86 362.36 536.95 360.98 540 351 M 540 351 C 537.71 340.22 539.1 324.94 540 309 M 540 351 C 540.31 340.34 538.76 330.09 540 309 M 540 309 C 543.5 306.69 545.89 302.57 549 300 M 540 309 C 543.87 304.64 540.67 298.03 549 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Src</div></div></div></foreignObject><text x="600" y="335" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Src</text></switch></g></g><g><path d="M 720 240 L 879.96 301.02" fill="none" stroke="none" pointer-events="stroke"/><path d="M 720 240 M 720 240 C 773.67 265.34 832.67 283.95 879.96 301.02 M 720 240 C 774.61 256.35 826.72 278.31 879.96 301.02" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 642.96 241.02 L 600 300" fill="none" stroke="none" pointer-events="stroke"/><path d="M 642.96 241.02 M 642.96 241.02 C 628.95 258.68 611.74 285.38 600 300 M 642.96 241.02 C 629.45 256.53 618.61 275.38 600 300" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="390" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 399.95 428.83 L 501.31 426.72 L 505.3 432.57 L 507.44 437.89 L 508.77 485.28 L 506.1 484.33 L 503.93 487.46 L 395.4 490.64 L 394.42 484.76 L 391.87 480.46 L 386.18 442.08 L 390.94 433.05 L 396.3 432.5" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 399 430 M 399 430 C 425.85 433.77 455.34 431 501 430 M 399 430 C 434.71 429.58 471.32 427.6 501 430 M 501 430 C 506.82 432.56 512.08 434.36 510 439 M 501 430 C 504.25 429.37 508.77 430.52 510 439 M 510 439 C 505.86 455.42 512.86 469.82 510 481 M 510 439 C 507.52 447.37 508.03 459.42 510 481 M 510 481 C 511.85 489.96 506.89 490.2 501 490 M 510 481 C 508.26 488.1 502.7 494.46 501 490 M 501 490 C 480.28 485.11 456.16 484.97 399 490 M 501 490 C 461.12 491.98 424.21 489.23 399 490 M 399 490 C 391.85 490.48 393.25 489.42 390 481 M 399 490 C 390.9 493.05 392.16 491.55 390 481 M 390 481 C 387.27 463.31 392.24 450.94 390 439 M 390 481 C 391.16 470.76 389.35 456.37 390 439 M 390 439 C 393.27 433.61 389.83 433.02 399 430 M 390 439 C 392.43 429.03 395.82 433.02 399 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 391px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Content</div></div></div></foreignObject><text x="450" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Content</text></switch></g></g><g><rect x="540" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 549.95 429.51 L 656.12 432.44 L 661.22 435.93 L 663.77 440.77 L 659.31 487.69 L 660.89 485.19 L 649.01 493.18 L 546.8 487.7 L 542.18 484.01 L 538.21 477.44 L 537.86 441.09 L 541.64 435.21 L 551.21 431.57" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 549 430 M 549 430 C 576.71 427.28 614.68 434.05 651 430 M 549 430 C 573.89 433.23 596.96 431.13 651 430 M 651 430 C 657.88 428.67 659.7 431.77 660 439 M 651 430 C 654.97 425.97 658.72 437.54 660 439 M 660 439 C 657.77 453.3 663.8 463.72 660 481 M 660 439 C 658.27 448.07 660.5 455.92 660 481 M 660 481 C 661.03 485.93 656.65 486.37 651 490 M 660 481 C 662.25 486.84 657.01 488.2 651 490 M 651 490 C 616.57 489.95 585.81 487.04 549 490 M 651 490 C 617.25 492.64 582.05 490.59 549 490 M 549 490 C 544.77 490.88 541.01 489.37 540 481 M 549 490 C 541.82 487.12 539.97 491.12 540 481 M 540 481 C 536.23 467.96 538.62 458.22 540 439 M 540 481 C 537.84 472.03 539.25 462.01 540 439 M 540 439 C 536.75 433.29 546.3 426.76 549 430 M 540 439 C 539.46 436.13 539.1 429.05 549 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Examples</div></div></div></foreignObject><text x="600" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Examples</text></switch></g></g><g><rect x="690" y="430" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 699.95 430.19 L 802.93 430.15 L 809.15 431.29 L 812.09 435.65 L 809.85 482.1 L 807.67 486.04 L 802.1 490.91 L 698.21 492.76 L 689.94 491.27 L 692.56 482.41 L 689.53 440.1 L 692.34 429.36 L 698.13 430.64" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 699 430 M 699 430 C 727.57 428.78 766.01 429.1 801 430 M 699 430 C 729.46 428.8 759.4 430.57 801 430 M 801 430 C 808.94 432.78 807.33 429.18 810 439 M 801 430 C 805.69 431.77 808.67 435.36 810 439 M 810 439 C 807.99 451.58 813.07 466.42 810 481 M 810 439 C 809.03 453.17 808.96 469.22 810 481 M 810 481 C 810.22 489.9 806.4 490.53 801 490 M 810 481 C 807.04 485.58 811.32 491.14 801 490 M 801 490 C 760.86 486.79 723.47 489.11 699 490 M 801 490 C 769.39 493.31 735.89 491.95 699 490 M 699 490 C 689.69 491.28 688.77 489.32 690 481 M 699 490 C 692.74 490.39 687.77 490.68 690 481 M 690 481 C 693.2 464.21 692.99 448.71 690 439 M 690 481 C 688.51 464.89 689.15 450.86 690 439 M 690 439 C 688.23 432.96 694.77 428.51 699 430 M 690 439 C 686.49 434.03 691.58 434.29 699 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 691px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">registry</div></div></div></foreignObject><text x="750" y="465" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">registry</text></switch></g></g><g><path d="M 576.96 361.98 L 450 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 576.96 361.98 M 576.96 361.98 C 533.45 385.11 497.44 408.23 450 430 M 576.96 361.98 C 539.05 380.88 502.21 400.23 450 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 360 L 600 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 600 360 M 600 360 C 603.56 379.92 598.31 404.08 600 430 M 600 360 C 601.27 385.21 600.16 408.6 600 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 630 360 L 750 430" fill="none" stroke="none" pointer-events="stroke"/><path d="M 630 360 M 630 360 C 670.37 388 709.62 404.55 750 430 M 630 360 C 657.71 378.84 687.61 395.7 750 430" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><rect x="620" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 629.96 563.24 L 731.63 560.16 L 737.13 559.39 L 743.23 566.28 L 738.96 615.66 L 735.64 615.96 L 730.53 621.26 L 627.56 620.39 L 621.16 616.4 L 616.24 607.74 L 618.53 566.42 L 625.94 563.65 L 629.67 558.7" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 629 560 M 629 560 C 656.81 560.4 683.85 555.92 731 560 M 629 560 C 651.47 563.15 673.63 561.52 731 560 M 731 560 C 736.69 557.84 742.9 566.63 740 569 M 731 560 C 737.47 558.61 737.28 559.56 740 569 M 740 569 C 740.07 576.18 742.27 589.52 740 611 M 740 569 C 741.66 580 741.5 595.74 740 611 M 740 611 C 741.36 619.04 737.57 617.22 731 620 M 740 611 C 738.45 617.05 733.26 620.73 731 620 M 731 620 C 687.84 620.1 653.39 624.8 629 620 M 731 620 C 701.07 621.52 669.41 619.64 629 620 M 629 620 C 621.48 616.43 620.14 617.98 620 611 M 629 620 C 620.88 619.94 620.7 617.72 620 611 M 620 611 C 621.63 599.64 620.9 581.08 620 569 M 620 611 C 618.84 602.4 621.77 590.99 620 569 M 620 569 C 619.73 561.95 621.92 559.38 629 560 M 620 569 C 616.11 560.36 626.53 563.63 629 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 621px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Default</div></div></div></foreignObject><text x="680" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">Default</text></switch></g></g><g><rect x="770" y="560" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 779.96 563.92 L 886.44 557.87 L 885.06 562.75 L 891.56 569.16 L 889.5 618.07 L 890.43 616.81 L 883.62 618.99 L 778.96 617.45 L 768.91 615.66 L 770.58 612.72 L 770.21 565.43 L 768.64 565.8 L 776.59 557.77" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 779 560 M 779 560 C 807.67 561.9 835.18 558.96 881 560 M 779 560 C 807.04 562.72 836.07 560.97 881 560 M 881 560 C 887.75 561.94 890.53 564.04 890 569 M 881 560 C 888.19 564.41 887.23 566.58 890 569 M 890 569 C 890.29 582.46 891.53 600.21 890 611 M 890 569 C 890.73 580.7 888.29 592.25 890 611 M 890 611 C 890.54 615.01 887.32 621.39 881 620 M 890 611 C 892.45 615.79 887.57 623.68 881 620 M 881 620 C 852.53 624.94 823.85 618.86 779 620 M 881 620 C 853.21 622.18 827.25 621 779 620 M 779 620 C 774.4 616.82 767.9 617.93 770 611 M 779 620 C 771.8 623.21 768.51 617.28 770 611 M 770 611 C 770.59 604.29 767.27 588.36 770 569 M 770 611 C 769.52 595.26 771.67 579.84 770 569 M 770 569 C 771.22 561.62 770.39 561.12 779 560 M 770 569 C 772.34 567.45 769.81 559.66 779 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 771px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 17px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">New York</div></div></div></foreignObject><text x="830" y="595" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="17px" text-anchor="middle">New York</text></switch></g></g><g><path d="M 750 490 L 680 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 729.16 515.32 707.32 534.64 680 560 M 750 490 C 723.62 515.42 696.43 540.14 680 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 750 490 L 830 560" fill="none" stroke="none" pointer-events="stroke"/><path d="M 750 490 M 750 490 C 775.7 512.59 800.1 532.31 830 560 M 750 490 C 768.36 507.76 790.47 525.95 830 560" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 130 160 L 150 180 L 130 200 L 110 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 130.96 159.32 L 151.55 181.88 L 132.95 201.3 L 111.19 178.56 L 132.76 159.2" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 130 160 M 130 160 C 141.25 170.02 144.24 175.85 150 180 M 130 160 C 137.22 166.57 143.96 173.08 150 180 M 150 180 C 141.6 184.98 137.73 187.53 130 200 M 150 180 C 145.08 184.97 138.01 191.82 130 200 M 130 200 C 122.23 190.48 113.83 183.99 110 180 M 130 200 C 127.5 194.95 120.34 192.8 110 180 M 110 180 C 120.33 175.37 124.02 160.18 130 160 M 110 180 C 114.64 174.43 122.4 166.17 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 111px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="130" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">1</text></switch></g></g><g><path d="M 390 280 L 410 300 L 390 320 L 370 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 280.68 L 413.17 297.31 L 388.8 320.02 L 367.84 296.32 L 393.84 276.02" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 280 M 390 280 C 392.86 281.8 399.3 285.11 410 300 M 390 280 C 398.23 285.44 403.23 294.35 410 300 M 410 300 C 404.9 302.91 394.88 310.89 390 320 M 410 300 C 403.21 305.94 401.29 310.73 390 320 M 390 320 C 381.37 312.98 374.6 303.52 370 300 M 390 320 C 386.03 315.59 377.88 306.97 370 300 M 370 300 C 376.99 295.11 382.06 283.74 390 280 M 370 300 C 377.31 294.77 381.08 287.28 390 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="390" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">3</text></switch></g></g><g><path d="M 540 280 L 560 300 L 540 320 L 520 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 281.36 L 559.98 303.03 L 536.73 323.38 L 516.17 299.2 L 536.38 278.44" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 280 M 540 280 C 543.07 285.29 551.22 295.35 560 300 M 540 280 C 545.13 284.08 553.27 290.18 560 300 M 560 300 C 554.55 307.88 547.45 308.57 540 320 M 560 300 C 556.67 305.62 551.33 309.38 540 320 M 540 320 C 537.74 312.22 525.79 307.28 520 300 M 540 320 C 535.3 316.71 532.64 310.85 520 300 M 520 300 C 527.33 289.38 539.07 281.92 540 280 M 520 300 C 528.25 291.33 534.01 286.23 540 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="540" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">4</text></switch></g></g><g><path d="M 690 280 L 710 300 L 690 320 L 670 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 280.33 L 711.82 300.75 L 689.14 317.31 L 669.35 298.55 L 690.26 283.52" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 280 M 690 280 C 699.97 285.24 702.05 295.69 710 300 M 690 280 C 697.35 285.26 702.54 289.72 710 300 M 710 300 C 703.23 307.55 700.52 311.95 690 320 M 710 300 C 702.11 306.63 697.42 315.82 690 320 M 690 320 C 683.07 317.32 685.05 315.71 670 300 M 690 320 C 681.21 311.72 675.51 306.66 670 300 M 670 300 C 679.84 292.1 682.66 286.68 690 280 M 670 300 C 674.92 293.4 680.65 288.8 690 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="690" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">5</text></switch></g></g><g><path d="M 840 280 L 860 300 L 840 320 L 820 300 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 840.96 281.01 L 858.63 298.46 L 837.07 320.67 L 817.67 301.43 L 840.8 277.93" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 840 280 M 840 280 C 846.17 284.73 853.98 289.92 860 300 M 840 280 C 843.45 283.89 851.78 289.56 860 300 M 860 300 C 852.88 304.52 853.1 309.63 840 320 M 860 300 C 854.77 306.31 846.66 310.47 840 320 M 840 320 C 834.63 312.57 827.44 303.48 820 300 M 840 320 C 834.48 312.04 826.28 309.75 820 300 M 820 300 C 826.18 298.36 831.67 292.86 840 280 M 820 300 C 826.66 293.17 834.39 286.95 840 280" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 300px; margin-left: 821px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6</div></div></div></foreignObject><text x="840" y="306" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">6</text></switch></g></g><g><path d="M 390 410 L 410 430 L 390 450 L 370 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 390.96 411.69 L 413.44 426.17 L 393 446.03 L 374 426.31 L 391.34 410.34" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 390 410 M 390 410 C 396.38 419.02 405.91 422.96 410 430 M 390 410 C 394.36 413.33 401.82 420.19 410 430 M 410 430 C 406.53 435.48 397.67 445.32 390 450 M 410 430 C 404.24 436.8 396.7 439.93 390 450 M 390 450 C 382.2 441.82 377.82 437.24 370 430 M 390 450 C 387.75 446.36 381.05 438.83 370 430 M 370 430 C 376.51 421.83 380.69 420.24 390 410 M 370 430 C 373.6 423.73 379.33 419.91 390 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">7</div></div></div></foreignObject><text x="390" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">7</text></switch></g></g><g><path d="M 540 410 L 560 430 L 540 450 L 520 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 540.96 412.37 L 560.25 431.89 L 540.92 449.39 L 522.33 429.19 L 541.88 412.76" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 540 410 M 540 410 C 550.58 418.51 549.84 425.19 560 430 M 540 410 C 544.46 416.76 551.06 420.82 560 430 M 560 430 C 556.18 432.45 550.25 443 540 450 M 560 430 C 553.7 437.28 550.74 439.39 540 450 M 540 450 C 533.77 445.07 528.21 433.01 520 430 M 540 450 C 533.02 442.68 527.81 433.91 520 430 M 520 430 C 526.84 423.3 537.71 417.62 540 410 M 520 430 C 525.34 424.3 533.07 418.86 540 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">8</div></div></div></foreignObject><text x="540" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">8</text></switch></g></g><g><path d="M 690 410 L 710 430 L 690 450 L 670 430 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 690.96 413.05 L 707.06 429.6 L 688.85 452.76 L 670.65 432.07 L 692.41 407.17" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 690 410 M 690 410 C 695.99 418 700.97 419.43 710 430 M 690 410 C 694.56 415.4 696.3 416.66 710 430 M 710 430 C 705.82 437.42 702.82 440.68 690 450 M 710 430 C 707.17 432.96 700.78 438.04 690 450 M 690 450 C 681.34 443.52 678.59 435.97 670 430 M 690 450 C 686.28 443.8 678.58 437.79 670 430 M 670 430 C 673.17 429.57 678.73 423.8 690 410 M 670 430 C 672.28 424.07 678.01 421.01 690 410" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 430px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">9</div></div></div></foreignObject><text x="690" y="436" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">9</text></switch></g></g><g><path d="M 620 540 L 640 560 L 620 580 L 600 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 620.96 536.41 L 638.68 563.03 L 622.71 581.48 L 597.3 559.83 L 623.49 542" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 620 540 M 620 540 C 622.4 543.78 626.82 554.69 640 560 M 620 540 C 625.56 548.27 633.58 555.92 640 560 M 640 560 C 631.12 565.35 629.98 574.04 620 580 M 640 560 C 631.3 567.93 626.06 574.96 620 580 M 620 580 C 610.48 576.02 609.36 565.5 600 560 M 620 580 C 614.82 574.43 606.11 565.96 600 560 M 600 560 C 603.84 555.31 614.76 549.36 620 540 M 600 560 C 608.96 551.2 614.68 544.92 620 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">10</div></div></div></foreignObject><text x="620" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">10</text></switch></g></g><g><path d="M 770 540 L 790 560 L 770 580 L 750 560 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 770.96 537.77 L 790.3 558.46 L 768.56 580.2 L 751.96 557.59 L 766.57 538.82" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 770 540 M 770 540 C 776.81 547.56 780.68 551.96 790 560 M 770 540 C 776.56 546.34 782.86 552.39 790 560 M 790 560 C 785.22 563.28 777.93 569.4 770 580 M 790 560 C 783.43 564.09 779.34 573.07 770 580 M 770 580 C 760.42 570.51 752.93 565.03 750 560 M 770 580 C 762.56 571.87 752.85 564.92 750 560 M 750 560 C 758.51 554.25 762.8 552.12 770 540 M 750 560 C 757.64 551.53 763.36 546.02 770 540" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 560px; margin-left: 751px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">11</div></div></div></foreignObject><text x="770" y="566" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">11</text></switch></g></g><g><path d="M 470 118.42 L 580 170.53" fill="none" stroke="none" pointer-events="stroke"/><path d="M 470 118.42 M 470 118.42 C 501.42 133.39 544.46 154.07 580 170.53 M 470 118.42 C 502.18 134.17 539.34 149.4 580 170.53" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/></g><g><path d="M 600 160 L 620 180 L 600 200 L 580 180 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.96 160 L 618.36 179.6 L 600.87 196.66 L 579.51 181.44 L 603.3 161.61" fill="rgb(255, 255, 255)" stroke="none" pointer-events="all"/><path d="M 600 160 M 600 160 C 606.66 162.31 607.37 170.88 620 180 M 600 160 C 608.12 166.01 614 173.71 620 180 M 620 180 C 615.25 185.95 602.3 193.21 600 200 M 620 180 C 613.74 185.46 607.25 191.27 600 200 M 600 200 C 597.8 197.73 592.22 187.75 580 180 M 600 200 C 592.76 191.27 587.11 183.88 580 180 M 580 180 C 586.66 173.64 593.04 166.36 600 160 M 580 180 C 586.38 175 588.14 173.12 600 160" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 180px; margin-left: 581px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 21px; font-family: Garamond; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="600" y="186" fill="rgb(0, 0, 0)" font-family="Garamond" font-size="21px" text-anchor="middle">2</text></switch></g></g></g></svg>
diff --git a/apps/www/src/public/r/styles/default/CardStats.json b/apps/www/src/public/r/styles/default/CardStats.json
index e736139c4..047952afe 100644
--- a/apps/www/src/public/r/styles/default/CardStats.json
+++ b/apps/www/src/public/r/styles/default/CardStats.json
@@ -7,13 +7,13 @@
   ],
   "registryDependencies": [
     "card",
-    "themes",
+    "registry-themes",
     "config"
   ],
   "files": [
     {
       "path": "example/CardStats.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars[isDark ? 'dark' : 'light'].primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": "CardStats.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/CardStats.json b/apps/www/src/public/r/styles/new-york/CardStats.json
index 5f3a947b8..c2b99982b 100644
--- a/apps/www/src/public/r/styles/new-york/CardStats.json
+++ b/apps/www/src/public/r/styles/new-york/CardStats.json
@@ -7,7 +7,7 @@
   ],
   "registryDependencies": [
     "card",
-    "themes",
+    "registry-themes",
     "config"
   ],
   "files": [
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index aa71417a7..b3c12abed 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -10353,13 +10353,13 @@
     ],
     "registryDependencies": [
       "card",
-      "themes",
+      "registry-themes",
       "config"
     ],
     "files": [
       {
         "path": "example/CardStats.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars[isDark ? 'dark' : 'light'].primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": "CardStats.vue"
       }
diff --git a/apps/www/src/registry/default/example/CardStats.vue b/apps/www/src/registry/default/example/CardStats.vue
index 789143d4b..b1aa2a1bc 100644
--- a/apps/www/src/registry/default/example/CardStats.vue
+++ b/apps/www/src/registry/default/example/CardStats.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'
-import { themes } from '@/registry/themes'
+import { themes } from '@/registry/registry-themes'
 import { useConfigStore } from '@/stores/config'
 import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useData } from 'vitepress'
@@ -78,7 +78,7 @@ const lineY = (d: Data) => d.revenue
           <VisXYContainer
             height="80px" :data="data" :style="{
               '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
+                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary
               })`,
             }"
           >
diff --git a/apps/www/src/registry/registry-themes.ts b/apps/www/src/registry/registry-themes.ts
index 5923eaf59..628f23aaa 100644
--- a/apps/www/src/registry/registry-themes.ts
+++ b/apps/www/src/registry/registry-themes.ts
@@ -176,3 +176,5 @@ export const themes: Registry = [
     },
   },
 ]
+
+export type Theme = Registry[number]
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index 3de802066..2a819b533 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -20,7 +20,7 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
 
 export function useConfigStore() {
   const { isDark } = useData()
-  const config = useStorage<Config>('config', {
+  const config = useStorage('config', {
     theme: 'zinc',
     radius: 0.5,
     style: styles[0].name,
@@ -47,8 +47,7 @@ export function useConfigStore() {
 
   const themePrimary = computed(() => {
     const t = themes.find(t => t.name === theme.value)
-    return `hsl(${
-      t?.cssVars[isDark ? 'dark' : 'light'].primary
+    return `hsl(${t?.cssVars?.[isDark ? 'dark' : 'light']?.primary
     })`
   })
 
diff --git a/apps/www/tsconfig.registry.json b/apps/www/tsconfig.registry.json
index 89c8cfecd..d7591dedf 100644
--- a/apps/www/tsconfig.registry.json
+++ b/apps/www/tsconfig.registry.json
@@ -9,5 +9,5 @@
     "declaration": false
   },
   "include": ["src/lib/**/*"],
-  "exclude": ["node_modules", "src/lib/registry/**/example/**/*"]
+  "exclude": ["node_modules", "registry/**/example/**/*"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 551d4e15d..97350e403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -246,9 +246,6 @@ importers:
 
   packages/cli:
     dependencies:
-      '@nuxt/kit':
-        specifier: ^3.14.159
-        version: 3.14.159(magicast@0.3.5)(rollup@4.27.3)
       '@unovue/detypes':
         specifier: ^0.8.4
         version: 0.8.4

From bb5d5b2a71ef85d003a9c1553791f576d2975090 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 23 Nov 2024 00:49:59 +0800
Subject: [PATCH 17/39] docs: block preview and codes

---
 .../theme/components/BlockContainer.vue       |  157 +-
 ...CopyButton.vue => BlockCopyCodeButton.vue} |    0
 .../theme/components/BlockPreview.vue         |   23 +-
 .../theme/components/BlockViewerCode.vue      |   70 +
 .../theme/components/BlockViewerFileTree.vue  |  150 +
 .../.vitepress/theme/components/Blocks.vue    |    1 +
 apps/www/__registry__/block.ts                | 1022 ++++++
 apps/www/__registry__/index.ts                | 2894 ++++++-----------
 apps/www/scripts/build-registry.ts            |   87 +-
 .../src/content/docs/components/sidebar.md    |    2 +-
 .../www/src/public/android-chrome-192x192.png |  Bin 5431 -> 9986 bytes
 .../www/src/public/android-chrome-512x512.png |  Bin 26015 -> 49091 bytes
 apps/www/src/public/apple-touch-icon.png      |  Bin 4552 -> 8952 bytes
 apps/www/src/public/favicon-16x16.png         |  Bin 246 -> 363 bytes
 apps/www/src/public/favicon-32x32.png         |  Bin 409 -> 628 bytes
 apps/www/src/public/favicon.ico               |  Bin 15406 -> 15406 bytes
 .../r/styles/default/AccordionDemo.json       |    2 +-
 .../public/r/styles/default/AlertDemo.json    |    2 +-
 .../styles/default/AlertDestructiveDemo.json  |    2 +-
 .../r/styles/default/AlertDialogDemo.json     |    2 +-
 .../default/AreaChartCustomTooltip.json       |    2 +-
 .../r/styles/default/AreaChartDemo.json       |    2 +-
 .../r/styles/default/AreaChartSparkline.json  |    2 +-
 .../r/styles/default/AspectRatioDemo.json     |    2 +-
 .../r/styles/default/Authentication01.json    |    2 +-
 .../r/styles/default/Authentication02.json    |    2 +-
 .../r/styles/default/Authentication03.json    |    2 +-
 .../r/styles/default/Authentication04.json    |    2 +-
 .../public/r/styles/default/AutoFormApi.json  |    2 +-
 .../r/styles/default/AutoFormArray.json       |    2 +-
 .../r/styles/default/AutoFormBasic.json       |    2 +-
 .../default/AutoFormConfirmPassword.json      |    2 +-
 .../r/styles/default/AutoFormControlled.json  |    2 +-
 .../styles/default/AutoFormDependencies.json  |    2 +-
 .../default/AutoFormInputWithoutLabel.json    |    2 +-
 .../r/styles/default/AutoFormSubObject.json   |    2 +-
 .../public/r/styles/default/AvatarDemo.json   |    2 +-
 .../public/r/styles/default/BadgeDemo.json    |    2 +-
 .../styles/default/BadgeDestructiveDemo.json  |    2 +-
 .../r/styles/default/BadgeOutlineDemo.json    |    2 +-
 .../r/styles/default/BadgeSecondaryDemo.json  |    2 +-
 .../styles/default/BarChartCustomTooltip.json |    2 +-
 .../public/r/styles/default/BarChartDemo.json |    2 +-
 .../r/styles/default/BarChartRounded.json     |    2 +-
 .../r/styles/default/BarChartStacked.json     |    2 +-
 .../r/styles/default/BreadcrumbDemo.json      |    2 +-
 .../r/styles/default/BreadcrumbDropdown.json  |    2 +-
 .../default/BreadcrumbEllipsisDemo.json       |    2 +-
 .../r/styles/default/BreadcrumbLinkDemo.json  |    2 +-
 .../styles/default/BreadcrumbResponsive.json  |    2 +-
 .../default/BreadcrumbSeparatorDemo.json      |    2 +-
 .../r/styles/default/ButtonAsChildDemo.json   |    2 +-
 .../public/r/styles/default/ButtonDemo.json   |    2 +-
 .../styles/default/ButtonDestructiveDemo.json |    2 +-
 .../r/styles/default/ButtonGhostDemo.json     |    2 +-
 .../r/styles/default/ButtonIconDemo.json      |    2 +-
 .../r/styles/default/ButtonLinkDemo.json      |    2 +-
 .../r/styles/default/ButtonLoadingDemo.json   |    2 +-
 .../r/styles/default/ButtonOutlineDemo.json   |    2 +-
 .../r/styles/default/ButtonSecondaryDemo.json |    2 +-
 .../r/styles/default/ButtonWithIconDemo.json  |    2 +-
 .../public/r/styles/default/CalendarDemo.json |    2 +-
 .../public/r/styles/default/CalendarForm.json |    2 +-
 .../r/styles/default/CalendarWithSelect.json  |    2 +-
 .../src/public/r/styles/default/CardChat.json |    2 +-
 .../src/public/r/styles/default/CardDemo.json |    2 +-
 .../public/r/styles/default/CardFormDemo.json |    2 +-
 .../public/r/styles/default/CardStats.json    |    2 +-
 .../public/r/styles/default/CardWithForm.json |    2 +-
 .../public/r/styles/default/CarouselApi.json  |    2 +-
 .../public/r/styles/default/CarouselDemo.json |    2 +-
 .../r/styles/default/CarouselOrientation.json |    2 +-
 .../r/styles/default/CarouselPlugin.json      |    2 +-
 .../public/r/styles/default/CarouselSize.json |    2 +-
 .../r/styles/default/CarouselSpacing.json     |    2 +-
 .../r/styles/default/CarouselThumbnails.json  |    2 +-
 .../public/r/styles/default/CheckboxDemo.json |    2 +-
 .../r/styles/default/CheckboxDisabled.json    |    2 +-
 .../styles/default/CheckboxFormMultiple.json  |    2 +-
 .../r/styles/default/CheckboxFormSingle.json  |    2 +-
 .../r/styles/default/CheckboxWithText.json    |    2 +-
 .../r/styles/default/CollapsibleDemo.json     |    2 +-
 .../public/r/styles/default/ComboboxDemo.json |    2 +-
 .../styles/default/ComboboxDropdownMenu.json  |    2 +-
 .../public/r/styles/default/ComboboxForm.json |    2 +-
 .../r/styles/default/ComboboxPopover.json     |    2 +-
 .../r/styles/default/ComboboxResponsive.json  |    2 +-
 .../public/r/styles/default/CommandDemo.json  |    2 +-
 .../r/styles/default/CommandDialogDemo.json   |    2 +-
 .../r/styles/default/ContextMenuDemo.json     |    2 +-
 .../r/styles/default/CustomChartTooltip.json  |    2 +-
 .../public/r/styles/default/Dashboard01.json  |    2 +-
 .../public/r/styles/default/Dashboard02.json  |    2 +-
 .../public/r/styles/default/Dashboard03.json  |    2 +-
 .../public/r/styles/default/Dashboard04.json  |    2 +-
 .../public/r/styles/default/Dashboard05.json  |    2 +-
 .../public/r/styles/default/Dashboard06.json  |    2 +-
 .../public/r/styles/default/Dashboard07.json  |    2 +-
 .../default/DataTableColumnPinningDemo.json   |    2 +-
 .../r/styles/default/DataTableDemo.json       |    2 +-
 .../r/styles/default/DataTableDemoColumn.json |    2 +-
 .../styles/default/DataTableReactiveDemo.json |    2 +-
 .../r/styles/default/DatePickerDemo.json      |    2 +-
 .../r/styles/default/DatePickerForm.json      |    2 +-
 .../DatePickerWithIndependentMonths.json      |    2 +-
 .../styles/default/DatePickerWithPresets.json |    2 +-
 .../r/styles/default/DatePickerWithRange.json |    2 +-
 .../default/DialogCustomCloseButton.json      |    2 +-
 .../public/r/styles/default/DialogDemo.json   |    2 +-
 .../public/r/styles/default/DialogForm.json   |    2 +-
 .../styles/default/DialogScrollBodyDemo.json  |    2 +-
 .../default/DialogScrollOverlayDemo.json      |    2 +-
 .../r/styles/default/DonutChartColor.json     |    2 +-
 .../default/DonutChartCustomTooltip.json      |    2 +-
 .../r/styles/default/DonutChartDemo.json      |    2 +-
 .../r/styles/default/DonutChartPie.json       |    2 +-
 .../public/r/styles/default/DrawerDemo.json   |    2 +-
 .../public/r/styles/default/DrawerDialog.json |    2 +-
 .../default/DropdownMenuCheckboxes.json       |    2 +-
 .../r/styles/default/DropdownMenuDemo.json    |    2 +-
 .../default/DropdownMenuRadioGroup.json       |    2 +-
 .../r/styles/default/HoverCardDemo.json       |    2 +-
 .../public/r/styles/default/InputDemo.json    |    2 +-
 .../r/styles/default/InputDisabled.json       |    2 +-
 .../public/r/styles/default/InputFile.json    |    2 +-
 .../public/r/styles/default/InputForm.json    |    2 +-
 .../styles/default/InputFormAutoAnimate.json  |    2 +-
 .../r/styles/default/InputWithButton.json     |    2 +-
 .../r/styles/default/InputWithIcon.json       |    2 +-
 .../r/styles/default/InputWithLabel.json      |    2 +-
 .../public/r/styles/default/LabelDemo.json    |    2 +-
 .../default/LineChartCustomTooltip.json       |    2 +-
 .../r/styles/default/LineChartDemo.json       |    2 +-
 .../r/styles/default/LineChartSparkline.json  |    2 +-
 .../public/r/styles/default/MenubarDemo.json  |    2 +-
 .../r/styles/default/NavigationMenuDemo.json  |    2 +-
 .../r/styles/default/NumberFieldCurrency.json |    2 +-
 .../r/styles/default/NumberFieldDecimal.json  |    2 +-
 .../r/styles/default/NumberFieldDemo.json     |    2 +-
 .../r/styles/default/NumberFieldDisabled.json |    2 +-
 .../r/styles/default/NumberFieldForm.json     |    2 +-
 .../styles/default/NumberFieldPercentage.json |    2 +-
 .../r/styles/default/PaginationDemo.json      |    2 +-
 .../r/styles/default/PinInputControlled.json  |    2 +-
 .../public/r/styles/default/PinInputDemo.json |    2 +-
 .../r/styles/default/PinInputDisabled.json    |    2 +-
 .../r/styles/default/PinInputFormDemo.json    |    2 +-
 .../styles/default/PinInputSeparatorDemo.json |    2 +-
 .../public/r/styles/default/PopoverDemo.json  |    2 +-
 .../public/r/styles/default/ProgressDemo.json |    2 +-
 .../r/styles/default/RadioGroupDemo.json      |    2 +-
 .../r/styles/default/RadioGroupForm.json      |    2 +-
 .../r/styles/default/RangeCalendarDemo.json   |    2 +-
 .../r/styles/default/ResizableDemo.json       |    2 +-
 .../r/styles/default/ResizableHandleDemo.json |    2 +-
 .../styles/default/ResizableVerticalDemo.json |    2 +-
 .../r/styles/default/ScrollAreaDemo.json      |    2 +-
 .../default/ScrollAreaHorizontalDemo.json     |    2 +-
 .../public/r/styles/default/SelectDemo.json   |    2 +-
 .../public/r/styles/default/SelectForm.json   |    2 +-
 .../r/styles/default/SelectScrollable.json    |    2 +-
 .../r/styles/default/SeparatorDemo.json       |    2 +-
 .../public/r/styles/default/SheetDemo.json    |    2 +-
 .../r/styles/default/SheetSideDemo.json       |    2 +-
 .../public/r/styles/default/Sidebar01.json    |    2 +-
 .../public/r/styles/default/Sidebar02.json    |   42 +
 .../public/r/styles/default/Sidebar07.json    |    4 +-
 .../public/r/styles/default/SkeletonCard.json |    2 +-
 .../public/r/styles/default/SkeletonDemo.json |    2 +-
 .../public/r/styles/default/SliderDemo.json   |    2 +-
 .../public/r/styles/default/SliderForm.json   |    2 +-
 .../public/r/styles/default/SonnerDemo.json   |    2 +-
 .../r/styles/default/SonnerWithDialog.json    |    2 +-
 .../public/r/styles/default/StepperDemo.json  |    2 +-
 .../public/r/styles/default/StepperForm.json  |    2 +-
 .../r/styles/default/StepperHorizental.json   |    2 +-
 .../r/styles/default/StepperVertical.json     |    2 +-
 .../public/r/styles/default/SwitchDemo.json   |    2 +-
 .../public/r/styles/default/SwitchForm.json   |    2 +-
 .../public/r/styles/default/TableDemo.json    |    2 +-
 .../src/public/r/styles/default/TabsDemo.json |    2 +-
 .../r/styles/default/TabsVerticalDemo.json    |    2 +-
 .../styles/default/TagsInputComboboxDemo.json |    2 +-
 .../r/styles/default/TagsInputDemo.json       |    2 +-
 .../r/styles/default/TagsInputFormDemo.json   |    2 +-
 .../public/r/styles/default/TextareaDemo.json |    2 +-
 .../r/styles/default/TextareaDisabled.json    |    2 +-
 .../public/r/styles/default/TextareaForm.json |    2 +-
 .../r/styles/default/TextareaWithButton.json  |    2 +-
 .../r/styles/default/TextareaWithLabel.json   |    2 +-
 .../r/styles/default/TextareaWithText.json    |    2 +-
 .../public/r/styles/default/ToastDemo.json    |    2 +-
 .../r/styles/default/ToastDestructive.json    |    2 +-
 .../public/r/styles/default/ToastSimple.json  |    2 +-
 .../r/styles/default/ToastWithAction.json     |    2 +-
 .../r/styles/default/ToastWithTitle.json      |    2 +-
 .../public/r/styles/default/ToggleDemo.json   |    2 +-
 .../r/styles/default/ToggleDisabledDemo.json  |    2 +-
 .../r/styles/default/ToggleGroupDemo.json     |    2 +-
 .../default/ToggleGroupDisabledDemo.json      |    2 +-
 .../styles/default/ToggleGroupLargeDemo.json  |    2 +-
 .../default/ToggleGroupOutlineDemo.json       |    2 +-
 .../styles/default/ToggleGroupSingleDemo.json |    2 +-
 .../styles/default/ToggleGroupSmallDemo.json  |    2 +-
 .../r/styles/default/ToggleItalicDemo.json    |    2 +-
 .../default/ToggleItalicWithTextDemo.json     |    2 +-
 .../r/styles/default/ToggleLargeDemo.json     |    2 +-
 .../r/styles/default/ToggleSmallDemo.json     |    2 +-
 .../public/r/styles/default/TooltipDemo.json  |    2 +-
 .../styles/default/TypographyBlockquote.json  |    2 +-
 .../r/styles/default/TypographyDemo.json      |    2 +-
 .../public/r/styles/default/TypographyH1.json |    2 +-
 .../public/r/styles/default/TypographyH2.json |    2 +-
 .../public/r/styles/default/TypographyH3.json |    2 +-
 .../public/r/styles/default/TypographyH4.json |    2 +-
 .../styles/default/TypographyInlineCode.json  |    2 +-
 .../r/styles/default/TypographyLarge.json     |    2 +-
 .../r/styles/default/TypographyLead.json      |    2 +-
 .../r/styles/default/TypographyList.json      |    2 +-
 .../r/styles/default/TypographyMuted.json     |    2 +-
 .../public/r/styles/default/TypographyP.json  |    2 +-
 .../r/styles/default/TypographySmall.json     |    2 +-
 .../r/styles/default/TypographyTable.json     |    2 +-
 .../r/styles/default/VCalendarDemo.json       |    2 +-
 .../r/styles/default/VDatePickerDemo.json     |    2 +-
 .../r/styles/default/VDatePickerForm.json     |    2 +-
 .../default/VDatePickerWithPresets.json       |    2 +-
 .../styles/default/VDatePickerWithRange.json  |    2 +-
 .../r/styles/default/VDateTimePickerDemo.json |    2 +-
 .../styles/default/VRangePickerWithSlot.json  |    2 +-
 .../src/public/r/styles/default/sidebar.json  |    2 +-
 .../src/public/r/styles/default/toggle.json   |    2 +-
 .../r/styles/new-york/AccordionDemo.json      |    2 +-
 .../public/r/styles/new-york/AlertDemo.json   |    2 +-
 .../styles/new-york/AlertDestructiveDemo.json |    2 +-
 .../r/styles/new-york/AlertDialogDemo.json    |    2 +-
 .../new-york/AreaChartCustomTooltip.json      |    2 +-
 .../r/styles/new-york/AreaChartDemo.json      |    2 +-
 .../r/styles/new-york/AreaChartSparkline.json |    2 +-
 .../r/styles/new-york/AspectRatioDemo.json    |    2 +-
 .../r/styles/new-york/Authentication01.json   |    2 +-
 .../r/styles/new-york/Authentication02.json   |    2 +-
 .../r/styles/new-york/Authentication03.json   |    2 +-
 .../r/styles/new-york/Authentication04.json   |    2 +-
 .../public/r/styles/new-york/AutoFormApi.json |    2 +-
 .../r/styles/new-york/AutoFormArray.json      |    2 +-
 .../r/styles/new-york/AutoFormBasic.json      |    2 +-
 .../new-york/AutoFormConfirmPassword.json     |    2 +-
 .../r/styles/new-york/AutoFormControlled.json |    2 +-
 .../styles/new-york/AutoFormDependencies.json |    2 +-
 .../new-york/AutoFormInputWithoutLabel.json   |    2 +-
 .../r/styles/new-york/AutoFormSubObject.json  |    2 +-
 .../public/r/styles/new-york/AvatarDemo.json  |    2 +-
 .../public/r/styles/new-york/BadgeDemo.json   |    2 +-
 .../styles/new-york/BadgeDestructiveDemo.json |    2 +-
 .../r/styles/new-york/BadgeOutlineDemo.json   |    2 +-
 .../r/styles/new-york/BadgeSecondaryDemo.json |    2 +-
 .../new-york/BarChartCustomTooltip.json       |    2 +-
 .../r/styles/new-york/BarChartDemo.json       |    2 +-
 .../r/styles/new-york/BarChartRounded.json    |    2 +-
 .../r/styles/new-york/BarChartStacked.json    |    2 +-
 .../r/styles/new-york/BreadcrumbDemo.json     |    2 +-
 .../r/styles/new-york/BreadcrumbDropdown.json |    2 +-
 .../new-york/BreadcrumbEllipsisDemo.json      |    2 +-
 .../r/styles/new-york/BreadcrumbLinkDemo.json |    2 +-
 .../styles/new-york/BreadcrumbResponsive.json |    2 +-
 .../new-york/BreadcrumbSeparatorDemo.json     |    2 +-
 .../r/styles/new-york/ButtonAsChildDemo.json  |    2 +-
 .../public/r/styles/new-york/ButtonDemo.json  |    2 +-
 .../new-york/ButtonDestructiveDemo.json       |    2 +-
 .../r/styles/new-york/ButtonGhostDemo.json    |    2 +-
 .../r/styles/new-york/ButtonIconDemo.json     |    2 +-
 .../r/styles/new-york/ButtonLinkDemo.json     |    2 +-
 .../r/styles/new-york/ButtonLoadingDemo.json  |    2 +-
 .../r/styles/new-york/ButtonOutlineDemo.json  |    2 +-
 .../styles/new-york/ButtonSecondaryDemo.json  |    2 +-
 .../r/styles/new-york/ButtonWithIconDemo.json |    2 +-
 .../r/styles/new-york/CalendarDemo.json       |    2 +-
 .../r/styles/new-york/CalendarForm.json       |    2 +-
 .../r/styles/new-york/CalendarWithSelect.json |    2 +-
 .../public/r/styles/new-york/CardChat.json    |    2 +-
 .../public/r/styles/new-york/CardDemo.json    |    2 +-
 .../r/styles/new-york/CardFormDemo.json       |    2 +-
 .../public/r/styles/new-york/CardStats.json   |    2 +-
 .../r/styles/new-york/CardWithForm.json       |    2 +-
 .../public/r/styles/new-york/CarouselApi.json |    2 +-
 .../r/styles/new-york/CarouselDemo.json       |    2 +-
 .../styles/new-york/CarouselOrientation.json  |    2 +-
 .../r/styles/new-york/CarouselPlugin.json     |    2 +-
 .../r/styles/new-york/CarouselSize.json       |    2 +-
 .../r/styles/new-york/CarouselSpacing.json    |    2 +-
 .../r/styles/new-york/CarouselThumbnails.json |    2 +-
 .../r/styles/new-york/CheckboxDemo.json       |    2 +-
 .../r/styles/new-york/CheckboxDisabled.json   |    2 +-
 .../styles/new-york/CheckboxFormMultiple.json |    2 +-
 .../r/styles/new-york/CheckboxFormSingle.json |    2 +-
 .../r/styles/new-york/CheckboxWithText.json   |    2 +-
 .../r/styles/new-york/CollapsibleDemo.json    |    2 +-
 .../r/styles/new-york/ComboboxDemo.json       |    2 +-
 .../styles/new-york/ComboboxDropdownMenu.json |    2 +-
 .../r/styles/new-york/ComboboxForm.json       |    2 +-
 .../r/styles/new-york/ComboboxPopover.json    |    2 +-
 .../r/styles/new-york/ComboboxResponsive.json |    2 +-
 .../public/r/styles/new-york/CommandDemo.json |    2 +-
 .../r/styles/new-york/CommandDialogDemo.json  |    2 +-
 .../r/styles/new-york/ContextMenuDemo.json    |    2 +-
 .../r/styles/new-york/CustomChartTooltip.json |    2 +-
 .../public/r/styles/new-york/Dashboard01.json |    2 +-
 .../public/r/styles/new-york/Dashboard02.json |    2 +-
 .../public/r/styles/new-york/Dashboard03.json |    2 +-
 .../public/r/styles/new-york/Dashboard04.json |    2 +-
 .../public/r/styles/new-york/Dashboard05.json |    2 +-
 .../public/r/styles/new-york/Dashboard06.json |    2 +-
 .../public/r/styles/new-york/Dashboard07.json |    2 +-
 .../new-york/DataTableColumnPinningDemo.json  |    2 +-
 .../r/styles/new-york/DataTableDemo.json      |    2 +-
 .../styles/new-york/DataTableDemoColumn.json  |    2 +-
 .../new-york/DataTableReactiveDemo.json       |    2 +-
 .../r/styles/new-york/DatePickerDemo.json     |    2 +-
 .../r/styles/new-york/DatePickerForm.json     |    2 +-
 .../DatePickerWithIndependentMonths.json      |    2 +-
 .../new-york/DatePickerWithPresets.json       |    2 +-
 .../styles/new-york/DatePickerWithRange.json  |    2 +-
 .../new-york/DialogCustomCloseButton.json     |    2 +-
 .../public/r/styles/new-york/DialogDemo.json  |    2 +-
 .../public/r/styles/new-york/DialogForm.json  |    2 +-
 .../styles/new-york/DialogScrollBodyDemo.json |    2 +-
 .../new-york/DialogScrollOverlayDemo.json     |    2 +-
 .../r/styles/new-york/DonutChartColor.json    |    2 +-
 .../new-york/DonutChartCustomTooltip.json     |    2 +-
 .../r/styles/new-york/DonutChartDemo.json     |    2 +-
 .../r/styles/new-york/DonutChartPie.json      |    2 +-
 .../public/r/styles/new-york/DrawerDemo.json  |    2 +-
 .../r/styles/new-york/DrawerDialog.json       |    2 +-
 .../new-york/DropdownMenuCheckboxes.json      |    2 +-
 .../r/styles/new-york/DropdownMenuDemo.json   |    2 +-
 .../new-york/DropdownMenuRadioGroup.json      |    2 +-
 .../r/styles/new-york/HoverCardDemo.json      |    2 +-
 .../public/r/styles/new-york/InputDemo.json   |    2 +-
 .../r/styles/new-york/InputDisabled.json      |    2 +-
 .../public/r/styles/new-york/InputFile.json   |    2 +-
 .../public/r/styles/new-york/InputForm.json   |    2 +-
 .../styles/new-york/InputFormAutoAnimate.json |    2 +-
 .../r/styles/new-york/InputWithButton.json    |    2 +-
 .../r/styles/new-york/InputWithIcon.json      |    2 +-
 .../r/styles/new-york/InputWithLabel.json     |    2 +-
 .../public/r/styles/new-york/LabelDemo.json   |    2 +-
 .../new-york/LineChartCustomTooltip.json      |    2 +-
 .../r/styles/new-york/LineChartDemo.json      |    2 +-
 .../r/styles/new-york/LineChartSparkline.json |    2 +-
 .../public/r/styles/new-york/MenubarDemo.json |    2 +-
 .../r/styles/new-york/NavigationMenuDemo.json |    2 +-
 .../styles/new-york/NumberFieldCurrency.json  |    2 +-
 .../r/styles/new-york/NumberFieldDecimal.json |    2 +-
 .../r/styles/new-york/NumberFieldDemo.json    |    2 +-
 .../styles/new-york/NumberFieldDisabled.json  |    2 +-
 .../r/styles/new-york/NumberFieldForm.json    |    2 +-
 .../new-york/NumberFieldPercentage.json       |    2 +-
 .../r/styles/new-york/PaginationDemo.json     |    2 +-
 .../r/styles/new-york/PinInputControlled.json |    2 +-
 .../r/styles/new-york/PinInputDemo.json       |    2 +-
 .../r/styles/new-york/PinInputDisabled.json   |    2 +-
 .../r/styles/new-york/PinInputFormDemo.json   |    2 +-
 .../new-york/PinInputSeparatorDemo.json       |    2 +-
 .../public/r/styles/new-york/PopoverDemo.json |    2 +-
 .../r/styles/new-york/ProgressDemo.json       |    2 +-
 .../r/styles/new-york/RadioGroupDemo.json     |    2 +-
 .../r/styles/new-york/RadioGroupForm.json     |    2 +-
 .../r/styles/new-york/RangeCalendarDemo.json  |    2 +-
 .../r/styles/new-york/ResizableDemo.json      |    2 +-
 .../styles/new-york/ResizableHandleDemo.json  |    2 +-
 .../new-york/ResizableVerticalDemo.json       |    2 +-
 .../r/styles/new-york/ScrollAreaDemo.json     |    2 +-
 .../new-york/ScrollAreaHorizontalDemo.json    |    2 +-
 .../public/r/styles/new-york/SelectDemo.json  |    2 +-
 .../public/r/styles/new-york/SelectForm.json  |    2 +-
 .../r/styles/new-york/SelectScrollable.json   |    2 +-
 .../r/styles/new-york/SeparatorDemo.json      |    2 +-
 .../public/r/styles/new-york/SheetDemo.json   |    2 +-
 .../r/styles/new-york/SheetSideDemo.json      |    2 +-
 .../public/r/styles/new-york/Sidebar01.json   |    2 +-
 .../public/r/styles/new-york/Sidebar02.json   |   42 +
 .../public/r/styles/new-york/Sidebar07.json   |    4 +-
 .../r/styles/new-york/SkeletonCard.json       |    2 +-
 .../r/styles/new-york/SkeletonDemo.json       |    2 +-
 .../public/r/styles/new-york/SliderDemo.json  |    2 +-
 .../public/r/styles/new-york/SliderForm.json  |    2 +-
 .../public/r/styles/new-york/SonnerDemo.json  |    2 +-
 .../r/styles/new-york/SonnerWithDialog.json   |    2 +-
 .../public/r/styles/new-york/StepperDemo.json |    2 +-
 .../public/r/styles/new-york/StepperForm.json |    2 +-
 .../r/styles/new-york/StepperHorizental.json  |    2 +-
 .../r/styles/new-york/StepperVertical.json    |    2 +-
 .../public/r/styles/new-york/SwitchDemo.json  |    2 +-
 .../public/r/styles/new-york/SwitchForm.json  |    2 +-
 .../public/r/styles/new-york/TableDemo.json   |    2 +-
 .../public/r/styles/new-york/TabsDemo.json    |    2 +-
 .../r/styles/new-york/TabsVerticalDemo.json   |    2 +-
 .../new-york/TagsInputComboboxDemo.json       |    2 +-
 .../r/styles/new-york/TagsInputDemo.json      |    2 +-
 .../r/styles/new-york/TagsInputFormDemo.json  |    2 +-
 .../r/styles/new-york/TextareaDemo.json       |    2 +-
 .../r/styles/new-york/TextareaDisabled.json   |    2 +-
 .../r/styles/new-york/TextareaForm.json       |    2 +-
 .../r/styles/new-york/TextareaWithButton.json |    2 +-
 .../r/styles/new-york/TextareaWithLabel.json  |    2 +-
 .../r/styles/new-york/TextareaWithText.json   |    2 +-
 .../public/r/styles/new-york/ToastDemo.json   |    2 +-
 .../r/styles/new-york/ToastDestructive.json   |    2 +-
 .../public/r/styles/new-york/ToastSimple.json |    2 +-
 .../r/styles/new-york/ToastWithAction.json    |    2 +-
 .../r/styles/new-york/ToastWithTitle.json     |    2 +-
 .../public/r/styles/new-york/ToggleDemo.json  |    2 +-
 .../r/styles/new-york/ToggleDisabledDemo.json |    2 +-
 .../r/styles/new-york/ToggleGroupDemo.json    |    2 +-
 .../new-york/ToggleGroupDisabledDemo.json     |    2 +-
 .../styles/new-york/ToggleGroupLargeDemo.json |    2 +-
 .../new-york/ToggleGroupOutlineDemo.json      |    2 +-
 .../new-york/ToggleGroupSingleDemo.json       |    2 +-
 .../styles/new-york/ToggleGroupSmallDemo.json |    2 +-
 .../r/styles/new-york/ToggleItalicDemo.json   |    2 +-
 .../new-york/ToggleItalicWithTextDemo.json    |    2 +-
 .../r/styles/new-york/ToggleLargeDemo.json    |    2 +-
 .../r/styles/new-york/ToggleSmallDemo.json    |    2 +-
 .../public/r/styles/new-york/TooltipDemo.json |    2 +-
 .../styles/new-york/TypographyBlockquote.json |    2 +-
 .../r/styles/new-york/TypographyDemo.json     |    2 +-
 .../r/styles/new-york/TypographyH1.json       |    2 +-
 .../r/styles/new-york/TypographyH2.json       |    2 +-
 .../r/styles/new-york/TypographyH3.json       |    2 +-
 .../r/styles/new-york/TypographyH4.json       |    2 +-
 .../styles/new-york/TypographyInlineCode.json |    2 +-
 .../r/styles/new-york/TypographyLarge.json    |    2 +-
 .../r/styles/new-york/TypographyLead.json     |    2 +-
 .../r/styles/new-york/TypographyList.json     |    2 +-
 .../r/styles/new-york/TypographyMuted.json    |    2 +-
 .../public/r/styles/new-york/TypographyP.json |    2 +-
 .../r/styles/new-york/TypographySmall.json    |    2 +-
 .../r/styles/new-york/TypographyTable.json    |    2 +-
 .../r/styles/new-york/VCalendarDemo.json      |    2 +-
 .../r/styles/new-york/VDatePickerDemo.json    |    2 +-
 .../r/styles/new-york/VDatePickerForm.json    |    2 +-
 .../new-york/VDatePickerWithPresets.json      |    2 +-
 .../styles/new-york/VDatePickerWithRange.json |    2 +-
 .../styles/new-york/VDateTimePickerDemo.json  |    2 +-
 .../styles/new-york/VRangePickerWithSlot.json |    2 +-
 .../src/public/r/styles/new-york/sidebar.json |    4 +-
 .../src/public/r/styles/new-york/toggle.json  |    2 +-
 apps/www/src/public/r/temp.json               |  950 +++---
 apps/www/src/registry/crawl-content.ts        |   41 +-
 .../block/Sidebar02/components/AppSidebar.vue |  212 ++
 .../block/Sidebar02/components/SearchForm.vue |   27 +
 .../Sidebar02/components/VersionSwitcher.vue  |   60 +
 .../registry/default/block/Sidebar02/page.vue |   54 +
 .../registry/default/block/Sidebar07/page.vue |    2 +-
 .../src/registry/default/ui/sidebar/index.ts  |    8 +
 .../src/registry/default/ui/toggle/index.ts   |    8 +-
 .../block/Sidebar02/components/AppSidebar.vue |  212 ++
 .../block/Sidebar02/components/SearchForm.vue |   27 +
 .../Sidebar02/components/VersionSwitcher.vue  |   60 +
 .../new-york/block/Sidebar02/page.vue         |   54 +
 .../new-york/block/Sidebar07/page.vue         |    2 +-
 .../registry/new-york/ui/sidebar/Sidebar.vue  |    9 +-
 .../src/registry/new-york/ui/sidebar/index.ts |    8 +
 .../src/registry/new-york/ui/toggle/index.ts  |    8 +-
 apps/www/src/registry/schema.ts               |    4 +
 eslint.config.js                              |    1 +
 467 files changed, 4179 insertions(+), 2924 deletions(-)
 rename apps/www/.vitepress/theme/components/{BlockCopyButton.vue => BlockCopyCodeButton.vue} (100%)
 create mode 100644 apps/www/.vitepress/theme/components/BlockViewerCode.vue
 create mode 100644 apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
 create mode 100644 apps/www/__registry__/block.ts
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar02.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar02.json
 create mode 100644 apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar02/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar02/page.vue

diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 4fcf5885b..358b2b196 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -1,31 +1,33 @@
 <script setup lang="ts">
-import { Badge } from '@/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import type { Block } from '@/registry/schema'
+import Button from '@/registry/new-york/ui/button/Button.vue'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
 import { Separator } from '@/registry/new-york/ui/separator'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import { useConfigStore } from '@/stores/config'
-import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import MagicString from 'magic-string'
 
-import { reactive, ref, watch } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { Check, Fullscreen, Monitor, Smartphone, Tablet, Terminal } from 'lucide-vue-next'
+import MagicString from 'magic-string'
+import { computed, reactive, ref, watch } from 'vue'
 import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import { Index } from '../../../__registry__'
+import { Index } from '../../../__registry__/block'
 import { highlight } from '../config/shiki'
-import BlockCopyButton from './BlockCopyButton.vue'
 import BlockPreview from './BlockPreview.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
+import BlockViewerCode from './BlockViewerCode.vue'
 
 const props = defineProps<{
   name: string
 }>()
 
 const { style, codeConfig } = useConfigStore()
+const { copied, copy } = useClipboard()
 
 const isLoading = ref(true)
 const tabValue = ref('preview')
 const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
+const componentRegistry = ref<Block>()
 
 const rawString = ref('')
 const codeHtml = ref('')
@@ -35,6 +37,19 @@ const metadata = reactive({
   containerClass: null as string | null,
 })
 
+const iframeURL = computed(() => {
+  // @ts-expect-error env available in import.meta
+  if (import.meta.env.SSR)
+    return ''
+
+  const url = new URL(`${window.location.origin}/blocks/renderer`)
+  url.searchParams.append('name', props.name)
+  url.searchParams.append('styles', 'new-york')
+  url.searchParams.append('containerClass', metadata.containerClass ?? '')
+
+  return url.href
+})
+
 function removeScript(code: string) {
   const s = new MagicString(code)
   const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
@@ -58,9 +73,11 @@ function transformImportPath(code: string) {
 watch([style, codeConfig], async () => {
   try {
     const styleIndex = Index[style.value]
-    const componentRegistry = styleIndex[props.name]
+    componentRegistry.value = styleIndex[props.name]
+    if (!componentRegistry.value)
+      return
 
-    const rawString = await componentRegistry.raw()
+    const rawString = await componentRegistry.value.raw()
     if (!metadata.description) {
       const { descriptor } = parse(rawString)
       const ast = compileScript(descriptor, { id: '' })
@@ -91,48 +108,47 @@ watch([style, codeConfig], async () => {
   <Tabs
     :id="name"
     v-model="tabValue"
-    class="relative grid w-full scroll-m-20 gap-4"
+    class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
     :style=" {
-      '--container-height': metadata.iframeHeight ?? '600px',
+      '--height': metadata.iframeHeight ?? '600px',
     }"
   >
     <div class="flex flex-col items-center gap-4 sm:flex-row">
-      <div class="flex items-center gap-2">
-        <TabsList class="hidden sm:flex">
-          <TabsTrigger value="preview">
+      <div class="hidden items-center gap-2 sm:flex">
+        <TabsList class="h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]">
+          <TabsTrigger class="h-[1.45rem] rounded-sm px-2 text-xs" value="preview">
             Preview
           </TabsTrigger>
-          <TabsTrigger value="code">
+          <TabsTrigger class="h-[1.45rem] rounded-sm px-2 text-xs" value="code">
             Code
           </TabsTrigger>
         </TabsList>
-        <div class="hidden items-center gap-2 sm:flex">
-          <Separator
-            orientation="vertical"
-            class="mx-2 hidden h-4 md:flex"
-          />
-          <div class="flex items-center gap-2">
-            <a :href="`#${name}`">
-              <Badge variant="outline">{{ name }}</Badge>
-            </a>
-            <Popover>
-              <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-                <Info class="h-3.5 w-3.5" />
-                <span class="sr-only">Block description</span>
-              </PopoverTrigger>
-              <PopoverContent
-                side="right"
-                :side-offset="10"
-                class="text-sm"
-              >
-                {{ metadata.description }}
-              </PopoverContent>
-            </Popover>
-          </div>
+
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <div class="text-sm font-medium underline-offset-2 hover:underline">
+          <a :href="`#${name}`">{{ metadata.description }}</a>
         </div>
       </div>
+
       <div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
-        <div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
+        <Button
+          variant="ghost"
+          class="hidden h-7 w-7 rounded-md border bg-transparent shadow-none md:flex lg:w-auto"
+          size="sm"
+          @click="copy(`npx shadcn-vue@latest add ${name}`)"
+        >
+          <Check v-if="copied" />
+          <Terminal v-else />
+          <span class="hidden lg:inline">npx shadcn-vue add {{ name }}</span>
+        </Button>
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
           <ToggleGroup
             type="single"
             default-value="100"
@@ -158,44 +174,22 @@ watch([style, codeConfig], async () => {
             >
               <Smartphone class="h-3.5 w-3.5" />
             </ToggleGroupItem>
+            <Separator orientation="vertical" class="h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              as-child
+              title="Open in New Tab"
+            >
+              <a :href="iframeURL" target="_blank">
+                <span class="sr-only">Open in New Tab</span>
+                <Fullscreen class="h-3.5 w-3.5" />
+              </a>
+            </Button>
           </ToggleGroup>
         </div>
-        <Separator
-          orientation="vertical"
-          class="mx-2 hidden h-4 md:flex"
-        />
-        <StyleSwitcher class="h-7" />
-        <Popover>
-          <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-            <CircleHelp class="h-3.5 w-3.5" />
-            <span class="sr-only">Block description</span>
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            :side-offset="20"
-            class="space-y-3 rounded-[0.5rem] text-sm"
-          >
-            <p class="font-medium">
-              What is the difference between the New York and Default style?
-            </p>
-            <p>
-              A style comes with its own set of components, animations,
-              icons and more.
-            </p>
-            <p>
-              The <span class="font-medium">Default</span> style has
-              larger inputs, uses lucide-vue-next for icons and
-              tailwindcss-animate for animations.
-            </p>
-            <p>
-              The <span class="font-medium">New York</span> style ships
-              with smaller buttons and inputs. It also uses shadows on cards
-              and buttons.
-            </p>
-          </PopoverContent>
-        </Popover>
-        <Separator orientation="vertical" class="mx-2 h-4" />
-        <BlockCopyButton :code="rawString" />
+        <!-- <BlockCopyButton :code="rawString" /> -->
         <!-- <V0Button
           name="{block.name}"
           description="{block.description" || "Edit in v0"}
@@ -208,7 +202,7 @@ watch([style, codeConfig], async () => {
       v-show="tabValue === 'preview'"
       force-mount
       value="preview"
-      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
+      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--height] px-0"
     >
       <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
         <ResizablePanel
@@ -218,17 +212,18 @@ watch([style, codeConfig], async () => {
           :min-size="30"
           :as-child="true"
         >
-          <BlockPreview :name="name" styles="default" :container-class="metadata.containerClass ?? ''" container />
+          <BlockPreview :url="iframeURL" container />
         </ResizablePanel>
         <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
         <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
       </ResizablePanelGroup>
     </TabsContent>
-    <TabsContent value="code" class="h-[--container-height]">
-      <div
+    <TabsContent value="code" class="h-[--height]">
+      <BlockViewerCode v-if="componentRegistry" :item="componentRegistry" />
+      <!-- <div
         class="language-vue !h-full !max-h-[none] !mt-0"
         v-html="codeHtml"
-      />
+      /> -->
     </TabsContent>
   </Tabs>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockCopyButton.vue b/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
similarity index 100%
rename from apps/www/.vitepress/theme/components/BlockCopyButton.vue
rename to apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 93dfecee7..6aee8eb02 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -1,28 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import Spinner from './Spinner.vue'
 
 const props = defineProps<{
-  name: string
-  styles?: string
-  containerClass?: string
   container?: boolean
+  url: string
 }>()
 
 const isLoading = ref(true)
-
-const iframeURL = computed(() => {
-  // @ts-expect-error env available in import.meta
-  if (import.meta.env.SSR)
-    return ''
-
-  const url = new URL(`${window.location.origin}/blocks/renderer`)
-  Object.entries(props).forEach(([key, value]) => {
-    if (value)
-      url.searchParams.append(key, value as string)
-  })
-  return url.href
-})
 </script>
 
 <template>
@@ -35,8 +20,8 @@ const iframeURL = computed(() => {
     >
       <iframe
         v-show="!isLoading"
-        :src="iframeURL"
-        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
+        :src="url"
+        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--height]' : 'size-full']"
         @load="isLoading = false"
       />
     </div>
diff --git a/apps/www/.vitepress/theme/components/BlockViewerCode.vue b/apps/www/.vitepress/theme/components/BlockViewerCode.vue
new file mode 100644
index 000000000..0285b37c2
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockViewerCode.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Block } from '@/registry/schema'
+import { File } from 'lucide-vue-next'
+import { computed, onBeforeMount, ref } from 'vue'
+import { highlight } from '../config/shiki'
+import BlockCopyCodeButton from './BlockCopyCodeButton.vue'
+import BlockViewerFileTree, { type FileTree } from './BlockViewerFileTree.vue'
+
+const props = defineProps<{
+  item: Block
+}>()
+
+const activeFile = ref<FileTree>()
+
+const cacheCodes = ref<Map<string, string>>(new Map<string, string>())
+const activeCode = computed(() => cacheCodes.value.get(activeFile.value?.path ?? ''))
+
+onBeforeMount(async () => {
+  for (const file of (props.item.files ?? [])) {
+    const raw = await file.raw()
+    const highlighted = highlight(raw, 'vue')
+    cacheCodes.value.set(file.target || file.path.split(`${props.item.name}/`)[1], highlighted)
+  }
+})
+</script>
+
+<template>
+  <div class="mr-[14px] flex h-[--height] overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden">
+    <div class="w-[280px]">
+      <BlockViewerFileTree v-model="activeFile" :item />
+    </div>
+    <div class="flex min-w-0 flex-1 flex-col">
+      <div class="flex h-12 flex-shrink-0 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
+        <File class="size-4" />
+        {{ activeFile?.path }}
+        <div class="ml-auto flex items-center gap-2">
+          <BlockCopyCodeButton :code="activeCode" />
+        </div>
+      </div>
+      <div :key="activeFile?.path" data-line-codeblock class="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed" v-html="activeCode" />
+    </div>
+  </div>
+</template>
+
+<style>
+[data-line-codeblock] code {
+    display: grid;
+    min-width: 100%;
+    overflow-wrap: break-word;
+    border-radius: 0;
+    border-width: 0;
+    background-color: transparent;
+    padding: 0;
+    counter-reset: line;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+
+[data-line-codeblock] .line:before {
+    font-size: .75rem;
+    line-height: 1rem;
+    color: hsla(0, 0%, 98%, .4);
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 1.8rem;
+    margin-right: 1.4rem;
+    text-align: right;
+}
+</style>
diff --git a/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
new file mode 100644
index 000000000..f1703726f
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
@@ -0,0 +1,150 @@
+<script lang="ts">
+export interface FileTree {
+  name: string
+  path?: string
+  children?: FileTree[]
+}
+</script>
+
+<script setup lang="ts">
+import type { Block } from '@/registry/schema'
+import Button from '@/registry/new-york/ui/button/Button.vue'
+import { ChevronRight, File, Folder } from 'lucide-vue-next'
+import { TreeItem, TreeRoot } from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  item: Block
+}>()
+
+const activeFile = defineModel<FileTree>()
+
+// TODO: Improve the getter logics
+const flattenFiles = computed(() => {
+  const root: FileTree[] = []
+
+  for (const file of props.item.files ?? []) {
+    const path = file.target || file.path.split(`${props.item.name}/`)[1]
+    const parts = path.split('/')
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const newNode: FileTree = isFile
+        ? { name: part, path }
+        : { name: part, children: [] }
+
+      root.push(newNode)
+    }
+  }
+  return root
+})
+
+const treeItem = computed(() => {
+  return createFileTreeForRegistryItemFiles([...(props.item.files ?? [])])
+})
+
+const expandedKeys = ref<string[]>([])
+
+function createFileTreeForRegistryItemFiles(
+  files: Array<{ path: string, target?: string }>,
+) {
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target || file.path.split(`${props.item.name}/`)[1]
+    const parts = path.split('/')
+    let currentLevel = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const existingNode = currentLevel.find(node => node.name === part)
+
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        }
+        else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      }
+      else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+
+        currentLevel.push(newNode)
+
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+  return root
+}
+
+watch(flattenFiles, (n) => {
+  activeFile.value = n.filter(i => i.path)[0]
+  expandedKeys.value = n.map(i => i.name)
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="min-h-full w-full has-[[data-variant=inset]]:bg-sidebar flex   flex-col">
+    <div class="flex h-full flex-col w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white">
+      <div class="duration-200 flex shrink-0 items-center font-medium outline-none ease-linear h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
+        Files
+      </div>
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        v-model="activeFile"
+        v-model:expanded="expandedKeys"
+        class="list-none select-none"
+        :items="treeItem"
+        :get-key="(item) => item.name"
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ isSelected, isExpanded }"
+          v-bind="item.bind"
+          as-child
+          @select="(ev) => {
+            if (item.hasChildren)
+              ev.preventDefault()
+          }"
+        >
+          <Button
+            variant="ghost"
+            :data-active="isSelected"
+            class="flex w-full justify-start whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white"
+            :style="{ 'padding-left': `${(item.level - 0.25) * 1.5}rem` }"
+          >
+            <template v-if="item.hasChildren">
+              <ChevronRight
+                icon="lucide:folder"
+                class="h-4 w-4 transition-transform"
+                :class="{ 'rotate-90': isExpanded } "
+              />
+              <Folder class="h-4 w-4" />
+            </template>
+            <template v-else>
+              <ChevronRight
+                icon="lucide:folder"
+                class="invisible"
+              />
+              <File class="h-4 w-4" />
+            </template>
+            <div>
+              {{ item.value.name }}
+            </div>
+          </Button>
+        </TreeItem>
+      </TreeRoot>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 64592b502..0e498e380 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -12,6 +12,7 @@ import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
+// const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
 const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
 </script>
 
diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
new file mode 100644
index 000000000..ea878ec11
--- /dev/null
+++ b/apps/www/__registry__/block.ts
@@ -0,0 +1,1022 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+
+export const Index: Record<string, any> = {
+  "new-york": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },
+}
+
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 93ed8fecc..8d0b2358b 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -15,7 +15,6 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/new-york/lib/utils.ts").then((m) => m.default),
-      raw: () => import("@/registry/new-york/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -47,7 +46,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -75,7 +73,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -127,7 +124,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -147,7 +143,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -223,7 +218,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -251,7 +245,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -271,7 +264,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -315,7 +307,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -335,7 +326,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -399,7 +389,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -439,7 +428,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -483,7 +471,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -519,7 +506,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -539,7 +525,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -559,7 +544,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -579,7 +563,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -599,7 +582,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -619,7 +601,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -647,7 +628,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -699,7 +679,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -775,7 +754,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -827,7 +805,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -871,7 +848,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -943,7 +919,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -987,7 +962,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1015,7 +989,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1035,7 +1008,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1055,7 +1027,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1131,7 +1102,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1179,7 +1149,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1215,7 +1184,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1251,7 +1219,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1283,7 +1250,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1311,7 +1277,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1331,7 +1296,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1355,7 +1319,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1419,7 +1382,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1443,7 +1405,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1467,7 +1428,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1527,7 +1487,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1547,7 +1506,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1595,7 +1553,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1711,7 +1668,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1731,7 +1687,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1751,7 +1706,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1771,7 +1725,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1815,7 +1768,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1835,7 +1787,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1887,7 +1838,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1919,7 +1869,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1955,7 +1904,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1975,7 +1923,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2027,7 +1974,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2047,7 +1993,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2071,7 +2016,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2103,7 +2047,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2123,7 +2066,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2136,10 +2078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2152,10 +2093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2168,10 +2108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2184,10 +2123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2200,10 +2138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2216,10 +2153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2232,10 +2168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2248,10 +2183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2264,10 +2198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2280,10 +2213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2296,10 +2228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2312,10 +2243,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2328,10 +2258,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2344,10 +2273,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2360,10 +2288,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2376,10 +2303,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2392,10 +2318,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2408,10 +2333,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2424,10 +2348,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2440,10 +2363,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2456,10 +2378,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2472,10 +2393,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2488,10 +2408,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2504,10 +2423,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2520,10 +2438,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2536,10 +2453,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2552,10 +2468,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2568,10 +2483,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2584,10 +2498,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2600,10 +2513,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2616,10 +2528,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2632,10 +2543,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2648,10 +2558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2664,10 +2573,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2680,10 +2588,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2696,10 +2603,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2712,10 +2618,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2728,10 +2633,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2744,10 +2648,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2760,10 +2663,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2776,10 +2678,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2792,10 +2693,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2808,10 +2708,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2824,10 +2723,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2840,10 +2738,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2856,10 +2753,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2872,10 +2768,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2888,10 +2783,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2904,10 +2798,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2920,10 +2813,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2936,10 +2828,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2952,10 +2843,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2968,10 +2858,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2984,10 +2873,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3000,10 +2888,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3016,10 +2903,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3032,10 +2918,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3048,10 +2933,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3064,10 +2948,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3080,10 +2963,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3096,10 +2978,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3112,10 +2993,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3128,10 +3008,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3144,10 +3023,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3160,10 +3038,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3176,10 +3053,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3192,10 +3068,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3208,10 +3083,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3224,10 +3098,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3240,10 +3113,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3256,10 +3128,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3272,10 +3143,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3288,10 +3158,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3304,10 +3173,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3320,10 +3188,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3336,10 +3203,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3352,10 +3218,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3368,10 +3233,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3384,10 +3248,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3400,10 +3263,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3416,10 +3278,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3432,10 +3293,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3448,10 +3308,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3464,10 +3323,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3480,10 +3338,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3496,10 +3353,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3512,10 +3368,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3528,10 +3383,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3544,10 +3398,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3560,10 +3413,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3576,10 +3428,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3592,10 +3443,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3608,10 +3458,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3624,10 +3473,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3640,10 +3488,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3656,10 +3503,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3672,10 +3518,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3688,10 +3533,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3704,10 +3548,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3720,10 +3563,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3736,10 +3578,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3752,10 +3593,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3768,10 +3608,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3784,10 +3623,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3800,10 +3638,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3816,10 +3653,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3832,10 +3668,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3848,10 +3683,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3864,10 +3698,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3880,10 +3713,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3896,10 +3728,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3912,10 +3743,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3928,10 +3758,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3944,10 +3773,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3960,10 +3788,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3976,10 +3803,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3992,10 +3818,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4008,10 +3833,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4024,10 +3848,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4040,10 +3863,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4056,10 +3878,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4072,10 +3893,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4088,10 +3908,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4104,10 +3923,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4120,10 +3938,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4136,10 +3953,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4152,10 +3968,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4168,10 +3983,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4184,10 +3998,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4200,10 +4013,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4216,10 +4028,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4232,10 +4043,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4248,10 +4058,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4264,10 +4073,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4280,10 +4088,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4296,10 +4103,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4312,10 +4118,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4328,10 +4133,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4344,10 +4148,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4360,10 +4163,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4376,10 +4178,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4392,10 +4193,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4408,10 +4208,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4424,10 +4223,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4440,10 +4238,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4456,10 +4253,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4472,10 +4268,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4488,10 +4283,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4504,10 +4298,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4520,10 +4313,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4536,10 +4328,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4552,10 +4343,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4568,10 +4358,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4584,10 +4373,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4600,10 +4388,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4616,10 +4403,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4632,10 +4418,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4648,10 +4433,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4664,10 +4448,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4680,10 +4463,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4696,10 +4478,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4712,10 +4493,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4728,10 +4508,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4744,10 +4523,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4760,10 +4538,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4776,10 +4553,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4792,10 +4568,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4808,10 +4583,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4824,10 +4598,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4840,10 +4613,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4856,10 +4628,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4872,10 +4643,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4888,10 +4658,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4904,10 +4673,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4920,10 +4688,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4936,10 +4703,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4952,10 +4718,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4968,10 +4733,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4984,10 +4748,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5000,10 +4763,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5016,10 +4778,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5032,10 +4793,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5048,10 +4808,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5064,10 +4823,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5080,10 +4838,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5096,10 +4853,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5112,10 +4868,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5128,10 +4883,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5144,10 +4898,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5160,10 +4913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5176,10 +4928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5192,10 +4943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5208,10 +4958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5224,10 +4973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5240,10 +4988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5256,10 +5003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5272,10 +5018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5288,10 +5033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5304,10 +5048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5320,10 +5063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5336,10 +5078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5352,10 +5093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5368,10 +5108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5384,10 +5123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5400,10 +5138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5416,10 +5153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5432,10 +5168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5448,10 +5183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5464,10 +5198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5480,10 +5213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5496,10 +5228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5512,10 +5243,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5528,10 +5285,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5563,7 +5319,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5591,7 +5346,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5643,7 +5397,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5663,7 +5416,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5739,7 +5491,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5767,7 +5518,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5787,7 +5537,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5831,7 +5580,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5851,7 +5599,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5915,7 +5662,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5955,7 +5701,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5999,7 +5744,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6035,7 +5779,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6055,7 +5798,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6075,7 +5817,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6095,7 +5836,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6115,7 +5855,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6135,7 +5874,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6163,7 +5901,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6215,7 +5952,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6291,7 +6027,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6343,7 +6078,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6387,7 +6121,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6459,7 +6192,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6503,7 +6235,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6531,7 +6262,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6551,7 +6281,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6571,7 +6300,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6647,7 +6375,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6695,7 +6422,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6731,7 +6457,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6767,7 +6492,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6799,7 +6523,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6827,7 +6550,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6847,7 +6569,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6871,7 +6592,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6935,7 +6655,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6959,7 +6678,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6983,7 +6701,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7043,7 +6760,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7063,7 +6779,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7111,7 +6826,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7227,7 +6941,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7247,7 +6960,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7267,7 +6979,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7287,7 +6998,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7331,7 +7041,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7351,7 +7060,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7403,7 +7111,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7435,7 +7142,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7471,7 +7177,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7491,7 +7196,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7543,7 +7247,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7563,7 +7266,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7587,7 +7289,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7619,7 +7320,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7639,7 +7339,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7652,10 +7351,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7668,10 +7366,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7684,10 +7381,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7700,10 +7396,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7716,10 +7411,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7732,10 +7426,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7748,10 +7441,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7764,10 +7456,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7780,10 +7471,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7796,10 +7486,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7812,10 +7501,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7828,10 +7516,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7844,10 +7531,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7860,10 +7546,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7876,10 +7561,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7892,10 +7576,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7908,10 +7591,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7924,10 +7606,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7940,10 +7621,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7956,10 +7636,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7972,10 +7651,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7988,10 +7666,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8004,10 +7681,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8020,10 +7696,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8036,10 +7711,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8052,10 +7726,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8068,10 +7741,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8084,10 +7756,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8100,10 +7771,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8116,10 +7786,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8132,10 +7801,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8148,10 +7816,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8164,10 +7831,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8180,10 +7846,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8196,10 +7861,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8212,10 +7876,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8228,10 +7891,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8244,10 +7906,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8260,10 +7921,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8276,10 +7936,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8292,10 +7951,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8308,10 +7966,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8324,10 +7981,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8340,10 +7996,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8356,10 +8011,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8372,10 +8026,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8388,10 +8041,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8404,10 +8056,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8420,10 +8071,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8436,10 +8086,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8452,10 +8101,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8468,10 +8116,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8484,10 +8131,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8500,10 +8146,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8516,10 +8161,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8532,10 +8176,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8548,10 +8191,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8564,10 +8206,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8580,10 +8221,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8596,10 +8236,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8612,10 +8251,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8628,10 +8266,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8644,10 +8281,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8660,10 +8296,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8676,10 +8311,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8692,10 +8326,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8708,10 +8341,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8724,10 +8356,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8740,10 +8371,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8756,10 +8386,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8772,10 +8401,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8788,10 +8416,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8804,10 +8431,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8820,10 +8446,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8836,10 +8461,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8852,10 +8476,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8868,10 +8491,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8884,10 +8506,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8900,10 +8521,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8916,10 +8536,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8932,10 +8551,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8948,10 +8566,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8964,10 +8581,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8980,10 +8596,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8996,10 +8611,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9012,10 +8626,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9028,10 +8641,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9044,10 +8656,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9060,10 +8671,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9076,10 +8686,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9092,10 +8701,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9108,10 +8716,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9124,10 +8731,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9140,10 +8746,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9156,10 +8761,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9172,10 +8776,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9188,10 +8791,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9204,10 +8806,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9220,10 +8821,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9236,10 +8836,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9252,10 +8851,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9268,10 +8866,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9284,10 +8881,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9300,10 +8896,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9316,10 +8911,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9332,10 +8926,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9348,10 +8941,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9364,10 +8956,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9380,10 +8971,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9396,10 +8986,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9412,10 +9001,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9428,10 +9016,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9444,10 +9031,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9460,10 +9046,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9476,10 +9061,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9492,10 +9076,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9508,10 +9091,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9524,10 +9106,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9540,10 +9121,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9556,10 +9136,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9572,10 +9151,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9588,10 +9166,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9604,10 +9181,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9620,10 +9196,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9636,10 +9211,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9652,10 +9226,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9668,10 +9241,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9684,10 +9256,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9700,10 +9271,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9716,10 +9286,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9732,10 +9301,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9748,10 +9316,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9764,10 +9331,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9780,10 +9346,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9796,10 +9361,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9812,10 +9376,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9828,10 +9391,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9844,10 +9406,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9860,10 +9421,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9876,10 +9436,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9892,10 +9451,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9908,10 +9466,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9924,10 +9481,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9940,10 +9496,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9956,10 +9511,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9972,10 +9526,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9988,10 +9541,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10004,10 +9556,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10020,10 +9571,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10036,10 +9586,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10052,10 +9601,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10068,10 +9616,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10084,10 +9631,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10100,10 +9646,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10116,10 +9661,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10132,10 +9676,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10148,10 +9691,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10164,10 +9706,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10180,10 +9721,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10196,10 +9736,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10212,10 +9751,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10228,10 +9766,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10244,10 +9781,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10260,10 +9796,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10276,10 +9811,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10292,10 +9826,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10308,10 +9841,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10324,10 +9856,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10340,10 +9871,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10356,10 +9886,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10372,10 +9901,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10388,10 +9916,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10404,10 +9931,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10420,10 +9946,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10436,10 +9961,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10452,10 +9976,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10468,10 +9991,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10484,10 +10006,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10500,10 +10021,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10516,10 +10036,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10532,10 +10051,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10548,10 +10066,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10564,10 +10081,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10580,10 +10096,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10596,10 +10111,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10612,10 +10126,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10628,10 +10141,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10644,10 +10156,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10660,10 +10171,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10676,10 +10186,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10692,10 +10201,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10708,10 +10216,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10724,10 +10231,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10740,10 +10246,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10756,10 +10261,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10772,10 +10276,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10788,10 +10291,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10804,10 +10306,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10820,10 +10321,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10836,10 +10336,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10852,10 +10351,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10868,10 +10366,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10884,10 +10381,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10900,10 +10396,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10916,10 +10411,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10932,10 +10426,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10948,10 +10441,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10964,10 +10456,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10980,10 +10471,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10996,10 +10486,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11012,10 +10501,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11028,10 +10516,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11044,10 +10558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11064,7 +10577,6 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
-      raw: () => import("@/registry/default/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11096,7 +10608,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11124,7 +10635,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11176,7 +10686,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11196,7 +10705,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11272,7 +10780,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11300,7 +10807,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11320,7 +10826,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11364,7 +10869,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11384,7 +10888,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11448,7 +10951,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11488,7 +10990,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11532,7 +11033,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11568,7 +11068,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11588,7 +11087,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11608,7 +11106,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11628,7 +11125,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11648,7 +11144,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11668,7 +11163,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11696,7 +11190,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11748,7 +11241,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11824,7 +11316,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11876,7 +11367,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11920,7 +11410,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11992,7 +11481,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12036,7 +11524,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12064,7 +11551,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12084,7 +11570,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12104,7 +11589,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12180,7 +11664,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12228,7 +11711,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12264,7 +11746,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12300,7 +11781,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12332,7 +11812,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12360,7 +11839,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12380,7 +11858,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12404,7 +11881,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12468,7 +11944,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12492,7 +11967,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12516,7 +11990,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12576,7 +12049,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12596,7 +12068,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12644,7 +12115,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12760,7 +12230,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12780,7 +12249,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12800,7 +12268,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12820,7 +12287,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12864,7 +12330,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12884,7 +12349,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12936,7 +12400,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12968,7 +12431,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13004,7 +12466,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13024,7 +12485,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13076,7 +12536,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13096,7 +12555,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13120,7 +12578,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13152,7 +12609,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13172,7 +12628,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13185,10 +12640,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13201,10 +12655,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13217,10 +12670,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13233,10 +12685,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13249,10 +12700,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13265,10 +12715,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13281,10 +12730,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13297,10 +12745,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13313,10 +12760,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13329,10 +12775,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13345,10 +12790,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13361,10 +12805,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13377,10 +12820,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13393,10 +12835,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13409,10 +12850,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13425,10 +12865,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13441,10 +12880,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13457,10 +12895,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13473,10 +12910,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13489,10 +12925,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13505,10 +12940,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13521,10 +12955,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13537,10 +12970,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13553,10 +12985,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13569,10 +13000,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13585,10 +13015,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13601,10 +13030,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13617,10 +13045,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13633,10 +13060,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13649,10 +13075,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13665,10 +13090,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13681,10 +13105,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13697,10 +13120,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13713,10 +13135,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13729,10 +13150,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13745,10 +13165,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13761,10 +13180,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13777,10 +13195,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13793,10 +13210,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13809,10 +13225,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13825,10 +13240,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13841,10 +13255,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13857,10 +13270,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13873,10 +13285,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13889,10 +13300,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13905,10 +13315,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13921,10 +13330,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13937,10 +13345,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13953,10 +13360,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13969,10 +13375,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13985,10 +13390,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14001,10 +13405,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14017,10 +13420,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14033,10 +13435,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14049,10 +13450,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14065,10 +13465,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14081,10 +13480,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14097,10 +13495,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14113,10 +13510,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14129,10 +13525,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14145,10 +13540,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14161,10 +13555,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14177,10 +13570,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14193,10 +13585,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14209,10 +13600,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14225,10 +13615,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14241,10 +13630,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14257,10 +13645,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14273,10 +13660,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14289,10 +13675,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14305,10 +13690,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14321,10 +13705,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14337,10 +13720,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14353,10 +13735,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14369,10 +13750,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14385,10 +13765,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14401,10 +13780,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14417,10 +13795,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14433,10 +13810,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14449,10 +13825,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14465,10 +13840,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14481,10 +13855,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14497,10 +13870,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14513,10 +13885,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14529,10 +13900,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14545,10 +13915,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14561,10 +13930,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14577,10 +13945,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14593,10 +13960,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14609,10 +13975,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14625,10 +13990,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14641,10 +14005,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14657,10 +14020,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14673,10 +14035,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14689,10 +14050,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14705,10 +14065,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14721,10 +14080,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14737,10 +14095,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14753,10 +14110,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14769,10 +14125,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14785,10 +14140,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14801,10 +14155,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14817,10 +14170,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14833,10 +14185,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14849,10 +14200,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14865,10 +14215,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14881,10 +14230,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14897,10 +14245,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14913,10 +14260,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14929,10 +14275,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14945,10 +14290,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14961,10 +14305,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14977,10 +14320,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14993,10 +14335,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15009,10 +14350,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15025,10 +14365,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15041,10 +14380,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15057,10 +14395,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15073,10 +14410,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15089,10 +14425,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15105,10 +14440,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15121,10 +14455,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15137,10 +14470,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15153,10 +14485,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15169,10 +14500,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15185,10 +14515,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15201,10 +14530,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15217,10 +14545,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15233,10 +14560,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15249,10 +14575,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15265,10 +14590,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15281,10 +14605,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15297,10 +14620,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15313,10 +14635,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15329,10 +14650,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15345,10 +14665,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15361,10 +14680,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15377,10 +14695,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15393,10 +14710,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15409,10 +14725,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15425,10 +14740,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15441,10 +14755,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15457,10 +14770,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15473,10 +14785,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15489,10 +14800,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15505,10 +14815,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15521,10 +14830,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15537,10 +14845,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15553,10 +14860,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15569,10 +14875,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15585,10 +14890,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15601,10 +14905,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15617,10 +14920,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15633,10 +14935,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15649,10 +14950,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15665,10 +14965,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15681,10 +14980,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15697,10 +14995,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15713,10 +15010,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15729,10 +15025,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15745,10 +15040,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15761,10 +15055,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15777,10 +15070,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15793,10 +15085,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15809,10 +15100,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15825,10 +15115,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15841,10 +15130,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15857,10 +15145,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15873,10 +15160,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15889,10 +15175,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15905,10 +15190,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15921,10 +15205,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15937,10 +15220,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15953,10 +15235,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15969,10 +15250,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15985,10 +15265,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16001,10 +15280,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16017,10 +15295,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16033,10 +15310,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16049,10 +15325,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16065,10 +15340,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16081,10 +15355,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16097,10 +15370,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16113,10 +15385,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16129,10 +15400,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16145,10 +15415,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16161,10 +15430,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16177,10 +15445,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16193,10 +15460,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16209,10 +15475,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16225,10 +15490,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16241,10 +15505,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16257,10 +15520,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16273,10 +15535,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16289,10 +15550,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16305,10 +15565,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16321,10 +15580,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16337,10 +15595,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16353,10 +15610,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16369,10 +15625,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16385,10 +15640,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16401,10 +15655,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16417,10 +15670,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16433,10 +15685,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16449,10 +15700,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16465,10 +15715,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16481,10 +15730,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16497,10 +15745,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16513,10 +15760,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16529,10 +15775,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16545,10 +15790,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16561,10 +15805,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16577,10 +15847,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16612,7 +15881,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16640,7 +15908,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16692,7 +15959,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16712,7 +15978,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16788,7 +16053,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16816,7 +16080,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16836,7 +16099,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16880,7 +16142,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16900,7 +16161,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16964,7 +16224,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17004,7 +16263,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17048,7 +16306,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17084,7 +16341,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17104,7 +16360,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17124,7 +16379,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17144,7 +16398,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17164,7 +16417,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17184,7 +16436,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17212,7 +16463,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17264,7 +16514,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17340,7 +16589,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17392,7 +16640,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17436,7 +16683,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17508,7 +16754,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17552,7 +16797,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17580,7 +16824,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17600,7 +16843,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17620,7 +16862,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17696,7 +16937,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17744,7 +16984,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17780,7 +17019,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17816,7 +17054,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17848,7 +17085,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17876,7 +17112,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17896,7 +17131,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17920,7 +17154,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17984,7 +17217,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18008,7 +17240,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18032,7 +17263,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18092,7 +17322,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18112,7 +17341,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18160,7 +17388,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18276,7 +17503,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18296,7 +17522,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18316,7 +17541,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18336,7 +17560,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18380,7 +17603,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18400,7 +17622,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18452,7 +17673,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18484,7 +17704,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18520,7 +17739,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18540,7 +17758,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18592,7 +17809,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18612,7 +17828,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18636,7 +17851,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18668,7 +17882,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18688,7 +17901,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18701,10 +17913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18717,10 +17928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18733,10 +17943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18749,10 +17958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18765,10 +17973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18781,10 +17988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18797,10 +18003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18813,10 +18018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18829,10 +18033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18845,10 +18048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18861,10 +18063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18877,10 +18078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18893,10 +18093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18909,10 +18108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18925,10 +18123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18941,10 +18138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18957,10 +18153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18973,10 +18168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18989,10 +18183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19005,10 +18198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19021,10 +18213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19037,10 +18228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19053,10 +18243,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19069,10 +18258,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19085,10 +18273,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19101,10 +18288,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19117,10 +18303,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19133,10 +18318,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19149,10 +18333,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19165,10 +18348,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19181,10 +18363,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19197,10 +18378,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19213,10 +18393,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19229,10 +18408,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19245,10 +18423,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19261,10 +18438,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19277,10 +18453,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19293,10 +18468,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19309,10 +18483,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19325,10 +18498,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19341,10 +18513,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19357,10 +18528,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19373,10 +18543,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19389,10 +18558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19405,10 +18573,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19421,10 +18588,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19437,10 +18603,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19453,10 +18618,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19469,10 +18633,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19485,10 +18648,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19501,10 +18663,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19517,10 +18678,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19533,10 +18693,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19549,10 +18708,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19565,10 +18723,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19581,10 +18738,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19597,10 +18753,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19613,10 +18768,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19629,10 +18783,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19645,10 +18798,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19661,10 +18813,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19677,10 +18828,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19693,10 +18843,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19709,10 +18858,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19725,10 +18873,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19741,10 +18888,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19757,10 +18903,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19773,10 +18918,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19789,10 +18933,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19805,10 +18948,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19821,10 +18963,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19837,10 +18978,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19853,10 +18993,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19869,10 +19008,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19885,10 +19023,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19901,10 +19038,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19917,10 +19053,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19933,10 +19068,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19949,10 +19083,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19965,10 +19098,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19981,10 +19113,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19997,10 +19128,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20013,10 +19143,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20029,10 +19158,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20045,10 +19173,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20061,10 +19188,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20077,10 +19203,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20093,10 +19218,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20109,10 +19233,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20125,10 +19248,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20141,10 +19263,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20157,10 +19278,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20173,10 +19293,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20189,10 +19308,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20205,10 +19323,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20221,10 +19338,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20237,10 +19353,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20253,10 +19368,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20269,10 +19383,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20285,10 +19398,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20301,10 +19413,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20317,10 +19428,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20333,10 +19443,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20349,10 +19458,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20365,10 +19473,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20381,10 +19488,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20397,10 +19503,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20413,10 +19518,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20429,10 +19533,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20445,10 +19548,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20461,10 +19563,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20477,10 +19578,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20493,10 +19593,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20509,10 +19608,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20525,10 +19623,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20541,10 +19638,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20557,10 +19653,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20573,10 +19668,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20589,10 +19683,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20605,10 +19698,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20621,10 +19713,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20637,10 +19728,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20653,10 +19743,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20669,10 +19758,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20685,10 +19773,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20701,10 +19788,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20717,10 +19803,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20733,10 +19818,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20749,10 +19833,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20765,10 +19848,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20781,10 +19863,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20797,10 +19878,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20813,10 +19893,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20829,10 +19908,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20845,10 +19923,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20861,10 +19938,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20877,10 +19953,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20893,10 +19968,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20909,10 +19983,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20925,10 +19998,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20941,10 +20013,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20957,10 +20028,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20973,10 +20043,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20989,10 +20058,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21005,10 +20073,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21021,10 +20088,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21037,10 +20103,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21053,10 +20118,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21069,10 +20133,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21085,10 +20148,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21101,10 +20163,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21117,10 +20178,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21133,10 +20193,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21149,10 +20208,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21165,10 +20223,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21181,10 +20238,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21197,10 +20253,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21213,10 +20268,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21229,10 +20283,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21245,10 +20298,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21261,10 +20313,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21277,10 +20328,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21293,10 +20343,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21309,10 +20358,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21325,10 +20373,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21341,10 +20388,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21357,10 +20403,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21373,10 +20418,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21389,10 +20433,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21405,10 +20448,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21421,10 +20463,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21437,10 +20478,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21453,10 +20493,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21469,10 +20508,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21485,10 +20523,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21501,10 +20538,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21517,10 +20553,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21533,10 +20568,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21549,10 +20583,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21565,10 +20598,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21581,10 +20613,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21597,10 +20628,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21613,10 +20643,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21629,10 +20658,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21645,10 +20673,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21661,10 +20688,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21677,10 +20703,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21693,10 +20718,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21709,10 +20733,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21725,10 +20748,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21741,10 +20763,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21757,10 +20778,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21773,10 +20793,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21789,10 +20808,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21805,10 +20823,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21821,10 +20838,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21837,10 +20853,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21853,10 +20868,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21869,10 +20883,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21885,10 +20898,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21901,10 +20913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21917,10 +20928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21933,10 +20943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21949,10 +20958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21965,10 +20973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21981,10 +20988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21997,10 +21003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22013,10 +21018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22029,10 +21033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22045,10 +21048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22061,10 +21063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22077,10 +21078,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22093,10 +21120,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 576f7c8df..1b8de6f44 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -303,7 +303,6 @@ export const Index: Record<string, any> = {
       }`
       })}],
       component: () => import("${componentPath}").then((m) => m.default),
-      raw: () => import("${componentPath}?raw").then((m) => m.default),
       source: "${sourceFilename}",
       category: "${item.category ?? ''}",
       subcategory: "${item.subcategory ?? ''}"
@@ -357,6 +356,91 @@ export const Index: Record<string, any> = {
   await writeFile(path.join(process.cwd(), '__registry__/index.ts'), index)
 }
 
+// ----------------------------------------------------------------------------
+// Build __registry__/block.ts.
+// ----------------------------------------------------------------------------
+async function buildBlockRegistry(registry: Registry) {
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+
+export const Index: Record<string, any> = {
+`
+
+  for (const style of styles) {
+    index += `  "${style.name}": {`
+
+    // Build style index.
+    for (const item of registry) {
+      if (item.type !== 'registry:block')
+        continue
+
+      const resolveFiles = item.files?.map(
+        file =>
+          `registry/${style.name}/${
+            typeof file === 'string' ? file : file.path
+          }`,
+      )
+      if (!resolveFiles) {
+        continue
+      }
+
+      const type = item.type.split(':')[1]
+
+      let componentPath = `@/registry/${style.name}/${type}/${item.name}`
+
+      if (item.files) {
+        const files = item.files.map(file =>
+          typeof file === 'string'
+            ? { type: 'registry:page', path: file }
+            : file,
+        )
+        if (files?.length) {
+          componentPath = `@/registry/${style.name}/${files[0].path}`
+        }
+      }
+
+      index += `
+    "${item.name}": {
+      name: "${item.name}",
+      description: "${item.description ?? ''}",
+      type: "${item.type}",
+      registryDependencies: ${JSON.stringify(item.registryDependencies)},
+      files: [${item.files?.map((file) => {
+        const filePath = `registry/${style.name}/${
+          typeof file === 'string' ? file : file.path
+        }`
+        const resolvedFilePath = path.resolve(filePath)
+        return typeof file === 'string'
+          ? `"${resolvedFilePath}"`
+          : `{
+        path: "${filePath}",
+        type: "${file.type}",
+        target: "${file.target ?? ''}",
+        raw: () => import("@/${filePath}?raw").then((m) => m.default)
+      }`
+      })}],
+      component: () => import("${componentPath}").then((m) => m.default),
+      raw: () => import("${componentPath}?raw").then((m) => m.default),
+      source: "",
+      category: "${item.category ?? ''}",
+      subcategory: "${item.subcategory ?? ''}"
+    },`
+    }
+
+    index += `
+  },`
+  }
+
+  index += `
+}
+`
+
+  // Write style block.
+  rimraf.sync(path.join(process.cwd(), '__registry__/block.ts'))
+  await writeFile(path.join(process.cwd(), '__registry__/block.ts'), index)
+}
+
 // ----------------------------------------------------------------------------
 // Build registry/styles/[style]/[name].json.
 // ----------------------------------------------------------------------------
@@ -886,6 +970,7 @@ try {
   }
 
   await buildRegistry(result.data)
+  await buildBlockRegistry(result.data)
   await buildStyles(result.data)
   await buildStylesIndex()
   await buildThemes()
diff --git a/apps/www/src/content/docs/components/sidebar.md b/apps/www/src/content/docs/components/sidebar.md
index c1946a6a7..41157d56e 100644
--- a/apps/www/src/content/docs/components/sidebar.md
+++ b/apps/www/src/content/docs/components/sidebar.md
@@ -3,7 +3,7 @@ title: Sidebar
 description: A composable, themeable and customizable sidebar component.
 ---
 
-<BlockPreview name="Sidebar07" ></BlockPreview>
+<BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
 
 ## Installation
 
diff --git a/apps/www/src/public/android-chrome-192x192.png b/apps/www/src/public/android-chrome-192x192.png
index c680359ba4d9ab7382aa0041942a1dd859b64737..c2b7ac1cff8f492a3768869e80b06e541a8f21bb 100644
GIT binary patch
literal 9986
zcmc(FRa8`O)c&DMLb^*D=~6nSLqHH1LMaJBkj??=97+VF5l|XL7-|5ip}QGs=x*u%
z{MP!`|NguBF3x!`&N}-&XTLk1{p=mBr=v=UPm2!#0HL~?vOa2U|L?-ZM&0!nopDeL
z+Gl-LMWAw+eg^=U0d-{sLm!KSKwk*`RL0iPm2lY&BrIWC;ftw+WK)L}*{t=z-U&Vq
z<!||I7d$s=rYMsmQYSAvap^xb13A_*Qq4KkLtU?^b)SoW5j@X#QD+|H4sWHdigzwF
ztC&zzB*h)8Xe;AcZtydiQUr(nYUZu0ovLCzPn0~{@L#?P%2>V)T2`3NO=~Cl3Pc{y
zAB<OETA^7<bU?m>vDzU<F!L5H@DhfSDLN&fWP0y)LJ4>gKXJf&3p{bSSm-tbW@QA6
z*sah6i>6$uT+ytq+W+@2=H9Mtv6EJsnMiBJYgwj+(NY$Ymvny~#7)3C;AV@hcfsoU
zUO{a+dC?b7T%@3OsLM5&MhS!`-RAi^Dv~-bOmH2_JBqIVNHax};R|c_MHjqwq*PQR
zF4e(n`Dl12GyY;*vVv1iCfLU~6pvw}+Z0eXk;2MZ!2juKYVksvh5e`8o6r$(DQO;k
zfvUobIPfDDkdL*^>SiiBEbmtJ;l3cI%<@B;Z2d*Ca#On|6uHg^6#U9SAKB}fneKYk
zDz+gxbY2m2*TUhFXGISf4}KlFYhF=B>$)ou^4B4|%a;FBBr~@tv^tCU$P~=>W`*7S
z9HqzClN#@~x_r$@Ra{D%bedZ*I%z`&(e)-99E4QHBJ0<z!4qJgQ+aY2CM6I!v6~iD
z54)Z#w0m8xQA$ZBtPV~lhMfp-;^Sj3<%t@coqSts+8Ta%;G3NEO>Y(%gqZ<h+y_x|
zWqt==R2b@dbz|@jXF9`4GKj{pieR^0v&u4<77^2ryT8V_a$y?+QUz=g5B$$HoT@+5
zG-AGOz3%WyPaS$)*{ly<U=hZUKWUG=RDFSMg(36s<w5)A-?Xv^Q8y*vJAQ1%SnPK;
zU%=n+k*K~QY$Y4r5b1W7wO;!Ycr?X(=-E3Bs`pecVCOll1)^d&@I{D?s?6z*a^{8U
zgiKyZ@+uFAa`iCZi~IBcAzf#YR6FhEKkhnfkPc`R9JoI=K&iSQ`gp6uH<2So&q6dw
z(o?R3T~Q00h7LRweDY?LK5B!l!(Q}S*Ua^LbND#jKl-PNEvpyfs)iNft8&fBrMwSS
zlq0DK=JWoutjAUry!q09wDk|0np4X`VvAE2Hx8EsBox|VFNkxIe*UNQT&)@e>Fq7o
zDsg2Zjk(mt-~6|KRkeDYNd!Gz{Bk2+izUB|6q~KOyuZ`&b}q(g4eQDViqWF5S_RRw
z0dL2ST-S<+=|{pFUuc3W8l<cU`_Z#)XvAGiGl{p}iW>|Uw9|dOzk8_}-fr@=g`?Be
z#r(L!awEXHoyruze7;ip#In`v<LjBh1bhuY!oF~@77n(u`-P{2>ldH76XcO4==fmy
z;$kzevH`%=s2!t8pURr)X>R>G_o<pThCp72cyTlM@kaY@QGw8RP}_gcqDjV$i)XFo
zKi#8es$Oj3#5OIKZRwSy>zBRxq{osh5g{>Sas>puVGiEQiND|M&a7(K^s^qFF#$07
zRy*TIcI%0Inv2ti@(aI0esM4-@163J(?1*2+xJ~wZds8kvGNItx_b_=7DP$w{=K@~
zPBmD?hhZk!vZ5t{m|nWcspjE?rl)l#(v!oizO0^>J4h`?vX5%IbD#1P8r_C`d;&o>
zHIjx|adN>ZhB#?@BWk_va>~no)~t?tO<;4PDY?hXin;wUdi!zh8Z9Gvrv1-i34(CN
zlRZFj?KI8^!Q`x{b=X;Fe5r(f#;8qh9pL;&-!BPLCVX<&kpg1+&VxpF1|v?D<b+31
zQOdT!m<I4RDE+Z<RR%-kkTS;hPsGUUL0l=FtWbm*gEp>1iM*GBVane2jp3jaeYZsL
z(RV%oeL1T`u03%}H~Xj6qKT4wJ}{wu>PP+L2&+sahau&@o`Cg&ry|#<q2;dYPof+N
z+{T9hymDoGtV>dTGgp6NSZ-UKzA3};i!7AJYBuO0t|7ABi)A;z#%;f%j%ZTI6bBK@
z-4%oux?CJ0(*Xf-$CXWX>FZ4~r?lr(iT1P&F3jHfv-oJFHaLLxD(^j?Y6ih3-#-U#
z3N}kYyjB~B%Fg>thG`i5`F|;ZVtf+f=Q)q0P9=FtedcVmDw^xFe-3c42R0=%Q9jsT
zJRHdQ-RxHH<TzP~Y{D%dDRcvi1L}oQdPUA;d~zPm#pF|gmwL+)yPvk%o@KM}JY?}1
zegkC$QW(LwgKniyH#6Z$YxXLQA>k%u2A#QfL9!vb!uO-L^W#pmh{~r1`09lS6yN&H
zI}1ZV%<-wWxUbIXsFnYjnSh>)KR=K0bx@E&ld`YhQ*t9k>n4(uYR>J2yLMU9`pu!o
z@uB4pME*qA0XZ@lNQ2CdI8WJ>*kj^mv5Y2}RU7x#2DarXhjH5YT$p<I_lS<W%?3-b
zmADf^RZKiMaz+yFhU8_YQW!%XH?jEp2P6};^Cw?8SedKNHKu$S+kDIm-KSzcG85Ou
zz<=TDRDjD+Lz7T=G!-)?_{4Q|icVJao<NOXK?WSJzt2ElE)K(z&$+Z8{rjC0N}i5a
zEuGTNC<|Aq#(=acO0!dg*o^rlYc0W`BJxAA@^bC29-@(CP=CX93HV7aGBkK)NhRqO
z8V&<IEq4An;GU%KGxN#ifH)>H-9t;O7b%;IWGw;EQhD#T#V)Y_98kW#(2=ZnIX_72
z#ZhwBwR~fXHfkJ=<<lCy<z3mM_4-hT<mY9f<lkW=Yj`rA1ILds7P{d$nqZ{Hi(^yP
z=j}sMqxppJ`YW66Co|ntm~XYLYQtKuwVj{L5el)TPx27c8T>6|7?IP1E(o;Cv%fgL
z4U~iND6zk9`J1?#+L;V`kNWkAue*^~gaN)|j2-BC)i>}|E(wP?9lw`(j#`iA|2+Lq
zO>-ZG%g)WS831p(<bkfMz6wM~MVt<2dfucB8cC|nXX+UU$f3bAx#Ywamy#ebYnhuI
zj-~J=dUyZDX%GA(v2tC71JV0~33gOgBQ?(9A5I4Czn<W3)cwW|RlGVgkl)F-Y6cTl
zCij$X9dD{*Y(>@peGST=sYg7lwT7sTces^4{rnNmV?M6w9ugqTn4<kmXGD^uzDed~
z)Mxp06fjW>2yDx6vM^g`^f}9<qxPmG(8I8bArD2e&Z|_LiBA7@6CcdVb=DEgzilZ{
z2>OC0?}LwQ;Y+0Ko=<$^BXp1T;SEMNd`+SR_pF@&79tkXYFKJLZYI&>G;`9C+Vf2}
z%>+Q%W;)|ufIX#L3W0w7V2DIx4u~pS^N&knA3vb2;ZHchnaUKzw)R6a)G!H49x^_Z
zu%zk!vT{+iRHbKAAZiYSO&hA{NH!Z$Jbj|NJbQVPzj^>o&Ex|@G3BQh3jOr(+zv^?
zH^_%c)LugpTW4o6=e0S~0nfaKcYA!%t?x!yVn*r!TpivF(hYOR1lF&aZJ=;=XmwWS
zs}Rwg!1e9?{IxCEcRxOWpEEz`Vd)&HVU&~cJm*&BsR=qIYs$dC>oM)5CGx42=v!B=
z9ZBCGY<1@bVn@wG=*&#|EuZ4b=L)61|Ezpw$-@Q5I{6p`CPcTFiSbLA9eNB3Hv^C~
z07nZ;_}Bi=Q{zTao$sG&@fmWY%ip<&b9MIAC_#|@D)p2ARE@jA>Dz4bryxW`V)Wkg
z;^Z{&(H8N2J3&g1+8o}hp8#JLhsUrZqvI1-7oNHwPd}$kY*e0!Ks6$>D~?l4w01~0
zVAo1j2>EtH=LJsF-R!q_Cu2u0bhT_V8>w~=E-=&<JB3wHF!J>9<m1C&NW+W8(&4iq
zZZE}Z1&5M%TB@gN=GvX#G4_v0Nvi?smFeRFiZ=6i;&<t2{H(UM;1kGSx<MX&%pl!v
zP6O6>2HW*S^PdiJ7={@a=o>2FxlMAJU9GfslP6Z(AvEFD*V?-LLKoK^rks3P7A^Oy
zGQKA3B-E(Lee=_1B1ZIU%+RH@D@_=$3Pm~S9S(~>P@<4RH=jWN@`HNiVwxiwq`7?9
z(qZkoxr$CM9C9oFoWhE>RB;&D4*`MqjXE!qJ9W>G&$;)uj<OW_fE(5-gjS`Cz3@9n
z&tF*RaC#r5`wV&uHV5<tF!tDZo@T*Zq=aG3`T9GQGm)5bL^ga(*z)C7@KjY04|ZK*
zd`dQWX{hxw>(y{>&7;P1(<z*(^ILra@S<`$94Q$%L`Y&wYcPrXg8NPab_5l#m-I#l
z9lfk|=p3rcJlGu3j;3nvM_)OuJ-ff#_u}}{7)x8G3^xQHZnzHZQE+@L*KD`@V7}#Z
z(koY2ar>54=zN^|jQb4%IPt4p#45v>XLdvzT^Bk`*;hdrT66|V+s<Yd=jwH!{%i+<
zfLK9w2T!lMqRDFh@N+#oe9At$v9a-!%cj5t2*3nL%}5UgB!#q7n=JDVx!B-X9eXi8
z`qI-Q-vkebxSVt75nUObmc~@(2c21^DjN6xq6-T20(;+l%SVMYC;_U8_X6-VS%dIz
z&B|Pw_=@h=I2JqP?-NOXewo&V{bqhQpZw~Ivs23An(41pQ!D<+ghYD^jbS6@3bmcc
zYL`bA%ktB{tQhC%WJHJ&{X!FZHZD{+9IIXBPcjR1kzcG=M7tE_k1SAp!%7JFohKbg
zk}mlK8NzjY&Fe&V68$XO$)G?E`&bvaaFE{ws5j~;TbqZ--?I%q{x)c2=;8%}v^iS`
zJ|DmO=JXrzkpteMU|);1>E7>eU;M*rwMy}yPB~o0)LdV2eQGrb4c6SnmB=4HeU?C#
zTO@NN4#cvwgh1YLuo^*X?gdUoaBfp=k}rZa3oL%lMo26l$U>!xm}LpT78T!(Svk}-
zmWaC-n7>g5U0}oTJo{(widoEK^k>|V+ckX=61a_@%nFK1_{909Dqxs>e0fK#;#n|(
z+cE~EPUcz*?S<{ZLSoqKvQh!ExXPuB$PAjgUbgDygkMjS!rK~3P^ps>(?73B9NXSt
zawsRfid{p>%rGt8sEoUm!)6z_p=wAeR;&*q7rNNDmrIwW^{AI509K^oKU8S4me1Gt
z)RZKFY{2WAgk0;n-O<bkL}t{7Xm_-&wi`V+_*^X==36fp!~m`qy&gP$KR*{zLA$G}
zFM9K%;;d~R?Ixco<Ss%I5dNWghv`+0Su=kGXD204o=>Nrl<;rDoULj%mE7sIY`m6I
zrO8{v`7LXGDV@#bz#B7Ev`ve9glSWdizd;|gvQrSLn0U2qx<l;0`b5MLsy~!f+}=M
zZig~55$4RU82Bmhw4HXBPP)lgQKBFTm%IGFn`@O9kJpbTnKmQz8*oQ11V3xa>3p}o
zmVwIyx~ZJsFQpkAUuMQyKrjOoscWcp0;)uN=lsBpPR^VX%RQ>>xm#i=Y#~(<a30;~
z5(I3PE5Du?`-=nc1Gf4c&)I^pg6b?o8kCW}A06&z7AQI59H{$Tx6#@mpvOC_7JCg7
ziZu{V0c8qSA5!?T@^UC=DR1&6kwoji>qzY|d#lSsu$SKS{!SEh#%YXKjlal>83&R0
zohYOTH^{UgwoSI&x_?1Is7HwiXk|<1;(sbvO-Pa7dr7@uQG^lN+H)m?tHwVZd?=tX
zA^dB1amFzk*NC*S=ju}J0ddD9A4bzCM41@a9Jz$kfJohDBmoP!o#~+iWfE2K-eq5D
z03$LG_GnATdo-Stg7+imtKBXt;u_^X*+vJwe{JM$e<vxwxS9%n&Nw|TvS59qGwM;l
zsw{Y%ETFh%(whR)tlyhym}Z;56+NOCVB`Ugztp~;k)+7sbPC(`TDD~HyTD$~PLJr@
z+Z;-K3s0%QdDQ|v2*J^Rxy!paP-~~FD=p5)_b*0%Stn1ia|d*UA@A^T<zaSnMG0W&
zweGa%IH>$G#{1--ub3I=N({v**n96G@hS&7pUQRM@g_}G$z5G6<YxhOKb6R5l1&c1
z$BW}4L>+hDmt%@YEI|b0M9KiY4~rwTT9D0{<BzJB&6@c?t@(>f)tP-b1oR`juu3(C
z_xBoUjPF_G)C}|A*l(%28(pMF39=rnrLP!`g@J%N)kG1tbn%xhWmt3W;TZoi&+m<3
zc=fM0gJ3SY{egGg;g)i=p02v-g?88G&%?d5pZ%yD!hxsN?PJm+-MFOZWm?W}tAcJ|
zwAWat&H8ANA*7^#_NYl9|M)Rc?kb-=v{TFH%f8{tD+bSG-Xy)VEh1haHY%}0QTH!u
zSma;MFG0@MC2AL%Pw#STD1LJ8{R-th@=-x=@A_eBwx)Ht2C_z95PoosSc)GDQ{+%-
z%*NN{POHooZ;~Eon^~NX)QIU#$SKx$jHi4K7NY77lfc~EZD~v&tn%n(@=Lhe3-fM}
zz@ee=vqftkLHY?ILfq04c6zb+g>fvn<qb<*|KfW^D`uaz*jto84CkozUOH>0dVK#>
zrK+XX9lLOc;rc;5Sb%7_SNT4(^KmI9?tVW_>LCj+g(!}`r2sg7(Bc=8fojERG*+nj
ztMgms;yHgV73Z+jW{h$+<ZS;h5=rVb&p36`dx@|aZ)YvzC^W;t6YY`|e<yP9zk9#v
zlYep6&Wi=e!l!;LR2o!TU|B(fSH$deKWS~S%Pnu+VC-|urWV{8cDELeU0m9zRj&QH
z)QH+Kbye(8Vu8xCH6xz9z~2*_xL6-HVkF|ZTkVXr!~^<#{CgxRgs85Z)`(CDFBAew
zzQkC-yl}zG^|3#q<9wD4w^huHcIfwPLw9FU=7>;sH?PJC6v*%<3Mlry^4oD|^xwP4
zk?`gWmHKD#8W7yTZ+<i2{GmLekW${})wZ4PX6mdj|0}yh;gFAGoY2Nk1_fOZkRpP8
zg)i*e`3MB|je`S!iTM)kgNO9ei-Xy)*2J*BIO1IaFbgzuM5|KYRDi0(ol7TFO`Vx&
zJ&{`U_8O6|Mdo-QvzM0lvdK<20vXeg(1sAI_+CnB-%0mhZOqws_}M-|M(;zOQC83I
zAD0nJV|LZ(D*;w?;RD+6&QP2GQmkCOn;ciY)>(AA>+LjCC$`n_$N)#R_xB#>b`!tK
z!8J#D9z}MjA1CiV`UVLzA&G3wkDGUA6u9>i{{SoZ*L#dS{0u^ulEjE?4Y#D_7*S_e
zV*YLT58J|+=8FkcRK@8m9E(fka_geLweU-W-u}mjk4^I+Gh8T5U1S$yND!_3!7P5O
zoLcQ(p`O?_pa<oB3cG}e%-Oi(+2kKp5oII$C$}Q|bVi9?ecU~aui({k%YnY;!}lA+
z8Zje(bTMkM3-FcPZIclO=$T!)*p4Q~;=a>kO}{cj#ZKv@fkp_@J-|Er#Pr+j!*P}Y
zNsreO3+qKrY>C`eOoKq}o6I`9MBg)~V;#s8`R5g}om`fO0AWo(u0_Ivq)fWrMZcv=
z#dI$wQDFO^{V<)^Q1IPQj~AiunSCGadc7VBS`;9@cTOIloRqm|vns!@KHv4>$*N5<
zm`Gmp%d-z!>ANzoKaoGd2L9n7{^JyM3b8f#sQ4yG^g%Z`0X@YpyImB;qQ92(|FUP`
zKBwDHK00>hFn;ZCpEmwJs)H6FQ;1k<k!rr4d$Jv`u~$-nWRH~w2D4zip2eYV_JnX1
z4tY(s{awO`Evdjtid`?oDHirb)g~5m@su+2NyDBKihNU)7X%o)HkPBMMX#zG+#Y<N
zZpN2;Ilaq3TssK2-8v5;U?l`n;N3Njlpr~dB^$OO$Y`rf1hN3n0l{b0s`pX(cbRA|
zCsg#4MCm5gS7dS^Kxd7-;kLEDQW?^uGyxX>&1cR=8KjhL`|#q{pM&DRaa;WpfAme(
ztof?$d%3i(N~|p2g0`|~DQgHicQHwGw@Ldpd=btD)ymfG^ZQ}5zU_U{#^nbuzy)BS
z{Dq&D6ET`-m6VxUmDK|jH#MQfc%F5*yVBvD!9fFmBX4h_2@h@%?&19vh6&HHeM^qG
za9anhk3!NT)f_&pN?+gcEemq!u?4@zkVoOB#7vbA9;FG4_vi~To!b3<$)MEiW1B+K
zhBjNpxz&$MiH;Z8tDPmV1-gYgQY2{z2m{a3g=B}L+L$XVbx&5TSlTyF55*ir#gYSB
zIF|`?>zv(~S57DQ|ADeT8uf>e84{6V3WtjIM%{!UZxRToWTAv5Laf-=8-=0=LyTj&
z&l-(G2n(8LDDp36>j)m8oaymzOPvbP0VCHSK?J+)=hVH*bIo*e2r{&f2zOV8SXX!Z
zi8#Bfd<=@8_-MbV@#DfA-O~vrPFP)D9p5YKp}T*IZrnxm?k+vWl?_;FmR$PtauPwx
z>eNgbg=DSPZ8z<*{X08RM--Nn>h_Y|eD~<+85C8p-=V`+AA}Ro83B(k>v?YHLv`M&
zUzwu6(M=w~r)27F#oyP)c^IKS#PMo?BF6Ewbhjrvn^EJHKJ1U<S0vBJk1&fqTP${{
zR)%W0oue~}MmG6Q;A<<N&uLC9Fd&1mc0+~ir@<8&XpO3ZN8T!H2ku!p04I`T(0!j+
zShQz@I(RYvdEK&~BtbMqZsg<<NK*A!>MW+c9pA)kAHv?weq_Jr7t6z@P_*_ck>x@=
zTLOVM_8O^?-`fwHzY3$0?^tvw2lu5G`}@B)ua3OmS!H!Dk%%o5I}=Df?~*&tgxJlM
zVbQJiJ5kTYY;xUP3zT$)0w@4hh{%z~(Wn~lWT&Z8`IiAA`4(d>m6|vGxy61yp~Y8l
zm(3VHm-IRBeVNJtYm63;vK1YeF|#YU+fTRA4dmpg=Mt2=1Ep6yz4KlkIr8YW^BdJv
zgWb%E0xVZZbhY0~)-b@6e6p=&W%Y}%h0{aCKr+bQ{LKa=7W3^!11ld19BYmFw}o!f
ze4lqEERM1h6YP3c2O82xYVf_y-07i~HA&$!Y}S0Lt>#b2M~0B5H$0g_D{QxMzeomU
z&?9WYsZ@$CRLLNYl)XulRymE3kM~KQAAnMe=0BxQcB)wHtvv!AXc>%t9t93^%IA93
znog6@oT~|kjU;~KJ}B%?!EG#~ZbEy9)Sza_zDJ#N(NDE4R}SlwKw5cZWbeRyYvF%{
z8?#y`AkPu9<di{(Q(U%!4w?Ada9u~E-tGnQq}|<dtAH&q*(|{yT9SsBC-x3}RfqDA
zbF_An(NlQ`i-b7tn`D#=v9snA?%r93jc5dt`mX?`h&!v->HZh=yXX3j_4q_Q%AJY3
z=OR$6-I3})T>Nyho(9$T_P0ghv7kjwcf509eZCR$3Z5r$tYfhJE`x67EAK%BgROgY
zl{+yhP;PN+)#BtgM=x27(fo^>8qU5=;!dTU3BtK3G__-hDJLbv6KklgFD)wC$7YbI
zm+YS0Z4tjKcoT&4g+Jv%y#xE;r{5FJgZT2;#wsZ}|3E#U&%;XhB}L`2=GJ?suhHaS
zq;Rflp6c&?Y`r6H*~+yYvZOZ!;IrJv$Z^ARC;XJVg7&a4&lW;tx=1%NC@Z-us&yU8
z?FaqKH>|G5`Ywg{wl;|e3FrTZFsG^n<+DJmHI=66lK1xMREbrly$<5H1l)NUI%G@*
z<qS^QM~#Y@5Rw_9JuWf(ST!AnZCo}>IcWO_-(7}oss6KFUG47`6h<(r5la$O0hYE@
zDe5S8@_TWYVX;3-xCPjJIL%Lf$5&|Yud(z|vW}c5B{q~T%6#+#<h_HWr{8h2q#Qn;
zFIIaCAD(f^6urdI55>y<t}`ky5?%5Rql()w%jPcu0TUv3VlR(`%69oKoBfwYNe#80
zn2DXVhx_R4UBM@LG(ysp8@}AzKR;&!R31;U!C`EZBbHtRNz+&IWdiuN`Ye5!7Rdw!
znIP4flJ|(!?fJW-Bv7$9Y&ex4N^2uM`J^$ftWFbbhf1@rvyIW=X$0<P7{KH4CDjl0
zz$rzZpr@T#!dS*i(v38^Djcu6ef)Rdn97~F_+Cf%6${<q?aOg7j!lcnaG%<a>!S1E
z!d2uj5^kBtKM=K8_q#pscZh>J?}Mt~1i*C5<=@$m21F*CMjP6wXaQsH9_H!iC4aW`
zZ$$gFbiD}4J$aiH;aY(w2Wdl-8o>(6%Np()|JeIQo(RCR(H)Y1J333rdM&4IA3!H%
z2MB;)5}cL099!tS??^vm>0QswzD#`Y{Lo4w&ECHtTIp%*L1O_BNTAB-_lFm(?=_kQ
zF0%9@&C4dDrV}GJf-+wPIkd9yY~X*M_G9E9qyjj+c<VEffvm-s0Y0yb2a`enpYkuD
zLok1DxM)`S)q6h+HPX;50<)#R<W;C9#-|fC{M$Iacd7i9e(>)r;&Xye6C-WLD!-1R
ztQf&HtFsR@bz7j%4GOC6>coeIOj9P*$pgApoSEITcbSRxj50T`Y_5|4iC{!jbrz~e
zl32ff_e^=2tNj?f<t!_>cC~t;nQkRxUQ%Ogn7VffCeT)DVr@vyStOuMjx|8>F}5O5
zX1_v+r}fD0y|JR9eee~?LMtyT=N1t^x@(Dh{f*?ueYO_Up-6Z7AA>?lH~W+=Hk7ST
zWw1kI=6i?rbJ~pCrEq`Z%ESvjTO<$3=13vf@tBDAqNm<JxeJ^Xp=$LQMQd-k4hdv)
z9Ljq9kp&x*)?>l+dc4j79bPD!XnlfOuKy;X`4p-{_^rGFn`^52;;U<B)fVJ&0}IFv
zesF#4BfGXN*dSwmh578w^5)U``nXD_;h;m*c@|6}q_tbH#qk=tIVU!!RoMvv4W{zD
zr5Ve;C7b;+YwU~G-m>-J^5+@CG6Ud;kfFc8yk$$rbAD!$i#_d`8ZSljE}4LXSukNX
z&L%M+!!`0<6aZjX|2GQ&hJ!`eEjx#h{YK6rY*a%bGiQu+6VcX6bEse%b&3uik-d_j
zAo7u5zS6g`3-Sg3Ps1XK-`t(w<WH^mQvoK*+=8?#dw>eUMGwc?C)G$13e>sRIAU`4
z^bhsfvwUG^0qC{*9=uWCTGGY;4h!vrjo5FJqPYJLRV2E21-kATprtI!yIXwq64#lo
z;B!mda8_v4J^3_Yv1zt~>p%H6fY;F}+q>TaX6nywS<**}TRGILi2K;yJP^=^6(<f)
zGe72&(~MKs2w+SL0z!51ZER$1#?poS)cKROJ<jufP0giyZm!R_1fUHnyDX-1F+BCA
z(nrby9Mr?)4hKj7T0=fIs~EPX=v2@J`fr@{^<0ATqOV5+k5Y1aT20-=FzwE+jIr-W
zT~X#s{>xl9J3uSFF*vF=wvj1zaF5T|AOSBjXd^tiY{DXud;T0NW@jrrS=JSh6P+=n
z`)Xb!DrxgKLufrw`MTZT;u$*PZt?2yJj@d7gfqWM%71`@XCKXmjG;t4N7_wr_u~4j
zDeG3~EdsF0X;pO078zmuw!uBoVQv&6Ocz)VDAdxSdM7{MFp3vPsJ_T~R1Aszgh+&$
zg*knfD_K!MUq9VLMJq2jc~^_5-chFm^-Ce&52azESJun9F!n0oSes>H@i3cv0#9gj
zbPG$6nVLYO=BMhv{7{{?vf)K;Mz9FUA#iR79&!E|<g+YKNwwK3@$gC887Y?1vq#;g
z({Fr(e-|<+=5)qHUW;(^SdYzpyi5p*lSn-rk^<t6wH%Aa4>5}`avg_8^lJ1mXCTyR
zOVo2VG{wqAvC4Gd3AU>bV*+CaRomm|CmlA;!xi@m>SNWzJRAMNA)i#ZYVNm0ptD*@
zgq8Xi&v4xG=M@0~65!va-T{6|pwCpbc(f&hx4{I~;YHX3br_klU?_(@_yg9bC!uyH
zEeyY2v~lL_zm#cdt+lQW-yAN}e&Su}F3XNIW^p%@HSeHWqDB#ua<qSFAjQ<z>)a>`
zUZsNAl||gsGKYp5s7+aknOELdcDSm35oyVuAce0*8EX{ODUqi05<h##qnxl?hOgLf
zVLFSnhx|0YpyT`uO)&Yh%A_&cb6iRwNVNRt6x851A}??6qm|jCm*yz2y<CpHYTkp%
z!#HQ4UIe3T#A6esSh!44l1SmTH0wfV)=h3XiIj_rFa3}q&v}s!4!|STvj`jgo^gp=
zt$>%+vNn0x;bGLD(s(8whb7;poS{~Ftr?M4w5$=NEq$#Urqx$P_d6Xa%rZ1?B@F$q
z8l!oFv}#kP?|MNAT&M6DPgd%=CjKjw!n>m>JyQ$2u3S6(ycn|_vLsqUZ6@R&Z2l(R
zVf$k+1_U*Q1B7|kn7R60-#!xUoVSji0^oPPw6Y(GT8buPU)|5DBi?DcZ>ZLy1ShRu
zzux?)9_OBX;%mD1sMXJj+33ie*e9MZ{)1tL4iyG>U0s;^d@d1Jn(gS!BT}6LPoZ;S
zFJTRk8(B0L;AQy;Up$I#$$;27=$lR_9**8R3u^{Z*r7ozeQydgzLgr#WmdVxo|~id
zOQpj=+<mQY!OP+4`{+d`%vpw}k2W_ar-g~q$MQVj9ikl;RO4J92FEXJ#82^CS$t(B
zgl0|D&GJcJj%!z`mNQQU63Rr|`RF|y<`?0x^@EH7{!FRWPf6YpU&KhJlwH{yl)`m>
z`39#X#wWPER8FNdF}6>X)EXckz=EP<>L=r2FXHvNuDpO16j}=S+i%u%P*Reb#|QY>
zp=LU&{|siVgvV$9{XYJbY(3{Dti(pL-Vpa?1mrCT$#mljUn4HgQm7I$ENxAwcWcPM
zS)?P3$R|e057oIBoD}G!@D#&;^Jchay6pQq2Dn>}P6Anl2A8QGy({;Q{?YgGZ2RUW
zNTo@L2m10;n|X>kOE9Xxgsaz>PCJj(0)1Y~d~0U>C+6}+QE#hxMs2aqzkbwX%gxK^
zr^#R}`LNV?C8TYb&w<W#XyE%WHY+p|7TejMVFG9b;A2~tTxu57h?TM$jTg`Ae<u}?
vvB3FC4K;)HR6inH<KKTf{a=e(dBjkQ&utI&8tz67wE^lXI?9!bR-yk7(poVi

literal 5431
zcmdsb`#;lf{Qis>CFC$A!<-2@SBzm3l2hRwOG3_~IYbU4$(a^~#hjbSB!@M`bYLSb
z6VZq?Bo>++BEIYU_<sL|&kvs;Ua$Ly`+B^d*Xw!T_jO;7E7Qs0tgz5AApig%Y-@vX
z;f|Dl4~U=pc9{$n;0`>IE@v$P#P`P+0RV|LTZF~MSTFWv&j^W6C42mL0J$J}3Mf=C
zi0_rHa!8JD-`(?}2W*vY3}l{n%}_ugy4rT07i}hf{y63q*RT;rGLpPv)LtOLmn!Sa
zo2TPyByTi+F)o)PT{)OzjfOrmRLm9aco+JY&?&%kf4&s&ytKZEfz(xfEQ;*jPng1#
zuk_pj_)*NQ<tspUiUB-rrjDNS6uy}>(LlapK#GyMBVLdaBL4w&k_Q-;gf|sW{sgZO
z^9J&L-ZhO=0W_t+6)Ak6*6p}o_5d&56zgO`(LfG|RRZYZ2j&9A<v+|X(DZp?h53&0
zsK6_R=mi15)ngz7pnWp@QMoFeZ^rO{ppbb#%Sz!+V49P-U~n~bPj{)G@8lr<K*{;Q
zjT7%YJ4C<QoSxUZa>xEmt_;SZVjq3{bs{gdW=H`jULk+3uQdBkmcQ>X$*mH-BUNba
zR#E4N4}==vj#*A`JG?nuZn<B3O7Cu$a4}&1=~P#MWj1ClakMTd7#>t}{L+3u8GT0a
z3lO~j4dgQHrHF#6z`qRk<s5vcq5bN<K#242^=gp2&e_1Rr-G^vkIGu@elP#9HxMr^
zEB)&)w~gJ#SNFt0l0&Z;xglZ`Et1L)27e~}nvTid8-t({Ha5pRDGTN*$#mi3l~pa0
z>TTR#VYNn&!|$Gx5+A=<U2Rh``&%@v5cfoLnn~Z<wog84-1|=0+imT5A?(?)(axUi
z)%t4%9WYXU#K{;*t^F7PZ`hT0lQRdS0#x8B$?ME(-)TMTy&e}=CN!k>W#zgq*w=0P
z9W>jgS4-~&Q^H5OeY@-d(~q1IfvxnO*votk<r8;T>pNLsj7qA^r$1}kn3tIiL*O{D
zjqEKm-^XI2oiLfPir@g*SFSfxsPez7-(n0i$FcrVJ<(FWR<B(Mi%FtAJW(Vko_^Iy
ze0s3+%T9>0<T<hXTQkwu&F^>ReNPb)HII?<O*IxeRbTQ_LfqSbZFBkO#1#JVpG+i?
zW__Q>`iT0Qyi%#1{Tk4tbzfky-;nLRUWkL(!_cS5-|zeHFjH+2L=y)(z?i6v+_Iu)
zM)qkX;dI0)5x@@x<q}`0Um8K@GEm>XN-xU5*FUI7$?Z_7Z|Qs>%B+qj*rMhM&sPnh
zaH<ws(B}DdNBxd3r+f?Pm`>WZu(z7v9co*WA+&SJ$+8osah*P@)ZrCwT^bXA=+8_U
z^`kw2S5Q7C-e}COe`9iXL&?R5L|{6Vmrn!uwYSzTpb<n|xv@tx%)!o`7#E;d(df|3
z<n-+yTjJ>Rptbnq_RA*m$}(=%!R}>Fu@4YLFDCo+26pW_T}$N9Qb9T<=`1CaooO&y
z&BE9Ia!dj!(ku`n34x_lW#0>X{P!$uIlf$i+P86uKcJr?plQU{1ToBrDfV1ns6F6l
zp@Ero2C9(OHh6^0x*4z5PPnqQ3sW^aoI|Hi1CHtVk5<l!GfWvpmg_U=-_7=Ptp$dJ
z!kv1t(*TXYpr{jCd(Wc{>n5(~AhfrqAiuURWXKv_VcpjSi^KVqhw^CtX!fl`wWD(`
zK{-A`63j@$6yhg3pCuO|^AC}mM^kyW(q@UPE#GZr7Dyu&Qbd4k4#zmzI{Q+zTI&{g
z+C6o2M+UKYWbv&d)ZIt4`4f&;8BLoR4F5;|RG%2R{^n>U!j|=X3jgUnAG+MUXt5YT
z7G=z=IN0d3Ih{A+-&_|-GZ2U+1?cJP@fiF!b3wRwf}Od{tjE)kLMsib!++-|C_gz1
zdOG6rU`ze2n+oW#|5ATUNiY@NTL(U~n-N6fCkM}+-Mh8AQVb>gWXq~cl#ojbLm@55
zh8pwOAX2&>ISF$g+;az33^*bmmuO?uo?dUD$=(1c{!Pu0HOnQM7njjo)gGPX5lZt*
zAu7hiLn`jg_dkBhNa$zVuzo0G8%oM|h1$J=YRQIE=`Oo_jPx-mcRvv=app5`n*x<o
zlA+!s(Xs8P-|kr>N$CipgikA7uEL&ZIgujhq^87q;b2s-6c7z^ulGY^sShMNVQb0P
z&~rSSS_D0A)tbR25H`e0D|mxuNRY<J2!&@r{7C)E>$3(baI^1oaYSV_65*)bHV!e#
z#UhEOS`<F244ed($2R03w9)Z}`eZ8mbn4G<^KPM$*$qG9cKMx<PXYa&t~f1hL(T0o
zEjDhU;!yX2Bji)<1i-@?W4HzUB01wi?Il>v1Ug<Vy$Go-`G#Qja2k;IT5sXOQ@5HB
zr{4zG(9WUxp^-wGH6^$Ue5X@jsub<R-oO`tp&|7=s_RPv<g4ANJ@LkM5rKAc3WgC`
z3^<S$Ih#GTO!*R+Zfx^s*Foizn1gq@w!SXU<AaxWIvheBe?xXs-8)o^w9w9t@4xkG
zxStwQA<zA?PYyzuFiT${H5pesuRA(YmNx9G<KEPk07mXSE1+C=4RQ-Xo?&2Qo2>{y
zPhtelUhnHQ?qqUIyQDgIQj&~#;4ejf+<U?vpaYLa5HqyU7D(1}-}qC{h7O*)w8{Nx
zp5|^cb7TgZQs#j*YN5Kq<Ef}DLHX4CZ*(70U9;;6a;|h%)xCK|0&wJ^4bXvp_$p8W
z@FSG`3Z`v|3nDGtlV!e!y7N4(j1g2xKIV1vcp010-P8Mnro6<-cB|pdkUj02pvf>*
zz>kfT0OBZ*8W~+XouH<wI)}7ze24_&c#d059Nd)6U3ZjaX?SGT`_zlI+sDC;=uAwd
zgD>y}oDqcV_)`*AB~u+WtdYfDl(SqOEy$2FtX2iXKv{P4J{!9}VpF(o-P^+{OE&pA
znL^PW`^A7Psevq%Nf`FrnfCMn$zz2yNnjTEZgbSg%l|qSm(-r1_@TU`Dt~?y7_H+&
zEi^u7zx!Scef0(Mp3jNGJVNFwJF}kgw2=0oOZ&{T{`@k-Dv|KDs*`T)t-}vLO{G^c
zwvC&qes4z1w=W%P>^YONH+H>on$I3!3-r4gkNfC}&FX+jj0R;eFLc#ONHUGT{ggA!
znBXipWXQv|)x%o;*50&eKHss&J%kU%Tye%@RksMESr^p{mOPF$zb3rfnrWNDXR$q>
zRb7S6Cp7xmt@BsEe6hN$u%uP7m@jzm^~s5Q^DjNch$xl)-ldB{W>Eun-o|j2hPG$2
ztNFH(o57^{Vgbgq)YnS!)PDB#>|nm9;pM&K2MubkmUh6z>X{eXP+u0n&>~qT=k8Hg
z9BrW~HaL53qtJeNWAgC)`0uNw`)^lP=T566w>u`&_*D?Z-wk3Dm(!2b-t#vpSc<m#
zchaPE;BWKgdI$P`s||eJ$m!P~T?3=GHm#&zFsd8>P8`5d4BR5KJP?y_{@-mPifxF!
zq3*_(Ck4DLWPYRA%Jr^Q2Mq81>h$Qu*e5eVGZ`p1l_DQa1}i#*)PGN7sC7#dpTKw1
zyxTc!jWA;4wft&sKPj7J(U!P*{^YaJ2mS*rmtZ8WR~Snh4YhvYkB$#);LwKt8!nC~
z1(+6=V0D$W`#$V3Ol%Uy-dYx40nNPGK;R~g2wNZ2unj*5`BhzeNsA(0&m&dJtY;G>
ziZF49o@_w;7{`UaX8$f{)7l&_vyM5`e2Cs^)fHTBWnLgB9&}5(l0@qF*gd+A8B5dD
zDTU8kegtQi_sMRB0~FBCD&XHN7p@w6VDHnz5#(1+AfGk!ZP0*>9911XHM^0Mr!dUO
zY`@Zz&04s@p2DyBiWu<x5)P7*9T$GWERZB$oWkp(<ImifOCt?WA3N)Bk0GTC!kf&7
zORM+|cb3wq%5n^QSKPlVjDV_?!Jc~o^9@qciLPX)nL}?>ju>BeoDsY?#QKbM#SK1S
zNI$XDA7y9uT!UXED5C#<zxs4?Bl$iRxwD(7<s8-Z3m<{mUF|g)76_U_RfGa}yfkYr
z{h>KF!!j+RAY9?jZ<D&|cN2oJ;W)~@6>=r1mRU^iw^g#=-u!?${ge4t?nS;gm&dJ0
zp<v{h4C%SmV@haOGxAYQxpLE*I4Bg$9Kk#}*hufmWd%4-Z|{=m>L<eiXIb@MT+@#z
zV+VsBEMVju8-JQ7D=SMHW1fN13x5R{r3eNQD-SPgPePiRzBZ29Lg96v*JO*J?y4S`
z=;OSNFzS~4bdli6>m=3Z;SJg7wA74aAG0nlbIjWgXi8e*TA-h5wNY_ju0Y*q1mzLh
z!N`tBKJgc`+%7@E(ca*l-6Ti<W~8=IsOLmoH`8k1I&;74n+aC)1K%@CT%%jf#a6o@
z5+R%tj0}D?n=VNYPcs<2hQ4Nnvt<P@zIm|lR~>!eAz)%0|Cql)#@D7@6?~Fmo-uwk
z(gW)O1uH)bzj!dT1*z>4E3W0-sA)nyu};g={i!&<NK^KSuUF4?u0&nc$wUqLn{IQc
ztbrVtSSx|g7*4n3xY5J+0l7hmL}$JT53F?{X#s-7YMu_fhAx@iI3bkn!k+VV{l7H8
zUxoj=?}C}t14h1}dtnaEJ<h{y1*~S8G@J8C1^wjb1_-OE4P+hxn<VO>Y4>_TKtFwQ
zl3RMj+~o@6l#e>Ts?U02K9|}P)5hEa$PM<yI!Q)?IzKw~_9_R)!?k0TQieMy1H!X-
z^wDn{g<9~@yztJ5_~m=^3l8#emsVWvrm5663C?_EKdJ11)px>J92suiF*dn`CfVW>
zul+~0puq{Ts>Nf&(on=^PeSJGwF~MEE~s!DWWMac3RWQX+hfn&Rq9qs9?2?15bq29
zcn2lZbp|9KpTG`Qj6=9We4JtG#rhRz)AG*J*jgZ>-k>3!`-M*x)UWJ6skU=M#tom?
zVo>+vVf1qN^npmE_EDd$AHv>k(95ay1oeV!?yAScAE^>)5~H1nvC)6axiAHJfKF2i
z{+;+aB@d8+vKFIo?b+r>Mbr~Dv@_YVpS>3E{V0Qd<0vCkXRjgy)h9aRFR)>4(q+L|
zAmF(+6e&A?{t4s6faK>Pb)^P_>?ue;J8msZGi54ZRK`!L<&kge&6Lt{{14cMKvO*x
z*>)x$!`g30#6$|YL&2kLvM6$=NxeYRKPog|L$Fl^&h<<9#sP()*R9ORRjc)4H_}<d
zn$u+#vm=MazQB<UyC2BT(P9gcUG01kN5&g9hUyz_niONc7dp=gr7^8sajuj2D33zT
zQ025D{H|HuXbIgXCX)D&kJ=8c<)WcQb&Lf5sea+WbBGcYi_;nCaMd*^#wUKgiLvaz
zCN+DU{ZD<xJXyE1sMq>8-sB&h;V?U4ahWLkr7*i~n)zwhRw!j?3eOJ~T#j+nPDKz0
z2u8lO!74?UYssSy-T~#9ADefK_$m_jkQmprQS<4?T;D1?o?oh0t%Yr2wj>@LQ1-y)
z8SA8-+$>vx_iL^wS|A&MM;N8~nl-{a^AEKspE0{wr(3m=v1Q|UtC&zn3Q{|Sq$*v4
z+CK4TZQ+MSvJ+?!(hY9I?BA(#*7+^oXd@tMg1(E?CfISZWBys5nunsYH3xXqaGan0
za+ZD=UVnO7LHueVEjrf{Cmf8_u*Avr3K<Wn*IlQdTY<)L9pq&8!kFT^0!75Q^6?W$
zixLQ~FjOY+#Ex@%AKX|q1sP8H+cfHly-$tqw))7viai&-=-D4)0r<83L}%qQCf4%A
zU0aL<bHx14c!R2#`5#q%sh*LP%WZc0nW&=KDmMc4>oropB=5RBAelTU<uf#$ATnr#
z@twUZc~rwa&_$(a=kRhK^_t5AfA<CwKsCq;pyAzC5u+Tu|5HG%@sfgvbngD}EFmkb
zW;IXviyGx)z{U~cqYL9Ds46>-B&HQwcBv+@iWh`AAz^7dr-x-Ve}Cj!(KtL@dG%1t
z#%%Vcd2f;2<-YL`&)&z{<(_A)UME@M7U&Poq#u6nf$e+R0n>8!wJSWwds0{+n8Pn^
zPO4fpZQfE})r9HY{o2jr+%>SN{3jIK;IkvO)@!m5qRdc{gpun|Uk6vR`=Zt{dvp28
z+?|H;xaDQ>0#-=*@&eN0ir?iny<0rYEDTvsFpT<qfN``En44<}8(8{jHKfn{h~NE&
z)Rw#HdqOnlK+mBb9-+gFZ@{H3-ey1l66AbokK=0xU)+0S)t$66xU$_Y(sXvUqgz;<
zVi*;y`rfk}w6qtkGe7<Ejms7E?)OyVwV+N(rua+;j2tnrxniH3AXaFK*~`+K+z&1I
zV1oXu2QARd8(a8~HIU}ojR^p<vMX5IH4zw2`AzSypEMum#IzxZ(x0!~>MwSyxi30I
zy=o80_b!JuNxPcJy@ol40&5c-)~i)9|KBCVNRhiva`_xAT!d8KtMez#hxg>CP1ki<
zEj||Uawa-`WD9yd@Naq-v6EN~fIuC;%GP4h&9WV_mxaH-F3z~|O(${dM?uVbSK?t_
z_LXPUx!UtKS2tIa5*nO9NaaY~rUYHCYkiw1>e?jphvP1NRC=}p25Aya;*C9YYT7}E
z8-m@MNIm;a7szGGv%p+T1Bk<Q;#UJrxlz}Q?o5KoOHps&_iG}M+<tCGX3Ae0P5^VU
zFPD3(*Q9w=lKYc6>~+gz!HObStO0}@maR%hbeDN?vFpzT^80+b1t7fdNh1fjSg(zl
z;n*C2IK`K;9dk>8!uMeiVtOo}8@K(hA+s+caib^00oEPJO+o>-NCyPb();%R0Z%|o
Ac>n+a

diff --git a/apps/www/src/public/android-chrome-512x512.png b/apps/www/src/public/android-chrome-512x512.png
index 0c9941f6437b4bd2581c01ca0855d73aacaf0918..727fab6ad97451ca8a4cf358105b1b59a932acc9 100644
GIT binary patch
literal 49091
zcmeFZ^;?wP`!zf>3^4Q%3X(&kNGSpW!hm#(f;0%CsH7mxFqCwNNS9I~DJ?Za35o*J
z-JOHdF+A6J-=A+h$9ueg!SfRw2e7Ye_C8~+b*@dgo{lONIWsv31fo(`Q_=^4Ai%c}
z5R3%)vgbK?0(=3x>Z>Y(N_$w>Kp+H2T}k1Ar^RN|hO1d;%JQ*nO2H?+x*){W=`t?m
zfcpE4y-J?S$`eAG+^VX&&^>-P|J0b|@YM{*>Ly{-c=S}*RM;;6e!;mGYBO4I)W*1c
zsoTvo)$t9~le7$>h6brkl7Ia4w)YwhqIPntrX8Zdpy$-eAJbYan{w<^x!%aHE4QO*
zBnDBz!kEC^R?yTKP?}@Agca~@6q;5Pq5@h5jq(6r|Ngu$82STjr<gMl7yb8#SXeTV
zmFvHM8ik~%6D7?ii*~##@t^gm(LV{R{#{C24a<t=6R)Ql`{z+n=-VI((tn<Ug^6>5
zT|udRs}hg@^ZUSqS^wXI|KC>sjm!VP;KF+IBH;WQn>#E#&VwQhZ?p~={2UuMDU|Cv
z6dSr9E?)EcV)km<;Dxil-A7^Vgl@6xmp^@f2p1UCx70BoHA`E=y+1|Keed|@*6o?4
zLq$a<FVMkm*EIj)0F_46w|Nu$)d?DfJ>fxoz8JhJDSK<__nnout%;=)*BQp=6dP!s
zy$Kf-Fwn%6BCm1;H`4$1cP>|?LQ=8cB6+uVJMww*+g8>;LKMPBAvlEj^~;Q(glq?6
z4sr~wuNLc~hhMmY?5Y2L#9__={lZ23cE*;RyszA|yK)@k6Ox+alsl3Gg*S88-D23#
z<HS{pcEo)eyNCGgNV*o~s}E-DV7tw^WH%;Vv5yf2=0Yijo<Bb>U-qtXFiB6jQbO5y
zFG45i-77-sy|NSEs34?t_Qj&Qe6y{<!;H+{FJ>N^;A-=h26Oa;a)?mCDsPp#HO+e+
za0W;Qd}fL{<<h(SfKOE9IVG4I<aFEa!Ebu!R2c5<)mF2X)8mQz6ie?tG%r<tJ>jvU
z#-3EA?T^El0{D1vo$@D`ar74nY%OuY0o*JUB7?2coW0C%|7PJb$UIJ3%^le-2y(fE
zV8{4_L2>i)LK>eyW>6dmdj~=vCJ1V!WXtE3yleM8;O(=BLSH&|&>Cx>#NmSE#miE%
zpB0Xw_SD$=TN$q=fyX`J1|E0Kp#)^gc4io8%HVX=X9!ADaHHEy7*x)Ny(fOGpa<@n
zK3^eQ+;b`hiMoR0p7?;!%y~Dkx8arX%L=t1D{vndR))G>sB?mHEdvx&UBzd^aVD}8
zEt#f0{KxYr*r<27vY7?U-S+?*<G+X5`4jo>oaeBh)dJ!JtxX%GMiZ-#X>;g99?Rg_
z)JVV4W+&n?@(<=;pjTn-uJxO6r2<3<9Q#8dEDi4%Uk9->!W!_KYv&aaIlU{r^-f{<
z*a~>Y3Q5&A@Qm^~7(9<oQyxST8mBeocy*ZW;g5%xBMn{?QEr1i62T9{M#)_G(fr8v
zG*pG}AIqf~_bEPSw#8S-ksJJ=Uu0dDKfiPwKd1iF@muM*y4JfWk3MUn;6a4G!dnW7
z(Ff*B>it$Z)!ToAjyVHaxEO<>uC--#tg7xC*8k{mpSeaImB!@$c9Qs!B)SCQ4Yd!1
zC!J@2FlX(Uam?0z=yt~)2x9wMGqsx6#651fQ)t|@Fi+jo?dY*xAsCVTsqaws<CiTe
zY2HP5)R`R`hdBr(9eJ02Reo&e>5jc-{CN}Vs}23P0+1YWs3!{2N{_Cw-8l`oe4Wkf
zal<J?(h*1Jj`t*u9^bu0QKETv2p@7PNEBu#YQA^Zyjg;Fffy9DR_LMIF+ys{9EM#;
z7N8P0+lcrZ+mFZ|i|tRJ%wm=TzA4tD6RVOZ5~Z8E;1*oFAF$eCx@StdHQ&m><N*=r
zD{40pIWK29VCO_j7w@@Z4EY2jeSRBB*}iNcDIeZ(Z(&8hz8U_i>u-p`gH9+LsU-(K
zXRvvw`ZRSrD1W>|+co7TOSxViT%cAXm`$W4gEk9t{-hufbnR|3zt?4KcHnD}nJ!Uh
zgu3^k>daMb2{r!`mTsVhmKXl*iAJUnS^T|kjNSC8>s$K{dp=E_oEo9Zo1}FVE|nbR
z6vzOi1v25_xO(g0<%Z@u`Wkxu_jBX}h#9x@rS^9SGYwzwUH%#2DZ4Pd2|r2`%L+=P
zBsA)PY97SyXn}v4m793&5VtX<r^<Ab*6gJ>p=9n9>)^3-)7u>C?OjdL_k)i*wYZpU
zz)^RZ`KP`heCL-?f9583Ixc|)sg$zc@aYjf`ds=qPz>K8`Sv4?&z?+RQW9>B1)&{}
zawl%zp~Brp$ci{~1W14#jHHL}hM$7+leoz&c#hK$eu3h5A`P!!zbwt@f4;D$e4n_u
z=_(NBJ}gEwK-;&IfLO+#Xzy1s41|1_<C)Y9ZHl9Y$%1A<xeh!Squ;UJ_-M<Db5PhR
z_=AR(QLFr$Bh`C%OE2eN`=NVmZTmeQR`S1=y8+>SH#vKiheDa>CUr&({x-5VAWZjM
z2HB2l-VOWaBa0;cC^miUUtMA?Fvnm;)h9&v6qNqXjhdQUqpd6P%A|w=_F<6OmTodp
z`FQZw$={vih3q!nah`|9Vq$zB(UwGVY7R79>EUo4>;}bN{klKm<Z&VyJm^GB(x|!m
zp(|3So~gZ?dTr^rv_}(z_qg!lq%e*P=O`&A2GGrLV14y7AQ1*=j}+G>C8%qQD5l;q
zyGy<F(VA&sSR~aYlcpm&YoC>iAoF8ZU4K~Cl#gs*MROxc@6S=L>VzJTucdsRa3%F_
zzNE8%NGh6twfuJ-Suzo>F5J`ycw2Ga0Q_72bNkay_4tDmQk)DuM@-l@EbK1aU0Cz{
z!=%Xc5k2~ww8_CmlLW7*$gEuUDPjkC#u0~~Hkh306`4*eWtGxD-M)}aO}ws!OZDad
z0XCxF9R3I-)=!n$(Nq7#wivdQK_||-yEsp(#TTGVqP}Whx4=CrzFpJsLjAZ)8V2C|
zP<gsm)n;ar=eAnb)YU=`K?W4`jdbn%BezJiQSOEV1oVdsg_ZAp8FVTyi)|y#H;cll
z?s%uvTX?c1;I0=w<za>VA}@c3+!#?CYjFHX4>Q(yR6%l8gUFw3H_3S}X^pGXOjVl5
z%6&Fk|A&y(k{G=x>8u!0?J^;%=pb~lH0fPjXL%^y3Ozv%Tpw7<1Eh0`*v=`pY^R2K
ziSq4zi;3QAV4d0OoJH;?UpgWy)P>{7zL^#eZ42dg>{{Z#`A5f~-*swPacfs~M)joL
zB;eVz3Fv%2rlr}o(2~l_axqfD_swi1`XF$XxXu_U2_kI?2pc<-FbU_R$iZ`dC6OYU
zrzGm>TX-JlxJ>J4l8LSs`*IufqHW6L7DUC$hOR3YmDihxA}Zs~O8moithe?tzqES=
z$7P=QYljy!0j|1hM_Q@v|5NWWGBeaIpw+9@oTOiHIz&(&RVhA931W7LS_X-yDi_NG
z?^bLHv5de;S}5_GY0WNp+_p<%rKXkQ`RbZDEcyH_XHrD?RPwGd)cMM+E$AWAA}sXf
zw~zoy{D{m?Q1-8{cGSom<MtC90Oi#4;%p0Nv;s@CycnkUY1i)`4061>7}fcptr)*`
zWGPRJH+;hQUhy~c#~1L@NGVlocxI6NdCpFB@#ef?13P3HG<f&t`rnFyzXd+Xy1wMd
zxJ)7R%tKDdPSR}aR(u(qudyB_Zh)-Zh6sA(Wp^r4KprD`LQ7W*qJ|v(FnFGIzSxj>
z?dW}gTp;-}NEQ<2P6o7()FkBPIU47iJN8c#PP{@(z>|>9CYTg?1x+6<;_b;L&Z<DM
zX8(bA$=rzM4UQnuWmdUJV~Fdb6Y6aFuuOt2nuMwRHi*g!x)BIO^F{(1yFiquwJw=>
zaN-#2ry$F-lbP#=o@c+k$yaWw`N;1N^d*b>#sxf46RZVp)V0%Cl)pCn@O{4J`B}pZ
zW)D8{IaZDf__VTIaqd?L?-z$|Z@$m}vV$w0X|C+Y;_U+5jbz?^FFGX}blsdt=9T+1
z;%h%S^e$6aQMa4PzCEJK%_8O_B64c>XeN8wn@TgrioPWo@QP5qUnwIIItimQl3lw(
zs;(&Mk&s|>@^_AlXZJw8n%>|=c8CLH0#sd6Bvz{UG${v?2=1Z3MsY?JmX)u=aeg*2
zBVS9dJ<f{>BoHj+zXXfs?yROh=GU;Isc_+TKwVNl`x{auE40E!Fdz^M$!={E|4b|Y
zf*QGCJj9CrS{c4iXnG`kef||QM5^bCVto4w9zwlO!H2A2Pj7~2;ex~Xk?wlG73tN_
z@#ral6E><l0DnE!?)?}jaNKlZniudGnskA|W%3T|dZS{#(e*|j<Hc^6r|ofuf5LG`
z&RW(9#{TOMFk-oqp+zyJ)d}jCkbkzivNI}(u1@~F3@Rpm^#Z6Bz-|EN+eA&MmrZdS
zWFc-WKzr~YlKr5y+$pfXfz}JQp~$V<nEB2KMKzGcRcfYz_SF$2h>M#O&^n2Mc2;!t
zoMQ<y0IOnPtRnB?=Zm`a<&$PEnK3&Z=(fxua?L>=V6jc7gTbtzxQXm=KSQfq`RMtd
z{(PD0D9GFj9SZ-;bOuu%NMSl84OCk_eyO4-genf7{j58!D=M8DsgLPkP@SDBdg*&9
zA^_DFk{5;A-At-D{tERpL?t1YL0Uw~d}2bg{^UoaJ{P;8Gu}HNetDlk?c?Q8%flal
zfQ;5f3n&*_as+V7PrugA98I_}w)pWbU8ec;9;3&pYPjXb?=jT<3x^3|Qb@m_w2u0T
zYRmbx2iM_!CVp)86{VNFUW@>H^_3T~dxQ<Y-a6w}o$U0jcAF;PRDC;iK@NO+b(8Tk
zn<6;s%6W1v|Ao9=KXVwF8a<Rx3IDbqcSybMf3~-^WBF|ITe*wR6Kd?&>XPUmz>3mj
z?b`l9erg{EotjfcUR&=I|7w~IW`u5$e7S;6v>(fIgZ)0}xe$Cb0*Vg!@f!@67Mhbx
zq?i@_QZh~ow2xa=?vH@<7`_5lR9tH(qi&3meex>?x&`~<$hW2mlOn<KDn-lpQCG0(
zyJSSW2sM}zOF>p8@+Mk#uV2D{J8hN6FHZQsvJsLQE_MLeSaD*l3jmREGSKF@6Nf9I
z4Fj1wzdvo}*4<}sfU)O$8c~PVF^ph%*%i%BYJcy;oM~YXiOuqy-^Hv1ISa4!zrVnD
z=1o}cFdr1Essp4*Rehk;_HW(m^Z%Wj<!~XT-ftnVYp=O>x{4D|es<>3F5nMx2Su^q
z<MZzROdhVaU=aaHiE#4aZ__Xew;c-}>#^W>)AEi?u-|R?01{+F;`s9lKopXpF@C>M
zr5@JOmMK}?#488<WEMefFA$b=gX-n?kt@G{V#G*)jW(q+;;vwO8Tto6rRt5Bq+M%K
zyFW3R&o@h*eoUtjm5XgX&$$6nnJpswuZDSF-i58feUGG0=yuspmrnVx<S~);vn-SN
zW3lF)Slx?*!HXgLO5N)r7eDtdu0ozD<6rmj7vjP_nD4>p?OK`wBsIj4aX@<mK7S|W
zB%!-yE5Ll!|5n4E^oiI9x~;p2@N@V9`6R`YH+XBK8QFkz&<KLt?#vN(@6-}(40hv~
zErXqDRO2?pSH4Dk`uU~&*>+Ivh4trM(#l<LJ0O563!@1|r0j0?gO`4OYSfqC3|a@v
z^NMt>F$E+kv4X0|tVO~cVL&V_U%bNNd!BxReh1B;UXcBwf}LD>UY+&+(&1C#X&rgC
zsW%@Ukkk0t7L{8A6}On_z4_lNsf38cJv;%6ilTj+1A9Uuc78wLr<dbj2e6pHOU5Lw
zv+5Vm#%479pv&M%Qc+@O25cDuuOT#KIbPxKhvcvoas{#TYBwYj(ocK#Pcf>~G89PV
zHJvJv{LzK3DU<K(hdg0H!I=zoAxH(qZv6y#!B=!)X{RbT&gEZ4cc+0Su2uV=H0&gP
zaJ90f0!l;qYh1}QAllhQ03deGF12nGjJXo4P3>#w){FLh-RB-QVV%uE#>Uf#bkfIM
z8e0`cQ$R%G>zN=T1G{v;hq{TJ66Rlk1z!;8`mJCmZ9=4v!XDql1B52@__<?qo}qD=
z%t`I-lZT5qa`Z#QtDsE~oW^IpY(!iUM2oIF<&gZ$@cU4lm4wYxCU|`7^OZ?<@7f22
zwPZzyc7Rxivy&P(AfO~Yh^5j|+S+JOOhZl+<u;kO9BtTCjHgLN3koNmEfJ;+|8+Yo
z098DwiqJTD!ucbhj(na{KO@g$h3NU)OIA0sIv24lc_w~IwI;C<K%a??$TjZ-j$4HX
zyTI|Tq8N2=eFVJuXrAW2G-YTI$b)P&I*(g!e+994{j+XHK9BM<Gptmw3+SO*CRLwt
z(n4N{NlALI4gSdGN0Ob)#YXN~*QXRBT$kQ>2;p_5AdpzU6I9@@Uz3Khxly^jUQL17
z4;AEiKayHWq8%YR#+#{|<@$^P9~0VNAtgV0E-U9T2X@ZxC6=_2zV>M?e9xJ(SteW;
z+ZeCCry4UTYzO2#Gd+O8&i#VY9WI{e4?ot8+fk1@K<w&*y>;eY5eKS;Ssx~2?L!`8
zLieu-^Ok>P!aY^r@lTnxg*{|w6<sPlu5#bPT!izU71Hdi4^@z1yzRHX6Tld80Duv9
ze*|~FZ3-cGJ%zN&Ay3t6E&ISAQiMJC8%8~B|D!x%h*)=4KKKsED@*K`ZsK0(N{h25
z#Ulv#kOW`FumCoCh5({nJWi}wkg#StQk_@QlUzOFM9A=0=H;Wtt`&uLo2P?EM57UT
z?Q-ndHw$MX>QwJsn8Q5OCj;Chx-#~ipI*ayuI^FDI3_Xbj+I_qQm}~r4rCCCK|?+e
z^|5J4zCUf@^s;#A->7RdU(NDLmdnX{IJjLXyJCdmq>(j5c3zVilTuq^yb0GL_sd8@
zPJMII!7K_=EAQV|@ustQwq>5Mj4cDNS@Eja33yFkA&8~g`PZ*=?yufA=(kZPE!GI;
zHmI|cQ~)h;H9``_`Szp(DsQ-sKqB%FGP)O0Sfj};n$;VSQg~xWBW7t}vMYAxto!JS
zAe9D?1SGejUUd_yi0)s}Y69;PpWB4uvkG<ERaL|e<WiGb@wc$S-SL%Qv%-Z={r#FT
zD{t?k`4H3G&i4mzldY(wcfT1ZJRCS|@F|e@JMJwKeBN=b>>9wv3@??L6V#(lg}=<E
z`;b+=exktDpe_h}_By>;VVAf=N#3d;SXi|APwj6QY|=Plx6G8Xk+QQ_0Cg~D>hDT|
zOn{gelLCC+h*YIQ7=ReKvj3(v|5j<mQLPnkFl%tzy|7-8H04)&)V<|ULkise6)h9;
z9Tr{`1^O~#8sz-0-5FjgJ@?$|hAeK_(z2+MxTuDNur$%?a4v9If&irlTDyM?E~%F-
z`#C8mBQKC+wXus9AQ{fZq?;!lYW@dl4>?YlYCIw|3;h;cu8=d@eBhAsH&>t+UfJ<G
zDmmm^Z)hAcp@1CN8d0nd6GA|cTkqPJW;q_xNVV@vFH47i;kn)?!I}lEIKu1b;IWQi
z>cGl^i+70LD!j|s1$Dr$O+R_huOZIv?{9htUNJ9@0bkO@RnmQp#gqayAnQvtkXJ}Q
z=#4^4GJYwbFr&ybsxQyn3zEJAcRCa4-wjzRz`Ngw{5@h~dEbyCj86Um*pRcMUGCnp
z$DP+F(S?3wW;jYl)Y+4(pFqXMcM0YGZjNzMH1a;3Q4EeCQoX$2%xzx0sWR{JMSL@H
z;Vm8Y?I$ZgdC2KZ5|i+0bR!X@+KE?xs-+TpiBRkcnpr2D-s4u-c8~1;MKdj|T~;U5
zfK7#ql3Hn(o8|xkD|<aaMDu*vtU_5w73}L`Px?6;D*@V~ql=r)MbT&;d&tQ*rT=o0
zoyLKw)tP_8?iSBA_dcp|m3*ShCe*<SG8`t%Er#F!D(+Uv{st2z?*>Y>{8GSl>-FEn
zW#4tA53gY#syA|dq_^sP>1hd^`vo+djFzaPJfce+uTbAnx4<FA9ePt}?P!c<8b4=!
zu5I*Fh0_XPWJawgkANzL;fhl}BAWamGco4kQ8m&qIh^oFkl{eOz5u*Ww##b5dHLdY
zUu=u7CxjvQMi|qCe5NXbQj^(z(Rq>xo-m#K1$BB-;E%7pJi9UnmNcVs1u^&V408f)
z>IP6$X%bL^`y20P(!5zexEZ;fs&CPjr(qqz_vVvw;^^n1X4~iy@G74DGzL+!S>}*G
z!99_Vb<5&Qmj?=kmRbt$?_@@>Kud~U2`A-BWO5jdeGOpH|DipheGFqnWY%oogu?b=
zo8Ug8IP`q<3~FFK1FqSEawMwLe!N1#iPMUwC@>eGKCRLdWaJ+J5X$bd(=Yt`(j;<!
zv%4SpwY-!mAfNwVnSb$U@>lvy#s>LNUv##k_W|dumr&mRl;-0b7>Vm_hU?sMiXYKo
zEXVT|7q>{vh}@_EvCP8#mc_}M2S!qVW~s!G8&C|g-;~(+-6SX*05t+O(%8+1b33n`
zQHK=zRn4CiY|pC)Hv&DdlhBHFZj6NIE6AbUINCb|_UT{Ig1LVKq{5``G|~g_y-r*6
zEa^F%P_4r_i&=oE0-f`p-uXL=m@Iox|FUDg66Z_Z?;3ICJewb27GAX&(p9bX+7Br=
zRd-9X#iU~(kK({%pI6WCSe7P6hJ;saomkQ?ye_e)Mz*DXm3{(EeGSlGk;DZee)16I
zD#IdmvAXfg*rv@!8NM}JK;Kd%4HG!5EWp<nklsgfM(!ou+5bZl!s3#I`N)~)_%Uj{
zZ^jgzRZmuy6agF*qo%QZG?s)nPW{{>l!Ya9!lG+GSg~Gv)}67{QR*-umpj`hB4wCE
z2omAac|p?gdA*HGRK$vUmNmNpR0^uU{^ik%+uQ2BVPD;qpOzP=7y1_aJw`+?2o?KQ
zhf_2GwkQW<K39!6T|3HnCd5iRMT^#jj1yZwy*%T;_B9KnWj}_&d(qpXKzvGC$U232
zGnjN1j4`42j#_u*z|C4GdC?O8^QaL`Z6LWK^NO=ntb*vI4)CY9H;v*?-o0aeJ@SIV
zf_s;;UHG0ks2+5pwa7oVGyHwIRUnua$*mN%726B)mv$(mcDTYZScrcM&i!^~_|?;V
zutuc6Ui9s&ewe)g<oY`e*3FFt#Ot$R3HuKoP1K`2kH7h563@TqZ%O_cTLLwytZD{&
z6*fVSa;gD=*gnBf&tJ=Cnm)YtUQpv4r+d+MXq_)FsI3HiaK0NgR6{UvC^)>6ROc}*
z{(EK9m)xIQy6=hhCPf~}clj|KM2><vG3mcVR8A^qicTn*+771qoh@65;7K2yX>p7Y
z=eK=zf~P(l_|AVzbs2P%qS`{}>A3_TSs*9(Bu7JeG|so*{nEET6oJkvt2QF6X>xz^
zNNTRCP;Lm;ZQAEqKqx>v==z}S1_a4fkKqvKn#-+rw-^{bt|v0;HoY)DUng#~*Z_#d
zzsp7fvaVo;R7=3f8{O_>>fwI(6?4XvX6SETMUn6y{l|)SmO7i2%_?J3P0@4SFUB~3
zqNBP`N3JS=nF&F7uvd>C2kazn-_l7c;g3xt0Kv4n>ZgDlf@Rdl2rW2!j59VglFO`p
zx&N{O#>VHYHv8zt*L~IQ3W6kMS{RCk^ZHgopDJ~vo!NfPyU6a&RtcQk(%|(!P4fS3
z`E>nD<Iorr&<01D+^g;}1-$0Ng$#<Q`<xRU^ZUx}DU`;x4?t?}j)I@8NW`Jkw+lRL
z^f>}ZL7kja+|Gg&IPUa6xVz-uSY^qELc^5LwihR}jtM5qAbSSQaj7UI5ipW4{vJzo
ztjPa6@|h!zS=bHC2#odq<=M~-gbczMNSQ6Qj>GH5ddk+6twPe%!Q!m#H^W=kOvKW!
zc;+xzQURm$nxf%l!Zf@{5fCb<K#osN-Q72tx3p(#a&=5?UUI-y6%N4CkjMHMrp1Cw
z=sWu(PpLVDPj8x@#IBgaU#n9I%F-bw|KkOCd$P;y_tIft@uCs6K6T&4AAO12>fbTC
zVZgt#6(jfAtM6N(BX2+W#J8gqeS&|`j#je{OX?z?np}80yy-a1;u7Vxif9!@Qv~-E
zyc}tK{`MJm5i28~T#k_6zcKB(zj^6jidK9F9PU@3vlyYwBi3rkTeq_0Ot~nABvp2V
zz+>yyVxiWnx8I%&Ien=smM5Q;STL3rnUB(SdGdO$eq+1XuqVCD*mLFt?9`qLY^zey
zcybih1P%|Q=RG*2dg<H!D?O{{6=$LQQ2NI2#hdXK=!HM<1GwEl{NUdJh((fDK(3OU
zq>#D@sT^}V3u$iCI~OjWb;M%+Nd6Klw}#>`0S(q(pCB6B!F)4^c8)fj@2yLYo7i>p
z4&9-2)O8-eJBJ7h(xcqz7J`yPDA3nSoX+<cVOpBWoMMGcBbIdx?V9)2Nt32qWVb2L
zo~@w>JvN%aexvQpS<+}dqo60c2R^eOV`=fraeL5$r)$k&8?jr^O!zJ|jGEj+>`Scr
zxuF$j5AqS~Y;yKdg8XWL0v{74g=2-H{LGwVuRrd9#)cgP0CmHErn$H<vi3ZGSm(tI
zJ@MvU&H7})ld6;8KijrsWpGdB$C7AjG~2--27(7z8z?_6A2|tf0|J7-7s9G##B{cs
z=6}03(6IRVTX^{;G@n=%)c~xRBtV4gEIPW)VJ2aNtolDP7}wl0Mb&nu=_F;Tn&e@B
z<-}xCxYPEoFDdq&ryld`g=l7%%97z%3jjH9%{+M+{N?sFKt^G8uerw@V8H3z_&_6~
z444kkVOX&DyE_&18bB&3ma_8=c-G)_-UH(|SNX`aV993FI1gdu%9^t}IgMV2U)4f0
z@u@NGLVh98p$3x2NuER5Z-d!S7tf(NIbQ_!P2+r02aBAyFDdxJZ6q*tdo#+|XIC@I
z&X<e3DC@PIq1dosO=@YX-~lgfGp2?wOw@Z?Apn*j58HWM44{34m8D7=7XhA8f<G|i
zq5J@fCUv!_wv#>$Vn)M8L%MpKyf;u5=wBaxh<rV)Ww~e*#rHo=p)+BCC+#tEnsK`r
zj2X8DmzIALls|S{Q^}w*s^$aK86-W+%xgy|dn&pe=%p1f|A8U%<3wLCf7qnR&cSUf
z4EkKGKMPXxv>UI){+K=fd{|a|^T&%%Fi(&G-=P<1j*C_pf`?pjBzC#p>vl#M>J7Vi
z74<JdH#Nr=>9Mb!pzN>zi>du=A3eW)5lEUDtAJvdIixp5Z>}m{9*gY(pyk~oOJDb^
z%@=Gi4}~dS&&%XN!nk71R`V?D_kJRmb=ZUq4ErJs9P|mOqHxY(RArVE*3RRK{fDk4
zD>t~Rn<7g{V>)5Y(0L|o31~cN5oPBUwlSgVpM)eYClSy%&sVT0a3*SvMy9*QtXwO>
zPl_}jkK8BeffWY>m0Ixq(^t_*dN?qQ0_sUL&uR~2c~H*|s48-Cu5QD!|B>*s^Mz=P
zGP0ShulPHh?8gg0A)<K1+P=gzp5&ZFE6!!DbaSl>+mJVAu!c6TdIsnVed75w0n7m>
zu)QqVwT0Iho~?b?X(yU{6FWG!#@)B$oX(_Z&-SWjGIV?5`G!rC*@j%U4}9m>Tz;-A
zU60q%dj`kx74e(W#wl04M-tB;Dve!B<LUfcUj37?fZp1>#l-gWovF#och8rQ^SIP@
zr#R1hR{R9Rf~F)&@D)9xnrC{z99}y=Aos1CT$(DhSMH?e!hL+v@6|wc1SS++0vfFX
zOc1k{bXIGwg)>%`9H9lMd1?2pRVruGm;KALbsX*Y`q+pSDNpFLP8RM}72r?!=mHQ{
zVC0qWJ(6HEUNP3-BAvQaPqXvgv>A+vC52%(><k4Q)aVbw!X9LRl;(l)!3b*Ua6E1e
zg43vkTfz_GCn>D>6Q}n97ed0;Nv%F<0CVsuPyW2u)kdc}&@80oMHeqUh)?cp*k{+i
z115U|SWxyxf;%U7xdJRfqqL0XTMJjbNfeIskgF>R*2p7J3fiNa<jLkIIeI^<)NnlV
z;+(exvkhY96}>jknp-K?kz(?qE~Tu>fZtn2Fsu1&WypJ?+*@V#kXDowyBq?vtTzCv
zEZZZpvH~6Z5@%d`KVZ9aaQ=tRf@e3-+RXobhEiI^l0P7NsevDGwx^x2e%uJtJ?(o1
zNs6nFypC%PojFNscx5s3=}JHu!T<4)tAYk_e;@!(xlq=oTsZSMen*Ys-BiqEN%Byv
zl)zjZcNRl=3LvIwUS8_eXo6mbX;CD<7ri=97oyp+t4}AcUzFz&pP2Y7%lEX5eQ*Lj
zbQ5B!3>4}zuE!US&{Q<?;v0&FbziJ?CdjuxEqCqa2OpBboABCzQ5CDSU}`#x>{@OA
zech;~v<uJtKctR9Om6*fdP>8<2FnKyJt5&=0FL!OZ@+}2a_EelaAFK%ke}M<d)^1b
zq!&V#8Ent)wbbUSqZ<C;FR7J9M6C$Nu|cJ;V|CBp+IrRcGn^2^=%J1gb!2PIK|Qb2
z<$-bWCZL0TgaVDqFat=cqL@);Ku=VkjfDB%Wcy3ml3MP}{T@#xsqLiICH)xNI?#3F
z<TLDpoymo?!<AYMl6T-AL1Qi~t<ICXy0h29HWa=^e_rcgxjb8-^VM+cJz>Dx*Hs)y
zI|_$-p5^E#4mte~v%pftgXRX}O$)hBkMrBG+oO&b-q9RcXZ&PZ<Y6hNrT3(CSAE?e
z`pfxx=8c%VNy%61QyvQ>3W6$DLj=KcJ*)(fs?ks$_R~El`ly)Y8gHIU^*LbA5Uik4
z#Lf)2?G239deXV=*t3#Bb%ZpCd)H4sV1m3}pl(22I6d>l3ru6t3u!ivyG#Haa>5(S
zB7vo=$wnEytH~zzqmc{n|E00f#QWA>t7gwyphfm_<{uCr(x&_<qtXn0cLK|WUqj5R
zG!w%|nBaM+5u_Q}ysbc!EY5w+kf1WESlJTPkSp><4$xtm01@@`d~cJ8HAP#Fc&1;v
zr+~B!z&=)VRrF&EBp6t*9_H)<bR2eMBh9>Z!by0&TD>W_`m;&3^C9Dok;zOw&Lr;=
zzyhs0U|YaE)(<XFxJaVQ8Lp2xj@!@^md(1ef754u25c=D$0qhU_Ag(fn|Mjx#}wSa
zvkhY6d6jsJav1*gt*_?ohit~8g)<sVrc>_-(gN>ZaVf2xFC-Y6F4eM7#=TQ;dE!%P
z$<WgCCTD!|TMH5wt;HuWHpDo%N*rI#Tpg-KmdABJ7zbLUB9}~bKkiIuzPFLZQ2~;V
zevVmQPr42IY3sz|@b>?<4alTV5F?)aIi3GkSX)Y^9N=aV4)E&eYwlykGJQQH&+bl{
zjBV^l#SAfDtHp0O<Q=OHe>Crc4H9M_(k;ffxXao9*6ODd@;dQVBfX2{GG-rTh3dI^
zsKZCegg7umM>hf3e973Iybs#$V{Br%o*wLq!#9>aDEJlc?~G~i7^gce4*P6?QUcD$
zQwgzkLnWJ*jMe9&_vP`^Se~iF0#}L_w!ltc@<FsGi`9Xcn|QBeiCbTcm}ez4ZD5G)
zcr@4VdZf-jojE&QAM2+<;f@=azFwsKaGJW}ZsR@*z_e!%Sq%RCcfF?3`oc6v)A~eu
zM6;8KE|Yg(OKbZrAd;9~tum3Gk>-zrBis9$#J=<f&Y$9$#&qkiy&NTbNHj1PP^&Sr
zZr=jbD+2&jV?VvGreF!Uh4^=9X6aoPcYV*D9cMv`0MxZp;w{%j3r^FMUXiDJk#F#u
zwb|^hZw%B9$tFAd3F;cyUx8c_IqiDef2Yl<N%CIrQb`Q0kv8NY&r-YI-GLidM+Vew
zj1$l{@86wXIkLtP90S=0kV(pHMr19Bv;{!Um##dcbs5X5zw0dCyu(k>)`m|-D~yn~
z-BQ;IrU4W%7-1j*DMAA0Wq^L3Bo2v9AuzT%C@D!CK-gk@Ke|20*!Yc&bo0CyK@Ci*
z>_YpR(??gtJY3tv8Qb;^!Gnk&D&ZXH4S4C>dZtBy4KT`~PMea~M<QtLj0o_e_*t=y
z%IpieBmH2^E|>INIR&mEeWdiL)Dru?ZiB;GBt`ik@+GEj(<zS~qL|Vil{;3~&XII(
z6D+Uth2s|8qGPQ9+xhHPzuTRpT4|M87ofk)y1c1zkHTJ~J*pUV>ftqAbYsBYi}zC;
zrFM})Z}E)t@F1E1O#L{D6h0sA56EkPTj6;ZH>FsMUzYVh@>(?zcK2$&7wHf_x~e@D
zQ-A?47T==3eXwNBx$-^aXis;=f_Rs?C5iYIWYdUx=LHzGE*S#9NaXQdh+_6%OGFnz
zd(im3pr2{I$;}uP*6`0R!6~wPv-WZ{Hi8Tw=^)8JJ?<)nSstUQ`6xl((T&y2L}!Mm
zD|p3(la5u?E}%mAEiRN`D7jR2B3Ec(Z3(Y=&GJ@m<<_xBtnC9bRrN_~xrxf`|5*1s
z3??h5_dOS7^Q>&=V3e`_ZchV$kQ;iD9o#^+c{!OVfj_R>{oK^c4#E%^rVhCe$^X!k
z)#|0Vau++q)A?=PTKd%)n^vL`In5N>Kos(VATHd3IQ?V}s3%j~lzGMV@H*Gn`kRFC
z6)Yh9L$aV%WRGdk>}VbW2GEu<jB3C;5iu?G9|vX+{DT2f3&H5rJLhFUmRb-2CteJ8
zd(jV*6%RN%I93V=CLpX?GO2$WT+QDz*Q>jO$MP{N#IiJ2BLA4W2s5A%JuvP5DIfte
z2fVnq&iM9JU{*gqSo7jMR`VAp(EEmY2`XsbSn+_i>OW3{kQ%f8deV6deIFinkPEyk
zrsOX-`>@!naR(YkOg;c9u*sE&Gv*BH4k|;Vx<VVe7J7hI%5>fvL2HymsP#!tDs?1T
z{(F@64ZZD~*$dgeP1mb2uFzRRml@V@PA1ioixN!du8jK%ilJpD7VYwcQr=+X`*iyU
z;Hz6AXsYw%6Q9>rtbPLcwEW3x$s=yuE!banMykW`+%?2n3}aMm_<6|du%bOlp^?&x
z9xbpR8G2{mpQ;#h$gLUf2UHQzBl4(lKexBDw}`1)Y|1M{W%jz|kL91PJG8D}2~gnz
zs0Fui+le)_S?T|>E2QZ=0=yE$PV2^#N#>>|(E6S@@Y(rBmh!!2NzzB`Kl)EB6tI`P
zEL{4ubtluC<h?dVcJT5`Cu!xWD%masOf6MYp2-w2^WS8R)jj;%ee1@x4fVb)=m&1J
zdDxs^C5t>gFb}=p;SwdYQtacwZZPx^uQujj!r<(|;(loN$=WIW{>_@yXab)4S`oVc
z73Qme?wt0QZ;AP3mT+RQni-Ev?Ru!r`fe~<3yk(W%Cm2-*!e@g+*{G^q}1<#W@K|?
zh8670jH0%Yy1G)*;<@_Y-0*@(djpmz^tqLIvO=+pw)X!rG8}7PZR1mAi^p9Ldz$2a
zT0~{FQ8C!t-1$nIB|rEw@AW_<qwmY1MS<3yGeyCreT=1NglT_HX}2jaci${@Gc>1#
z>haVIuK#$t-bFUu#-NEfo#nrsa~%Xts&e8F-C@L{Pxfr4GtV~CxS`h|>>zKDn8vyA
zy*aK~KqTXPzbiYi%i&k>k6ObL1E4gPo?MCSeGP=;3CrePx;)gMp$=<-nnpxDV>&J{
zdkP^*GzuxF2)-NF+XJY{$i(-~jEij0DPl3TFO|Z<m62N8!8(}ooPtI>Ku>FXQO%qM
zEE?^^y)pNd52+^bkDS(def&)}8|R32zDUb1FGPfFlq8!?NoGFAUvQre5Sp&LiR501
z8{wQpxZOdoT+Q$}UOWS=Ax<BrNs2RRjYJ43Ad*;ta#SPC)M}#Irk?eBcp13&yA~|E
z(@Ja2#&vndd_Fgw=LCXT@D**C@j2QUUMW^0g6<Zp5_#VZb5v>%GwFXrP}65hm;$J@
zfs?0luwXIE0dy~~{@xn@be?BrmOoDUKfUzRTQ${KDgtI{R%;plEKE749SO}5PX+hk
zi0!+Lq-*Q}rXODO5ahJ0p9bWTvc|-XQ*Q4&UR?$O=`SG;q`yR!mxFV(PWH~@tC*r9
zAxX=UCHmJ*$P=m+9CKF^^cCGEL*Ey-g<5?^u>S5XP0B(6D?n4DtF_L~N*>bf$&$lw
ztv}OTGG#O`s)`|i)0pU|=9WoNqZ6}r$<dL{xx%cv7;_nK`Z}S2NiI7M!1k~s5LN)H
zf<*0{=1lfxo@|Ip1|S}Re<b2<3^9PTmh(e*(3$d2_jB*9HeF|`{N1vkas%UD!p0Kp
z+-33v18Q_$Q}fN01MZ>!h-uJm;!0<XSg}(kQm1?h|B6{Ae?Nmu>|Z&}O<H%Qv`{}y
zi-?bO`nUx;uMu#GyN`f<?6_<u^jOgU_`raH+H>}AAL1Do-L6lp>9T_A$n-?I9Mxiw
zje;qIWflW(3^Z~eDr8ZL|Hx@1uC9_19oG8?2U|nBmiRx<o3xGYaF<&U_JN?(TF67^
zH&*BY;)Cd{W&L@)X7+F>L}#U6c*Rd^<rLDz2-@W9%NIB_H94pS6i|l8A^HYgbf;$B
zAI|3f*y8IZvbL>14hd7Ah3ab^*>u3fg@6-F9p00`b*lV-cpnr-@2*e>8r#kAgB>{u
zW01$s{5B-}AOX+7H^o|F;oN6)`fw3|>1*y-v3mdmYc~v@uQ;F9=z_4h7ZO#p;!^)z
zxB(Bu^zqYHeY1<FFo)1Os&;xhX*EyI@8`e_1X9^!^{n<nDr_SDwXA3tG^qM{@~4ni
zv(Sb+7cCR=W@ZX3hC{GoA41#mp&th^Ct~A&Q#$$K+I+oSD#Cm(cRfwZ@mHoU19=i_
z8lOue+^%;3TR;<FUn>t!^f=e0tGl}XRX>m;GtaH2`ZCD{0R(%OI=za*st`D<O4X<6
zXFth&Y3H2sZDeG&V-9ZA@vj~$#T`iXa?@p!?7Afm>0S>s_Ou*08FBjJCD6PxB8&a?
zaW|GU?~&B>M+4`|pRrTrfJgu~{TZzaWLWgm`z*i4>1TIiHH-~0fJF^-Ai5j6=E+1(
z%G=&9*8rzKdpvd)7Zg|7E+;6;Dy9Hf-))wgUoiC0OJ|XITxoXaFql-8*`@*RZg>H9
z7ce)domYck0+7}JUp5HJz1v3*XK~;A-(u>)?nJA6vsHU{s&?izqL5Ldvl7<V{Z~J%
z>hKGvm-5c_Yjqy%VV!lQ_O~0ryBSe{s0_^i4svYhTVS%xkoFZ?JYeyv@iWyobRrlb
zUTy~LF=Vgs$c0`X)#clNK{QI<)f}|Ht4nsBJWT8qkl3Pc$lo@L?#Amhnz=Oo{v(O;
zsBG>w72+=6B^!<H{aX7u8s`ExN<6vLtK}&>X8KXIRs^wmAB$4mOlm{@YlMK?qWJcU
zMkEx8+li1gAUU-28yMpy&tG1XT1Af<<Jv}Jo9{=IK?!?+^8s3+)j%su7V@vp``)_8
z%*w>?PtAzmUhv)^$Aa7vL=EUa0^5ENKVWed4sJkif6c(_F}VdiHTYv=zfbXHy(`e+
zq$un2(Bu&itfNN~HMFJd;3vmRI_a~!BX16$HAgRLnErf3pDwR5&lGGk7Hzo>y25>?
zd^H<jm7*aD@gLPwNxU+Y5>BRIt+$hYn-N#8pmuvM#0*B3O5$nl2+ECkN{d5XYz$!v
z^4X=%+<dik@IT_(BSiNqW9-r33>PpGNS^J~V1p)RoveU<JPAPED9jS3-@Xy3l6+X}
zo62$w2*Fq6fpq<=iBhArX}R_I|EJ0O_D=1<!W#TT4TtU<g1DBOVU^e~2~HlZ@Xsi(
ze4Y+z1xTA)-PJXKwDI)hExPrbuKoJ<{YPIzUY%GU;l{*2x9p1U{x1`Rt1~G*j^*VE
zNed&?U2z@qiws+)LzBAw$pi4+x<$^~qO<OuZMN0om)!>5l!I9URFQ!4%??&-P#S>$
z-?Ex={6rL7;=VK}GzXpqc4LYfI~yf`KLj}&l#~~M(o%pfBNJ%hynYYWDM{x((U%U(
zmg3KT?pT(T5f|A)Qwc+*pAP;k=WXyfPv2Rk%X2&UP1M8HYaF?N3xXY5r`snN?*rZp
zj<bx};^00XJKTIEb@Auvi@5E#>4ET@hvwi`Vi4o(*(+l0x^&FpT<vt)$DQARW+yHQ
zK7I7u@pNL9<27&#=Hw)f^*UE!2h4v@gw{KJHWG61W|g=i#}u72+b(ci3Al@ROZ=lY
z{6n#JzB94emF!ZL*^?#1X8K?DtxBKooNat~@h%E|Cxvir(Nf`mxzkM6WuEI5kXk^G
zAr-C%gEKl$?%_?MpHD&cK|`DHWu#f`m2;#8cPlT1QMN6F17jR<jWA7s6{7*YvKW+U
z-~fSi)8YXTpzZkGBRBHhl-zDZf^}_rW`c9qo886~B?ZOEynXYQMnreQ6X*}UR0gl`
z);y5;L7_^ZN3Cf>3<~G|%$vBx2q3=D&8b}AS|%=(Y%go`u+pQ3_Z!~Al0>2)+@Az{
zPp=m_Nn*_s-~bxu{fDH97v*zC5iyb8f;g-7$Eh;?7Ebx_+*MfXhjB3Gl32}m6$H1H
zAV`8X3cJIPO_tm)p~2s0UlsbnWr+ivnXY9J-*-_d=YwPwLC8>a-B>RW@Gz*5?OJ5#
z9f&0HWUyN_HU-`~#wD3?Ji7&8@rB=pgoyVK0#07y7T|zD5T?l~F<YB;GUFTOj)IC?
z;e%i9#EA99o<I-9;eZ9A<$9~7HDZGksc<a_7=ZM0!(U&zdGe;sg$AkTZS&;M!3IJ9
zba5gK)1d6MK<{IxRcrV`!im5gA+Nsu3j(51WrtEqYvrso@KGTv$>2Lymxm=)IiEJ1
zZ`Anvu4nOxUPV0FZcv$%egEeJOR2%Fr8pgjt28<p-iHq+5q5-ERwZyXRcOC(r2<S%
z_F!#>4^XQe_SG)?{nq-pc4=j=0^7#p&9jf*48U&oTI3BmoGn?&*McYc;Ju8Bvnf1`
zI*dN8@5V>-tIX21NT&rl()`^n|1E!EK>5RkA;)cp#R5FJ<?mVh&mf-u*IgV>H<^_z
z73?2pUtx;9Ag$$**LiJ#^HKl$voo6?__|I1Xz&QgoXCYYEXh1G33Z}6!&3M+2M7jD
z;GN6vev_;GOc1UmGw%x0*D{hF>W@+s5J6~=Qm|FBcrP&VUt>i%j5Gg_ADsI<ppGdI
z^+7m(+YsqcY$!B&-XY`f0APfL7u8YN5r7V1M_M0qjCVml4AMxgGe)RAVU=b(cl~RF
zpmPr#C4b!c(wam1?MaE9%8xgVMcHC>9>@${(Jp2Z#wN^4_t4AFqW2^KOB<7^EjR8R
zP^gbIlnw%@G|+whf=mDUAcRTU7w@Ej4=esi@$LR=gP`_VxBRAMMJ@nROUgX)3Tln6
z>$V(>)0cdp<j@5<D-L#P8$93gD7qMIaP<7t=`dyPyksrH*vSEJaJTu>zPB^!v%T;B
zsa&e$i0k7~d+=9B;nzfW?$15AC`4<;y|BGSV3EuZwo<8dXDJG2Mx`bX6ifNFKTR|p
zPB4_SQ0uBoL*}o3t!hR_0^_OqQUIC55&xPel7|V3Ts(`rj-;`s)6YY<>9c*zg~*b$
zu#*9Bk1Yvf+E73Ka?p(P`iHz!)#(D~XAs6-%k2sZiyt{8<tm>^9x!&)bd-|%FzPg&
zmKMqzerpC$5uH(kz0Lmw^!^~s&E2`M)p>2;{zBrp#}ni8M8`8SEHH9;Xm$TlMEf0D
z`Y>Jmy=DG%&0vb}E9|*T9cw9D6CA+&kT{AZcb##jL?CCYbUE_b=l(a)5paDCL(71S
zZk|QU`2l``DM;a&SnkKgm#EKlpDLTvv&J42{Ydw&Wsr<CF(xM9G{}R7#|!j;T_bC$
z+(s2pt0+Rj%_<x@XLGkf=IHvkJLgZ|`)&DDynGv@$OINwMDXn&Q{oCFf3h;mj?3rL
zp%8I3gAFfxUZ6sbroR7c%!_>1KW8=?jI~%C&C5<_dYP@u+UkUPNUlL-K1TaT_^9GR
z8fA<2>x1!jKt%|-#W6^-g+4EL&}$nn2S&(=8obm8`!4Xis23~}zZxv^OBpRld1W=%
zQ<5i12^~oz`&Rz`t;APw_<X|zF@yp#UwW~DD23FgDj&UNG1O@z+;TB5TUa-=jV5Eg
z_?X}Z)Hlax-@cUVeGFDC>MguQ^?oQ+?}61lC5piD3>(!j7P~xmX>T>WrAiM2Eo+^C
z^*!(<QZ3TwDvMQ`Vl=(PVHA{RYTu3<P1DO{vA&=E?%#@}-@U2eX4Uf_F90+_!zDKS
zT_^%br@PpS*ixJS@L=F>6W#MAqN{G89yU-F&7vInsq!W|&a!8fap82rBUi4nv%Coq
zDwA;Nc3uH9=o#^`Gtt$ZFBL%l^Y?Z703fxJY98DUYTuucf_}h3T~o8@ImHxsavm$x
zf6+VLaBIXRW8{O)kL_1&Y|xf8Y>`?7R7r#3>i5zJ%?E7!H4HulFF$?EvXbvGkTGaT
zm+JX7zu@()aNJAZ;sAAd#$DgkwzC4>9b@15$)51f2wGT>bUfRLa^X9jzeXq?B)8YJ
zS9d9+lkX1=T^~BBXZ$Mpv~0{3WkY!oVMo+Qos?-h`=+);y#MS5gSzt~Cd){(>Jnn(
z=FlD@5hSFr#`BVWQ9Sq=-Tgqm^Z}*n^eh2Ue}C_0lW+Syh9olrCiZr*XryP|9f;9f
zP7xzmP>Xq8)&2qI>heqDhj$hO?#6f;w@V;5$V!v?h<&8UgztnJia<0$(eoY@7PShL
z_qL<{;G<sdj`k})nASJB9&$eAJ?B^N;)LI^R^?Sln%81vmC!(ilG%dGzqv7nI4Vq`
zy9=ss(tLg3plCkOD-JI8e-VhNx3v*4RZ#rSst)^+??+ZoY)$Ewv*#!dR_Ts<`u6do
zXO8TeZSM_d-^eH@1GB!zoK}}O<NDu3@as6^UOj%>VeiAKG5+0PM4hh;?MvLw2}=9f
z!>Bk>@wxZf3H`&tht<y=e0++q6Q(ToUKgKke#&xd>CU*@?Cpq)o}aq3U(%LzYz~u^
zMVZx1rfOck<~3s2W6*T7`o})PhxPN7cK5MZO!!j;b5H}+ZEm;jaSv@>$hcT(m8A>A
zyn)wL&L3B@DSL&X5Pj;UX)1v%R)O*7iXX2Y2R5_ufga)H8(^}<xQ9qm))OY%%=_{7
zd2Q?vAEnyRKIxnjp@H+j5~rp+ibgzQ{4VSX=UtXJLgW>bkW+gvZI)iTZ!-G-KL6tF
zL_41vhIUBHkfNPh3*G3M>aAX$7<uRr&as&nzeoA<&U*_`%^rq5@Vvp+_}WBIbi?EL
z$hapUouE`cDNf^y`CwVT)iXBIY4!NUQXBDiF5d=YQQ>QP^tcW`UM)~FQw}cNAOhR=
z0P}^3MU5I+npK!l*0et`ZMM0EsW#klqA99EUadNTmxt~_a~q(JYWU)=IT*@FF7wg1
zpQI)a{jhS;A3sEFH@yv$`9<5|py}Z9K%4iodaY(ZUpxzs!{aRn3~}7~Y}y@n66@D`
z%VL*)jZdS<%IiTg1I0NzX(8fyrXNag@20YrT^VTqa-?!NSem9FKO5<zoec67Q<<YL
zq6f44mnEmHDodnZTZ%WEFqFDr{+1Jb`}7+WC5;@Rz6v`V%(7Wf(-0-k;zIyp5!+%I
zqppmh?kTHI2&Ci$j3R$icrZPuI~_ft`qlLd^<zP~^(VnZnNrBS2V+8X5|Bwy*Ml2b
zhAcsslE<Ilzji$jxTc!C=<?p<1LlUPZ1KE|a*+gV0*v9k`v`)os&}Z{p;tf{a1u>U
zF8{ROVc7|1l`smq(Y}QsK^_o|KQztH4L=(-)%4sb6Jar|vvow(C^f)3S>P%H(Q0+A
zVL58f)lcyuzi<+U9N3>R6$UpcDODw(NPqBj|12oD#}_^WR~}E0lGC+f1j&?{3MX#`
z>VGaS7~)fixra)38)-UQa=Q^1E_~0i-fY;6W&FvE|AtRZAbi{(iO>QmCV9HU;hy&8
z$@=H|mnsAr+KMVv-%My*@#i@}YTvHj*B+MCoOKbpFDD~~TEp;^^k;HKrM|m%9*td)
zeeW86X2+w&$Nn}b%j(8vC+eAA)-tJ=@5khnx*+?~VEgbCp`M3_Fh|L-jP7nci-IF$
zP~&|$gr~wm#){<XeGolJC4Ipb8;jk@@2&rQVDG-^f3EOR=GcKvPz#i~>`ZZpYJ{n6
z%6oC$7eMG-!ZUHW{Z>V?lk7Hv1P>~6CO)bu)jP6%MD0IqIe4Ny=ajC}8{ZQy#l|bu
z1Xz+z^z%(Jr5^$pApM_S8hc;j28E*b7ck#!+-v%l<H~q`S-?XxoR!*9Xoui&+pk6%
zk*D^Xqq}=3RjBTVYn<v7df|e>{dX6MyUcM*>me;pq|55bpyE9+Q}av?w^f4=e}wF`
ze0%tGfR=dLnv&UCuxkdFWy0PKbQ02$yYCb8P;cV--6EO*sL~bdD{(>>v8mrV9?3b@
z^Tb9PGnya$lDv4{*xViZF`o;u8(?F3IxY0(j|)xrQ08-uoybG%25;ZNS+$Jq_qf|?
zUz5GOf&T%)lFh4U1MdVyzmXLznEM!2X|U5N*sM2R;q%$;CBl<J7VXT-_qp&~e$xIO
zHx54J)W|!M8ZJ1oIwgU1V*JuQedf?hhb4jB4!Di{Vt{`r|Fg{LyL~0yvYOU+xATxl
z3p|&N$<l?xW0w~|(c2q1i=Ugeqy`u5T@0OW+=%@1HpR|dV&&~Rb$|?8-Q99q|IMnc
z%2Y!Ylj~{55?@WiF>LQ1TrGbhd53sbHsn!UTjtP)nkZZ6abeckoaJbuf}Nn-Wkx!{
zB-0OL_1^(T3rhL8+Jw6g^XS-e+kpEVQS+*ga>Ak!<5!hFrJM$Tz=%ZS{7+_Ob7ep~
zFlG-dd@D?BF=_Jg|DozEqv8seF5Osgceen+El6-DxH|-w1b1&BK!D(G!GpUyjk^=v
zEx5bS$-Oh*%>2$;p;z}g_3qmHsd`hVUfg)x-d-ACxp53;qaA0c6lNf_=bWjm=1%2~
z+<c#>N}kch4moqkMFcVUv|7Yy;aHQW;bsD-;qr2ziQG0qclv!QIJobnreK4`kg@$I
z;We3|izA90j{PzRHN2CNWG{o|BT!kKq~Ev6UWR`2emMax_vrb-q;l(M4#2u46?Fa?
zzw`QbPK~md11J3P-p#QipfzaHg0ia3R?`RmerkZUIVr4_REA}lrTKL5BD9wp6a`v}
z;V^%{eOoCNP&V>@yoVN=qa>S!^N8hUg`dmI$wS10j#s&&*Zh|SYM?`w#!nI18*kFn
zaoCl=uBmp03fwug@-?^{LIF<{5ONDyD!h#pbp5v<akhzb$jS^ICiY6nn~te}5J)N|
zdv9cEo5^hSh`XD<cA+DiF?+gbAYI^j3D5z^1Tw`Pv_}r@LHg_Y@>El<;mm9Ig#Aam
z@9NohOm~Zv<jtHZ6`A6!CC>QVbXh)o{Im5o;=my_c9yUig-Yd6rX7JSZLJQ8;$719
z*3KWe%6<ghLRIzLK5}AkbS)H8PSPQ+U<>74L21$dx|#gMr*GE%HS0a6RgVkC(^rJ;
z0=PSf)~MZnxynlkS-L=;uhT-->;1eBJNJAM*eU==yeRddtb<!Euh>bJTj%Dv_tRav
zQ}<i^NRt!Snl_)?@weu|dTVMDT2N`FTIG%XXb;4br~lrgzX(i&e+Kic;x7$%oo69p
zB5kR#L03<T{L)tag;Q#S)<3-=;V@gxU%1{5ZI9M#GnzDzwZ=-;TGY0j{Z~4c?{SYw
zM@tMNPEEd8?gENW6f`fxX4S=0mpV}^uJW%q^LoAk^njXBCok?RihcZ;Cr=zn2$ROM
ziTVfDTg7YE3iH^Kb0eGK7-XKW7*M%Z>JV_6>|*bSImzCZAniSZli0F-C3w+O*<!HN
zRlH!Y=6j7|(GO{u<3Y+YBYo-^QZo7~UULYxto6A-80L1N%h{pOBpnC@px{eEo}f)D
zaaIz%>b0Jmes*u)?-}F!HIw1~jxVu+(}}e!48BKx1ZA*BiON(dviYxYQ4pyuA;(Vj
z+)J}FXxjN28rKxiN8Sc84{QuJt(q?E;_h{ueAe^{mecD@e%xl#@gmuR%VdT`W9P?n
zS>&V?RQuPP-GbYGv%_y`P@hokqrk7w7#VagsH|&49H~I<3U8pnSdx{_)^@QcYfsi;
zx;868ZkFd}IeDLFAoK0m^rNs{d{su(Nv%tz@E6Tt{aFY)Y#S(g2|#ncelKiupmi-Q
z+xiO~m!9R*YQ@E3T~mGtTR9X_-X*-$G%QYsNjz&meoI5xPSWQwBmwSqfe6=AD<r?z
zR;s!L9L|eKv-|q(b9d@x+x3`+x>)|Yv*d`dhuT$Lc4LAQO?<~@XHukMZpqiUSKRQ6
zCs>%A)MaM``is=?l~!Yr9os5*t)w4aT&e59o3oWnssiq4HFOnUQg}nK<V7wW3*SI^
zzN(KS^Rik9q6jv;Nz*Jfr4c&CMlT|nH>u8O-dJ<fY~B*;Ko6{80BQdP{L(iU;S@0)
zs~gG~mSiyw-#48YsSCi`NTVB9<x6&bwE+%y^pyf>U#T0$+`*jqm$oT)YU_TXvPYJ^
z1;oSrrTf^(EFp{sbMY)oO$tWbO6ZCnwCJNcKD=hN4t+tc`$B82ItF=Anh-}1Dg*@@
zy$IZn?a;VXlMy>SF(s*Iq@Hh{28?pOFW;B|-(QtXC5n~8KtbQpF!{5wKvGNeIldZp
z8*r%MV)7&^*`ak{HodxbE?>tG&7NuglE~)`8@8R5tr-i@leFQ|G5p?Y3|~(s+c?TG
zBI~E{Rx#FOyacg+d1MJ%h6bPP_>I~8ohSEsfxk<;Al2Lw?1nX>v7qsx6ByO#P_mIF
zxS25)F7m}_Oc~DdjALDXEO<&XUWDXCaiZ?C^tSeA;Bhf++5}ng2Bb%Fr0MbKWa^E;
zsiEd9?`-^gk7tB9GQ+o2E2iga#t~sa?>?Ylto&Br*}IypwZc_<>A<Psk^=2fEW)}I
zbx-V^*D}Rrz1$P`@f#jeO>Bg8!)_4DAJ(4JEy9#p-kUV6tR-E1YUFhDKy|2GtjX_0
z6C;J@(<~MlLXwRoq$)TTWQ=POrNULfbde1c=DMHb&#ExbNx)4gl73_WeyhaExGO8n
z)xV+t)^lJ%po=m@MCCPJ<=5X9?F&p~G(|K(EMkw+VZw@o<bHKOB1?h4zj*doy31;I
z!CA7d>?bT;0Nz@9YPcrQpr<asi{ckW`7Nz*UI^z9y!2`RaXx;dPE1!Dx*CChdF=zc
z*v3!%3f>S#c8A>ozw7xtqm8@yK*w5Bn^_csD7$M{iQvAcBlR1uV0pbq{3oc}nXix_
zJZPQSpqjZLR;i`+uTFCuJR>w-&l2M=d8O*$xH=P?3SZ~Tlb-D%U2HfcY=4XBX$Q!9
zRHwK)<e(yhh3C_gfT<8Vdp^TMLII#iGrcL4WGV8}$UUv1qeO7K>zWI@R%SX!ioMfj
zK6&U%(l+=`dH?(ArEZX+g`=bFovC3v9$vG|BM-G0DAPlh8Jy4q1aaIE*UW0Hky6Ey
z<o)g=PaCEBqsv_u8T=n~I?Kw0{qF-tnzEEn|Nfa)&2LBDtuL@31P&L{f=xRJa)8Oy
z%^fwk!@r4$^2>LA*h^gKN`eXUkJ22s{>8(FktKB&WM7niFROzhmPL(L<ba99D6C%<
zNiR3I1iRH^>5N$<4;8*Fb%{~_y*+OZxm7}eZNM>uc-PacMM2h}!HGp0$0zD0;t+H%
zulzzr&zfcLu9NjjzYj)g%4!*0&(6(1WtI!Kj$9(51x5b}=nf(0gf8yRYK}uiqe^Ga
z%PZ4|FHKbJ7x=J=QJidU&mu+~rkOwTnll?F0-X)rMdpv3UD5qswY?&(LKw@vE6>aL
zJUY<eTgE*%kNnm}ynSof8dMUk1xK*hL`%t4u`F%wKHMM#<(x*OHK`cv8PlvWab{1l
z%iu5i^KB<UbkA}1=@5E}4KjyP-VK|5F^*HA%nF^={7C8zlx%RkW3k}SZUY~Y2EFUe
zGP6}<UPd*Lvx<Qem*VEaC%2>YbpMJ^sHEU1;K1RxZ%gJq=A^Csyn49!r^iMGPKiT~
z1i`TK8<rg>))!mPX7Abux4~_Jm<`BFUFwuGzpLw!{RyA6tJed!FZ@zxUHcfiqG5e@
zvZG@p=Hrq)xb^<7L_;pt@igbNrWYDfvHknck*828jL_MPC^&*4sqat2YKOvey)k>k
zgScTn#%3vCE!j?}8sYqWB?9TEz&OIoK1`ZY{P^{8lt6q|)~;mf6n|;2{}l2zx1L1Q
zB!^&&1wA0d)W7It&7zYsN*Ao(>MTGZ3ICbYe_A*7hTHSqLM(%sSGlGZWFWGr9Q4eY
z@AqRxIKGYOlL9l7dBJ=dgAw2boL1mg+?iv1)_7g>d9$xg9DQj!rF(c^VdJK9&ET&E
zM;a_Ymn^0A4INt8@ZI$KYih{#qyokbS-=sO<j2T30r7*;m*xgea>&bG_{}<v1UF{D
z1TF{UQJS>b!>d@KV};Ce+g1J<;G6>@vzE~PGL<PKvfdI%(?QR1TdbrPa<omu+IP9{
zo9|xr`W9*bUKXzd)jZP+X>JbRBm10Zz9aRdalm_jRZ41QKdd}zfz?FVtitSDur|op
zMHu@Lv78JRmXog;eMx6~WcD>V@)UlnM9Zh#y}^YU=x1T<u1v}B26cyXO22y`W7`I(
zkqg}Af7H2z6Ui7+7gifU+1^_(1pZ>u1p>DJ-{{SHA8E3us+5+;RT-~bpzR{|tx2B#
z0-ETlR_fG*)=OU3<-p*W@Mk_y8}`(_v7!AC4;?YiBfCkG<4k)S&&C-n`?bZr+V2~)
zcdl^$&L7w1?K9k3?DoOGvV%#R+%R@oMZVVy)K17@V+jo@gXsC6#Yp;<w4v?|GMME-
zheSUpi&$V`$zFF>3AVRWQ8Blk!iXK%zt9-Tz1{wuu0NKYlT4*1Ec5#zq>I1sHHP^q
z8j}ddQ|${rPP1C|RUux%63dM-H`HT%ygkI$tvKMwP<UJ+{Q1!Pt=>OsTr6F@<9PK-
z(IYXcQp`h!ORWrETA!E?X?suDlCBICgzH}rxmXX*OE`3I^9%jjS3}#{o_i|)n`J7A
z$yIqv^moS&{a7V#JvCrtd`3us#pdtA3Q~d2BO`L{HD~?uy(anH`eTR8>yL(MObn0b
z9dA3c`2=fWK{8|N(KbuL+`)0$I9JeTbhW`z!m(&o7Av#owO&m`AEt9tY2Q%^t@af&
zJxhyAzn8ANJx#A<k6-JoqiE!GX`8xlgaIK%U^Q)~_rY_dq0OXH8YYn?utxYn3Ojq3
zzbDF=58}_Lm_#l1N(n<}C|C$)mHxodp8mL-<)5usImz-nVJ*yjc1Lu#!htGHeVCo{
zCRDpGWnnU}aePu#f|M4VhGc*m_<#R_2+iF-Dy&ZIgEtpnTf3BWKosE32-FRi`s3BQ
z5zWH6v}N=C_mNSP7;oN~A4>LrC{l5ktos_;Nej6vBN{>*4>&`6L#1%05<W?Q46+}&
zCX37Vql>F2Y=N~yD6xD!3_nWFu^qV~Da9-LNa~RPs4?7^F_%|9rTSg@O;$|9ICs{b
zd}!h2&3ZJK)gZo;azD=_o5;bZxeNs0rP1G+pnU0;Zc0;g`{BeX3ZHE!FK#5V;S4KO
z$N&_+MJtA7-LE&y6}l$@;b`%^@*7qDUp}8u*sgPsp9B6RZ4eeBVm1H+eb6t}cu3E$
z{1H#%=XS0XK6A51*~^6q70`!0(ytx7soyFNZ}8`U<M49{x7$6E5f+4l|M>gV3n*Bl
zc0HL&HR1j5;A-3ea?Hoi-O?(w9e6bP58mdZewQb?)fRK|$c!Ls+S#!uadPFCQ~Ayt
z*W6P5K0Il=AI=t1Cf<qYQHoEST8|iV$;{&akz?l59n;W*%bJ_$`*9gEYeqP$Rys`U
z_fK564y7=|xR{szhshGnO}}id=i`=%M18rzJJs;LWE6sTDb?tMqiNMQ<(%RLAyC<A
zig9D8G52&(!g(vg?EPaKaLRO5luQ)o<d_~Qr2@%aczex;E>8$2H@(iVjlX5hvz(s^
zL(JcPJWk>K8xWbZ@paYg*75LTA(rNp!5LF@zZrdJn)QRtPWOCsy)FG~7V$*By0Bz>
z#KKuV80kfm5vCi5<D@FF7C}t;{%Py@S<jK_s}m$J;kEdXZJ%Sv!`RUv-xjRqT0Ujm
zgVc%d{_8wUT4Lk8b$!ST{W!d}z><?DWHs&yDRf@d6stJiEJQUQQokwr8hSo^b)iRL
zC(<G_A?NU%uvJLza|K^Gqg%D~0sSMyE5;Xzec)A^-SEVK0jK6cY->u3Sl9=3OG_k`
za4wJ<;o0ZmS$h{!p1=(K3+6h9lcy7b9DIHQsnMwAS_G7-LcvS*+Y}R6>W296%u-gX
zMbJ(z{^&p-Jwt=>NHUZadI@={C!85W_q&KphNtqObw|SV^EY*fHJiEc!OuZVI{k|X
z>36^ig(<!>jPA5>P&DK&6Xr)AaY~qzZHC~uIk*38<d+r28geoiigyu*T59*EEM;ke
zs&TTgWkMEG-`S18iko}5%~^iebLgYQrV0&gP}=cd{YL%jdQAiARD&VB2VoY!yoG+&
zAv;N3ET^`_PZjxjR5Vy3#?#ePUqif9MKviDu&Z)~_*q2%^<c@*Trutjv@K6v^L`GM
znIj=7wA2(AV|S2bt`fuIAe(XX22pTh@l&eMJO6UG6tTZGWoIxghDEn;am6)_ejs<a
zwft(cHZbZQxGxm)Wn}xkfIq|x9*O)(5CJFr)Wa|GurX!AQk|iFi<*qe10m?;yb^vA
zCYurW1E#*mll^b$e0@K?TZp95%Iy<krrTOp7?odbf_Sq#^ltXqIzqof1T)@hBRaL=
zIEB4B#3>kt1)KEyIa2m2Mhi&0%LZQrD|cE=`N2DgX$+f0Z4B<JApTXO7m~zy0eOAa
zv)00<mIsmLzz0Xa^24f@7-G`#@`l=YB9T7${P_~hN40@LiYCJgJ6$Aei?Ngx{t6ud
zv|XSgZ5qxX&%Ar6CZtUUg&la_tecDGyZLh`3*RcC{10IRN*yP(Uhvw(u4YSrEn7?1
zT;(c=C;h1n@h&)ilTutN%f_RsFFwwg=V~V-MiKD$!|Z9_>|I`4&Zog_^kDoz6nP>2
zW-Bf9`<zGRpGoguG$DByUnSj1Mr0s!OleGFp7*p^<7ah4A;P4Z693U&?z!RE9?9=x
z3%TpeNaSu}MCERXj$oBgdCK+~X|y~Mf0*or0G@7bMB|hx|4w84c+yK&^0~l=(p#RN
z$AQ~leRnl{4WZp(Gie=`)GVo*tPwrh+x0sdk`Ahkp{q(-Z)Tn@(bZn?^j8?^7?n#%
zcW6b@5p8N3-_ocF^OWoUeD2_d83Nza9mA7n_T>JczBkrnCpBkVug1Niga7##3S$XL
zx-*62WL3{eMSnPldj7!oIyVRg%|oTr;)BLuT^{u+%N0<(rJQ6}g6`$8AnIGMlCh^W
z-R<0d)=tc&Ccsxho$>9Y|8nf@#d2{`){uJ}&-wONX)g*|Kz2(*loYg_yz3hX4EwxD
zfCOzS;hN+&T9WNBnoR6DoOpqirCDg+FE=nN*Mk%4uMx2iv+;hJ6S#bO268Kh*w?DO
zNE;t=^04M+abCZRXa+u1J8p}54I1LEPzb!+2DDc37Ji<XXSI8-pJTb>TMwQ{VEec7
zAB9MM{^?J17DThGP75(?OGYC}QFg-F;I8qtA}~6cQ9!A_VF)|px+Giqmxe0^1nLB-
z_xi@YD({;Pk%wlxczzbxlKuN)G{@N3NFpOBP9;`O3|yT{VhHn*{GP^0<NZIGH2^l%
zL6Q!E@Xg*VtlwYIcpy<VF6c9)gyAt+zdy0`LiJ#QJt3SaO?D&A#uyH$LG4k(x*OG9
zCbBoJ@z)Xtm~I}9(cvq0tS3~>3M1<IyYN~+#H1R02$!g-ji&RV3lQWB+RV3*f}MlL
zJ);>Nf5a!Ma=0GrrRa~KS4qFSrGG~PWE>g$l5;q(c-VKps138X*LG#!_BN7mIf4b~
z)$YT4?!SI8?my#+B{v<_FSz%^dQkebr<8|3+l-tZuhems!C>_YvaStA>|7ds%6pr|
zdQ!?9#6b$>kqAxRKm+W`_^1!ex8gj5cA(WPwZw=^eBBHLwt#2eL3ScnMBcM@VNy$v
z629Ha1(;C+s6cz1NYW|`awFI8PwL$rj}v}soyRsgW0Z#FErQ%&gf=7xqla>cfq(mp
zbi*CC3kQ+nj7I5W@<*|)+)n2b^$GGPJQf@!AMS5!p3>G21M8DOEAiuLfzt<Sx$=25
z@z~=HgAVT<$JCsBVdXuGhij_PC;#N%f9Blz12mz^i%5a2SOhu;r5owNX3;O9^Fy1|
z391wtzK#<BXPl6)m7QHumJ}oWR)@s1Xbk)!j{X(xt$uMNa|=WhJLp)vAB-yLp94lk
zIZ6yYSmxtDs13r(Qpg@Gj#l*|JMglmidi@b#zKVdH7}$Dll|~a#iYIQY9E_k3qp#)
z?N-J^wjna{!}fPktq5t;>sKIdj6vp+_;-5Kj~7b2vT);R)8wJZQoy1MC^8=0hviw>
z(_39UmSXayztVUbE)Xw20}DqmNBogUgM6dfh9WdSrP|;Qn)FFbQ*aFKNIx{E2*!Oe
zryee}n(P2tq0MpUCJFYh<ZZ6#L$ms{R{Z`6NDeVA$o00a9>YT4{6C%7fqVg{<_*OL
zS{yIMS7cJ2&&7;7@KAKHC5GZJ-%~>NNJZQcB4G$}Ny)@ja8{Xj8N!46yu+<i8~$K)
zD4+@58ncfl={XN|n+Xl=A-VV<y1-L*zz&-EDv&yp28?INJZQ(&!aAbF*rrAX@a+ZF
zX7Z-zkVj)(jcaRpy_KIW9*S5Q7t>z{tbYet^AC4dcVRalidDpDOm7*~&r6;HZg_SS
zNFP3jG-&FjThFiEpxENr^y$9g+1~zT-s-PVuZAZoGPp^V9_3|AsY6)nj9E+{8`HyT
z`B-XQtCsl=pPymPolQkcf<$p3dfWJOL97ZW1s<ngDT7`%-2CeeN6qe=ClWQ4lxjc9
z3LNi$0-O;1Ifnnk0(9BqD~MCqz4?o1Lm?P!ty9LR0?RvEIiVUqB_G^2o5f?<aR&?g
zKf#^^HbqOc28l7K>8jBqmkYs0{A~oKNH>?6JaDu@n52?3W?VJniSO|FD*T>rvsmZc
zA24R+VTJGqmnN|l*2i4<Xnb9K&{WC$+KqH?>?=}Mi`g{+$()u+gMq9po7@h6E|86^
z*aDK`X@Ayk7UaJT7e>I|Uw`KU__a$fnbiPZY@*NGB7ft&kG+jALCE9D(<y{80afLU
zRznW%7u~FURW$l2?ClWNWZBSBM<ciYD-Qx9AG?2_no3NZ{_rpT5(4FvJHS4!Gg|Nn
zWIt-;MXCh7I4zv{`>K{iG!p`T5@Qme9hC2_DGFgN5?{})u{IQBd$Ivk7@gm&U|7-F
z)+!x!<P}1?!v<xQeI*#46SD5h6Ue+xnD@9^=pC@5f>ep=HAONck;a%xifNT=kz-Wc
z1!hCrq|HtrzkqI2gnCtv8*n(2fGDD&`~7XIa|@Ow>TNjK1e*K5w##KP%(%m0%b8K+
z8(eYH6tgKDX5o&{;??V>GSSQ@>7VBmW`_M;kkGPN#_BQ-#SJ|@pBD-&vWH*sntEV2
zs;|2=d@=FDCDCr~unD4Qb*rPojvUdBaGV<t;$e6}y7drUs0Iuxnee24wkU0otg5V*
zZb|dQ=1+?FyLPetnmDVSLceEm=O<*_d}@GU8@gKoaCg*p2kqWR-fge=5^e-L_#%AL
z6@QAnv856qeX22@Ej#U9LVpOXHZ3Epy;m5Bg0J8`lP((F{hcp>g~I_M*k*&eH;KqR
zQTi;v?Lnn+ulMV0sJGnC^1J$?ePL(@h5O_OxsQQZ-X6Xk_Jog$zJfhTmxYMHnguAw
z*h_r>{Wkat>@<h)sa5pXGxC+v|CTU7ppE6-afAnF%DYk~J66<CV_$fBo+eGb6xqf!
z#2)J<-Ee(f=atVs8o{!btet_jut5nR3U+)6xKeCVRfua<iA%j-@++2y4F*R2c?EhQ
z1bLQ^*qYZof1($Pz`H1y<`*$LU)*{}oEDHOzr-9txxLe>8JNaR0<A&2{$H9yzP>M7
z%K|x{IloVp?cS3~TlgZJVE!%MPh_n>%6*V7^vg9_$Y-+LIyobr-z>atVotCh;*5{V
zPX7?-_5b#@7cCw=^W@E_X2+@JJ2dDpBYF!Q_}L(fk@Nxq{bhqHY9+5Y6!8Y-cx=JK
z8%lHQFxA&CP5-6(FS`*u$tY{<JM}IXRr7*ew;h3Cj5YBz_#^yu(p{x$i`0Pg+Wjz#
z&|TL&5ZJYYc(_h$Tau|19e|Bs2}gsywc!Rjh6kEKEN6KzF1)Z87}>TXOsN71HRfWa
z@BwMvhPV=mopJuw{uSR(8FpE{&PjZnSUx-p@-+c@{(egNV<@~jWDT)N&vtSA^X?wO
z#iyYg%q2Oa=+FG=4G_Vm%aM1&rLXpW41WI2kA%{Tj*4-(%m&adL#e8ZFeR#=`0<)v
zm1y{*eblfA)9jyg{~7Q)42>GKL)`FoT;fdV0%v7kq?VX--BS-OKQ4+S`kMVFhpmFO
zBI_0~TDEBW{DD+Fu7WPpG<b0R8OUM!ix5vRF#uyn8g!)du)n9j`<pIJrH+005j=Pk
zxR5oS5X4+`@}Sq}q`usmknt~&CiKUSImK$C{HEQ#h%i-EleQU=Zm7jP5e#f}>9lqG
zv$^g=HzQO-gWs30KOJ}UBl?R(5EKK~%_52wOfM=|EEC^nAcN74i`cWr-b0*h7~{2Z
z(V-!7yTsN>&PdOkn1C;jkcR&R$avCP4f0s0!~h$_!N0nk%Nx(uQ68wB#(+5FmtW)Y
zh~<g<R!e|e<kEPD7DW7hG-#&=Uuod7ux0NqgYV&Xxj_(P>6>V_MR-Pdfoyr=+#H@4
zBn&fp`id*>3GwhfFiIh!ur6HZg~1m7CAG|?CE8xnk0)thQp3M+=jFhO#+{)oZ5HMf
z(iem%VtQYmv_DY{rdCs{Xt!^p`*Cz*R+&u-U>MGKoL%H~6uusdgq!7%D3rp>-{0vI
z7N;T2kBdFlL4Q6+*7T}KUF^@lR!&<LsaL>k6k?c^S`YxH{HV+SHs#Z^t+3nIY4twI
zp`Y?p2nUpXyIe2^P!q<y!KDSA_YQip^flBDBv8*q&UP-wC9WUaZsyUeBmof(e6FZ{
z!1r;F%PgYacB85mlx<A!RTNu>wSzZSr}4HP!Wx7vQC&T#Z+tBNlR7%y9jd`NbD$sB
zH1&CQsMpl#T<>f}?+Co(O1&~Fvi*pT&x!3G!<-mnt5U$~2)0)Mb_P)p^OO{udF>2d
zhX^ab5RFXLMdn<`RKyEdnhu8J+dfmIH}kC4gD>N$*HMvDQ8$2W71h7-n;6Y)mOv~$
z4n}&n;bL<#EXfZKg2^imQ*sm1!HS7uS<(H%*lXQBNb^JF)cEu#%)&g_Le6Wg!d5<p
zT^nmIfi|Lmrm$)(^tYa{?nm>ItUI5s5mKm`3)51IdRxw17@^fOOXVROHsNk&Vt(0y
zSe97ca@fK=n_K-H@8URe(VLwMcLrnVRf2J2=t%-FBhMqHR?YwBEnMK%Rf?--Bsuuk
zlSMmFj2Htn>GS{Ff>Fl!Gl|#m#63|+sU-><{UI~TZdJx)1z(RrYQg{pffQIO1+;@w
z1uX{un2YpiZ~e8(Qq4v2z0t`5CSSwv@|3mx2~a7>mmN1WbFg5Eg#~(;B8<<)HU3g+
zflLF)8k<`a9T)RjhppnFkG2Rwh@G`dtU}H={I`6+R9-CjCpCX8%U0U1HQUyO%yDQS
znz07_`i5R<B&X}=r!5;P6Z8oy{yY8iW-hbN_ZGzDm2Te^qUV`hX4@YP-I#0vS%&Qp
zmRernR8c5T-eXW6Da#g`Cq&JK|EsKDakG-{aWWJkd_YzUwzcqUtv}F!5NRY;T?B^5
z-pwPdF|c>sOz8=y6g{C)o(ofA(1Iqc3fU?+*f3JN*P*xUvZkPfCU4-mu@?|b@`Bu!
zYjGk@@r%HyE+L;N%5Sqk?6hBbp??sV4)XKpe2F-1Y^{DegWNRczdOYgOAqR-Mh|!V
z5C2AcHQdZizK5<XfUr+t6qUl^I!cBBNQtiey~#sKqpzONE0kPN4g{STojEB4N>uJ|
zuV$~{509nzYwKkAK)8ZGQRr81{&%$c&66sGWe3}kMdIODO1gtVO8Rp<Lou-#f6%SD
z?OWknyVfR;_Lqk1BKkxHtQM9n-LZ`j%j3=2mJYAKXVExgr2;_Q(|NhTo(LiLU5T~M
zO1G_~Rq+-p4=0I65D;6q7qyS1r#2li(|XLRSA`f3CqX@5E=qtaX0}@ftsMx&wn7r_
zbN(qp7>YVNe-R)sfKtwyqapwBJXUXSF@L@4+L30HyC=nJ>x?-T?IYafn`<Aa4N~(o
z<fKCcB;l!e3%V0jXSquyR+D_bOTP6iM@6Gl#{74DPu~r0{zKz{vV4*jhS0`Ix(URJ
z|IJ@ODbI7vPJo|#?u&(0Zs+XdO^Jo?KnCwt%w?z*Ujf1`aoK4ed;!1SI9orN34#U=
zA6OAz+2oyS6LtoYcKm#G2=CH2bVk0@dNG<Id&#lbQMBcw36TbS!X#$m!TI+A-q5tk
z$gksG`y_3UAcUDBBO==rw1(fP6f3=x>J+8;i~5L*9KTLZ&ahX7kh~G?Dn6NfLmq_w
zO#pa&*6)S8nXH7L*$~&${l`<gvy%CxzYUwOxHPN?k<v~^`aeIJ0@7>9czJ~pS>So7
zmA!v}Q|d-9ZdvK_1BuPhw1jNS@fe(cdpqy!M+&i5;vp=@crsH8JES&>hZ)T0;<C96
zNG;`_d*pL3u$|<$Ejp}Ljg*6(>M`(uJ$(Dch=V5=%&?+3i1X^8POm3rTg;BPfb^jP
zl{ENbM%%6|+a9G`VHy_fBKxN}|F%I*Dt?t~`b3FL_!MTgl0C-H&}F|<32oUzKlKBi
zXB#Bz%9gw@{O}+O*OgB3Xqv}wKYIfWw3Mj&;;-q?yxFB;|1AZB0kQa#3}G=Jp_H1d
z@V6ihgD8%vd~(0-kolu_@larDmiF8k05NK;hwCRIrL}v#dQ)#=OWMQSTS*>rf5T8j
z904oO<p?<eX}I=&QDWhz(M({s0;U#4WQz;5|41Sd%iFP@a2pQz`Y8B*Y75AUr_ObC
zvcR7KKX@oHb#ZgkJ#^tfz->7HBaIrvvINUWeB7dlMhR!67-2681?OFAfJ4AJ{*Gst
zWYcLMzYZ;SS7Mo>Pdce4QwvY@+6WV#7sqU{J}vQ6#_#n+gbDu1_ce`j3w8{CWhXc3
zEm<nB-OjZg`l(`nM+3#Daizb+%)`YG+{U(IGaGLOzFlg$cUFDVB=3#J!{xio+pNzO
zven<si4ToD<RLZJqfTzyX+wP8pb4N=SVI0SO{Z!u+#+&QDjW=Zirj>{+0Yz^DFE|8
zx#!v6_v)5lgxI77xJQrdb{4<?2gGn6)beqejAcdkAe=_?w+LBnZ*%S6Ew2Us8y*=m
zxM^Df0`X4I&zAcugjwp9Ieq=;NdSJl^r?=P0;ppOpa=H#?|<WhvFSXHUCr{|FPFsG
zUlqCaT(DubLm#sFqt*+`)xK9q92WZr-HD0iGJM6`(U>a&&$l_uead9k%B>ZCn=?$a
z^90U-fQcfoB+e(7nk;G{2#}+lA*`O3X;NH1D!fNZh|1dYPoOb1r9&{AP1ow0?^ope
zffu~AAd~p|8##BpKX&|en;duGuw62=lso{?tK_YPSP%Y(?v~IMtWsK^LYQ5ql3Y?R
z*R5o|p%@><zto3lSJ9Mn>W$dHNU3pTUS<%@DkUShBYtTJ@#NgT<N-fNzFA};+6GfA
z11;6h_<dddiiY};=5m#t$M-gHb;R9d{;i_rAu({N0RRdN^R@ov)l&o+RH&+B6FmaU
z>KSsB-KtXFln$Jhpl;M4Kv%$Q2u4nZG!G-I)GbOcC`G@}??x|CIUs}hN9TA}8&O7H
zQO&;*O&Wx{A2=9H>mXWEOZ4FG?Qy7l<QLM(BnG!y5&iwwHln@#U6p@Y@n8Xf+L)1>
zLB~%1d8KUf4cgDd#tf<Tv$Y=pMWMJa(AgSu8rNiQ8Zuc$GA{f2B`GB%JvH^|{^V_<
ztXABb1E^q=W}U?CtDEkS_^u@8)YHB``Q~z0Efil#m&#b)_f>()A*${*6w1>d=0+|W
zEInbSQR9+9V1|1&a`4sL!!^5suzo=p0?8A3pHDrH*5J1enlNWQstd-S_e4RJ3(-P3
z-=~M13527mnajSKt-!j9Zxmq*akUuA&H6pwt)n5OM#F4NRbbMBBD3dzY2yj!J)+*+
zIh!5Q0fJC2S|xGg#Y?tzgAH^csa&9HVgKTmB46wo7jhelz%&xa5>UkxN8>?|e})u>
z$*S+zo%k(?u`BTyGr-r2eDC6J&AHRT1%^{4r_eH^1dJ`f^K(h6n%qoy8W)6{g!^hU
zAsmtA<t)V_CX4(SdR_j8loOl4!f0@z@>iDfYbzEk_z>>?q7QK7wtFsz^baUY)~}xx
zldV&IGug93?%RSgq%^3S1(|ha@0iqVo%qG<jz&J?c7F_`=byiQe(}`qbHXw(UrS|q
zXh-jOg;8VsPcQrb<N{=NrGtXk3*t`66l(n|NLA5XS`c^_i1LY{pIte{T>m&u`Thj(
zpo2YhVj+85`*v6wr*Ofe01>SpyD7cpNcr%)LXD~A72G?4kD;ZoiGGSPsD;o*Wda{S
z1`?D#kS+H4fh<OILl-EbGs*0~4cjmIOH#v<YU4WYblqy`I>COFNxeJM?}dPet47-;
z1f3f4UpQj}e80~Ys`cR{aRIRe+brbMBWCVr)1@FwQ-iSFm?-iH@uoyw6YN4#Prksz
zd;p*C-fACyvVXmE!gwl1-WVXl;d?L*zN$80(zs{rfI;~$sL>V_#k;+P-AM~#r4}r-
zf3Y<yxwL#r0-QpB#Do-bPq=RA&{B{TlmVBL)6%jWeam@Q)^p-4Ob`(3#sIPIvR$sb
ze|}h$yxzQxyQKDBiT0jBT~@CgY{Z#8qm}1}{71MFn|4nw9{IWcXoYNJ9LNNE>Ej+;
z=$_x>fN<R#`4W;C09b1(a|pdL^yLE5Q2z{e#q5`@lGARv3ds$9m*%IFq^f~fw=YUm
zbl(26Nw4Ci@K8>%)4%*bA;nX%6xg#w;hR>b&wg`a9N!!8yA1I&X0Z78M*f%AaKuX7
z>ia#7)d%JmZ0IrOZ*xOjk+j11R~W(3(R)N!U*x;e)#K_R>HGv;8^;pcv>zO<*mU~)
zqU3J7YpzkzKg&oPP&%RxN9`_;pw@c&DEC{5@J_F+F_b}X#%piPEn19pZEufynNU%w
zoc+o#bu%VmI#Adc!0lnMyvM(d`w1Alc?^_YyB@re0T&7!kxu9d5R|`|8-Wr%<da{Y
zPkqS?x|CFfkD!$+*4pp_I)9g!_V1;J)QDJkqAM~3(LJPIsDUJ!xyFB2nf)Lw%DTte
z_xC5l=s@b=0EPx~4nXqQZp0Ns-=?3v-7&GH$|c2ABEB@`z5l}H&LK)lv5Z((s(FmB
zONzjx^@RL8#3j1Z6>5GgC8+c3*(zb3`UI@bG+(DLA7vJ!8Mq!ojo-*z&n~+}ve?s0
zPLt7WLIyVr!=aS#0$~FmP9zfk^!oFY#s=E=C5PRmpIykH<We4RUdcBsB!GI#sr-s{
z_y5ouRLP4V!_^et#xcw%K{FE?+WQ&kYES`^pJp}5QXZ92e%zN^Zl|nXU-tU<q_H34
zTH-LZ+T*O9k9Z7Ub_U&T?K$gkqdH*%%J^lJ>R3W5khYlR6Bx{(SKveNKOA#LMgR@d
z%YDd&n%|emEz326JE#>n7s4%sb}119b8cs@u;F>&a7_DdVa13896{QIVVi(<QZc^x
zVuoI&DYcx3;62S?ZuykBz+eR2cS5F5h>+^?!11qH)|-~WrjJET1m)q3WAY{I#sQCF
zjQkDDtx|^1lPx0#3UCfNJhz*;<^D$`VpRwKH2gfv9w3;j0NVujWuhzJ{!PX9h$$lL
z-SoE`Hf}dssI|`nQ7fOQK4mp|F#P<O$h@8gs4qZj22BE%A@rc32Xa`5FtCa0zraV_
zK={uUOz6s=D{|R-vR}dUv#c+y=g$y~x%HcX-CaLUa^M!Ay{ok=mtPl!NOG@ETrJ6f
zyomz>n%iyr_~1!RUT8z#GYH<~l#Z42ARX?pCasXzfrcm9d-HmZlWh7I%9{EkHZYN5
z(SymtaB5`M2#zA-bTNv>gv3z8p@}gEp}?&o7SQ%=KTEIz+Cm9uZQc9gzetE?bz9Mp
zoreqM&(>cvV1IZh`-YDG8=f>n#&6O9;%QU?Hs?*CNSR*$;46DW4ClBQo}9fiy`k4f
zd}AOa!G#MI0CbmoQf>;(w=>(Z%XoK1Tk}0%+p!wc<&odeL~0WKNd`&sf2rynPm<vV
z?8?*v!`~lNnl_DZI7n!?wy?iA_4Z|T+{`DF-z;rjDWL;Du7~b|u*6OJ;W&O={v}%P
zieer^v6Kd|R0Wuu(V1nE31t5I@&MSuwO1JdA5piytGq}UP^_XxA7*@`ap%Wjo(1lD
zq7G+h`A=i1oieJ9@02QEU}9=PXTB}PZ?koLJX&`stZ}avd5E9sc|%izWQ6C>{IdK|
z^VMwOK44y>`Q8mLkze>#YD)8+m>vy6P}g|^mN|MAAP<v~Lib4cNb&;x(Y{wTzA{sA
zgAR=Qg)l|_b(J(D$6k>oF3b8u{}&ATU|Jm0+DLHA^dC4KupVa~j(lojh8VXme_pXd
zc_2oysw~kOk#@QU@y#@XyMhJZ9%pJtZ+IxnTu>-iuLdwO_<=Yfvd_tmz1h!_zUgr`
z`eG&&1wfl}Uq5LaEF699Qk5Ih(-5BPkqjYqh21cQ`YV}vs`D<mMhdGpNSTTw;Et1`
zQl-g4;}u9o_kOT*x!=;+zd=Md3NcgCaZ4vk3>E)0j7cHEG`odFA?z3N&C6_61@fZ|
z_D@)JYIBUjAeCCU{<ZX6Tt75AuKMOTa|4k&*DW`iL#311J>DS4w-qB@Vvqppe_Bc%
zU>EXZJNRboGiX)!#im2eTYjV|)y1oe&ThZiOBCw;E~e8?uUkOR4AKQz*|R1?8OSEH
z4iT5p^5_cK!Rk$WVcOZPz?2wb?QTiBy7SWb#!fx&JW3n~kZyh9EiWZBWe;4s1d?Y;
zqbM*kEFP@9uaH}(T>pd8zTF0Rw|^rGZ|t6~P9qd(Y(KJp1wv5AY3wlyFP5lhp{bKn
z!KQQlk`wz1a6S1efe}g43-RX|Hn>Bw!Peq()_;_U#8h*UeyT#yV)IzKCG<Q5Dk7c0
z>z?P#0s!@#N7NyxQ5Rs=nSl-PU;?}OVTzk}wGAxghi9%h^3=A<)2<5^K{ZpR;jF}-
z#gt#y;da~yMWe9QWl|#G7NEdSN<5=Oo-$AxY-EbTa%(4|LGvOV?=~p>$9H=YUUN63
zZnd#Yqs(}qR_nggC>Ivp&s6%>Iu&?qaeiOtKTE+f%6<^UE6RG7jPlhU)xviQ7Hd#1
z8n%U7vG)HGIL&Tmq0O9aTO8c@I*@=`+txu(EZmJ7P)GsRJ^c1?O)Q+rjN5bXDbFU{
zJ_49H@qL+nKvy9C@*;mA3-EXZ&1AF{@UfZ64*q|_El%TwnmX~InFC7HEmgl&m=!2n
z$R*2_oZJ~gxkzq>Vpn+3QU}`ONguU|BUsZy1K$iKiZrp;W>x47fQfkAqgot`8w1xd
zPS-kd1q=V}F41Y1kuCR;<90j#d{Py_2wUN?@$(8S;X+;8PAv8Bp9w0<nt*pd?jgp*
z=3JuWJXvCSEB|n-Vo-k&*i~3ais7!jKyM;vJHata+ep2W-_e$0bM_HxIlgWiYljsy
z<vC<nTMkMNI|Yas@`ZGT|2SXv9dGT&COLF!k<O_eQ})q2?#L?{x(~9;Rb?^FOh?w!
z9a4A5`fq$r>3A=QoD>E0@;#0?({R|sapAzVN$v(Ds|GyHdv?l$WiT7K1Xy6JOe58@
zefuK6)I%*vZie$1d~{3!SS$WeGXEnu7fR(sGHF_1%LDSC@+Cs?1pe(d;XHkTB#B+s
zGuUC^w#~E@87oE-sJvnDCHi18=b(2;8$LW%v({&_?{&mRbQHw=ZZRN9q8VC&`NJXG
zmhTp(A)2#(;eX&*GaYxnW|c<a;3>db863Ruyp@qOj2}XI?Dho(T;4m!slNO_lb>_R
z%Zy=15gfb{A>zO`iO7;a?{aJx7xpgv;_DszU?t$haJ$=7o<aJ-4)wPn=RK_EEAsZ6
zz_5C#0fsk5;in50Ac%n9lx>cZUw*c6pKZ0{b)nx3kMhx(qy%vXjEfJ#m)O93Qu4dj
zfl{Y28hO)#GboKD*Eh?(O629ctF?bV_kwXp%=ynz?XeQ(`FYbm*B_1d8cHQA@NuWA
z&_dC~vO*8+K)A}f5I2_&ZyekE>-R(55_yx^|3D;(%eAJE`@pk_S?_R+c>&lch`RvC
z*W>pLeVt;~sTbUjX8ijN`3!zRv*QBjR@)qsb5`JhLoNHC@?_~LdYJ+fB28w(&r%QZ
zE`k>%BRgBwRkoU}os9e}fKl%ZCM$Rx>s#myf(g|Z&UsA}3A=c$PL;48i;YnEp!@9u
zA}5HBVzr*!#{;d9O8C4d;%Y{v=Hq{HlI|Km@ee%o3;%<Y(63L^>>1*$hL5Av*gVIy
zgS?;!_4>OQflhHKQZ;~FkF<6>D%)5Zjd98W>nbYFs)H{p>kW{8JWt1yne4EDH*!In
zFaQLW{Z4nz55F1Hcj|B}9)U?t*yuqr-Qqe{U>HkIyfa+Z-7B)22deA%b7dgO#m-l{
z%*^JN*K4}<mkM0C9}PqpY>C1M1Mie}*rK_Coy}n*wndSoByb)$G0nzlQc@U$-#!%9
z<y<XF(UfVMNOhws&jXDOS)naTpR;pepqPa?Mdi;8;2lKyDvJxOH@qt!`&eSQQ`HsN
z?y!Ou4Hfg^e>>YW%p^i@_{j^U@k@9zMvx?%uXFYPhn6gHzI6k+!57lip8uaK;oP!{
zhiMo#6&~{a{>iMst-~V1T+iZPsO5`5(0A4mDml3J>`C|s0b5^mM>=)?o80%Q>=+&L
zrc!!<<|P_S>NE}P14IkmL0Ajb@%a{+q#aMb0Z!wPG2@A`=5p!if0BcY&iSU-c-R8@
z%!FP9f$?<iX7?r&B=i3;CD`&nZfdw^Af}Ct$t$Ejs<<N4&R!$4lUb^H4^4Wv1b*8?
zO63?b+|f?wg)cEQePI82jN>mO!h?`0R}B7wpNm2#$@57_CzS}zCbeJr3)~b?)2-s(
z|4(kPPPHAV_==E{_IUixcqB>l+;R_q)z1@%MOPza`au!3ZbGd4>IoayCa&N=$qcjl
z_Lk=7k-3Y>|G{hTXQSU}qZb$dF}-mT-Wl7NGSZ)~<r)ku^ek-(al(qFq&)1nlIE9j
z`e7sVs>#D<WF1;oQi*R_)R-;xO0!5_6}f<C4#ty9A|yavDT&O9CViiDP@+}~12O6U
zumGuwy~hcx?v&W5Da^&clSP5qO@=Dmn1lEbO>$_&Z?nVw>y74bQwasI5e2iuWcb?)
zhR?ta*-Jqb{~0sbrdxNTZUv%*m88LkrV#U6|5>sL4|JbPtk3ZSYZ)BogCy_so`Ux@
zNSh7ZZWzUj76@{iA5{(rI82#j@C|aq$$d(BRR?y(2N|R&P>Q_b?*8xGCWW1n@1RZ|
z1JprvfQX$==0~751iCW!-!fU!jK-$mI7}4*YePD>3#j~vbykRcsGH(u(H*a-6gKv>
z&MHTk#+59}mew2b+z?h|qB9&;D2?eh-J$I`DVJGBn21e*4<-1OBNOrw*$B_#Ts$S+
zkPrO+%T<_N_(gekq6&IbDL*Yr5#OcdKdMBRA*C3-r9_7ev?7WDulh5qN~KrI!E+G{
zC^7J(=pm!xEimV3IgTLlI$$J=(62JC>jmi4`|j2s^{_eqSz8YOUwc?j6W4xnl>Y}O
zykUNVOhj<xuQu9un83Dw=9Z%)e2|XGdd?>kXmL<TTV<4_++yF;?DLDrjWuXfgXrII
zMqE=!kt~3<s4}RV*f_-UQ(Ynmd@)$N;z`RQ-7J4oIrqJ<)jZxy5xM+q>+6UrbyI6D
zXFP~j4_N&?Kd)}qr~nc;VAr;Gi@!5k=yb4Np2_Wfvux{53-v`P71<9L*v@_;HK|~8
z`v_X_kma5xFu_b_1Z@S?=_)%9tB?Q5W}8msBhK1mR>rUSt7JevBug;o16OMT9-y5w
z%gl-M5bfvm`?tnB3sE<N`P9E}XU?bXp3eO-6znksybN80B)y`l)439{4NFtFPy+6d
z&q{7VxD{2*rMk)HTCFP;Rn)^umvRsobX-!WFe>IWo!x*<v|7ecN_Gp{n3Px%+87v)
zGl$!C{XJTZgmS1sSgcgfd0HhBj5f=Kb-t%H*V`{ghC47KnFZHPCs*X)oQO_tRynV5
z2fx<=rZIawT6M7$?guuiA2N{?4osBebI6N2m69Fr`$yc)_uy(O@R0;X7rB4x#hNg3
z3cR~i5s7Aj9RX|Ni~!W3J!R?sJc)QGmq^b80oD)tj7SyB5h&BM4uk4^D0^nvPEvop
zkIy3caY=^ypKp-+Y}w6jP2UK<=QDgI?zHtEdi`tv0*3&X)zBu{B>ZNYbm*=y3ERoZ
zZA+MA8Zd;|>p^X?i0ZP{BK^b~c2PsR0)eQm{F#@(v6fgNPZg-}XI1t=QLczWJbw)~
zT7>=1_{`kJ=Q%3>+7pc^ga4UiY#^q)`Zod7%bAp01K9K&z~%Bb$|Vt-U>vM}>}C4B
zivA48M@~A_8awBWJI{qS9JP+c7DUD!vdQ`wnAlFWSf2Cpkfr<if**aOEhrv}51}`3
z{)wCXB(0+;0IC;BaKev1BKc||0G-kHp+=`#cRYwx`7sxy_OMKCLMiuyba1!Y_Wu4}
zC(bvh6q!ng`-c=1X~I_5H~Txf{6lp?a^a$d?ug>AUe+qmr=Vw(9_&P<yIX)>k?rTN
z5~7^5l%Iz`#6(nLfql`bgXG`WvmR$0<i5k^6w}a=<k;01Qj8}^w5h}t>yiKX9ABx?
zkLT(oY~_iFu;Ojx$NN3UOpP4+ZxuV$bw2%*$&U<*EQ)JbklH<C>Y!4`oe`vOX$U-6
zO7YkBdB^j$_rvcQDrv0r*NK|gn_B4~=*Rp<x<qTg{P$*GyDdewIyd;6yVup*^=%j%
z&LU#@Ww_N6{WEafelGm-^PJj|(YfY%>x*Q7=7Qp}`G%ECpP2D}3z6az8M8kk5i19=
z-x+aYSf4>xw5}#}qO8YJpLKBa<qt8_26ZdOS@#c@Ir1K%bsvR=KJ=Z~uw*RiLI84E
zwSa#zoIL?UM&CY)awYpC(q#~$Ip&3nR3zP1@CEv-v@c0TOfx~Z^(6th4WzRS@7n!0
zd2#;ZY8n1WwZ5Me$^>lJVXQF7$+VV%(5sDMk(7XVhXjXJybX50Mv^{$(;@W2A@Lwz
z@lQ#{GW(gv%PHu{oHsasc>HY1pu|8@55>yb%qQ-1rbZ{{;MH@zVmDumpg+K`$>>HB
zy(#Mc@+HDx*@LQWfRCcyXTwFS9p<!A`b&J^<9dGca}2o2@NJ8rvN_ME>ZMHP1Q{XG
zeQk3?OS!JZ?DJHZ_P%+VU`VJSC@XOH9tOA<=gNh~KAa{7>f_MbJDfsM-Jk0OIh>dR
zQU}`Xy?L*55bd@RpOr%4HQctIF43TG#jP=lV>dOJ-l;{&8)~pw)Hh}R@FI1)iyWB@
ztsc}|z$F6P@F~gk&!UzTQBx9NF{cC#(x+v6@Wd9V?NflCB=BlZP(CotR@#$ns#;dl
zso0k0GthT&e~(u6QHP4IDn7EG{%wn#IP^TFivm@82tVpyr4KHZ1~bglO7jL6T~Upf
zGV`A`zlI02J`a3Udtu4fQB|n@J-1k7iT>^!3KJdVm9o)O6}g14D`x>G!hLdP>j-;n
z3xGkk^H7;o3DK1FpVIq|#Xg1Ytp<D{S<&Pj20oI`!&UPzPuLSD?F-61bjsen{nr8p
zV`LHJ`;mEOC{LaBzUYJ_{|d1-*^OUCl!(&U@5KoZ)nsx2k~o*!x3e^kIrE%@ta&fX
zPkEoHS)0Ri-OKXn(TI?v(+;T>ag9|H`(ZK2e_UW}LhU8Vg4Fp}UujIm-w}%q4C*L`
zSq#oE3h_2xkNuGc(YG(bpO%2<e**MeW7*l!$*rHxFlRT8XM(^#gTqR>K@&59cu2dz
zoV{!v%WC{Sw#Gau*uwhd-{pwmaoQ!SpV82sO<%H;FAbo#y<Lj(9}`QgDy8bejXA@T
zp&zh1liw2ye+X|L&Vt;q4oPV$e@v#Sk6YLSKrKxYIruIIwlymfk`+LA$%(B{!8bml
zfEcq19!U?*_6B#9#O52AiJ3HtW32Kdp99Bu2r#0#W}dCAlWuR%>|eqOD4GR|+0g&0
zy=l%)bhJq!L`WHbgpH`l%y`|HhuC9|k`>h<^pE(4j-~0O9XH#q%6Ojs_2M#7qns&t
z?E_;NQcSXDXNahbaru!8hjXcuF)=bmnVas{1gTJI4Uj->9Y_iOLL*%)Vl-pHbFe0z
zUqb8LQ+=s0BaS;2TL_a!r)E>q_+DkOaoZ*$)A1#Y3aV5QPxpwu*|fdBrX$|$^)H7^
z*KjnM<s`erFH!l*oFHp*pPN=}7G<Y_l=XIOor*W*d^Rv#-#6So?jU#x-H1`@P!EJU
z9ARSq1q*8cA?UF`01JWfY;hH#Yd$UxwUt#$KJ68Q`4XeEaw`nTg*Y!R8sADf_T}ya
zn8mZ}N&RJMuJ5RQiz4cbk^E${R3^!wC&CustbD(uM(o%BG<$zs{|C~BCoFI*H&pUq
z@cSg+lnRZ85G_ZWgmGeGp4Dbe|Ly+4{waBWi;#6a7VGZ$hJQCQ*rLR+V8;>4o8olH
za_qfY|M9!UjA-&f;Muav2*+U=>c?>8zzSKIG_D`m?$ecS-|M$|>0CRT_kCx3kgd0g
zQoaw`0j%Og8wZR&6V%nK`rmXpEvc9EDids5I<d<O>i0)=2P2vu1gEOx3a(|D$S>N)
zS^hJgl8_=!6kfz1*ws_K?Dt2wjQ88N`PeZ{cby$<9L+2^^RB;lFMr%bVmK$tzaKJH
z_Ic-@c)MC3b2$IM+I!2kxR#)8bY>Ww;1+z);K4~CFc93`HF)rZ0Kp-UAVGq=1b2tv
zgS!NG2oT&8+}_3B`+3iG&M!D0p82${wbr$!ySl2o>b|S1Q7Sedx?wzQLC?NpS4j0y
ztn&<q=lctO?IZX$7t&tOl277>ELs$YUXzY=Y@^xcUrwV_w4x#KviK<#R*gn(bJ0pC
z4HfO*3WNxR0o~px-bMCx*EDPC^M2kSbUY^J)URu@DqDC}@;25@moepct;~rZ^?yBb
z6?uQ;cNT{vz!o(y6V$|gIKmYognUR_gNeBNs9N&SP<otRI=fI!ea8%+Ak6=Bf<!JV
zm=q}3gTl!-zrcyzdf%k2ZHIH)qs8VQ{~olDi8Y&+2pq{Ba0d2L!&3HpZhtzAdnAxW
zjc!<H$^868qm4nht%En16}Lys0OUk3^IE|<M>R4gTqpSegT$fr=G<6Msk)v>$z-)t
zPOs!cY}H%{|Cx)+_vBZ(QNrlk%zB}0m8u<5eoI$B@B;R3INJ*pgNB@gwPnIz|3WK(
z`ALh9|Cmhd9o{v#*q6R(T?c?G#A4Bxx@e@R;@g(9Lu2B-pcMP?`DV$#E7Xb2nSLao
zW>6uCISFW?gt4Js61OiKDENna=4jzPiXn)(&D-A@i@mbHBYgXl^**;2t@&at%4>f$
z&F%7Zrb#|EeV2u4d+1H0hzzF;zt1HkQv|42Gr$p5>(0aem3lBB1eEt}rbCDH^|<M0
zr^M=CeW(wcO<IRDDFiya{_##A5%tTI!}+1IK@x%IpKlV6TV;fCgE?gw&&@RZC&86i
zoA|kmf7gL2+M#3mrZ8nVQxsc2U9?&-ls7d*uJ@X%Afln{VQrP;LN$Y=FPSr|KEeev
ziygNfmMlX|r7shApeu96vo+T{y7q(*2LVj-jHf(U&JqYG6$<rLol-rrn=dQ3uij$=
zi;pCMH8QFn61CQ8kx%^Y46<+^@5k8jY&3VY)jETe=7u>EZLoNIK0C>k0$-5NeyOjx
zpXQ;E;xE!HGu=1%ZT%l6i)Vg@?0qWNR_I(@z+kFy^UW1p{_>_U^vx4f9$YGtGeI%d
zu$G`MOF4aojW24nu(OkD`fNSnui<IvXj|<1pSyk*IAQ6od#G_J5ZfBgta#tld(YX)
zCf=>q9)Zvn|D52c88qw6#?qv{o~Ood@hcz^6JfNbL>PfupdI-HX+7o#?;C7KeGWke
zG)~~W-#BTwo$b6`pTc?5o4F%?kl)Sud*9f3OmzDkCQ}|Rh8QnD2wAvX#0nwJ@9H*&
z1#@!G#)_uL&nA)d1lVQpe~HlktB-$Y**x?SjYK9KB>Zf5)k}M;-TsyO+$B+0yZ@0@
z`ffe_fX^}6eHP$%pPy5kQdO3Od{FIgB%FJh({DyxL4U%$@uB}GO#Xsyp@negd#{94
zCQGKJW<O0Tqmy3VK2tdKM1$SwvaRi^r8=xNfcl3QV3k{l`{z}*+%A-jiK`-Z5_+=*
z9@&wweT)r)@9BXi6Aui*3~CHBeLATj#M8I-`x>yx5)P@Mb&KZ%!9PjeF=UjV_^jjD
zF%PG0cAK7O`(XRmUgb4K?P`m-u(x-T%kdGrN_0{Bxkj1hC)>z1(JU(8Yot%o%eAnF
zf{OjvG<Q(?_JZS!2$h3{+u2gXDxGsR5Jcs2b<chb`b2dP-A;tfV7&kRB&cWKD=X3U
z;Oo~WnZq|-N(e&k$|a5aA1Z|M!!B*LSKjX~*iH1F@*iY4MoS@m6jx<RJa&=zp(b$$
z5X4$#i+B1btTp)ld@oE`ivsCTqx6c5Ya>QVy7DDOo^;fe#;@a;sF$h5??v;t7p+87
zd17i+b%-RCvLs1fzdn%(7A{eH7bLfddG_be<1he$Q3dkd()N|_Lcxfd`mac3*3VYB
z*1$Gayh^H?=-H}Vp0I1Q@4(X74v*jSy~;NWZs0w~3p+3WWHp8M$42_Y$k|;2d=}@f
z0Xm(7bUYpDQ%u<TIpRegW!BGGzo>m!B`Tvj#$T~r$e-FleqRn^dB3Mw3gYo?SD(zV
z1d&YHHW|G6Vr#pzA1$DMaY2sh*v7eGKnOFaa^Q7tnUc$UksVlddhjtt`xaan)s)pl
zm)j0$quMg8W-p*4qjX(>Mi=`bF`QD(ELboi@b!nFY~PD;QQjRpN2S#=T%8zfgstx#
z)84rFB1X4;EEWBgb$Zd{qC!Tq;#Go<i2aT|9u#en@HwUlil3q)HXWx-fN8*%j=~6o
z?yp;bk=MWZ3e2mk)f#PV%(=BvRte(nG_oE17AIh+2-Yt=op01{J`tURb&soB<++O_
zk4Hht$fpp|;YtE`mSjtm&IZ7_c(_@){M652*p1@~X$wRoyMS7O%9jrPDxS3b$L44r
z!VrCQhyE2KpXBw?$^5$nUjBXgJ+iLi1{w4Z8Xc<g+ALA(y3q=TM@!Ft2YJVLxzAxQ
z{}~m1=AvlK_PfwW?mBpu`t^4Hm}4b(UIh9^%5Z8@hw&OPhjZcN`_EE{cIA5Q!(U?v
zvJjOK>82GCas8gSmp9$-y=Q^gj)O@rPcnol#xA2XXP$|0vi?PKmERVtrZ23|C8$_?
zwFOQy+hB(Jh@ZsZEMIrNrYdZ9`7!AI+5e$we0n>DGa=0WH))5K#qIY%PVrmX0&Ga$
zp_OE%!Ri(^X|D_SDTVKDDq;d(#Q##Zw*D?A(&#Dz9sIH8fpT>}|ME9<`YY1$*~NW{
z8A>%}_nX33g;P}hxJEh0wDj^9wy12wI0yIBRedm+1nzk^FOD_U_bFOx1}^-dpEO^k
z@&In)&R?5BpMK3k<g4e!5e`D-9kxKUn$_rMT#OV%kGJZgQYAIQ0k_W4mgV-h=G~&d
zQAyT2!-vgF*lBcY_7Kti_uRpV9))c0rsr!INnyzQy-OVad>bGQ{wY62{2Ry>8gBY$
z^ITbK+cMov7T>zkB$1V}%7n|0>IW(GCSu-oX#s2KpkBOap3p{OjQ%N{Whd`bhIdBk
zoeZsKhmIudQ{{S+m9f9Xa{4>JUcGF~z4p$FxI$PJ`T)Ky5N`0{AU~rPA}sp^1Ow|=
zQrPk*dNMJ^x@v8kKx-`iZOtFE%ikCG)>g?0bW_;i$g#h7?Y$`sa(F-tcpyUdaQf$C
zS)1aGF|AW&gJu6~SWoAlrJ(ma-EZ$ORLJMGxx@$@S<~RT_^l17_O+0CAV{K$xgV9h
z7KQW$SlI8?Du{|}w7!pPlT4mQ7!o?6cQ8aVeRmOz`r^)mHOeGg+N4s}ax?8XW$?@K
zTi{*A0%L^-B}iUhJm}LWH1Bn^^_C!?o)Tjd(cmvM1T5{?kQB$1Q0n8SV1j3bNF}e6
zhgbAs+Zs|~9|903fhRvOV@sk@rPh{_ZaUmo9JJ(@f<}@GKZKJ`OPY9#{8kouz55hR
z2wo%hF}WmvfMdFO*rK}8UZX5JDKc#{Pdz7sXZupQRjcwhucMO59D0cnYNi^x=gqg}
z?Ih-|3a;?8>-5C!7onr*vv|oL`W26RyX2bLKZ9OK+vtsB^%e6UC?^eMDEYsnCgP}J
zZn`{Nh%4+)U5?Z>f&l8H2<%{$FWNBx>f4Y1NW)vm`a!wD;onqni7OL!UQakTTKBu<
zC*M0h2;cADUhHee>bOeZ1fPb)z&ht>4DGtyosUz9$n}>~5mf{_wb*{Y*+&z;$i=Y5
zB`VeDTKgi87t<K&>a^L#pV_x|yX#YcZ^p?`O9VqkkSL;gV`;D}{r6<SJWDtxJ)h!<
zQQaCM$u29R-%!}g>alBv<)({A3upN;AstH?P2ns)BN*TgQcyn+I|W=rQX4T=GcQvt
z!%AM!sMiB*OPoeh`dbPggok`;j)WMY8^h>qLjIb2pxFf7`NX{f%cTSKT}rSi9I*#N
z1=;DkM%!)$XyI}J!AFj8uc+LXHQpcshD`Bxum`89<cNj)GJnt_Ui19a|EMPJ+T-Q(
zNG19mDVEmYJ`&mHXC^Jox0TG%7VTBb#M1Bz-(VRNImTVOG^7_&Yq+_cy3ADXf`+==
z&$18M9@~((=ooLe-A}e1j<$zeaeO|i4PNxM;;J2(J5_6aPouD~a;_EaBBAv&lA@B-
zufWdkdMJp8+V`ehq3zK<ItDVn<Lq9Ke{wOznxz=GtEQ!{pwayav9Qp*YfLWmxr%Jt
zy5?Lii(hk7ALtzwM3~CZebhDH#j5T|qGwKZ2AYC&PIpA{*p%kmNMEDF#I#-8$qMG2
z{nuEWp&sDXu!iNfdO*un;wRPa7|q2Q5H=XSXp{t<GIZA58rA)+4RkT6=ady7F-O)^
z#PVI-nmcu9-mySJP^m1wNKCg6>9`hDy>C)0%03pT3vt#VBLAGlnKGdNLTQ6mca_Ur
zFe0{>{DUI#d`H)H$n^$zG+q~CF8Wsq?@?*cAI!t&N@ac!t!aH5?K{1f9lTp{$_Ld>
zeoR&!Bmq3M)4LPWkI&e<KEdLpqe~_eS(VL!m2<y$C2l~gz0)*;J1=h_4QwAS<u2hr
zin{g@T^X`ZKbgC^;QPi_v@E95JX=q*Elfqk=d&y&p|gy@8s6V5F7Gw*^OJg?v134+
z-k%dJf+5AzVE1)LpK{c*2t%~_IIjJ-n|JHZuocgZhf-0Br)-iTACsdM_0ui8Y~cA~
zSkfmN*2fzwK7Ty79PeW9`#q)LtALGn_LcRI@p*Hhb1h|hETY-aiC^OqX3!qTf>O|*
z`Ll^t!RIt@44p=G1hOQ-wZd!0SNA31lra~zHonX+WV_XUZ_eAuTN5sJW?X^VOo$@N
zzmE4mszl_+efVmGP|nmB!KV4aly&Jlo2?cQO*C~HM>uy-6+!$i(=L>Dgf%3A{A}E!
zT+Ve+_-F?eaF={N+`LU4EWfK9NL7ZL<|EP=gX1D`oTU4@tAKr}xmUTs*}#~$Y~xOO
zQ8qRe0>tN?T^*OE?-+}%wCBg&=W4l$WoK}jilJJikE<3-3O54~chmiPfq6^!Q8ed<
zBs6|e)5&&wqneNtv#|pa1{dxK_9|xVpE55K(dIBr`BU&PW$KK1-SqQ)9(zif_29gm
z1&YX%&-pYWOA3*3?2)BRW9t}6ZXJ0I;(2kMt&m^bnP&7jNWuXxM@TTj8wv}_-%}sl
zU@8Of!jC%&w^&5c2M~%#$s+ac&S11r-f?#jFQdFgRjG?Kb7?~i7ZM@Ze7N2xLY1`o
znXl^WfsQc>veyqA5Ygh!(|DJ2r6A9n$m7Mjgs=mFt;RhrR~~go@qKUy6?hb>YCn-1
z!4DUaBDPubn$M`IG&8d%MkMA`LwhAC_|mX6CbDpR{@}1vA%LK)@*jz8Mm}_IHvUZ(
z_j*z_DLTPnHQJF9zQy$rE$twdX->S#MspKQ#&4s>{53GM+Rl8-p=?j&<|iwMO4S?b
z!!3vXe|@a?dNY)<_GYWoH1;u<&kCgbkApMMhC6iF;8%a!>bvnOiW1KOz@&=!z?X&k
zb%zs8FSq5^_?YWClkttWKJoD;6bPyT>%N`Gd2nY{^LpBq0A46oADFopBB58%X8Y^u
zZT6A<-D+~MEv`c5hV|E%@ff|DY>R!HMd}kI9E-;W51#gg`b|C$_j1k?z)Bsy(MsP=
zLU<fxB3Ah=rTunzr4Abuzq^IuTmSid%U3QD#hIv!Ps*^S-UmZEd#zF;5uWWtw^z18
z>ecclB0zwt;thI<9;(Tzbeugbr+jPIw+j^LDs#|qTaKA@TZB3?9y@~c(h)2V6#++o
z($)7aaJ&u1-e01ArMROFGkEdf3k3E00JzLSQvBP4&Kp;Z6VDxe6*Fg^!Nt#Rv^Plm
zPZPmsp57~A$Ovqg*H1aesbYTNzQ680^%OSN0Wk}ae9W1~oRHYUsPhb3i3cjEqr9KO
z&)~xNoM8(a(dJ>0h*tzjBr#Eau!4Vu04SrXc;`U$x3;^pBi&qXz<WT57p>r7F{E7M
zKK~L9Gf|hQVlEGmeT9eXin%+wZW^0^Lj-1EZLwwjbN`I(D>X=SqEAJg%##<A4eP-p
z#_ZHpBYz6WLKh6IjYYr)ZbZ@ZiD<`hbI)>u9~{3>&;}Jn!1TRzPVr;ziSlJW$BwO@
z_WjzY1dHDPA9x)tt2I077zR)jZ<q>D+1D~YPWp1}r8s_^e4MgP#C-XEpo^JKlw$d?
z^u8bf;4`0_$|-$*pIbiN%UUvP)$+n$Qw#u$HBIvvRyKqY@|hg4UG88y4MB=G!gjx9
z_9_jQ)Y6I@g?FM~a1Nrg%{;8PN$HpR)sc?H!#>hV3Co}AO6a~=F@m?yc+wz42xT+w
zjcYz~<0fQ!H7V={7T(N}7WF=#57GN@$o=-ygMKc?b<M+f<{SS(CE#x@q+9JscpHpT
zBJAMFC^i!}R?l=BS5AQNJ-mktpsDQ6b>@Ra44cYVDY3C>H6ER#lfn;`ent#7j$b{Z
z!K30{#ABam=7|SPJel{q)dY0+gHB#=%3GQFjm(|`p2$z$dox$N<AZ^QZljLK_mGQZ
zKOxY?Jj8A9S}PnY5hlpK%i^bg-rZfGo;e~NgjuV1(jj`gd8D{fs(<`v`Ncn8kmbv^
zSW8*H;Y}u?>UTFtLw{*xQx1L6x?V?75&ulczXr!|0^npAzZl0c50WXP_7$BnxAH}`
zi*DL5Ehk~o4ze-7KCg+W6Edz7stGdbFOH>-Cw}WuW%z;#n74fra?vo!B@@1(6359r
z@A(IgpKYD_OMgB&5;acSGc(xK#?~fG<Lx-;R%BSW`=o#!0&37}G;~mOEJUx9AMl5s
zW42RlIgiB;3z`@D4Db>X_S$9%E+yKeTv=z>TCn+7QhP+A14<4b+XJD1Y6zZj_JQiH
zU%ek7_OR%e9?F#+<vK2zqKjP1(l{~6roj1_bNY(vL%rLTm*z*43N<-kF8WY5{VnI0
zNHphWq0gFprUGa%-FwjQr2c+k{iZ?rVH6O#nD5r<Bih>q6GOFK%Kh|koIIM$PF6|%
z<2xE)>#Md$+I5q0J|W`?pk|cJ1%8Ouat%=&2s!24O61JZ^X8PSpEde7v%K&y{i_zA
zwFja1CM)1Doa4F<^u!KoR~&{d2N$N_4Jmt5!55f|6n?0LC&;+Qewyv{FVP4|(r<`A
z_#6duZKasWyoYkilM?abcj3{WxS;*|YbV`nqusZ~L_-1sQH#k+h-oy_mE6&@`u($1
z-0wYn@I|XlKyFd+U<c96Ts)pxViMgEoXd>&GM+hAX)>{omJ!8w{bt5s!wUIpv#~ek
zqGyg8X<NXX+R!&m73`S(*}OK!`hQUCAoKA@LHOu{Cl?xR#=~a`-fJ)YWYJ<w$_{)>
zl6HGz_<dB^44RgkoY&U3+U#v=AB~@>;w`0LdE13m%5G5$yqg3nqHG-_qmNWutCE6Y
zUu%i?Kms<%1n}zkqF8f5-eGsfzpgX3Un2Mnmfhlni6O@K+oKDO`FR5X&l%>$X8I<M
zGXwQF$g5{?`X=Zw=*%Y|F#nppzct~Rfrdzgxmfj=*k3B#LY^fC95Y`^#is$Z8sKN}
z%|zXiAKfhk;>&{#UD5l|z&<ND>&K$fftAox0lEoc$Dnxs5;0)EWeSbbmW>=@M_BL0
znmHXk)BPd2uXTifeVj5vT+n34NA%YH{kYHBZcpH>AE^L$pfvbZctQT3VBgFq=IGJ6
z*QN8$UYv^2+Gj{_ad&Cn)@X>H@)ELJxay4evjq}7+ztB*cyJy~lpjD3iTyQix=%JE
zS@(+NZl2C6XBh_zfe!%{?hAv|il;C=XE06f3RIXe7PL{1kKg?gW!Rx;Kz3`)%3r(l
zh?ff<j|lb0`2;G$xpr9g@yT!`KN}Ldh0Mw#(vODWM#JTx@v}P;NA35i`NS^Vd8Zn>
zvzP7t^gWd?-DMRx@0J!;D2;C!Ze^G%-u=5?wP|=v5mU+HvRz!^p+yc1q(kbY=BwX*
zTj>{C=Oyd~8{wHdUP<GxqN!7a{4xFBvtg<I!|Bgb{loY!$Q{7RS>ohoS0Zarmt@^8
zG#ch*(#-;_(1n@Cr*8xx^Pnsy<r9K{$I&X-gd5{IOOCsPzSv=bg~w?)h@+kUY)ULB
zDxc~9GggoB6r%WHG{co>o@}B2(uA-M^%z}7*>CoV>0PoR4qp&=vfNW189@0|T<Z!|
zdOFX4$5pv(02y?pQ>+(tp=elMI+bYm{6m?gItq<%Rm-Ejkp1j0z%>Ed78MND28Y26
zBzbr19m^6vBWe@`Yr48+zB1UwDni_s9^Jf;BqN`q$<#}br;m=!k(_)Aq+0Q*Gj;Yk
z&G8F4PxyHf%FE<#Wi5MZ-}V?c0>8T-3-{5bn)6aNP=B*0Yj)DvR{Kl!z6&eY+H+%f
z*Pd+)Kdt{dXpjleo{As~llxiG3uBrfCGV8heJom8vlnW6?rMi+h{THp)jy&}4>iM}
zunjxeZ*tVOlYR8ICZJjek?a3P9*r?2lZM(YOy*ueU4tOwIzBbI5QO=Ycz7C(lOm!^
z9I^5fjnWJu%e)Mye8ibK&a1C`4*o&J=H<>Pbw3FqRjMP*>ioUfBCiwF(8`YMc_-#^
znlxKdK~7Zsu7TOWsQ{Da&jR<l^=3Y}WhS7^MH*2;wJMP+1fCu(7(Po-O)Vsn54sY}
zESQnSlBqLFMwRu}!uaq(XFdK<jRY;do|6-u3CRUF7&WZX^>$$H?P9G1H`S~g0wXDr
zDzjcwVzpTG3g;pVFXL-h49Jzh3*PZb#b`BuF?DFXh_afsi;#HC4czfDn$8b9^rhg+
z)W-^~ed~QPT@sxACGuBOjzKzuj_YOkIxWVGfWrMDPl;LUtK_v~&gpJQ*QRL+2-XJM
zp_(Uw>S|Xs1KjR5hR`&TXJdVcI&AQ>2QJ89yhDwjeNTr6W)0hj+7OgX|6rI<yJy3h
zI&y0El6m>E!jik_Xx`#Ri@kr@^;DNmm5%wPf4p$@V+s00D+No#Zb0(;h5P(=SJbjI
zPOh86%26rP0u8_>{@*cB?cauH!l))V%<>8I^t!8r)8&@7_yzq%-^8>Qw@?BJB!mGc
zsNbC<R6BI2XXQq!JCC=elpErBS1@ikIu?fO5&N#mFP}j;ZWM%Ts0LK(*xb7htFk|Y
zuUG>a1yQ_YeFUK|@x-~4@z(o=dqgjdTRpp1u1Sz*arC;OTIEP4W1^+sA^_fg`QFFK
z$gM=QE6NrE@*qV-1lbR=)I}<8q?A1{paD?v)AmjkVSHMgFT6%d+(T{-y|?~Laq~ro
zR$<GxGb_b*p|HjLf}6NsrhyyG1h;tmFD&H>GA;cxre0|srFkpDCIT!tx6IH4BQiSy
z&#JnI^lhRv=O(IgxsFq&0MnQnbb2UZAYtVuJFTyRN45i7@)czF1TM_@yMs9|h6>TF
zu={rVJxT?*Pwg%bo}Tp_#gq+S`t|BhJ<oT4kJ|pC#;~8&l(mnvo^%d;VhKDDp9M=!
zRLlY=awXc{d+K9>VbRtyeKJG+g!c%Zs2-WLC>LHum%om!Mhz8-6E|E+CZ)JKPeec0
zcg-*7ygln+%-xp9rH((Q4`z}T#%SMA`=dBKi6B}+Th!p0azv@}*bt1fjiE~wk1aJ#
zpK)>ZaWd{cO>8NB12Oh|h@|Q#q}IlYjB%G3u<)UVut#(+(4x<Jw1q!eC==+#R))P1
z#IXAI`F*&D;KN1RFYLdxSJ$Stfe5m9p#NY`owrPHar_sN#@;~Eb#&xw-?i7pzpVzd
zw#+3=YX)mSb(&t*p{G!c!m>b9mlc~JVR}39`o?SCH<$cWdufII;cP|pY0U9g+>ET_
zU`Rduqhi>N?^NaegD(uIilGfNWN_~9!N&VcSd~5G&Zk(lvqLVBCpv#YqV;kig}_=D
zV%r10Y({RoU#32=lkmZtl&49LdxsbIq@sgmU`Acrl5R?2dBOsBYu`R&gISVN0>MP>
zv;H8sz2nU~;S$zT?0*5U$zx-K7}vDzU#19eD-ly4!d_X~QcL3{L*11o8w^<KCd5#@
zq5}&*9kpF$7{ID)sd10)w$Mssfv~7^;7&Hq7`JmhDx^?n$wdTilH!MrCi&bAswH85
z7Qj}B3>y}!xYGq?(@TASP8Rr+w|)D@D9(-@%Selbi0aBmR9fU-cDtqVAncph6NGIn
z74dAX%4Yq0b{E&VYxsy*Ri)YW{rR-0oV5ghM9$AdLa9OBtpXs<Pm#P8FZO%H<CiZ}
z9%j{Fd&`qm>W=gCBNb7_or;T{yITAXuxBmBCFi3tVB)g5$!m5LcEB5iDrZL}zniPY
zS-vbgXeqUXXq`A7r{xH{u{SI?@x+#o`pBXKRlaBE+fH?WDl?_AR_|-a>il%bg<=3K
zD(rl;SNR==4ab!yyZr8q0qlKk;>6MW7yn4(=$qWhnss5e&d5ADR~aXoGVAHn!OD>t
zt)LGyp5P<`r%`>L8RG<y5xtXYm#WN{7_2X32Pbxw)2eNCSxx6Be^%;FbC<Pvz#(_2
z%UsBVF6sd;B8n(9&EOqdkehBDhJOWFfTnih(-N{xNwkE%=A0v#6lGbl6YW94^x*rM
z-J{mC4BPa*wvG}&g39Q?2xWek6XXtb@xk6XOX-eqY5l2ONnOX~pt-?_p91~6$v5Q>
z0T0$=_YI=W-#g@BZtlh4KZD0-7$5^MVs*gCc;0>XNK%<-l~Vu%)x&DIXw9O9BcT7w
zcb+ldP7l?Ra@FQl*|UgI0y?yVE>YkUWyh|p&}2=nVOUuT(vww%R>@ScF=mN$cu4QV
zdGShh+r=g{6)_5{V59_Tu$Zp0qIsv__Kakf62_Fmy0wD!Wy31!68(h7uSNQ%4QeY6
z2ZTBNfQpljcS-^`;}}{!Gp)_MF$sT=OAAIdp{X!I#_mdq<}qvYgz>t%Fwv{|qm+Q8
zdOmT4+<jhnU4-Duwt2%(yy|1Ju5u6==yH{8XVdVgCqR6Y7hxke0a4;;zRJMr_`eXa
z(ey<bc_(MZTl5k|R5;CYp_AhS9;7Lz(80wL{iP<SE6Z?QcY$H(>{AH)GbaLn5$+iS
zNA>r2Q@lurQjNg=8P4F_RhEMH_#@v)V<cJWQc<cVo_1>JhR@-a4?i;f9=a=<Le2MQ
z;YU|n)P(cp278JS&nSx)nd5GFOHsiLob}D`gLt$Jj3lxz?m<^n(r|3BZ~#_<nca}q
zR-+YQ`IG>D#E^NPrA1%CPw8j;rr-ExHL|{lj2b2S3+@`WpFaChvY0-|Ri<i9?0^O{
z%I;M>t^MXbkJh<%1D5kW$rZJ|<HYs!>BGRo@s&Mnd?k;~Hd9e|e40%$(OfX9^L&#U
zX~du<J?-T7zE+5^^ir8_sUmBj!e7%K%jOgkm0#Ri6ZO#MD%AEjeJ-&|&fED{si-l3
z411dFm#3Y-#K#5qKXAok&yS9gLG?z!m%GaMqfaV-{-B067(ZEx^lSA(L4>0ICW6i-
zY2(u`z~V><q4KzDxaj^}@u&qsaCSOU*p1r2!=%B&!_It;9~lYDH@>MmUQDNW#19B(
zS8!OM9l0Y-Lv-x!I>2YSqOKsm#MQZ=q>#aux-u29yp+Z<L3RtxuAV;99+oyf0wi_C
zexG3xP#U*PBEdX0VV=uIR`X@Nd7o%L<;>p{evbDQ<06z}l$f&Gv>)ggTQWTu&H}a>
z#*m6oO_cAgDx^&Wvc4;bg03tj_3*!;Ghht8Te{!$p<1QLdJ!VfE{MdHz`*B^&!w;_
z&aigIW;vrP!${{smojKcjy%+SMr_IQw<^c>!$wQ<gWG`NtGy#fzm!}%9-BF4FYIBt
z__F(p!6%L<&$Z6R*DOa~zm!TIppLMDr77Sm65A$}-Biu#QNCI(7gBs|>nH@uj^kO@
zoTXBd<xM3kO<OB%;_Wvr4PCeh$%-6f3?PTaGQ^72R5H`YVz9tJeuH_gJC1#i&V3p+
zfuC1;TW~i^kg777Ls(7^YbcrhflrngqFb3<TCB+~xdXU&x105K=J)Hq`P3(IA4J~6
zx8(b$b;1^+oLCY0-*fX(gu^Yb-a57=B8WgFGzOVA7HD5$w@s|rsov7>RX3bU@CzQ_
z4XNMV;=O~^OJ$w`4R*dtie=N1mqlL+_t-{P5lH-dnm+<Juv%lo1P3sVse#PJ0t(rY
zXCp-+WT8Xwr5wSqDCM)!XFY|u9ZxLgV!J|k-_cITgq(}pm)T=KS(R}$S@GYW9{Qc3
zcK{q4`QvGYqC#CzrhTPu&904qo@%8{?ZuJO@`L!I!jpk@%Ob)N$?cjDGgYz>|9rpw
z$yEWC{KJh8cLqwCnrJmONG8?b|A&FHpWGbek{^((e)qj5?JFgXkhsh|I5&F#izu=<
z4>pKPl|JqnCLR|CR}>#i%U|V*3ZK+4S71X__Y39`TGk=UscSoG74oCk6t|8UJx?^e
z2HG@HQiVYE7B*q|NmWTTL3hvnV?tkocfX2zGz4GAU96PM4*3Z%twJ4Q;I=}bjGkj{
zjbE!Y9dXWq=|CzRX<ICD;{w4DjU+tu{9Wi(A|rBOiGP&&6z*$rKJM>25+znxK@wk+
z#1&#0YIV$``N+P03&*nHt!j8Pz0}=v7BUt*B_BS&VMmv7=)0wEtI3jKfw`EsbGu&r
z4ZxP_9cqINd<i-l|3Rwb4|{R3nX;T6%CwRP9gLDLihSxvCPjCEC_i(G668w;P-FP+
zSJV&92Fc0uWQh)9U0N#2@*XG~JPpq^!vru?c}u@~RR;rm52<;+v5EH*I`guSlii*T
z<PuB&UUGxTGXmgYG~P9ODx#F2ZvsSapE6mnM3Q6&d6SMJbNW#kY3N1rah%1l&fKyr
zyslML;W+m9trgamN=XJefItTMHopKfRX~9RWj1g+^)A#Q!H=k@(WR~eCRry!W0(Q+
z{5Cd-+ZJq)*Z6y(M)UBKdt3(tGPdeT0VKkbPl@nN;y~k`0E%&WBI7?okB0-W9s}af
z>omjx{&VKl<-M84J>6+avMi?OttEalATM+TQoUy@-{r@_Kcdpx&4g0Ol!5<4h2K+7
z%vSh{sxKIPTDstP;s2Ws=-z4NIqM7XtpZmj?#o#7a;f7%!d9%^c1u1v-M2QjUln7<
z;_c>rfx>AaVUMT7hf<ivhliS)7dcJ@Cv={JH=qE|Hhmf0P(5^Or)2UIdVaW)@zt#0
zYwJjzP6}r}UODqNE8Gar2{n*@<xq-mKyu~G@RbT~*{2^Po67?iRP~CgbZ9@w#y57a
zL!`^7X6r}KxDSh%Z#PP%fWB%~|G2nF$1f<rM?qC(8_g2bmg1VcVqkts^S9A2jgcd6
zCauC7vj(}6I&8ZQ`U}61KvkHc?{(!eX<<35c2oX9t=r0VX)^0=EduG6p@G)pNU%Dz
z=?nt-ep~Bpa$&V|yj>o8iRCS1RksHZtoT$Ao1px8P}17Qyxjon^;D_Tw0KqtPc+-o
z5mrddkc+Tvj2Ylmwp7~^_+1R3mtX;3EWr}GG_1h@`+HW3npi)3;kF^AwyXDm4>5YO
zRt%wnj3F0cif<)Lj>n#-eSVI#h7zcL-kFhqiyRTu$Wat)bh#RSWTan>)oi9@@*j%X
z?wHk$wt+t>Ex25tQbKe=(~|&imDo0wC5M-x);K&-Z$LMt=&NT9{0zrto=}ND4XrZI
z<C@_A^RxA6sMHi?nUBe7^f6a|RB=^cYyfKXaMI?RESHXaoLV3avNyto>e&YQmpIf(
z1S6iHZ^6@m{gk+0-fU#?D&pL2*tR(~J^<;v1Ue{>0z)!y3naLdgrfM|GT{)MaLGh|
z^O6|r1W}FfK&G`)n4Hu*D6AdtDNy*touNY`&nJ@36$S4)w^$h;_J+{~{Vg6bcy9Q)
zyr93a1b|gO?8LK8*UOrczxLvldZl>E48OAtC3B_(j@VHEy_7zl1@Qln90WR-LP<t}
zGS#ehVQHa{r&THf<Ix^5_#;;4=b4@#o8}5kM}M#(o9;%TVpwCvH3C;yg`eGX`(xsB
z&>j;K;V^e*>1Fd076(b$YfG=Mzgl?<q$rV9H@aC#5&&4SWJ<52Ln*=Krl|IO`3jq>
z6UUx{e;ULn07y;QdKQZ}hEj?3OjnVO`1HmWlfm2Gmw3`fGM$l+cE`NW<@D1^!Pk;J
zpR1Oa{<RW-rq-G(9t{@J{S(de`aj8i*H9ho@qwIMAA(SiO2_>vorz<zQZ#{Vy?Lc9
zmIyhuPejP7GSNqLD<lXd8hKnC9O?aQ<A-3d8|V=1(w0MT`Sl;Sm2Ni8Zuhl}RYjqy
z3>ETmVwW`fKD{EPN)xE2ocnFwkuUNXQE-AR1+o)#^&2TUi5yrUKd*61c*-$OcgoRC
z5imXz#iR+L>ST1R+XOjBwz^kQ^mCu0>OSq0OpaQ@O>q1I#lI8jF`1aoi$aD#!w`yW
zAcNKn5|P*O4Yw)_nDh;Fhh0xS-5|C>z$|Rr9lac>sl2*(bmt(Q{j*6ml)O6d0=Y5+
z_Hc59I)_?_DZ#|XZ(>pR5ftAefVoPRX_|8V<+;L+-Pe~X@$(}dWe)?q=_{IhK*KW6
z><(WUWkIhmv_n&_$EYmFBT%N&a`x+8;P`j=b>KzlTY|vlxLIU~`hf2x7i=d$@kU*c
zj3|NugTQ)QYTB@k3xLchkR6o}=!<56wl10>UH(o(Y@y-CVUU;yU}ouUTlHPXnbymM
zA<cr{2nF6~J*zDSjl34bc|$lZ#!OLiUgxV;q%?(!g3DTf7O1s-cVqv;Kc03K8!n%;
zAk?IXw!hRSnxrGzY*^ca4YeDUN5*W5LPdVFC$5r-j51&Mbv-d}lNFZmcNm&z1f<5S
zK%GPItdLWQoEa;39@xlrMHfW9OjcU$YAY^oTp*?5CQsW0^^glMCeYb{Oc^zF>SmqA
zDEitb;2jSMyGSkesE^%<gTU)C1-!){LuBCd^Yq{TJ{n6H*D^l_@|urcSdhsV@btNe
zeCmlQ0m!BYRqApL7Uvy}TdYSR$UX`|Hra=R$tfQV&1-Mz!2rrA_x@=pTVQFG9vCkY
z*FD(e{fkUp9-0>QguA#cJlbHCD91k_<%I>2tci0gf*W*Q!L-2ZT+;cXaF^DXf+~do
zt5i<EN9_dpk5@V*ae>tTqX2Vx9%c^tq^>khsJVu;uE|=U0`8yyzwa-QpaCFt?3!@s
zvvJEqN3&*5g)>&sb}P}#C+K`*d3QGI4?G~L(gJ0ul;S}oOX?FF;fr?im0A<{<4Bg6
zK<ZC|Dgr!z)o((l1^or?H$~5RxzA*Gv#V~PcG%z)WP8R6?6sG;El?q`S}|*+(_u^0
zQ$_d>K7|?^AJ2(M>(-M|cop@{Q$GP3L)7FTZ&G&{gaqkBB~|B?xY$e)Pf&>O<?u>M
zYpv~7J}}e$(1tF8e`s&qH7c$0qcxvpKNut*Cfh6L7gNfN6_QRPJEalMd^5!iDaEbB
z*ruCf$RvkrbHLbQ;lz$~T5uZjs4A~U(KRwiFU&B=DQQ&_Od@84(Pb{B`1vzqcGX<X
zEPuVjJD-u_>!r`mciBp-RDklYQu$vDzVz?Le}1*<yw72k*8Q$fh1Ke;A_n}?3k0bL
z>nJ<5_?^)VM9rt%=tmG$__e$Yeu;RQgGsz<wc{PzL+hT5mLDT7s9)OKV4lY>P(dQV
z`WFstPMUmV;{qPpxPV4uK+l4Jj4YJafH(7rteShTy6Jy<!@~68_Wl)k=t2zh3%(?N
z*!Tyk`!pJG9ub;I%uAAbTx82YHp9{BTU)}n7$vlCJD@)JYi|R47>r~m)_%Wz)uhJ~
zs7JMZv7+)x`kJ%5$ftxr$Mtcw5PH{^NuWau4)MI-U9g$S)@SSE94-nf3*3j1y@Co6
z{*<bS?FFf%abKByR+5#}(>3M#c5fjJw~NYRtm+}P1r?*EYHJXU+rd+VqIJzvZJsNA
ziBimdg#)ou$e2y_zAbg+LkPP9$g~rrI1uP!ahHluiqfhTnittm<8~q8cbOSHX}$@0
zbDwj*(WFJ>=1k_P6vGI^FwRJuCg@$d_4ZMQVb&;6HQudX`Rr1Yq`auk>98cskj-ee
zloa(u&gyiF>TWhO_Tn$^h;J~$?YHu{Ges9#++>KnR^Fi8_O4K?GF1$q{XnW1z}l?e
zgF1Wxh@H3*dRCVLVj*&5c>;~lm*bhoJlJqz9agCk%*p}$twM8=jCr@E`-S#{j1Q3F
z(8qQU82D5xt)4%U1vc{J_PMw*(WDbayR!3e>zr#6W`Datsmk<NvJWi0j9XiKv&{|n
z0N%o1EBcRxhyk)L5zF>SNJUsdOY%SfiAP5#BS0vm!#YxB^sL(R?V(lAy+%t(L>;be
z_gsl1!5WYb-RvGIeSXuq0i9+8R+;G%n-(*`+yudZL+`@{+_~Lxg8X}9EC4VFYq4z4
zgfu@u(!k9hNUNj&T?+aW(*yG(CfQQcJ`}K?$LD~<jq=|mdJPTmExobrWeecL|J*zT
zUGn^Qsg#Kfd}}N~>ViY)@sA&$qarf?=Mus$11zV+yp3*i|28ZYkkvibKWzkFwSMe)
zP3F%QU@H3e`6Bq(>c7iWI3_-@rXYtO8oK`1k5z0xQKbKQRWAzo7Q3~}QPsa)5`66P
k)Bo-A|BmwiFBJPhRNE0bke3a)9t8YkC6y$~#7zSJ4=`O>pa1{>

literal 26015
zcmeFZc{tSV`#(IEii9Fbh$6~bAt6R0d$KFbC_>h<RbqxB+4m)4M3S9sAx0!y*6f2J
z`<8Wv*`I6N_viC_p5OP6=lTEn9f#v+=05J3_xpWa=XIX1*Xw+p6L$BGChO5NM<Eah
ztG1T95d=aHUeZID4ugMopAQniKXhJ3nre`e9=>G=L=d8_e$(W+&052l*KFI+-rk|N
zA;OSXkgo|XJn=H`12Dp4UnIMdA9bO<;^tP0b;Qg)=E+{3aVEL(o!0T`ZGLl;UmlIc
zJ7D%^uHIsMMn3_G{c-za4_$|5GI#eACT|9mhj~;L9qKRTy&dV!GvtmNci{O^tw6?q
z{`fSSS|Lq_xCMLdfBusy^JPeuP%MO*_7}(i-aX0cS9ruBNJsm#g{TVr^GcBJ2zWQG
zn&Z_etV&P&Yk~x-{PRkco(;Tf3c9_R`0uv{(m?|Ldr7T8x<H1go=XY;Tm-@ZA^iJ_
z`FbpPcjQclvB<&Y1nCY#cK?0F@r3q{O;#~a@8EK(^v57e4F6txn)Z&*$@|W`f1m3#
zr0>YT57`vNcp7rOZ|VKjgJ*)!9+3V2JRsQ4|FeVtCq(~$eg@0Z0}Fdt@w2$W?^W2g
zb$YAq1lBAI^`|*+A3k6h9aTM-u6e~=wfrmH$@NTLO-FW+f^eg+gwD~D(uL`mH`5-E
z)dF5JV);+VdaF+}54KEB|E4y^b)T#G7EbCE^As<%c%c|F#J$sA`snU2Zml>*n{Wt2
zU`q23_BgQgsyxhJt)A3cZ^{y8+}H%amhuNpRd=T#OsFf&LpddIaY(yR&HLdL6eGR3
zfoR;BjGu%xj;mo@<Y%pFH=i+&YE2_gfSimu$jL2?R_^i>D(tTU)}2(wLKkL<$JaK3
z(UywzeL0XC-dH=xV^7ArqoXQ^FWP&yO9_{go*dJChP2!2kvVBLQXV(!9{Aw*{Yhm8
zNMU!&cW`@yigXIAdm68p1jb+YeK;%2zjphU`7w&cZ*l#Gvdq@;UHX9>nL44e?WIFT
zy$;n3A?ALkp=(UERQ$l<PCTPllMa2!KsDk?7N;__;q9l_%6>Rh##+tmn~TP)e#b78
z(^pgRv-~HAWhR(M=`=<CL+AoIi+(A@LzpczRm~`#p9GYkZ`<F|1;^~JbRkyXBk~xM
z-KbG|r@{&iPM}B@&*+C2Q=Sp7!%N?Qtp54Itfw<52&Xt=gP|!bjZSxK2uh95j`kZf
zq>)5lK<bAEdL7D0Pxva36B?dQM|q9JEbNV@-M5NE7Qv?viF>kvPn+IST_rZ0{n5j(
zihdR?R94E5b?Z*s+*7oq!VU>4(7mgDqzCst#3CPBu2K^jW!30>{b|;`XcHuh6gkE~
zD>0Dl*;!wgD8v(l=)=XsC+aUV8GN3psv%Q(ru>~*Wdty{|8#OnKr>YzNZ!(oZMp_x
z%KI>_x_)M)OJVVWvp0vn?BA)7ul&`EA^0&PVDf9t_fJLCXvzuLQg)6M@HXA1w*)n<
zkDFHEvVJkzqcOa$s&gjLGy|-V=NFh4#72H*WA%-sC8bdMkHuG&;4pUSa|v4TN%MUS
zzd9(tuOqwj!77`i26pb%PqQBB8~y#NWUn_HuZ|ohM>HAKreCDfxi{S$buN+uLo^X4
zjB4xWb_(Bu&=tFSDpZGF_^vf$H77;tta=x3=yAoq5W?`2OK8OEL!{@Oe5NGEJ5~Ze
zH>o)BqHc-g3VD_KPA0IzS6@H<N?T!7Tk#p`;ozTBW|fUTjO9B=rrn%_(Hq74jHld>
z%`Q_3abkzQ#5J9wRsTb@g&BQB?^zy$UNp6){uRi)H9K`p5}Sa4#U)YA7g`{;DXdmP
zF?Nu<LT~0|!IG>AW{p$2LD2ji`iNQ@W7vGd+m*Sw7vmtU00|k2T!2K9kf;$f{g_su
z(!cOx)QvuVle@_LDe^DUN_~Ix?EXXj+$2<x*)MLB!_Q|3#*t(cLPMnSq3y}F0W<mu
zy0W3GeB9vtnw}Wd*-x+smmxbTemg=*E*qw#kK(wWpQomu$>@jJZkvz9TI-o|8M9S?
z1ACU3B8|KQR&SNDx{_>nPS*E!KV>rEZRQwib)2H~{UVwg=3-#Vbnz*c*|Vc6<Hj3I
zz9BeI&Vyy|Pl3xlVtV_nG!ffTfSR2&W?FN54XY$8yW5FVi{C9K|2|Ems@(e1X{StG
zw1y;Yg*h*W(5Y5ggwG1oag;>|ijXvJIVtuP)2Xigx%vDR_BIEl@u+BhteT%c8z<^(
zaBF>US$SrN@c*{<%ydJzz3gRMc|SNsMD0l3jK|~gj)cx_{@SC@w-%TdR9*(|?u>oe
z{T^y24|Z(G4H}&Zjy{C$9{wdg)^E6!Kxy0i&dqYKd>hj~7pq(RfKtkSSz4OP{j}W>
z!prQRL_>g#w3G8qB1qp20rNV}I(fyr@!4%@+}7<^PhNJFu2ZE$?@2rqLIvsh^Ay^7
zrIL5g{z*BzT8k(z+xj9ix5)Q@i|TJ@gWTMxEU%r&KTj|oQ8b+~fKihAa8&LVOgoo%
zF3Nk4$AR+vNTKvX)nAlFA`9Jf9MvzmwA(`l@>##$(+q@Yz4o;3IOY8I@9m#AfAp|7
zb8>{BI$ekeALlRY$a`83=lfYCCirfGb3A7*<9FgXFEdGohDUk9XN5QA7^|zuG3y$8
zG17v4BWws4i&BDI!*<FCM-Fi<R{aNmatgInGSpQXenukvup<CRZ&tnCr<D{@&R92u
zhcTpE6nD<^OR4ZSCtFs@cSk<m2g;#pe*9s)w=BNNy_!EV+b$e$h3Bo&^Ennsr|L5r
zmIJo<@=euBa{8GQOKut?F+Dl>QJZ37N>-DT_$i+dX-ASv!c#r+f+EMr8xum!*YCm5
zoa+4S9v+BET={hq4#A+#6Mex@1OEF{H-eY&H$k$$8Q@}JO4aiqc15Vvd?_fT)S@Ov
zf}yp$nj!GiO>+g&{O!!s5R+Ou1%L2yYmu`2^^KU2zP`y<I1hnayAyPi%uk4{q9pBn
zm{cj6<T)&@NZmmy+vj7X>I03>wn3UMB`@3n48bP6DY+Ukw+m53Jh@#%%^ftTA+x3s
zI&h6zB%NyNphu|?*7a0v?w~_HMpr*Z;Czr9ZLyEh7Q0MawTdhRZg>3k(lXr-DXo0i
zYp$b+_|23QH>y&O#W&>wM7LC~;jfCp7`AV;P4fL2g*gwBtsK1+_YGDR#=U1B79Bl4
z|3pED?fr*JQzJAcaWH;l+Yf}*FvM0U-7X(ijJFM0Y=LAoH;wTFRusT!KMynCFn%g9
zM(|J>W`PxTgeRe#iJ~KAPrNJ+!HtA|>+M(ch7@?JAA=MOxbn#|$2OH52g~d97zQdR
zKSn8JDWC4S5Z%{?OzY)`ZS00_)K|%bTx9o3tI7`S#=~YzbkKGL>;jEb-J}<uwxCCk
zQx@5?)-BsiXL?V$Ar#OlGL+nxy;pX&Bqu56aRSanrD52!mw&+XrC&s9(hJ){X{X@$
zD{@91*2A<J=}MITRJLn-ETZOi`4jRb&wL*d(%8m5Q#rN65YtCeY{`sTw&qM<tv>I(
zJg)MEn^v$@5uxFvRH+?wn&q`Pb!YE0oB}pKw{y5J7ClPctPy{+c&kwlFgtP(IPQjw
zCTQqjV0#B#7P&HlB4pnb=b#*Y$9FVe-;K)KVgbJqq-S-Kat$)Iw0aR*{KFmu-m9xb
zklZgDs8*9_UezcB{>(h(P2S{7i`n>Hhe*lmS=(1fqsl%oBR~~PrR*m=kRn!)q?gw?
zE*=4iW<IOa@c=2<D$Q*Cxmjs-<87a9jq*69_J(Iy;e8BrZ?Rqr_12?=l)vtgAvDw%
zcp5Sodqsf@1S>*SRfjww^|l%@n`u@FpS}2SQL-O*M9_!wE<`xqKqU67O5{E_`#DWI
zEBx>DE`4ywYMFQNAmDB@w|8OIcg}l$0YS>USDjQzp7azEga#c(e`-d4BZ(pcSo7m}
z=FA2Laq><aqCVY_Chg$`EA6HSV1-Z$Z#Uy?)bC(Z+_5b3<8hm!<CJ_;i7CGRVnqI4
zuf!*dmBq^fathXmAtK8a9^g*5PdureW*w&CkV$Cm+szqev5i7;M1npCC0zBIq0W9f
zY2GvmKiR&ZJ4SI8zIzTtxEN#FB*>;Fw3LtkmbS*NTrZ#>y4Qpm2v$TH=+H%0OS&QM
z;d^0zpRb};cZ^orKr(pq)OPVd9NIZK(3x029RUtAk49U)=n3Tpm@aifg{6}0b;zDW
z-0y<{X~6Cmf)bkxms^d*8AQ?rlCS+?qMhaVz%EH~L`(@mX-YYyY3kZOy7`H225Kf4
z+Og6r^{I?xd+av~6}CId_k|^U9ai@@C5lmuw!pbz6;SZNUyg$mh>#8L3zAarJ^OE|
z8WtwaC(l1bI;L&bJn>?zO)?cBCAD(y_oaX%GW|$<%L{A`j^nr+0(nF~6qmJ#nNoK`
zq-5gJ1NON{xJm>!6|P-Dmj9yQOhiBAI}-C6V4$ep`~+3W<FQF7(YrBA@95O;uqMt0
z*qswMqoi%7+;3@)dLUuNtLEwCDKir@PN|xHIizv~6gc;r(MZPkI;uYYR`(Y%ef+l;
z*?R;%v%Sk>SjQ>6cvkyaajlr%2e^d#w=npxU}zqpAa}<BVw?Zqx&$ru^ldHC)Mml^
z7{yo9lskjE&BzhE8#5k4=7E`bOu(CW(8=#B5ijf)%&&1#Qa3d*)vrN;R9b5?JgAVM
ztkzF%wx!8-q2{}9z0D8^78O2<m`VxI8B?jrT}N#%g@_O@l-#%tmy3A#;cm4G-j-vO
z8JriT4?j1+H=GtK%UzdtBu@&wH_wG$!Y0f@e&@pJHC9Low~SLsO9h$uMPnDeeVGNx
zwS5?kT~KMz^bGx%^$h?N{arn@(bQjX@?za#<d(w8VXuoHN8-L-32wC%vVdQX);r&k
zgnHWb1VW7jcTG49K#R}u<8IVXhZ+6Q-tz(~b=-|kOdKaqyJfGV4An&%UsZKn{{#=<
z4_mzjPK@(OU&>X0lfE6h0DlA0%0)W;{hh((7l_>n!8A5(6XwkDIN~>&;u#k6me5{+
z_*=?erl_LnhRB&}?tvxKsMUqmUcg;UGMheCqX0arw{xQQJXP;aEZOy;RU@v5SXXMX
z4E4v5Xeu>woRaj61NYUKRu^=lF+y}47nNvvQ-)#b`NlE&hT_j2E>dp9^kE!kRMq!f
zNRsAkDq)?qVMw|@aa;l`u5`v%mA({&Z<CAA90LHKoi|l&wi~syYKS>`M~>GE=E7Oc
zE|RpHVeS{Aa+NN)A@B*-cZ|^}zUU^$<S1~zUp~yg2It0CuW9~O-uKXHiqsl@jF*Xj
z?G5U}x7oJ!748U)?!N~GDKw@0xntrurT%Ctd*Mm2rAg<z;ozD!;ekb@)ib2G8A^fe
z%WzqN3OzKm_Dx87i<Z@kSA*@coD`eR0#a-gSlCe~uIMnv_gbo)lq@ub)!NV-POY^0
zI~&EQv)w3?4$c|N{T0y~f_6266rl-r<S{3XJWkt@YicThZrI8*xw;UM(7<XB{##k4
zw>T*iQ;Ivx2t554-Ny}`&lYAaEdoxA*k)Ns&~JxEF%|$tFHlVOOsF2coCXMdXs|6J
zZ-szPq@}*G)|1Hskq>5uFLI1zo=4g^HpBE4KFEl+K$_n9E*5DwouSX3k(MLR2sJF>
zmo*p(N_R10%m@yiQ~?LGO0uTIWxPO2IcfjU(Lx?)V!AwwW*G~()iru`l~>?a9S>^K
z+x89>P?O995HMjU{d`PyHMRSJ1T^iU8*#@BmBEva`4SC6bycsKE-sLPY3a{YE;nBG
z@8g>z?7cVL_bP7FYLGN>DD3(t1cDPV&v%=PkQ(ptlRS{?-GAOoGh5L3OzHfen?C>@
zaw@Z|Ax~a=OvIdRoydC@mmG}3&ks~XIVlpGXW1Uq03I|d8Sl>q5Wxs%tP!*ZBtgvR
z@9^Q880Q95O~+w3#OEvnhjU?b3EB<)(v;R)C$B1;WZ{KD<>9Xw3&5cY6q7j}s!Knl
zr)ooSN1FE%>ZhO)KO5XYY}LGHPVL@L;DY;}3riB^OeJ9DKHheW<$M8?#1=ZN@F_8q
z>_DV1@qlc}b&kf8ZU)D!83rMj@B^Kwk}2~z3e{9JdmU+zT(WEGMt#{^wOg7heOiF`
zh${X3dBAb4?D1A0hf#$E$0<R6jKuM(!P4cvv-_55k)?!3kEF%@FJU>KB0FF<-<!Kn
zI1_(A<G%^`rqHin+VO!3^abl1d*^*;1hX9v_j!Lbhf#ds$Sp<034F(ek+SDrr*~4$
z3Xxskj8hh@LX^!@!NVS9aC{~_eVX>kfdQ3%+{W`g;q1J<7Bt_*N5phjaIfNm2^Ke<
z?GJD1#$2Z2ZzU7nRWcJxu7l&jrP;%#-NXZAk($P(oJF>**$hsmHJ4D7<guDIdN-;X
z-B@d7Cs8K@;pcjG><|C|y5#pWneQKIyCmR?cNxKhPF@g1Qz%YM9~i9PW-14cwgTeB
zdQgpwE$Zaow4#M9zFsM6gXry}tp%okuK^vP3C{a8n8uH-qz3UfXsl2fis1YZbZ6fb
zjfqay7mo8&i3o#PH4l)lxY~ai#MQLO@@a(71dPj1d^PE-^nmn{X{(%_ccgL{1sM4P
zWc2Pz9y20e&U#DQN<eLUdCs93b9nEj%h)A_8iWpjU>UC&wWhJmpQB?~rWORx)Y~nQ
zzTZ>dofin!?IGz`KQv4tsiUFF*Fwh({+@^9uW(ZI#)AVaX<NhPFfFK+Rmbf5nAj$D
zEE`+g!t{6JizXVHqUrvEOZQpkgM|boi-0RJzrG2R4AH2%hUgrGHHadc6hV{${T&fO
zaYPL-#e$RmCAx2W;T(-F2^~eiOP^l-vMxPN5s!h{&is5^LSk{bXS3`wag{HSm6nHW
z4@Czt79;}XkFuIalfUDQ@?kEcN8J$l9-R_JOZTXA(xvAVZiIcaCw3LXT|vZ3Fnpxx
z_G^&<oP;tk37`v^5&bg68P+3rM{L8Y5p{{1HP2m4R>_Y<19Ra@6>=!kbjGg?chi06
zi?p)7F$&K}4}zRGDPX0#?<DPC9((r4X}9>z8bgy1R8`n@5k!Es3`PFSi<9!tb4v};
zWnQb`u$J`*^Brd%)d%_VhL7Krv=|~cBA^+7<Ve_GA!)*d&axQ_-+R_+m`WgdK1RbH
zQE1JTYVgS{X<EJJqcK{99w7Tph(-0sXjJV9cjQbkO4^0Uu73_b&s;@@^%Rg2UxWRB
zQnsbw!||Mp2KK=L*_z^E#8qZDHt>8Af~1fVQ(cS}k=A+-=4U{`e8#Z6=+!PI0<dk5
z@LKIrn!Z9W^z^N;ZQ4IX|IFI3DFP6EQ&PpvnbNY%TkaQ%eJDUh!W#H0bO%F!-)W%~
z)56t{^J$>4ZEBzsafG=05UHHK4jpAh=qAkEbn`{sTd7gJ77FAeno8(u?<Ik)Xi?+~
znFl*);V#G)!>Gq`*Nu7`HMPX8Fd4I8N0dcl-Xu{|s>qz?$n$bHT7#hpJ<W}UAj1Y0
z$nYG|qvsOLVnzf?pJzrG0*Ze)E`hvxoBqj5Wv<grs3kQH%63S6HFf9SFY-JcVEBe;
zOp)p6OD@2X?}pr-jn&SYppold_H68W4ioNKR%0=byGI5-80AklmMfe5SGna^TlzTV
zsWUMJExJz{7XnEO=i12=*VMxd3RmdywN=%%=9}$@pqY1H%b_Xp>nM^fA4|>c*snN7
zy!RVsgi_6Q)UquIa6VW6I~k0PI;u3}&`_{8vXc<OwCj^tNuIya<eH0QGd)Q$YWbbI
zzjV~>tU*>;T~9Ey?h5l7t>W>&njO)~8fI#*M%Cn>=oTgHeuKqR{Nu8?#1WUU;{QUX
zbO4!TqxEidSdyK)nH7-Xw8u1@Sc_zo5Y7^R$?ZRL8x$gqe+p4T9fAvgWy}PP07chK
zlp~cg$*T1eT1D1B6B00T6y&?AhuS@_8GW^~5;x65lOsY+rZrbctClTKh!O)hlyZ2j
z!Nvn@>kVD9uahG@ijnfSojumF0?1&De478^Lv{v*4#c(|{ysZM2gBv@@Vhq!YMbTp
z-W))ex<bY0#J3v+)ev~9Sd~h7fDZPV$Jq0{@TN24+`M$kJ|H$ZtK<r&HMd&<mZNMy
zsy+XOMO%M2ozVTCLR8xyqnm6lBMa51rv`(vTXz^V{lJ0N1S<2?>-Ky)_1+XS%C!T?
zq;jur!2Dytyn*kfRwL*U!lgVb8?Y~(T`2~lbVR^a#Wr~PmIjSbpKd9G>enJq=;*XD
z+aLRJ)C~5cYS7>n1fcyzH9kYP<6vERedi>!rgNFvJ5fCwra{R6=*l2o|KaYS{%m!{
z_@EI1@LH2aX-g_C>C}Vt+Ensqu0^ZKh*pGNNuN=tQTUBawcTCFx9%XLYE*{^Af0O3
zbB^AJw|WI0Qdj^Mk!2?O9tL~TQzqlM{DfYr#uB#M?{%b)(!<QSSM?nv#<MRg$tfE#
z4+!k?ac2PqfLQN(&2K#Eo!{-!4y036Sl%8Jwxy#R!|iF_0x5amD(ay6_&O1F0h+uN
zl1sD$>PC17?=8P$ptT?&*mf>f)r}K8DH=Dw_Wn-Oyjn)@>rX8JI^lVlSiJ$;ta+T`
zdOmEhf=AE)xwiEFr6NZl*?1%8N#eJ`6<hCC2yuLt00g5;2kKV`t0Jcx;PStfN&<8@
zc!op%P5F}mCR!V!KN!V2j5i<FA5H&H+QOc>AjrK}Yqk02wbNSIhaGao+xJT}7XKbk
zE7GuwkBMFPsB1`fAvm7-n&%5K(z{9)qOUMmp=enpQR^;79k3!pSdSO8$AQMU){pC*
zkF&IC9mp{J1^47$=6-7bM*>^;2r)OY1}I;X4f=^aE$r;)H+)+JT-35^xFkLJZ?BQE
z_{S-bk39hRYfL?xc{50Wsy)!JB){9-bAGdsr)~R;2Eh2E{f{!A76n8I<Dbnw2~`Yj
zYV_T=Z1J0kd69%Ve>F@v{#HUNAlAa6d8U8OHQ=<I9tncTmQhLR0ssX7I?X_u+i)xM
zD*YA28MmWArK_puU!Q(lu#N=GvHJlKsQnOQ%(nR$Hrs7+;j#!CE<LZO5)Qs6HW+o6
zfmSZbvn*m8s}Ui)Mf0bT|M3D`Z*ocqMm;p-qzsF2q>_eACkdE;**#5uxD2@*j?74C
zTKz|PhTg-<^G`7#bWi)hW47E7FZvhFbZQ9Q2;A}I@_WuiRAw#SjbqdloEu**QGwg^
zT<5`K3$T1B7Z1lhyK~;p0TnP#X)(UPAb$X!Oxxu~S%DA>Hbz=E94SN>ae(*7Vxl*Y
zYFW>8(HJ-Xd1;@2pnJ3(;hB6aTqShvVf;Ad6rMd)jb4qW2n7P9`oGE$YLNKy6&BE-
z{A#M_8PIZiu+?+%lt;8+{g=*Ql-SM{wh<n%Jl9)#-aje^WD$V^$nXF(eg7L@jk*B#
zZ@!4yDlO%5yezJ}e6W`T{p7UpCheJ)IEC+Cpb0DeF+l0RzcS+Qk8~iS0W3@~g7)K3
zgp(aJ`Jmc46V1b3K280vFQG7!Mh~6v^4_g|_$i)-i8fy5=5@K!byOU;8}-r0wuQ@k
z%gR5bl^vR4Nwud#SM|Wf-amfUQx{HK57=q-Rr#3nqnIE<^};|G<^q-b+Q>D}kaZdA
zJLnXRz60r%Ks6c`;01bNF%9oH^F&85HWsa8Mxv7=jsPgg>8x(uFmhc0gu2wnGLjP?
zi@av+R|2gFjZ=O~w$Q~kbpiUl>G^*D636H3K|r&K+grzP9bzOXg2S>+z272^2#V7#
z5|q0U6&6z>h_|Q5?<#Uq#Qt7bi)Hk^0}@xy*jBpm-D@=N4q7Z$YeI|UxZmVhJ_s)d
z<>O#!SzYuG>^aGu1pYu!gpv?r--6ghg0^Yd@@$E}7!7KjU9O*YaaOnU5U+!KpY3kL
zIZvV(58Y08B6_$w6AgY|!KU+SS-sQ&4E*+kMd30pTA=krV}ygOMepkD7vAb>z4g}m
zwEB`Q`^tYS(JN4iT$(WlhzZGzsQ=62FUXvj4(g^S=faNmG-z{FqtJ(d3Irs<O8DyO
zhl^}WR|3%<*JnyC22C5SX43r?^9$j%6OKYDq3x6}G{P?mLU!n}e01GUCV*wT?jc6l
zd$P-GSg~$11JyMB>E4VZcf7?561_31HhQq)-dwU#I?%5inC^r!{<nWH{*Rs<%)Wke
zZdWybur&XB8UPnYCA<8RfYkA5_+A2lPRTkf=X{VkU_{eNPqtcw%enyCPugQ;^Uhw(
z<L>t^%lo+Q@qDPXLgG}_poh<m=&%?NysB<g>uRWgCjDXBDP}@iE2RVCo?B#KMv9XG
zfOdH(1;v^RKfj%zTk>FQ;qsppq@bK4h+fBfaYxu|5JiJoh6)$Dn6;XbU58+mAJ;Kk
z4aRRX&ji*e-0j54j{$@WyQ_fNT{^Y^MZCpJpS?2E`%!;Xo;fiLtnJmHc{^>;FdiMo
zL7zd~FbdHi>$y~tBk->>x1=$M=w;|c^UD4Wkp8O3%RRz(|9eGU8ap_sLh5T1S;K^v
zYRST+j%w<|qq=)-WzS!pWElw+G$-lY1)WLZyDw=snyIfKWC@zv2XgX6L?*H!$QB_=
zDh3~<YZr;vit4fb)1qquzaHJ}mpo3XCUCTA(ATSin3YnU6VjSqW%^u=D5HxrCOfGN
zffiCcgYB(m*tvvT=c=NAM4gkEIQ_G8mf8MK_GS&;=50)=j3iZw*+de=fT@cj+cz;9
z^6EO|aXsrO!g>Qa!~*~L7c-wPqXbx<w5wAyvYpW5@6Wp>Zjid^I4ri7!6^2h5-7?s
zdS}1>`Ef}PKD8y)l>Z3IVt-}!I;=m!e#o0s264}_OFesf0Jv;=acwbD{N_PN^J5L6
z>Y$;S>_lXURYdgTQr6*PxEPq9iQ-OPHR8gz*8#DCTwr-D9vo)N2I#O=#U07rElTVo
zw|F^Chyy|nO3>3JsOi4A^_mR6uuv;XPpIaLjvMv9ms(FKW8)hdWMX1oy9%0e9&CdC
z-lZaBjo!0?@)J&)%@{v6P^eG2v)L`<E&?d5>2Rgh2xX0<Q;B9Q2m%q{T*lF6p-dw}
z7Nvhw{?(H=Thny@6_hpXXSIv&{P39v;K#GO)PYz54%T&=I@0#;J*O0RP;oF+8yAr|
z8S|;-<+KO0%Q|Y=4N?0;wC2kjp#O<&q{CHo-Kd@l^hjNLQ&0(1lTL@XRHo9}I}*V^
zdoGTnUUC4+whnS0*RC0Aa8veAihv8GEUrstruSjWpFXWD4zN75&cNr#G|(iy6=#ZQ
ztIs<=iaw06l$khNvz3Ih$2xKw1F`YVG6tjW=gLN-?$XwKT_E_Tt!R1L<z<gQH<ME{
zOg8uv!{iwV5N3i!Ej;uAZc>QKt?#WIM$9Z|T|y&)mS+0`Xhj7`usSO>=NxUr0Tz7;
z4lwUQ{b88gtdV_prW=C=djsm}xBWfcv~}qhkXF_bLh+T@VurCEbF$~3l@!t&Df_~C
zn-^Aq81wL;RO!LVRu1x0UNsM(&Jux?USxrfXpforBYKa*0>mx_*{XM&K({3P#c<Nx
zA1-Xpn_^tzo;Q=^g&!5#s1}%C3vbUGuJV^nx!*Rv`${A({7IroT$!mfEzP+oMNcr&
zm?i$Z>r(WGody}d@)&uJV6=-38X*M0WtRniddphg-f`4!Dl<Za^aH12E%jB|=d;W1
zhY!lHR6WwCO#AzOzxtV(dYGPLS_faScBVtFKVCQ9S_iQ1s9a(%mMv_;=qP^Z*fq~X
z3yGudJBZ6F;B-03vW@Zm&jzbhMHOXR=$p?1bf-<p?|TeMOP35puV47cDCPQwvkg&K
z{q19H3?#EneWKu#-{YZwdP@|y9&4XEbZz@ZKnJ(ii-4KMco!{|cTJtM+!pX%HL{+V
z?(>%)qlPJqb`K$Ut#N;x^iS*qJn)uO`R(cP@}1Y4u5L+bXGR=QfG@|`IDLVEek}Qe
z)TyIyG=KheJ1;2iR~vE_cxt|rt(gSYHJq|IqZ-^wCCrk}B5yf+AMRrRiA~jxK9uVC
zFrf+smpBG#%sc_TNl%#lJWgrDWfR-Dk1qkWNUq47oMwZMcv0Dda5~B<U~L*j_4kWn
zM(m<dLW1JNx}Sd7nPGYM@0h7$26hb#mEW8bIDP}m#%e_bD2?Gj3>!jU@DU9x7NfEB
zqcTrpMVQ-Ta%wIGE^rc$D~y?Q;F*DjF)gDYv0e|D`nd*LiZjJ045eD_wg5T(w}l+U
z8b30$9A~Od+TRWQ3weIV9~f_bf4bS^d^?72L8T!yDUTBfubAc8{f47767XPpt)vsw
zQG~G&kg=Bt{VyizV(X|GMXA0%3pDM0uwvvudiUZFa{<yj1|YxfvTje)ty!Q&X0IM`
zoQ}AbZ`0~tg?)EO0?OAm0TZyD8IPTk{vQ8(GTX8dcxEmNSgO=^GJ|xQ$0q4<R&AFA
zM0#9Sqg+t|;!_Pdm!zW}U_S)iOCf^3jS9+&(4Pz7)XOO;HiQfsMn9Td!{+h@=2XV(
zqtfeAOhPHDU1CmT92^4>YEASRR!hh8?&z8bNV4w4C*C4V0B{h2XTrNCi;QkNuKY|D
z*j?eJVJFCr$ky!4^3H3h_t>tnRgxo+tzAwky~K1{K3<DH=kG5tj`HGTwZ4L#^^{}2
z?MU@L(lK*sGUH(dfE<we^_G4fL0VH}@nZ(`dJdXuw33IWywN4wyU5kYHh1Q51Igd#
zV`jIrq;LLUFGRxku_T=&HiB^|RO3@!d7kNxS?3G?3*iZ#jDjh5w38s|lOTtUx(P&=
zG}9Dl4)xz3l;388Ue>Ebf}F*NO;KjVi!mHZCcG7$Ll{{zN*kwe;ZC6I#V?R*Pw-t#
z!fV$$m!Wcm*D7ASQqA9Otf=#Kv~kj?fc`Q2|K77H=(OeD>yPK31YRMNS&V?o)y5Tb
z#@1|iVrg`*-5;ow3#2J+RYy@1yL&-F%!d`Ok6YcJy0m}4`FJfxr_$e#-z9-Ll7d0}
zXpZ`z<K3ZR0~$?%BY|zD!)$c-c*5w@ijwVDQFx2e&JUd^nMv>{2TcXB&4e@W9Ga1j
zb4Ew003Vl?S|^z0KGcx<%%M*mxrBY0l<z*r(*8@*ZXZEq{bPO>)oG5u#{kykbYPE^
z<awa~^bM$J$HsFR?+!w~#X;td4FSpn#ovr76(qZ!0v>@T5_in!b&tV|zP?hgO#b?n
zE)=x)o3`!UDQu6CAH2Io2aw!z0t)`IvD1NOI`Kt^=7`JCveM3xK3wr^!KPzGHR1}a
zPX?}Cl!o6=cBdA$vsaP3*0_fDo->=RqSFt2H}98>p~-~>;#J$!t5-l?orQvieVZBI
zvO5PrN$lrFG5MBMvkU)X9rmAP&s_l4L9Un<ahxopIh6GGy#N~*ZPxUw8itnD6jyG`
z-z`7iX1ZFTdzu1;NBkJdlTG}OT2`vZXu{w9dNb}n-3*htwjVJI(6k5tZLbfzt~B3&
z)9L)kGsGEQ#AF(FO{3QUql&JHZpNJLS2r_;OPC+dYje1Qqmnc@O~?LwIv&wXPah7e
z-@)bJO;8lmlG|11W=dl_KE#d>;!sy2=i4~je`w5jy!N3y+6-|Hn8P>`k!!brX-th+
zuj4~0{jg50yP=-!H{T&F0<CMl+B6b!FK7c;Vj%Xu514@r5elSb$eEY-`>+73s5Ba^
zQuHZKV*LN&DXULc$y<`$``klN{GO|DnZBxT=}N<<+!51Hb*p5rGfjT4k_`5V1*UT<
zfvxF6X=Q1CD!MuM07(g)Km2FYH>SzA8PodOsrLC@x&C4r{l|)#j$O+j?)(>XVU*cF
z2Z`1~YT9z>Tmk)ZPbT;*lTZG9Z2^%%d<|K~OsW%FzfG|={Wm1gtn@}Ji@rB2L8rbl
z8_TPCLdhen8Vb>V-zgy+=YKWm2ll}a)N>|<qtl%T`AC>j?_D=U>5-_0V!wO?u;z~i
z@7{5vrsSGibgj&rWJ9i#(dlUw=j+W~eL;$~tqHhZXDwLfb4h2;9_db$|LZ3Hm{>or
zr%I8wEprnib#x)NM@C}Lyu0as0o3Z(BIQ*sFYsMmHvSf3W@qZ`a%B)T=>6D{JZ||?
zhQ`t{s)VVWdwj|na0+P#QB&~)kmnqhD6F$w44=8J#6bZnepP|vr!QD(EahG6NnLWm
z&{(JJU!W#O)FJnu<W`bV?mAy|O)a{enlTf3du7|+Mx~z|3fTZGDrmXGH-87nW}AnB
zcrX(EuhlJSZzu^!Sj-3w!Sst4NcxoRf=-gV{Z6hc;u^>3`DywUf18GOO?9{;MyXgu
zg6jH>E8=32WBIj)x1fi*(iY#=T#T4aez8n<8S?zG3CUKDW+XzICy?jF1`lxJW3>#J
z^T+NUdtEfFB3D}3<Q)e4;u6-b8F{bEVwm`;8et1dCp_IBRS9PE<}uzUit*PX)ubqK
zkyIdZX+e?mhfI@e`$kwp>6%7P{6UmT{iDR4QoH4N5-4%%ySs2na)RFD9H12Z4}-$(
zsE3Y=mg5vw;L$~{X|_Ex$ZiyRs6lhYbcw<IpX0w@cYrp4j9<4c4UBC$gf@_=`edBL
z1BKN)B5cga;0i|fOc0i*vr`=uXAI!iH7>c~zn`Xc1DDGc-n!TE9Z95sR;LaC*1e!X
z-IXu=OoL<*Tww3m<=vGxJQUL!%4vSK&{qR4sVi{JEtP+_7h-#)Z=Xwv1_PjH2HXaK
zc=6Wy29rVAR9Y}JKf<PNPmhyw%01d?>|_;refNTK&Nyg6W5PCPY`6$<e5X#}uVmC`
zGb3E?C4Ei~9tz=Y(PGp8U~%#8r}4y=Zw@GcLOBId?#y(CnmaH0yq(znDC_!38c8w;
z%e121`N-W?6l_4CH_9~{npS<fE&C}Tc)A15U~!r-9Jj4=FySY3nqdy`Ltcp5Jh()y
z1TZu;%PO5^1k!fSEVtV^(DmsEkIv*#of}luo{~TH<>7qkL5oUK^8e<UsNRoZosE@2
z7;YzQt8C3Ka0Zw;5yjIV8hT_~@gr}MwmFrX|8!ywm%boh0nroi#{bnN`hwZn0niiF
zSSEevQNNQYg}WjZ0lL2b(^z5L_|OXl#D0oJf{m^uTmrEXCmz5mufN~55PLSgZD7(d
z6{P-T^3!>b(aZIN$_#<l^c`)$830<qAvbB>)9>Vr&ndys(zfT#NPFVyI~2)@vK;N8
z-G#fvH6XSjTD^CXGTz6ffv$<kxu-+MJ-eR+nxiGl(L-y<zqT{OOv8EHl{lEL*;qj)
zIJE`x9~eYw{V+>&?Rb94FrzP?+rjEHy)Jz1$<<T<B+}MI-woi0ibQnF|EV4cZq$JF
z0+UNA#J4>t`9UYELbZ6~d6lDapKRdQKUq@aNuoiL;%3fmp*)bmXi0vV1Rw(`tZq=I
zzd2~@<|Fxzq)K5qg|sqI@8j;ky-j;bJNa@YseH2;(on;inmb<Rbt+#20XY58C=*_H
z7`5e!co)=83>WC?L=f0(1alD~k%@!`5@}zX2t<i8%x%7z6dHGy=j(I1YkJ`HaI8Jq
z>MdThcvq`b=&2nOFp!xDUr5mMoc9>NoQ#DH;7V^j$uj0NyRd8!U3w!5`*W3~5ndPD
zBZ&1s#UlTv%-iEwM_vNx9Q_LQb-51Yp$K85F`ORsy$1sU5h)?f>zKe~?Ma%()#~$l
zCX9x|BEV#U^${*%2mMCUS;GKjAb4O{JU-tn-AM|D!YZ|~VtVphGpzkMq>kWII}5T!
zr}?{0$MLK4t4KOk{OEQ^J<Z@iYuE`W%fAKffr3PlDk^}a^Be*vuyLkT0A`(P!O?ow
zzhAZeS<;OPyvW~tEEp`(E6EpTJly=~K;W0&=Q3(Ij|Z_|$aRE7d;!3_HG25xuWMCg
zGPryGTSQ<G_xt3XTS`-=Hh^Q)b3s}@yBl%ajXM71+hj(o*;M#`nJcjdu^8+?d6|CZ
zSxpZA4Pf08t~ID43q;%fE!{Kylm>cEf%hK49zgCsI_x$6qz3f2j%Cd@$T00zXEzqt
zR<28HBMzs(PjTQjvUnjIosXI7vm}4f&F?mXzGko+89o7g1PUebtNs@}a-SL$E)-jQ
zSV!876jR<oCkDFm)fWNJ9j?85@9+;umV^bqZ&FYY8vXz7Q9;NbgWc){B>{lar2!*U
za>Q%U{&K>hmQxVgXz1&~rDLb$$$(zU&G}1T;R1p&U6{ZX)&JecVrK0ve!u+l7`bqE
zCv|`G>Zy%LBQ)k{%cwjPt<!)44I{q_q}(_~<8xLoVS?ii5^4hNDRltC43Z_u2UsXO
z!&BHX%m9*VD|@d^0H4-gp<<fpIHf}lm~d%kdS&@X&6qnyR<oEfy?qv3m5|@xz)Ye`
zGtz2V+}t?b6=Z+ug%hY<tuE7qmfsf_c7VO<F*iei4CFE-!<xcLpSF2q5|_f5-?M=n
z?h5!82U6OIz43u5v!fUuzb-)ia{@Hl#(xYnYQ%P0Z)gO#R1EJw^QX#^+`8`*9P5A$
za0e8s{xgUZgnJn}ODH?9vjCU&RMb|<OaZ+Oq3ZH+zQ_a=@GITVn_-QCYex6Ga^}<$
zhq#}z9tKdiSc!)>m9Y>El2oF+=;JtvgE6@{%zmf9UDHmz8(~0IZf?e&E9#Z{P?ju-
zzmh%+sN|FP9g^=itE&-A-zj&7ur-%v44gk)khx!S)B3Ai_>Zc*_Ph~rEIx?8;~Vg8
zh9Lk<#bwPG3;CIcl#ukzi-3@AP$(c;!gfyKYRJQqrWBNR-jxY?21v_c+r3=zfZR{8
zFCSmR{Z0f?*amBKnvv><7nmPupb_?m6R1ylx?*6T?<lq!{zA7_pJ>06gx)X~NR9|t
zL8s3=-sMH$SwuT<Dg1?FP)zG!X^9Xj*)UGvnj-*C)2>8bWCLj8pE;ob=2VQy1sfX?
zjK!C*=wTd6A#z@mGuI6<wc<G8;d-VCw31sv0ljsAQr~b=gzs_*oO&QIR(rqBzzvb^
z-?nRU8j@NaXiOYwZP1n8emnt283Zza>pce2CJQg&3oPTU9br#C?kgdY8F2?Ygpk_+
zU<{bdLBmLGgt#~zad?LLe(YvVc~BJgJz?|D`UyQUPUPxNmjpIPzysW`s^ev~{|^?Q
zgxtveh@=bvOSK_rLR605t=vRH7<;-6o<({HhrIU#;4zaWN1v-DDdf%lP92Y{S1%rh
z+%8l4YJ3UnRSz6BQOd<m0mRS4#0ZhP7yr`;1j42H&FiS2`G_Q%N~J8e%&St(y^c|Q
z^Ct5Y=q6UY5Z3%uzWsy`ScuhD#*P6M_a{P=W)I2EW~`Rdi1RWs)O49Zn+@Qeb-fE5
zi-ZD}Cqn2<VAdlO(sVv9s85-jk&EIBJ|jn`-hCs@tBH+m$7DdWq!G$H&+4Ptt;I}C
z(9~IU9idmMv|vTxS!rbY&pLqnfJ>rENsuN<0<_9RI_TkMM?2I3SH?jTw~D->JTd^S
zy%ZG%yb=EQ(6DNf#=P{XM_e`4`Eb5t#RX_1@z@|PZ-XKZkm`~^(zyeJ(OcPqL~S|#
zanRpN*fK>Gtvw2n1_JqC8GM(x#a9J2H)`i|4Ik_u`Uw?jP<fX2r?gEAc3aa1OQUKY
zmVaD_R=nL$5(TbC+9Vb@^zNtYj~vJegFlu`(3lMkU<F9J?WQ<TC{0yF^*+x)4XObZ
z%Ho?sBwjZr4u0*H8#QgS&N}l4;JLQ2dSG)<sWay^cQf1vUg-2lJ4!{Uh2P~*=Ek}z
zESwbIF?Q#*r(j&;SC*N+W)<1`{y1>C{fkhar!xRZo$w!ssulHXDfgl$H{rHaFEB~?
zmX~dSGV})b*4gx}z(|een$|w28`a7tz~Usuf$Gm*$hni71l=){*cGXN^8?Z(^>T2~
zN%)+O&93L2@vR=__LUCIsW+BC4E2D=@o2l$C#<IN3hB4qPCKwULsKP8jcxV`3BYJR
ze0d!8Oy^MHj~J{ON|A+wVzdf;Bv;5pOFyMYB8_@()DihwyG*c5S3Z@jsn56d3$Q-6
z_TF6s?s~R@>*12jh}!wYsW&3@mq2yLo(^P2Bw<gWU;Yk;*6;#A#U$`oqboghcU~G^
zWGa3*{j=ezVNb27JFACG|Fm>`xMZ3?SB<*aVsdW;P?BG^rdO=~!KlyK4+cyaGByjV
zQT&qWTIT_N0COoH2R`%igy)Pt;HkfTPRTS|zn`2C0V>8C{a{!%>X5$sX2K8!9IY!`
zGZ(bDBHV#!-6RfLSer-7_WMg|aLl0WZ2xbDg0Lz7Yy&Tds|DVr8Ro2SuItHFkf>E$
z2)tCix~QqjXngQ{d_+7laZh`oV82XqoHBaxe2Pum%Km!?V%G_?{6UY`;)u5AOMmqf
z>6-qQd*c#J+S(3zcpZ-d<0_PCiSvYQ_OuiY$y3-PMxbSBl=xq_)%*2w>T}$em!=y-
zv*P*pX~=dTj5(C-%1!(Ty-)$$HckGk(y}Yy{&-Blobra%xOEaR?}xKvvb!KCMi0R1
zX&__boQR9t?UJPrmwRM>`Fql4SmNFR01JE$bGNQVYH&~ht#l#|mje$CyuOk=vY2w2
zm{%{hTXC%+tBQJKr{=p?f!8sx@W0)0k@w9g?lmRxpc5@?DCP@4e%5e*=VerkaWxs_
z`1vg`;&Qq_3H2Vitpl6=RPGE(+g#idEGuONc1)+2#Lp|F2&3F(k&gTjJsVDneHRpt
z52G|BmK#ltRQeRuBY>Xb2A$2p4B%1<{p+FEVPaSpR?83T(ms9fLb#NLGD!1s!l9zr
zH?k$Ek@ZnN3{PIJ%GRTZnu{l1&c?2o4a)6DITBeuH#^_Pia7w$?zaHOOdy%1V1K)&
zC#t|*6+A|dJ?@xA6}g43ffc~2Y)4!RFB>>kpVFO)dAiI9fK`3wg_Y<eurh8u^#tk1
z#F2B?`<R&@0<220nG4V#!FRnweIo(&ie%AA26Z@vYC?1Z9f<lv`cW_riW+O(I)?oH
zP;d;cnVaPuiguN2;dKx1r@yrW++J=LA(Srth!%3E=(NG=O*6}__%z0EE=F8?%oVXL
zqVlaA3`!2t1NX#bY@v&v0vE8}S$?V}I704P;)>c`WoLSg^A^e3+vatnqD9b8pSYX`
zDLnu20#N2Oq*JoA;s;5N?6RvU6X4WGg<sdK^8Nyx-tTI%$0<kZia?vmjZ&4*xIiJO
znp2jy6tq-WVoD2IzZclOKVbd7k)FnAi~vX{so^<G)d;Vgsd$IVfO}|!la9+r;2;}3
zKkVC>RC9ijWHc)cpXlSM5}7fGCxST^T7wRZ{YW>E0FWq#n(j1#wW+|0-M|5@?O&7h
z%ln3yDJw;Bxsr9%2g{G*>}^-D^}GNL8Ao}8zWb<lL6#EmnG06W67%E&lUxxUmRAB6
zq?fh<b)yM4pig<OK2{wr*#*o1n}yDN=Rv2cGA-x|IHsV1^WB}?A8CE#vt#Z*uAu+T
z$HoAE=#`Qi43&SyU=5thBZR{Q#le^hU**PRXFMbUNR1?HHLn|rklx9@y+v?<Odr36
z8kRNX@6L1l_);B>DC4Che;V<dD+zc}0a~@LY_uVlKN*hSjs%QM4-db#p9h{lYp7zW
zIl*}<Tz{Ohqnk=x`#^a5z^9>dz4tc#Bk)@XS&>g%X8H@(F-s%7<nwvNet%b*4WVqC
z`lTB2XT|vAn>;Wv#d4<x?KP^m4}fI_v1-DAlQO3Rt4$lX7e5uJTU@C4h%_K10X?nh
z`CR8&DS*ENmwT4d=>lceNGlbC!O$k|xM0*ppu)TcQ#N3Ds9mR%<`nV&@Nu2$f65E-
zA`6;nbpC>6K23hJHAchSw-a*2JFMeSHNehUsv_|YEO*`Ost!h7@=_xg%^CObb75f)
z*vXyOG~6*2X@(g-W~e8VxtSs@SfBWFpaC%G=f-F#P{CHV%Q_>?s>n)0PQ)H&YkY)2
zgnAWd#)*)MA0JoR*>d9|+(TM_tVTSVc-7zvjBKjr`<65(<2gp6;_hwP+G$NQy=qsY
zZZ*m^NowNE%|GLubH8~+Nc}O?H%-+5o*roq-OHNi)ikNp`BCV~WUJ9>u1h`}DFkLA
z<AnffKbp%@FshZMMr#l<c~^N0nG@>BHm0~$e1}GNycyud?8iN>OsE6L_<<q9c77{Z
zM0cxbu*^_m&BnJt*mj-Lp-~Cn`J7y+BNefng31D-3UyBE6Wq(1dasH+rj^x9`|{IY
zyC*xUQ4?^HKNmfx0QqXv>H`B_i3F~JRk4V==U$9mF+bzNL|+slyV)Muy26HWG4I!Y
zD~W;aEZ&iSzbR@o7~*{x^b3VcSRX7?PV177?K9Pr3~11XHT@rBAD6~5VMak&I;jpZ
z`{!Z-I698Gg`CWK)W3&?X8~dJo<Io!N!MmSjlt=~DpTDQ@TJ5~Z9CS5v3nFPmMQX#
zK+Jv=T-^}|u*U6l=w2_RX@*VkxAX<l(1-ay=eYLc6cHVXzW>Ym_n5|amn*4D^U{09
zG=KZ5d~_B*)rt75kcLsaEKJb|2g88pTYqJW8sFLpCCqPeS&v-=EavtW?_Vq0yi}5g
z+uGwHSL$djgWoa17m(YQC&ZS7%=bIFKL6Jq$gWF{O#4~g1K99c?1S30I?$`>@8hok
zA(%cQ42{cACSIEJgMo^*pwYv}&H!;7w{~psxfK3B!M6c%3Uuf`d$6ECfCiNbzqj^*
zbudY*JM3Gjy|#?u_;(xPo^gs1)Wb_Pz`{Mxb<O>zbx!ZsZ>1%q->WNaMk}J+L@m7Y
zgAA~Mwn~5_m9?;O353x6h4;^MDaZxVobH%6Mo{hjE>T@`LU?5<sY5E)V#WNaba{OX
z&{5?<r*M~)HB1{`{pn>6?3Qw`2P@tUkWW6#1a=DdXP$FQz^l~1CY6$`e&~oI%>aMb
zKpTzOjDmmplEMYQR-Wzn5!}elKzE|Yld%nTbF#TtviN6ZI;djfvojeO=pk5<HjMJq
zvix%)3H$EC4{7MnIZg9e-4gKqUmsi#ECr`$`Z5v>CfVzNVeGkIfm7ik(g<EN3UHTM
zwfyORK%Pl-16^H(UpHY6bs&ufHTqV*7Z~(HXzwRPz+C}!1nBhb>I>@j>nm8hq<n|t
z#H+*ej$+`aS5yx@;9b`N*mP6lwbN4g2QWwsdQ*KB#@)a`0_0`$z;IGzk01qqtAPcq
zq6kn=F=8gBfbzancOkXLXv}Fwm+Hxn;Zn9u#&EDk=o=crTT%a3xxIKe`SDH}6#-lv
zfwv~q{wk$#HwbH20Y3XZz-==EbZ&D_PZ3hmdxaHr;IettC!EV$FO(18H8s)6QT%ZW
z=AIV6DH;Y$mYJ`Z$c(ruFeF##g_>aK+`n{SlDbR|wFDl6cd*+JBz0e4u3lZtfyDsX
zZDiJ*3zICM3H(A}d`5C7!kW+I=}F#dpyWu`BpR8@YA4_SdgWsq<bO47>g7B%qKm<-
z>qlwCmL1+hBz?bN|EaV0eKMH#J|2I|xWK5x4Uv%i00RRA3aHKnII7f&lL~tp+g|qK
zqKBYt-(z675E*ejpKtjItoA^Jq40}vXxh+U?|LYFET6+IJQHc74ur$i?nIyLb&s0~
zrf`wQqVrHr>QjvXi)i{$ttMZP5L|2eTp|t3C|}gVGyj^qQ5O;d#G;&AIsy2w?~(=L
zmbo7AT>5mG2phk!A)L8gT3*`u4ke5Op;u{TT1^IC3TfvI>dNSQcf7RnY0d5B;G?Ej
z-WFfcEb3ndij_u7XKR2I_qQ3rGcO-5`BNp%ixMjTVxA{gIuW^nkIZuzO3XupNwwx+
z)cxI-k&J{jo1vF8F~KI;_emDfU*?>hf9rEnt}1+l{jvkFQ;$j!8FoyuSaBS`yhcp|
zN9_3ptD&tK(3l4sU^#W2Hn|7LsMm|RWb<-w$CI>QTOepy)fo7+{s=~`JSo$O960n<
z`K+vOTOXm=?t&YYY;E?KSlTO@&#wEobKK-rn|abE3$DBn<l;54J1y)9NhmZcqKG-@
zK%_ejI{&}~%TV`_gXV~{{(7#85_8vrlXf6@aD0VzBS6qS5;S!UV7Bb_^&CIlT&`R=
zh^$<=&~MPaQL!r6k-i*Q)fsU;HRW6r7$3Z7+TjSs@zV`<KLGG4t2>T4BlSp|R|=aj
z6d)3(?&-vlfch3bw^`Xq-Y%-td0+UdB{BVy^7q@`h$nZRm8;iemwflQfrcFi!{GO`
z6@dXFmHeB3&dkiPeQtldGz(EyI0>q)?ViP%fOy*MLP0nnPyaQJI(l0T)B?OZOq(9A
z(aoKL`O<^sosczS&HA`5&5XzZ?KW;;o55}r58x0gh4tpTdzk>yiEYf-`U00t)1A*_
zIDYMY7CFJP8rDf@W0ucAqeVN(%?UiUICcN%zeZB>RwBoxZk(e~kR*Njd_ny52qlAa
z$$z6#Zk+N(w~B^Tcj>`=_+{*>3m}kS_Hd)vkJdPv2)1NK#IK1KQvUJ%<n(M@X<V0<
z_8U8&#1gOoeff5GRHBMpIDzTBN&<wX!7Z)w{s3-cKuJ8(yci;;cR?Gzg9r!&u97&o
zN*hZ-=N~42r(7U7f0o^vT=CFFLr<yMnV($Wct0p<yjn>P&8z%nAa(mgHPxL5<(pZN
zR5Q@W6*5=i{mqLWn_=j3prCS6&H@EhdJnj#?V4fhUy-wp&5$e|Yub3_FSxfqHPJyY
z1&rtZG^ZE|Nm_o~&QT!O^VU7=q)ko0avRNh9_ZE<m=uHmv+}5!++Vi}Ei}TK?7P5T
zv+G%~rpAG<lHjCtE+6;z)u7$##lMrwpevJoPL|bowE%WCSNXf2_(=+=5C^8BvgeK`
zBY=g|`W_G?|E4xNWE$zvD7+LHvAPLdkg=-)tp~VNI8d_aQRO!S(sMBQ2I#<<;DD5W
zCIKaXzrJv<b7Lq4(c6mwqh$5KMW_t|TVWNk712eQt^L>iIx2e%C`QD9CC~=2Sr%7u
zO{%7nuF`&q0n8N**s89Q0F?PjGn<@$T~Lk45$LZtQaM<P-&g6z)o7rh;3#CTBe0j^
zTa4405reqW^W5UZyFhm)D#<=J^|$zc0#iFMGXO?0?C{@H3FV1}My1UkAB;Y$1z&%W
zdu-DG?}3pv;-b#tOUGSL0S{rOd)hp1t>>?81D8qU?&$lew<6F?fKr^fl#~D&^k5e9
zz2j-#^I5$L#NF8Y1z>Wc{u1!8b8`;Lh5Pz(XjbXcPCiGwr;5Wrld`B6C%;qJ8rV!>
zls8-ydl&E3U$DV`d#tbz)re{U3}=2CSY=B<eid^7IDJY3r)Z;<6oZm{OlJg)v2fV&
z6xi_qsh=lM=K-E6Wh%-RpdoXZ(tWA3CT<9W&xRh_GLxYC0l&v~&Ql;O_lq0uECU5i
zpZDh%N(~o<FmC#>0GqDaH;VrB$Mh3}#n=@0B@AfBY|YHI%ZAsgU3&XSDCi8$tnzTy
zeMl?fvQF>8&p#Lr;J6EUfCgBt_wZ2u%ws)&??WA;oPP3(y*iS<7jNB4$Pnw_=1%Gy
z_Tal2psDV4&vkPKP+qcyJ2suN&WfE;1EY?t-yhZp-@OSAqZkv>v@RaF?#OyS4ClT<
zJ?jJxypc!%PtCw2uFA(p@GlIpVWPF$2rdSt>52n%IvU!(Ob34I;QMb|l^KJNpIMfV
z8G#T8U;+kCFmnz;&Yh%!=~)Q+hMELDx4(WAnBk!Pio~k*lF^>@&7giT;=l`l#=&n$
z{9o;z`9GBV-^XW!2q{kLoXV6))~RD_V@5cWr6l`06cJexEw&lo7D*>bD3UETj6GY4
znbOG?qY&AKO7=ZtneBdGzJ2feJnqN+58RK(@ssPpn9s~y*Y$b7U+>rRMHpyJknkxM
zs*_>QojRc7&IJ`;W32YE>(yCwQxoa5Zd6Bupp5_e(_<AnKR84w+s{Yo#_*xqotZrO
zhM2l8>#e%DTu>1~BfC#8rj+X+>pIo;(<9W)8orX_@z_0JKRlfjy}SmdGF`2aehY42
zvm*kt3%%G3Rf=Sc4eTk~wmwviEfjw#UZrgSCC9H*Bqr61UFAGOFz}jy`nKZE&WlrI
z*)^41(2bw8V^ca+!s1~s?Z76ni`p47!^NK49IvQ=dUGvy+JFr+zKla>V#`U|vF#(8
z0H&Uvnva4uHoKgrJ5?KJ^=}-J@7d@3AA7NPVo<naW$7eLf6Q%`GOyOmEeSz0u^j}>
zdbMnAQ?4qy-px)Q*qX3rbWjb+Mu;l^AU|G%)K+I(GG|^$#W28xdVy3OJ8{avlv^3<
zaeX{sgD_lKdr@4fGhDjzH)k?*llNq2M;u$l4&wu}r@a8cZrKC4tvB0oKu23*unByl
zgwTz;I7%?@F}`{>3E{6c`^QM)V8ni`rM7qrVpQF-(tO8RT`hXu|28RSsmPQWdjF3}
znbfxav?o8X1{<L|7V-CTRV2p&T0E=kjnVwd+hN|RqNH~cwdgLS+|yU7ZzMLZxc`MY
zpph=86ryBO%^0AVILFkRtG{?^|8cg-{6{b7@9&yVF;UvmJjkeeImU$hV}>$V(ceaO
z?*8(C&&lv+H%X9^tK_1o=i~<h;A}VBPnPEZR$>J0#D8Kle(I=YTrmfk1liONnBy<R
zU@fba>X%wD3pJi3m`hSHY#2mHX#IwP0i5X<Z_vXNr(<(k8Ds8F{Ow@N$Ac#twdQeA
z{v>INJeIkZRpyvAiTy|kd`Ao8A9%_S5QBjg<g9?1Y(TO6l9DKCVY1naKV@uq{KwAL
zPM4P*j2qWz?a8}2(UOV<5<4|2uDx+coU186w5iS(3GGq7Rn`8`E8X;BP?OFbuZQ=0
zZ=9(G<{)!e#u5sEhLf3hcmMQEI|_mfH2LY(rUT{PSLXK$u)D3k5qK#LPrG^J2XsrM
za59+V>yPD_C{%EdIot^EK@t?vROsO>f;Fopxm|kT3_-a|8-u2{G$WOWxihb=xu(WK
z!uh3caPG04##CRXUO|;@=0YJm`bJ9L+>rO!3mmidEw(VTC~>fy=9W?v8j5Uj>AvMH
zX0?RX_^C3pMvPDHfC%qAoU7O;pAg6&d<J$`4rkyp<sLSgTHH>lOGe-1o17vBq_2sy
zTyyi$gn<{yHm8MY=^6B><Rum`H`$anN2Mg_;+KO2?upS8Xclcn7h+bQ>-;yuN%wGt
zaoQs3au25okR7qD$uo*2HF9^QXmi&@Nt=E|=Z>0`a>uJ@jE;n;1p@~+#%!8R7=0>A
zdiZFisC~)&@5Lw+sa2G{<Z|K@Pv#_wT?Iph7w6P34HFEt!rV$mui_<Z>FUxsFk%b!
zz2Ox&k$b-CpEeiI_s6IttV~XqnDh``mY$Pps4rA}EJbCBpQo+2We6dHK&wdRIJSaa
z=CmKlL@A({Y1!`s?fKkd6HxLWvp&Y2ajR{=+f{fS?0(Gg4=GBugvCtAYSE0e4*MJg
z);6Va(>rE9Ehd1}JFqI^R8D|IdcKQfjgS`l8qvM})1<|6zl@ch<b_YTUB@=@Og6L4
zcw@?-z}4sH!M*n8zKJQTFsreZs)(TV#bRq0PGO9fG*TzA?Q^5zC1NT_j@o<P==#70
z>wHvtIjv9cuMeN$rid5v9fV9CJ{VlkcxQZsVc({S>h=T<{=20Q3{Y-o_hi|<T->&5
zB~tbitvaL%K9D!WXMW2B#`Yr9)#i8J-a6Om75h;)?_!lS!BYu#&`p}RX<D~m^I6go
zDCK^6pfU`#AHN+lbh71vHOY~Zj0j_nf=>8U2K9h4ly&&w&}Y!8B%R}%$@sL19d!x^
zTdcEzpAygwAz0A~GPH3JxHf8QCX5P<Huv+8Kx_v6wp04g%K69D>}#1l?X1miX+Sk@
z0Hl76GiBZp#ybz`AdFg#5I7GuTXhuS0=+!|4olCw%x4V-eqcoMS0blS6en*5KMpcW
z(f404l`sbatymZZMNj%5^@$3^ON4%C-Dou5pcfRjC_i>c?xH+r6TBh-2f!e_4=5mL
zd^83NO~PVoOXFdg>$;6Dpm=rDyDrXdIQ+Wt8|tVH>Ega@oebmfQjzSNe}q`58?^D=
zc122|Vg9+J>}%+=jljl26bkHgopH|a4mXw60HiqQW52RDHA(QN?Q$`fxS+MRb$(t)
zE5*Sir!jm!4M{y|vwO)l^WkpxyK}#Un={GJeM%i=`1`P@r;jYv%l54##e^Sz9kMGr
zmv}=BombD!E$8<Q+f{1a{$}aT?kqJ34E(9|W#A~jkjpgjW=FC)%ivmMBhu~bYX6Kz
zxnkpRyt{)v0oD5yhKL8tebDCgg7-DcC8dTbavHSTpaR#u#j5AnT>rF;U;(d?+`7U)
zXNE94ba-0Z`?F5c=M2Urk_cu-h7sRna1C?BN|u$s0hn4XdiX>6*6g(2Pps)_{Ezn$
znrU6O5Ss>O9Upentd)9ML8paj|E+Cqvo^HuMdOyD66C78Taj1FnQTU!vy0~HnKim4
zRo-L>b^;;HBkxYL8>=le#03Ddb-%$Z7+j7?O%(YZ2`6zR(=J(G{<-7x*6uyTDazdv
z-0W#>gysKt4;I0V|3>JXwmzS5XZkU|EzSk>$r@fLc3JfEZ+!>nHwSCJ*k+`@61M{V
zWVO6uRG1kuRmluV^`D;&ABzvxi(O8j?cpeNYTn$0Nqm(6_Gk!SdW${K+=$@2_Wj){
zBM?6K!}~zGyr9Ww$9SUvd|bGY3|w-wiuqk)bGqHYl^nFRV^8*OPD4TsySrnpBkhV+
zFt0k0N>pe($rt+7_;>;}$8whj$nQ^eEN__w@3Y+_RQxv{HS9%H!<gw4at|%s3A^^*
z9Nxk?H1%mP4<cNaMsgc7zqk3kTFVV4e;T=@(3<Cy7bVXrtGTjeAvNyg@416Xv;p<J
zGggJCSmu|?+_lnNY&&o>eZ;K(`m+y_3YIKna&X+Q!zRhvZUkQ;D^wp_Ebm%v(gd8E
z_VaWs7qTUk@5ycE1`P3)fAQh}UnS-}OR-THLV;(&dP$ljgZV_wK|te11PZY)s_8Wd
z*7`JH`yrt|Is*Fi-0v?ZHdKx|Ib6-JDDcg1F=UXk>{i^~`@8NU;#WTBB`&G;%jySS
z2B$POs^31X`@L?QN|+;4?^XfkQ6#qeiAT=Ul%@H1Au`l>(dsVGF`Z5=vIkg{n~F$^
z2)EhV=y(Vnc&zBv($<4=kO4txbJclu44vSbfb*jf2st{-*`39DRX0J7<N81z9#n9-
zEX4}W=&k7CY~g%w`%cGhUUfbwv3uVT7UeX%d?8ZHeaSSHCRhR@7UVcMEjxbyW7~0G
zI0sy#ofY<(mY+sUr=zZthFT}Cl8XdU{mrNyF=5`@$2DRcWXiOkQ{<Ea{TlxeAR;)a
z9u`s?L@>-K*7P=lf$jVCzWgwK+hypxFOb41nbyj4wW!1vz~@1+NSAv+%#=<#w_Fv(
zCi=TjFC?jp-=q1-qP=zpWt1*pargfUa~bC;O|qrJwl8g*Rru^YhIr{1Q-sszDr4W?
z6FH3m@u{jW;*WT9hIuQf&)N4)cyowLZld1;F1`JYy^r#wMb0TcTpx7SC0c}g^i7W9
z34hKIn7tT)q-8Bys`f{`yM|NTuQ2ST05<}g<m*@EB2%UBnm(0(VRerSO6NK~i>2rK
zJv6)a!-)%@LFLqa`!>o}^VxL-vDcy*3lzfsL?3VcddZl+TLAjd*EJUn0qlp|I<<ZI
z)Wu}mC6y!7&+Jkj)PWnkD2%kN!2*Ip02JDd`C_-t2x_3L_stETen;!h#|m%M4MhRS
zyOtFC<jIU@CBSKaKpFr1S5+pa7FdGP33DD&^g#xRIO=_|Cqur7D){7-e8?HphYMFj
zhDx8k_Kz3>a3)79e===(Nk#^g`*1&FY2KdcD(d&)+M@#rP_$h3aOVh!b`f011Jl4{
z0`_TIVtjH73u!{nIxj00NCG@#<V#}rM(qkjr1SM!ho3n+3c6EqLFr=Q{2}LS>sj}I
zk(bc1AA(d1C^n*Uh%Vp@jrsFj%M7JU7h++4#$Hm;0+}<4J$%?aPZVR~kG1a+8x007
z6+uKzCEwYPd4Ak6ks`=LqMd>yq~O=(SZ%E4EamxeiM6+zkE*ji+cDgN<?aAvfJ6o4
zG1Q*7GaeXq?Gxo7kmksC`4f|ZPV~nlws1G|K=h4*J%`b>;$Mg2eL@J=&#_}#8Qtyz
z*Mq&;TQx)u?T#ctSO}``s$gy^S!{%jWg5VaZkj|`Hc28_ml(fEyT70S<`YO)oyE$+
z6uXS8a#o0CBv1%g9i2M+<(V;E4+8gu`QvLxRt7js7mV}kI6ogYe^&bp?nP9uiGwwt
zGD+0mRiq+y*$CF>vT+OUxBz(DPy;mX76|R2EVUwHe3tD=Z2xcXzVr=)Ew6G@*G`~R
zVOLH)|Fz;MT~<H}#lcFU9<9~(zmr!#0LVg2*{D%7D-B?7&?6tt*lt{!xF+a=@Lrvs
z^@?}N_Q<Mu!;7s8Jp1+zw(?V6l4-%&drT-Sih@Yuqr=Y~hOr)G<lf6dOy9IW_aBj3
z>V$W$pU-m~xxDxbC*KW5)r}@*WgvP!ksq91H55ld=r0&Hm|PDJMpQiA5AF*^DVocw
zQhN;{xF?^v|6hof79-en@D|(?APH$TT}UN1F1nD?hymT{R;r{TK(us}YiHbCr2L61
z0+5w)6WBWh&&kkmNJN9h+d(Gh!&%k7&^!O_01oJ(slHu4A+-kq#fFBOp2g#hL^Ll}
z><BB}tjlM~K<DK#YAMBo$<YILlP*HEb=7}^>7>lZusxzy02q=R1I}ROPuK`RFWHak
zTIROFeMwAI<l>|@{nW-6?FVh@hBweSf>0h+&S9xq%K=gpad@(X!S^ml(<cO>*F}=s
zesIulTO_=H9~c)#L!MgmPF?L-VDI)qVxbxv%p%B^oC~{6dTw*w>v%e!*<W31xIM}O
z6)~KtanRePghG)KR_iuQsR_qqh&X)8-0G~VQh(O4d5JIQQ1+l#{4rs}POHO=D;e<z
zz7iv+l*oi6oo<m4S*iUsCHA!o2^Th&4YQbh8;q=O{#8Y+H*1Q1ft_aBzE;|98+wiF
z`Ij>Z8}_H+3vIdC`uUU2)F#R4@{0JBs<P4pXBm=v8K#T15p_h#@tK7Pb_Q+Ak>BUY
zn8d|qE-Dmt2?*0qEq<l$+6#~O-s?~>xKi1@YmIDgj_IOb=hE1Br!-I2pig)xt7N?_
z&Y#v%7&^inwOBksd!hH|rQLYfNFi~uka}Ix9|I)85Uxw8Hhs1u-=VtLl3H=G=aPVp
z-$eV|yC=dH-x~r^C?PH6e+0x^NZ1lOFluGyFg-pNL8zN7=8{~V`RkQoevJ3G^pj>!
z(D+Jk>NeN~z^i*LHaE0!e=NR`Svc5Txx3<`&p6K|--%f;G`aAbZ(#*)+T|s)`_dej
zaEv(F=@!bhYpY1>;V)kLN*6;5Y__DMDj!sv7!6e57cZb|^(AZwTHOxR*CvZtzS}}l
zQZ8<y;?jXbx;~^2X~#W-120=Cw%M~KNPS;<x`i|Yxq$QV0%Lme-33K9?7$DC2?&$F
z?!c2#Xn{xpVZ7_8ob>9^8oC7hn2d_Vqu1;x3W^g&j>zZ%VdPO{d^#Du!R}@K>ffNF
z0@kd4v*QFEC8Fx=E`S`lqAJm=-)z|9iV{pz|9$mnFRB-w34Si}%U+a#>E?&4M_W*S
z$N~gK1lMgrMP|pCtsaS^bXM0TC;%&_e>B>?dL&HVy1KxBmiy1U3+L`XC&T}{OKnC>
Yvp>y*bm&(!3cieujvE#nasAhS0a@#B5&!@I

diff --git a/apps/www/src/public/apple-touch-icon.png b/apps/www/src/public/apple-touch-icon.png
index 349705194d8e1cd42b6aa367b643f2168515aec8..91d492a52c0a39e9aecb34722a5d39fa70af912f 100644
GIT binary patch
literal 8952
zcmc(_=ObM07d1TkXkql;iI8X`qXc2}E_(Fb7$RDf=+Q=t-eX1=y)&W&A$l1`4Wjqn
zN%Yt6c|SdW!Smsq>)Srp+1EPztiAS%($P{TC1M}~005+_Dhj%fE9!q25dZNmjm8&w
zT(I1Am7##D5vCmgfDNFkAgAwbaS-71)u1Qq@}}I~dFc?ASgA-O{1FRRQ)AU;H4Vk6
z#xKAN<P#_n>ea{=^l2B225)CcS&L-&z&5Yi>A?;n4rW1zX^PzW_;5$bjAe?{G-tzf
z5FYiLyqiTotv1Ww%?l+!x1$5Uy=><_DYC#f#bqO=F25_Ur%aEumsuiYS)sDmn8qgU
zkH8MlTw<;^`!aB$ID8@?h7+|Wn*;3twP=$T-_R-B_XW#@1#x=hFlhZ1j>E*^1Q1~<
zZ_B*QJhW!YV<xz!!j8iPIEXLwi9=sKIe&)Bly@`f+7kZ}{)uT@4=4`(Te{-Gx&}ND
z57Or=%$CZtj5S=*DeMY<3%?`(C5G`Pq{gS;DJi{J@;#E?*C26pu?%qFi{y8V!+d0>
zSHF`y`um#sc=69cSKBu)F2w-S{P^(Ryxj94&*1k&--$M~^Z#)`t1FjekESBD?(c8X
zT8wqTaTvVLDKDa8m5cKUFa5xp0MoWeGudS>U<9;)CWH?#=wC_xjg7xU0QyP(A0rU)
z&-vdUNez3KY#HeoO1{S@Gmx4FymvU|VV;DDu#G(Rei9^zU4r8_6r&x0>k@JrVt@CQ
z$aCV0`w0VAA=x>i^1%!KJ<LO6E@N60?Pu5jv5U@)rc+%uCPL+>J<G@zh&|}Zm>EIh
zt7OS0J0JPoHh+tTH#|S%YsM&lE6svRv<v-@ykqjJ833LyJEH(eiZ3-#(f!FG$7y7u
zIrr8YDhELGN&Cz8^rDw9eU2u-GvO~Gp@U3BuL)F06SjtL2ecvJ3rGT48Qg0x!7I*$
zG2#Nn>2b6M>y(DrEH1jJXPt`BQhw$Cbz;M^w}I2Z1<bul(_Qqs_T0anlHYo;?%`yO
z!w@i_Ebbq|hh6@DVASl{;rJ?NB^5MB@!2o}(8x#j(7ZbABbZvVm|x}w7a;n+c#_0^
zMsO!aqFU|>38p8HA>f`3we4+}k<#HH3%P!%lDa8cGGL%r-d2m3&6pEol)c+n)-g!U
z<m)Ek%>dRFO`-{NpPj~RANOf%wEL)*?g^q~l((UvJ-iL{aI5EW(VHkXKM<}Fkt>y=
z!|4+=^<^y8AS}4uXJZ|C$iF`|p8g3gAYDXVIW|1psXE1(JgfzaWVBDCm(7pK;$UMe
z?V8*TM;-}Uzw$9S0A|r@v=t;|WGq#D{v4C8V!_rig&PM~@r?RC%!<Ql;sy}ZSvxWk
z8}`c`SCN1k`QoZge*TMJV;*J%6e8}xmA!RKn)NUTk|r(z|Hbo<X8*O1k}2MHV9JXQ
z7myMB6tTJd5kD$gQ7E{O6n*g58ZT)Y<0a?QSe<<?Hfq2?{eQAR_UA}O6qK5c*I7tT
zPmtT9!PwE}_rYV#C3=-i<Yg2=VBjE`*ZHx#?`;dGM?8Cl86K+x_!d9NNKXh$p`nds
z;0ci-@%f8#o`rJ~+)eS;{CG|e#TCK!6P1@nuY|{8_Wcb2vZFjmLCr`c3dcVj@nBJS
zP8pw*I%jB%xAE)|L@Z`QrXTc@y{;23y6E5&vYygZeQ65FM6YUY;_X<XT>;ikL6%p0
zo6P+KYW(-&P$PdJ(VpyGSxWV%n*z5vk_@?;$+;Nqql8=>g>rIr)W5%LKgUfCi&x$I
zFrXG883PomdAP+5I)&*51dzhbp`4|BUiQw_@fO7W{-eZ)#Qv=;jl}hF80td%`&cAt
z?lo~>ink~QMxED9LjpyAa{x-D;oeh)JUe({GV5xse&5z;G!B|$nO1D1>dA=s9t#WC
zOYNt|?Mr)uJc;^Dl(2Kl>8mP-$PF!gM>@9(0egAPfm-Ylvp$cgxL2hsmH&wq!l;4}
zcb90O_Y3&?4bLBM@+@`ql~HDfZ_h|N?e8y~9v_?D`V2V&JbPbFPBh8l8tK|N3XGVY
zH<Ute7O)f;I|`GIHzO=ydS-SoF?m`^RNBxHXv^<fEy)O*&Q2a#y9HK#!BGh}=@2?`
zpFI4`e`o^<@B*W3^EW5vMIk<~3{f#eP?sWdTAZ&yxq+Umo4x2UJAfniF@W2#DhK{u
zKc-bohE!g8+n)|r8}o=!=1CDLVA~LIn2LMtKna|maivH>jP;!5^1g}mV-q^-h+G`H
z6`d017C!un%z>E_uoaS+eYLG(Z*wF}YavEy49I^!weC}Si4f3KkHZvp*7h~fIrUD@
zMMYe-izz1l)+yyYa0V3E_DagW$hSf6ebO>sLc(B;&-R7!)Qy54w?Nl)zYL$I^^y!2
z3Hvo;kMp%!+KBAOf2+d)3w&YAy>+Jx(jSc%X)n(fa}HtKEJ=CA)ksVxtCbC%cRHOD
ze$a_1qpZ3Oeqy*)mX2VmLcS4vbH1pixPpJ;=2_9?5zFA@P8nhr0E_%(oVF;orswAZ
z34%UP`04;A3R^^D!Z-}`PZ!E0BD0ke)g2=?6ZFtdxR?@;CVN|XzO=a*=*r{APgP5i
zGP*G0%)G{(PucMn-VEu{opWc-O;;KnrjbRY7^-(6G#ne~!+t$NpZ7oM=Pv!N1x2>{
z+vV=;r|5oM{6y>aEM*LPcR38F<W}hNF|6Fj|Al2q5gQ`$utMdx1gTZw3Rlgy)BAaP
z#Y4Kf5pS8D_euL^!(<PE=0FqaXRn+PUV~GX46EwiQ!IW0D!<Y&{r~KAzG=R1%Waci
zGJHvQbpBEVx$+TyNT_<|FNVknmd6~LPtzMT(fzXC&jv6M@|qCJ$etjKG_T*4cdtLO
z$|m159|lRflzic*a{`b#Fz$fB@7xf;IQ#>`ST>+SLE!|gFME=)#*W`mOnh9-BY>sQ
zdzJmTFxjEJ{M$2Ggt7YwZtr3;jrBL6z<%Z9YvnzbY^qwRA+H;l{pf4jU$ZqYMn)CE
zb0xN*w%pQ22k<G}Ph0qZ)pw}CUkkg%#~boTSo4`DvqIc(*yjGcD2M~cO}+TVObAz(
z<@tlv!Sv=1x>hYAgCItc`Y~lh-|v1>IRXBBjEoek*W(n%;eeqXPv%m-g^AXUa%V@}
z)JM6xTgJflT^{*?y2`c+vR33xalP+%;4r=`6T9jMD5t`r+l%~K*|3#1xrcvOuoUvc
z0K*NSIS2fQfxF4g1mVcGlwr2jMG;{FzD*l>?BG_uxXm{{5DL#=4QNhob|WyKHL2^j
zc$Em@R1<R)7LAB^0EZOH%Y4PmG4@<>(-C>qj9Zgu=-O43uvB&p`@j*z%e+B7g^U7K
z;LW+op{yY!Ud!OaM%guM>%0+}=4o&r8grG4$`O$uwEslK<-?w0CMQg5;^Yi?hoX1t
z6@P;gdtDLx(?yAFd1TK(dArr>+J@aa^WP6a?p+U&R$Z(8=5>`B5;PXO!W`XhSjCtZ
zV4J#~Uh!Af-w$yZANh-Soz?R)PleYL5<TU{f41rwNl8B)X{1H>U%}{{!lkSPP*sQL
zXj#D%G%xmHh{a=?fdXvfU@~X=9vw6$VTXKgEJijc&3P%NofqqctBQ=_Jg5b5-eNB6
znMTXI%J5|tFgFQP=#64zt4lzj+s4ES08P<+yTGicjthjosNxao#Bw(tA#QElpG%98
zQDEXZy3^p1iN4;&P5YFm!_oqqz$^l|#9B9+bDZzPaBnr1H<i_>#A_2Uv6x(e>Q&S$
zoS&SZMy`B1><c3~&#|l^dCfvuCF(#y9G}vI40>55+)9kEaLM7+%ax%VZYQO@K)g6i
zPKa@1L1J;}Z2n}=8(sBr1Tin068qmIdx6Q9d8#B22+p%&y?KytU<6NTisji9LVn!h
z6aIUc9X&y<@@9W_wEYxOtidsjw9HQLv^dxI=N`Q%^F@#^Yoyl)@b=9X*1jYbN(IJI
z5NueeZ=HL-Ixzw?^(+6K$%%5py>vM0!j-=Ek8F98D}jabapJ2(;f(=T+p8bEnj})y
zc8I#hKOnro=gQ%OnSduU{_Bx!=K}g2skl5du`o8$d^BC`Q?6FQtnM_r>I~Zv#GgB{
z`>lmt%%2q;0`@E_={eTy_8<3U9)%)9l29+uoIUvdn42j-dDl%>V3Zj#6Ai`z;yF^6
z^y)l4R6rXo83*i^%FP!kxks(U4@GdzO&m>feMssOSvQuuWDE9Ys51?&zRnjjv>iM7
z9B5<sd&yDs>GU|yD=3aop2SgGw@#MmfKLmGo@OBP%r4EdSFCG(ByJ;*@Yw|7LEvOj
zHfDhB#6UKOWN?Lp>6aNo0>t?h`x9tJfFqD%)HLI;1OKPxb%5zl(Kw7o=>*FFi<+Ph
zAzvPvEe5j2{iT*6LGdH^86i4QOni3fro~&zpd{|81Pw<hmha6!>H(mQdP;@f$JEQ_
z|E5aMOdN+NbKXO@;7UlP9Y+{nikbQ{@CT!;J9gwn{+LR)9x~BApp3a_d}n|>LuuJN
zq3hIhfufU`O5jbNg{Te5^h<4x3`Z<mKbd-XTpIlkq40JGfDHuAEGw5<NnDBTL0*@q
z=Q~&N%W5UT{DW98+JVhZAcLurOFTK{!;j~WEKrxdm5^;7(4Qm}?Wes*Tcw?a;QO<f
zn-G_JP(Apm2WEYCLruqwzo<x_LD~uW<bqIPm}JBoH^X~4jNA3t*8*r(b&IjOFz)E(
z$d@qUN@XS>INB7kg?}n=`~*^VN|y(Qdg&DDtlPz5#)g@A!bR3AG9mIjGi~oVctHNh
z1TqzlR<ZNrFO{Tv?Uc$M4f{BO;sKdU85-LTfIg_bR7La_@z|5Zr;4u0@#{IPulFAI
z2OD39rSP|hhM_2u>k@yPJ*0s+7N7H)O_o}Khe-V9ND`kz8Ma21vIuGZvm#j=h9%#^
zUt_=3!0|3^j+IZO;1Z??@z)eR+`m<9{TmhTgG@LBJ=;0UU`L%G{JbzHU7<qmZ?{I5
zY?~F1FXQU528fzR?7<3a!7jJLW~_~r9rM*jF#E5iS*0n%Z0EG<jM21U{)Y^b_Mg}L
zldOYznpYa+Ev87&7Y&fMIeQ3UjI-SzpP1~7+_&-&2VAm>?36EAm=YO-qjJ3wx*pja
zoIz@~cAZ^IL9AiW{SylJMJBNG+oA3q?s)HWALvmnDl9NN$h~C!m{-(}pNtKIl}P%<
z-tY^tmLzzdPAo4mBjZ9V5N;Xk4m2Y><>h@wtc1PKGv!rxXK;3;eYFy&tNknhff<vv
zy#=wj=AGEl^m~^J<icQatHWmN{I?={)a?v?q`41RO8A5?RZFVkKeq+hB#y=4oF$J7
z5Q+Iv3_o0ao7^M#oL55;kdB!s^0`>b6o-!A7mjWAet+#gl3i{fhmc-r%P32>j737a
z;DSbi)%2wa%?U)m*G1f@nGr+rJ}IAq#QqZ7+}Aw|ym@`qmJ(Phqq@C4r|&mqMYiJj
zMyQ=$>7`NoTRWFl#k&0FCu#_(ch*cVoPLM}NmjJscH3h6kM&lklmB2py|bxwFuT8C
zY~0eGx>dWBfCe_fE{hcBNP40m?g${4JR0I_41`DTzS6W>{SJeG&ys&$DB~Sm=K~9v
zGMu>XNpR<ja@*TJSRHU`XZ>5aytPL>?nZI@@LSrPo?hv?i9QsGrI7YL5wf=LlNF~_
z7~in@x;5wdY{1U%&}_bhS-{g7_kbjGj#H8jRw>~fmmEF<NI*Dd4F5RbNJmhPGrw7j
z+{wAZ);<<Rzs?gZx})J8cvn9|)hK>uG(D`!gmNEN$y%XTn>5pXWPpmr`m=lqeo}=G
zXTOs->6xQn8PERSxA_bWyon6tr7niLl16qN!0cmNH>Zi4RVY@ZKT3^2=3<zKOq6!u
zAnQ^WtXuzCu^?9Z3YD`LyE_Rhf0K33VqRS@jvhH`W#-TiDqKA09bld^8O9KC1SNU0
zA(GDzqY5znRw@0f%WV3zksxbOpYFbGEglE@FD!C?jk9U(r1&_E^65b+W}!Fg-Lg5p
zm4i(taBgN^p>5|o!?wojF)m4aq7SvtoIh?JcISM#<_JbS3yI>oxv*ijSpI><#)#{$
zqwc*l^P;+OQTT71W3cDCdF$`0yjaLuY;Yg*zMkcij@wsdlgbSQvcgpTCQz|WXN1&G
z_B7wk1-c@sKzxvG-CfAkvF+jL=K>u;koVswKCgdN`Ls~}3k)%WP0yPAaWhUm9SKe<
zXG2w>g$R9{5))<~v$Ril-4I*!OCqb?+vqDMbK#Hpn8=zZZ$r0T({gw5d5)uFlHUS}
z6TZWiT&1;0w-40pDM!xJ7~DxMU3IoWj00SW%w8l-Aa_Ce{&T;3UblC241X-H=#k~U
zEN`{!KOwfWh;~{jqr;5mA9ihDFtFnL!)nv;h;xCEO;3Fh7V@Pu4DTR@Z^qsk_QCKj
z|1fmaCD!!&v(T~2jTfBV>KfQrzq5o-3QG6QUw|290WLtBXL&Bxx{Y)5M&}IBKpPxy
z)ndl2VP3g-#i`6$fJ43kRx}00Vvg2lYxQ{)J<PJ!`ndaz+;&cJ$81*pnlX`s(_N?X
z7|9?%ZhCadt7PAfxed}K2)pJ7?P@mE6=CK3YKHkLD5aYS{JR6h*-SRfF<3Vi*zgfM
zHmlI-?^K--229mGbB}mg-*&qi#IsIKi6#&C3ZJq!4R9E=*{Qqk&c^ggSmrD<@5&40
zZ*uF1j2&tw_v03!|H16TdW!GZ9UE$!pTY6Q@&>-7y^%B2G~k#ZWU`Z3r379PDX_r$
z@hYaY|Cqu2smhHhuQ`WeqS=J%&p;4@vLT6|r0fg<qoy9K-!%5&N(&J@42xlsDdhky
zRMeZ_Cl@?etgy(iu1`C5PELTo7s{-rP-Mp2tkrlZO)}QK!HBqUU1r^>$A;)EZY9#=
z<&lMXj>xQudX@C{K;Qalv{5`seFj)zl9WnIfor7koG#;eGjoU{ZeX*+c&nXb6KBBO
z@17(~ulPx0VB!QUQiMn7G61YFgCE<I^^>Sp1E;p{;@PmM?4($pj{+5<p0<6T2)zQb
zJYTSAy6f2>eSmr5%<#juRTi7t99*Y5j=zj>P7F0%5x&fmK;qaYnK(dvqRM`(ea-E=
z_2vGVRx%{is-s|@JW)OK2N05|w`<7PARfH@y4AHG_Gc{S4n2N?$U`DpCmtaj{!0T`
z{E0M0(JA~5x|W&)%|m9zlx)HvVwANU4~&ckj*#~Y!#$mPX+Q$BXutRp#`}5ZzR?#*
zNCBot&k^YKU&#@Pg!9)C2WxP`8M=ni?#UwyUx!+YvnbQ*)DL^REMJG#FLP&=Cfe0u
z&ynOg<`be-y)AXgYFX@L$UCj&{#Ots))YKFx17j+AQ{~=U({u!;N?1hu@0Y>X6#^d
z7f{&$0L~}PT~sS8)bYJ9t9QO$3+^|FdZ-r9`=M#I?5C%aA-}SvbBOF?Ri49r_><cl
zne7avhUoK!x4g#oNPdeXWz$%sjTu_NLKRsG_st3t*9_AN9RE5P?Rkeo_e1lYM_$8H
zn&gJ9M)-6y2b1=%#=q$=-eQRb8<&)K{W1J)&B$dz=-YC^FPA$)qkShxZcR8xjNU-e
zZ+^P`Z?vm2)GOvgH1aby4FNyvAftpiu2S^}6#X<LNT|6!*ptJUBe;>R0^R*sC6O7z
zN#{jEF#@Q#Mg|0UGiei-+&d+2KGvx-y1e>(V5WILu2CYlvVhlRIQx5Q1l<`4us4(@
z0GvORQTP3<*bggt(Vs2+e%KtjE<`y(^(I};y8<0!Hb%&H@&%YC(v{;Lv}jD|q{MCm
zv8|+(9EbT!i0d107ZVA0wL>_G&`#uo(04W7J?ltIis-k9Q~F%#Ig(_HxTbF+b0h_b
zi6IK2GqO2}&zhO(^wg$q3Syf0E)1!_Iwj;sTN`NuilY^Odu#<?ScjRtlP=-&xHVrP
zHJq_H`P^G#Dxv80+O!7xUUrXqAPdKg@j}a8^TtxuEuqzCPREbo5U{(e?nOUWeKP$j
zKEgI!(Fq@ynL_DH4IUrx$V`~qb~?P)w?z=;n*a{GHf`R=rV$HD45R-Z>`R!^z86)m
zH`+~<D<x@dI{+fpzc{mQRXD}Qs^W3|X1+x74bL90w)@OA(5!89(m9X{PO2~R)GpIr
zSk!KxPQilb+zq~){_=E__#-LWKtFS`4a?DJg&KQ!S40a{j8535QDl6{P!5`(wFnhk
zrLh|c6ExjbxYAQ}b=pd@4_Wx2_ekct;F~3_IaBaE>jHGYweG!fV%-R4Ay2|PQ*L!t
z;OJd+o`fp#tXd~dN=>u#*4)KM6oU}U^gWA{k`1<ANG6YuUgtlU!W@bAdbV6a$ktGn
zy3kQJ^_v<;_~HMrJ_euIvDg_P<?JI{={`6q{VrUpFr0`b)L2KdC!xFv$d!;-$8wP^
z)f8TU=;i(5c3m21U<vw|5n!R&2{&Vr{h%F@;RzT~rbZZML8_-rhI}A4F_Z)@%n}^u
zQ_bYIZZUzKWiCqT5S&5N|3sgckF*FsDmGFp^LiEQ@Hl<<21+vU90{rQ`=PE%2QV(P
zP-Fc|+KB8Wc$voY26{E*A8}t15+#n!{-tb)Jh|+eE$DfHtDL9!c5~Bq1~K>X;)c5V
zb`j6fIs0COFt9jy*Oxc0G6-U=UcC73v$Eg6`qyUOXO~UP2)g3Q)OhZ2ze!TH^;bM{
zWSVL)Q*D%L?;rTAk@tf|<Js)Y0lzP{;s7w~58&QM)ZoGcl)M)Ase#@cTu-k4J`Pnb
z@2+q9J#)M#$oYw8S;}jUiIFp^VG()8Vtv2gMKKV0q_GssMe2N(Ca&OR_}V_SMu0wV
z52<@+8)W9<K_HQrXnY3WzFuzV{WN$Ma)ZrU-4{CygWWF-YA}cHX23<>XFP@O|HmZ+
z<$Rmp^MlkN<3&L1a5w=s`?;k|5`*!c-&6S^FLv><G8g>+TNq^z9D@vQ#?^m#0up@H
z07h24q4_+pi(fM|2F#Yy2qz9d@PDT{|0}(aA%cZc(ry3ozgaGQCmm#m<5p8ylU%#S
zahwz)Do5}rk@Z(T{WL_9OrZ0qp6I(Z2ldUwg4OBXgZm>&TYGnF0&`{ohkNn4eQ=qb
z&LdJ4!;4p;t9Qg!&d3>GF6KM9?x>N>k=aMsEsCCJp+@E~22^H}!=2!=K@n&&3H!R{
zxUBi6H%@Nhu6s6cVh=?hR#(~w&u-;=DY=kW6|!9Y*xA2|Z-z`cK!W~{&MMV&)r?`{
z0oUDac<(XFu2Lt&|I40VBfzoT=Fe-^E-;QKG=C^JjSF3kSMX*CIxUuDYluWqIAC>k
zkG}bFQ`z(ajA_P_3a~BGikPAecBtwwL-JX-tZ2v8&<q;B@Fnd2+2HH}({qs-5wMBd
z7tR~~cd-<x8F3q!rS@Gg?Nv5|4?4KAna*K`sqb4FOgj(t+N@YulgchgsBd;^S`g(R
z@LRO3d9-(UUh|rT@_JJFvqw_oHGP<Jy1`N=GQ*NfGkp5%HLPa9&+qLYc9jmB+APop
zmcFjjhh)bpO+s5R6)SG6OYff#eg(Lw1p4Onr(tQpg?Hm2890>gf4Hjt*F0>!*8r^;
z;KnsDAcmL`tt^DGRR8TE$0+MI&zwi?wk_|r1$&YMxsNwa#VwVFVmyOP6b2x_4>D_H
zod5pG7k5{7LnZCcerr+Epx{J44U#AiCJO-j&Nh_#M<QG@SSVZWYfa<cbW4qY<Jt`J
zXB;UuOCcclp0x*~v=$AQYWz&+DLRoG3U|AK3{~Sh&*1)y-EV4gCb&+~vf&TH71p;c
zO?RDJ;ORoX32SK1?eXiF($o6-(qkjG@bofkwsG<b%H6^wm2MGHyMF)E>ic&(sp--=
zI=`cjznUpkjc0bSkPo#5fE{kKA!|W&`v#Bb%C6hIoLg{lx@if&buYf3p?jXzebw&>
z2s36Ao`TUaZB;Z&*Pbjm6@xp>pd-Wd8^-lpBKLcV5P6>_Y3~>FOkR{<p#yI<u2?AN
zz9v`SGd!XFx4C^|Ci`S(EO%4ioe@ivk6FNEHsMPaqzmBG3SRVeToBHE9LtqrKY5z_
zg&xkaxHAX|vn4F_OLb8KEtz2WrFl^A556ruc*suOWatgQXAeroIu|UV^&?WJv5FqZ
zszjMEOxyfdjNU$UxGU3d$hm}tb(pO~y16?~gPK6>3Xo8Lx-YR)!VoQ~<;Ije*#Z1_
zg9!bDs>a({T)SYQP2SBxgU9Y~iDcEF9!vi-ow`%6@^SjLL1`%0!5v+<C@?(ro#UlJ
z;Q-_UKjk@A*AKq}7p3NpgE_7Q+p1smwPijJl>~{icIbcggCjzpCH+HjM*@0Fw{Qy3
zfD;w7o-5Y7Ta|ZB{1Qqxot2T(Bj<zCI{g_Pt!iPmYI`?j;@elFA&>$cGj*lyl6OUu
z>l@ok>~7fINP!M9AQOkuJ0)JQC1bk6JC9GWPulG42Y_i=8yWCy1cvpfR|{E7Tb9gn
zQ~deu0E?jHEnzSv5nfy5DSmln(DO^~rVDp@WycsjhDeU~V#n%~G>rK|g=G>0SHl2j
zNxgD(5@9Za7sCmp2mGS#ydifi+=RU`j+UMFm8)4fIdfiQXnYlP16}mbG1|+LTkRF7
z{XC0b!teFH8FL*;c0W!`(6$ZRyz4Tjfg(5C-EJ}!&?TdPwY@t#&xNt)7;%~PLkB6}
z9JKdkNp@e7*zO&MMzr6YpSYvn8&#YF4#~c|r`_4OMx;wCN8h@v>yoE$M5S4;)6lIc
zbOuZbt7aLd#lLt{Xv^slbxk|uFq~R{f8Jh2?Hs=RPsDRvoS_ZoW{33XDreZd^D0a>
zN!xj)Zc@qV0dk#QN-gUx>GoE<8=b6(P$^v-HCKJ1+44@H#G_?}gRN|aKMtcPi<^KI
z1OQ+c{m%>FGVHO)>~nkU>a}SpClT@deYR}<xi3z4DA5Y@yO$=b?WzLUzv|jnf#yso
zx5d!c2M=<d$L97Ha>9o?+&-7z81dHyvW6K%kbAJh0m{eWyj1Yqj~S!s`E0rx>p!ZP
zQ)ywfE($4ZI?79K+(3&;0w>q8m|t?9Z~><JdB$%V_Y2zLg@3x}znO)pU`7=Zr|__S
z=+)BX+}pMAN1JSwKB`DUX(LR}(<Fpbo*V%q5l@bFgOq71AfmldF``Rk+*FKYbEP>>
z+1VnJu79b5AI$=w+<<**U9G_LzP|B^bcfhdBJr61K7V0J!2@z`(~>J*=;A}{%j;Qv
zK8vW=enjyHf0^^tgZ`l!O3MzaxqJEg@f5tD@J3+K&7>Z0Szo)l8&fd<O+J$SMoJW4
zA}ehYcF(wgXx<840WP?c6fkU7WF*g=UiNpsFZ<YTxaAN=+2d_Z844U&d9L&;<P+2+
z>{J|jZvwV2KZ^I#6RsEH2R)xIe-zZY*Gp3n9?+i*YJL3)y2VsVxE(-3W6r_n!joDe
z{){Y3`WfAZf-66-{^|XgTS=qmX2et8PLjK-{nA~ctL43GSw?`zd^hpRGc}!L#v<7<
z(5@f!!-Pj;^wYB*zpzh*Qsk+{hRWNg%exMh<c~%PYV5_ArYw&$kfG4>@&@RmJ;Dg+
z{oB!p+!ZcBR#i1k^ytDcXJ0n2-;jGWU`RE!nDE0N(-{`zg-#=QJlX#jfsP-r@O~+z
VS+kS(Jz7}+s)||)RZy#t{|`wkD_Z~n

literal 4552
zcmd^D`9D-|*q(_nvW!7lL$YR_8O9Pa*`vr(l$|j$CTm8P&}2`MZDwp^>`R3~C`7Uj
zGimvfHEY&VLc%-V|Ka`V{o$PF^EsdAxv%rw&vl>sx=xbyRa0(G5l#RAz-?}3be%a;
zk1q~3=3S4*24xPw;OnMH!1H0T?*IT_oVk&q9nNLl**75TlW_Eg6&8}63ouvV$bD4m
z4I-_lo&rOVM%DiQy`N7Cp2^iYU>F>Xj^8WG{~l6Cnd}X;vjf|#e$Y7``_eD}`yvu@
zNovqa$q^v6Ul5_Yxfe7lkLcIViD+5UT{?)~P1xDr&>q>}UDVqQKf@aX-gRf?GVJWe
zYZ^U!%^eHiCnmWGoUlYwKK7H`kudgDWDLkZQzsl|iC&Dc;ZP$#zAkq+9z+vU;{?i5
zZC2)KYGeY7iBu<E(<1-1uq-^dQ=T=KZc_OS(Tzv(2t5MukIRQ{p>pX%KnmCmDO!4U
zii@A9{eJ+Wh<QI3+k0gt?C(fC@|yvt1l=|hR9o)yt+lEIE&)CDOWi*lm@z6x-o#uO
zKKdolD&hoQlSo~?+q*w!xr~#p8Qsx4TjK5Gwz2-D+qD(auHYN<<ssb~%;G<Z#;rTU
z+Yjz?ZSyQs@02#Gk+Wukngg7!%5EV9yIt!~6nJgQkc83eNLs@JT0ew~{8s7)HXF2V
z(O9XfBjX7@9et$fHThEO9HHBFO)Hemz9UljjdJaZLGfErOEh;TcvHrbsLj1cvUqAs
z6*%j<^~%6>!=&e0SWzPsyy@Muuy48is<Udu)V9p3=by4@deoc;&Nhl)CH3ET&nMX4
zo+o$YGC$eGfNCiY9(A(3YW)V>;X4`LDtLsp`AYR0t1~uxzs@j((dijqtP(-BBohy6
zLFQ0pZbzte{SDPvgm)xD`ros+v4(l!tF9H3(SW!5VJ14cboFyjH4A?NDo01_+*XzQ
zTHX0B>T3^*ak4R-_&WQ0r!P&nX!<u%TEVhZMGxX&`Chq{!5XSBBU~QeR0X)xltnrC
zEqr5I2ujwFs~FhAlj^*sgFat}Umk`^3nBgN_4M~9T^W-hZ$Ej-*5uL^QyDk!eW>}~
z*HJE{y~;V8ei4vCVmR<!+HQ(kuD}NA5eRe<emig9_SF8HFSk)%FI+h9R!sn(b_M(Q
zt_J??Z)ON;ojTVH;=P4N_@xKIf}rY~vE1JP@}jh&n%0!wm4Ltflgm{GK6r1Q>U7Y$
z2eN$l73WFPl}Du6{24a2*H*nyMA4#f5NuddAmqWoGFlKyo-{*q(yXrZM$V$FvGGi_
zzON3#oxL3gr|!$&=#Kffq+0a^w2nlU@4<}G!yQ<{MM6LH#-|ia>mS<<9@^t_s4R7m
z!;0K;aynSW$}0-RN2{pmm3t6*YSL#|)R!=pa8Eehw?*19*n->w9#>qkw$cx_qR2Nx
z_uNmdL)J6A3z`>X=WEClsYwls=v%X^YsB)M;)drvxpc8MF%>EQcita>Y8P03NwkB;
zGV@f!S<KiwKPT(tMSCDx^))WQd-3<w$+p2zn}F&2f%(eoFy4g4s=~39v=tNjc9Sx1
zo0y27)A^;lZ^rs*X022<wQnC3;9<o;x#$DM`y-8_QGitH16gVrzKq4~tRVHYvTXn?
zPk`>kNy{%|DbmX(P{fE3LiWO7ZrmdQBBfrTfBs(p_I;(?JxW__5Nu5v=H7eS3Fh(4
zTjf=U-Q%GUz(t3ImGYfLbo}FNf-)6lRJQPR<l-h7I$xt~M;+p>h`z(C<43A#9I`~`
zAEyo@=cnSc4LMmj2BPKv<(~vZqZ++YNI#?Hk851BsNIwtb5j_8B(kfY2-8Mfwzpcl
zTz&4eXLvg4XCITdF6szM6;R@6k=wIjvG@@IB(5B!j=P3ml=s8>lV6jh>K9K`M3>#3
zhmi_MWKI~rlVF`te@dJ~>#$4pQ<9<AbB>wcws%u3_-zNuJXkAtx%hRm(F2i#4`=Hu
zp*{1F7C`Pqk<Q^xM}0tAtOmbRJYGGMEUR{s7n`U8H+2lw5Fo-RMH=xh(;|~W;=Fd!
zQKNHw;*X8yj6T&@&Ta4R2I>G@yb8llM5&WsfXT+D(gU<2dLD**#@d?NSQ~{kNLW0-
z{SKeax)SuR;_mw{Q>^jl$0_sG4GMl~IwA+NR_$;bKq06W-~cZ!rZCDpyk6K0`jpkQ
zh^(OPJWWg~=$9#r;<6#|3iEatgeVOiyaz9i`&<=ZDy>MWhxuKFe7o{4m(Dncn2I<D
zN6;$aWOZ<cKFmJ*c1gX$oe}#Hatqq78=uD32%0j_Pfv?uADB_S-Uh@N>{a$1pLx>|
zLm?g{E{;u~-U28H+t&R^f8oxyO|zCq%OK|FJzqFFY6^M^254TY0SHFH`e-+$rwhYN
zK6N%MEWe~;6diU)!~R3|a#*G39jP&wC8AQX8b79k9qfI2IqvBTyl3fq={;QLz>>k<
znU0#fwrOnY4_iXLGgHTqRr$?`be#u-w7#-56G$-N`;t*mw7p)H0)o;+2!^THvQu1r
zkfx^=e@NmifV9@bLH?^~?jy@rrM074={h3DZGdQ1$O+43`EYfH<gQsE_bt@ut#K2O
zuceD8(iBKpliVGN(h)%VdF$m^8OJscT(Cq7QcaqvSwgG^-%$95#e&JrzuGa$0nUMe
zveXmvRS#!+fB{;FxsUu0E{CyXS=Ei!09xwh`JLG6<=Nk+kh3#MhE{G$o9Oc_!Af4a
zbcnnOj6>gOF8+xv8p|aA?XyJb>_h_u#7*WV9;8=rLd6sOI@fn=AK|Qv%~eS(n_rYH
zuK*JUfAOtJoRGPuA+ZbAdt4}`rIqQnVsaQR`&;WyT_`y6x)bL=nL)Ls)i3T_Yf9xl
zX7YHtn>CmC9o+UNTH7h<X?zI^`NR-?i~ViHYnLIVTS?)hE3<=nB7EZYbh+ql#c^Mq
z7?fTGfzD@#T9w4r55coEk2XB4JM_|9HQ)dGzPd@q_8M|+bE6mTtC2g3c$kq!(F=~=
z)lVPXRgV<5?UjKUnjHSFD_rYzyP?YObb+-ir49$aXa(wXv`vg-w@4?3W@X+Ve}b6#
zZ^Xq7d4-$>kYWarE8SCT2oc=cP=RoNnHBCG5h~4zH|R)d%}?N4^U0A0hKMi8DW7G%
z_N?(=&!GC|TW&K#fl6&o!TVDc|9VtHK8^04`u^p4V$rrfwf5o6GuhJ44y^Fjh9mpm
z)$@LYh><3#A6<rUiRUvfCk6Lh?Pg6e;;frL@8_}19F(S!r1rR|p(%YPqldgqrH~o9
zI*{z>NA?$Iy_QWdQ96TB2}K5H@H#HW-<UF-n>tEN7Il`m0P<gz+&xNIw0NiV?&r55
z3P|_ADQ-mzrYNwyHFyzH6J$DIp1Ky>^KhneDqR-CD5(|br;AOV_~W{4w4U}5tzBb4
zNRn}IJU$Lxa!XcUTLXsz>_aJUOw`gi_`gtA8oNF+;L^3iy_B+H5#(1Ljsl*T!;FR8
zqaP-_&~me*O3~$I!}VYL4C+o)Z4~N%UkE4Xht=NNPz=HXWK^y0k2Dn@mQtSA4}IRH
zH}S;noR0_$9c%3CXlB)aM4xao<vs4(gh&((^2F=#wa|Lde@ql5m_|GKUi$}fi#5la
zrE%+{EnT$!Zu*6O%x^ONv*C|Sv{8<1_>O?|qezrFf^y_h{t8Y`&YX!U_#}VN37x|J
z)^^|J0Rx(@k%Rm)mNC+4EC-iUYA8d*WZY6$#rQCp)e6j0;E7rNcsW>?S69Dbupg5*
z=+1m@qiNrY^rAhs*A(pU;--dCu=_yx`VpN2Dr$V3r)S>7j%@<R;)$pcJ@yfOeW!_9
ze3%tRw>yl@b_}jpiBAtao@ZMf>xig@c%9C6R6$5wc8)5}dhv`zz7ZEqHPV#k@&75g
zTVf|sfA@B39Q$C&V3|CEvf02hi=v9vLeqwxhiNnEam}ls#jp;O+!sk^i9Mr$=oTv+
z<I3s&X82<s^>oDY*KOuHq!btR9(kju8$Ce@({IR9Nno<Co7^(dR)MjQ@=F^ibJ34O
zC8J*LelUt(d*1f9DHQyggXVuTHk^d0SU`pRNp>$#HoX8|3pVAf;0o-`2oyZ#ohmZe
zFFV;t`a4~00hL!ekxID=?|zhI!T^8Oz%yf9boS8|f6T<thnt?P%^bmWg*I{4ZOc)a
zY*S$Lbu?KEP%Uz-fXlkm8+JsF!m&t%Cw#V1?zlJ<PG&xDP|$WYf}L+zWF;sd=AQ2J
zKekh9I6QOVG;dt_d}KMrh7dW;#Yt=2DY~~0q|6QRr{BJHiph7JJK;*U^o>SLau948
zu*~c#Nqxe!4nOnbq^G2rh<3!CV0O7-myejQK9fK-$ZVtZF=pkbOMg~m<X^dxDSXa8
zg?^@!!<Rjb@XF+tpGwUR|GOiNSVE(F=`)QSb;k{WR%E{OmB;+X+(pg|t~aU<O3cz<
zZ!yBgdzeaFz>6JNtoEl6hdQ@<az1w*SH@I7O^An9IgjG%B_s{$Ag<a;dDM6@Km1$b
z{de=CzJ?YBWPSAPl*BO@6*%q1yEdz6qyD|}!in|WA-0bIi|@A#<?HZ&aB5M;z|%*&
zZ9ht{WjJX%mV6!n+;P6h;Q|*`RTQXYD+z`H66+OK&|Yq(Nts(Rc!&jBB<T{(dU2|b
z&8trKzNHZBwTRO#!aKD&9dO{KleLW_qotrp0MTAkBYn#LP;VB0_<^@Q$<h0QoJ#}n
z;Y>b#;<^CFW%DMgKcO||L#g?kegmhIO!JHL**B39Z_eG2+Sv$|9Mt&i*(Hf9r!X1^
zM$3%&h3bdmf77fzd<42cGH{s*FQpc?D-v&lhYUKpXaW0@I6mTqcdru!%B*Y}0u@Qn
z5{iw$MCwY`JBSFtS#hX+ySnd<=eo>6io$l?I__Z`Z%ihsF8UF(Lcl~(UthmV5zi}f
zg%_@X<lwcsk?XokqQ@NtgB#6Ygf)pT9R)(TUv$WAMTClGs61>QVs_DKK4t&HuTM}!
zO>Z1`5m%Zb)Co*HZE3@^awR7_3wX_<zT*0ZZ+i^6AUf*+EnN-ei2hyt$a^aEW8(pV
zzZT%nk&l-2*xUbj#|<@R!IxpDNGetb&-&VCe+0aTgt-gV65|B@e!t(H%A62W+GB*N
z$&9G(q-1KCei_Rgxs7!l%M>#Ux^9Wq&dV&RU<=r2zVVRrws%4Fosq_0Pe-+E=E&L5
z2y-e^%zYO50jNIvH955>xRfaO!Fq7Te*sNi#SC&fd2;Kui3K8mkM}muR2hG<G($5G
zo@WH9L<Z*K*?_9(XUa_P1KF~h&{_H;`aV>9LXE@4qk23^jXYPB@%v;$-EzY832`22
zJ*+UR1UvfMp}A~`nB-}3WWwlWIcL3t;12pI4!Er<J{!5HH8ZRql6Oh4Q&!G>D^Ixi
zoJ_E}%FK4rx)F<0njKT}k5#CH1MxO{qZo3Qlr8Qp3ofdi&s7Jmg_o*=f*uLzcNHr#
zeY!o}!*QL@4e9sdoJ$cW)6ol3Z#qOUt@(I$;+cv#0Kd~o<?K&qnI`^^;<uAklAU-5
q!xZmEQ>KG_lZ=b~{}iJ02r%cznrJXSpT_((128wfYV;iG7WY3h?r0JK

diff --git a/apps/www/src/public/favicon-16x16.png b/apps/www/src/public/favicon-16x16.png
index eeac46f1f5fefc8cd7577e69f555c1d01596bf47..4d6cbd4cd387f9132765341d79d5d03345a05aee 100644
GIT binary patch
delta 324
zcmV-K0lWV80qX*gFn<9hNkl<ZI8S3_pb#*UqThL2bHG0)#{c_0YBs|35p96e&gNW(
z{|plt7#O|?e^M7(9TxT%WC&3PAZZ5a$l2#!JDq43AZz~rpD}m8XU#NZZ{u|Vs^<T>
z`#tMWG~@LGPMiP#hgizU_#dYMxHLO#ZIEDMX4%TX@c-vN_kS8|kRcdez^%DUf{FR(
zp8pIC+KdcLXZN~SnKGgqfZt|jh-OB{%Zxu5UHAG|zeMo@t^jk`iexh*!)3-FOmNL`
z1DtoZ1^oa2cP&T&IjSIjhS`j%8E$~%juwALhX0Eg7#S+yiRAx(MyH*vXZ|z%H$rzd
z)^rfMY85jqc|Ag0@}JRpXUkCr1|~MfpA6nGKcnXzya@?p2v`9$&aq`YqVfX1918#k
W<fRd>7Qfj50000<MNUMnLSTZXK$YYG

delta 206
zcmV;<05SjT0`>urFn<8BNkl<ZI8S3_U|{&qKmlN+s{zcM><oXu|3q;w(JqkkG+_`n
zRb#l^w2X8EK$<073>hxfE@JrejYJpV(+qM7UM~>RjMo5cnpwCx7<iN=89rRP4-W^d
zF2JQ(zd4TK>DE&WFZN!*Z2&&a&vu?+c)s%-?pVO9dB+)s=SRCxHKT+9D3NHD1~Xjm
zSqqOUke@-$#%43j8F*tsKu?i@LzExI&*<5P=#+>nzYV+r0CY`c0n#$3=>Px#07*qo
IM6N<$f~p`|3;+NC

diff --git a/apps/www/src/public/favicon-32x32.png b/apps/www/src/public/favicon-32x32.png
index e67cc623bc9abb553841152d71ab235b15abd90b..f56303d261faf8018d19ca88e59393e62b56afb4 100644
GIT binary patch
delta 591
zcmV-V0<is=1M~!tFn<CrNkl<ZSVzT{ze^io7{|ZQl?X0bs)MMAt&?l~2TY(%*9s*;
zT7!db7P1<O#Ds#2(CuP}x(GFh<7sKlKj8fZr4?*lk}h$JKkg}aNz*fV-^=B_9J%p0
z?)!Z{&riaT9~!bgLNyT6^$22sxv+jK3p6wX2_v7fNZSFk27jWrm1OQnWFiy;@sq-9
zfIl)Y(h~hWc76Y}{A%l_)5O3H2*d%RUt{&VxzG&=#X*fn!1C9yQy>;cLnB)G_B{7F
z)FPBct`R)NZBv13Ac%Ni1FG2F=};yx2ytZsL9quSpdubS*CV#5Xe9TQ0u}N2m-lJ5
z?sgp98f~0C%YPj!5l|90@);26|3)$~UDYoyXU+9edpY?cpeoKpB>)b7hXB#l+~e`t
zl50EmG@vG4%z&(R<jrcQ27}&IlADLVQ=lTAI4!JL%zF<acf_sLO7h)-?`^2k=W!#S
z>B8QOe6^C?>=KvG0TuCnBX8G5ClVFxaif@FvK|(k2Y+^H4J1yBDQ0Wmb;;P})9~7A
zHg<Qbxe88-U1-3bR?%AZ0)$D|2cG*}o^x@*dESKf1sk2I{Q!8n)wMk$FQh^I$xW--
zYW~H$ig59yumoTiU?QgM*^69R<XS|l)#tvjd(MIR!>y6gCll;-%deg5k?()1KLJer
z&v}25OGvvwcDr@HUo^H~l13k3IlQu+6VC5{dX8eRAK4^K(}a7u_!SOJpkE=`_kjou
d!o<)G`~|pYQZRtZY)1e9002ovPDHLkV1n<XADsXI

delta 370
zcmV-&0ge9j1epVnFn<A4Nkl<ZSVv=IU|{&qFo1w@)B&R*K&ueoloDq6{qZZqpRYgg
zCUKf1LJ<oM2JPx_hL`&<G2G}|PhSU!m}@X-*Mu|t`}v3AV%0*1Pq&`X&jBcw*DPZA
zbmK9>5{7C~01I}o&xy1g<T|Q2fLzO|;sA1j9XVbo3IR$jr++8}C<%6oLx5VAlNAD_
z1UtXBJcDY67sJg-8yP;|eugzml9UEWwOqeBmVuF(nc-Z?Y|0%#O0a``4z`?ync+&)
zGKRNjZsRPFhzbExEEmw0XV4?ka-z}zDZvi6oSB*7N;7_+!-52F2+-PcydgkJu*2h=
z1fSy#0Z?PYY-?r?q)H`Fv5=DBu%$$-QNY5@!JwM%$?$aRX@*ZXao6XRT253V#8;u4
zOwMHBmJ=g7!4Vw-1X~eM1-vR!;0hgADMySsM3n=?7(}j`Q3s5Mz<`GU09IB35E)O6
QS^xk507*qoM6N<$g2=t1_y7O^

diff --git a/apps/www/src/public/favicon.ico b/apps/www/src/public/favicon.ico
index a90c54f70de5ade9456952ee6b38bb26bc9b4604..4c402d878a4c65e377d80d2778b655173751e28c 100644
GIT binary patch
literal 15406
zcmeHOO>Epm6rNC;OVz3zDnLadCsc8&ghX3amDcvs3kXW9KtV$E6af+^P$h0lY;S0}
z^_Bx%xX_%)fwi3$6$FYngbV78pER3DAW?yOYD%HY_q;pK#Py8F-m$Y(8_624J@e*!
z?|t)T=8ePH1lz^-?`J5d*jo=X_AFy;YO4SH&?Ag}if4xp58gk;*zy6!4xtX3phf>V
zirW8rz1~Ex2iO{a3k%b`#A?*m4eezwv{(E^=TY%p`rZqzmr(bX8`*F3choQ1{@{jI
z&x`CIRWjO<a|-SMrOOMfcesq!myO5p>^jMSY^4mmf0xUc6=Ym2DMN-MPZtq~C_}_S
zHYNLVJ=3L32HB%;Q+qkjuQD0bF0U=eBgznM%HQjhq72a<I&FC!Q3mc4j`8<8r6A*0
zn(I34sgB!mP7&92>(^0_;>;AT1}=(E<G%;b0`n^~yJzN~*}W5*xq)>WF>k{Q><vG(
zUNMECwea-h{EAv9(i^dVJ&yl0kA(K-Y-qhcEC!6>Gq}1W8+uL4<PkpTzrp*bk}$vy
zr7_IIkAuE@eR<ZV7dfxWFaY0cnAh&4F_g7KmQIkZ#4sD!=TPTwQyBcnIeWiOIvDP^
zLs?(Ik8c#k;2X9>7KS`ufGcmB^hFsAGCtJli#qIpajF~_eLiGzvQ(VR@<kqoOkW^g
zQ|y$*6xH+c7`E&{bHy<8RT&I(OB5&LxnkX0vR_u|sPnE228ykDbDB=yyiOSmysfD+
z3qxLvGSxSiGpZQ!#wN#as?4&(C}0=`KE!qin`cbfI!{ifFCwekT9}^9YisI#28Q)I
z`zJkS1LrJk-=%dj%G&HN+K|@NCgZLsdwl<3Sb*{*NYS!$xW;)B7-9T3w!qi|`W8Um
z{QTmJdq0j&?qQl|D*D2!t=aCJIDj199CF}mSgUpYsOkAv)n_`@A}S<(!i}spaNou?
z$eG!j(B(7lEBjy}NkdeoeB~$K9p6i35iu9Q8LW$b<=BPtt{d2kRqH_eaOB&bLtkHG
zjrJR^Z|S%0dg=V)al*eU;EsJT_<fiB;D;w3FJhA-b-hmGDEj{?)&C93nd<6*Jl{v@
zTpyQ*HFRZMYV}$VxuNqOY@W*BTKAyS4L5RL(6PnEYjo~seGbh3aNMb~5-t&b#Eti5
zwu4@OkPbS20MDO<tPb>$>rerg+E<-p==YbDy%G+SA9T4yIzY~4T-$QtTy_;)n(3cG
zoJJpi@qWY-`0wF2=aTeHne*&Ir||^pUsn0S3!N`a#w9v$ZsQyYe4#xe;Z5wH+y~Z8
z|4Q?DT`r+rfU7nxwXRQ3en@8qsq>%&e|$F7=aSAGu@hV(9b!MIxwJ-p;CxY)I$Sb6
z$HiQ_0xpI2x`IoE;u3rssK$foIgb1g=WaB(RA4;R8kb@&!4J^mPjL+Jd-4q~9+y-!
zir;ZADaW+w^%CNeOI%XNrI<?v#<ZGC0oF@7-&5rpOQ=vkm*`BaF=uiQ#JL3DOXoO&
zOT*7`*ay*GPB7!px5*r5FfP%0NirU~@ji5D)Y}CV;garnfZwog-8vh@UhX!Y`6l@z
zYC$^Cm_{E);u7s`uwQCJ-fDa;S^fvuPm6t4a6i$G=Qw<yB400Q&vAtB()UO9wK_-k
zRe&{9WWpuk`yD<v@DjRdue~!nsrVs}OTcM_OBKVFiPxIrXw9cHre&Q}`Fx8@cJeJ4
z=a5jY>F(pI#43{=bBXpqIdj}#?VUTv$@;1Cd9wCaua|D><^-z5DwCaXNwM~Zk48Q&
z_2)P<Yj2sYDt%5l0nN3y&K{^ztP<e~m$2p&;?TC-#{XrG%ZW>?ZgkR?m|@2sCu?s-
zT!J62)%|Tm5yKFdl=-E|{{2#o>$f7<d0pik7uny8vi-RZ#3lNE5aZ!z<gSpnx9{M8
zUywg`n!L`amvrXib(%-%?1A$4?Z7!kdE`;YoyJG!4|JuUkAIIXFt)(h0;6bw{{Zij
B4?zF`

literal 15406
zcmeHMTTc@~6rR$Sn<AB}!3v?M)EdzsRKzH^kVy26M@>wOM1pTxAB>kk0*^+0@SXUi
zF&Yy!QGbDd>v+B`ONO#7GuzpnQfHIN&hE~h%Y5IQIeS)!gh+}^M({Z=R#QSu3L*0O
z%60Lm5L<k2Y;5~^L5RP{g(&hEeudwt+~-rRgZM#9w&6<|8e8aB@~xvQNq5&SQb%`c
zXME?O6s^3Spz+0%JNN3%Rq0la9=;h5mT}X73<Gwk&POd@FsJqAKz<e^Lw>H(ZzdVw
zhl<U$#(-nBo>{!ls>2_MGkI=v+z_AY9L?yvv#CX6Kl89<u+5$Aq1;H1HGdwxFVXt<
zSsE#2joN_yb*X%w2F@L+D|hHZFTMIUL+d}x+K|n4(fZF>diiyl28(uVC{7*Ix4|$L
z#j83tWGYy+q77PDY|n#XPKM%xX&bcou)Q{!4<=)j9w&PVG0LQV>>oN<M77^Eg$){f
zh-@C3!3K@^5ZOF5gAL7qg=E7(q5j?-H5N<dV%_{DD*cd)90qw*lscU3*7=sOh$XB3
ze-G42xI`=Nb8~ePx1N{=E@rzqa2#+Pa2!zJK%y-{J$>z7L;s+~&;HYgY5DbKT6s6Y
zb<{pOXg(CKWa-71Y1;TbPmi~z_O01Qg-@!zjYelqP+>AlY3{4)!F#t?N4y&H=AU_b
z_UXD;^Nkw^)X+D6&3iTH**kekru2MRxHs(8U*Q9AfV{RC*8{#cpMSnV(7(oY$HnC{
zluWDp(B7FO_<&kIxb%d57~H4+uZpqixcq2_o_@GSo2(x`0Ecvk`oGydT>8jdVjtq-
z67WWSv<x2@2mHVAxTJvtd<f!FoIVUO4!gMYfVrfx9;&&7^$<6g;Dd()a|xWDGsLC1
z)^re;;DZhh)m*}wMqIMRCE&0KE@`ZXKrZd`Pf#`9sE(7lWF#)}9*2LcapDk7T#7GW
z!g|;fm$1h*5SNhiA$L{ffr)XZxP+V!d28JE`*F$Jr{z6P0|&$<<cY|=<5~kUcJKkY
z#;!e1GhdSB+3Gi%FWIu&*Xwhsk$lOQW$PRmmo)PwTei!3<+v0kUy^0n=m&90H(#=0
zx2&_8OJVXQS)Q%F%%w2-k}bP^y+K^k{f_fx**aHqX{RQju}|BwUDg}OC5`%$EXzjU
z=aQT+p=M{pmasbEgP$*<Mus|HSXnmT%bx1?zJHN_+O)&zcK=u%2OI|+2M!bm7%q3X
J83;E6{{T!YNh$yU

diff --git a/apps/www/src/public/r/styles/default/AccordionDemo.json b/apps/www/src/public/r/styles/default/AccordionDemo.json
index 30f64874d..28a617633 100644
--- a/apps/www/src/public/r/styles/default/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/default/AccordionDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AccordionDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
       "type": "registry:example",
-      "target": "AccordionDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDemo.json b/apps/www/src/public/r/styles/default/AlertDemo.json
index ea1a6bdc0..d848e19aa 100644
--- a/apps/www/src/public/r/styles/default/AlertDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
index ecc3f1ef5..860ef5094 100644
--- a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDialogDemo.json b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
index 4d0e2f783..2301962ae 100644
--- a/apps/www/src/public/r/styles/default/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
@@ -11,7 +11,7 @@
       "path": "example/AlertDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
index 76e16a907..8612efca9 100644
--- a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartDemo.json b/apps/www/src/public/r/styles/default/AreaChartDemo.json
index abcde0434..f791f43b2 100644
--- a/apps/www/src/public/r/styles/default/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/default/AreaChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartSparkline.json b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
index 6323eb4a8..3521777e3 100644
--- a/apps/www/src/public/r/styles/default/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AspectRatioDemo.json b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
index d51a0f2a9..5bb0799dc 100644
--- a/apps/www/src/public/r/styles/default/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AspectRatioDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
       "type": "registry:example",
-      "target": "AspectRatioDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication01.json b/apps/www/src/public/r/styles/default/Authentication01.json
index edf4db2a3..7dbad5a58 100644
--- a/apps/www/src/public/r/styles/default/Authentication01.json
+++ b/apps/www/src/public/r/styles/default/Authentication01.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication01.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication02.json b/apps/www/src/public/r/styles/default/Authentication02.json
index 87e76db24..fc2b34de2 100644
--- a/apps/www/src/public/r/styles/default/Authentication02.json
+++ b/apps/www/src/public/r/styles/default/Authentication02.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication02.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication03.json b/apps/www/src/public/r/styles/default/Authentication03.json
index 8126e15f6..86281b391 100644
--- a/apps/www/src/public/r/styles/default/Authentication03.json
+++ b/apps/www/src/public/r/styles/default/Authentication03.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication03.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication04.json b/apps/www/src/public/r/styles/default/Authentication04.json
index e7c319e04..85d7b3a68 100644
--- a/apps/www/src/public/r/styles/default/Authentication04.json
+++ b/apps/www/src/public/r/styles/default/Authentication04.json
@@ -12,7 +12,7 @@
       "path": "block/Authentication04.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormApi.json b/apps/www/src/public/r/styles/default/AutoFormApi.json
index f79b6ce9d..7e8ebb324 100644
--- a/apps/www/src/public/r/styles/default/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/default/AutoFormApi.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormApi.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormArray.json b/apps/www/src/public/r/styles/default/AutoFormArray.json
index af6b41bfd..c8444a8d8 100644
--- a/apps/www/src/public/r/styles/default/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/default/AutoFormArray.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormArray.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormArray.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormBasic.json b/apps/www/src/public/r/styles/default/AutoFormBasic.json
index 3a1dbcdea..f99c677a1 100644
--- a/apps/www/src/public/r/styles/default/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/default/AutoFormBasic.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormBasic.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormBasic.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
index 69d0d8702..1952aaaf6 100644
--- a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormConfirmPassword.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormConfirmPassword.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormControlled.json b/apps/www/src/public/r/styles/default/AutoFormControlled.json
index 98366a02c..08ca19bc9 100644
--- a/apps/www/src/public/r/styles/default/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/default/AutoFormControlled.json
@@ -16,7 +16,7 @@
       "path": "example/AutoFormControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormDependencies.json b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
index 0b4241deb..bf552b149 100644
--- a/apps/www/src/public/r/styles/default/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormDependencies.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormDependencies.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
index 86bf84c56..b3f298e07 100644
--- a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormInputWithoutLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormInputWithoutLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormSubObject.json b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
index 2f9102b9b..88ed92041 100644
--- a/apps/www/src/public/r/styles/default/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormSubObject.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormSubObject.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AvatarDemo.json b/apps/www/src/public/r/styles/default/AvatarDemo.json
index 5e5322066..a30c5e237 100644
--- a/apps/www/src/public/r/styles/default/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/default/AvatarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AvatarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
       "type": "registry:example",
-      "target": "AvatarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeDemo.json b/apps/www/src/public/r/styles/default/BadgeDemo.json
index dbe0cdb74..3d8f80a81 100644
--- a/apps/www/src/public/r/styles/default/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
index e88da1bb2..e19555ac7 100644
--- a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
index 1fc9b59b9..63714ca5b 100644
--- a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
index e372282bf..6e617db90 100644
--- a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
index 9c1c212ba..f8cedac63 100644
--- a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartDemo.json b/apps/www/src/public/r/styles/default/BarChartDemo.json
index 667b0307f..396ece360 100644
--- a/apps/www/src/public/r/styles/default/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/default/BarChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartRounded.json b/apps/www/src/public/r/styles/default/BarChartRounded.json
index 07486456a..02b461c19 100644
--- a/apps/www/src/public/r/styles/default/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/default/BarChartRounded.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartRounded.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartRounded.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartStacked.json b/apps/www/src/public/r/styles/default/BarChartStacked.json
index 777742fc7..f6071b908 100644
--- a/apps/www/src/public/r/styles/default/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/default/BarChartStacked.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartStacked.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartStacked.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
index e7f70f852..9cefcf231 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
index a81ec9621..1a4f47ca8 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDropdown.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDropdown.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
index a38486a1e..c82bdef24 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbEllipsisDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbEllipsisDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
index 18f3f2b2b..1190c7135 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbLinkDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
index c6b627579..d9054cf6c 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/BreadcrumbResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
index 09f256561..9d84cb356 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbSeparatorDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
index 910b831e8..7b0217fa9 100644
--- a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonAsChildDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonAsChildDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonDemo.json b/apps/www/src/public/r/styles/default/ButtonDemo.json
index b4c936400..462b3792e 100644
--- a/apps/www/src/public/r/styles/default/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
index 0b7164e60..97dd7134a 100644
--- a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
index d91d6888a..bd2bc6708 100644
--- a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonGhostDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonGhostDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonIconDemo.json b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
index 94e4a7c2b..01fabb12d 100644
--- a/apps/www/src/public/r/styles/default/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
index f82645a66..736941782 100644
--- a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLinkDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
index 6e2b9607a..21a1770fa 100644
--- a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLoadingDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLoadingDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
index f423b53ce..8f6ce2b9e 100644
--- a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
index 492bb1968..b3b54245f 100644
--- a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
index 8e2fde092..1e8a9515b 100644
--- a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonWithIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonWithIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarDemo.json b/apps/www/src/public/r/styles/default/CalendarDemo.json
index 3ef883563..8ee9af6d4 100644
--- a/apps/www/src/public/r/styles/default/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/CalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarForm.json b/apps/www/src/public/r/styles/default/CalendarForm.json
index a8f77ad19..091dfabb6 100644
--- a/apps/www/src/public/r/styles/default/CalendarForm.json
+++ b/apps/www/src/public/r/styles/default/CalendarForm.json
@@ -19,7 +19,7 @@
       "path": "example/CalendarForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarWithSelect.json b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
index 20969c443..814e3c6e0 100644
--- a/apps/www/src/public/r/styles/default/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
@@ -14,7 +14,7 @@
       "path": "example/CalendarWithSelect.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarWithSelect.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardChat.json b/apps/www/src/public/r/styles/default/CardChat.json
index d1ea45bd4..126f83f03 100644
--- a/apps/www/src/public/r/styles/default/CardChat.json
+++ b/apps/www/src/public/r/styles/default/CardChat.json
@@ -17,7 +17,7 @@
       "path": "example/CardChat.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "CardChat.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardDemo.json b/apps/www/src/public/r/styles/default/CardDemo.json
index 8219b0973..92410edb7 100644
--- a/apps/www/src/public/r/styles/default/CardDemo.json
+++ b/apps/www/src/public/r/styles/default/CardDemo.json
@@ -13,7 +13,7 @@
       "path": "example/CardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardFormDemo.json b/apps/www/src/public/r/styles/default/CardFormDemo.json
index eb128e857..3794fd727 100644
--- a/apps/www/src/public/r/styles/default/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/default/CardFormDemo.json
@@ -14,7 +14,7 @@
       "path": "example/CardFormDemo.vue",
       "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardStats.json b/apps/www/src/public/r/styles/default/CardStats.json
index 047952afe..60f720144 100644
--- a/apps/www/src/public/r/styles/default/CardStats.json
+++ b/apps/www/src/public/r/styles/default/CardStats.json
@@ -15,7 +15,7 @@
       "path": "example/CardStats.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CardStats.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardWithForm.json b/apps/www/src/public/r/styles/default/CardWithForm.json
index faa6d4791..21fdff0e7 100644
--- a/apps/www/src/public/r/styles/default/CardWithForm.json
+++ b/apps/www/src/public/r/styles/default/CardWithForm.json
@@ -14,7 +14,7 @@
       "path": "example/CardWithForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardWithForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselApi.json b/apps/www/src/public/r/styles/default/CarouselApi.json
index 986e2b388..b79b33d27 100644
--- a/apps/www/src/public/r/styles/default/CarouselApi.json
+++ b/apps/www/src/public/r/styles/default/CarouselApi.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselApi.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselDemo.json b/apps/www/src/public/r/styles/default/CarouselDemo.json
index 820beb498..d60fe1c1a 100644
--- a/apps/www/src/public/r/styles/default/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/default/CarouselDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselOrientation.json b/apps/www/src/public/r/styles/default/CarouselOrientation.json
index 508e815b7..2ee15aeb2 100644
--- a/apps/www/src/public/r/styles/default/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/default/CarouselOrientation.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselOrientation.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselOrientation.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselPlugin.json b/apps/www/src/public/r/styles/default/CarouselPlugin.json
index 79b0f5be2..e0dba231e 100644
--- a/apps/www/src/public/r/styles/default/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/default/CarouselPlugin.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselPlugin.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselPlugin.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselSize.json b/apps/www/src/public/r/styles/default/CarouselSize.json
index c9eb7f2a4..4a84ffb4f 100644
--- a/apps/www/src/public/r/styles/default/CarouselSize.json
+++ b/apps/www/src/public/r/styles/default/CarouselSize.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSize.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSize.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselSpacing.json b/apps/www/src/public/r/styles/default/CarouselSpacing.json
index 603957012..0f9661aab 100644
--- a/apps/www/src/public/r/styles/default/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/default/CarouselSpacing.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSpacing.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSpacing.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselThumbnails.json b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
index 32091f87f..3d1b9672e 100644
--- a/apps/www/src/public/r/styles/default/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselThumbnails.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselThumbnails.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxDemo.json b/apps/www/src/public/r/styles/default/CheckboxDemo.json
index 834710e2a..aa7798d56 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxDisabled.json b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
index 2fb5b64eb..f0031d5b1 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
index d0c9a81f8..cfab7a045 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormMultiple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormMultiple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
index 8a5761e38..05f4a8f5b 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormSingle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormSingle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxWithText.json b/apps/www/src/public/r/styles/default/CheckboxWithText.json
index 597eee293..9d2d1429e 100644
--- a/apps/www/src/public/r/styles/default/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/default/CheckboxWithText.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CollapsibleDemo.json b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
index 5adf17910..244831b26 100644
--- a/apps/www/src/public/r/styles/default/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CollapsibleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
-      "target": "CollapsibleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxDemo.json b/apps/www/src/public/r/styles/default/ComboboxDemo.json
index d368b6c39..74c9b166a 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDemo.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
index 2ab1f2a54..b02cf3a49 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
@@ -12,7 +12,7 @@
       "path": "example/ComboboxDropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDropdownMenu.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxForm.json b/apps/www/src/public/r/styles/default/ComboboxForm.json
index 34505223d..18d52e4af 100644
--- a/apps/www/src/public/r/styles/default/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/default/ComboboxForm.json
@@ -19,7 +19,7 @@
       "path": "example/ComboboxForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxPopover.json b/apps/www/src/public/r/styles/default/ComboboxPopover.json
index d9b721df5..2c3333c8f 100644
--- a/apps/www/src/public/r/styles/default/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/default/ComboboxPopover.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxPopover.vue",
       "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxPopover.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxResponsive.json b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
index 327d29608..63e4b22db 100644
--- a/apps/www/src/public/r/styles/default/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/ComboboxResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CommandDemo.json b/apps/www/src/public/r/styles/default/CommandDemo.json
index d9f2bcbad..e930af49f 100644
--- a/apps/www/src/public/r/styles/default/CommandDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CommandDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CommandDialogDemo.json b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
index 98f56eef0..3fb39ea93 100644
--- a/apps/www/src/public/r/styles/default/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
@@ -12,7 +12,7 @@
       "path": "example/CommandDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ContextMenuDemo.json b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
index a6e1efbe9..3ccbddeb7 100644
--- a/apps/www/src/public/r/styles/default/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ContextMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "ContextMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CustomChartTooltip.json b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
index d49c4c2d5..59c2107a0 100644
--- a/apps/www/src/public/r/styles/default/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/CustomChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CustomChartTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard01.json b/apps/www/src/public/r/styles/default/Dashboard01.json
index c4e1a9681..8d2c58ed6 100644
--- a/apps/www/src/public/r/styles/default/Dashboard01.json
+++ b/apps/www/src/public/r/styles/default/Dashboard01.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard01.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard02.json b/apps/www/src/public/r/styles/default/Dashboard02.json
index 039890f6e..61918c289 100644
--- a/apps/www/src/public/r/styles/default/Dashboard02.json
+++ b/apps/www/src/public/r/styles/default/Dashboard02.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard02.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard03.json b/apps/www/src/public/r/styles/default/Dashboard03.json
index 4c3e8edb5..a1ee4c35c 100644
--- a/apps/www/src/public/r/styles/default/Dashboard03.json
+++ b/apps/www/src/public/r/styles/default/Dashboard03.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard03.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard04.json b/apps/www/src/public/r/styles/default/Dashboard04.json
index 022aaa530..bbd42a9a0 100644
--- a/apps/www/src/public/r/styles/default/Dashboard04.json
+++ b/apps/www/src/public/r/styles/default/Dashboard04.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard04.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard05.json b/apps/www/src/public/r/styles/default/Dashboard05.json
index 07b58be21..d7c3a4b49 100644
--- a/apps/www/src/public/r/styles/default/Dashboard05.json
+++ b/apps/www/src/public/r/styles/default/Dashboard05.json
@@ -23,7 +23,7 @@
       "path": "block/Dashboard05.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard05.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard06.json b/apps/www/src/public/r/styles/default/Dashboard06.json
index 657a7df11..4a469011b 100644
--- a/apps/www/src/public/r/styles/default/Dashboard06.json
+++ b/apps/www/src/public/r/styles/default/Dashboard06.json
@@ -19,7 +19,7 @@
       "path": "block/Dashboard06.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard06.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard07.json b/apps/www/src/public/r/styles/default/Dashboard07.json
index 74bc669ff..a3d83d825 100644
--- a/apps/www/src/public/r/styles/default/Dashboard07.json
+++ b/apps/www/src/public/r/styles/default/Dashboard07.json
@@ -22,7 +22,7 @@
       "path": "block/Dashboard07.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard07.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
index ab6d0f6d1..9371c1389 100644
--- a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableColumnPinningDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableColumnPinningDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableDemo.json b/apps/www/src/public/r/styles/default/DataTableDemo.json
index 71d6cc8a2..0d587ec6e 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
index e7f683c6e..17411fff1 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
@@ -11,7 +11,7 @@
       "path": "example/DataTableDemoColumn.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemoColumn.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
index 50b3eb3c4..e90db3637 100644
--- a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableReactiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableReactiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerDemo.json b/apps/www/src/public/r/styles/default/DatePickerDemo.json
index 85470af78..e06aabd5c 100644
--- a/apps/www/src/public/r/styles/default/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/DatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerForm.json b/apps/www/src/public/r/styles/default/DatePickerForm.json
index 76ddb647c..8b04dfcfa 100644
--- a/apps/www/src/public/r/styles/default/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/DatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/DatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
index 7765660cf..b2869b045 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithIndependentMonths.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithIndependentMonths.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
index 3a8e5685e..71929b965 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/DatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithRange.json b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
index 3b56fa627..14c882b89 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
index 476b8373f..83fef6b36 100644
--- a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
@@ -13,7 +13,7 @@
       "path": "example/DialogCustomCloseButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogCustomCloseButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogDemo.json b/apps/www/src/public/r/styles/default/DialogDemo.json
index 049e7d7a0..de033e766 100644
--- a/apps/www/src/public/r/styles/default/DialogDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogForm.json b/apps/www/src/public/r/styles/default/DialogForm.json
index f65b731e4..620c9dd55 100644
--- a/apps/www/src/public/r/styles/default/DialogForm.json
+++ b/apps/www/src/public/r/styles/default/DialogForm.json
@@ -14,7 +14,7 @@
       "path": "example/DialogForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
index 4de859502..f007ca2a6 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollBodyDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollBodyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
index d3eee6109..993f75485 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollOverlayDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollOverlayDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartColor.json b/apps/www/src/public/r/styles/default/DonutChartColor.json
index 35e13fbc7..f6ed64755 100644
--- a/apps/www/src/public/r/styles/default/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/default/DonutChartColor.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartColor.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartColor.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
index bad06ce81..5615cad04 100644
--- a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartDemo.json b/apps/www/src/public/r/styles/default/DonutChartDemo.json
index daf21911d..00cf5d32e 100644
--- a/apps/www/src/public/r/styles/default/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/default/DonutChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartPie.json b/apps/www/src/public/r/styles/default/DonutChartPie.json
index 8c45b965a..a5067f43f 100644
--- a/apps/www/src/public/r/styles/default/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/default/DonutChartPie.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartPie.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartPie.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DrawerDemo.json b/apps/www/src/public/r/styles/default/DrawerDemo.json
index 2215cd6ff..6aac7efe5 100644
--- a/apps/www/src/public/r/styles/default/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/default/DrawerDemo.json
@@ -14,7 +14,7 @@
       "path": "example/DrawerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DrawerDialog.json b/apps/www/src/public/r/styles/default/DrawerDialog.json
index 56c2dd8ad..88761fc3d 100644
--- a/apps/www/src/public/r/styles/default/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/default/DrawerDialog.json
@@ -16,7 +16,7 @@
       "path": "example/DrawerDialog.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
index 30de381aa..73ba0c2d2 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuCheckboxes.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuCheckboxes.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
index 7c35a7ad7..9573cbdb0 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
index 615f8d9f5..1a84703b8 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuRadioGroup.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuRadioGroup.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/HoverCardDemo.json b/apps/www/src/public/r/styles/default/HoverCardDemo.json
index e25166538..6e841aedc 100644
--- a/apps/www/src/public/r/styles/default/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/default/HoverCardDemo.json
@@ -12,7 +12,7 @@
       "path": "example/HoverCardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
-      "target": "HoverCardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputDemo.json b/apps/www/src/public/r/styles/default/InputDemo.json
index b0ef33a4b..3e71866bc 100644
--- a/apps/www/src/public/r/styles/default/InputDemo.json
+++ b/apps/www/src/public/r/styles/default/InputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/InputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputDisabled.json b/apps/www/src/public/r/styles/default/InputDisabled.json
index 88b9242e6..8cc1ab587 100644
--- a/apps/www/src/public/r/styles/default/InputDisabled.json
+++ b/apps/www/src/public/r/styles/default/InputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/InputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputFile.json b/apps/www/src/public/r/styles/default/InputFile.json
index e62cc6bf5..70a7d0aec 100644
--- a/apps/www/src/public/r/styles/default/InputFile.json
+++ b/apps/www/src/public/r/styles/default/InputFile.json
@@ -11,7 +11,7 @@
       "path": "example/InputFile.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFile.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputForm.json b/apps/www/src/public/r/styles/default/InputForm.json
index 5236e7a3e..541ecaf07 100644
--- a/apps/www/src/public/r/styles/default/InputForm.json
+++ b/apps/www/src/public/r/styles/default/InputForm.json
@@ -17,7 +17,7 @@
       "path": "example/InputForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
index 35bcc0bf0..9530a7a9a 100644
--- a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
@@ -17,7 +17,7 @@
       "path": "example/InputFormAutoAnimate.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFormAutoAnimate.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithButton.json b/apps/www/src/public/r/styles/default/InputWithButton.json
index 11fb50200..e59c4a675 100644
--- a/apps/www/src/public/r/styles/default/InputWithButton.json
+++ b/apps/www/src/public/r/styles/default/InputWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithIcon.json b/apps/www/src/public/r/styles/default/InputWithIcon.json
index 491e07bdb..639a1108d 100644
--- a/apps/www/src/public/r/styles/default/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/default/InputWithIcon.json
@@ -10,7 +10,7 @@
       "path": "example/InputWithIcon.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithIcon.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithLabel.json b/apps/www/src/public/r/styles/default/InputWithLabel.json
index c59c80566..cce824930 100644
--- a/apps/www/src/public/r/styles/default/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/default/InputWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LabelDemo.json b/apps/www/src/public/r/styles/default/LabelDemo.json
index 63bfd3e67..e04232fc5 100644
--- a/apps/www/src/public/r/styles/default/LabelDemo.json
+++ b/apps/www/src/public/r/styles/default/LabelDemo.json
@@ -11,7 +11,7 @@
       "path": "example/LabelDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "LabelDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
index ade69861e..fb6d997f8 100644
--- a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartDemo.json b/apps/www/src/public/r/styles/default/LineChartDemo.json
index a1fa65935..f2a7a8ae2 100644
--- a/apps/www/src/public/r/styles/default/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/default/LineChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartSparkline.json b/apps/www/src/public/r/styles/default/LineChartSparkline.json
index 66647eff8..9ff0d5c57 100644
--- a/apps/www/src/public/r/styles/default/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/LineChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/MenubarDemo.json b/apps/www/src/public/r/styles/default/MenubarDemo.json
index a57e26996..090f8a9f4 100644
--- a/apps/www/src/public/r/styles/default/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/default/MenubarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/MenubarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
       "type": "registry:example",
-      "target": "MenubarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
index bfd71b479..c5b869667 100644
--- a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/NavigationMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "NavigationMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
index d1de70ed8..05ce454c1 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldCurrency.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldCurrency.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
index ec09bd0a4..94be9aa30 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDecimal.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDecimal.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDemo.json b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
index b7541ef63..985bbc90d 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
index 7245d9825..bebed162c 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldForm.json b/apps/www/src/public/r/styles/default/NumberFieldForm.json
index 6b892e247..86a2185c4 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldForm.json
@@ -17,7 +17,7 @@
       "path": "example/NumberFieldForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
index 0e46c128e..76b05a24f 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldPercentage.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldPercentage.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PaginationDemo.json b/apps/www/src/public/r/styles/default/PaginationDemo.json
index cf93fa3b7..016ef9bb1 100644
--- a/apps/www/src/public/r/styles/default/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/default/PaginationDemo.json
@@ -11,7 +11,7 @@
       "path": "example/PaginationDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
       "type": "registry:example",
-      "target": "PaginationDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputControlled.json b/apps/www/src/public/r/styles/default/PinInputControlled.json
index a36cb4efd..5d35da064 100644
--- a/apps/www/src/public/r/styles/default/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/default/PinInputControlled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputDemo.json b/apps/www/src/public/r/styles/default/PinInputDemo.json
index c9a511848..34fa68dda 100644
--- a/apps/www/src/public/r/styles/default/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputDisabled.json b/apps/www/src/public/r/styles/default/PinInputDisabled.json
index cbf0f58e5..56afd9f68 100644
--- a/apps/www/src/public/r/styles/default/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/default/PinInputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputFormDemo.json b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
index 44d9ecac0..3851b2f1d 100644
--- a/apps/www/src/public/r/styles/default/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/PinInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
index e8904dcd3..33cec89b9 100644
--- a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputSeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PopoverDemo.json b/apps/www/src/public/r/styles/default/PopoverDemo.json
index 92d00fdba..a745bf747 100644
--- a/apps/www/src/public/r/styles/default/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/default/PopoverDemo.json
@@ -13,7 +13,7 @@
       "path": "example/PopoverDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "PopoverDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ProgressDemo.json b/apps/www/src/public/r/styles/default/ProgressDemo.json
index 36ba4d3cf..9b2062f59 100644
--- a/apps/www/src/public/r/styles/default/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/default/ProgressDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ProgressDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
       "type": "registry:example",
-      "target": "ProgressDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RadioGroupDemo.json b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
index 5c1b7840d..459009866 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
@@ -11,7 +11,7 @@
       "path": "example/RadioGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RadioGroupForm.json b/apps/www/src/public/r/styles/default/RadioGroupForm.json
index 2fd26b171..d3b27bd8a 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupForm.json
@@ -17,7 +17,7 @@
       "path": "example/RadioGroupForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
index f453ce692..17b8b5374 100644
--- a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/RangeCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "RangeCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableDemo.json b/apps/www/src/public/r/styles/default/ResizableDemo.json
index eb3e006c9..330e49e73 100644
--- a/apps/www/src/public/r/styles/default/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
index a33b84e29..89031a09a 100644
--- a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableHandleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableHandleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
index 42b640061..e91b1b6a6 100644
--- a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
index e8b2fa4b6..58af39cfc 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ScrollAreaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
index 57109bf05..c4c759b54 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ScrollAreaHorizontalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaHorizontalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectDemo.json b/apps/www/src/public/r/styles/default/SelectDemo.json
index 4d4b699da..35fd8c80b 100644
--- a/apps/www/src/public/r/styles/default/SelectDemo.json
+++ b/apps/www/src/public/r/styles/default/SelectDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SelectDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectForm.json b/apps/www/src/public/r/styles/default/SelectForm.json
index 464a8c0e0..3a86c5780 100644
--- a/apps/www/src/public/r/styles/default/SelectForm.json
+++ b/apps/www/src/public/r/styles/default/SelectForm.json
@@ -17,7 +17,7 @@
       "path": "example/SelectForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectScrollable.json b/apps/www/src/public/r/styles/default/SelectScrollable.json
index a5da63a6f..dcc7d5952 100644
--- a/apps/www/src/public/r/styles/default/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/default/SelectScrollable.json
@@ -10,7 +10,7 @@
       "path": "example/SelectScrollable.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectScrollable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SeparatorDemo.json b/apps/www/src/public/r/styles/default/SeparatorDemo.json
index 07e30543c..322fc8306 100644
--- a/apps/www/src/public/r/styles/default/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/SeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SheetDemo.json b/apps/www/src/public/r/styles/default/SheetDemo.json
index 609a9a927..45da1cf18 100644
--- a/apps/www/src/public/r/styles/default/SheetDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SheetSideDemo.json b/apps/www/src/public/r/styles/default/SheetSideDemo.json
index 8f8898694..6905e23bb 100644
--- a/apps/www/src/public/r/styles/default/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetSideDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetSideDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetSideDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index 85af65291..b6f9f3973 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -14,7 +14,7 @@
       "path": "block/Sidebar01/page.vue",
       "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar01Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
new file mode 100644
index 000000000..d95cc144a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -0,0 +1,42 @@
+{
+  "name": "Sidebar02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar02/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar02/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index aa8255a9a..9c720ddea 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -13,9 +13,9 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar07Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SkeletonCard.json b/apps/www/src/public/r/styles/default/SkeletonCard.json
index b4abdfe3c..950bcd712 100644
--- a/apps/www/src/public/r/styles/default/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/default/SkeletonCard.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonCard.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonCard.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SkeletonDemo.json b/apps/www/src/public/r/styles/default/SkeletonDemo.json
index 613f32bdb..c8ebb8157 100644
--- a/apps/www/src/public/r/styles/default/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/default/SkeletonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SliderDemo.json b/apps/www/src/public/r/styles/default/SliderDemo.json
index 0f6ed8162..486f75baf 100644
--- a/apps/www/src/public/r/styles/default/SliderDemo.json
+++ b/apps/www/src/public/r/styles/default/SliderDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SliderDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "SliderDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SliderForm.json b/apps/www/src/public/r/styles/default/SliderForm.json
index 82cd0de83..f40b7f8b5 100644
--- a/apps/www/src/public/r/styles/default/SliderForm.json
+++ b/apps/www/src/public/r/styles/default/SliderForm.json
@@ -17,7 +17,7 @@
       "path": "example/SliderForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SliderForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SonnerDemo.json b/apps/www/src/public/r/styles/default/SonnerDemo.json
index 7bc351174..c844c3ea5 100644
--- a/apps/www/src/public/r/styles/default/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/default/SonnerDemo.json
@@ -12,7 +12,7 @@
       "path": "example/SonnerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SonnerWithDialog.json b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
index 86ff9b277..546f03a3a 100644
--- a/apps/www/src/public/r/styles/default/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
@@ -13,7 +13,7 @@
       "path": "example/SonnerWithDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerWithDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperDemo.json b/apps/www/src/public/r/styles/default/StepperDemo.json
index 958abd0c4..8aafe28c0 100644
--- a/apps/www/src/public/r/styles/default/StepperDemo.json
+++ b/apps/www/src/public/r/styles/default/StepperDemo.json
@@ -10,7 +10,7 @@
       "path": "example/StepperDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperForm.json b/apps/www/src/public/r/styles/default/StepperForm.json
index c010bc1c4..d5b93b57a 100644
--- a/apps/www/src/public/r/styles/default/StepperForm.json
+++ b/apps/www/src/public/r/styles/default/StepperForm.json
@@ -15,7 +15,7 @@
       "path": "example/StepperForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperHorizental.json b/apps/www/src/public/r/styles/default/StepperHorizental.json
index 2484332e4..09816e68a 100644
--- a/apps/www/src/public/r/styles/default/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/default/StepperHorizental.json
@@ -11,7 +11,7 @@
       "path": "example/StepperHorizental.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperHorizental.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperVertical.json b/apps/www/src/public/r/styles/default/StepperVertical.json
index 93709f5fc..c39bfc63a 100644
--- a/apps/www/src/public/r/styles/default/StepperVertical.json
+++ b/apps/www/src/public/r/styles/default/StepperVertical.json
@@ -11,7 +11,7 @@
       "path": "example/StepperVertical.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperVertical.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SwitchDemo.json b/apps/www/src/public/r/styles/default/SwitchDemo.json
index b78f675b3..bf72681b0 100644
--- a/apps/www/src/public/r/styles/default/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/default/SwitchDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SwitchDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SwitchForm.json b/apps/www/src/public/r/styles/default/SwitchForm.json
index 8a1ede1b9..d2b7abc4a 100644
--- a/apps/www/src/public/r/styles/default/SwitchForm.json
+++ b/apps/www/src/public/r/styles/default/SwitchForm.json
@@ -17,7 +17,7 @@
       "path": "example/SwitchForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TableDemo.json b/apps/www/src/public/r/styles/default/TableDemo.json
index ee863c7c1..0d3565156 100644
--- a/apps/www/src/public/r/styles/default/TableDemo.json
+++ b/apps/www/src/public/r/styles/default/TableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
       "type": "registry:example",
-      "target": "TableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TabsDemo.json b/apps/www/src/public/r/styles/default/TabsDemo.json
index d8bc74797..a5519dbe5 100644
--- a/apps/www/src/public/r/styles/default/TabsDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
index cd789b2cd..8dee3778d 100644
--- a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
index 6a8534b2e..5ca21f279 100644
--- a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TagsInputComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputDemo.json b/apps/www/src/public/r/styles/default/TagsInputDemo.json
index 6818e1abf..09d69c5f4 100644
--- a/apps/www/src/public/r/styles/default/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TagsInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
index d744c9db4..aaaf115de 100644
--- a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/TagsInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaDemo.json b/apps/www/src/public/r/styles/default/TextareaDemo.json
index 5cbecfa88..886842fde 100644
--- a/apps/www/src/public/r/styles/default/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/default/TextareaDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaDisabled.json b/apps/www/src/public/r/styles/default/TextareaDisabled.json
index 9c148a70b..30bd37d81 100644
--- a/apps/www/src/public/r/styles/default/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/default/TextareaDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaForm.json b/apps/www/src/public/r/styles/default/TextareaForm.json
index 64b757357..b7086d9db 100644
--- a/apps/www/src/public/r/styles/default/TextareaForm.json
+++ b/apps/www/src/public/r/styles/default/TextareaForm.json
@@ -17,7 +17,7 @@
       "path": "example/TextareaForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithButton.json b/apps/www/src/public/r/styles/default/TextareaWithButton.json
index 4001677eb..164c7cf79 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithLabel.json b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
index 8cc8bfa54..8136709f2 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithText.json b/apps/www/src/public/r/styles/default/TextareaWithText.json
index faafeec81..02ad1adef 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithText.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastDemo.json b/apps/www/src/public/r/styles/default/ToastDemo.json
index 357990a7d..57db292d6 100644
--- a/apps/www/src/public/r/styles/default/ToastDemo.json
+++ b/apps/www/src/public/r/styles/default/ToastDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ToastDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastDestructive.json b/apps/www/src/public/r/styles/default/ToastDestructive.json
index cb8e6a496..ae653c122 100644
--- a/apps/www/src/public/r/styles/default/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/default/ToastDestructive.json
@@ -12,7 +12,7 @@
       "path": "example/ToastDestructive.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDestructive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastSimple.json b/apps/www/src/public/r/styles/default/ToastSimple.json
index e5664275c..b0fd66404 100644
--- a/apps/www/src/public/r/styles/default/ToastSimple.json
+++ b/apps/www/src/public/r/styles/default/ToastSimple.json
@@ -11,7 +11,7 @@
       "path": "example/ToastSimple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastSimple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastWithAction.json b/apps/www/src/public/r/styles/default/ToastWithAction.json
index 24580e1f8..9202e5320 100644
--- a/apps/www/src/public/r/styles/default/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/default/ToastWithAction.json
@@ -12,7 +12,7 @@
       "path": "example/ToastWithAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithAction.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastWithTitle.json b/apps/www/src/public/r/styles/default/ToastWithTitle.json
index f7bb9562e..7e618cee6 100644
--- a/apps/www/src/public/r/styles/default/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/default/ToastWithTitle.json
@@ -11,7 +11,7 @@
       "path": "example/ToastWithTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithTitle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleDemo.json b/apps/www/src/public/r/styles/default/ToggleDemo.json
index c90c73197..560e5f09c 100644
--- a/apps/www/src/public/r/styles/default/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
index 70809381a..690a575b6 100644
--- a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
index 79cbfd09c..1eee2bad1 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
index 6e6818a59..d8007f002 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
index 86e88b492..30ef0a672 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
index e49a11d5c..8e4c05889 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
index ce09688a7..e505e8a8b 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSingleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSingleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
index 31de53f8e..591f1e7bf 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
index 1db3b49b2..dec2a70ae 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
index 2bc3c99ec..c28f32b45 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicWithTextDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicWithTextDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
index aee4f4c7b..8c29ea387 100644
--- a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
index d43603b11..37f94493c 100644
--- a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TooltipDemo.json b/apps/www/src/public/r/styles/default/TooltipDemo.json
index 083ba344a..e8a523866 100644
--- a/apps/www/src/public/r/styles/default/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/default/TooltipDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TooltipDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:example",
-      "target": "TooltipDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyBlockquote.json b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
index 9819d203c..c20d5f8b7 100644
--- a/apps/www/src/public/r/styles/default/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyBlockquote.vue",
       "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyBlockquote.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyDemo.json b/apps/www/src/public/r/styles/default/TypographyDemo.json
index 7dc911d6b..82085ca25 100644
--- a/apps/www/src/public/r/styles/default/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/default/TypographyDemo.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyDemo.vue",
       "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH1.json b/apps/www/src/public/r/styles/default/TypographyH1.json
index 4688e1d9b..ac6302acc 100644
--- a/apps/www/src/public/r/styles/default/TypographyH1.json
+++ b/apps/www/src/public/r/styles/default/TypographyH1.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH1.vue",
       "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH1.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH2.json b/apps/www/src/public/r/styles/default/TypographyH2.json
index 50d1467bf..29abfe462 100644
--- a/apps/www/src/public/r/styles/default/TypographyH2.json
+++ b/apps/www/src/public/r/styles/default/TypographyH2.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH2.vue",
       "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH2.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH3.json b/apps/www/src/public/r/styles/default/TypographyH3.json
index 3819ad2a7..871a73f8d 100644
--- a/apps/www/src/public/r/styles/default/TypographyH3.json
+++ b/apps/www/src/public/r/styles/default/TypographyH3.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH3.vue",
       "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH3.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH4.json b/apps/www/src/public/r/styles/default/TypographyH4.json
index 72b7f9a0b..1680369a6 100644
--- a/apps/www/src/public/r/styles/default/TypographyH4.json
+++ b/apps/www/src/public/r/styles/default/TypographyH4.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH4.vue",
       "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH4.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyInlineCode.json b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
index 70a6eb50b..4b52c76b0 100644
--- a/apps/www/src/public/r/styles/default/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyInlineCode.vue",
       "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyInlineCode.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyLarge.json b/apps/www/src/public/r/styles/default/TypographyLarge.json
index d0d2febcd..751756964 100644
--- a/apps/www/src/public/r/styles/default/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/default/TypographyLarge.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLarge.vue",
       "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLarge.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyLead.json b/apps/www/src/public/r/styles/default/TypographyLead.json
index 40e1b5bb7..aeebe241d 100644
--- a/apps/www/src/public/r/styles/default/TypographyLead.json
+++ b/apps/www/src/public/r/styles/default/TypographyLead.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLead.vue",
       "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLead.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyList.json b/apps/www/src/public/r/styles/default/TypographyList.json
index 6d20c56b5..36e3e1ebb 100644
--- a/apps/www/src/public/r/styles/default/TypographyList.json
+++ b/apps/www/src/public/r/styles/default/TypographyList.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyList.vue",
       "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyList.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyMuted.json b/apps/www/src/public/r/styles/default/TypographyMuted.json
index 5a5beda40..dd2b04584 100644
--- a/apps/www/src/public/r/styles/default/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/default/TypographyMuted.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyMuted.vue",
       "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyMuted.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyP.json b/apps/www/src/public/r/styles/default/TypographyP.json
index cb7406559..f3c141344 100644
--- a/apps/www/src/public/r/styles/default/TypographyP.json
+++ b/apps/www/src/public/r/styles/default/TypographyP.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyP.vue",
       "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyP.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographySmall.json b/apps/www/src/public/r/styles/default/TypographySmall.json
index 1ec9e7cfe..605633ed7 100644
--- a/apps/www/src/public/r/styles/default/TypographySmall.json
+++ b/apps/www/src/public/r/styles/default/TypographySmall.json
@@ -8,7 +8,7 @@
       "path": "example/TypographySmall.vue",
       "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographySmall.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyTable.json b/apps/www/src/public/r/styles/default/TypographyTable.json
index 69146da49..69571bcd9 100644
--- a/apps/www/src/public/r/styles/default/TypographyTable.json
+++ b/apps/www/src/public/r/styles/default/TypographyTable.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyTable.vue",
       "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyTable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
index b490b0988..ebd3e5fac 100644
--- a/apps/www/src/public/r/styles/default/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/VCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/VCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "VCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
index 4a04ec4ab..3b97c7b0f 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
index bf9329f08..14b928570 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/VDatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
index 6619fd89e..71d802a9a 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/VDatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
index eb48ccc21..73dab0a4c 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
index 2db2beabb..45cbd2e18 100644
--- a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDateTimePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDateTimePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
index cffdfca8b..cf4db1365 100644
--- a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
@@ -13,7 +13,7 @@
       "path": "example/VRangePickerWithSlot.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VRangePickerWithSlot.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index 82cd655c9..e8161f9b2 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -163,7 +163,7 @@
     },
     {
       "path": "ui/sidebar/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
       "target": "sidebar/index.ts"
     },
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
index 7727f5d59..d316e8299 100644
--- a/apps/www/src/public/r/styles/default/toggle.json
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "ui/toggle/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
       "target": "toggle/index.ts"
     }
diff --git a/apps/www/src/public/r/styles/new-york/AccordionDemo.json b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
index fc7460cfc..9e4f95398 100644
--- a/apps/www/src/public/r/styles/new-york/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AccordionDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
       "type": "registry:example",
-      "target": "AccordionDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDemo.json b/apps/www/src/public/r/styles/new-york/AlertDemo.json
index 1818c5cec..bfa3128f3 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
index 829d78d94..29d362466 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
index 0e8dfff6c..06e56e2fc 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
@@ -11,7 +11,7 @@
       "path": "example/AlertDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
index c1042e33d..d91d0526b 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
index b7b4121eb..15909208b 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
index ceef96995..f1b72315e 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
index bac768042..b15edccf6 100644
--- a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AspectRatioDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
       "type": "registry:example",
-      "target": "AspectRatioDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication01.json b/apps/www/src/public/r/styles/new-york/Authentication01.json
index 87f2675ad..cdecc493f 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication01.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication01.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication01.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication02.json b/apps/www/src/public/r/styles/new-york/Authentication02.json
index 79773353e..2e55cfdd4 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication02.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication02.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication02.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication03.json b/apps/www/src/public/r/styles/new-york/Authentication03.json
index fc4fe797f..c264d7c15 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication03.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication03.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication03.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication04.json b/apps/www/src/public/r/styles/new-york/Authentication04.json
index 4a40f8721..de2446fb9 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication04.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication04.json
@@ -12,7 +12,7 @@
       "path": "block/Authentication04.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormApi.json b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
index 163f480b1..4df8a739e 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormApi.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormArray.json b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
index a7a0b40f4..22af3fa5e 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormArray.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormArray.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
index f5aec7700..429203622 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormBasic.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormBasic.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
index f342e8605..e61ff7815 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormConfirmPassword.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormConfirmPassword.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
index 56f2a4fb0..b28c6fb2f 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
@@ -16,7 +16,7 @@
       "path": "example/AutoFormControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
index 62ffcbf33..5ea0f106b 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormDependencies.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormDependencies.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
index 9ef746a11..44bd16cce 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormInputWithoutLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormInputWithoutLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
index 658cc8db6..b59915455 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormSubObject.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormSubObject.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AvatarDemo.json b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
index da66e5747..39e5171cf 100644
--- a/apps/www/src/public/r/styles/new-york/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AvatarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
       "type": "registry:example",
-      "target": "AvatarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
index 02754d1e6..907a9c03a 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
index c7e89d23d..a62afed97 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
index bf6647a21..4c4582a23 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
index 73d091c4e..6ff5f0c08 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
index c04e4028f..ac5ad1ff5 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartDemo.json b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
index b20a4648b..aa5139601 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartRounded.json b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
index 17a37ac37..58959d2ba 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartRounded.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartRounded.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartStacked.json b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
index 25d407d2f..f582e7ebe 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartStacked.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartStacked.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
index 50b5b443f..2be016a41 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index 7f65da64a..3a39aca37 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDropdown.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDropdown.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
index 361dfb46c..2902a1ce9 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbEllipsisDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbEllipsisDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
index 0f23025fd..f548f5532 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbLinkDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
index f7e634f87..4f696fb39 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/BreadcrumbResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
index b40f1e2c7..fdfd7e7bb 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbSeparatorDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
index 6c5bba886..63f04c6a2 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonAsChildDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonAsChildDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
index 03fc37fee..ae7c76148 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
index d6bdd34be..d1b77edce 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
index 6c11d1d6b..03f6da5b1 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonGhostDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonGhostDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
index 3574402f2..2e0de32c1 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
index a0760893b..401ada1d5 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLinkDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
index 95afd90c0..7f66b92d2 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLoadingDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLoadingDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
index 408e64077..7e79b4e6a 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
index 2f72c751e..db0c2be36 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
index 48aaa6d06..1a0bcd70f 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonWithIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonWithIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarDemo.json b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
index 67094f7f2..6ceba044c 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarForm.json b/apps/www/src/public/r/styles/new-york/CalendarForm.json
index c1cb14eea..02d713f2b 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarForm.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarForm.json
@@ -19,7 +19,7 @@
       "path": "example/CalendarForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
index 943221cd7..78d0e8a89 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
@@ -14,7 +14,7 @@
       "path": "example/CalendarWithSelect.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarWithSelect.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardChat.json b/apps/www/src/public/r/styles/new-york/CardChat.json
index d4ab81a2d..0b4c1e90b 100644
--- a/apps/www/src/public/r/styles/new-york/CardChat.json
+++ b/apps/www/src/public/r/styles/new-york/CardChat.json
@@ -17,7 +17,7 @@
       "path": "example/CardChat.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "CardChat.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardDemo.json b/apps/www/src/public/r/styles/new-york/CardDemo.json
index a3a48c543..8b54b97e7 100644
--- a/apps/www/src/public/r/styles/new-york/CardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardDemo.json
@@ -13,7 +13,7 @@
       "path": "example/CardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardFormDemo.json b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
index 4ef325176..5617b1813 100644
--- a/apps/www/src/public/r/styles/new-york/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
@@ -14,7 +14,7 @@
       "path": "example/CardFormDemo.vue",
       "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardStats.json b/apps/www/src/public/r/styles/new-york/CardStats.json
index c2b99982b..f3fc717fd 100644
--- a/apps/www/src/public/r/styles/new-york/CardStats.json
+++ b/apps/www/src/public/r/styles/new-york/CardStats.json
@@ -15,7 +15,7 @@
       "path": "example/CardStats.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CardStats.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardWithForm.json b/apps/www/src/public/r/styles/new-york/CardWithForm.json
index 0e4d1a2b4..33d2087d0 100644
--- a/apps/www/src/public/r/styles/new-york/CardWithForm.json
+++ b/apps/www/src/public/r/styles/new-york/CardWithForm.json
@@ -14,7 +14,7 @@
       "path": "example/CardWithForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardWithForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselApi.json b/apps/www/src/public/r/styles/new-york/CarouselApi.json
index fdc029b06..8ef76276a 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselApi.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselApi.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselApi.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselDemo.json b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
index bd1a3a28d..d03ac4f6c 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
index 665d43d85..9bac374f8 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselOrientation.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselOrientation.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
index 7f57329fb..ddc7bfc25 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselPlugin.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselPlugin.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSize.json b/apps/www/src/public/r/styles/new-york/CarouselSize.json
index 393af4ec2..b1368d2a9 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSize.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSize.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSize.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSize.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
index ae36ba5a8..6edc7dab5 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSpacing.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSpacing.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
index 8f561d5f5..0ff46d3f1 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselThumbnails.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselThumbnails.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
index fd6e2f97c..16a58000f 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
index ce94c014f..10abd87a8 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
index 4a47b62c4..ce8624f0a 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormMultiple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormMultiple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
index cfb66bdff..bd5339514 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormSingle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormSingle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
index bdce2d951..1703c0742 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
index 9d0784502..67f5e1023 100644
--- a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CollapsibleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
-      "target": "CollapsibleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
index 61969e431..1cbe9d41d 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
index dd1aafc0d..014b8dfda 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
@@ -12,7 +12,7 @@
       "path": "example/ComboboxDropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDropdownMenu.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
index c1ef6df67..22a26e926 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -19,7 +19,7 @@
       "path": "example/ComboboxForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
index 92629bcdc..3c2b42040 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxPopover.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxPopover.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
index efb22ef0a..07de17ccc 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/ComboboxResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index 48578973e..75bee9c35 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CommandDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
index f1d8e0ed7..395b05074 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
@@ -12,7 +12,7 @@
       "path": "example/CommandDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
index 9366283cb..d35891cb8 100644
--- a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ContextMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "ContextMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
index 1ae12efda..81d77e254 100644
--- a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/CustomChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CustomChartTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard01.json b/apps/www/src/public/r/styles/new-york/Dashboard01.json
index 10d4dd117..e1b33c59a 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard01.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard01.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard01.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard02.json b/apps/www/src/public/r/styles/new-york/Dashboard02.json
index c459fe3bd..13bf449ba 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard02.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard02.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard02.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard03.json b/apps/www/src/public/r/styles/new-york/Dashboard03.json
index 626263638..190bddad5 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard03.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard03.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard03.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard04.json b/apps/www/src/public/r/styles/new-york/Dashboard04.json
index d6d532d08..bb3f0ae4f 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard04.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard04.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard04.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard05.json b/apps/www/src/public/r/styles/new-york/Dashboard05.json
index 3d081777d..4bc90128f 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard05.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard05.json
@@ -23,7 +23,7 @@
       "path": "block/Dashboard05.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard05.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard06.json b/apps/www/src/public/r/styles/new-york/Dashboard06.json
index 13332dd1d..3e80eb8d0 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard06.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard06.json
@@ -19,7 +19,7 @@
       "path": "block/Dashboard06.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard06.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard07.json b/apps/www/src/public/r/styles/new-york/Dashboard07.json
index 92ea3a4c7..63651f86c 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard07.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard07.json
@@ -22,7 +22,7 @@
       "path": "block/Dashboard07.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard07.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
index 347d8d344..1486d9946 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableColumnPinningDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableColumnPinningDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemo.json b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
index 676bd2139..618a75f1c 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
index d53e6eae5..12d0effa0 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
@@ -11,7 +11,7 @@
       "path": "example/DataTableDemoColumn.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemoColumn.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
index 87492229a..0ed04c4ec 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableReactiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableReactiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
index c6a5c2c70..0829c2989 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerForm.json b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
index 8f03c34b6..795a25c9b 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/DatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
index 104611ca9..c5e8780f0 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithIndependentMonths.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithIndependentMonths.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
index ef0564ed4..6a4862a4f 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/DatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
index a9cd76242..f259da24d 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
index 271c932f5..ad88c0b29 100644
--- a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
@@ -13,7 +13,7 @@
       "path": "example/DialogCustomCloseButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogCustomCloseButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogDemo.json b/apps/www/src/public/r/styles/new-york/DialogDemo.json
index c432603c5..f083828f3 100644
--- a/apps/www/src/public/r/styles/new-york/DialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogForm.json b/apps/www/src/public/r/styles/new-york/DialogForm.json
index 5ce3d0a94..4854208a4 100644
--- a/apps/www/src/public/r/styles/new-york/DialogForm.json
+++ b/apps/www/src/public/r/styles/new-york/DialogForm.json
@@ -14,7 +14,7 @@
       "path": "example/DialogForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
index c8355c4e8..c00e5c07e 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollBodyDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollBodyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
index 9ddd9bae1..134bd48cf 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollOverlayDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollOverlayDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartColor.json b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
index a5cbe913a..70a140878 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartColor.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartColor.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
index 91d0bde56..669ebd4cb 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
index 3adf64db6..c99527525 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartPie.json b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
index b044e476d..165653fed 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartPie.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartPie.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDemo.json b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
index c195110c9..f39a7f8c9 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
@@ -14,7 +14,7 @@
       "path": "example/DrawerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDialog.json b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
index 94e9152be..6d5b45b9b 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
@@ -16,7 +16,7 @@
       "path": "example/DrawerDialog.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
index be25743ed..2a73d3a12 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuCheckboxes.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuCheckboxes.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
index c2e1c6b10..b5b614a5f 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
index eaec51f16..840eee7c1 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuRadioGroup.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuRadioGroup.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
index 7f107ffb9..1ed6ca5f5 100644
--- a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
@@ -12,7 +12,7 @@
       "path": "example/HoverCardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
-      "target": "HoverCardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputDemo.json b/apps/www/src/public/r/styles/new-york/InputDemo.json
index 189a9dfa6..ab3b658ae 100644
--- a/apps/www/src/public/r/styles/new-york/InputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/InputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/InputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputDisabled.json b/apps/www/src/public/r/styles/new-york/InputDisabled.json
index f33362d9c..65e0d57d5 100644
--- a/apps/www/src/public/r/styles/new-york/InputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/InputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/InputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputFile.json b/apps/www/src/public/r/styles/new-york/InputFile.json
index 0b12da10f..07a9d27d9 100644
--- a/apps/www/src/public/r/styles/new-york/InputFile.json
+++ b/apps/www/src/public/r/styles/new-york/InputFile.json
@@ -11,7 +11,7 @@
       "path": "example/InputFile.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFile.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputForm.json b/apps/www/src/public/r/styles/new-york/InputForm.json
index 16e4a3e2a..bf58c7f92 100644
--- a/apps/www/src/public/r/styles/new-york/InputForm.json
+++ b/apps/www/src/public/r/styles/new-york/InputForm.json
@@ -17,7 +17,7 @@
       "path": "example/InputForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
index 750bf1ba8..353de2d61 100644
--- a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
@@ -17,7 +17,7 @@
       "path": "example/InputFormAutoAnimate.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFormAutoAnimate.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithButton.json b/apps/www/src/public/r/styles/new-york/InputWithButton.json
index 147d9b554..7ee609e56 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithIcon.json b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
index 8fcc8ab0f..b1384a9bd 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
@@ -10,7 +10,7 @@
       "path": "example/InputWithIcon.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithIcon.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithLabel.json b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
index 25be20666..5043a06be 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LabelDemo.json b/apps/www/src/public/r/styles/new-york/LabelDemo.json
index 6f69175bc..396978484 100644
--- a/apps/www/src/public/r/styles/new-york/LabelDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LabelDemo.json
@@ -11,7 +11,7 @@
       "path": "example/LabelDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "LabelDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
index 543e8d09e..e0ce52676 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartDemo.json b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
index bae2df196..6921d68ed 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
index e9eca28cb..bb58d37ed 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/MenubarDemo.json b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
index 6b4214564..9d9754591 100644
--- a/apps/www/src/public/r/styles/new-york/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/MenubarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
       "type": "registry:example",
-      "target": "MenubarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
index e43bb722a..2a5ebf87e 100644
--- a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/NavigationMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "NavigationMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
index c89ab567e..5ccfac606 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldCurrency.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldCurrency.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
index bd2e3714e..fc497cc2c 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDecimal.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDecimal.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
index e55406cf1..c9c57d4ba 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
index cc8291ff8..893b8b9a0 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
index f0292f522..7ea0f9fec 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
@@ -17,7 +17,7 @@
       "path": "example/NumberFieldForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
index a700c334e..be03a9347 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldPercentage.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldPercentage.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PaginationDemo.json b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
index 8c5bd9011..4079c7fee 100644
--- a/apps/www/src/public/r/styles/new-york/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
@@ -11,7 +11,7 @@
       "path": "example/PaginationDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
       "type": "registry:example",
-      "target": "PaginationDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputControlled.json b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
index 00a265818..a2a8fd1b7 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDemo.json b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
index e54b52222..95debf523 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
index 33c81d459..b877bc5cf 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
index c82019e0a..d4fc038be 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/PinInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
index 102e102e2..eb530caf3 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputSeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PopoverDemo.json b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
index 388a8e67b..ad08adaf0 100644
--- a/apps/www/src/public/r/styles/new-york/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
@@ -13,7 +13,7 @@
       "path": "example/PopoverDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "PopoverDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ProgressDemo.json b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
index a4a6fb66d..25792b844 100644
--- a/apps/www/src/public/r/styles/new-york/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ProgressDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
       "type": "registry:example",
-      "target": "ProgressDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
index f061eca6d..6e40c1b17 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
@@ -11,7 +11,7 @@
       "path": "example/RadioGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
index 39d8bcf1e..e4c133a24 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
@@ -17,7 +17,7 @@
       "path": "example/RadioGroupForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
index fa18daa75..dd502996b 100644
--- a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/RangeCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "RangeCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableDemo.json b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
index a3ded18f6..e6405c7b2 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
index 1329aed70..5507f3cf2 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableHandleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableHandleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
index 0bac1e59a..db80a16c1 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
index 475919c71..c84d98fc1 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ScrollAreaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
index d5140d467..97223db8f 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ScrollAreaHorizontalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaHorizontalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectDemo.json b/apps/www/src/public/r/styles/new-york/SelectDemo.json
index 0ca1c9ccd..9f2d2bc49 100644
--- a/apps/www/src/public/r/styles/new-york/SelectDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SelectDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SelectDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectForm.json b/apps/www/src/public/r/styles/new-york/SelectForm.json
index 31b082188..f058c0301 100644
--- a/apps/www/src/public/r/styles/new-york/SelectForm.json
+++ b/apps/www/src/public/r/styles/new-york/SelectForm.json
@@ -17,7 +17,7 @@
       "path": "example/SelectForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectScrollable.json b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
index 3533bb948..c7849084f 100644
--- a/apps/www/src/public/r/styles/new-york/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
@@ -10,7 +10,7 @@
       "path": "example/SelectScrollable.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectScrollable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
index 9d1bbacee..f83022eff 100644
--- a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SheetDemo.json b/apps/www/src/public/r/styles/new-york/SheetDemo.json
index c56748f70..6de832fc5 100644
--- a/apps/www/src/public/r/styles/new-york/SheetDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
index e4d838d13..c407c6faa 100644
--- a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetSideDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetSideDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index 2bfd9aa56..bde54ab89 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -14,7 +14,7 @@
       "path": "block/Sidebar01/page.vue",
       "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar01Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
new file mode 100644
index 000000000..cea0d958d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -0,0 +1,42 @@
+{
+  "name": "Sidebar02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar02/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar02/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index b54fc18a2..b50632586 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -13,9 +13,9 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar07Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonCard.json b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
index 54cd04fc2..aaba9b039 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonCard.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonCard.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
index 911b57043..68a2794a8 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SliderDemo.json b/apps/www/src/public/r/styles/new-york/SliderDemo.json
index 9c18fc3f3..1dabeea6b 100644
--- a/apps/www/src/public/r/styles/new-york/SliderDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SliderDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SliderDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "SliderDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SliderForm.json b/apps/www/src/public/r/styles/new-york/SliderForm.json
index eeb4265bc..8ca9e9230 100644
--- a/apps/www/src/public/r/styles/new-york/SliderForm.json
+++ b/apps/www/src/public/r/styles/new-york/SliderForm.json
@@ -17,7 +17,7 @@
       "path": "example/SliderForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SliderForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SonnerDemo.json b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
index e907e7f05..234121d84 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
@@ -12,7 +12,7 @@
       "path": "example/SonnerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
index f4e89c44b..07885dc3f 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
@@ -13,7 +13,7 @@
       "path": "example/SonnerWithDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerWithDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperDemo.json b/apps/www/src/public/r/styles/new-york/StepperDemo.json
index 40814330c..fa4d85db6 100644
--- a/apps/www/src/public/r/styles/new-york/StepperDemo.json
+++ b/apps/www/src/public/r/styles/new-york/StepperDemo.json
@@ -10,7 +10,7 @@
       "path": "example/StepperDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperForm.json b/apps/www/src/public/r/styles/new-york/StepperForm.json
index c722236be..6d2f2914f 100644
--- a/apps/www/src/public/r/styles/new-york/StepperForm.json
+++ b/apps/www/src/public/r/styles/new-york/StepperForm.json
@@ -15,7 +15,7 @@
       "path": "example/StepperForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperHorizental.json b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
index f0450393e..eccfe5a7b 100644
--- a/apps/www/src/public/r/styles/new-york/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
@@ -11,7 +11,7 @@
       "path": "example/StepperHorizental.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperHorizental.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperVertical.json b/apps/www/src/public/r/styles/new-york/StepperVertical.json
index 47727b5a9..11e663a8a 100644
--- a/apps/www/src/public/r/styles/new-york/StepperVertical.json
+++ b/apps/www/src/public/r/styles/new-york/StepperVertical.json
@@ -11,7 +11,7 @@
       "path": "example/StepperVertical.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperVertical.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SwitchDemo.json b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
index cfe3454b7..e283f0767 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SwitchDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SwitchForm.json b/apps/www/src/public/r/styles/new-york/SwitchForm.json
index b2e95aea8..daa6877e5 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchForm.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchForm.json
@@ -17,7 +17,7 @@
       "path": "example/SwitchForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TableDemo.json b/apps/www/src/public/r/styles/new-york/TableDemo.json
index bb7d10b90..f6f8d9ef9 100644
--- a/apps/www/src/public/r/styles/new-york/TableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
       "type": "registry:example",
-      "target": "TableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TabsDemo.json b/apps/www/src/public/r/styles/new-york/TabsDemo.json
index dfd5f1254..a3cc5e370 100644
--- a/apps/www/src/public/r/styles/new-york/TabsDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
index a10d3118c..5060eec59 100644
--- a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
index eefb3ea9d..b0a877e5b 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TagsInputComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
index 5af8fba8f..735132bc3 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TagsInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
index e560c54c3..b860210e9 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/TagsInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDemo.json b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
index d53d10ff3..c23609a9c 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
index 844cd2776..989593986 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaForm.json b/apps/www/src/public/r/styles/new-york/TextareaForm.json
index d919cddaf..54083f52e 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaForm.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaForm.json
@@ -17,7 +17,7 @@
       "path": "example/TextareaForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
index 8a3e870a7..8d00527fc 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
index ab334a3d4..229a6fe7f 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithText.json b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
index 219f6ee2e..678636028 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastDemo.json b/apps/www/src/public/r/styles/new-york/ToastDemo.json
index 29ed6da97..ebc1f4a60 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ToastDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastDestructive.json b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
index 840cc942e..cc11a18fb 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
@@ -12,7 +12,7 @@
       "path": "example/ToastDestructive.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDestructive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastSimple.json b/apps/www/src/public/r/styles/new-york/ToastSimple.json
index dbb3b924e..2e11f3e19 100644
--- a/apps/www/src/public/r/styles/new-york/ToastSimple.json
+++ b/apps/www/src/public/r/styles/new-york/ToastSimple.json
@@ -11,7 +11,7 @@
       "path": "example/ToastSimple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastSimple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithAction.json b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
index 43c02a99d..df3bb318b 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
@@ -12,7 +12,7 @@
       "path": "example/ToastWithAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithAction.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
index 8932b4556..70f7fa7d5 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
@@ -11,7 +11,7 @@
       "path": "example/ToastWithTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithTitle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
index f9de4936f..4823f0c2c 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
index 48ed38d35..debe3c850 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
index 75b3b0c0a..94d3443a3 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
index adbf3e393..dbe87b8b6 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
index 1c0cb40bd..41dc4fdb2 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
index fbfa2f3f2..9253a6786 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
index bcb804c2d..d8d1c6b41 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSingleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSingleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
index 1524d7f80..19105a61f 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
index c6706d7e6..dd66b9d7e 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
index 966d414f0..e8a8ce231 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicWithTextDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicWithTextDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
index c03fb3299..930306dc8 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
index f90f9018d..e0c96cfb2 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TooltipDemo.json b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
index c0cdeb161..02cfe8b03 100644
--- a/apps/www/src/public/r/styles/new-york/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TooltipDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:example",
-      "target": "TooltipDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
index 9819d203c..c20d5f8b7 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyBlockquote.vue",
       "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyBlockquote.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyDemo.json b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
index 7dc911d6b..82085ca25 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyDemo.vue",
       "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH1.json b/apps/www/src/public/r/styles/new-york/TypographyH1.json
index 4688e1d9b..ac6302acc 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH1.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH1.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH1.vue",
       "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH1.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH2.json b/apps/www/src/public/r/styles/new-york/TypographyH2.json
index 50d1467bf..29abfe462 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH2.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH2.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH2.vue",
       "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH2.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH3.json b/apps/www/src/public/r/styles/new-york/TypographyH3.json
index 3819ad2a7..871a73f8d 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH3.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH3.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH3.vue",
       "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH3.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH4.json b/apps/www/src/public/r/styles/new-york/TypographyH4.json
index 72b7f9a0b..1680369a6 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH4.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH4.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH4.vue",
       "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH4.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
index 70a6eb50b..4b52c76b0 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyInlineCode.vue",
       "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyInlineCode.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLarge.json b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
index d0d2febcd..751756964 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLarge.vue",
       "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLarge.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLead.json b/apps/www/src/public/r/styles/new-york/TypographyLead.json
index 40e1b5bb7..aeebe241d 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLead.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLead.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLead.vue",
       "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLead.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyList.json b/apps/www/src/public/r/styles/new-york/TypographyList.json
index 6d20c56b5..36e3e1ebb 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyList.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyList.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyList.vue",
       "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyList.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyMuted.json b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
index 5a5beda40..dd2b04584 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyMuted.vue",
       "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyMuted.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyP.json b/apps/www/src/public/r/styles/new-york/TypographyP.json
index cb7406559..f3c141344 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyP.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyP.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyP.vue",
       "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyP.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographySmall.json b/apps/www/src/public/r/styles/new-york/TypographySmall.json
index 1ec9e7cfe..605633ed7 100644
--- a/apps/www/src/public/r/styles/new-york/TypographySmall.json
+++ b/apps/www/src/public/r/styles/new-york/TypographySmall.json
@@ -8,7 +8,7 @@
       "path": "example/TypographySmall.vue",
       "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographySmall.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyTable.json b/apps/www/src/public/r/styles/new-york/TypographyTable.json
index 69146da49..69571bcd9 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyTable.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyTable.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyTable.vue",
       "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyTable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
index ade41d1d4..e9167d700 100644
--- a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/VCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "VCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
index e8ea4063d..9af091402 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
index 87a279200..a803d856a 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/VDatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
index 85790287b..32796580f 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/VDatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
index 35d2da114..e7c10d2ee 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
index 30f5517e5..354314283 100644
--- a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDateTimePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDateTimePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
index 3b4edd336..15fa7b80f 100644
--- a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
@@ -13,7 +13,7 @@
       "path": "example/VRangePickerWithSlot.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VRangePickerWithSlot.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index dc484fc79..f6f268d90 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -163,7 +163,7 @@
     },
     {
       "path": "ui/sidebar/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
       "target": "sidebar/index.ts"
     },
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
index 77f542864..44ad20083 100644
--- a/apps/www/src/public/r/styles/new-york/toggle.json
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "ui/toggle/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
       "target": "toggle/index.ts"
     }
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index b3c12abed..873fbe6c1 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -2297,7 +2297,7 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2441,7 +2441,7 @@
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
         "target": "sidebar/index.ts"
       },
@@ -2865,7 +2865,7 @@
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
         "target": "toggle/index.ts"
       }
@@ -2978,7 +2978,7 @@
         "path": "example/AccordionDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
         "type": "registry:example",
-        "target": "AccordionDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -2994,7 +2994,7 @@
         "path": "example/AlertDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3010,7 +3010,7 @@
         "path": "example/AlertDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3027,7 +3027,7 @@
         "path": "example/AlertDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3043,7 +3043,7 @@
         "path": "example/AreaChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -3059,7 +3059,7 @@
         "path": "example/AreaChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3075,7 +3075,7 @@
         "path": "example/AreaChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -3091,7 +3091,7 @@
         "path": "example/AspectRatioDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
         "type": "registry:example",
-        "target": "AspectRatioDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3109,7 +3109,7 @@
         "path": "example/AutoFormApi.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormApi.vue"
+        "target": ""
       }
     ]
   },
@@ -3127,7 +3127,7 @@
         "path": "example/AutoFormArray.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormArray.vue"
+        "target": ""
       }
     ]
   },
@@ -3145,7 +3145,7 @@
         "path": "example/AutoFormBasic.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormBasic.vue"
+        "target": ""
       }
     ]
   },
@@ -3163,7 +3163,7 @@
         "path": "example/AutoFormConfirmPassword.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormConfirmPassword.vue"
+        "target": ""
       }
     ]
   },
@@ -3185,7 +3185,7 @@
         "path": "example/AutoFormControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -3203,7 +3203,7 @@
         "path": "example/AutoFormDependencies.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormDependencies.vue"
+        "target": ""
       }
     ]
   },
@@ -3221,7 +3221,7 @@
         "path": "example/AutoFormInputWithoutLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormInputWithoutLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -3239,7 +3239,7 @@
         "path": "example/AutoFormSubObject.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormSubObject.vue"
+        "target": ""
       }
     ]
   },
@@ -3255,7 +3255,7 @@
         "path": "example/AvatarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
         "type": "registry:example",
-        "target": "AvatarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3271,7 +3271,7 @@
         "path": "example/BadgeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3287,7 +3287,7 @@
         "path": "example/BadgeDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3303,7 +3303,7 @@
         "path": "example/BadgeOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3319,7 +3319,7 @@
         "path": "example/BadgeSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3335,7 +3335,7 @@
         "path": "example/BarChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -3351,7 +3351,7 @@
         "path": "example/BarChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3367,7 +3367,7 @@
         "path": "example/BarChartRounded.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartRounded.vue"
+        "target": ""
       }
     ]
   },
@@ -3383,7 +3383,7 @@
         "path": "example/BarChartStacked.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartStacked.vue"
+        "target": ""
       }
     ]
   },
@@ -3400,7 +3400,7 @@
         "path": "example/BreadcrumbDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3417,7 +3417,7 @@
         "path": "example/BreadcrumbDropdown.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDropdown.vue"
+        "target": ""
       }
     ]
   },
@@ -3433,7 +3433,7 @@
         "path": "example/BreadcrumbEllipsisDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbEllipsisDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3449,7 +3449,7 @@
         "path": "example/BreadcrumbLinkDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3470,7 +3470,7 @@
         "path": "example/BreadcrumbResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -3486,7 +3486,7 @@
         "path": "example/BreadcrumbSeparatorDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3502,7 +3502,7 @@
         "path": "example/ButtonAsChildDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonAsChildDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3518,7 +3518,7 @@
         "path": "example/ButtonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3534,7 +3534,7 @@
         "path": "example/ButtonDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3550,7 +3550,7 @@
         "path": "example/ButtonGhostDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonGhostDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3566,7 +3566,7 @@
         "path": "example/ButtonIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3582,7 +3582,7 @@
         "path": "example/ButtonLinkDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3598,7 +3598,7 @@
         "path": "example/ButtonLoadingDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLoadingDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3614,7 +3614,7 @@
         "path": "example/ButtonOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3630,7 +3630,7 @@
         "path": "example/ButtonSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3646,7 +3646,7 @@
         "path": "example/ButtonWithIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonWithIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3662,7 +3662,7 @@
         "path": "example/CalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3687,7 +3687,7 @@
         "path": "example/CalendarForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarForm.vue"
+        "target": ""
       }
     ]
   },
@@ -3707,7 +3707,7 @@
         "path": "example/CalendarWithSelect.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarWithSelect.vue"
+        "target": ""
       }
     ]
   },
@@ -3730,7 +3730,7 @@
         "path": "example/CardChat.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "CardChat.vue"
+        "target": ""
       }
     ]
   },
@@ -3749,7 +3749,7 @@
         "path": "example/CardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3769,7 +3769,7 @@
         "path": "example/CardFormDemo.vue",
         "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3790,7 +3790,7 @@
         "path": "example/CardStats.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CardStats.vue"
+        "target": ""
       }
     ]
   },
@@ -3810,7 +3810,7 @@
         "path": "example/CardWithForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardWithForm.vue"
+        "target": ""
       }
     ]
   },
@@ -3829,7 +3829,7 @@
         "path": "example/CarouselApi.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselApi.vue"
+        "target": ""
       }
     ]
   },
@@ -3846,7 +3846,7 @@
         "path": "example/CarouselDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3863,7 +3863,7 @@
         "path": "example/CarouselOrientation.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselOrientation.vue"
+        "target": ""
       }
     ]
   },
@@ -3880,7 +3880,7 @@
         "path": "example/CarouselPlugin.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselPlugin.vue"
+        "target": ""
       }
     ]
   },
@@ -3897,7 +3897,7 @@
         "path": "example/CarouselSize.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSize.vue"
+        "target": ""
       }
     ]
   },
@@ -3914,7 +3914,7 @@
         "path": "example/CarouselSpacing.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSpacing.vue"
+        "target": ""
       }
     ]
   },
@@ -3933,7 +3933,7 @@
         "path": "example/CarouselThumbnails.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselThumbnails.vue"
+        "target": ""
       }
     ]
   },
@@ -3949,7 +3949,7 @@
         "path": "example/CheckboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3965,7 +3965,7 @@
         "path": "example/CheckboxDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -3988,7 +3988,7 @@
         "path": "example/CheckboxFormMultiple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormMultiple.vue"
+        "target": ""
       }
     ]
   },
@@ -4011,7 +4011,7 @@
         "path": "example/CheckboxFormSingle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormSingle.vue"
+        "target": ""
       }
     ]
   },
@@ -4027,7 +4027,7 @@
         "path": "example/CheckboxWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -4044,7 +4044,7 @@
         "path": "example/CollapsibleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
         "type": "registry:example",
-        "target": "CollapsibleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4063,7 +4063,7 @@
         "path": "example/ComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4081,7 +4081,7 @@
         "path": "example/ComboboxDropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDropdownMenu.vue"
+        "target": ""
       }
     ]
   },
@@ -4106,7 +4106,7 @@
         "path": "example/ComboboxForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4124,7 +4124,7 @@
         "path": "example/ComboboxPopover.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxPopover.vue"
+        "target": ""
       }
     ]
   },
@@ -4145,7 +4145,7 @@
         "path": "example/ComboboxResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -4161,7 +4161,7 @@
         "path": "example/CommandDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4179,7 +4179,7 @@
         "path": "example/CommandDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4195,7 +4195,7 @@
         "path": "example/ContextMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "ContextMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4211,7 +4211,7 @@
         "path": "example/CustomChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CustomChartTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4234,7 +4234,7 @@
         "path": "example/DataTableColumnPinningDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableColumnPinningDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4257,7 +4257,7 @@
         "path": "example/DataTableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4274,7 +4274,7 @@
         "path": "example/DataTableDemoColumn.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemoColumn.vue"
+        "target": ""
       }
     ]
   },
@@ -4297,7 +4297,7 @@
         "path": "example/DataTableReactiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableReactiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4316,7 +4316,7 @@
         "path": "example/DatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4341,7 +4341,7 @@
         "path": "example/DatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4360,7 +4360,7 @@
         "path": "example/DatePickerWithIndependentMonths.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithIndependentMonths.vue"
+        "target": ""
       }
     ]
   },
@@ -4380,7 +4380,7 @@
         "path": "example/DatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -4399,7 +4399,7 @@
         "path": "example/DatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -4418,7 +4418,7 @@
         "path": "example/DialogCustomCloseButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogCustomCloseButton.vue"
+        "target": ""
       }
     ]
   },
@@ -4437,7 +4437,7 @@
         "path": "example/DialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4457,7 +4457,7 @@
         "path": "example/DialogForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4474,7 +4474,7 @@
         "path": "example/DialogScrollBodyDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollBodyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4491,7 +4491,7 @@
         "path": "example/DialogScrollOverlayDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollOverlayDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4507,7 +4507,7 @@
         "path": "example/DonutChartColor.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartColor.vue"
+        "target": ""
       }
     ]
   },
@@ -4523,7 +4523,7 @@
         "path": "example/DonutChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4539,7 +4539,7 @@
         "path": "example/DonutChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4555,7 +4555,7 @@
         "path": "example/DonutChartPie.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartPie.vue"
+        "target": ""
       }
     ]
   },
@@ -4575,7 +4575,7 @@
         "path": "example/DrawerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4597,7 +4597,7 @@
         "path": "example/DrawerDialog.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -4614,7 +4614,7 @@
         "path": "example/DropdownMenuCheckboxes.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuCheckboxes.vue"
+        "target": ""
       }
     ]
   },
@@ -4631,7 +4631,7 @@
         "path": "example/DropdownMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4648,7 +4648,7 @@
         "path": "example/DropdownMenuRadioGroup.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuRadioGroup.vue"
+        "target": ""
       }
     ]
   },
@@ -4666,7 +4666,7 @@
         "path": "example/HoverCardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
         "type": "registry:example",
-        "target": "HoverCardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4682,7 +4682,7 @@
         "path": "example/InputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4698,7 +4698,7 @@
         "path": "example/InputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -4715,7 +4715,7 @@
         "path": "example/InputFile.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFile.vue"
+        "target": ""
       }
     ]
   },
@@ -4738,7 +4738,7 @@
         "path": "example/InputForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4761,7 +4761,7 @@
         "path": "example/InputFormAutoAnimate.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFormAutoAnimate.vue"
+        "target": ""
       }
     ]
   },
@@ -4778,7 +4778,7 @@
         "path": "example/InputWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -4794,7 +4794,7 @@
         "path": "example/InputWithIcon.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithIcon.vue"
+        "target": ""
       }
     ]
   },
@@ -4811,7 +4811,7 @@
         "path": "example/InputWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -4828,7 +4828,7 @@
         "path": "example/LabelDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "LabelDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4844,7 +4844,7 @@
         "path": "example/LineChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4860,7 +4860,7 @@
         "path": "example/LineChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4876,7 +4876,7 @@
         "path": "example/LineChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -4892,7 +4892,7 @@
         "path": "example/MenubarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
         "type": "registry:example",
-        "target": "MenubarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4908,7 +4908,7 @@
         "path": "example/NavigationMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "NavigationMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4925,7 +4925,7 @@
         "path": "example/NumberFieldCurrency.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldCurrency.vue"
+        "target": ""
       }
     ]
   },
@@ -4942,7 +4942,7 @@
         "path": "example/NumberFieldDecimal.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDecimal.vue"
+        "target": ""
       }
     ]
   },
@@ -4959,7 +4959,7 @@
         "path": "example/NumberFieldDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4976,7 +4976,7 @@
         "path": "example/NumberFieldDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -4999,7 +4999,7 @@
         "path": "example/NumberFieldForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5016,7 +5016,7 @@
         "path": "example/NumberFieldPercentage.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldPercentage.vue"
+        "target": ""
       }
     ]
   },
@@ -5033,7 +5033,7 @@
         "path": "example/PaginationDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
         "type": "registry:example",
-        "target": "PaginationDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5049,7 +5049,7 @@
         "path": "example/PinInputControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -5065,7 +5065,7 @@
         "path": "example/PinInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5081,7 +5081,7 @@
         "path": "example/PinInputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -5104,7 +5104,7 @@
         "path": "example/PinInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5120,7 +5120,7 @@
         "path": "example/PinInputSeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5139,7 +5139,7 @@
         "path": "example/PopoverDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "PopoverDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5155,7 +5155,7 @@
         "path": "example/ProgressDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
         "type": "registry:example",
-        "target": "ProgressDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5172,7 +5172,7 @@
         "path": "example/RadioGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5195,7 +5195,7 @@
         "path": "example/RadioGroupForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5211,7 +5211,7 @@
         "path": "example/RangeCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "RangeCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5227,7 +5227,7 @@
         "path": "example/ResizableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5243,7 +5243,7 @@
         "path": "example/ResizableHandleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableHandleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5259,7 +5259,7 @@
         "path": "example/ResizableVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5276,7 +5276,7 @@
         "path": "example/ScrollAreaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5292,7 +5292,7 @@
         "path": "example/ScrollAreaHorizontalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaHorizontalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5308,7 +5308,7 @@
         "path": "example/SelectDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5331,7 +5331,7 @@
         "path": "example/SelectForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5347,7 +5347,7 @@
         "path": "example/SelectScrollable.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectScrollable.vue"
+        "target": ""
       }
     ]
   },
@@ -5363,7 +5363,7 @@
         "path": "example/SeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5382,7 +5382,7 @@
         "path": "example/SheetDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5401,7 +5401,7 @@
         "path": "example/SheetSideDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetSideDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5417,7 +5417,7 @@
         "path": "example/SkeletonCard.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonCard.vue"
+        "target": ""
       }
     ]
   },
@@ -5433,7 +5433,7 @@
         "path": "example/SkeletonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5450,7 +5450,7 @@
         "path": "example/SliderDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "SliderDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5473,7 +5473,7 @@
         "path": "example/SliderForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SliderForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5491,7 +5491,7 @@
         "path": "example/SonnerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5510,7 +5510,7 @@
         "path": "example/SonnerWithDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerWithDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -5526,7 +5526,7 @@
         "path": "example/StepperDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5547,7 +5547,7 @@
         "path": "example/StepperForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5564,7 +5564,7 @@
         "path": "example/StepperHorizental.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperHorizental.vue"
+        "target": ""
       }
     ]
   },
@@ -5581,7 +5581,7 @@
         "path": "example/StepperVertical.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperVertical.vue"
+        "target": ""
       }
     ]
   },
@@ -5598,7 +5598,7 @@
         "path": "example/SwitchDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5621,7 +5621,7 @@
         "path": "example/SwitchForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5637,7 +5637,7 @@
         "path": "example/TableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
         "type": "registry:example",
-        "target": "TableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5657,7 +5657,7 @@
         "path": "example/TabsDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5677,7 +5677,7 @@
         "path": "example/TabsVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5694,7 +5694,7 @@
         "path": "example/TagsInputComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5710,7 +5710,7 @@
         "path": "example/TagsInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5733,7 +5733,7 @@
         "path": "example/TagsInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5749,7 +5749,7 @@
         "path": "example/TextareaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5765,7 +5765,7 @@
         "path": "example/TextareaDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -5788,7 +5788,7 @@
         "path": "example/TextareaForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5805,7 +5805,7 @@
         "path": "example/TextareaWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -5822,7 +5822,7 @@
         "path": "example/TextareaWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -5839,7 +5839,7 @@
         "path": "example/TextareaWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -5856,7 +5856,7 @@
         "path": "example/ToastDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5874,7 +5874,7 @@
         "path": "example/ToastDestructive.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDestructive.vue"
+        "target": ""
       }
     ]
   },
@@ -5891,7 +5891,7 @@
         "path": "example/ToastSimple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastSimple.vue"
+        "target": ""
       }
     ]
   },
@@ -5909,7 +5909,7 @@
         "path": "example/ToastWithAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithAction.vue"
+        "target": ""
       }
     ]
   },
@@ -5926,7 +5926,7 @@
         "path": "example/ToastWithTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithTitle.vue"
+        "target": ""
       }
     ]
   },
@@ -5942,7 +5942,7 @@
         "path": "example/ToggleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5958,7 +5958,7 @@
         "path": "example/ToggleDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5974,7 +5974,7 @@
         "path": "example/ToggleGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5990,7 +5990,7 @@
         "path": "example/ToggleGroupDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6006,7 +6006,7 @@
         "path": "example/ToggleGroupLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6022,7 +6022,7 @@
         "path": "example/ToggleGroupOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6038,7 +6038,7 @@
         "path": "example/ToggleGroupSingleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSingleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6054,7 +6054,7 @@
         "path": "example/ToggleGroupSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6070,7 +6070,7 @@
         "path": "example/ToggleItalicDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6086,7 +6086,7 @@
         "path": "example/ToggleItalicWithTextDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicWithTextDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6102,7 +6102,7 @@
         "path": "example/ToggleLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6118,7 +6118,7 @@
         "path": "example/ToggleSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6135,7 +6135,7 @@
         "path": "example/TooltipDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:example",
-        "target": "TooltipDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6149,7 +6149,7 @@
         "path": "example/TypographyBlockquote.vue",
         "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyBlockquote.vue"
+        "target": ""
       }
     ]
   },
@@ -6163,7 +6163,7 @@
         "path": "example/TypographyDemo.vue",
         "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6177,7 +6177,7 @@
         "path": "example/TypographyH1.vue",
         "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH1.vue"
+        "target": ""
       }
     ]
   },
@@ -6191,7 +6191,7 @@
         "path": "example/TypographyH2.vue",
         "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH2.vue"
+        "target": ""
       }
     ]
   },
@@ -6205,7 +6205,7 @@
         "path": "example/TypographyH3.vue",
         "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH3.vue"
+        "target": ""
       }
     ]
   },
@@ -6219,7 +6219,7 @@
         "path": "example/TypographyH4.vue",
         "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH4.vue"
+        "target": ""
       }
     ]
   },
@@ -6233,7 +6233,7 @@
         "path": "example/TypographyInlineCode.vue",
         "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyInlineCode.vue"
+        "target": ""
       }
     ]
   },
@@ -6247,7 +6247,7 @@
         "path": "example/TypographyLarge.vue",
         "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLarge.vue"
+        "target": ""
       }
     ]
   },
@@ -6261,7 +6261,7 @@
         "path": "example/TypographyLead.vue",
         "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLead.vue"
+        "target": ""
       }
     ]
   },
@@ -6275,7 +6275,7 @@
         "path": "example/TypographyList.vue",
         "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyList.vue"
+        "target": ""
       }
     ]
   },
@@ -6289,7 +6289,7 @@
         "path": "example/TypographyMuted.vue",
         "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyMuted.vue"
+        "target": ""
       }
     ]
   },
@@ -6303,7 +6303,7 @@
         "path": "example/TypographyP.vue",
         "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyP.vue"
+        "target": ""
       }
     ]
   },
@@ -6317,7 +6317,7 @@
         "path": "example/TypographySmall.vue",
         "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographySmall.vue"
+        "target": ""
       }
     ]
   },
@@ -6331,7 +6331,7 @@
         "path": "example/TypographyTable.vue",
         "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyTable.vue"
+        "target": ""
       }
     ]
   },
@@ -6347,7 +6347,7 @@
         "path": "example/VCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "VCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6366,7 +6366,7 @@
         "path": "example/VDatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6391,7 +6391,7 @@
         "path": "example/VDatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -6411,7 +6411,7 @@
         "path": "example/VDatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -6430,7 +6430,7 @@
         "path": "example/VDatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -6449,7 +6449,7 @@
         "path": "example/VDateTimePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDateTimePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6468,7 +6468,7 @@
         "path": "example/VRangePickerWithSlot.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VRangePickerWithSlot.vue"
+        "target": ""
       }
     ]
   },
@@ -6487,7 +6487,7 @@
         "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6506,7 +6506,7 @@
         "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6525,7 +6525,7 @@
         "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6543,7 +6543,7 @@
         "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6566,7 +6566,7 @@
         "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6587,7 +6587,7 @@
         "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6610,7 +6610,7 @@
         "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6631,7 +6631,7 @@
         "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6660,7 +6660,7 @@
         "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard05.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6685,7 +6685,7 @@
         "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard06.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6713,7 +6713,7 @@
         "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard07.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6733,7 +6733,49 @@
         "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar01Page.vue"
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar02/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar02/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -6752,9 +6794,9 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar07Page.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -9012,7 +9054,7 @@
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
         "target": "sidebar/index.ts"
       },
@@ -9436,7 +9478,7 @@
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
         "target": "toggle/index.ts"
       }
@@ -9549,7 +9591,7 @@
         "path": "example/AccordionDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
         "type": "registry:example",
-        "target": "AccordionDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9565,7 +9607,7 @@
         "path": "example/AlertDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9581,7 +9623,7 @@
         "path": "example/AlertDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9598,7 +9640,7 @@
         "path": "example/AlertDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9614,7 +9656,7 @@
         "path": "example/AreaChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -9630,7 +9672,7 @@
         "path": "example/AreaChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9646,7 +9688,7 @@
         "path": "example/AreaChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -9662,7 +9704,7 @@
         "path": "example/AspectRatioDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
         "type": "registry:example",
-        "target": "AspectRatioDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9680,7 +9722,7 @@
         "path": "example/AutoFormApi.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormApi.vue"
+        "target": ""
       }
     ]
   },
@@ -9698,7 +9740,7 @@
         "path": "example/AutoFormArray.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormArray.vue"
+        "target": ""
       }
     ]
   },
@@ -9716,7 +9758,7 @@
         "path": "example/AutoFormBasic.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormBasic.vue"
+        "target": ""
       }
     ]
   },
@@ -9734,7 +9776,7 @@
         "path": "example/AutoFormConfirmPassword.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormConfirmPassword.vue"
+        "target": ""
       }
     ]
   },
@@ -9756,7 +9798,7 @@
         "path": "example/AutoFormControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -9774,7 +9816,7 @@
         "path": "example/AutoFormDependencies.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormDependencies.vue"
+        "target": ""
       }
     ]
   },
@@ -9792,7 +9834,7 @@
         "path": "example/AutoFormInputWithoutLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormInputWithoutLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -9810,7 +9852,7 @@
         "path": "example/AutoFormSubObject.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormSubObject.vue"
+        "target": ""
       }
     ]
   },
@@ -9826,7 +9868,7 @@
         "path": "example/AvatarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
         "type": "registry:example",
-        "target": "AvatarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9842,7 +9884,7 @@
         "path": "example/BadgeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9858,7 +9900,7 @@
         "path": "example/BadgeDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9874,7 +9916,7 @@
         "path": "example/BadgeOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9890,7 +9932,7 @@
         "path": "example/BadgeSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9906,7 +9948,7 @@
         "path": "example/BarChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -9922,7 +9964,7 @@
         "path": "example/BarChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9938,7 +9980,7 @@
         "path": "example/BarChartRounded.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartRounded.vue"
+        "target": ""
       }
     ]
   },
@@ -9954,7 +9996,7 @@
         "path": "example/BarChartStacked.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartStacked.vue"
+        "target": ""
       }
     ]
   },
@@ -9971,7 +10013,7 @@
         "path": "example/BreadcrumbDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9988,7 +10030,7 @@
         "path": "example/BreadcrumbDropdown.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDropdown.vue"
+        "target": ""
       }
     ]
   },
@@ -10004,7 +10046,7 @@
         "path": "example/BreadcrumbEllipsisDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbEllipsisDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10020,7 +10062,7 @@
         "path": "example/BreadcrumbLinkDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10041,7 +10083,7 @@
         "path": "example/BreadcrumbResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -10057,7 +10099,7 @@
         "path": "example/BreadcrumbSeparatorDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10073,7 +10115,7 @@
         "path": "example/ButtonAsChildDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonAsChildDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10089,7 +10131,7 @@
         "path": "example/ButtonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10105,7 +10147,7 @@
         "path": "example/ButtonDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10121,7 +10163,7 @@
         "path": "example/ButtonGhostDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonGhostDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10137,7 +10179,7 @@
         "path": "example/ButtonIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10153,7 +10195,7 @@
         "path": "example/ButtonLinkDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10169,7 +10211,7 @@
         "path": "example/ButtonLoadingDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLoadingDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10185,7 +10227,7 @@
         "path": "example/ButtonOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10201,7 +10243,7 @@
         "path": "example/ButtonSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10217,7 +10259,7 @@
         "path": "example/ButtonWithIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonWithIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10233,7 +10275,7 @@
         "path": "example/CalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10258,7 +10300,7 @@
         "path": "example/CalendarForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10278,7 +10320,7 @@
         "path": "example/CalendarWithSelect.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarWithSelect.vue"
+        "target": ""
       }
     ]
   },
@@ -10301,7 +10343,7 @@
         "path": "example/CardChat.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "CardChat.vue"
+        "target": ""
       }
     ]
   },
@@ -10320,7 +10362,7 @@
         "path": "example/CardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10340,7 +10382,7 @@
         "path": "example/CardFormDemo.vue",
         "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10361,7 +10403,7 @@
         "path": "example/CardStats.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CardStats.vue"
+        "target": ""
       }
     ]
   },
@@ -10381,7 +10423,7 @@
         "path": "example/CardWithForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardWithForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10400,7 +10442,7 @@
         "path": "example/CarouselApi.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselApi.vue"
+        "target": ""
       }
     ]
   },
@@ -10417,7 +10459,7 @@
         "path": "example/CarouselDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10434,7 +10476,7 @@
         "path": "example/CarouselOrientation.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselOrientation.vue"
+        "target": ""
       }
     ]
   },
@@ -10451,7 +10493,7 @@
         "path": "example/CarouselPlugin.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselPlugin.vue"
+        "target": ""
       }
     ]
   },
@@ -10468,7 +10510,7 @@
         "path": "example/CarouselSize.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSize.vue"
+        "target": ""
       }
     ]
   },
@@ -10485,7 +10527,7 @@
         "path": "example/CarouselSpacing.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSpacing.vue"
+        "target": ""
       }
     ]
   },
@@ -10504,7 +10546,7 @@
         "path": "example/CarouselThumbnails.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselThumbnails.vue"
+        "target": ""
       }
     ]
   },
@@ -10520,7 +10562,7 @@
         "path": "example/CheckboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10536,7 +10578,7 @@
         "path": "example/CheckboxDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -10559,7 +10601,7 @@
         "path": "example/CheckboxFormMultiple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormMultiple.vue"
+        "target": ""
       }
     ]
   },
@@ -10582,7 +10624,7 @@
         "path": "example/CheckboxFormSingle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormSingle.vue"
+        "target": ""
       }
     ]
   },
@@ -10598,7 +10640,7 @@
         "path": "example/CheckboxWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -10615,7 +10657,7 @@
         "path": "example/CollapsibleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
         "type": "registry:example",
-        "target": "CollapsibleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10634,7 +10676,7 @@
         "path": "example/ComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10652,7 +10694,7 @@
         "path": "example/ComboboxDropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDropdownMenu.vue"
+        "target": ""
       }
     ]
   },
@@ -10677,7 +10719,7 @@
         "path": "example/ComboboxForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10696,7 +10738,7 @@
         "path": "example/ComboboxPopover.vue",
         "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxPopover.vue"
+        "target": ""
       }
     ]
   },
@@ -10717,7 +10759,7 @@
         "path": "example/ComboboxResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -10733,7 +10775,7 @@
         "path": "example/CommandDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10751,7 +10793,7 @@
         "path": "example/CommandDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10767,7 +10809,7 @@
         "path": "example/ContextMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "ContextMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10783,7 +10825,7 @@
         "path": "example/CustomChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CustomChartTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -10806,7 +10848,7 @@
         "path": "example/DataTableColumnPinningDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableColumnPinningDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10829,7 +10871,7 @@
         "path": "example/DataTableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10846,7 +10888,7 @@
         "path": "example/DataTableDemoColumn.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemoColumn.vue"
+        "target": ""
       }
     ]
   },
@@ -10869,7 +10911,7 @@
         "path": "example/DataTableReactiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableReactiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10888,7 +10930,7 @@
         "path": "example/DatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10913,7 +10955,7 @@
         "path": "example/DatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10932,7 +10974,7 @@
         "path": "example/DatePickerWithIndependentMonths.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithIndependentMonths.vue"
+        "target": ""
       }
     ]
   },
@@ -10952,7 +10994,7 @@
         "path": "example/DatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -10971,7 +11013,7 @@
         "path": "example/DatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -10990,7 +11032,7 @@
         "path": "example/DialogCustomCloseButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogCustomCloseButton.vue"
+        "target": ""
       }
     ]
   },
@@ -11009,7 +11051,7 @@
         "path": "example/DialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11029,7 +11071,7 @@
         "path": "example/DialogForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11046,7 +11088,7 @@
         "path": "example/DialogScrollBodyDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollBodyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11063,7 +11105,7 @@
         "path": "example/DialogScrollOverlayDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollOverlayDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11079,7 +11121,7 @@
         "path": "example/DonutChartColor.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartColor.vue"
+        "target": ""
       }
     ]
   },
@@ -11095,7 +11137,7 @@
         "path": "example/DonutChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -11111,7 +11153,7 @@
         "path": "example/DonutChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11127,7 +11169,7 @@
         "path": "example/DonutChartPie.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartPie.vue"
+        "target": ""
       }
     ]
   },
@@ -11147,7 +11189,7 @@
         "path": "example/DrawerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11169,7 +11211,7 @@
         "path": "example/DrawerDialog.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -11186,7 +11228,7 @@
         "path": "example/DropdownMenuCheckboxes.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuCheckboxes.vue"
+        "target": ""
       }
     ]
   },
@@ -11203,7 +11245,7 @@
         "path": "example/DropdownMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11220,7 +11262,7 @@
         "path": "example/DropdownMenuRadioGroup.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuRadioGroup.vue"
+        "target": ""
       }
     ]
   },
@@ -11238,7 +11280,7 @@
         "path": "example/HoverCardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
         "type": "registry:example",
-        "target": "HoverCardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11254,7 +11296,7 @@
         "path": "example/InputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11270,7 +11312,7 @@
         "path": "example/InputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11287,7 +11329,7 @@
         "path": "example/InputFile.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFile.vue"
+        "target": ""
       }
     ]
   },
@@ -11310,7 +11352,7 @@
         "path": "example/InputForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11333,7 +11375,7 @@
         "path": "example/InputFormAutoAnimate.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFormAutoAnimate.vue"
+        "target": ""
       }
     ]
   },
@@ -11350,7 +11392,7 @@
         "path": "example/InputWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -11366,7 +11408,7 @@
         "path": "example/InputWithIcon.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithIcon.vue"
+        "target": ""
       }
     ]
   },
@@ -11383,7 +11425,7 @@
         "path": "example/InputWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -11400,7 +11442,7 @@
         "path": "example/LabelDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "LabelDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11416,7 +11458,7 @@
         "path": "example/LineChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -11432,7 +11474,7 @@
         "path": "example/LineChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11448,7 +11490,7 @@
         "path": "example/LineChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -11464,7 +11506,7 @@
         "path": "example/MenubarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
         "type": "registry:example",
-        "target": "MenubarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11480,7 +11522,7 @@
         "path": "example/NavigationMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "NavigationMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11497,7 +11539,7 @@
         "path": "example/NumberFieldCurrency.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldCurrency.vue"
+        "target": ""
       }
     ]
   },
@@ -11514,7 +11556,7 @@
         "path": "example/NumberFieldDecimal.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDecimal.vue"
+        "target": ""
       }
     ]
   },
@@ -11531,7 +11573,7 @@
         "path": "example/NumberFieldDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11548,7 +11590,7 @@
         "path": "example/NumberFieldDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11571,7 +11613,7 @@
         "path": "example/NumberFieldForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11588,7 +11630,7 @@
         "path": "example/NumberFieldPercentage.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldPercentage.vue"
+        "target": ""
       }
     ]
   },
@@ -11605,7 +11647,7 @@
         "path": "example/PaginationDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
         "type": "registry:example",
-        "target": "PaginationDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11621,7 +11663,7 @@
         "path": "example/PinInputControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -11637,7 +11679,7 @@
         "path": "example/PinInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11653,7 +11695,7 @@
         "path": "example/PinInputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11676,7 +11718,7 @@
         "path": "example/PinInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11692,7 +11734,7 @@
         "path": "example/PinInputSeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11711,7 +11753,7 @@
         "path": "example/PopoverDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "PopoverDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11727,7 +11769,7 @@
         "path": "example/ProgressDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
         "type": "registry:example",
-        "target": "ProgressDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11744,7 +11786,7 @@
         "path": "example/RadioGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11767,7 +11809,7 @@
         "path": "example/RadioGroupForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11783,7 +11825,7 @@
         "path": "example/RangeCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "RangeCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11799,7 +11841,7 @@
         "path": "example/ResizableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11815,7 +11857,7 @@
         "path": "example/ResizableHandleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableHandleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11831,7 +11873,7 @@
         "path": "example/ResizableVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11848,7 +11890,7 @@
         "path": "example/ScrollAreaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11864,7 +11906,7 @@
         "path": "example/ScrollAreaHorizontalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaHorizontalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11880,7 +11922,7 @@
         "path": "example/SelectDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11903,7 +11945,7 @@
         "path": "example/SelectForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11919,7 +11961,7 @@
         "path": "example/SelectScrollable.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectScrollable.vue"
+        "target": ""
       }
     ]
   },
@@ -11935,7 +11977,7 @@
         "path": "example/SeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11954,7 +11996,7 @@
         "path": "example/SheetDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11973,7 +12015,7 @@
         "path": "example/SheetSideDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetSideDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11989,7 +12031,7 @@
         "path": "example/SkeletonCard.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonCard.vue"
+        "target": ""
       }
     ]
   },
@@ -12005,7 +12047,7 @@
         "path": "example/SkeletonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12022,7 +12064,7 @@
         "path": "example/SliderDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "SliderDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12045,7 +12087,7 @@
         "path": "example/SliderForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SliderForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12063,7 +12105,7 @@
         "path": "example/SonnerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12082,7 +12124,7 @@
         "path": "example/SonnerWithDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerWithDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -12098,7 +12140,7 @@
         "path": "example/StepperDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12119,7 +12161,7 @@
         "path": "example/StepperForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12136,7 +12178,7 @@
         "path": "example/StepperHorizental.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperHorizental.vue"
+        "target": ""
       }
     ]
   },
@@ -12153,7 +12195,7 @@
         "path": "example/StepperVertical.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperVertical.vue"
+        "target": ""
       }
     ]
   },
@@ -12170,7 +12212,7 @@
         "path": "example/SwitchDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12193,7 +12235,7 @@
         "path": "example/SwitchForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12209,7 +12251,7 @@
         "path": "example/TableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
         "type": "registry:example",
-        "target": "TableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12229,7 +12271,7 @@
         "path": "example/TabsDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12249,7 +12291,7 @@
         "path": "example/TabsVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12266,7 +12308,7 @@
         "path": "example/TagsInputComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12282,7 +12324,7 @@
         "path": "example/TagsInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12305,7 +12347,7 @@
         "path": "example/TagsInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12321,7 +12363,7 @@
         "path": "example/TextareaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12337,7 +12379,7 @@
         "path": "example/TextareaDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -12360,7 +12402,7 @@
         "path": "example/TextareaForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12377,7 +12419,7 @@
         "path": "example/TextareaWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -12394,7 +12436,7 @@
         "path": "example/TextareaWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -12411,7 +12453,7 @@
         "path": "example/TextareaWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -12428,7 +12470,7 @@
         "path": "example/ToastDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12446,7 +12488,7 @@
         "path": "example/ToastDestructive.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDestructive.vue"
+        "target": ""
       }
     ]
   },
@@ -12463,7 +12505,7 @@
         "path": "example/ToastSimple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastSimple.vue"
+        "target": ""
       }
     ]
   },
@@ -12481,7 +12523,7 @@
         "path": "example/ToastWithAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithAction.vue"
+        "target": ""
       }
     ]
   },
@@ -12498,7 +12540,7 @@
         "path": "example/ToastWithTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithTitle.vue"
+        "target": ""
       }
     ]
   },
@@ -12514,7 +12556,7 @@
         "path": "example/ToggleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12530,7 +12572,7 @@
         "path": "example/ToggleDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12546,7 +12588,7 @@
         "path": "example/ToggleGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12562,7 +12604,7 @@
         "path": "example/ToggleGroupDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12578,7 +12620,7 @@
         "path": "example/ToggleGroupLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12594,7 +12636,7 @@
         "path": "example/ToggleGroupOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12610,7 +12652,7 @@
         "path": "example/ToggleGroupSingleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSingleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12626,7 +12668,7 @@
         "path": "example/ToggleGroupSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12642,7 +12684,7 @@
         "path": "example/ToggleItalicDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12658,7 +12700,7 @@
         "path": "example/ToggleItalicWithTextDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicWithTextDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12674,7 +12716,7 @@
         "path": "example/ToggleLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12690,7 +12732,7 @@
         "path": "example/ToggleSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12707,7 +12749,7 @@
         "path": "example/TooltipDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:example",
-        "target": "TooltipDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12721,7 +12763,7 @@
         "path": "example/TypographyBlockquote.vue",
         "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyBlockquote.vue"
+        "target": ""
       }
     ]
   },
@@ -12735,7 +12777,7 @@
         "path": "example/TypographyDemo.vue",
         "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12749,7 +12791,7 @@
         "path": "example/TypographyH1.vue",
         "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH1.vue"
+        "target": ""
       }
     ]
   },
@@ -12763,7 +12805,7 @@
         "path": "example/TypographyH2.vue",
         "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH2.vue"
+        "target": ""
       }
     ]
   },
@@ -12777,7 +12819,7 @@
         "path": "example/TypographyH3.vue",
         "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH3.vue"
+        "target": ""
       }
     ]
   },
@@ -12791,7 +12833,7 @@
         "path": "example/TypographyH4.vue",
         "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH4.vue"
+        "target": ""
       }
     ]
   },
@@ -12805,7 +12847,7 @@
         "path": "example/TypographyInlineCode.vue",
         "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyInlineCode.vue"
+        "target": ""
       }
     ]
   },
@@ -12819,7 +12861,7 @@
         "path": "example/TypographyLarge.vue",
         "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLarge.vue"
+        "target": ""
       }
     ]
   },
@@ -12833,7 +12875,7 @@
         "path": "example/TypographyLead.vue",
         "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLead.vue"
+        "target": ""
       }
     ]
   },
@@ -12847,7 +12889,7 @@
         "path": "example/TypographyList.vue",
         "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyList.vue"
+        "target": ""
       }
     ]
   },
@@ -12861,7 +12903,7 @@
         "path": "example/TypographyMuted.vue",
         "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyMuted.vue"
+        "target": ""
       }
     ]
   },
@@ -12875,7 +12917,7 @@
         "path": "example/TypographyP.vue",
         "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyP.vue"
+        "target": ""
       }
     ]
   },
@@ -12889,7 +12931,7 @@
         "path": "example/TypographySmall.vue",
         "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographySmall.vue"
+        "target": ""
       }
     ]
   },
@@ -12903,7 +12945,7 @@
         "path": "example/TypographyTable.vue",
         "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyTable.vue"
+        "target": ""
       }
     ]
   },
@@ -12919,7 +12961,7 @@
         "path": "example/VCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "VCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12938,7 +12980,7 @@
         "path": "example/VDatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12963,7 +13005,7 @@
         "path": "example/VDatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12983,7 +13025,7 @@
         "path": "example/VDatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -13002,7 +13044,7 @@
         "path": "example/VDatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -13021,7 +13063,7 @@
         "path": "example/VDateTimePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDateTimePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -13040,7 +13082,7 @@
         "path": "example/VRangePickerWithSlot.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VRangePickerWithSlot.vue"
+        "target": ""
       }
     ]
   },
@@ -13059,7 +13101,7 @@
         "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13078,7 +13120,7 @@
         "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13097,7 +13139,7 @@
         "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13115,7 +13157,7 @@
         "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13138,7 +13180,7 @@
         "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13159,7 +13201,7 @@
         "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13182,7 +13224,7 @@
         "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13203,7 +13245,7 @@
         "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13232,7 +13274,7 @@
         "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard05.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13257,7 +13299,7 @@
         "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard06.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13285,7 +13327,7 @@
         "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard07.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13305,7 +13347,49 @@
         "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar01Page.vue"
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar02/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar02/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -13324,9 +13408,9 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar07Page.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   }
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index af95f0e90..5b7dfaf83 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -2,7 +2,7 @@ import type { Registry, RegistryFiles } from './schema'
 import { readdir, readFile } from 'node:fs/promises'
 import { parseSync } from '@oxc-parser/wasm'
 import { join, resolve } from 'pathe'
-import { compileScript, parse } from 'vue/compiler-sfc'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
 import { type RegistryStyle, styles } from './registry-styles'
 
 // [Dependency, [...PeerDependencies]]
@@ -87,7 +87,7 @@ async function crawlExample(rootPath: string) {
       content: source,
       path: relativePath,
       // style,
-      target: dirent.name,
+      target: '',
       type,
     }
     const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
@@ -134,11 +134,13 @@ async function crawlBlock(rootPath: string) {
     const source = await readFile(filepath, { encoding: 'utf8' })
     const relativePath = join('block', dirent.name)
 
+    const target = 'pages/dashboard/index.vue'
+
     const file = {
       name: dirent.name,
       content: source,
       path: relativePath,
-      target: dirent.name,
+      target,
       type,
     }
     const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
@@ -249,12 +251,11 @@ async function buildBlockRegistry(blockPath: string, blockName: string) {
     const isPage = dirent.name === 'page.vue'
     const type = isPage ? 'registry:page' : 'registry:component'
 
-    // TODO: fix
     const compPath = isPage ? dirent.name : `components/${dirent.name}`
     const filepath = join(blockPath, compPath)
     const relativePath = join('block', blockName, compPath)
     const source = await readFile(filepath, { encoding: 'utf8' })
-    const target = isPage ? `${blockName}Page.vue` : dirent.name
+    const target = isPage ? `pages/dashboard/index.vue` : ''
 
     files.push({ content: source, path: relativePath, type, target })
 
@@ -320,3 +321,33 @@ async function getFileDependencies(filename: string, sourceCode: string) {
 
   return { registryDependencies, dependencies }
 }
+
+export async function getBlockMetadata(filename: string, sourceCode: string) {
+  const metadata = {
+    description: null as string | null,
+    iframeHeight: null as string | null,
+    containerClass: null as string | null,
+  }
+
+  if (filename.endsWith('.vue')) {
+    const { descriptor } = parse(sourceCode, { filename })
+    if (descriptor.script?.content) {
+      const ast = compileScript(descriptor, { id: '' })
+      walk(ast.scriptAst, {
+        enter(node: any) {
+          const declaration = node.declaration
+          // Check if the declaration is a variable declaration
+          if (declaration?.type === 'VariableDeclaration') {
+            // Extract variable names and their values
+            declaration.declarations.forEach((decl: any) => {
+              // @ts-expect-error ignore missing type
+              metadata[decl.id.name] = decl.init ? decl.init.value : null
+            })
+          }
+        },
+      })
+    }
+  }
+
+  return metadata
+}
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue
new file mode 100644
index 000000000..a7218884e
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/default/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent class="gap-0">
+      <Collapsible
+        v-for="item in data.navMain"
+        :key="item.title"
+        :title="item.title"
+        default-open
+        class="group/collapsible"
+      >
+        <SidebarGroup>
+          <SidebarGroupLabel
+            as-child
+            class="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <CollapsibleTrigger>
+              {{ item.title }}
+              <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+                  <SidebarMenuButton as-child :is-active="childItem.isActive">
+                    <a :href="item.url">{{ childItem.title }}</a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </SidebarGroup>
+      </Collapsible>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue
new file mode 100644
index 000000000..b88fa9e30
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/default/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/default/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
new file mode 100644
index 000000000..6bb7c4cde
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/default/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/page.vue b/apps/www/src/registry/default/block/Sidebar02/page.vue
new file mode 100644
index 000000000..b79e55a6e
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/page.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible sections.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="i in 24"
+          :key="i"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/page.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
index e62e8d784..4da722c71 100644
--- a/apps/www/src/registry/default/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/page.vue
@@ -5,7 +5,7 @@ export const iframeHeight = '800px'
 export const containerClass = 'w-full h-full'
 </script>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import {
   Avatar,
   AvatarFallback,
diff --git a/apps/www/src/registry/default/ui/sidebar/index.ts b/apps/www/src/registry/default/ui/sidebar/index.ts
index b137821cd..0b275a96f 100644
--- a/apps/www/src/registry/default/ui/sidebar/index.ts
+++ b/apps/www/src/registry/default/ui/sidebar/index.ts
@@ -1,5 +1,13 @@
+import type { HTMLAttributes } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
 export { default as Sidebar } from './Sidebar.vue'
 export { default as SidebarContent } from './SidebarContent.vue'
 export { default as SidebarFooter } from './SidebarFooter.vue'
diff --git a/apps/www/src/registry/default/ui/toggle/index.ts b/apps/www/src/registry/default/ui/toggle/index.ts
index 75877ad03..7af28f5e9 100644
--- a/apps/www/src/registry/default/ui/toggle/index.ts
+++ b/apps/www/src/registry/default/ui/toggle/index.ts
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ export const toggleVariants = cva(
           'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5',
+        default: 'h-10 px-3 min-w-10',
+        sm: 'h-9 px-2.5 min-w-9',
+        lg: 'h-11 px-5 min-w-11',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue
new file mode 100644
index 000000000..df0b28e89
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent class="gap-0">
+      <Collapsible
+        v-for="item in data.navMain"
+        :key="item.title"
+        :title="item.title"
+        default-open
+        class="group/collapsible"
+      >
+        <SidebarGroup>
+          <SidebarGroupLabel
+            as-child
+            class="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <CollapsibleTrigger>
+              {{ item.title }}
+              <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+                  <SidebarMenuButton as-child :is-active="childItem.isActive">
+                    <a :href="item.url">{{ childItem.title }}</a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </SidebarGroup>
+      </Collapsible>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue
new file mode 100644
index 000000000..bc39a8f4a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
new file mode 100644
index 000000000..00d974329
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/page.vue b/apps/www/src/registry/new-york/block/Sidebar02/page.vue
new file mode 100644
index 000000000..71cd1b6c0
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/page.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible sections.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="i in 24"
+          :key="i"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/page.vue b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
index 0aa299b4f..5b1990fb2 100644
--- a/apps/www/src/registry/new-york/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
@@ -5,7 +5,7 @@ export const iframeHeight = '800px'
 export const containerClass = 'w-full h-full'
 </script>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import {
   Avatar,
   AvatarFallback,
diff --git a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
index 2d785354a..4b4e5577c 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { SidebarProps } from '.'
 import { cn } from '@/lib/utils'
 import Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'
 import SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'
@@ -9,12 +9,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<{
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
-}>(), {
+const props = withDefaults(defineProps<SidebarProps>(), {
   side: 'left',
   variant: 'sidebar',
   collapsible: 'offcanvas',
diff --git a/apps/www/src/registry/new-york/ui/sidebar/index.ts b/apps/www/src/registry/new-york/ui/sidebar/index.ts
index b137821cd..0b275a96f 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/index.ts
+++ b/apps/www/src/registry/new-york/ui/sidebar/index.ts
@@ -1,5 +1,13 @@
+import type { HTMLAttributes } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
 export { default as Sidebar } from './Sidebar.vue'
 export { default as SidebarContent } from './SidebarContent.vue'
 export { default as SidebarFooter } from './SidebarFooter.vue'
diff --git a/apps/www/src/registry/new-york/ui/toggle/index.ts b/apps/www/src/registry/new-york/ui/toggle/index.ts
index 7bc499fa8..97ddc957e 100644
--- a/apps/www/src/registry/new-york/ui/toggle/index.ts
+++ b/apps/www/src/registry/new-york/ui/toggle/index.ts
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ export const toggleVariants = cva(
           'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
-        sm: 'h-8 px-2',
-        lg: 'h-10 px-3',
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/registry/schema.ts b/apps/www/src/registry/schema.ts
index 4dfbf2fd4..0d217cc44 100644
--- a/apps/www/src/registry/schema.ts
+++ b/apps/www/src/registry/schema.ts
@@ -76,12 +76,16 @@ export const blockSchema = registryEntrySchema.extend({
   type: z.literal('registry:block'),
   style: z.enum(['default', 'new-york']),
   component: z.any(),
+  raw: z.any(),
   container: z
     .object({
       height: z.string().nullish(),
       className: z.string().nullish(),
     })
     .optional(),
+  files: z.array(registryItemFileSchema.extend({
+    raw: z.any(),
+  })).optional(),
   code: z.string(),
   highlightedCode: z.string(),
 })
diff --git a/eslint.config.js b/eslint.config.js
index 899451111..f8feecd61 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,6 +6,7 @@ export default antfu(
     typescript: true,
     ignores: [
       '**/__registry__/index.ts',
+      '**/__registry__/block.ts',
     ],
   },
   {

From 360e55fd3d34bd8a5345c7c308ef232f57571c13 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 25 Nov 2024 12:00:15 +0800
Subject: [PATCH 18/39] chore: add sidebars block

---
 .../theme/components/BlockViewerFileTree.vue  |   2 +-
 .../.vitepress/theme/components/Blocks.vue    |  34 +-
 .../theme/components/CustomizerCode.vue       |   4 +-
 .../theme/components/InlineThemePicker.vue    |  33 +-
 .../theme/components/ThemeCustomizer.vue      | 190 ++--
 .../.vitepress/theme/layout/ThemingLayout.vue |  19 +-
 apps/www/__registry__/block.ts                | 864 +++++++++++++++++-
 apps/www/__registry__/index.ts                | 728 ++++++++++++++-
 .../public/r/styles/default/Sidebar01.json    |  30 +-
 .../public/r/styles/default/Sidebar02.json    |   4 +-
 .../public/r/styles/default/Sidebar03.json    |  25 +
 .../public/r/styles/default/Sidebar04.json    |  25 +
 .../public/r/styles/default/Sidebar05.json    |  34 +
 .../public/r/styles/default/Sidebar06.json    |  44 +
 .../public/r/styles/default/Sidebar07.json    |  43 +-
 .../public/r/styles/default/Sidebar08.json    |  56 ++
 .../public/r/styles/default/Sidebar09.json    |  36 +
 .../src/public/r/styles/default/sidebar.json  |   2 +-
 .../public/r/styles/new-york/Sidebar01.json   |  30 +-
 .../public/r/styles/new-york/Sidebar02.json   |   2 +-
 .../public/r/styles/new-york/Sidebar03.json   |  25 +
 .../public/r/styles/new-york/Sidebar04.json   |  25 +
 .../public/r/styles/new-york/Sidebar05.json   |  34 +
 .../public/r/styles/new-york/Sidebar06.json   |  44 +
 .../public/r/styles/new-york/Sidebar07.json   |  43 +-
 .../public/r/styles/new-york/Sidebar08.json   |  56 ++
 .../public/r/styles/new-york/Sidebar09.json   |  36 +
 .../src/public/r/styles/new-york/sidebar.json |   4 +-
 apps/www/src/public/r/temp.json               | 598 +++++++++++-
 .../block/Sidebar01/components/AppSidebar.vue | 179 ++++
 .../block/Sidebar01/components/SearchForm.vue |  27 +
 .../Sidebar01/components/VersionSwitcher.vue  |  61 ++
 .../registry/default/block/Sidebar01/page.vue | 171 +---
 .../Sidebar02/components/VersionSwitcher.vue  |   2 +-
 .../block/Sidebar03/components/AppSidebar.vue | 204 +++++
 .../registry/default/block/Sidebar03/page.vue |  57 ++
 .../block/Sidebar04/components/AppSidebar.vue | 204 +++++
 .../registry/default/block/Sidebar04/page.vue |  55 ++
 .../block/Sidebar05/components/AppSidebar.vue | 224 +++++
 .../block/Sidebar05/components/SearchForm.vue |  27 +
 .../registry/default/block/Sidebar05/page.vue |  55 ++
 .../block/Sidebar06/components/AppSidebar.vue | 181 ++++
 .../block/Sidebar06/components/NavMain.vue    |  58 ++
 .../Sidebar06/components/SidebarOptInForm.vue |  35 +
 .../registry/default/block/Sidebar06/page.vue |  55 ++
 .../block/Sidebar07/components/AppSidebar.vue | 178 ++++
 .../block/Sidebar07/components/NavMain.vue    |  67 ++
 .../Sidebar07/components/NavProjects.vue      |  85 ++
 .../block/Sidebar07/components/NavUser.vue    | 116 +++
 .../Sidebar07/components/TeamSwitcher.vue     |  89 ++
 .../registry/default/block/Sidebar07/page.vue | 414 +--------
 .../block/Sidebar08/components/AppSidebar.vue | 187 ++++
 .../block/Sidebar08/components/NavMain.vue    |  69 ++
 .../Sidebar08/components/NavProjects.vue      |  85 ++
 .../Sidebar08/components/NavSecondary.vue     |  36 +
 .../block/Sidebar08/components/NavUser.vue    | 116 +++
 .../registry/default/block/Sidebar08/page.vue |  57 ++
 .../block/Sidebar09/components/AppSidebar.vue | 251 +++++
 .../block/Sidebar09/components/NavUser.vue    | 116 +++
 .../registry/default/block/Sidebar09/page.vue |  58 ++
 .../default/ui/sidebar/SidebarProvider.vue    |   1 +
 .../block/Sidebar01/components/AppSidebar.vue | 179 ++++
 .../block/Sidebar01/components/SearchForm.vue |  27 +
 .../Sidebar01/components/VersionSwitcher.vue  |  61 ++
 .../new-york/block/Sidebar01/page.vue         | 165 +---
 .../Sidebar02/components/VersionSwitcher.vue  |   2 +-
 .../block/Sidebar03/components/AppSidebar.vue | 204 +++++
 .../new-york/block/Sidebar03/page.vue         |  57 ++
 .../block/Sidebar04/components/AppSidebar.vue | 204 +++++
 .../new-york/block/Sidebar04/page.vue         |  55 ++
 .../block/Sidebar05/components/AppSidebar.vue | 224 +++++
 .../block/Sidebar05/components/SearchForm.vue |  27 +
 .../new-york/block/Sidebar05/page.vue         |  55 ++
 .../block/Sidebar06/components/AppSidebar.vue | 181 ++++
 .../block/Sidebar06/components/NavMain.vue    |  58 ++
 .../Sidebar06/components/SidebarOptInForm.vue |  35 +
 .../new-york/block/Sidebar06/page.vue         |  55 ++
 .../block/Sidebar07/components/AppSidebar.vue | 178 ++++
 .../block/Sidebar07/components/NavMain.vue    |  67 ++
 .../Sidebar07/components/NavProjects.vue      |  85 ++
 .../block/Sidebar07/components/NavUser.vue    | 116 +++
 .../Sidebar07/components/TeamSwitcher.vue     |  89 ++
 .../new-york/block/Sidebar07/page.vue         | 408 +--------
 .../block/Sidebar08/components/AppSidebar.vue | 187 ++++
 .../block/Sidebar08/components/NavMain.vue    |  69 ++
 .../Sidebar08/components/NavProjects.vue      |  85 ++
 .../Sidebar08/components/NavSecondary.vue     |  36 +
 .../block/Sidebar08/components/NavUser.vue    | 116 +++
 .../new-york/block/Sidebar08/page.vue         |  57 ++
 .../block/Sidebar09/components/AppSidebar.vue | 252 +++++
 .../block/Sidebar09/components/NavUser.vue    | 116 +++
 .../new-york/block/Sidebar09/page.vue         |  58 ++
 .../new-york/ui/sidebar/SidebarProvider.vue   |   1 +
 93 files changed, 8757 insertions(+), 1342 deletions(-)
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar03.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar04.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar05.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar06.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar08.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar09.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar03.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar04.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar05.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar06.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar08.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar09.json
 create mode 100644 apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar03/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar04/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar05/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar06/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar08/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar09/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar01/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar01/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar03/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar03/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar04/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar04/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar05/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar05/components/SearchForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar05/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar06/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar06/components/NavMain.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar06/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar07/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar07/components/NavMain.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar07/components/NavProjects.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/components/NavMain.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/components/NavProjects.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar08/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar09/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar09/page.vue

diff --git a/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
index f1703726f..05387c13a 100644
--- a/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
+++ b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
@@ -114,7 +114,7 @@ watch(flattenFiles, (n) => {
           v-bind="item.bind"
           as-child
           @select="(ev) => {
-            if (item.hasChildren)
+            if (item.hasChildren || ev.detail.isSelected)
               ev.preventDefault()
           }"
         >
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 0e498e380..c2cdb5292 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/registry/new-york/ui/button'
-import GitHubIcon from '~icons/radix-icons/github-logo'
+import { Button } from '@/registry/new-york/ui/button'
 import { Index } from '../../../__registry__'
 import Announcement from '../components/Announcement.vue'
 import PageAction from '../components/PageAction.vue'
@@ -13,7 +11,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
 // const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
-const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
+const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block' && i.name.includes('Sidebar')).map((i: any) => i.name)
 </script>
 
 <template>
@@ -25,23 +23,17 @@ const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'r
     </PageHeaderDescription>
 
     <PageAction>
-      <a
-        href="/blocks.html#blocks"
-        :class="cn(buttonVariants(), 'rounded-[6px]')"
-      >
-        Browse
-      </a>
-      <a
-        href="https://github.com/unovue/shadcn-vue"
-        target="_blank"
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'rounded-[6px]',
-        )"
-      >
-        <GitHubIcon class="mr-2 h-4 w-4" />
-        GitHub
-      </a>
+      <Button as-child size="sm">
+        <a href="#blocks">Browse Blocks</a>
+      </Button>
+      <Button as-child variant="ghost" size="sm">
+        <a
+          href="https://github.com/shadcn-ui/ui/discussions/new?category=blocks-request"
+          target="_blank"
+        >
+          Request a block
+        </a>
+      </Button>
     </PageAction>
   </PageHeader>
 
diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index c180c5e7b..0b9c1eea6 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { themes } from '@/registry/registry-themes'
+import { baseColors } from '@/registry/registry-base-colors'
 import { useConfigStore } from '@/stores/config'
 import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
@@ -9,7 +9,7 @@ import { computed, ref } from 'vue'
 
 const { theme, config } = useConfigStore()
 
-const activeTheme = computed(() => themes.find(i => i.name === theme.value))
+const activeTheme = computed(() => baseColors.find(i => i.name === theme.value))
 
 const { copy, copied } = useClipboard()
 
diff --git a/apps/www/.vitepress/theme/components/InlineThemePicker.vue b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
index 2dc50dcd2..ac0b62acb 100644
--- a/apps/www/.vitepress/theme/components/InlineThemePicker.vue
+++ b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import type { Color } from '../types/colors'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
-import { colors } from '@/registry/registry-colors'
+import { baseColors } from '@/registry/registry-base-colors'
 import { useConfigStore } from '@/stores/config'
-import RadixIconsCheck from '~icons/radix-icons/check'
-
-defineProps<{
-  allColors: Color[]
-}>()
+import { Check } from 'lucide-vue-next'
+import { useData } from 'vitepress'
 
 const { theme, setTheme } = useConfigStore()
+const { isDark } = useData()
+
+const pickedColors = baseColors.filter((color, index) => [0, 6, 8, 9, 10].includes(index))
 </script>
 
 <template>
   <div>
     <TooltipProvider
-      v-for="(color, index) in allColors.slice(0, 5)"
+      v-for="(color, index) in pickedColors"
       :key="index"
     >
       <Tooltip>
@@ -24,18 +23,22 @@ const { theme, setTheme } = useConfigStore()
             :key="index"
             class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-border text-xs"
             :class="
-              color === theme
+              color.name === theme
                 ? 'border-primary'
                 : 'border-transparent'
             "
-            @click="setTheme(color)"
+            :style="{
+              '--theme-primary': `hsl(${
+                color?.activeColor[isDark ? 'dark' : 'light']
+              })`,
+            }"
+            @click="setTheme(color.name)"
           >
             <span
-              class="flex h-6 w-6 items-center justify-center rounded-full"
-              :style="{ backgroundColor: colors[color][6].rgb }"
+              class="flex h-6 w-6 items-center justify-center rounded-full  bg-[--theme-primary]"
             >
-              <RadixIconsCheck
-                v-if="color === theme"
+              <Check
+                v-if="color.name === theme"
                 class="h-4 w-4 text-white"
               />
             </span>
@@ -46,7 +49,7 @@ const { theme, setTheme } = useConfigStore()
           :side-offset="1"
           class="capitalize bg-zinc-900 text-zinc-50"
         >
-          {{ allColors[index] }}
+          {{ color.label }}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
diff --git a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
index 8e8d66914..9c0430b6a 100644
--- a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
@@ -1,105 +1,121 @@
 <script lang="ts" setup>
-import type { Color } from '../types/colors'
 import { Button } from '@/registry/new-york/ui/button'
 import { Label } from '@/registry/new-york/ui/label'
-import { colors } from '@/registry/registry-colors'
+import { baseColors } from '@/registry/registry-base-colors'
 import { RADII, useConfigStore } from '@/stores/config'
-import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
+import { Check, Moon, Repeat, Sun } from 'lucide-vue-next'
 import { useData } from 'vitepress'
 
-defineProps<{
-  allColors: Color[]
-}>()
-
-const { theme, radius, setRadius, setTheme } = useConfigStore()
+const { config, theme, radius, setRadius, setTheme } = useConfigStore()
 const { isDark } = useData()
 </script>
 
 <template>
-  <div class="p-4">
-    <div class="grid space-y-1">
-      <h1 class="text-md text-foreground font-semibold">
-        Customize
-      </h1>
-      <p class="text-xs text-muted-foreground">
-        Pick a style and color for your components.
-      </p>
+  <div class="flex flex-col space-y-4 md:space-y-6">
+    <div class="flex items-start pt-4 md:pt-0">
+      <div class="space-y-1 pr-2">
+        <div class="font-semibold leading-none tracking-tight">
+          Theme Customizer
+        </div>
+        <div class="text-xs text-muted-foreground">
+          Customize your components colors.
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        class="ml-auto rounded-[0.5rem]"
+        @click="() => {
+          config = {
+            ...config,
+            theme: 'zinc',
+            radius: 0.5,
+          }
+        }"
+      >
+        <Repeat />
+        <span class="sr-only">Reset</span>
+      </Button>
     </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="color" class="text-xs"> Color </Label>
-      <div class="grid grid-cols-3 gap-2 py-1.5">
-        <Button
-          v-for="(color, index) in allColors"
-          :key="index"
-          variant="outline"
-          class="h-8 justify-start px-3"
-          :class="
-            color === theme
-              ? 'border-foreground border-2'
-              : ''
-          "
-          @click="setTheme(color)"
-        >
-          <span
-            class="h-5 w-5 rounded-full flex items-center justify-center shrink-0"
-            :style="{ backgroundColor: colors[color][7].rgb }"
+    <div class="flex flex-1 flex-col space-y-4 md:space-y-6">
+      <div class="space-y-1.5 ">
+        <Label for="color" class="text-xs"> Color </Label>
+        <div class="grid grid-cols-3 gap-2">
+          <Button
+            v-for="(color, index) in baseColors"
+            :key="index"
+            variant="outline"
+            class="h-8 justify-start px-3"
+            :class="
+              color.name === theme
+                ? 'border-foreground border-2'
+                : ''
+            "
+            :style="{
+              '--theme-primary': `hsl(${
+                color?.activeColor[isDark ? 'dark' : 'light']
+              })`,
+            }"
+            @click="setTheme(color.name)"
           >
-            <RadixIconsCheck
-              v-if="color === theme"
-              class="h-3 w-3 text-white"
-            />
-          </span>
-          <span class="ml-2 text-xs capitalize">
-            {{ color }}
-          </span>
-        </Button>
+            <span
+              class="h-5 w-5 rounded-full flex items-center justify-center shrink-0 bg-[--theme-primary]"
+            >
+              <Check
+                v-if="color.name === theme"
+                class="h-3 w-3 text-white"
+              />
+            </span>
+            <span class="ml-2 text-xs capitalize">
+              {{ color.name }}
+            </span>
+          </Button>
+        </div>
       </div>
-    </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="radius" class="text-xs"> Radius </Label>
-      <div class="grid grid-cols-5 gap-2 py-1.5">
-        <Button
-          v-for="(r, index) in RADII"
-          :key="index"
-          variant="outline"
-          class="h-8 justify-center px-3"
-          :class="
-            r === radius
-              ? 'border-foreground border-2'
-              : ''
-          "
-          @click="setRadius(r)"
-        >
-          <span class="text-xs">
-            {{ r }}
-          </span>
-        </Button>
+      <div class="space-y-1.5 ">
+        <Label for="radius" class="text-xs"> Radius </Label>
+        <div class="grid grid-cols-5 gap-2">
+          <Button
+            v-for="(r, index) in RADII"
+            :key="index"
+            variant="outline"
+            class="h-8 justify-center px-3"
+            :class="
+              r === radius
+                ? 'border-foreground border-2'
+                : ''
+            "
+            @click="setRadius(r)"
+          >
+            <span class="text-xs">
+              {{ r }}
+            </span>
+          </Button>
+        </div>
       </div>
-    </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="theme" class="text-xs"> Theme </Label>
+      <div class="space-y-1.5 ">
+        <Label for="theme" class="text-xs"> Theme </Label>
 
-      <div class="flex space-x-2 py-1.5">
-        <Button
-          class="h-8"
-          variant="outline"
-          :class="{ 'border-2 border-foreground': !isDark }"
-          @click="isDark = false"
-        >
-          <RadixIconsSun class="w-4 h-4 mr-2" />
-          <span class="text-xs">Light</span>
-        </Button>
-        <Button
-          class="h-8"
-          variant="outline"
-          :class="{ 'border-2 border-foreground': isDark }"
-          @click="isDark = true"
-        >
-          <RadixIconsMoon class="w-4 h-4 mr-2" />
-          <span class="text-xs">Dark</span>
-        </Button>
+        <div class="flex space-x-2">
+          <Button
+            class="h-8"
+            variant="outline"
+            :class="{ 'border-2 border-foreground': !isDark }"
+            @click="isDark = false"
+          >
+            <Sun class="w-4 h-4 mr-2" />
+            <span class="text-xs">Light</span>
+          </Button>
+          <Button
+            class="h-8"
+            variant="outline"
+            :class="{ 'border-2 border-foreground': isDark }"
+            @click="isDark = true"
+          >
+            <Moon class="w-4 h-4 mr-2" />
+            <span class="text-xs">Dark</span>
+          </Button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index 00ef9534f..7935917d8 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -5,8 +5,8 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
 import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { useConfigStore } from '@/stores/config'
-import { Paintbrush } from 'lucide-vue-next'
 import { onMounted, watch } from 'vue'
+import Announcement from '../components/Announcement.vue'
 import CustomizerCode from '../components/CustomizerCode.vue'
 import InlineThemePicker from '../components/InlineThemePicker.vue'
 import PageAction from '../components/PageAction.vue'
@@ -56,6 +56,7 @@ watch(radius, (radius) => {
 <template>
   <div>
     <PageHeader>
+      <Announcement />
       <PageHeaderHeading class="hidden md:block">
         Add colors. Make it yours.
       </PageHeaderHeading>
@@ -67,35 +68,33 @@ watch(radius, (radius) => {
       </PageHeaderDescription>
 
       <PageAction>
-        <InlineThemePicker class="gap-x-1 me-4 hidden lg:flex" :all-colors="allColors" />
+        <InlineThemePicker class="gap-x-1 me-4 hidden lg:flex" />
 
         <Drawer>
           <DrawerTrigger as-child>
-            <Button variant="outline" class="md:hidden h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
+            <Button size="sm" class="md:hidden">
               Customize
             </Button>
           </DrawerTrigger>
           <DrawerContent class="p-6 pt-0">
-            <ThemeCustomizer :all-colors="allColors" />
+            <ThemeCustomizer />
           </DrawerContent>
         </Drawer>
 
         <Popover>
           <PopoverTrigger as-child>
-            <Button variant="outline" class="hidden md:flex h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
+            <Button size="sm">
               Customize
             </Button>
           </PopoverTrigger>
-          <PopoverContent :side-offset="8" align="end" class="w-96">
-            <ThemeCustomizer :all-colors="allColors" />
+          <PopoverContent :side-offset="8" :align-offset="-76" align="end" class="w-[380px] p-6">
+            <ThemeCustomizer />
           </PopoverContent>
         </Popover>
 
         <Dialog>
           <DialogTrigger as-child>
-            <Button class="h-9 ml-2 rounded-[0.5rem]">
+            <Button variant="ghost" size="sm">
               Copy code
             </Button>
           </DialogTrigger>
diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
index ea878ec11..e0a3a5333 100644
--- a/apps/www/__registry__/block.ts
+++ b/apps/www/__registry__/block.ts
@@ -195,12 +195,27 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
       raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
@@ -240,16 +255,144 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar03/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar03/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar03/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar03/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar04/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar04/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar04/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar04/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/new-york/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar05/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar05/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar05/components/SearchForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar05/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar05/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/new-york/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar06/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar06/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar06/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
       raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
@@ -257,6 +400,75 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar08/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar08/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar08/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar09/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar09/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar09/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar09/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar09/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -448,12 +660,27 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
       raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
@@ -493,16 +720,144 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar03/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar03/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar03/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar03/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar04/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar04/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar04/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar04/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/new-york/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar05/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar05/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar05/components/SearchForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar05/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar05/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/new-york/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar06/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar06/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar06/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
       raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
@@ -510,6 +865,75 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar08/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar08/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar08/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar08/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar09/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar09/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar09/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar09/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar09/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },  "default": {
     "Authentication01": {
       name: "Authentication01",
@@ -702,12 +1126,27 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/VersionSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
       raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
@@ -747,16 +1186,144 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar03/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar03/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar03/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar03/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar04/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar04/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar04/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar04/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/default/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar05/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar05/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar05/components/SearchForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar05/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar05/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/default/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar06/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar06/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar06/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
       raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
@@ -764,6 +1331,75 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar08/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar08/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar08/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar09/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar09/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar09/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar09/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar09/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -955,12 +1591,27 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar01/components/VersionSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
       raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
@@ -1000,16 +1651,144 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar03/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar03/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar03/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar03/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar04/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar04/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar04/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar04/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/default/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar05/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar05/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar05/components/SearchForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar05/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar05/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/default/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar06/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar06/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar06/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue",
         raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar07/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
       raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
@@ -1017,6 +1796,75 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar08/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavProjects.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar08/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar08/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar08/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar09/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar09/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar09/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar09/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar09/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },
 }
 
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 8d0b2358b..96a5af2a6 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5239,11 +5239,23 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
       source: "",
@@ -5277,21 +5289,187 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar03/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar04/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/new-york/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar05/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/new-york/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar06/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar08/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar09/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -10512,11 +10690,23 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
       source: "",
@@ -10550,21 +10740,187 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar03/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar04/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/new-york/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar05/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/new-york/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar06/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar08/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar09/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },  "default": {
     "utils": {
       name: "utils",
@@ -15801,11 +16157,23 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
       source: "",
@@ -15839,21 +16207,187 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar03/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar04/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/default/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar05/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/default/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar06/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar08/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar09/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -21074,11 +21608,23 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar01/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar01/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar01/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
       source: "",
@@ -21112,21 +21658,187 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar03": {
+      name: "Sidebar03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar03/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar03/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar03/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar04": {
+      name: "Sidebar04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar04/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar04/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar04/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar05": {
+      name: "Sidebar05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      files: [{
+        path: "registry/default/block/Sidebar05/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar05/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar05/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar05/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar06": {
+      name: "Sidebar06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      files: [{
+        path: "registry/default/block/Sidebar06/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar06/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar06/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar06/components/SidebarOptInForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar06/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar07": {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar07/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar07/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
+    "Sidebar08": {
+      name: "Sidebar08",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/default/block/Sidebar08/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar08/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavProjects.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar08/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar08/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar09": {
+      name: "Sidebar09",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar09/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar09/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar09/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar09/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },
 }
 
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index b6f9f3973..d0599e611 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -3,18 +3,40 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
+    "AppSidebar.vue",
     "breadcrumb",
-    "dropdown-menu",
-    "label",
     "separator",
-    "sidebar"
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
   ],
   "files": [
     {
       "path": "block/Sidebar01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar01/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar01/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar01/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
index d95cc144a..4e8921b3c 100644
--- a/apps/www/src/public/r/styles/default/Sidebar02.json
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -28,13 +28,13 @@
     },
     {
       "path": "block/Sidebar02/components/SearchForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar03.json b/apps/www/src/public/r/styles/default/Sidebar03.json
new file mode 100644
index 000000000..12881329a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -0,0 +1,25 @@
+{
+  "name": "Sidebar03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar03/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar03/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar04.json b/apps/www/src/public/r/styles/default/Sidebar04.json
new file mode 100644
index 000000000..4fdfff4de
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar04.json
@@ -0,0 +1,25 @@
+{
+  "name": "Sidebar04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar04/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar04/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar05.json b/apps/www/src/public/r/styles/default/Sidebar05.json
new file mode 100644
index 000000000..7cb2478e6
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar05.json
@@ -0,0 +1,34 @@
+{
+  "name": "Sidebar05",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "collapsible",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar05/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar05/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar05/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar06.json b/apps/www/src/public/r/styles/default/Sidebar06.json
new file mode 100644
index 000000000..d8f42d8a7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar06.json
@@ -0,0 +1,44 @@
+{
+  "name": "Sidebar06",
+  "type": "registry:block",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "SidebarOptInForm.vue",
+    "dropdown-menu",
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar06/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar06/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar06/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar06/components/SidebarOptInForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index 9c720ddea..d2d01970d 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -3,19 +3,54 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "avatar",
+    "AppSidebar.vue",
     "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "NavProjects.vue",
+    "NavUser.vue",
+    "TeamSwitcher.vue",
     "collapsible",
     "dropdown-menu",
-    "separator",
-    "sidebar"
+    "avatar"
   ],
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar07/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavProjects.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar08.json b/apps/www/src/public/r/styles/default/Sidebar08.json
new file mode 100644
index 000000000..b24f13546
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar08.json
@@ -0,0 +1,56 @@
+{
+  "name": "Sidebar08",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "NavProjects.vue",
+    "NavSecondary.vue",
+    "NavUser.vue",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar08/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar08/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavProjects.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar09.json b/apps/www/src/public/r/styles/default/Sidebar09.json
new file mode 100644
index 000000000..4e6aa941f
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar09.json
@@ -0,0 +1,36 @@
+{
+  "name": "Sidebar09",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavUser.vue",
+    "label",
+    "switch",
+    "avatar",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar09/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar09/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar09/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index e8161f9b2..bfc51e819 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -139,7 +139,7 @@
     },
     {
       "path": "ui/sidebar/SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarProvider.vue"
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index bde54ab89..d0599e611 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -3,18 +3,40 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
+    "AppSidebar.vue",
     "breadcrumb",
-    "dropdown-menu",
-    "label",
     "separator",
-    "sidebar"
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
   ],
   "files": [
     {
       "path": "block/Sidebar01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar01/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar01/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar01/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
index cea0d958d..a4c37bbf1 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar02.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar03.json b/apps/www/src/public/r/styles/new-york/Sidebar03.json
new file mode 100644
index 000000000..12881329a
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar03.json
@@ -0,0 +1,25 @@
+{
+  "name": "Sidebar03",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar03/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar03/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar04.json b/apps/www/src/public/r/styles/new-york/Sidebar04.json
new file mode 100644
index 000000000..4fdfff4de
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar04.json
@@ -0,0 +1,25 @@
+{
+  "name": "Sidebar04",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar04/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar04/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar05.json b/apps/www/src/public/r/styles/new-york/Sidebar05.json
new file mode 100644
index 000000000..34600cabb
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar05.json
@@ -0,0 +1,34 @@
+{
+  "name": "Sidebar05",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "collapsible",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar05/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar05/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar05/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar05/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar06.json b/apps/www/src/public/r/styles/new-york/Sidebar06.json
new file mode 100644
index 000000000..d8f42d8a7
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar06.json
@@ -0,0 +1,44 @@
+{
+  "name": "Sidebar06",
+  "type": "registry:block",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "SidebarOptInForm.vue",
+    "dropdown-menu",
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar06/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar06/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar06/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar06/components/SidebarOptInForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index b50632586..d2d01970d 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -3,19 +3,54 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "avatar",
+    "AppSidebar.vue",
     "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "NavProjects.vue",
+    "NavUser.vue",
+    "TeamSwitcher.vue",
     "collapsible",
     "dropdown-menu",
-    "separator",
-    "sidebar"
+    "avatar"
   ],
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar07/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavProjects.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar07/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar08.json b/apps/www/src/public/r/styles/new-york/Sidebar08.json
new file mode 100644
index 000000000..b24f13546
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar08.json
@@ -0,0 +1,56 @@
+{
+  "name": "Sidebar08",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavMain.vue",
+    "NavProjects.vue",
+    "NavSecondary.vue",
+    "NavUser.vue",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar08/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar08/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavProjects.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar08/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar09.json b/apps/www/src/public/r/styles/new-york/Sidebar09.json
new file mode 100644
index 000000000..88f206b63
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar09.json
@@ -0,0 +1,36 @@
+{
+  "name": "Sidebar09",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavUser.vue",
+    "label",
+    "switch",
+    "avatar",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar09/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar09/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar09/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index f6f268d90..89148bf68 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -139,7 +139,7 @@
     },
     {
       "path": "ui/sidebar/SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarProvider.vue"
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 873fbe6c1..dbeef8def 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -2297,7 +2297,7 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2417,7 +2417,7 @@
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarProvider.vue"
       },
@@ -6722,18 +6722,40 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
+      "AppSidebar.vue",
       "breadcrumb",
-      "dropdown-menu",
-      "label",
       "separator",
-      "sidebar"
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
     ],
     "files": [
       {
         "path": "block/Sidebar01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar01/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar01/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar01/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -6773,30 +6795,285 @@
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
     ]
   },
   {
-    "name": "Sidebar07",
+    "name": "Sidebar03",
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "avatar",
+      "AppSidebar.vue",
       "breadcrumb",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar03/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar03/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar04/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar04/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
       "collapsible",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar05/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar05/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar05/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar05/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar06",
+    "type": "registry:block",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavMain.vue",
+      "SidebarOptInForm.vue",
       "dropdown-menu",
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar06/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar06/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar06/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar06/components/SidebarOptInForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
       "separator",
-      "sidebar"
+      "sidebar",
+      "NavMain.vue",
+      "NavProjects.vue",
+      "NavUser.vue",
+      "TeamSwitcher.vue",
+      "collapsible",
+      "dropdown-menu",
+      "avatar"
     ],
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar07/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavProjects.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar08",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavMain.vue",
+      "NavProjects.vue",
+      "NavSecondary.vue",
+      "NavUser.vue",
+      "collapsible",
+      "dropdown-menu",
+      "avatar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar08/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar08/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavProjects.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar09",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavUser.vue",
+      "label",
+      "switch",
+      "avatar",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar09/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar09/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar09/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -9030,7 +9307,7 @@
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarProvider.vue"
       },
@@ -13336,18 +13613,40 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
+      "AppSidebar.vue",
       "breadcrumb",
-      "dropdown-menu",
-      "label",
       "separator",
-      "sidebar"
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
     ],
     "files": [
       {
         "path": "block/Sidebar01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar01/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar01/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar01/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -13381,36 +13680,291 @@
       },
       {
         "path": "block/Sidebar02/components/SearchForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
     ]
   },
   {
-    "name": "Sidebar07",
+    "name": "Sidebar03",
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "avatar",
+      "AppSidebar.vue",
       "breadcrumb",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar03/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar03/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar04",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar04/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar04/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar05",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
       "collapsible",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar05/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar05/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar05/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar06",
+    "type": "registry:block",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavMain.vue",
+      "SidebarOptInForm.vue",
       "dropdown-menu",
+      "button",
+      "card"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar06/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar06/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar06/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar06/components/SidebarOptInForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar07",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
       "separator",
-      "sidebar"
+      "sidebar",
+      "NavMain.vue",
+      "NavProjects.vue",
+      "NavUser.vue",
+      "TeamSwitcher.vue",
+      "collapsible",
+      "dropdown-menu",
+      "avatar"
     ],
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar07/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavProjects.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar07/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar08",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavMain.vue",
+      "NavProjects.vue",
+      "NavSecondary.vue",
+      "NavUser.vue",
+      "collapsible",
+      "dropdown-menu",
+      "avatar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar08/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar08/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavProjects.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar08/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar09",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavUser.vue",
+      "label",
+      "switch",
+      "avatar",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar09/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar09/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar09/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   }
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
new file mode 100644
index 000000000..81f5e6397
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup v-for="item in data.navMain" :key="item.title">
+        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+              <SidebarMenuButton as-child :is-active="childItem.isActive">
+                <a :href="childItem.url">{{ childItem.title }}</a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
new file mode 100644
index 000000000..bc39a8f4a
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
new file mode 100644
index 000000000..205343241
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="version === selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar01/page.vue b/apps/www/src/registry/default/block/Sidebar01/page.vue
index 2006bd5ea..33adc1dee 100644
--- a/apps/www/src/registry/default/block/Sidebar01/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/page.vue
@@ -5,10 +5,7 @@ export const description
 </script>
 
 <script setup lang="ts">
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-// Import components from the custom library
+import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -16,175 +13,18 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/default/ui/breadcrumb'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/registry/default/ui/dropdown-menu'
-import { Label } from '@/registry/default/ui/label'
-import { Separator } from '@/registry/default/ui/separator'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
   SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
-} from '@/registry/default/ui/sidebar'
-
-const data = {
-  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-  navMain: [
-    {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-        { title: 'Installation', url: '#' },
-        { title: 'Project Structure', url: '#' },
-      ],
-    },
-    {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-        { title: 'Routing', url: '#' },
-        { title: 'Data Fetching', url: '#', isActive: true },
-        { title: 'Rendering', url: '#' },
-        { title: 'Caching', url: '#' },
-        { title: 'Styling', url: '#' },
-        { title: 'Optimizing', url: '#' },
-        { title: 'Configuring', url: '#' },
-        { title: 'Testing', url: '#' },
-        { title: 'Authentication', url: '#' },
-        { title: 'Deploying', url: '#' },
-        { title: 'Upgrading', url: '#' },
-        { title: 'Examples', url: '#' },
-      ],
-    },
-    {
-      title: 'API Reference',
-      url: '#',
-      items: [
-        { title: 'Components', url: '#' },
-        { title: 'File Conventions', url: '#' },
-        { title: 'Functions', url: '#' },
-        { title: 'next.config.js Options', url: '#' },
-        { title: 'CLI', url: '#' },
-        { title: 'Edge Runtime', url: '#' },
-      ],
-    },
-    {
-      title: 'Architecture',
-      url: '#',
-      items: [
-        { title: 'Accessibility', url: '#' },
-        { title: 'Fast Refresh', url: '#' },
-        { title: 'Next.js Compiler', url: '#' },
-        { title: 'Supported Browsers', url: '#' },
-        { title: 'Turbopack', url: '#' },
-      ],
-    },
-  ],
-}
-
-const selectedVersion = ref(data.versions[0])
-const dropdownOpen = ref(false)
-const search = ref('')
-
-function toggleDropdown() {
-  dropdownOpen.value = !dropdownOpen.value
-}
-
-function setSelectedVersion(version: string) {
-  selectedVersion.value = version
-}
+} from '@/registry/new-york/ui/sidebar'
 </script>
 
 <template>
   <SidebarProvider>
-    <Sidebar>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <SidebarMenuButton
-                  size="lg"
-                  :class="{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }"
-                  @click="toggleDropdown"
-                >
-                  <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <GalleryVerticalEnd class="size-4" />
-                  </div>
-                  <div class="flex flex-col gap-0.5 leading-none">
-                    <span class="font-semibold">Documentation</span>
-                    <span>v{{ selectedVersion }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                v-if="dropdownOpen"
-                class="w-[--reka-dropdown-menu-trigger-width]"
-                align="start"
-              >
-                <DropdownMenuItem
-                  v-for="version in data.versions"
-                  :key="version"
-                  @click="setSelectedVersion(version)"
-                >
-                  v{{ version }}
-                  <Check v-if="version === selectedVersion" class="ml-auto" />
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-
-        <form @submit.prevent>
-          <SidebarGroup class="py-0">
-            <SidebarGroupContent class="relative">
-              <Label for="search" class="sr-only">Search</Label>
-              <SidebarInput
-                id="search"
-                v-model="search"
-                placeholder="Search the docs..."
-                class="pl-8"
-              />
-              <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </form>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup v-for="item in data.navMain" :key="item.title">
-          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem v-for="subItem in item.items" :key="subItem.title">
-                <SidebarMenuButton :class="{ 'is-active': subItem.isActive }" as-child>
-                  <a :href="subItem.url">{{ subItem.title }}</a>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarRail />
-    </Sidebar>
-
+    <AppSidebar />
     <SidebarInset>
       <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
         <SidebarTrigger class="-ml-1" />
@@ -203,7 +43,6 @@ function setSelectedVersion(version: string) {
           </BreadcrumbList>
         </Breadcrumb>
       </header>
-
       <div class="flex flex-1 flex-col gap-4 p-4">
         <div class="grid auto-rows-min gap-4 md:grid-cols-3">
           <div class="aspect-video rounded-xl bg-muted/50" />
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
index 6bb7c4cde..03fd20c8b 100644
--- a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
@@ -51,7 +51,7 @@ const selectedVersion = ref(props.defaultVersion)
             @select="selectedVersion = version"
           >
             v{{ version }}
-            <Check v-if="selectedVersion" class="ml-auto" />
+            <Check v-if="selectedVersion === version" class="ml-auto" />
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
new file mode 100644
index 000000000..e8eb48055
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+            <SidebarMenuButton as-child>
+              <a :href="item.url" class="font-medium">
+                {{ item.title }}
+              </a>
+            </SidebarMenuButton>
+            <SidebarMenuSub v-if="item.items.length">
+              <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                <SidebarMenuSubButton as-child :is-active="childItem.isActive">
+                  <a :href="childItem.url">{{ childItem.title }}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar03/page.vue b/apps/www/src/registry/default/block/Sidebar03/page.vue
new file mode 100644
index 000000000..fc0cce1bd
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar03/page.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b">
+        <div class="flex items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem class="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator class="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
new file mode 100644
index 000000000..74342c740
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'floating',
+})
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu class="gap-2">
+          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+            <SidebarMenuButton as-child>
+              <a :href="item.url" class="font-medium">
+                {{ item.title }}
+              </a>
+            </SidebarMenuButton>
+            <SidebarMenuSub v-if="item.items.length">
+              <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                <SidebarMenuSubButton as-child :is-active="childItem.isActive">
+                  <a :href="childItem.url">{{ childItem.title }}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar04/page.vue b/apps/www/src/registry/default/block/Sidebar04/page.vue
new file mode 100644
index 000000000..80bfa2222
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar04/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A floating sidebar with submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider :style="{ '--sidebar-width': '19rem' }">
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
new file mode 100644
index 000000000..b1aeec8dc
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <Collapsible
+            v-for="(item, index) in data.navMain"
+            :key="item.title"
+            :default-open="index === 1"
+            class="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger as-child>
+                <SidebarMenuButton>
+                  {{ item.title }}
+                  <Plus class="ml-auto group-data-[state=open]/collapsible:hidden" />
+                  <Minus class="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent v-if="item.items.length">
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                    <SidebarMenuSubButton
+                      as-child
+                      :is-active="childItem.isActive"
+                    >
+                      <a :href="childItem.url">{{ childItem.title }}</a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
new file mode 100644
index 000000000..bc39a8f4a
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar05/page.vue b/apps/www/src/registry/default/block/Sidebar05/page.vue
new file mode 100644
index 000000000..9cd241911
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar05/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
new file mode 100644
index 000000000..757100bbf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'
+import SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+    </SidebarContent>
+    <SidebarFooter>
+      <div class="p-1">
+        <SidebarOptInForm />
+      </div>
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
new file mode 100644
index 000000000..13d0fd2f7
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { useMediaQuery } from '@vueuse/core'
+import { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarMenu>
+      <DropdownMenu v-for="item in items" :key="item.title">
+        <SidebarMenuItem>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+              {{ item.title }} <MoreHorizontal class="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            v-if="item.items?.length"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+            class="min-w-56 rounded-lg"
+          >
+            <DropdownMenuItem v-for="childItem in item.items" :key="childItem.title" as-child>
+              <a :href="childItem.url">{{ childItem.title }}</a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </SidebarMenuItem>
+      </DropdownMenu>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
new file mode 100644
index 000000000..8311df11e
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/new-york/ui/card'
+import { SidebarInput } from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <Card class="shadow-none">
+    <form>
+      <CardHeader class="p-4 pb-0">
+        <CardTitle class="text-sm">
+          Subscribe to our newsletter
+        </CardTitle>
+        <CardDescription>
+          Opt-in to receive updates and news about the sidebar.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-2.5 p-4">
+        <SidebarInput type="email" placeholder="Email" />
+        <Button
+          class="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+          size="sm"
+        >
+          Subscribe
+        </Button>
+      </CardContent>
+    </form>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/page.vue b/apps/www/src/registry/default/block/Sidebar06/page.vue
new file mode 100644
index 000000000..0e6d0b7a3
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar06/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with submenus as dropdowns.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
new file mode 100644
index 000000000..ed8dc8a4a
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { SidebarProps } from '@/registry/new-york/ui/sidebar'
+
+import NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'
+import NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'
+import NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: GalleryVerticalEnd,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: Bot,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: Frame,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: PieChart,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: Map,
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+      <NavProjects :projects="data.projects" />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser :user="data.user" />
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
new file mode 100644
index 000000000..a2c4b664f
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible
+        v-for="item in items"
+        :key="item.title"
+        as-child
+        :default-open="item.isActive"
+        class="group/collapsible"
+      >
+        <SidebarMenuItem>
+          <CollapsibleTrigger as-child>
+            <SidebarMenuButton :tooltip="item.title">
+              <component :is="item.icon" v-if="item.icon" />
+              <span>{{ item.title }}</span>
+              <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                <SidebarMenuSubButton as-child>
+                  <a :href="subItem.url">
+                    <span>{{ subItem.title }}</span>
+                  </a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
new file mode 100644
index 000000000..b33a31968
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Projects</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in projects" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url">
+            <component :is="item.icon" />
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-48 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <Folder class="text-muted-foreground" />
+              <span>View Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Forward class="text-muted-foreground" />
+              <span>Share Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete Project</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal class="text-sidebar-foreground/70" />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
new file mode 100644
index 000000000..1f1ab2f77
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
new file mode 100644
index 000000000..5bb792dcf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronsUpDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-4" />
+            </div>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">
+                {{ activeTeam.name }}
+              </span>
+              <span class="truncate text-xs">{{ activeTeam.plan }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          align="start"
+          :side="isMobile ? 'bottom' : 'right'"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/page.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
index 4da722c71..8482f7701 100644
--- a/apps/www/src/registry/default/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/page.vue
@@ -6,12 +6,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@/registry/default/ui/avatar'
-
+import AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -19,417 +14,18 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/default/ui/breadcrumb'
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/registry/default/ui/collapsible'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from '@/registry/default/ui/dropdown-menu'
-import { Separator } from '@/registry/default/ui/separator'
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
   SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
-} from '@/registry/default/ui/sidebar'
-import {
-  AudioWaveform,
-  BadgeCheck,
-  Bell,
-  BookOpen,
-  Bot,
-  ChevronRight,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  Folder,
-  Forward,
-  Frame,
-  GalleryVerticalEnd,
-  LogOut,
-  Map,
-  MoreHorizontal,
-  PieChart,
-  Plus,
-  Settings2,
-  Sparkles,
-  SquareTerminal,
-  Trash2,
-} from 'lucide-vue-next'
-import { ref } from 'vue'
-
-// This is sample data.
-const data = {
-  user: {
-    name: 'shadcn',
-    email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  teams: [
-    {
-      name: 'Acme Inc',
-      logo: GalleryVerticalEnd,
-      plan: 'Enterprise',
-    },
-    {
-      name: 'Acme Corp.',
-      logo: AudioWaveform,
-      plan: 'Startup',
-    },
-    {
-      name: 'Evil Corp.',
-      logo: Command,
-      plan: 'Free',
-    },
-  ],
-  navMain: [
-    {
-      title: 'Playground',
-      url: '#',
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: 'History',
-          url: '#',
-        },
-        {
-          title: 'Starred',
-          url: '#',
-        },
-        {
-          title: 'Settings',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Models',
-      url: '#',
-      icon: Bot,
-      items: [
-        {
-          title: 'Genesis',
-          url: '#',
-        },
-        {
-          title: 'Explorer',
-          url: '#',
-        },
-        {
-          title: 'Quantum',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Documentation',
-      url: '#',
-      icon: BookOpen,
-      items: [
-        {
-          title: 'Introduction',
-          url: '#',
-        },
-        {
-          title: 'Get Started',
-          url: '#',
-        },
-        {
-          title: 'Tutorials',
-          url: '#',
-        },
-        {
-          title: 'Changelog',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Settings',
-      url: '#',
-      icon: Settings2,
-      items: [
-        {
-          title: 'General',
-          url: '#',
-        },
-        {
-          title: 'Team',
-          url: '#',
-        },
-        {
-          title: 'Billing',
-          url: '#',
-        },
-        {
-          title: 'Limits',
-          url: '#',
-        },
-      ],
-    },
-  ],
-  projects: [
-    {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-    },
-    {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-    },
-    {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-    },
-  ],
-}
-
-const activeTeam = ref(data.teams[0])
-
-function setActiveTeam(team: typeof data.teams[number]) {
-  activeTeam.value = team
-}
+} from '@/registry/new-york/ui/sidebar'
 </script>
 
 <template>
   <SidebarProvider>
-    <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <SidebarMenuButton
-                  size="lg"
-                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                >
-                  <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <component :is="activeTeam.logo" class="size-4" />
-                  </div>
-                  <div class="grid flex-1 text-left text-sm leading-tight">
-                    <span class="truncate font-semibold">{{ activeTeam.name }}</span>
-                    <span class="truncate text-xs">{{ activeTeam.plan }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                align="start"
-                side="bottom"
-                :side-offset="4"
-              >
-                <DropdownMenuLabel class="text-xs text-muted-foreground">
-                  Teams
-                </DropdownMenuLabel>
-                <DropdownMenuItem
-                  v-for="(team, index) in data.teams"
-                  :key="team.name"
-                  class="gap-2 p-2"
-                  @click="setActiveTeam(team)"
-                >
-                  <div class="flex size-6 items-center justify-center rounded-sm border">
-                    <component :is="team.logo" class="size-4 shrink-0" />
-                  </div>
-                  {{ team.name }}
-                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem class="gap-2 p-2">
-                  <div class="flex size-6 items-center justify-center rounded-md border bg-background">
-                    <Plus class="size-4" />
-                  </div>
-                  <div class="font-medium text-muted-foreground">
-                    Add team
-                  </div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Platform</SidebarGroupLabel>
-          <SidebarMenu>
-            <Collapsible
-              v-for="item in data.navMain"
-              :key="item.title"
-              as-child
-              :default-open="item.isActive"
-              class="group/collapsible"
-            >
-              <SidebarMenuItem>
-                <CollapsibleTrigger as-child>
-                  <SidebarMenuButton :tooltip="item.title">
-                    <component :is="item.icon" />
-                    <span>{{ item.title }}</span>
-                    <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                  </SidebarMenuButton>
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <SidebarMenuSub>
-                    <SidebarMenuSubItem
-                      v-for="subItem in item.items"
-                      :key="subItem.title"
-                    >
-                      <SidebarMenuSubButton as-child>
-                        <a :href="subItem.url">
-                          <span>{{ subItem.title }}</span>
-                        </a>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  </SidebarMenuSub>
-                </CollapsibleContent>
-              </SidebarMenuItem>
-            </Collapsible>
-          </SidebarMenu>
-        </SidebarGroup>
-        <SidebarGroup class="group-data-[collapsible=icon]:hidden">
-          <SidebarGroupLabel>Projects</SidebarGroupLabel>
-          <SidebarMenu>
-            <SidebarMenuItem
-              v-for="item in data.projects"
-              :key="item.name"
-            >
-              <SidebarMenuButton as-child>
-                <a :href="item.url">
-                  <component :is="item.icon" />
-                  <span>{{ item.name }}</span>
-                </a>
-              </SidebarMenuButton>
-              <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuAction show-on-hover>
-                    <MoreHorizontal />
-                    <span class="sr-only">More</span>
-                  </SidebarMenuAction>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
-                  <DropdownMenuItem>
-                    <Folder class="text-muted-foreground" />
-                    <span>View Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Forward class="text-muted-foreground" />
-                    <span>Share Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <Trash2 class="text-muted-foreground" />
-                    <span>Delete Project</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton class="text-sidebar-foreground/70">
-                <MoreHorizontal class="text-sidebar-foreground/70" />
-                <span>More</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <SidebarMenuButton
-                  size="lg"
-                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                >
-                  <Avatar class="h-8 w-8 rounded-lg">
-                    <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
-                    <AvatarFallback class="rounded-lg">
-                      CN
-                    </AvatarFallback>
-                  </Avatar>
-                  <div class="grid flex-1 text-left text-sm leading-tight">
-                    <span class="truncate font-semibold">{{ data.user.name }}</span>
-                    <span class="truncate text-xs">{{ data.user.email }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto size-4" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
-                <DropdownMenuLabel class="p-0 font-normal">
-                  <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                    <Avatar class="h-8 w-8 rounded-lg">
-                      <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
-                      <AvatarFallback class="rounded-lg">
-                        CN
-                      </AvatarFallback>
-                    </Avatar>
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                      <span class="truncate font-semibold">{{ data.user.name }}</span>
-                      <span class="truncate text-xs">{{ data.user.email }}</span>
-                    </div>
-                  </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <Sparkles />
-                    Upgrade to Pro
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <BadgeCheck />
-                    Account
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CreditCard />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Bell />
-                    Notifications
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <LogOut />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
+    <AppSidebar />
     <SidebarInset>
       <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
         <div class="flex items-center gap-2 px-4">
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
new file mode 100644
index 000000000..d80b5c565
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'
+
+import NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'
+import NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'inset',
+})
+
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: Bot,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Support',
+      url: '#',
+      icon: LifeBuoy,
+    },
+    {
+      title: 'Feedback',
+      url: '#',
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: Frame,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: PieChart,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: Map,
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command class="size-4" />
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+      <NavProjects :projects="data.projects" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser :user="data.user" />
+    </SidebarFooter>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
new file mode 100644
index 000000000..d17a748b3
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible v-for="item in items" :key="item.title" as-child :default-open="item.isActive">
+        <SidebarMenuItem>
+          <SidebarMenuButton as-child :tooltip="item.title">
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <template v-if="item.items?.length">
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction class="data-[state=open]:rotate-90">
+                <ChevronRight />
+                <span class="sr-only">Toggle</span>
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton as-child>
+                    <a :href="subItem.url">
+                      <span>{{ subItem.title }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </template>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
new file mode 100644
index 000000000..b33a31968
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Projects</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in projects" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url">
+            <component :is="item.icon" />
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-48 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <Folder class="text-muted-foreground" />
+              <span>View Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Forward class="text-muted-foreground" />
+              <span>Share Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete Project</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal class="text-sidebar-foreground/70" />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
new file mode 100644
index 000000000..22c14698c
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child size="sm">
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
new file mode 100644
index 000000000..1f1ab2f77
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/page.vue b/apps/www/src/registry/default/block/Sidebar08/page.vue
new file mode 100644
index 000000000..cee439ec1
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar08/page.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+export const description = 'An inset sidebar with secondary navigation.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2">
+        <div class="flex items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem class="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator class="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
new file mode 100644
index 000000000..fb09e7993
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'
+
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import { Switch } from '@/registry/new-york/ui/switch'
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+// This is sample data
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: 'Drafts',
+      url: '#',
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: 'Sent',
+      url: '#',
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: 'Junk',
+      url: '#',
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: 'William Smith',
+      email: 'williamsmith@example.com',
+      subject: 'Meeting Tomorrow',
+      date: '09:34 AM',
+      teaser:
+        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.',
+    },
+    {
+      name: 'Alice Smith',
+      email: 'alicesmith@example.com',
+      subject: 'Re: Project Update',
+      date: 'Yesterday',
+      teaser:
+        'Thanks for the update. The progress looks great so far.\nLet\'s schedule a call to discuss the next steps.',
+    },
+    {
+      name: 'Bob Johnson',
+      email: 'bobjohnson@example.com',
+      subject: 'Weekend Plans',
+      date: '2 days ago',
+      teaser:
+        'Hey everyone! I\'m thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?',
+    },
+    {
+      name: 'Emily Davis',
+      email: 'emilydavis@example.com',
+      subject: 'Re: Question about Budget',
+      date: '2 days ago',
+      teaser:
+        'I\'ve reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?',
+    },
+    {
+      name: 'Michael Wilson',
+      email: 'michaelwilson@example.com',
+      subject: 'Important Announcement',
+      date: '1 week ago',
+      teaser:
+        'Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company\'s future.',
+    },
+    {
+      name: 'Sarah Brown',
+      email: 'sarahbrown@example.com',
+      subject: 'Re: Feedback on Proposal',
+      date: '1 week ago',
+      teaser:
+        'Thank you for sending over the proposal. I\'ve reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?',
+    },
+    {
+      name: 'David Lee',
+      email: 'davidlee@example.com',
+      subject: 'New Project Idea',
+      date: '1 week ago',
+      teaser:
+        'I\'ve been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?',
+    },
+    {
+      name: 'Olivia Wilson',
+      email: 'oliviawilson@example.com',
+      subject: 'Vacation Plans',
+      date: '1 week ago',
+      teaser:
+        'Just a heads up that I\'ll be taking a two-week vacation next month.\nI\'ll make sure all my projects are up to date before I leave.',
+    },
+    {
+      name: 'James Martin',
+      email: 'jamesmartin@example.com',
+      subject: 'Re: Conference Registration',
+      date: '1 week ago',
+      teaser:
+        'I\'ve completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.',
+    },
+    {
+      name: 'Sophia White',
+      email: 'sophiawhite@example.com',
+      subject: 'Team Dinner',
+      date: '1 week ago',
+      teaser:
+        'To celebrate our recent project success, I\'d like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.',
+    },
+  ],
+}
+
+const activeItem = ref(data.navMain[0])
+const mails = ref(data.mails)
+const { setOpen } = useSidebar()
+</script>
+
+<template>
+  <Sidebar
+    class="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+    v-bind="props"
+  >
+    <!-- This is the first sidebar -->
+    <!-- We disable collapsible and adjust width to icon. -->
+    <!-- This will make the sidebar appear as icons. -->
+    <Sidebar
+      collapsible="none"
+      class="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" as-child class="md:h-8 md:p-0">
+              <a href="#">
+                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command class="size-4" />
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">Acme Inc</span>
+                  <span class="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent class="px-1.5 md:px-0">
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+                <SidebarMenuButton
+                  :tooltip="h('div', { hidden: false }, item.title)"
+                  :is-active="activeItem.title === item.title"
+                  class="px-2.5 md:px-2"
+                  @click="() => {
+                    activeItem = item
+                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))
+                    setOpen(true)
+                  }"
+                >
+                  <component :is="item.icon" />
+                  <span>{{ item.title }}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser :user="data.user" />
+      </SidebarFooter>
+    </Sidebar>
+
+    <!--  This is the second sidebar -->
+    <!--  We disable collapsible and let it fill remaining space -->
+    <Sidebar collapsible="none" class="hidden flex-1 md:flex">
+      <SidebarHeader class="gap-3.5 border-b p-4">
+        <div class="flex w-full items-center justify-between">
+          <div class="text-base font-medium text-foreground">
+            {{ activeItem.title }}
+          </div>
+          <Label class="flex items-center gap-2 text-sm">
+            <span>Unreads</span>
+            <Switch class="shadow-none" />
+          </Label>
+        </div>
+        <SidebarInput placeholder="Type to search..." />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup class="px-0">
+          <SidebarGroupContent>
+            <a
+              v-for="mail in mails"
+              :key="mail.email"
+              href="#"
+              class="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <div class="flex w-full items-center gap-2">
+                <span>{{ mail.name }}</span>
+                <span class="ml-auto text-xs">{{ mail.date }}</span>
+              </div>
+              <span class="font-medium">{{ mail.subject }}</span>
+              <span class="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                {{ mail.teaser }}
+              </span>
+            </a>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
new file mode 100644
index 000000000..34a0843e9
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar09/page.vue b/apps/www/src/registry/default/block/Sidebar09/page.vue
new file mode 100644
index 000000000..88430634b
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar09/page.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+export const description = 'Collapsible nested sidebars.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider
+    :style="{
+      '--sidebar-width': '350px',
+    }"
+  >
+    <AppSidebar />
+    <SidebarInset>
+      <header class="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                All Inboxes
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Inbox</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="index in 24"
+          :key="index"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue b/apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue
index 0c8190dbf..2327fa0f9 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarProvider.vue
@@ -72,6 +72,7 @@ provideSidebarContext({
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
       :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      v-bind="$attrs"
     >
       <slot />
     </div>
diff --git a/apps/www/src/registry/new-york/block/Sidebar01/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar01/components/AppSidebar.vue
new file mode 100644
index 000000000..81f5e6397
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar01/components/AppSidebar.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup v-for="item in data.navMain" :key="item.title">
+        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+              <SidebarMenuButton as-child :is-active="childItem.isActive">
+                <a :href="childItem.url">{{ childItem.title }}</a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar01/components/SearchForm.vue b/apps/www/src/registry/new-york/block/Sidebar01/components/SearchForm.vue
new file mode 100644
index 000000000..bc39a8f4a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar01/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
new file mode 100644
index 000000000..205343241
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="version === selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar01/page.vue b/apps/www/src/registry/new-york/block/Sidebar01/page.vue
index 8e63f1758..33adc1dee 100644
--- a/apps/www/src/registry/new-york/block/Sidebar01/page.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar01/page.vue
@@ -5,10 +5,7 @@ export const description
 </script>
 
 <script setup lang="ts">
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-// Import components from the custom library
+import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -17,174 +14,17 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/registry/new-york/ui/breadcrumb'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
-import { Label } from '@/registry/new-york/ui/label'
 import { Separator } from '@/registry/new-york/ui/separator'
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
   SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
 } from '@/registry/new-york/ui/sidebar'
-
-const data = {
-  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
-  navMain: [
-    {
-      title: 'Getting Started',
-      url: '#',
-      items: [
-        { title: 'Installation', url: '#' },
-        { title: 'Project Structure', url: '#' },
-      ],
-    },
-    {
-      title: 'Building Your Application',
-      url: '#',
-      items: [
-        { title: 'Routing', url: '#' },
-        { title: 'Data Fetching', url: '#', isActive: true },
-        { title: 'Rendering', url: '#' },
-        { title: 'Caching', url: '#' },
-        { title: 'Styling', url: '#' },
-        { title: 'Optimizing', url: '#' },
-        { title: 'Configuring', url: '#' },
-        { title: 'Testing', url: '#' },
-        { title: 'Authentication', url: '#' },
-        { title: 'Deploying', url: '#' },
-        { title: 'Upgrading', url: '#' },
-        { title: 'Examples', url: '#' },
-      ],
-    },
-    {
-      title: 'API Reference',
-      url: '#',
-      items: [
-        { title: 'Components', url: '#' },
-        { title: 'File Conventions', url: '#' },
-        { title: 'Functions', url: '#' },
-        { title: 'next.config.js Options', url: '#' },
-        { title: 'CLI', url: '#' },
-        { title: 'Edge Runtime', url: '#' },
-      ],
-    },
-    {
-      title: 'Architecture',
-      url: '#',
-      items: [
-        { title: 'Accessibility', url: '#' },
-        { title: 'Fast Refresh', url: '#' },
-        { title: 'Next.js Compiler', url: '#' },
-        { title: 'Supported Browsers', url: '#' },
-        { title: 'Turbopack', url: '#' },
-      ],
-    },
-  ],
-}
-
-const selectedVersion = ref(data.versions[0])
-const dropdownOpen = ref(false)
-const search = ref('')
-
-function toggleDropdown() {
-  dropdownOpen.value = !dropdownOpen.value
-}
-
-function setSelectedVersion(version: string) {
-  selectedVersion.value = version
-}
 </script>
 
 <template>
   <SidebarProvider>
-    <Sidebar>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger>
-                <SidebarMenuButton
-                  size="lg"
-                  :class="{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }"
-                  @click="toggleDropdown"
-                >
-                  <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <GalleryVerticalEnd class="size-4" />
-                  </div>
-                  <div class="flex flex-col gap-0.5 leading-none">
-                    <span class="font-semibold">Documentation</span>
-                    <span>v{{ selectedVersion }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                v-if="dropdownOpen"
-                class="w-[--reka-dropdown-menu-trigger-width]"
-                align="start"
-              >
-                <DropdownMenuItem
-                  v-for="version in data.versions"
-                  :key="version"
-                  @click="setSelectedVersion(version)"
-                >
-                  v{{ version }}
-                  <Check v-if="version === selectedVersion" class="ml-auto" />
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-
-        <form @submit.prevent>
-          <SidebarGroup class="py-0">
-            <SidebarGroupContent class="relative">
-              <Label for="search" class="sr-only">Search</Label>
-              <SidebarInput
-                id="search"
-                v-model="search"
-                placeholder="Search the docs..."
-                class="pl-8"
-              />
-              <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </form>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup v-for="item in data.navMain" :key="item.title">
-          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem v-for="subItem in item.items" :key="subItem.title">
-                <SidebarMenuButton :class="{ 'is-active': subItem.isActive }" as-child>
-                  <a :href="subItem.url">{{ subItem.title }}</a>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarRail />
-    </Sidebar>
-
+    <AppSidebar />
     <SidebarInset>
       <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
         <SidebarTrigger class="-ml-1" />
@@ -203,7 +43,6 @@ function setSelectedVersion(version: string) {
           </BreadcrumbList>
         </Breadcrumb>
       </header>
-
       <div class="flex flex-1 flex-col gap-4 p-4">
         <div class="grid auto-rows-min gap-4 md:grid-cols-3">
           <div class="aspect-video rounded-xl bg-muted/50" />
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
index 00d974329..367499292 100644
--- a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
@@ -51,7 +51,7 @@ const selectedVersion = ref(props.defaultVersion)
             @select="selectedVersion = version"
           >
             v{{ version }}
-            <Check v-if="selectedVersion" class="ml-auto" />
+            <Check v-if="selectedVersion === version" class="ml-auto" />
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/apps/www/src/registry/new-york/block/Sidebar03/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar03/components/AppSidebar.vue
new file mode 100644
index 000000000..e8eb48055
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar03/components/AppSidebar.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+            <SidebarMenuButton as-child>
+              <a :href="item.url" class="font-medium">
+                {{ item.title }}
+              </a>
+            </SidebarMenuButton>
+            <SidebarMenuSub v-if="item.items.length">
+              <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                <SidebarMenuSubButton as-child :is-active="childItem.isActive">
+                  <a :href="childItem.url">{{ childItem.title }}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar03/page.vue b/apps/www/src/registry/new-york/block/Sidebar03/page.vue
new file mode 100644
index 000000000..fc0cce1bd
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar03/page.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b">
+        <div class="flex items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem class="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator class="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar04/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar04/components/AppSidebar.vue
new file mode 100644
index 000000000..74342c740
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar04/components/AppSidebar.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'floating',
+})
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu class="gap-2">
+          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+            <SidebarMenuButton as-child>
+              <a :href="item.url" class="font-medium">
+                {{ item.title }}
+              </a>
+            </SidebarMenuButton>
+            <SidebarMenuSub v-if="item.items.length">
+              <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                <SidebarMenuSubButton as-child :is-active="childItem.isActive">
+                  <a :href="childItem.url">{{ childItem.title }}</a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar04/page.vue b/apps/www/src/registry/new-york/block/Sidebar04/page.vue
new file mode 100644
index 000000000..80bfa2222
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar04/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A floating sidebar with submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider :style="{ '--sidebar-width': '19rem' }">
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar05/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar05/components/AppSidebar.vue
new file mode 100644
index 000000000..b1aeec8dc
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar05/components/AppSidebar.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <Collapsible
+            v-for="(item, index) in data.navMain"
+            :key="item.title"
+            :default-open="index === 1"
+            class="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger as-child>
+                <SidebarMenuButton>
+                  {{ item.title }}
+                  <Plus class="ml-auto group-data-[state=open]/collapsible:hidden" />
+                  <Minus class="ml-auto group-data-[state=closed]/collapsible:hidden" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent v-if="item.items.length">
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
+                    <SidebarMenuSubButton
+                      as-child
+                      :is-active="childItem.isActive"
+                    >
+                      <a :href="childItem.url">{{ childItem.title }}</a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar05/components/SearchForm.vue b/apps/www/src/registry/new-york/block/Sidebar05/components/SearchForm.vue
new file mode 100644
index 000000000..bc39a8f4a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar05/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar05/page.vue b/apps/www/src/registry/new-york/block/Sidebar05/page.vue
new file mode 100644
index 000000000..8d49018b1
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar05/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible submenus.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar05/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar06/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar06/components/AppSidebar.vue
new file mode 100644
index 000000000..757100bbf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar06/components/AppSidebar.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'
+import SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { GalleryVerticalEnd } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+    </SidebarContent>
+    <SidebarFooter>
+      <div class="p-1">
+        <SidebarOptInForm />
+      </div>
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar06/components/NavMain.vue b/apps/www/src/registry/new-york/block/Sidebar06/components/NavMain.vue
new file mode 100644
index 000000000..13d0fd2f7
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar06/components/NavMain.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { useMediaQuery } from '@vueuse/core'
+import { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarMenu>
+      <DropdownMenu v-for="item in items" :key="item.title">
+        <SidebarMenuItem>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+              {{ item.title }} <MoreHorizontal class="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            v-if="item.items?.length"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+            class="min-w-56 rounded-lg"
+          >
+            <DropdownMenuItem v-for="childItem in item.items" :key="childItem.title" as-child>
+              <a :href="childItem.url">{{ childItem.title }}</a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </SidebarMenuItem>
+      </DropdownMenu>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue b/apps/www/src/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue
new file mode 100644
index 000000000..8311df11e
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/new-york/ui/card'
+import { SidebarInput } from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <Card class="shadow-none">
+    <form>
+      <CardHeader class="p-4 pb-0">
+        <CardTitle class="text-sm">
+          Subscribe to our newsletter
+        </CardTitle>
+        <CardDescription>
+          Opt-in to receive updates and news about the sidebar.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-2.5 p-4">
+        <SidebarInput type="email" placeholder="Email" />
+        <Button
+          class="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
+          size="sm"
+        >
+          Subscribe
+        </Button>
+      </CardContent>
+    </form>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar06/page.vue b/apps/www/src/registry/new-york/block/Sidebar06/page.vue
new file mode 100644
index 000000000..0e6d0b7a3
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar06/page.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with submenus as dropdowns.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/AppSidebar.vue
new file mode 100644
index 000000000..ed8dc8a4a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/AppSidebar.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { SidebarProps } from '@/registry/new-york/ui/sidebar'
+
+import NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'
+import NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'
+import NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: GalleryVerticalEnd,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: Bot,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: Frame,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: PieChart,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: Map,
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+      <NavProjects :projects="data.projects" />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser :user="data.user" />
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/NavMain.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/NavMain.vue
new file mode 100644
index 000000000..a2c4b664f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/NavMain.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible
+        v-for="item in items"
+        :key="item.title"
+        as-child
+        :default-open="item.isActive"
+        class="group/collapsible"
+      >
+        <SidebarMenuItem>
+          <CollapsibleTrigger as-child>
+            <SidebarMenuButton :tooltip="item.title">
+              <component :is="item.icon" v-if="item.icon" />
+              <span>{{ item.title }}</span>
+              <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                <SidebarMenuSubButton as-child>
+                  <a :href="subItem.url">
+                    <span>{{ subItem.title }}</span>
+                  </a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/NavProjects.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/NavProjects.vue
new file mode 100644
index 000000000..b33a31968
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/NavProjects.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Projects</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in projects" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url">
+            <component :is="item.icon" />
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-48 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <Folder class="text-muted-foreground" />
+              <span>View Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Forward class="text-muted-foreground" />
+              <span>Share Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete Project</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal class="text-sidebar-foreground/70" />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
new file mode 100644
index 000000000..1f1ab2f77
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
new file mode 100644
index 000000000..5bb792dcf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronsUpDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-4" />
+            </div>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">
+                {{ activeTeam.name }}
+              </span>
+              <span class="truncate text-xs">{{ activeTeam.plan }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          align="start"
+          :side="isMobile ? 'bottom' : 'right'"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/page.vue b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
index 5b1990fb2..8482f7701 100644
--- a/apps/www/src/registry/new-york/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
@@ -6,12 +6,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@/registry/new-york/ui/avatar'
-
+import AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -20,416 +15,17 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/registry/new-york/ui/breadcrumb'
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
 import { Separator } from '@/registry/new-york/ui/separator'
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
   SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
 } from '@/registry/new-york/ui/sidebar'
-import {
-  AudioWaveform,
-  BadgeCheck,
-  Bell,
-  BookOpen,
-  Bot,
-  ChevronRight,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  Folder,
-  Forward,
-  Frame,
-  GalleryVerticalEnd,
-  LogOut,
-  Map,
-  MoreHorizontal,
-  PieChart,
-  Plus,
-  Settings2,
-  Sparkles,
-  SquareTerminal,
-  Trash2,
-} from 'lucide-vue-next'
-import { ref } from 'vue'
-
-// This is sample data.
-const data = {
-  user: {
-    name: 'shadcn',
-    email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  teams: [
-    {
-      name: 'Acme Inc',
-      logo: GalleryVerticalEnd,
-      plan: 'Enterprise',
-    },
-    {
-      name: 'Acme Corp.',
-      logo: AudioWaveform,
-      plan: 'Startup',
-    },
-    {
-      name: 'Evil Corp.',
-      logo: Command,
-      plan: 'Free',
-    },
-  ],
-  navMain: [
-    {
-      title: 'Playground',
-      url: '#',
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: 'History',
-          url: '#',
-        },
-        {
-          title: 'Starred',
-          url: '#',
-        },
-        {
-          title: 'Settings',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Models',
-      url: '#',
-      icon: Bot,
-      items: [
-        {
-          title: 'Genesis',
-          url: '#',
-        },
-        {
-          title: 'Explorer',
-          url: '#',
-        },
-        {
-          title: 'Quantum',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Documentation',
-      url: '#',
-      icon: BookOpen,
-      items: [
-        {
-          title: 'Introduction',
-          url: '#',
-        },
-        {
-          title: 'Get Started',
-          url: '#',
-        },
-        {
-          title: 'Tutorials',
-          url: '#',
-        },
-        {
-          title: 'Changelog',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Settings',
-      url: '#',
-      icon: Settings2,
-      items: [
-        {
-          title: 'General',
-          url: '#',
-        },
-        {
-          title: 'Team',
-          url: '#',
-        },
-        {
-          title: 'Billing',
-          url: '#',
-        },
-        {
-          title: 'Limits',
-          url: '#',
-        },
-      ],
-    },
-  ],
-  projects: [
-    {
-      name: 'Design Engineering',
-      url: '#',
-      icon: Frame,
-    },
-    {
-      name: 'Sales & Marketing',
-      url: '#',
-      icon: PieChart,
-    },
-    {
-      name: 'Travel',
-      url: '#',
-      icon: Map,
-    },
-  ],
-}
-
-const activeTeam = ref(data.teams[0])
-
-function setActiveTeam(team: typeof data.teams[number]) {
-  activeTeam.value = team
-}
 </script>
 
 <template>
   <SidebarProvider>
-    <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <SidebarMenuButton
-                  size="lg"
-                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                >
-                  <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <component :is="activeTeam.logo" class="size-4" />
-                  </div>
-                  <div class="grid flex-1 text-left text-sm leading-tight">
-                    <span class="truncate font-semibold">{{ activeTeam.name }}</span>
-                    <span class="truncate text-xs">{{ activeTeam.plan }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-                align="start"
-                side="bottom"
-                :side-offset="4"
-              >
-                <DropdownMenuLabel class="text-xs text-muted-foreground">
-                  Teams
-                </DropdownMenuLabel>
-                <DropdownMenuItem
-                  v-for="(team, index) in data.teams"
-                  :key="team.name"
-                  class="gap-2 p-2"
-                  @click="setActiveTeam(team)"
-                >
-                  <div class="flex size-6 items-center justify-center rounded-sm border">
-                    <component :is="team.logo" class="size-4 shrink-0" />
-                  </div>
-                  {{ team.name }}
-                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem class="gap-2 p-2">
-                  <div class="flex size-6 items-center justify-center rounded-md border bg-background">
-                    <Plus class="size-4" />
-                  </div>
-                  <div class="font-medium text-muted-foreground">
-                    Add team
-                  </div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Platform</SidebarGroupLabel>
-          <SidebarMenu>
-            <Collapsible
-              v-for="item in data.navMain"
-              :key="item.title"
-              as-child
-              :default-open="item.isActive"
-              class="group/collapsible"
-            >
-              <SidebarMenuItem>
-                <CollapsibleTrigger as-child>
-                  <SidebarMenuButton :tooltip="item.title">
-                    <component :is="item.icon" />
-                    <span>{{ item.title }}</span>
-                    <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                  </SidebarMenuButton>
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <SidebarMenuSub>
-                    <SidebarMenuSubItem
-                      v-for="subItem in item.items"
-                      :key="subItem.title"
-                    >
-                      <SidebarMenuSubButton as-child>
-                        <a :href="subItem.url">
-                          <span>{{ subItem.title }}</span>
-                        </a>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  </SidebarMenuSub>
-                </CollapsibleContent>
-              </SidebarMenuItem>
-            </Collapsible>
-          </SidebarMenu>
-        </SidebarGroup>
-        <SidebarGroup class="group-data-[collapsible=icon]:hidden">
-          <SidebarGroupLabel>Projects</SidebarGroupLabel>
-          <SidebarMenu>
-            <SidebarMenuItem
-              v-for="item in data.projects"
-              :key="item.name"
-            >
-              <SidebarMenuButton as-child>
-                <a :href="item.url">
-                  <component :is="item.icon" />
-                  <span>{{ item.name }}</span>
-                </a>
-              </SidebarMenuButton>
-              <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuAction show-on-hover>
-                    <MoreHorizontal />
-                    <span class="sr-only">More</span>
-                  </SidebarMenuAction>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
-                  <DropdownMenuItem>
-                    <Folder class="text-muted-foreground" />
-                    <span>View Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Forward class="text-muted-foreground" />
-                    <span>Share Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <Trash2 class="text-muted-foreground" />
-                    <span>Delete Project</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton class="text-sidebar-foreground/70">
-                <MoreHorizontal class="text-sidebar-foreground/70" />
-                <span>More</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <SidebarMenuButton
-                  size="lg"
-                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                >
-                  <Avatar class="h-8 w-8 rounded-lg">
-                    <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
-                    <AvatarFallback class="rounded-lg">
-                      CN
-                    </AvatarFallback>
-                  </Avatar>
-                  <div class="grid flex-1 text-left text-sm leading-tight">
-                    <span class="truncate font-semibold">{{ data.user.name }}</span>
-                    <span class="truncate text-xs">{{ data.user.email }}</span>
-                  </div>
-                  <ChevronsUpDown class="ml-auto size-4" />
-                </SidebarMenuButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
-                <DropdownMenuLabel class="p-0 font-normal">
-                  <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                    <Avatar class="h-8 w-8 rounded-lg">
-                      <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
-                      <AvatarFallback class="rounded-lg">
-                        CN
-                      </AvatarFallback>
-                    </Avatar>
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                      <span class="truncate font-semibold">{{ data.user.name }}</span>
-                      <span class="truncate text-xs">{{ data.user.email }}</span>
-                    </div>
-                  </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <Sparkles />
-                    Upgrade to Pro
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <BadgeCheck />
-                    Account
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CreditCard />
-                    Billing
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Bell />
-                    Notifications
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <LogOut />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
+    <AppSidebar />
     <SidebarInset>
       <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
         <div class="flex items-center gap-2 px-4">
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/AppSidebar.vue
new file mode 100644
index 000000000..d80b5c565
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/AppSidebar.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'
+
+import NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'
+import NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  LifeBuoy,
+  Map,
+  PieChart,
+  Send,
+  Settings2,
+  SquareTerminal,
+} from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'inset',
+})
+
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: Bot,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Support',
+      url: '#',
+      icon: LifeBuoy,
+    },
+    {
+      title: 'Feedback',
+      url: '#',
+      icon: Send,
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: Frame,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: PieChart,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: Map,
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <a href="#">
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <Command class="size-4" />
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <NavMain :items="data.navMain" />
+      <NavProjects :projects="data.projects" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser :user="data.user" />
+    </SidebarFooter>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/NavMain.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/NavMain.vue
new file mode 100644
index 000000000..d17a748b3
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/NavMain.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible v-for="item in items" :key="item.title" as-child :default-open="item.isActive">
+        <SidebarMenuItem>
+          <SidebarMenuButton as-child :tooltip="item.title">
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <template v-if="item.items?.length">
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction class="data-[state=open]:rotate-90">
+                <ChevronRight />
+                <span class="sr-only">Toggle</span>
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton as-child>
+                    <a :href="subItem.url">
+                      <span>{{ subItem.title }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </template>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/NavProjects.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/NavProjects.vue
new file mode 100644
index 000000000..b33a31968
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/NavProjects.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Projects</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in projects" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url">
+            <component :is="item.icon" />
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-48 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <Folder class="text-muted-foreground" />
+              <span>View Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Forward class="text-muted-foreground" />
+              <span>Share Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete Project</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal class="text-sidebar-foreground/70" />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/NavSecondary.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/NavSecondary.vue
new file mode 100644
index 000000000..22c14698c
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/NavSecondary.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child size="sm">
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
new file mode 100644
index 000000000..1f1ab2f77
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/page.vue b/apps/www/src/registry/new-york/block/Sidebar08/page.vue
new file mode 100644
index 000000000..cee439ec1
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar08/page.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+export const description = 'An inset sidebar with secondary navigation.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2">
+        <div class="flex items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem class="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator class="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar09/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar09/components/AppSidebar.vue
new file mode 100644
index 000000000..cbe18b173
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar09/components/AppSidebar.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'
+
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import { Switch } from '@/registry/new-york/ui/switch'
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+// This is sample data
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      isActive: true,
+    },
+    {
+      title: 'Drafts',
+      url: '#',
+      icon: File,
+      isActive: false,
+    },
+    {
+      title: 'Sent',
+      url: '#',
+      icon: Send,
+      isActive: false,
+    },
+    {
+      title: 'Junk',
+      url: '#',
+      icon: ArchiveX,
+      isActive: false,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+      isActive: false,
+    },
+  ],
+  mails: [
+    {
+      name: 'William Smith',
+      email: 'williamsmith@example.com',
+      subject: 'Meeting Tomorrow',
+      date: '09:34 AM',
+      teaser:
+        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.',
+    },
+    {
+      name: 'Alice Smith',
+      email: 'alicesmith@example.com',
+      subject: 'Re: Project Update',
+      date: 'Yesterday',
+      teaser:
+        'Thanks for the update. The progress looks great so far.\nLet\'s schedule a call to discuss the next steps.',
+    },
+    {
+      name: 'Bob Johnson',
+      email: 'bobjohnson@example.com',
+      subject: 'Weekend Plans',
+      date: '2 days ago',
+      teaser:
+        'Hey everyone! I\'m thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?',
+    },
+    {
+      name: 'Emily Davis',
+      email: 'emilydavis@example.com',
+      subject: 'Re: Question about Budget',
+      date: '2 days ago',
+      teaser:
+        'I\'ve reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?',
+    },
+    {
+      name: 'Michael Wilson',
+      email: 'michaelwilson@example.com',
+      subject: 'Important Announcement',
+      date: '1 week ago',
+      teaser:
+        'Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company\'s future.',
+    },
+    {
+      name: 'Sarah Brown',
+      email: 'sarahbrown@example.com',
+      subject: 'Re: Feedback on Proposal',
+      date: '1 week ago',
+      teaser:
+        'Thank you for sending over the proposal. I\'ve reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?',
+    },
+    {
+      name: 'David Lee',
+      email: 'davidlee@example.com',
+      subject: 'New Project Idea',
+      date: '1 week ago',
+      teaser:
+        'I\'ve been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?',
+    },
+    {
+      name: 'Olivia Wilson',
+      email: 'oliviawilson@example.com',
+      subject: 'Vacation Plans',
+      date: '1 week ago',
+      teaser:
+        'Just a heads up that I\'ll be taking a two-week vacation next month.\nI\'ll make sure all my projects are up to date before I leave.',
+    },
+    {
+      name: 'James Martin',
+      email: 'jamesmartin@example.com',
+      subject: 'Re: Conference Registration',
+      date: '1 week ago',
+      teaser:
+        'I\'ve completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.',
+    },
+    {
+      name: 'Sophia White',
+      email: 'sophiawhite@example.com',
+      subject: 'Team Dinner',
+      date: '1 week ago',
+      teaser:
+        'To celebrate our recent project success, I\'d like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.',
+    },
+  ],
+}
+
+const activeItem = ref(data.navMain[0])
+const mails = ref(data.mails)
+const { setOpen } = useSidebar()
+</script>
+
+<template>
+  <Sidebar
+    class="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row"
+    v-bind="props"
+  >
+    <!-- This is the first sidebar -->
+    <!-- We disable collapsible and adjust width to icon. -->
+    <!-- This will make the sidebar appear as icons. -->
+    <Sidebar
+      collapsible="none"
+      class="!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r"
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" as-child class="md:h-8 md:p-0">
+              <a href="#">
+                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Command class="size-4" />
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">Acme Inc</span>
+                  <span class="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent class="px-1.5 md:px-0">
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+                <SidebarMenuButton
+                  :tooltip="h('div', { hidden: false }, item.title)"
+                  :is-active="activeItem.title === item.title"
+                  class="px-2.5 md:px-2"
+                  @click="() => {
+                    activeItem = item
+
+                    const mail = data.mails.sort(() => Math.random() - 0.5)
+                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))
+                    setOpen(true)
+                  }"
+                >
+                  <component :is="item.icon" />
+                  <span>{{ item.title }}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser :user="data.user" />
+      </SidebarFooter>
+    </Sidebar>
+
+    <!--  This is the second sidebar -->
+    <!--  We disable collapsible and let it fill remaining space -->
+    <Sidebar collapsible="none" class="hidden flex-1 md:flex">
+      <SidebarHeader class="gap-3.5 border-b p-4">
+        <div class="flex w-full items-center justify-between">
+          <div class="text-base font-medium text-foreground">
+            {{ activeItem.title }}
+          </div>
+          <Label class="flex items-center gap-2 text-sm">
+            <span>Unreads</span>
+            <Switch class="shadow-none" />
+          </Label>
+        </div>
+        <SidebarInput placeholder="Type to search..." />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup class="px-0">
+          <SidebarGroupContent>
+            <a
+              v-for="mail in mails"
+              :key="mail.email"
+              href="#"
+              class="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <div class="flex w-full items-center gap-2">
+                <span>{{ mail.name }}</span>
+                <span class="ml-auto text-xs">{{ mail.date }}</span>
+              </div>
+              <span class="font-medium">{{ mail.subject }}</span>
+              <span class="line-clamp-2 w-[260px] whitespace-break-spaces text-xs">
+                {{ mail.teaser }}
+              </span>
+            </a>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
new file mode 100644
index 000000000..34a0843e9
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar09/page.vue b/apps/www/src/registry/new-york/block/Sidebar09/page.vue
new file mode 100644
index 000000000..88430634b
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar09/page.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+export const description = 'Collapsible nested sidebars.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider
+    :style="{
+      '--sidebar-width': '350px',
+    }"
+  >
+    <AppSidebar />
+    <SidebarInset>
+      <header class="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                All Inboxes
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Inbox</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="index in 24"
+          :key="index"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue
index 0c8190dbf..2327fa0f9 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarProvider.vue
@@ -72,6 +72,7 @@ provideSidebarContext({
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
       :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      v-bind="$attrs"
     >
       <slot />
     </div>

From 99c685e41179cc3e01f67a4643c10b24d3a52317 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 25 Nov 2024 13:35:17 +0800
Subject: [PATCH 19/39] chore: add sidebars block (2/2)

---
 apps/www/__registry__/block.ts                | 1066 +++++++++++++++--
 apps/www/__registry__/index.ts                |  902 +++++++++++++-
 apps/www/src/public/avatars/shadcn.jpg        |  Bin 0 -> 23707 bytes
 .../public/r/styles/default/Sidebar01.json    |    3 +-
 .../public/r/styles/default/Sidebar06.json    |    2 +-
 .../public/r/styles/default/Sidebar10.json    |   71 ++
 .../public/r/styles/default/Sidebar11.json    |   33 +
 .../public/r/styles/default/Sidebar12.json    |   50 +
 .../public/r/styles/default/Sidebar13.json    |   26 +
 .../public/r/styles/default/Sidebar14.json    |   24 +
 .../public/r/styles/default/Sidebar15.json    |   98 ++
 .../public/r/styles/new-york/Sidebar01.json   |    3 +-
 .../public/r/styles/new-york/Sidebar06.json   |    2 +-
 .../public/r/styles/new-york/Sidebar10.json   |   71 ++
 .../public/r/styles/new-york/Sidebar11.json   |   33 +
 .../public/r/styles/new-york/Sidebar12.json   |   50 +
 .../public/r/styles/new-york/Sidebar13.json   |   26 +
 .../public/r/styles/new-york/Sidebar14.json   |   24 +
 .../public/r/styles/new-york/Sidebar15.json   |   98 ++
 apps/www/src/public/r/temp.json               |  614 +++++++++-
 .../Sidebar01/components/VersionSwitcher.vue  |    2 +-
 .../Sidebar02/components/VersionSwitcher.vue  |    2 +-
 .../block/Sidebar07/components/NavUser.vue    |    2 +-
 .../Sidebar07/components/TeamSwitcher.vue     |    2 +-
 .../block/Sidebar08/components/NavUser.vue    |    2 +-
 .../block/Sidebar09/components/NavUser.vue    |    2 +-
 .../block/Sidebar10/components/AppSidebar.vue |  276 +++++
 .../block/Sidebar10/components/NavActions.vue |  143 +++
 .../Sidebar10/components/NavFavorites.vue     |   91 ++
 .../block/Sidebar10/components/NavMain.vue    |   31 +
 .../Sidebar10/components/NavSecondary.vue     |   42 +
 .../Sidebar10/components/NavWorkspaces.vue    |   82 ++
 .../Sidebar10/components/TeamSwitcher.vue     |   78 ++
 .../registry/default/block/Sidebar10/page.vue |   51 +
 .../block/Sidebar11/components/AppSidebar.vue |   93 ++
 .../block/Sidebar11/components/Tree.vue       |   51 +
 .../registry/default/block/Sidebar11/page.vue |   61 +
 .../block/Sidebar12/components/AppSidebar.vue |   67 ++
 .../block/Sidebar12/components/Calendars.vue  |   64 +
 .../block/Sidebar12/components/DatePicker.vue |   15 +
 .../block/Sidebar12/components/NavUser.vue    |  116 ++
 .../registry/default/block/Sidebar12/page.vue |   44 +
 .../Sidebar13/components/SettingsDialog.vue   |  130 ++
 .../registry/default/block/Sidebar13/page.vue |   14 +
 .../block/Sidebar14/components/AppSidebar.vue |  194 +++
 .../registry/default/block/Sidebar14/page.vue |   53 +
 .../block/Sidebar15/components/AppSidebar.vue |  194 +++
 .../block/Sidebar15/components/Calendars.vue  |   64 +
 .../block/Sidebar15/components/DatePicker.vue |   15 +
 .../Sidebar15/components/NavFavorites.vue     |   91 ++
 .../block/Sidebar15/components/NavMain.vue    |   31 +
 .../Sidebar15/components/NavSecondary.vue     |   42 +
 .../block/Sidebar15/components/NavUser.vue    |  116 ++
 .../Sidebar15/components/NavWorkspaces.vue    |   82 ++
 .../Sidebar15/components/SidebarLeft.vue      |  276 +++++
 .../Sidebar15/components/SidebarRight.vue     |   71 ++
 .../Sidebar15/components/TeamSwitcher.vue     |   81 ++
 .../registry/default/block/Sidebar15/page.vue |   49 +
 .../Sidebar01/components/VersionSwitcher.vue  |    2 +-
 .../Sidebar02/components/VersionSwitcher.vue  |    2 +-
 .../block/Sidebar07/components/NavUser.vue    |    2 +-
 .../Sidebar07/components/TeamSwitcher.vue     |    2 +-
 .../block/Sidebar08/components/NavUser.vue    |    2 +-
 .../block/Sidebar09/components/NavUser.vue    |    2 +-
 .../block/Sidebar10/components/AppSidebar.vue |  276 +++++
 .../block/Sidebar10/components/NavActions.vue |  143 +++
 .../Sidebar10/components/NavFavorites.vue     |   91 ++
 .../block/Sidebar10/components/NavMain.vue    |   31 +
 .../Sidebar10/components/NavSecondary.vue     |   42 +
 .../Sidebar10/components/NavWorkspaces.vue    |   82 ++
 .../Sidebar10/components/TeamSwitcher.vue     |   78 ++
 .../new-york/block/Sidebar10/page.vue         |   51 +
 .../block/Sidebar11/components/AppSidebar.vue |   93 ++
 .../block/Sidebar11/components/Tree.vue       |   51 +
 .../new-york/block/Sidebar11/page.vue         |   61 +
 .../block/Sidebar12/components/AppSidebar.vue |   67 ++
 .../block/Sidebar12/components/Calendars.vue  |   64 +
 .../block/Sidebar12/components/DatePicker.vue |   15 +
 .../block/Sidebar12/components/NavUser.vue    |  116 ++
 .../new-york/block/Sidebar12/page.vue         |   44 +
 .../Sidebar13/components/SettingsDialog.vue   |  130 ++
 .../new-york/block/Sidebar13/page.vue         |   14 +
 .../block/Sidebar14/components/AppSidebar.vue |  194 +++
 .../new-york/block/Sidebar14/page.vue         |   53 +
 .../block/Sidebar15/components/AppSidebar.vue |  194 +++
 .../block/Sidebar15/components/Calendars.vue  |   64 +
 .../block/Sidebar15/components/DatePicker.vue |   15 +
 .../Sidebar15/components/NavFavorites.vue     |   91 ++
 .../block/Sidebar15/components/NavMain.vue    |   31 +
 .../Sidebar15/components/NavSecondary.vue     |   42 +
 .../block/Sidebar15/components/NavUser.vue    |  116 ++
 .../Sidebar15/components/NavWorkspaces.vue    |   82 ++
 .../Sidebar15/components/SidebarLeft.vue      |  276 +++++
 .../Sidebar15/components/SidebarRight.vue     |   71 ++
 .../Sidebar15/components/TeamSwitcher.vue     |   81 ++
 .../new-york/block/Sidebar15/page.vue         |   49 +
 96 files changed, 8680 insertions(+), 156 deletions(-)
 create mode 100644 apps/www/src/public/avatars/shadcn.jpg
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar10.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar11.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar12.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar13.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar14.json
 create mode 100644 apps/www/src/public/r/styles/default/Sidebar15.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar10.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar11.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar12.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar13.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar14.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Sidebar15.json
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar10/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar11/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar12/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar13/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar14/page.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/default/block/Sidebar15/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/NavActions.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/NavFavorites.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/NavMain.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar10/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar11/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar11/components/Tree.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar11/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar12/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar12/components/Calendars.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar12/components/DatePicker.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar12/components/NavUser.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar12/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar13/components/SettingsDialog.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar13/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar14/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar14/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/AppSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/Calendars.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/DatePicker.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/NavFavorites.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/NavMain.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/NavSecondary.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/NavUser.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/SidebarLeft.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/SidebarRight.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue
 create mode 100644 apps/www/src/registry/new-york/block/Sidebar15/page.vue

diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
index e0a3a5333..a651fdf72 100644
--- a/apps/www/__registry__/block.ts
+++ b/apps/www/__registry__/block.ts
@@ -195,7 +195,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -469,6 +469,238 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/new-york/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/new-york/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/new-york/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -660,7 +892,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -934,120 +1166,352 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-  },  "default": {
-    "Authentication01": {
-      name: "Authentication01",
-      description: "",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: [{
-        path: "registry/default/block/Authentication01.vue",
-        type: "registry:block",
-        target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
-      }],
-      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "Authentication02": {
-      name: "Authentication02",
+    "Sidebar10": {
+      name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
       files: [{
-        path: "registry/default/block/Authentication02.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar10/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
+    "Sidebar11": {
+      name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
       files: [{
-        path: "registry/default/block/Authentication03.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar11/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
+    "Sidebar12": {
+      name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","input","label"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
-        path: "registry/default/block/Authentication04.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar12/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
+    "Sidebar13": {
+      name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard01.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar13/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
+    "Sidebar14": {
+      name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard02.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar14/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
+    "Sidebar15": {
+      name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
       files: [{
-        path: "registry/default/block/Dashboard03.vue",
-        type: "registry:block",
+        path: "registry/new-york/block/Sidebar15/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
-      }],
+        raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
       raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
@@ -1126,7 +1590,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -1400,6 +1864,238 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/default/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -1591,7 +2287,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -1865,6 +2561,238 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/default/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },
 }
 
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 96a5af2a6..6ad46cbcd 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5239,7 +5239,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -5470,6 +5470,200 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/new-york/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/new-york/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/new-york/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -10690,7 +10884,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -10921,96 +11115,290 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-  },  "default": {
-    "utils": {
-      name: "utils",
+    "Sidebar10": {
+      name: "Sidebar10",
       description: "",
-      type: "registry:lib",
-      registryDependencies: undefined,
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
       files: [{
-        path: "registry/default/lib/utils.ts",
-        type: "registry:lib",
+        path: "registry/new-york/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
         target: ""
       }],
-      component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "accordion": {
-      name: "accordion",
+    "Sidebar11": {
+      name: "Sidebar11",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils"],
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
       files: [{
-        path: "registry/default/ui/accordion/Accordion.vue",
-        type: "registry:ui",
-        target: "accordion/Accordion.vue"
-      },{
-        path: "registry/default/ui/accordion/AccordionContent.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
-      },{
-        path: "registry/default/ui/accordion/AccordionItem.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
+        path: "registry/new-york/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
       },{
-        path: "registry/default/ui/accordion/AccordionTrigger.vue",
-        type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
+        path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
       },{
-        path: "registry/default/ui/accordion/index.ts",
-        type: "registry:ui",
-        target: "accordion/index.ts"
+        path: "registry/new-york/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: ""
       }],
-      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "alert": {
-      name: "alert",
+    "Sidebar12": {
+      name: "Sidebar12",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils"],
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
-        path: "registry/default/ui/alert/Alert.vue",
-        type: "registry:ui",
-        target: "alert/Alert.vue"
+        path: "registry/new-york/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
       },{
-        path: "registry/default/ui/alert/AlertDescription.vue",
-        type: "registry:ui",
-        target: "alert/AlertDescription.vue"
+        path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
       },{
-        path: "registry/default/ui/alert/AlertTitle.vue",
-        type: "registry:ui",
-        target: "alert/AlertTitle.vue"
+        path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
       },{
-        path: "registry/default/ui/alert/index.ts",
-        type: "registry:ui",
-        target: "alert/index.ts"
+        path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
       }],
-      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "alert-dialog": {
-      name: "alert-dialog",
+    "Sidebar13": {
+      name: "Sidebar13",
       description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
       files: [{
-        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
+        path: "registry/new-york/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
       },{
-        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
-        type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
+        path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
       },{
-        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
-        type: "registry:ui",
+        path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/new-york/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "utils": {
+      name: "utils",
+      description: "",
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "accordion": {
+      name: "accordion",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/accordion/Accordion.vue",
+        type: "registry:ui",
+        target: "accordion/Accordion.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionContent.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionContent.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionItem.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionItem.vue"
+      },{
+        path: "registry/default/ui/accordion/AccordionTrigger.vue",
+        type: "registry:ui",
+        target: "accordion/AccordionTrigger.vue"
+      },{
+        path: "registry/default/ui/accordion/index.ts",
+        type: "registry:ui",
+        target: "accordion/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert": {
+      name: "alert",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/alert/Alert.vue",
+        type: "registry:ui",
+        target: "alert/Alert.vue"
+      },{
+        path: "registry/default/ui/alert/AlertDescription.vue",
+        type: "registry:ui",
+        target: "alert/AlertDescription.vue"
+      },{
+        path: "registry/default/ui/alert/AlertTitle.vue",
+        type: "registry:ui",
+        target: "alert/AlertTitle.vue"
+      },{
+        path: "registry/default/ui/alert/index.ts",
+        type: "registry:ui",
+        target: "alert/index.ts"
+      }],
+      component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils","button"],
+      files: [{
+        path: "registry/default/ui/alert-dialog/AlertDialog.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialog.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
+        type: "registry:ui",
+        target: "alert-dialog/AlertDialogAction.vue"
+      },{
+        path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
+        type: "registry:ui",
         target: "alert-dialog/AlertDialogCancel.vue"
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
@@ -16157,7 +16545,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -16388,6 +16776,200 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/default/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "accordion": {
       name: "accordion",
       description: "",
@@ -21608,7 +22190,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -21839,6 +22421,200 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "Sidebar10": {
+      name: "Sidebar10",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar10/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavActions.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar11": {
+      name: "Sidebar11",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      files: [{
+        path: "registry/default/block/Sidebar11/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar11/components/Tree.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar12": {
+      name: "Sidebar12",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar12/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar12/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar13": {
+      name: "Sidebar13",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar13/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar14": {
+      name: "Sidebar14",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar14/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar15": {
+      name: "Sidebar15",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      files: [{
+        path: "registry/default/block/Sidebar15/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/Calendars.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/DatePicker.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavMain.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavUser.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
   },
 }
 
diff --git a/apps/www/src/public/avatars/shadcn.jpg b/apps/www/src/public/avatars/shadcn.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7d3b7a4dab848d8c6a7b289d6e8b6ca04896ce0c
GIT binary patch
literal 23707
zcmb5VWl-hNwl#{oZ=`W|w~a&N?(Xg`jZ5S1&c@x{9U6Cccee%_XrLeGeD~J(-p{ux
zRY}!MB`c}SvBn%@=HJ@CO)ya~7$|5MXebyMXc$;n7&rtp1O#|^1WXiEBs3h%Z{Kh*
zv9a+8DT(p$$qBHrNf=1Tsi<k`XmN=dSr}<pC~0VE{&Nv<SXfvDI0OI!0)Pe&8;|Dy
z_xLvmh7Jdw0G<E|P6h^n4i1S9{%;7301ONq8XO!P?EemM2*|Jb!oqz;@xZ|#Apbu>
zFbMGfME`AoAwhlx(IC;jE|5bnd)}^6m^eNs_gFSxqAL;G;i`!Ez!&Chfh<5d!>8om
zjAC}m_QZ*sSEQix?bLRds4pjz>D((^Q>0Hayj@`k(3I1e?9ksfZ{I%YLbmQub-!p7
z#fGC2`)62Vyv)E}AR=rqSp!)06Uf@^k^-afU@<-4gB_xJ(xOT=AGUTR_Z<wJE{z1+
zoypb0rwi73mHp{W;z&048Z)EDL>n!vvRW3G1uJ(0YqO48utmT3#**LRXmWA7Kn+8g
zq;XLpZQ6(7mqoIng^l%!De=q)J7||biq>67)K#@?t`2LYhv)YiK7-7o9wJ_=^2*t^
z0e*t|Q4q}1T>iudN~t~~Pk9oT_UTi>(rjGVPF`Xa#~Ys4^2fI~Z#PRDw;I!wtxWfe
z4edOhdERY7qEBQ+NY1Iz`8uvs><yb5tc;s7fmYLb%N&(!&zctRL5nk+Gdd}4bc}on
znLs4>gN%GxtWOH1Tu6ywN&7lK1LpDu{Y0Zh3MFB>H7pn~SVbKVU0~ySA8794p_BL3
zr@}**{kOu|a0Z8s_IRx@02qX;mgQ`X=%8cWiBAfY;JIaZ-hs6JjZFh+bD0(5o3(Td
zX)5%gdue@2(#&FP-U_2eM`G@aCXjiL16Js2vllmr#Z}IL3N!a=JrG%kWml`HVe`&o
z8~9s=#836T#-$=x&R(K*J90~12>p1LYII7QL_qLqut0NA_LZ!o#*Vo12ZVuZ(Qt8`
zF!A70OI>9WP&rU3Q7LJr6y5i+;lR$OblQF4r1%j#X_0~H(rol%<?Mlmj%GOnQydIT
zjiPMaLwQ#*si}3JNgm~Ly3PCjADCPyqYKS!xIUTF;TakmgQ2*ChnEJ?!)d9!4mq*<
z4mpkO<=DP)D6E>exH)X-c2tG0X88v0{Wy}qSeiYZ_|?LAuXuvp(muBEG^R3`awUpH
zah2ChmH<z;|E>7sQ^OD5cKle?>f;sb8|vS^W!UohtX5#)N#MEDNXL2H-jNp@`HlG;
zWIWg^S~t>FnSyRD--=?re71X;7S6ttUh*t!fu?WH4K?(43UjM(xAtAE>Q-mTcV+n&
ziFK;fpc3P4YXl+ZI|TD!`AiybscTS<BQts|g)$A7UT3|8JyHA$howO4sV2#BnvDLn
zY+`WBx)6nlv;}#7CG59Kb)4L_TI_!m3#J*ja~)xcQZ8xK7W*s|N)?v3YDAW@xKmn8
zH^+NCb9-ly4ft;j?~%_p9bZH0h}v_VYck)qBGNuB`2=hQ4D6$^e0(?CeFzoIxvn;*
z=ZAGxnsU@eMMZ=gB{^rLG*{0LG@H?rIWodqEC>lU(~{KlD$AI2Exhx%oA0yqpM$l>
zu51UbV(3Npb!0j_cB0Zt#wQDGeoT7`=NW){iO+Ha7P%T)8-A?T@jrK}9jIQ^s7@R(
zK6Ym*gkB-{AmB_|gDQ_5f4kiZCzeI4DO)r$G_M$@9(-4n`huh=emZei!SPFP{#Yzo
zZl4UVl{tW&GfyC*{iV!rJ;`ck4b@HCm%3`pV_Wl6mAJHOuN3AsEVjQjn8rtL-NPAg
z+HZt}dbO%0U8a;?(j9sFy#n(tIjAZ<X)X5q{j}rH=&paig-dDFv~sAAD^wn?aqN<2
zQMmjBC$l)8v%YBIt{vWZ7I?$OUTBzG9(0=X#Kf|PdL8AwYG>ADEKvb5PN4*sXHJ}f
zIK2(~y_wWg^mcyN2?uarwcC^_cmsL#bvtItP;1YfvMRZ<s!y1y*UV0(CA^<Qel$ig
zxkX-7UbzG^EMriszcL3a6j4y6MnzmNSvd>%yUNc`Boka^GlD6BNr91ZQ`Ul2$eOYl
z4D+s<chA-@{hrnf5DCbO%gIA&a~tWcvBm4WCa?Xp(3zbWSSit1Hx$7Q5*~|0P)%#e
zHr?<4dX*$LiOrWf18E!{K-%#%23d?jE4UI8FbIfhjG&)iaVS8N%ep`sjwlh)h0W!9
zoGoyhr!)e0Yu0g6Ei+$P3k=y!y{^)fu8kZv>Bjdt7I->?y)DhUWbZbior4)<ks2kQ
zdFJu{r(?48ItsXOnZ{lx;qjA{;HRo=0SB>jewD~L01T2?{{%(UgUg*Ud>G^Tx{C_d
z?>A`0yUtaBNg#3(+`zrYE5V0okn4Dsn9;$byhC`X&Jcp2p-%&cri*}Z)^O4-j1Je2
z(V2&!cDcbscI;96FV5Br_O<#{@A4Sf*JD7?fB{7X-d8$pZ-;4{ZI<-yDv#323XpNC
z3IfP${IskYWt!wRj;;CS>GkJ0M6?16+~Ck9`p;-Ai!ORnL4qLC3JdzK_clj_odAbv
zeSU#=8Lc-$UoD-nw(2FjRo^0d#v~j$sd{nB><ipKL*6PpkEtL7&R<X-lnjP-sn%WN
z>-L$~Hwv}Wae6J9W>yOd0qh1N{_2-M=S^D10J8FG$>=6^vKB=S*ee0T$vpPQ!i=wm
z3$7T$pRr5M+x~tWUW(#X>VjS<e@#n51t-2I{K>w~;L-fuLm4xCb~0^2u(4cFLB3gK
z|Lu_!#7aFEn65#v!oBgl)u3B4JJ&%r88!S(TV_gK8Cky=NxOV~P7Y00SebtLM@ey#
zpcVyvU-nQFxp^HQ{m<~#M`o(a%f9*A0Vcb;k@XXbV?adPkKU)qNw-CQEWaH^1>1Cb
zHTu<H!Tp}8+U0p`8#Fx~vFYW)HD)HG(!ygwWKik^jZ5p8Bpo`za;5vDXcOF`c$8ut
zEj?D+VKaGQ=ODctyD$YtVrVkG2KDmWF4&{*^0R^dIV<h&%MaL@tGb$t7e|98MZQy_
z%oBHjjhT*b)JwIX`^a%_6BK=q7?^315(Kz1$r*O+)l;%a6?RyH%Mj~%XdtnJ5xApr
zi;_ej3#q<YE<9<88r8abt%iz-rR1hB<SP5>g75D~#RPRt+RGiz^VQ9Y6aSpi-2fn2
zs}EBY?r45u+6GEoZB?L&vA8%G33xr9N8Vh8+fnFpO?75RYD#SEdeV1>2`~f_h(h|o
zWis*anOmc2omy1kDe$hA-y+^1V>(*Gg=V(HDa-Po6+A3lCF3efp6JzMbH%F|O3u_3
z3ad?Yz`@`kvC!O~Q9f+mG+rkTU=V5~q*gtc#`TA0VyK8%QaprVrY??uclsMEL0~Ov
zCRm$CX|>$ONjt%FeZ-&cT25-lo%}KIR6X-g-V=OG^TO8j8aT&9w5g3ZS>@c?L@iXC
zV82?{`<Y`lLB<K7Rrx_NYJ-O+OeR+>%*rTfHNY!Y+ek+L9V%&amSS;Q1R5=|AHW&K
zCZ0}FT(m_OvT@#iZ@TKMTXsrYDrESepXBE=;@31jJ|!j3QH76C{h+2qmehlnD?v`j
ziA@wE7Kv5ZeH*3mwH$En3@^?&1tXMW>=(!3L8gYpX^_ZB?D;M)`A~YGvH}Kv=>eVv
zJcNahvv;j$CfkI&u(l^3@i10>xqHN;E+3|LErz<7GY963wbkS$mM(tQgFzIAJghnw
zT-%_35l=?6FJSs&nh=m*`~Nafa0oC+C^U2oXaET*CMy{W8w@+SFc!sk4v{Y|3iriP
z!J#4UMoRSAXmo~J+$!1y6teNDO5&H$WY{j-bOQ>m)+Mp#S3L!QymfZhtv;ljI?F&o
ztA-+A_yu~m^Q)H*M}xpr<?ti10exKq523sX-V}HlfEzbZ*tXg27>*2h<bDb$BOLs#
z<(0Xf6B#N~n=MAm{Y}F;terk5b1jc}QDd^=yKyaEnT6%y^X7oX=RYuY4ZOk=v2lsO
zz(r&3$N@{}Y;0%kA^DI4YB+nhU^2u74;5D_ggi1RUpK3@gu_HWMm~AGR*Z|#7Jcp7
zX^7eU-T564Je4WMi>(R1ns0iPj#iHI?wblQBOL35glbz0VK(P@MGbyL%To5Le9;|#
zMXhf?Y`FBf=992O$+*CGg4VYI-PGQw{#xr01(r(TbPEdlLB1o=nMRRIct}sdY{?i)
zp3nA-jo4JC+ne#}Op^^OjL$T$>0-0>czNwv?9OSc(_OA@C3(s}jZ>9NUk9DpO@Zt&
z*E37k3R~ARTad;F{(VL3Eb1EX^jdb+qAn7h_<LR3UUH;kRP<ph%OFBb46E~dHJXKO
zxVZ>1vpm(x`I(C54QD_^Hq;(9I5+$t?`$1a+gf?%6a$0YuGLD$ZQsv%2YQ~GL?)X9
zB2!atM?Pnp^~y0;MbgsEUwU+wxFb$E9cyWa4jrlPj<*@%Nv|D`zJx);nyoG}!CZ`p
zlE2YDAe&`dQ+Y(AQ}q{(fdDJDZy@js7eLaCEZ1TL$krvTuG+YxsPmrfTB}E7tmC>z
z8>^k@(IQRDlD+*8L+*b4tvWb)2TO(=BYf!4^D)bV0ZOuUa8b7aWzplNm^WiBq4LDA
z({EIc;C<VlJQ1_qmWTA?=07g5GJo5UWoL!d4%b^<5OT-^Q#a0WScW_B*j%!a2trOw
z8|s&J=BhU(OyqXhujyo&xO;fae~_VKfTtU)T8*98HYAk(yoN58Lz)3xX&qsV0N)b3
zIepB?4Kj7Z?jf!CZCjF<WWF(oGCQhMo8$fga#*5e=<aYSFw#{sD7Rg75p_uzKx*K&
z513U>m&uRC6qMO;I+fln^I53m<$f3Gsfdq@>heTw7ZP{HMe6t%wbHfL={W@;Tfts5
zTt3z3NP^p=lxU-jVo%3$7GC_=um@&~(NGO3I8gfzIf&5A`9~!uYrhn1@T>tYDmVVJ
zp6SrXKlT~c&lH6)YN*7=ZQ?n4*S-R0lbup6Kc!8CKumWx$*yn7Z^h2C27IGlH%6vW
zbn~BQ_AA~WA>J1+*=c>pQn<iIU|Pht$VI|+-wX$8+_tm2?Kt<ioy<1&lI5-O<=*-B
zR(Gqys_Wj#UzW;rmzu>zH7XC)os7ZLz18?N?H}FE|G?6z0Jt6Er6W<#bE*~Gob3(#
zxIdA81uTYfb*}tL@B_f-(A9q1sE?Zn=A!QMkQTRYPn(x-yvYayVvD<UcUK}4nh%X$
zVCsW!*%-fFq`FjwidEzSc%7<8$4aP`dl;ii;;<|#IV>Tx-RIU6y8L695C4H(lKjo)
z(bhUhNGP1Tz|hWK5kbVCuwUqV-#A>H5v0VX@{q3TN{;p?9i3`zlGI8$nYa5JE~}YP
z(TA(9-|q}^m<~BK#b>HasnXT8GXDD^xirM@d>owYlp!N%zn-Gbd~r0%(7AXf(=|mu
z;L2tNpS+0k4@}=S8%l}mrbN1DRfcug6&TV-)Uxr(Ai?_wVcQ(0x56rNsgk`<x9JnN
zF>ParcDSy@{51kuJ5>v2L;J&-8HNVD_q}yx_8_^1*y&!|;X8D-$!@X?E0dR|9F=CM
zx{@8$?{d`FH#!iZ^QvQ9y;30^%_{ASNx^&7JF8P)Ww|Oot^t9i)DUF71*%cBO*6ss
zo~47a@gEZ!@i@@HxOsN26MN*MmDtzUvuN#c2d7hkobc#&VT<br1TEyIfR-cGoxnI)
zatbmpdjzOHXO(`+Hv?(nGl!mHX0+6p&Qo6w_Wyywzt^T5AkH|-6ot0Gep>)RFTzJw
z+S4~L;|QYU^Q<SU|Hy4H_y_jty?2puO+PgpAkf?$Flzk|EVy)aGoSFW?(clFD?~Db
z{_s{sQ<+&zwX$GI-K#8)^D^U&Ahf_HZxZI{;6E^#_#xyHQxAgn8ls0w)Oe}G<i!*=
zmIG5CKFM|E$d6hfoIesmZ%Su<SM$xKwPs+Hsa0_mQCe=@C;ek`omaI}X;xa99hn_H
zovX<}N`a`(_FWv*ZEnw}R_?+EEU?9;DKO>UKgMkc;9H_+Q$;QQ<d2CjdqVuikfNX0
zNSmI)QRhE=!<G9Zf3)9fY6Mp-GF?RTtpDf{LT$oyFlaHK8RkxVj26#m*j5pgW^W&{
z&{4(fGil}nZ;k($YJG3vbzyY~TK*Y)?0D#a{1Gj@0~fH?r=!B<h-iDt#{0v4(wjB!
z#m8J9&(yetd@a>_$@a$N5h=9xxkZiVxK6igh0?cX=^t408;XaCUtL3ah<yH*ur-=K
zBxJ3~O>7e*uDdGjg>a_Av40tE{Ga3cY_Uz*@XG5AL~JwdaV<`q1Iuuw#f(f`S*3aq
zV}DhY&1b3bM$uD4WZxx<*iGg(6y$Iw5agV~MX7K7_rpWE<GQ;rCtjsrZsNN3N~4Z3
zgiGtUmpH>spUd=VM@PDj;h29T7na~$Iql*OY7hP2kLQ(EL~nCchVxX7Z6QM0uSHmh
zwgWVMoVOb_qr`tCBx`4)XPa|Z*XNS8DSQ@u;HPl$UHF4~>jLOR$jW_a&mGyX0BEJQ
zQ^+rH;a9zxqGL>Zl)*E1^C;~-N7J)(^<>CCrJd|A{atiq|INwh^Vo7^2vtzP^)PZ|
zDcYClUH5D%d3U_--oV5K5P(wNmmAXWX4sc#_KK}gl5RP4x8q<*PR}r^+RlwjpDs(Q
zQs&${k8(Jj!eO*Dk=Ne2&hBun9xMq?U~Nsp_zW-qK6DZ6-E4p0C;WjF!K}SheZw^5
z^$#pot*3Ofdh(8jwNsx;caeK$M1nFS6FyyI3*{c)1mz!CL)^mX0nDoxFL8zQPe)8=
zEIqC%f`*nY_zA~X_-4olIwTGa<Dv4A0rdJ@0$Zr7bza8t_%OB#)+>$dkiYCCcrH%A
zRqiyt)rx5#zhzuAc=?4>UJC2XmOn>MHDlevZ|E9>GC(1XRl<C)8R5={=H<!96u4L!
z3{dzlLlYg>m^u%YDisdgw~MLfY+Wk*{R)&Oo8Y@sIiao4sHVr9>NPeBbKR}8Ry-_E
zbmj-!6^>ob4O+t$5@F43TRNuu#S?@epIrR=ue8%okUQkFc~X+37eI08;?}X-_F!%3
zSUDfNBU#Qgk$JeVerY~zMjAx4bhhNo8Ni#P>?o&pm<p=Il;E2bij=#~G$NfjF}Z59
zenP&IZkRd|wfH-B$JW%IwnmSwrB~&X+Qi^)Y-3O&{obLF6F`~oXcO<%u7CDxUB3*?
z2#IXhGrKWGP(DI1fM>U->~m5vMouQF50bz|1uo;%mIrPM#A&dORMif*YpX|s9@ihc
zS0KkNd#L?h*RC$mQ16|ZbMS^6#e;0?5+CVgRhCpFSFP5qA8*cTB?~)*excqF{?0Sm
z$zvy1?fYmFO5}d(pe>CS#6j+<f_JFON9CU7zTv*3JWlm+$=5bX@|Rdy2idMEEU+yk
z_UEoxUsM;i(4Si9kJiCXA9Te+u1xNwsq8-^eUKHjlajis)VGzj!{6O@HcTv=6h3|*
zABm>Az2Yb)+I_9MUq_mXsdlgKvzd0Ut+ODz*OiGsh%>BP*8rLLlBbeZCwvJ92}khk
z7SBGN$L>I@e4>rm<_j-@&g<s2HN{uA_t}^~38$5%kLnf^X}4^2YjM(;HTiG91>rBI
zVM7g_`p`cb!tM7X_1rc!BOm2<zsux?FZs*JDvYoAw4LiZ2b|N?ZgI}m`3gUVTRc9k
z7^8j49(Ge3z7el}Se5B~eir2(vj4T^hfd79pFjAuuiIk3*tx;qJIBiF&s~R8_vpWq
z!+WEh$>%(_)BR(i^p9f|>EjgVhCOO3@V5MKEcn{S-%<YW^O~MGi?MOV*ZFgv2WC1%
zeNUa?a&JDko;%YT9(O=&Dslao45WaGPEb-t@8|`r1*{*=jbUPg#YO<Rx&wR1S<XzJ
zQqH5kWW4a?D|gd-V;pXC8@@LqDBXZ@<#J;iZJ1wQ*HdAIWB1V!sXQnB!c2cy>wzB8
zAwZPy2`_@5S3z@l3O4B<SgP{&Kn9MJZ|G5vMy@C1rQ~NbtXq)dftz6qKEqgBD{i#4
z=`GHqkLhE8a^B&q{=42=*O~%%4|c$>h3i*t9L=qY9>LhcOzmes;<+-DGAAwgg!iju
z->IRZ){d6DHsw8jUMj`WX+Vwg{aY;K7tO&Q-<T74((%E4%Rw7?7Lpn}WbE!XBz83|
z{he~ma<0#woN9oWfB%dsHIA!gc>H+nJJ@%4tg&_Z4~(klez|w=QJSBp`D8IMJLbre
zoiEG->BQm<l1D*x>4=)Pd$(U}kV!v?VAT8{SRa@hk<j6505S7>R_(3A;=3btPjH@M
z0O~8Rc4em3+Gil_KQNjd2a6LI_QdQmGJNvNqa)=J=ck1xd{}ZEvhJ+6VS$+IlY5Zz
z1?wHVSKrUMfz$3?`IFy%Tz9aucx7WPLZh|oZ_pELtXY}!O}$i-x?^%(=L3!7v5V*E
zZ+^(kX9tF%_BweTeOYIUU-SR%HQ~sG(d<)mE+D{C@s^{=Z)l%g_w9q{yNpT?HwQL4
zBqSV+x!Z<Aratex=VHJd)!RR?uUe80{r}XG;80(M<o_``zAO%OC=60G012xwG?}t7
zCJUPg7Wsb*$**&Sz?VKK&-YG~2-p>Etl7?L#8}*^WyuA0rXCfm88#HIQl(--*?F)g
zzfqE9?#X%jk82dyYa_=KGA%HQ>1jL8y-sO6giQdvuuGTEla{ralY2M<$gILzrD}af
zQK9>56Y<SFvdDhVDvB|r4{YU))p{|<Jtf0Pi?vDOr%?zMD#gFc6vme?%5$r`6-k}`
zL0cSQ*{f3YOa4Hcqr6HBWHVH>eQ%twM72^C0ll!%vUR^d)&=vhNboSk;l{%>b_g~-
zeopQZC&L6)G5%GdEpluUiiaI9pBvE|%E}QsQyEVJxn6C>?bYyg@U?T@O862T*Z>*i
ziGNj&4q}q33`w%{T+BCo%1w~3y9_wQuKxM1vOOANXQeq7(&lr~c_)4I=%BQZA{S4^
zx|&;Cm*OFGoK>0P|B}hR=&W~tbvra0L|oW8Ng-}FK;a*AI?(vyVfvTU(Vfq*Nn!N^
zuhPfXSLSwm;5K}fxzwA?5H96;D8QAZVLo{?2E*DnT8TcCG%5ZYr<0pb)~n#gt9iQ2
zQ`=ssOi7xA&+a3$dD5O?ldp*f!YSP6Y^6RmL1CNee(GuvtJ1T)?~q65VP@*3(MO(o
zw&k}y&}mW`hN1_|G7$<?(^0SF*gh4V5QXu#jDgy)v&4w}VZAH@_ilEbv?=V~X<yRy
z^zl#*F1&QIl>rx#CqZ!>Qgx$!A*}NxJ@m`=7RPuf>#5e%`FK-L`gj*@%OzKgY0<0!
zgf>)})mP?HRV}f@RxOLD_DYQfbO~4hm3OJ{x3f2@@uj?NbiTw!*MDFpaX2uAC1y_U
z4djY)+NQBiOdjHn6#xg7zwxEwBPo)lI~{CPrerftvx%?b@z6`{-G$iCb0;_Z=v7!(
zjBl6^8y4ZR0{p<qUtW3841iWPJp_J-&s<~|<+>1STIFh|SKxbcd>G{`$x+-PU$w@O
zs)S7S08NsCbsVa)$2t1XJ)@@8upv8%MO$DRErP2UC!09Vtv=pE<J3Q}-{DQNk`~-&
zYsbOv64NKQ(Bp7iXFboeN9KFh(+4nV;hOB+Nqbfs_7=F!wt`U{7rk<nS7v!onV1U7
zkq+ie#6*a>@Yc_(?Ta=TS{8*ecA?JE;~J!lW6S*2sWyamv3H5IVme7UN4|gQ6H`9m
z%dQ3jhmmm<+4}ng0RHjwxf7Gm0(L1*6SYy1v{Vn&3qT7#Z8GGdp1kH5_a<f7JN2s6
z0K19nm=9d8ruLabzDB;rJ4I*(7N1g^Czk96j7fkVt`=LpWOX`^glB&{<{vgk%DY*z
zGyzQQo&cHmhV?D8w?YB*AS-k6X#OOMSdQnhkC)y^9PPXoqOdn|2((VtLR3_k8y42Q
z#>|`eXdF4SYxy@qdxBJ9fZn5G;W_(U#@oC=>F;(Al>PSc<aQ6-j^4;-pk<+j{7`00
zq>-N=)+Ci2C?;a|u}BbshrBEqJC}Z)7oCy2pxJSNo%#!nX#N+C{;%r_4uKAdhCvGT
zA2h=JQnrkhMO6NaMG*hNq8e=K&MQ4Obq+tgCT2xA$yj0v&qW50Z};}RQC2lr1wSyu
zv!=9B+~f<{8b^i^3FsAdIBk>kIdBC*j^mr3sb$bq{H#PYc?t@AGCX1~Qnzwp+D!!i
zz~%)oW5=^GBW<}Wn52&fLIIaw6)nx%<VPaGy@_&ODZh)Py>DU^0XoQWB+Ww`H<4sG
zX?nPE9ecP`?*hiZ)8z+x&upStVclB$qtV6jg~Xcq2}QDw#YlRQbxW*uM~<K@mo(vP
zp@89=C<lc^c~QkB&>27_$)w$^L{lJj!+a-$@kq%Z;2dUK{@1XH2`4%zwp=QWX6(%>
zle{7Fg$c<|>^{EIC6deBurYceO6PDqz%Hcqv#_=d=P|`r)*PT9buDG9^R2_IUEEV6
zMOj1r+ld=p@wfz&qzPc}f>&Xe=JQe<tB6GY>``hsZge5({3tX?&dFBFN9q?<CS2P%
z*QRd7ahj$)p#itJbB(pms9Gig@f&8tA<I(k{*i33pzWi_^LvJ?!+}_*owkthV<y>@
zb*WM6(1j&8dj}5_dZNtdZGZZPCPabM)?>^iF;r9ggCbu-Lx(r7=LFr6Tl2BG4yCdf
z+w~(unq!@$GVVA?K3Dmbo!NlJLfwql*|bpcx~TXt@X3ZLrbpt0Ax<vDbCEyyHwJ->
zIaal&scyn*c##Wc+}U;$L2DCNW2n57WGwsV>4knyk5vI9Rn|MuG%IV9y#9k61-W-t
zgnhq4Yu`*AbsSg6+#mDxXs9j;W5WY|OU*p(xH|E1fs!yZP1{r|+x-)fq$aNrTeX{^
zRZteE(PWxK_7<38Pop7wLkWv6L=oe(!R1}7^`P_+&(!<qTFC6&TtrPCI96;B$p$ZJ
zXl5#cL9y^mYvMo7=!c*&mB3m#pR{U28t=@M8%~XC!L!?7l|%T;3pcaOTl?zKf7B`k
zZloo}&WyZWYmpSWk(iRoU6s#b(Ykp<Gg>}jR76KJ<bIXHygB-nQc$V~K+)pO!C84E
z(@h+TTPU2j__xr6IOZv;4)&O`gD8{uPUQtK&*qPm@U-K=EYXdAHI0Fk7`u~Rl-a$*
zA3SDw)JfHb{`0`ZO+QW~lWqFfyj3(q<K%y~h9k^zv-kmq#usc2NuJJ;_r9-`WJLo5
zhk$~H1c&=yg7BZt26R$ZNDPv%bQD%L29SRjQE?7Tgkm>QGIjYM!5KyfVx9{NIOtS~
zL0>MfT(0S!dDaL;mja1xQC+OLM^jnhem6I-c798+s{lG{EUaFR*%tx@O-#&{mx4rD
z+WN0`gYN1|Cnn}AH;OAOHI?**^=unA+|n?0d~7=VC?__IAj654&Djt(l$f>!ps>Hx
zZ9~Zx$5VN7b8`o}(1yy(iXZefQ(09~`YO75Nc0Gy&18%45VdXE7V`osG;OU_t}0c|
znpurk<st<L1A3u977L9vaK-1iL#4EA3oDD+qucfxn_N@wbC|{J>F-u5!({y=Q-Mn&
z6B9<X{B%wmM3K`WuQt6goD3{g20H7OgF>NXY#rJ<Sm>Rdy^YYT&6A5imTHSN_QgHt
zWyLil)F**Vr_7KVBk6wWPid9i&>w+6LS<^Ec^#=q!{h%Nxak|<(EU(HIGesS&X(0T
zElp8#*{LlhS5FM8n(V$vhCNn9o2sdSRR2y_C@v2QN<^;_LH1fdRvDJTn)idA$slOy
z{OS`?_ipxPr~%Lec_#))N88DqE-+&R&<36VN=(e}v<|xD@z0v)?8fpq4L*GOPIXRP
z4yI!ZZ(Jh~IqhyFJ;g~>*K|vAY_3G>I|ZtkM|D$1wRZY)9ZoqI(@3e+J>CXC$Fzr`
zm^X{qJV>&Z4RH7=u}=Bx>+((%<*@H7dK}B5$vfg|jK%>t(~s#LWl6Q{t@StB)?rb9
zdc2~gSa`=p(RPok7Vx1(RW3U?o+~2NBnz2q%HH%`y85MSs8m$3yeg%8X0NJbz!&7C
zWKk*E*7;!``82cUs!A5qb(U&&;YwD5VwOVEPdGwy`%8Y>^c-3r+XY<9;#S53)S|PL
z9fRR(l2s-&G#6y#?98WM=f>ZwTnE!21L%FGD8q(t4Hd!75ezEpA64wtfh}@3F0Oij
z%{43#DJkBBtOfJ6&p_T)ThMOj#$GNTI?U9yTH^(L8OpxeSfvIVqEE?)5`wIAQZlyn
z>b!wX45`nk;#FsWO%QT`sn|1WS|=lcBrzh^S+z*%lXPfvICMv?4ak|U4H#gqL&rVA
z?yQ1Vm{o@>Z1(G;<`;V+GOk{PpOl)F8lL52Y3^Fe@<J|b$jXOQyx2jAM{E^46+xL^
zd8C7SES9D`w(p>9e%&QqO;XV)yu9d?er1%xP04ntG3RwpTtU$61Y47GHWW0~Pg9B}
z!4iJ-b$&9-U1_@048KLed0vZSD+@wl&9_-4?fRHy(jTNteUC24xA0U+)zzdN54^<<
z2r12zIn(c@895k>nSu5c-prnBvT$^2F9wU)bs<q8Z-Srq2sM?*JVQ%lzA0-FviipI
zh93;I=X54>{Oa}^qfGfdhv{98r=s1@;&B{T-DeH}hm4)U5>>Hz{@-tE%SeOBt`3oN
zo+n>-cRLXb+cz8G#AfO2Q6Bc5x$F{qFS=v9Qb!|igtFpKwn<6Z>NY`SXs=;=XzhFM
ztEbBzhVV9(nj9UFzKEud4@v$>x1g5g6C1QyI41<FQ+mM3d9AWnd2vWRn0fPK%!b|-
zcHfSI`T$8dwesB(5@WmF7P*!#%tjHz;0NXw>#NEN;i<B|%=vYmIyW$~a)_r5LE(}h
z6~V4b?TJA0sY@K8vl`FWwiyqPp{nL31d^9-zwNOsRmIkJ@VUA&&wt<B7iwZEprW&w
zlq`>l9(ti#9f?=woSupjY4sVJDlwn$B~@Uf_)S1HZ{7IueHf-qVwtT17w}`DYPx+{
zhfv%@-qzpz*6>YN#M%BYt%-W&MO3s)8H|aB9xwYuvZ<7^Y-e@iSm}$qx|MFw##b4h
z%D|~p0iAg0q$_fjarlq|cT*hFIhcswP1}4-rxj##SD+rceAwpG4b5-Eb*^HSmZzmI
zV`ZrpnN(SmNFLNz!sTDoVsTR$!-k(v3POoTP{1{)ByAa1nsykZlz*XM%rL7oPJOKN
zi4<zw;AVyoHE*@D=&X$@sx)K+-J)}f%YzSaUVjf|x+qk5Xp5PCC|yLN0v=U(lZr_Y
z|De96i<+1SR!?1CMxrC3w7B=Kp6Si1+*HtX!%7)x)viP><TiDgjiKW6W|(HT4mP|9
zTDzddk*aA=(U<uTR#$~O)nW}^bxBx;FI)J%N&u$v9x8a51ER@%t1A@*&tY3@Xh$%#
zyJ(y1p2l`?Q!~yh%b*6IJ$p=;zS%SVGMCFob?QB@9;pRX`!XnE#Hpt|t0MTl3=$9@
zt7h|rDZsJ6a(FD|MQry&Q^TKB3XOdVDNd2TJKaR)!+{Wne>rbREX02~Pw>x2iK{8J
z$QUOMxL(f|=Sg?b`r9V#%h-Re>bD=~3Ai3po(b7h4)IPL?=tmQ#*maP;i*#I0VXsN
zwCz1Pib3d4s@m~`ExYvPYNKw%j~d^&dy!QQ_^P+p^&x~DSW892=^ZCix8=3k1C$gT
zgNn0!qNtn36o^nNybck%Q!cb)C-QP7;%19k@n6-oGGOnbeE3)OKJlXYItzpdl5ylc
zoW-UbD-(VV6GqvFJ7vZ&@9r^Aix{Uo{H1miuz0g22(PFDpmxBu4GWz>FyS<K;hNKU
zSO3c2VtA2=yuPyi2gbn;CzslVo?r1-Bh>fTn7ZKgs_2>;beENGrFwd&y0y^#W_b9L
zde44`K}17c8oq`ecIvI%%1XqtvPNZ)xE#{-$rm-C{;v-W_2of>eYHFOcYuEp1GFzr
zK=Q>0SPB{j=J)Ua*MSxy&C%LqjYf^PI4s4ZM3PDlw8Kb@ZwL|xZZt1RVT|($;6h2&
zK>cidP(ymwF_*?7%47*0#)l`zlSB<X>ja`r$8eig6Em7jp2D3Eyn9blw?E3Kk!&Uw
zu+xpE6v%0#(m!yWOkr+f<`mc9osxDE;UgDYk;Xfbi8gs-LpprxbP_mc+_NGcV6%+H
z6oZsjk9*WLNSN<Np36FN^PB0WhSGz2&Jlzo34$YulUyJrXj}V5swed)|3p%wQH&RT
zF1%h0tNuVEwiwqFYMCM@L0T9Q0Zuju2g*&dpt^V}8&$W)*F+byu!(HCh@dHdkwQ?I
zM5hmRVu3L}Nj_$BTpe{V_m?RWz$wE)E74m_stYG2+t+3Up48~c^z3^-)pvRb&b+-i
z@frphGrKX1Lylk9e4-koN~w!@@O6ZB-)G!zliZgPn4n6QrIhv0c&VHPni<4h*zCN8
zu`){WM6$hkFw7~(g9_P$5oOAAl-LqST|nm?>P6;<L)FLlF+DXn-O`b4dPvi85NSgY
z4_%W=40M|XTo`(AgNCH!tOir(eo8#31NI-VFM%<ImyOsGJUh9QDll=drQg?$QO`pu
zM~X|`*)N69OO<d*E5y)kjur@zS=<P{!<$6dM8%LUKI1~?&P5zUkUe2tekDoLNunkh
z@^Y8&i9lq2q<(f8t9}N%P@*8xTCyfXK!ie=t^9%JhqvSM5)DOeXTTGP)VU^q9#1ih
z9~j4ypCq-()rL2(v(V}t>yELuTokLOC2Y3iI2|x+q!*4+2+e_pYvI;jN=}4hObelg
zO4$`3!|s>5n}=(ZauOjiZpClXj{^%!(N-DSL%<swXX8R}zRC>AhPIDIKp)1)2{)R2
zV=xHjlRyi5phWUS>zgaJlE*y#Ir<ExdOx&@iREYc!aqo+C2)3-3H4@Aj7`a-$0J$o
zVx~0?j!tqiNtAbly(6V+V(L^bCpaRFF-oHiAh@738TPU?edOX>+X%@MbBDk)PNIr%
z!eIyy1J_N&-G1gLrr^SEK5P^-Dh({7%I#)tcnIK!LA48gsD<K9@x_HA`v<0GJJ!n$
z-@h3wO?s5tMT|#lXKEEl3T&3qqZsO*sKDd(E?!5|y$_IYW<-*SRX%BE^3CKD!IFTW
z^g?R)hqZ3Wz@p@VsylF%dJ#YiDK}0VQck;mh`dVEbN0exBT2B>Kve0sS4xzpScb1>
z$*<51l9GW+Kh=Y)6|1>&#=T)P2T5r*@YJP|wGnJ#js+UXk0|bKiE1^3Ds`cZh2W*W
z5kfi$nS`dwZD)=n1`(p|BXf)HAy<;;UZa`AVT$|%!|EauRo#Rb)W!Onj_<})#^Z~y
z^NSmg#IBt<=q}04#L(1bkNz8zGl&X`%xEnn+B4(1JVa#R%#}!5*+#y9r%=c71>4TM
zer^N#$6v~<md!-k-qTWnSTUvBBHJ_>Pu7>Z02xS76LA+&ngU#;Y7Qf|^=2u1>2KPm
z#BwJZwBKt<gmXqt`Q6^bq#8s&yqGgdtv4d}TI|!v?|j4OK9m(suOk@KRATb_a6@VW
z$!XeS+O@AHbA~8}#ZuuINo#THRb=u+4<Lsly5CWylaIvaNvNrW(@QM>Xe~vI0~qya
zgzbvgUcjM=3ql1)o4$$VEgZ20-T_KbVCW=MXJZ|tcnLw=dTApav0)BZBMob^VQc!>
zI=Z}#Xq%i|=ws~U-BFK{X$Su0S4Ocifuh(>Zk1$z26(OXQfNJ)?ziCQUNLY`FDVLi
zOOVWxLMN$#uYpJYK2jwdtq7`;V>`4DDpGbd(%+1B&h#T$7ue>Hy16lvi_Y95AI8>^
zLdM~bew3nF)WkE~sugL3b>ktYF(Zd9*rx{-HDpFRm8|VqZRuC1eLn}uPhu;?$@Z0_
zu!&(}-J&(4okvUxAisIA=FQ+coP)LwC{-jV<fzWbiRWnJ7qG5;Fysp`U`6H75+M#n
z{KYv-r`s^eVaz~QiDHCVL86qwjyQXs6fVKKnG7cO<GF}QFlNhSTX{{_{XbuX^(urC
zGN8|FBAUnK#?1a?6xn4It+g?r6mNb;vffj|&nOHz-{E=;kVLW^vr&3JNF0Rg4$^J7
z11-kk_S=~`m=q(}@rKNhR!njFMNLkeA|LBlLM-Ne;l|^{0^=tg#OK$o67eI*{U3l}
zaWO-r79vaxb`WV<5q7-e+3srV$O@5wpjQ0SpScfQ+JPlbvu1M>d_bjPRrxiMvHn2)
zGAOGCt1}6;5S1Ge;Nvh44k)^3Ehw)KNRnX0$=7)lNp*UCacCCCFH;v57JM>9$r(Ey
z(r^Qx1d1L0lMP`UW31UQ-!4u)_KpvS+O80mf%ao25Iql^K3f?7Vvwdsj|06zell`7
zaoGDEO=|2Vv3^e@c~{2g$=VdyK}tb~9cnreuw)*#27Rnvk;@TwZK9iM9A_kUutN!J
zAuwNmUZcc79ausd6g*c^K7f{g$_+K`6~t?6e)mLsg{naj;lf$$Tx>IIKyX*?55z){
z`A*HtnP()E*ihf(+ZSOn+3sE1Ct7(Xa%uNN<33h4bYM3|S{}7EtN(~$8=jH;OiT11
zm?vH<f_xr#SbKhC(UQP;D!lY)urV`|3$mH+krmMr<(7>6yqT)Rniqqw5{S4PE>q@N
z`x9KcG_4ch@_=XNz#!+?(fz%dEw2Idq{4+)FOsq0&KNGERSHZh>X&Ytl-UXOj08^%
zzD*;w!a!yLUq)H=hQ%Ohw<FPzi+Tu1i+jxrp2$OZPBMg!JdCminf7Pc4&}g%$WJVS
zVE1OXMM4z`yU`HNA(zZs@vKLpmuTybW*x~GCTMz376mZ`@cl)qjR}i$R%#$`WSukl
zeSBB|8eXH+8e72_rh-wyPu{+tJ~7{&isrd=0YGwug1spOz*4t9X$jz^0hjXnf#+NH
zd2=kf+4R{xG0sXJarlXu=xef@A>i2n(ncau$yX$7>QvHck;Sp&{%A)z4Svw|WP{9I
zg8^#X(JJmhY(f`5)|&0!tZ}Ga6zqLhvZ455$l*-9bZZ^42Do2GhSbcu7kYvvc@Fc{
z$F$}qO^3nm$s`N~7sJ(?Io3egWi~p&IFK9Lwtpsy3`_A5Z{`b<mLh07j!ESBNSqDs
z_mmSn4iHXiErH?z{J{{IzpwUh(!z?cX_jL8nSl0#R8q$`>6LPP%OjyIa!RjIBN>K;
z9gvQc$)QI!{yQM}jVwrNdn{zMRx{X+vCc2d1sy}7cqb!+pj=Hm;##6R3qRI1MWk8b
zsn|w^<3-3!AbNfZijw$Ou%iF~@E48NZ5T?}$%rC9mp>Y{JJ2w=CM0Q4cBT9gb0lEU
zhg`q0!a0`xtUWX_1^IJ0EWJ)dAmw*{L=iazMAAeiZQf$3&<-pS#;+Ww;?NyS21Ed9
zslC)z;}SBBb>)>2aLHIep53>YkKmD^`jbZ7!5^LsY99SBmBfljQe;AcPP4vRKZw$8
zE1IhvSwTrMTI|{9Uiw84fAo0@?uG1qwZTHgtidm+8uXr+c8m~m*M1Q653HlnN>q=B
zXmG+mc_pxcgM_xp^REC72LFO#;f7;GDyqj=pzOE3U(gsLa77&G0COlt2Kz`HT0=9c
zg3=eve_-e^{)wO@(X3Y`dWw~<aXJ<TMhmzw8oh)}5Y`m;I7!qmZQwq?nHWuDh}}`-
zZ`#B)d~|Yj4+o$<#b7+mzG4^+-N+j?wHqT;sD;?VneWn17fb9z0QljXLcx9!Wq(s3
zFX2_fx^U}bWN8~yvpu<;8YL;1%QWc<E36<Q%`<hQ&T4%YODljMWPnJKT1Z`U$J1b>
z6v@!3LtZP^tcR4M(G%;4J7N0sp=xeK<9Wme^=A@CT?k)ItvFwTo;Am+!I<XuRiHTX
z!|XYEGljHNc*0!jWQb<Oagr%MyO{XuRzMWIf<i*;E^kP-Rdv|b%P5f;TI;}Aoa-1!
zLq<+aDip5Bme|70emxT_*=RGuXq;_t>uFE<A6Wm`xydlql$4CbL?BKZS$C=xCZOID
zJ{IW<BhVopxKt^$5&=o3>n6zXJLF^zW8G|gDeR;WVjTI_s%6y~<-IPA`J&dqCW1BI
zJHy>Qv?9PS(&YN^FJ_$wBk?Gm?<$Rv#rG?snlcb_KO{nSO<t{M!u}djXlfK`3XgEf
z)_RV2)bQ*d*r3oI>iZXXVcxtE=84qw#zv@~MT~7FfEFkdbKj)F>)Ef=DIIuG>h+N$
zB2a!8{St5aj7ZLOaX~^`zZq(`!N^IE(lL*ammS+W&s_6X0-^<~sEJFJB^AJbKv2r*
zp>;#02n`>{W!MzYL_5(bQI^_cKd8)xNNeVolgOL0Ymh4iM(NPDl(vbSCh1Yn#0Bu-
zpL`35pC6}Q+h-}|CKS`gx1iNl9&VaT3ELWj1Llc>4+x@(WsMo>W)n|SmQ`&PrwMWf
z;xUFyG-oZOgtjvz*VdaC4xc^O$Q8)rwX+NE<*SNl{9Y&2p5`NTGSbnHH$ZaZ$o~fx
zC{+HL5o4uEM~xl}=o^Q!A-j*ASRWl|2SJ5}=#lkmxPY&%C5vE*b>68UPqLz|R-?(K
z4($wiq63<Xzm1FU_IG_3a&6o5Um`$S!)^`)=@kaMQRFZ5YDPa~Ix(uAZN!K=l|)RN
zX=&ql4KQ|?G^|K)6i|0?Ryk2vZ5%LM95hjoKWCkNCVIDxdDxJyvaeZ?h)2cx=%Sh#
z4Q>VbAfm_(7d`0iMFKPc)?+^vTEz=Ge?O{>jjWPdofse)UA>4Gp2?7lXAj+tOe%4c
zB-y7ao6U0v9tSzeT}Zw|03#8P@KX`VGwsipBsZs>#Hd8&BaiVxpvdzuMjwWvt6;N#
zU~ExYGP7*xOrBUmLPP2x2=|M{0!oab;bd^%NTLK5+M3Bkw;b}7j@PD)E<2j6iogl)
zW`vdKkrNa`GDhlF8Cd2&Xj2MV9yi|);M6}9IORzSD+-k#eB;*%FQdsNQkK2<9wh>$
z_9)B<q0$s!P)@L_?(ESdHm1S=j|z;p1ITqR*>S$1>^QBZGJP~p0MOfg@6X@GcG7De
zIj5el3X5&RR1Xv)kr<e4V-glpeTevZYkR4tCeriPWd@9+GInp+L#h$$c5%@s`i>#u
zGFIsH=}Vx<2};Cd)V^SUiMw9$oru)q+W~7I<O7oIN9rhC+8oY749clgq`zg=y7G;0
z<e_8FQdvOw`H+e6<!-2PVu`?N314azU#PQ0HajuTs||r8E8np-(+lv(e3$Sh=%a5f
zEpDuDc6z>nOYmlDCTqzN$Jp7tLMFrIrtgR~@bhfa)Pugs0Ez)pf(VJAz_dZ^ExgF)
z<T$yH&_fF#A#kXSJcLdrTvCaGRwSwPnK4utbv&7{=L<87-eK+nzDoc9{s;*M`6UjZ
z`Jo%Hed7<a&+KgwePxq1)?$RYADvrdU@lltt2fU(t~^A$M7}L$6N@rJ7T)3i{9ab$
zWq$C=GQ%ZKHiHX~PT1I7`n|2+YvUy>fY$U0?pt$o))kKWB#F6C)Zl2-Q_E!cid82t
zpe|bKPoU$}Aq)W7C`{~!OGd_n-P}dCclQIrc{hVeg_5s0PcG(dr)#A+U>zAk`gdVb
zx`YnCG%dTag(e<atP9_A<)p27MAa?cb$LN5Q<l}cqwif|iypeh$a{_P$IGWREz@1w
zj+5pPuJsSGxQpW?F}bG1&#T7EQ9Y6M;9XxAVFUUhs`Nt9)VS{FlR?%n--kS3cOdvC
z(*T6QK~Rgon-tpJq_oE<`6$>p1oTt8;~NK4A$+{R)2vcy5o0Kq=I?1B$o9t*Q6DG^
z@LDf>+?^9VOw}N(E6kOyMA$FI)8oxh_2FTKKtLb{cH;OLw3xwl5MK*3X)oKQKd5n!
z%3*FoSJ@BVtGf9s5ls!6bD;fAZ3;NtmV)_mEtZGM53F%3lg~fkj$@1He)-j>oBPe%
zg8g2L%6(npk$>I+UXLrc$}%tZc9;pBZ+62X@Zgr)12N<jw^c_PJY{@3-)?Jy@%ZnA
zH{eSKB1QjC=g5EDq5tguBLjhhp`($q{#OQK2~7O20Q8^E5i}J$Dtx~Oo!=hoOO{9h
z9`d0@0;6J2z=2ns>(mBv%QbI1P?1^O!NuXs^Q|e|-?>iQM=FJkEBi(5I8+8Lx2d$A
zaONX+3INU(^AcCLIaayrjJ@uAW(cg9oBk|)U+bT(wcMK3D%wl|=zSIfSjy+od%kX6
z!1npWtk;CoZd=%ZF}0Upf2T6KwxzVOn~<Gl2dpURrU=2qM^`5~t{t!c0Ppxp(UCtD
z^*&0@h|$B3F84s5f;7H{HlP+U<$H9?Rc^@NePYRmlDg}PKR=fPO)_82coa1=##nDG
zbAR248vu=;QR?G;aYt{-VPf}K;0XAoXzRtgi5xC8uSAnnv4_q#ClT3hMmVyY4Pj$s
z4-U|E|ADD`_?Yn@{uL$2iC<U^pgK2eYqutLXOmFciVXd^(a;YoCM^^?Sh9J_W8ZDp
z_tGr(BZKLNNYcRu2^Ub-7U_Ol_JMdDK^(dMGM2X&f=1LJDSOn!y=k9{mviCUqoj2u
z^7??%=vrhHG}N66H)my5W&!^o3dMvtLi!^1cxu0A!|X~32m?Z;&`s{D=>0_{pPbx!
zH5M2*x*UZ5Zc3ybXacbBEb6q32V61zsxU0Mv%HVE7}u4LS&_=!zKY*`LXH3xAk}gn
zjlA0#Jw-k_`d->X&$Dv-MBcr{K>Y&~`P9WRYBZ`haE%k*lP=Eq2bOGZs<07v0#)Yp
zVt#`Arps-#e#63|Id6U4<riIrVg0Myz6tr+6B7)Iht?RlPSu~vdRXqLxt!KX%h?pC
z0Z$MvS=Vrti77sittjNv!0YVoB4UChFjGT#>ykTWq5jH!opEgY1h>|8u|f7LXW-D3
z$Dh&bY-o*Qz-C=-JOtv&u~%e-BXOr#tMQMR3m=+YM*ThO!v&Erfr8Ar&&T(H%;44^
zWliuc|G>E8Q9?pDc~_SEFbwg#lxA^d-wYQM^gYt=`-2S7=_qi5jaNH#IzA|S>VtMf
zmme&9*hB75b+wO;UT{kGkD_a_WxfT3zXXsBglqa{vRr<~?2$f%>Pu}OZw8HD72@e<
zldj&SE8h?}!@ilCtOjvIzYlVToCB4AnZBabm@hxewRw0PlYQG0-Un`}hG=jSm=D48
zfB(VkV*j_vpbR}?>mS%%q!X_F4p#-TAiXwW!}xXPudmD`{(oiW|MYhKPiB%BI~V*n
zFaOg;f#%BiqPAU|n7Xm?I@elSCfe$0P~9j+P0^LOmkrk9SO0g2t32yRziOAaB;-Ua
z*xIK>?X2C00n`y#=~WeCvmnkzeZtKUNXIuO$<&?#Hkn!j;ZX3tTlr>&jJQ!fgiW`)
zd$G<qNr=Qw$aIFP&x_H;&@Qz1JE#l%Dn1)(PB8TI#FEnGI)B%5?iuO<Mp5~Xn4rj?
zOs~OdGS;=UbWg-cRHKhT+YwCz!*4M*zpl$BiDlQa-5eo1;u!)QiiulEa<5;k4H~`!
zBCyp$9LEgdyD-pm(uXQYq@_Q!AS*VXmE+0Ra!h4Q`4p8Y#3mVoe?Esk6QZ`lQf^bw
zKbi11yb>}ijhg0cJULRBds!KL{k3h!{;XScB(b+6##=3P`C^HbM99z+Q*`vFJa>6M
zXY@|X?mOGDe*x|}Z9KkZx_{r5$gBiK;QSBkcZzhsJl(ql@3f~F&^wM>r*fCVEjqR;
zvjrdabd&M(*(HmvMqf-L9wJJ@op?l2m*A<Nm@aua`2{&Xw+jaexxGMR4i!5?y7=bW
zD8Bnm+|?Mq;Nq=q$Mec18T(Lkefj;j|0iG@pXA8jY_em($A~-r$A_06*mGU~0Ac-P
zd_zy;arJEegmpOn!e%zD8hW3{arU&)WM$cA*+Ukbc|iiflXkjiujkGU8bXmvr11zQ
z!LS|8UEMh9)E9Tc>@B_iTX+t$F6ST_Mlx{(mHrP=LYO3$1+&$s*iU%i$m;Bwb|By}
zYk4ccM7?r!+n|@(r*K#@WcTf_u`DDVU3j(ZTRcoc-aQ!|8=M9q>U&`kES%)o{IuN!
zw6#4{zcqr*nKow=?Y7&Oi!jz@$u*oDWSP{f7Ce=4XmZuIZVuyZUCF?fe-O{*muo)D
zyDvlWbl{r_^>t;Jh2Y!9d$P~vu<(i3f9+;}n@&6O9c{d>O}Z|ztF#1Mv*DY!L_4!d
zoCixbdh>O*+Y2A;7TVgs#>4>0f_qd^9DcTX%v>Vba3jcRT5&j=db)dt@F06*IqjqT
z?f=98C=dYv0s;a80|5a600IL6000315g{=_QDJcqfsr7gu`to$@bSU_+5iXv0RRC%
z5G}Nsyi1zQ*cSs)NG~ggD2<79<8v`Z#Ucq@>Nd5~;*W`(KyCm%$Kew~CqGPMUDUfR
z*)m9VM?S{q0Nq?P(zfO;EVgbHdtD-2HY{tzMpF{>+HziDEU{^cqy|F=E>e>n#D+yn
z9Gt;yONGneCpk-91!96CjdU+@2Dy2dymT{P4;vcW;N+IRO-(`*gIjY2L@0}qQNb|!
zeMAsyxBW`!lJPQ705kG!#DrK1r*ioc6xK-oOh>L_n>&aVy<Dj8<8rp7?QjLdCBsKC
zETa{5a4h507Djc6Op|Fq{{Z~Oc|)}skZ>X!JgRFXb765y(<);mVp2W`)m;!}xpU)~
zIK$7+7>i*uhL|mZDvC2G<}2~9!`f0%^6n+&-<Y(q^((D!C{}gM_6$p4_^7TzyhS&8
z<9<LmLsCEd=pX*5!l-y6%LCzuY3!&XCB8{~7t;_>_XZd&+Ym;=8OZ=RL(NYE@>8Tk
zgD+6J`p6=?@YJQSIysG?jA+^U3!>x?$$}DtT46AV-&{lBgejssEkTGxCzQ^%MxkB&
zW9R*atvDu4eUUMo`haYahdbODEN(qDcz~d&GM>p#Wcwz1m*QA&Ftas8MUo68tA`C6
zqFRiCw7Zq?4>N%AM^PN5m+~3mhEj>UfL#Q0C@}QI?Kj+~M1L|RixE{rmBI14=!d~h
z;s<cck|d!jZVd`pkQZeL+Ba_+0-^GskiJ4VaKyK3V{0hp8i4nd`~W5h#VRiNxP7VQ
zxDVM1pXt*XsN#PnDMI}WZK&v&%lboBTao~PURLFE)rD|@i*Bb9P-Rl4nEXntZa|6R
zy)dh@ef$vi%>8<Tu}ROg$X4noZDWXxEfkKJ;Djf*<s1^7Fgr4y7B3=eS~&C{Q07rM
z7~xm>IpO&Ujv0hU%FBRe_X;9Iu!*b0AtU>=1e4SN0`M4z{0aI7B}MqyVxN&JxXv*_
z;QfX@X*pnE2V0a=hWxSCD)@tTZUbVA8>|`e1V;qOpobIAYJ7xIghL^yds=D%DwxX)
zK@Hau#!)Iu6<kdj+bzN(@&n^7%6M4xzq9`Ush;21;Bdh>72LRSh+*;$T6vkmL3F@e
z=pjp%$kdXh@r$Wo!_~pe%yNl6#Zp_!fN6fkU8^%@Bv`QXIKGe?M1$hu9$+9hFwsZU
z8jVU*#b#|NfecQdm{CJ4rXJ?Flsgz=hr%?8j%7VTR2hD<mswLfxcsm|kjFt*HyN1A
zQV1+F?3d(%_=@&JTO!vaaPu7}Ml$Q>htFNc=;Z$Zk&kY=a@*X#^ML9W7iC5%6tD_R
zyJi7g-ab_bs3R!<0C1XG_>LY1=5hs>ar%P}N_iOGT@7P!u7vuAG5AW_3X~HF=B6#e
zC8zc)Pwd->@>E<>P}nDk{FLZ~T8b(b6L}4iw(XSU9aJ_5=?FtD$Usg%S1urh*8ZZC
z`iC1nB|@lo1aQd(aNmi)W4{#+qeipr#Rbz~a6Y0)%>xmqlm`_tqRxoD8Glnt`%gnM
zN<{~gaOJy;!CJSbW{LKItt-+nl>D)R#(hf726JPHX?p4)NOmhQTWea#0EngdA-r$>
zJP<6psd2hS2;5W6easxsa{NJ4jmdDzZ+6OLN!(*)#1M30H0V=oIr@S)6popW37-&i
zZ2@2&rs5}+MQw+b!S(&&6ah~cGe-*hn{k2no~8VguiFk$oY|;!thvfwDxH$~g!YL*
z9i`77OhNprh6M|zmo4-4GHd<JtJ^PyrK_O?uW4w(&|o4y2@J;LH%*ZPl(=NRIF`!o
zrvB3M-jUnO3^J?pl%X8K7aGkMD66v!mr|Hw028^305%X057gxAs45s)iA4*1+}{Jl
zc3E{W`<PIa65Bt)hRi-7KI3h|H?L@=d9YZu6HHEmHl2(VzEG%EGbpnkf!CO!qyi^{
zLBt<p6eSd^hGYG1aa>HI=EXDp(~ML}VIJi+W$tEhF9(Udz%APGDOmQJr%^kI1t|3Z
zHkG*l0Fxd(7<ORbfIu!nd+<4cKphG7JhRLbs3Ze1vOuFB$>o*8k8njzqi|1U;PDl~
zR96I`y4cRHOV}JH33hKQE)@_|w(%%oW{-gX0AlD@hnS^l(SqMPoU-oXj6_Cl`a+Gr
zG7&%frr_i?QL&>shvZj}#Qy;EAo8cwPV#t|2p|w1qmb1cY_jxjrD?di<G5;b4g5bE
zms*IkI!=aoCsdX>NoXAO!7Lx~9HKu{xJHe9mmDi^Fax_C4wQ=7u4WmNQAH)oCf^G?
z%tN`Hr>79VY{3^c$C4vXAB25eLdkE4w>h0mt%Hh(SFkE?hniZ2UW|V&yU)2^pnOH2
zKxKLQ&R|>x1RzE~1Dc1>is7AaL8!@mRTAr8E7Wee2*}jYATUb$?}$-&&v2sCYBkNv
z<)$X~O>TX{g^$^vh5rBt!y0h@%LythtLLGl6voPXLrJ7Vs+g>{xm>n=!bC6{YXl!e
zVR!uNa|V6_8TmrmdL={U_-r-9aD!e?h+tYOdX;FRwJDh0?1cE(dRUDLtsf!ZP|_+f
z!_l|15DS=STmVXo$rBGp6tcgQ-e^fx;AJmL_qcR3DdhT3udkZMCW!?xraZuA%C8pg
zAnKLaVTM78bY`^{?3amQ^toY0VAXv_Kx)xY`MWNY-u^PexrT~BJIlFW2l0fu5#)i9
z(eH|bmMv|vffFhv7*ehFaRoMffd?^APcs?jkCT`N0IjgDqYMYhWP6w3DQXWKrS}(f
zg4Y<Kg1ok10LLzFQ`6`_H<;a26r9#bx0Xq|fb7B8Qc;a|@f}T%iFON{7$$HP2(?jl
z2qm2tnMFaB@qB#hvX((EtmY?V5UFA~m+-`z9Ly(e{uq{A=58FqYU?*HSxy4DF`kLw
zuFPmHs%5}u1})EN3%DxXz8{co(r6||#-gJJp+eFM1RmlN=g}}>=_LDs1o~Jbpi+UX
zcPz)zA_#@NXdf_eZetjfPYk}v^&PY)GNA^>C5)$n@fKc4j9@fCMjKY;!E20?&uT5j
zl8P4~SZoWH8>qdH62WYg<&Lgb%2|dBD2K&DM?o%RmKPhCqbjglF9BmY&a=K_bu?j0
z&@7__6Z;le87IuLE*9Cyi0x7wu_#3MD}}i(2=Go>TS|4bpkHuAs;77gm3JCtc9ut`
zBs5(mOZo-3q=2&eY!CqPil&}yfmhaubgcu-*PF!Nt0Lk<RVz1`Z^W}m7lsQh*?h`d
z9W!c?tGbs1mJ?y^g!00J*%Cd*p`FTrNWxUyM!iPol}v;hVI}%2G43fnTH-NAPZFqx
z8E>mBa6s%tDT>X4c!L++18Bbrj^&;7S@cD^l;_gH?ZY|dEZzR4H5KyB!h0r|0l-Vf
zKuWv~QsX7D0whO&n7Wi-_E-v~E?s2f1V*amXZ@C@w?KyxNNTWPg?L=3U!ipYJVjMU
zo3`(mMJz#SQwvhXYUa5oOAi=4Td9{8bqG+`7dc<@4+>8Zkb*2DkuMmQVkm$otB9@u
z{{WJ#o62Az;8v-Am@IjVMg2mjX4;q_qlsYny>%&07vcrUL(D)iD&8Xzv~M!!=_FRH
zN^=3akPZ<8AeJ<vi0@=jda79l0|4wJ_?d4+t*mIG7P1?`!PX$N*P4d7X|`DY$mNMe
z>thietNjR=Lsv)on6@i|Eo*$=1jPohx|c!62$}OQt4Fd7s_q8|`u@RiHIiBbWlC>t
zLm*q^%wy7_i%+<(`|{#eB0GS(P9XO43ZSs+UI8zD-XU2?FCmzPe1ayxBC02b8MVUY
zC_qVhk=K|}W7@c3hK?*xsF{{UQZooMn5>@b35#cyB1){sAISa<DX0<wtoxR@A)j$b
zvW5ovikE^aI6or5f~C0?ZDJMCDgkm49RC2r`zd8AUwubow1hwUN{n(yWIpC2xBmcs
zUM{89L4ptvIjD}Kgrha~R`@^<tEt)3FRTE640#e0KDf{P4O<ljEl1{<@>9#@kGU6O
ziDhw=6m9V>3Imb~SMEkCq^1=gEDl0hM|m46?%<_rwmrhn)J==13VWQS0vx)OTtI^`
zfGvsWGN=t^TA(|G(bvZUA<b{;fMb^DsoTa;#-qQj+@LXPSl=*CyMrxS5W@+KBAg1D
zmuH63Za8jRntq`NVQ`nbK9&yh67FU2VwTE+1CknnEtKjc@KPm^I8lnw?SPj-UCJVs
zBea)BB5xvNcHPt{>K%l?K7-oADxek#gfiz*d?s{m6HX>V<(E@=nN+BD-Gk$B%!!s}
zC4BJT5M0ns#ta@=f9x-D0N$arXAmu!Wu-1k-XsCbD>iCi!whdyn9=o!l4f{_C9}|2
zVtuj71(z6DAmO+6IawKQ06`ockm9jfVGIJUITrc%i-1j3WC?ATFk4yT7#qnQK}#dU
zD+WXClr(El9%IoKPXjcF5nEU)j7x$Ivv3yz63jsYn1S=u)o!C)U?NvC@;;?56AVLK
zSWCJE`-Lx<c8qp=2=8F(=3y%+YL2B3$M&Yf^%UU){{YbdC@M0c4aSNAv6xPJgB6!S
z2$%XhZW<vv2amX1rE_-<UXhfj7DZ9Y6yOB|!NkxE#jcP}<xQJuFg!F8>04qKM5@6w
z!JChW14O#n7pR!a737vf(4#hyk|xPhU~PJ9#IvF`AhSW0>IQFO$-52BA`<+6;J2xt
zfo2MLii``wDP!RbXB;s~LReuv#UU<^JD9TeS$X<ugrnCLaZu(XHL#RnK(^!H&Leje
zi?D=FP5Pb<N7N`VK({gF_!{VCvlBnqxd4PTQj;EIE2;(N=2)&_VZw7$I+vNhoDwO!
zn7yWW{%Bi5{w%C+Jzd!`YHib~2u9L7TmvmLOb3WPJ0OYJ!NgWhO4N4Zm1Fs<JtM(`
z9sWV6&tWKI`yVvLPOr2aXKzHay<_za_$#S#yj*l;M1lI8<K)4qh9U^0Jxt*zzwXy!
zC}s-60|56`+<S)7>CC((I**(7XovQ6%tukcr6fLSH{bJ{eMHeJpm>mhL*<r+2&Yh4
zP11z3Py;lYHcL&Ag1R6%H#NyjLjW@XG;~AnUTt_KZFD$$hPE)uLDRY&eDiT>evM2N
z3)v3;0HvHf@m9e6Vjz+m;Dt6i-yb?F;l<7iW0i&Lu8_U}u<;whsLMl8a0@UkZ6xQf
zbE%85vKx#Ki6!ixLXRr?CPV$pkgkxju*ttMA#etx&VlMenj`}#To6@pR2#TgaWzq4
z!!XK#=N!R!L%BwfKwyK<%bj9a7|goeF>h3uFpJ>I$X{8Akn^&jlds!7d^whpezPmd
znYhY5IVWU?P6{zK9}xS7S^+i2D5Yvw+g1^d)Nyi!f>hW(CBzq%`z~Q>sL_9<yXHFD
zd;CLSuX4FfY-3_B7g93cInDwY1YO#o2#Xdg-3tY?a5zs=o<^qF^D1#x$b#48>qtPc
zxkdT@&_x2aI)~An3ivJxys>@2Fa~Y^0H{FH(R5g0pkT(Y%)UsLP+oYISp1_!f!hc~
z5pI6&B?ljf3a(5|;Q=0kN0lB3Pyx!LMu@&aQF)jqE0Z=uJxr1wqjSc#a6iNgbgiqU
zcB_w=<<Y=ce%CmH3`4nK&S{9UzhWjf<WI<C#po%P^f`%6(+12K{{X_)U_fZV3_5#_
z7e<GI5kPg?WU$7c5hYOTCWX6VwcDaCvUr#3h#3;OxU-20!In!+aT(H{rQTBSw6^s(
z$IU@El-cj)%@WY1%)7zt;P^ilqz8ITIIUkYq@Ix*7W>ApA#k38Em5m$<-f2=w;fzo
zVQS5vaHa1DaboOvW!hs9A7n0-d6g74GO?*oQ~XRB{{V9M4^J?;o16atQ5`|0=hG{B
zOuLMN<d4uxdaiQ-mcHVOIHiGK<r<*)mCC7H!?bRsi<bvE5t@Y}zjTgi9xqYF`b%&n
zxMe64l=(5yGCLx+?7xe}gvW92Dnj9bttV>6yrmAz3VFK-P9b~5X({X>5{oVoGqgWa
zm?McPm5cjg2xF!Co3WU<ixm7*P$G)+Ty}|U-Nvqu7ZkywQ|64}9<08h4$vOushka%
z75m2@Zs3!lRvbze92#>G?}9uP<TAr@rc@V*c!9|XQew=+gYSiuK1*>v#Oe}Fgv|)*
zDXCsagT@JPEikbbXXSPA%a>eKsyX_L4E@F~cdC^v3c){AvqV{|Eios_+*jPO8C<B{
zJj>kWvG0f(U|Ez%4p9XUL?PGV^1RDye)*V?F0f@ceJcY17$Ke_1}1H0P|R)V5}21z
z&0SFe<Zss<$arY4aL~8*XtlVdb8unQW)qm``Ihxv!;$h!Y`kzM-9ZDEz>31G<c%Y5
z7P4E6*TXZ#{CQ<v{ijmk?ltAS5ww|0I(((UjNBDOeSH-SrbB{RV*45*4<Zi2Wj8E<
zU|S-Kf?XY1iVv)Pk!*ODLyzB?j5IM?zrifvT?%~mN8^*GfSznB!c3)b&KNj7^}s^R
zE5tJp7Lf?&mUj+Xf?Pn%&UY89A5d<elOdlG`l@90G(+J_lqi#3i3oquEoIl3TapN5
z{z{G<QV6;Om$*wgK3QV{mwu+Q;2;<n8I^m{HZJBpIId%YvYLtua1lGsz`+}7jB+uH
z<`iO}qPkHzT4Er2mvocQ!_!Ox@|J1d&u|<W@<V$@sGJvbls+K7h+0&U!^F9vqXb>B
z<Tb7gMQ$6urF+W6bsHeyZUbGiD#I`pD9hu0(V<_J!Kr_!-EZR${x$<J5O+-9G6rD=
zB4~R$!EhCE1W3H`+!?(f5<$Qb3zT;(6xwPQJ{1XDk0F*!14Oa3u}dsO4>4Pmz6_mw
z8Pdb!4cLxggl<-?)T2BpeZr~Cz=)xnj)d<wDA8<eTc0ub4Qy@}O0?EI;f4yk6LQ1g
z#tX?F0p_r#i*uxCRo+)Lp>Z99O;0YT)cTnC+$~G;PqJV#P(?1d8Ud=ZUGXe1D5MhV
z7;_c}sel{iITQsF{Wo|#!+x+@Tu5M;I7mW^J~cBE;`jhrm)@d=D-x5`3Un(K(0iWT
z-AY8XP&t%O-ze;67O5?jg$BzPz>HKR9hl<HrMg~Ngq03e+$F8Bl+~tK(#9fI3fl5U
zT2DwELBwcN_Ixg5xsLt^6Xh6rgfifTQvnkA{X=#&Q+R{a*5yF;8agHAr_9hUF$~+7
zs@n&~TDpmFpej~djQ0%3kczObX}o+vLd?qNFqBkx0s&*|?k;9kUiyg>bS}*4?gi3V
z+IKRC6@I0qDO*)g6%rMd;ax$YmvSrr0A!$m)=#)<h<Ywacs(jMR>BIou}}m$(tFQ&
zPUSn4rBm|Li2e|sn4)0xV}MIw!e7EE7GnNI1U3xUa4UPU3tVd8qZad0oN)Z&<$~sA
zZYw0^a*Uwa4a@Z}j~ekQd|=2%DPc>(R1k;=m}5FXPbUz{Z3P%^_?H6m9N|+r27=n`
zmW7k&7ZCpdVqF04g~sVMES8da_>)+7{4BrMp4Ts@26oDALrh5%h8`hu9Y<zK9!iUM
zQB&XsiI-cykVTd^s1uLkqPWftYJE&bgLrj6c0pVctXBeIdl@(xf*e=sVd_fxZeu85
znQRrhqH1B4+sc5O8F#6;CGCb{T5}LqD~UFJ{{Rb!f+s_>6OniROBo}=Jugf~XSSwu
zYePI6kCnZ@7w}t&P^hSyB~}<rWlFwf4PWtqzGJEhlK_n{298E#YUMhp*w6||jhb}i
zJBM3R!^v?n)+AOPq~beAa+SbD7Bsy@9Jes8@}KqyW>(|3`5T%TT)>bqnt-&<EK=Lc
zHdMjK%AvkT_7$cfdY%k9Dfc&&V^CB=;L{xg4Ic|j;Q|_7-4lB3%fkewY-q_#{MMlc
zH;1$^{{Zk5RIDN;J&*8N#H(SbIDwg9GC@P(El#E)e6<l3{5y2G2jL4?#$aTP6<(8D
z+%fJjvoFlQC&IH1;k-(7(x+0g30r$6H=XzoKQ}WLh+)jki#cQRs)o&iA&sJ*Y>R_k
z`&=ni)EY!7U8WsDbcr5-&3&#k<+Y-7@PhlABcM4lGliTmVTGL~oh4oo$4QAq(%ejx
zapoC9hlytEete;93(PxVJC7MBiD#BxBY`m}FFZ@|ZDt9#%bd&c0@*<wKfnc)5&r<G
zNJ#m3T-5b%=`^PpiC{k=6Kpf~Ty91$0}`egsQ2-RBeEnPW^?XhRJ=HhK5X;np8#+1
z$oS)nETG(NQR;_O5Faippo8-j<%+ia7}g_V3iAK}zLzN?+Yy$${EHH5T!RCYS%Z&)
zU8K~&T{*a0xFm~Mh0&vH5Niurbf=3vBs>#ur^Iqt+dY_-PUWn~2T-ywq0GiC@Fj7=
z63*qF#<^`r62??O%O&C&mzpIm(AJk4p3s$@{J!B`EaSHlvAcdT@Vb{`C~gA}p0J<1
zZ8VBG#7hc<P!9ws18K|R0@QiTX6vHv+>vmVi@c^8%z&11!i@~H#l=@~``k<9cP*KU
zd|P5$2B2<SlNBgpQD$QXkcQ(5LKr?Oa{((UC=&J}6<9LnWz@;CaZ#hSBKB&k>)RZz
zOD*HXBXG4%M}_qoh{n|d@Oy{`p;4FaQ&YPbM$Sg@5`*MRCf`eOv@O+wC)vtsV_SDK
z!Cl8uV&3EY8<}n*0uxe*Nt^>1BvJxdES5}5C6I^~4{20+ZK1g_TGd1oR1-UjQ&+(p
zwcM@L5-Z3lq~;(6&V_da;%@~@f)&~=A!|jQRH{^XAwU#kQr$#m=Iq3F+3>;nEdbqm
VA<D3uGN{WhAKC^bxr)CZ|JgL8b};||

literal 0
HcmV?d00001

diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index d0599e611..f86687c6e 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -9,7 +9,6 @@
     "sidebar",
     "SearchForm.vue",
     "VersionSwitcher.vue",
-    "collapsible",
     "label",
     "dropdown-menu"
   ],
@@ -22,7 +21,7 @@
     },
     {
       "path": "block/Sidebar01/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar06.json b/apps/www/src/public/r/styles/default/Sidebar06.json
index d8f42d8a7..556210097 100644
--- a/apps/www/src/public/r/styles/default/Sidebar06.json
+++ b/apps/www/src/public/r/styles/default/Sidebar06.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "block/Sidebar06/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar10.json b/apps/www/src/public/r/styles/default/Sidebar10.json
new file mode 100644
index 000000000..987027a10
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar10.json
@@ -0,0 +1,71 @@
+{
+  "name": "Sidebar10",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "NavActions.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavFavorites.vue",
+    "NavMain.vue",
+    "NavSecondary.vue",
+    "NavWorkspaces.vue",
+    "TeamSwitcher.vue",
+    "button",
+    "popover",
+    "dropdown-menu",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar10/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar10/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavActions.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavFavorites.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavWorkspaces.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
new file mode 100644
index 000000000..6545b1e0b
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -0,0 +1,33 @@
+{
+  "name": "Sidebar11",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "Tree.vue",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar11/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar11/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar11/components/Tree.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar12.json b/apps/www/src/public/r/styles/default/Sidebar12.json
new file mode 100644
index 000000000..13238b694
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar12.json
@@ -0,0 +1,50 @@
+{
+  "name": "Sidebar12",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "Calendars.vue",
+    "DatePicker.vue",
+    "NavUser.vue",
+    "collapsible",
+    "calendar",
+    "avatar",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar12/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar12/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/Calendars.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/DatePicker.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar13.json b/apps/www/src/public/r/styles/default/Sidebar13.json
new file mode 100644
index 000000000..45e000319
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar13.json
@@ -0,0 +1,26 @@
+{
+  "name": "Sidebar13",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "SettingsDialog.vue",
+    "breadcrumb",
+    "button",
+    "dialog",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar13/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar13/components/SettingsDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar14.json b/apps/www/src/public/r/styles/default/Sidebar14.json
new file mode 100644
index 000000000..61f86f011
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar14.json
@@ -0,0 +1,24 @@
+{
+  "name": "Sidebar14",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar14/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar14/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar15.json b/apps/www/src/public/r/styles/default/Sidebar15.json
new file mode 100644
index 000000000..d72f6be0e
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar15.json
@@ -0,0 +1,98 @@
+{
+  "name": "Sidebar15",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "SidebarLeft.vue",
+    "SidebarRight.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar",
+    "NavFavorites.vue",
+    "NavMain.vue",
+    "NavSecondary.vue",
+    "NavWorkspaces.vue",
+    "TeamSwitcher.vue",
+    "Calendars.vue",
+    "DatePicker.vue",
+    "NavUser.vue"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar15/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar15/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/Calendars.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/DatePicker.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavFavorites.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavWorkspaces.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/SidebarLeft.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/SidebarRight.vue",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index d0599e611..f86687c6e 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -9,7 +9,6 @@
     "sidebar",
     "SearchForm.vue",
     "VersionSwitcher.vue",
-    "collapsible",
     "label",
     "dropdown-menu"
   ],
@@ -22,7 +21,7 @@
     },
     {
       "path": "block/Sidebar01/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar06.json b/apps/www/src/public/r/styles/new-york/Sidebar06.json
index d8f42d8a7..556210097 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar06.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar06.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "block/Sidebar06/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar10.json b/apps/www/src/public/r/styles/new-york/Sidebar10.json
new file mode 100644
index 000000000..987027a10
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar10.json
@@ -0,0 +1,71 @@
+{
+  "name": "Sidebar10",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "NavActions.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "NavFavorites.vue",
+    "NavMain.vue",
+    "NavSecondary.vue",
+    "NavWorkspaces.vue",
+    "TeamSwitcher.vue",
+    "button",
+    "popover",
+    "dropdown-menu",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar10/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar10/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavActions.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavFavorites.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/NavWorkspaces.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar10/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar11.json b/apps/www/src/public/r/styles/new-york/Sidebar11.json
new file mode 100644
index 000000000..6545b1e0b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar11.json
@@ -0,0 +1,33 @@
+{
+  "name": "Sidebar11",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "Tree.vue",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar11/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar11/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar11/components/Tree.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar12.json b/apps/www/src/public/r/styles/new-york/Sidebar12.json
new file mode 100644
index 000000000..13238b694
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar12.json
@@ -0,0 +1,50 @@
+{
+  "name": "Sidebar12",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "Calendars.vue",
+    "DatePicker.vue",
+    "NavUser.vue",
+    "collapsible",
+    "calendar",
+    "avatar",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar12/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar12/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/Calendars.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/DatePicker.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar12/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar13.json b/apps/www/src/public/r/styles/new-york/Sidebar13.json
new file mode 100644
index 000000000..45e000319
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar13.json
@@ -0,0 +1,26 @@
+{
+  "name": "Sidebar13",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "SettingsDialog.vue",
+    "breadcrumb",
+    "button",
+    "dialog",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar13/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar13/components/SettingsDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar14.json b/apps/www/src/public/r/styles/new-york/Sidebar14.json
new file mode 100644
index 000000000..61f86f011
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar14.json
@@ -0,0 +1,24 @@
+{
+  "name": "Sidebar14",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar14/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar14/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar15.json b/apps/www/src/public/r/styles/new-york/Sidebar15.json
new file mode 100644
index 000000000..d72f6be0e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar15.json
@@ -0,0 +1,98 @@
+{
+  "name": "Sidebar15",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "SidebarLeft.vue",
+    "SidebarRight.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar",
+    "NavFavorites.vue",
+    "NavMain.vue",
+    "NavSecondary.vue",
+    "NavWorkspaces.vue",
+    "TeamSwitcher.vue",
+    "Calendars.vue",
+    "DatePicker.vue",
+    "NavUser.vue"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar15/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar15/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/Calendars.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/DatePicker.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavFavorites.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavMain.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavSecondary.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavUser.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/NavWorkspaces.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/SidebarLeft.vue",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/SidebarRight.vue",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar15/components/TeamSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index dbeef8def..3db7b0c36 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -6728,7 +6728,6 @@
       "sidebar",
       "SearchForm.vue",
       "VersionSwitcher.vue",
-      "collapsible",
       "label",
       "dropdown-menu"
     ],
@@ -6741,7 +6740,7 @@
       },
       {
         "path": "block/Sidebar01/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -6917,7 +6916,7 @@
       },
       {
         "path": "block/Sidebar06/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -7077,6 +7076,308 @@
       }
     ]
   },
+  {
+    "name": "Sidebar10",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "NavActions.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavFavorites.vue",
+      "NavMain.vue",
+      "NavSecondary.vue",
+      "NavWorkspaces.vue",
+      "TeamSwitcher.vue",
+      "button",
+      "popover",
+      "dropdown-menu",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar10/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar10/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavActions.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavFavorites.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavWorkspaces.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar11",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "Tree.vue",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar11/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar11/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar11/components/Tree.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar12",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "Calendars.vue",
+      "DatePicker.vue",
+      "NavUser.vue",
+      "collapsible",
+      "calendar",
+      "avatar",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar12/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar12/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/Calendars.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/DatePicker.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar13",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "SettingsDialog.vue",
+      "breadcrumb",
+      "button",
+      "dialog",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar13/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar13/components/SettingsDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar14",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar14/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar14/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar15",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "SidebarLeft.vue",
+      "SidebarRight.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "collapsible",
+      "calendar",
+      "dropdown-menu",
+      "avatar",
+      "NavFavorites.vue",
+      "NavMain.vue",
+      "NavSecondary.vue",
+      "NavWorkspaces.vue",
+      "TeamSwitcher.vue",
+      "Calendars.vue",
+      "DatePicker.vue",
+      "NavUser.vue"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar15/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar15/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/Calendars.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/DatePicker.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavFavorites.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavWorkspaces.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/SidebarLeft.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/SidebarRight.vue",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "accordion",
     "type": "registry:ui",
@@ -13619,7 +13920,6 @@
       "sidebar",
       "SearchForm.vue",
       "VersionSwitcher.vue",
-      "collapsible",
       "label",
       "dropdown-menu"
     ],
@@ -13632,7 +13932,7 @@
       },
       {
         "path": "block/Sidebar01/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -13808,7 +14108,7 @@
       },
       {
         "path": "block/Sidebar06/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -13967,5 +14267,307 @@
         "target": ""
       }
     ]
+  },
+  {
+    "name": "Sidebar10",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "NavActions.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "NavFavorites.vue",
+      "NavMain.vue",
+      "NavSecondary.vue",
+      "NavWorkspaces.vue",
+      "TeamSwitcher.vue",
+      "button",
+      "popover",
+      "dropdown-menu",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar10/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar10/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavActions.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavFavorites.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/NavWorkspaces.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar10/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar11",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "Tree.vue",
+      "collapsible"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar11/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar11/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar11/components/Tree.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar12",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "Calendars.vue",
+      "DatePicker.vue",
+      "NavUser.vue",
+      "collapsible",
+      "calendar",
+      "avatar",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar12/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar12/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/Calendars.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/DatePicker.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar12/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar13",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "SettingsDialog.vue",
+      "breadcrumb",
+      "button",
+      "dialog",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar13/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar13/components/SettingsDialog.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar14",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar14/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar14/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "Sidebar15",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "SidebarLeft.vue",
+      "SidebarRight.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "collapsible",
+      "calendar",
+      "dropdown-menu",
+      "avatar",
+      "NavFavorites.vue",
+      "NavMain.vue",
+      "NavSecondary.vue",
+      "NavWorkspaces.vue",
+      "TeamSwitcher.vue",
+      "Calendars.vue",
+      "DatePicker.vue",
+      "NavUser.vue"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar15/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar15/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/Calendars.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/DatePicker.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavFavorites.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavMain.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavSecondary.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavUser.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/NavWorkspaces.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/SidebarLeft.vue",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/SidebarRight.vue",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar15/components/TeamSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
   }
 ]
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
index 205343241..2fe6c8f1e 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
@@ -43,7 +43,7 @@ const selectedVersion = ref(props.defaultVersion)
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width]"
+          class="w-[--reka-dropdown-menu-trigger-width]"
           align="start"
         >
           <DropdownMenuItem
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
index 03fd20c8b..5c388c1af 100644
--- a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
@@ -42,7 +42,7 @@ const selectedVersion = ref(props.defaultVersion)
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width]"
+          class="w-[--reka-dropdown-menu-trigger-width]"
           align="start"
         >
           <DropdownMenuItem
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
index 1f1ab2f77..b6f1b6247 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
index 5bb792dcf..0a2079944 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
@@ -53,7 +53,7 @@ const activeTeam = ref(props.teams[0])
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           align="start"
           :side="isMobile ? 'bottom' : 'right'"
           :side-offset="4"
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
index 1f1ab2f77..b6f1b6247 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
index 34a0843e9..4a31d47c9 100644
--- a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
new file mode 100644
index 000000000..15a158038
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
+
+import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: Command,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Search',
+      url: '#',
+      icon: Search,
+    },
+    {
+      title: 'Ask AI',
+      url: '#',
+      icon: Sparkles,
+    },
+    {
+      title: 'Home',
+      url: '#',
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      badge: '10',
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Calendar',
+      url: '#',
+      icon: Calendar,
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+    },
+    {
+      title: 'Templates',
+      url: '#',
+      icon: Blocks,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+    },
+    {
+      title: 'Help',
+      url: '#',
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: 'Project Management & Task Tracking',
+      url: '#',
+      emoji: '📊',
+    },
+    {
+      name: 'Family Recipe Collection & Meal Planning',
+      url: '#',
+      emoji: '🍳',
+    },
+    {
+      name: 'Fitness Tracker & Workout Routines',
+      url: '#',
+      emoji: '💪',
+    },
+    {
+      name: 'Book Notes & Reading List',
+      url: '#',
+      emoji: '📚',
+    },
+    {
+      name: 'Sustainable Gardening Tips & Plant Care',
+      url: '#',
+      emoji: '🌱',
+    },
+    {
+      name: 'Language Learning Progress & Resources',
+      url: '#',
+      emoji: '🗣️',
+    },
+    {
+      name: 'Home Renovation Ideas & Budget Tracker',
+      url: '#',
+      emoji: '🏠',
+    },
+    {
+      name: 'Personal Finance & Investment Portfolio',
+      url: '#',
+      emoji: '💰',
+    },
+    {
+      name: 'Movie & TV Show Watchlist with Reviews',
+      url: '#',
+      emoji: '🎬',
+    },
+    {
+      name: 'Daily Habit Tracker & Goal Setting',
+      url: '#',
+      emoji: '✅',
+    },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        {
+          name: 'Daily Journal & Reflection',
+          url: '#',
+          emoji: '📔',
+        },
+        {
+          name: 'Health & Wellness Tracker',
+          url: '#',
+          emoji: '🍏',
+        },
+        {
+          name: 'Personal Growth & Learning Goals',
+          url: '#',
+          emoji: '🌟',
+        },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        {
+          name: 'Career Objectives & Milestones',
+          url: '#',
+          emoji: '🎯',
+        },
+        {
+          name: 'Skill Acquisition & Training Log',
+          url: '#',
+          emoji: '🧠',
+        },
+        {
+          name: 'Networking Contacts & Events',
+          url: '#',
+          emoji: '🤝',
+        },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        {
+          name: 'Writing Ideas & Story Outlines',
+          url: '#',
+          emoji: '✍️',
+        },
+        {
+          name: 'Art & Design Portfolio',
+          url: '#',
+          emoji: '🖼️',
+        },
+        {
+          name: 'Music Composition & Practice Log',
+          url: '#',
+          emoji: '🎵',
+        },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        {
+          name: 'Household Budget & Expense Tracking',
+          url: '#',
+          emoji: '💰',
+        },
+        {
+          name: 'Home Maintenance Schedule & Tasks',
+          url: '#',
+          emoji: '🔧',
+        },
+        {
+          name: 'Family Calendar & Event Planning',
+          url: '#',
+          emoji: '📅',
+        },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        {
+          name: 'Trip Planning & Itineraries',
+          url: '#',
+          emoji: '🗺️',
+        },
+        {
+          name: 'Travel Bucket List & Inspiration',
+          url: '#',
+          emoji: '🌎',
+        },
+        {
+          name: 'Travel Journal & Photo Gallery',
+          url: '#',
+          emoji: '📸',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar class="border-r-0" v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+      <NavMain :items="data.navMain" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavFavorites :favorites="data.favorites" />
+      <NavWorkspaces :workspaces="data.workspaces" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
new file mode 100644
index 000000000..a3b303d39
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/new-york/ui/popover'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowDown,
+  ArrowUp,
+  Bell,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  LineChart,
+  Link,
+  MoreHorizontal,
+  Settings2,
+  Star,
+  Trash,
+  Trash2,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const data = [
+  [
+    {
+      label: 'Customize Page',
+      icon: Settings2,
+    },
+    {
+      label: 'Turn into wiki',
+      icon: FileText,
+    },
+  ],
+  [
+    {
+      label: 'Copy Link',
+      icon: Link,
+    },
+    {
+      label: 'Duplicate',
+      icon: Copy,
+    },
+    {
+      label: 'Move to',
+      icon: CornerUpRight,
+    },
+    {
+      label: 'Move to Trash',
+      icon: Trash2,
+    },
+  ],
+  [
+    {
+      label: 'Undo',
+      icon: CornerUpLeft,
+    },
+    {
+      label: 'View analytics',
+      icon: LineChart,
+    },
+    {
+      label: 'Version History',
+      icon: GalleryVerticalEnd,
+    },
+    {
+      label: 'Show delete pages',
+      icon: Trash,
+    },
+    {
+      label: 'Notifications',
+      icon: Bell,
+    },
+  ],
+  [
+    {
+      label: 'Import',
+      icon: ArrowUp,
+    },
+    {
+      label: 'Export',
+      icon: ArrowDown,
+    },
+  ],
+]
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center gap-2 text-sm">
+    <div class="hidden font-medium text-muted-foreground md:inline-block">
+      Edit Oct 08
+    </div>
+    <Button variant="ghost" size="icon" class="h-7 w-7">
+      <Star />
+    </Button>
+    <Popover v-model:open="isOpen">
+      <PopoverTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7 data-[state=open]:bg-accent"
+        >
+          <MoreHorizontal />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        class="w-56 overflow-hidden rounded-lg p-0"
+        align="end"
+      >
+        <Sidebar collapsible="none" class="bg-transparent">
+          <SidebarContent>
+            <SidebarGroup v-for="(group, index) in data" :key="index" class="border-b last:border-none">
+              <SidebarGroupContent class="gap-0">
+                <SidebarMenu>
+                  <SidebarMenuItem v-for="(item, index) in group" :key="index">
+                    <SidebarMenuButton>
+                      <component :is="item.icon" /> <span>{{ item.label }}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
new file mode 100644
index 000000000..97a99afc4
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in favorites" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url" :title="item.name">
+            <span>{{ item.emoji }}</span>
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <StarOff class="text-muted-foreground" />
+              <span>Remove from Favorites</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Link class="text-muted-foreground" />
+              <span>Copy Link</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ArrowUpRight class="text-muted-foreground" />
+              <span>Open in New Tab</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
new file mode 100644
index 000000000..3fb44bcde
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="item in items" :key="item.title">
+      <SidebarMenuButton as-child :is-active="item.isActive">
+        <a :href="item.url">
+          <component :is="item.icon" />
+          <span>{{ item.title }}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
new file mode 100644
index 000000000..3d728239f
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import type { Component } from 'vue'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: Component
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child>
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <SidebarMenuBadge v-if="item.badge">
+            <component :is="item.badge" />
+          </SidebarMenuBadge>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
new file mode 100644
index 000000000..b768426d6
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
+
+defineProps<{
+  workspaces: {
+    name: string
+    emoji: string
+    pages: {
+      name: string
+      emoji: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <Collapsible v-for="workspace in workspaces" :key="workspace.name">
+          <SidebarMenuItem>
+            <SidebarMenuButton as-child>
+              <a href="#">
+                <span>{{ workspace.emoji }}</span>
+                <span>{{ workspace.name }}</span>
+              </a>
+            </SidebarMenuButton>
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction
+                class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                show-on-hover
+              >
+                <ChevronRight />
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <SidebarMenuAction show-on-hover>
+              <Plus />
+            </SidebarMenuAction>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
+                  <SidebarMenuSubButton as-child>
+                    <a href="#">
+                      <span>{{ page.emoji }}</span>
+                      <span>{{ page.name }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
new file mode 100644
index 000000000..125caaa3e
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton class="w-fit px-1.5">
+            <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-3" />
+            </div>
+            <span class="truncate font-semibold">{{ activeTeam.name }}</span>
+            <ChevronDown class="opacity-50" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-64 rounded-lg"
+          align="start"
+          side="bottom"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/page.vue b/apps/www/src/registry/default/block/Sidebar10/page.vue
new file mode 100644
index 000000000..a48f22264
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar10/page.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+export const description = 'A sidebar in a popover.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
+import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-14 shrink-0 items-center gap-2">
+        <div class="flex flex-1 items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage class="line-clamp-1">
+                  Project Management & Task Tracking
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+        <div class="ml-auto px-3">
+          <NavActions />
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 px-4 py-10">
+        <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+        <div class="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
new file mode 100644
index 000000000..0039f959c
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { File } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: 'README.md',
+      state: 'M',
+    },
+    {
+      file: 'api/hello/route.ts',
+      state: 'U',
+    },
+    {
+      file: 'app/layout.tsx',
+      state: 'M',
+    },
+  ],
+  tree: [
+    [
+      'app',
+      [
+        'api',
+        ['hello', ['route.ts']],
+        'page.tsx',
+        'layout.tsx',
+        ['blog', ['page.tsx']],
+      ],
+    ],
+    [
+      'components',
+      ['ui', 'button.tsx', 'card.tsx'],
+      'header.tsx',
+      'footer.tsx',
+    ],
+    ['lib', ['util.ts']],
+    ['public', 'favicon.ico', 'vercel.svg'],
+    '.eslintrc.json',
+    '.gitignore',
+    'next.config.js',
+    'tailwind.config.js',
+    'package.json',
+    'README.md',
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Changes</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="(item, index) in data.changes" :key="index">
+              <SidebarMenuButton>
+                <File />
+                {{ item.file }}
+              </SidebarMenuButton>
+              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+      <SidebarGroup>
+        <SidebarGroupLabel>Files</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <Tree v-for="(item, index) in data.tree" :key="index" :item="item" />
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
new file mode 100644
index 000000000..f8fce337f
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, File, Folder } from 'lucide-vue-next'
+
+const props = defineProps<{
+  item: string | any[]
+}>()
+
+const [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]
+</script>
+
+<template>
+  <SidebarMenuButton
+    v-if="!items.length"
+    :is-active="name === 'button.tsx'"
+    class="data-[active=true]:bg-transparent"
+  >
+    <File />
+    {{ name }}
+  </SidebarMenuButton>
+
+  <SidebarMenuItem v-else>
+    <Collapsible
+      class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+      :default-open="name === 'components' || name === 'ui'"
+    >
+      <CollapsibleTrigger as-child>
+        <SidebarMenuButton>
+          <ChevronRight class="transition-transform" />
+          <Folder />
+          {{ name }}
+        </SidebarMenuButton>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          <Tree v-for="(subItem, index) in items" :key="index" :item="subItem" />
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  </SidebarMenuItem>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar11/page.vue b/apps/www/src/registry/default/block/Sidebar11/page.vue
new file mode 100644
index 000000000..baa2bdb05
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar11/page.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+export const description = 'A sidebar with a collapsible file tree.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                components
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                ui
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>button.tsx</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
new file mode 100644
index 000000000..1425cc456
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
+
+import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
+import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  calendars: [
+    {
+      name: 'My Calendars',
+      items: ['Personal', 'Work', 'Family'],
+    },
+    {
+      name: 'Favorites',
+      items: ['Holidays', 'Birthdays'],
+    },
+    {
+      name: 'Other',
+      items: ['Travel', 'Reminders', 'Deadlines'],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader class="h-16 border-b border-sidebar-border">
+      <NavUser :user="data.user" />
+    </SidebarHeader>
+    <SidebarContent>
+      <DatePicker />
+      <SidebarSeparator class="mx-0" />
+      <Calendars :calendars="data.calendars" />
+    </SidebarContent>
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <Plus />
+            <span>New Calendar</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
new file mode 100644
index 000000000..09a713c57
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}>()
+</script>
+
+<template>
+  <template v-for="(calendar, index) in calendars" :key="calendar.name">
+    <SidebarGroup class="py-0">
+      <Collapsible
+        :default-open="index === 0"
+        class="group/collapsible"
+      >
+        <SidebarGroupLabel
+          as-child
+          class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <CollapsibleTrigger>
+            {{ calendar.name }}
+            <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
+                <SidebarMenuButton>
+                  <div
+                    :data-active="index < 2"
+                    class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                  >
+                    <Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                  </div>
+                  {{ item }}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+    <SidebarSeparator class="mx-0" />
+  </template>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
new file mode 100644
index 000000000..ec51c38bf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarGroup class="px-0">
+    <SidebarGroupContent>
+      <Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
new file mode 100644
index 000000000..42bd13bdf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="start"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/page.vue b/apps/www/src/registry/default/block/Sidebar12/page.vue
new file mode 100644
index 000000000..00d254303
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar12/page.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+export const description = 'A sidebar with a calendar.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>October 2024</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-5">
+          <div v-for="i in 20" :key="i" class="aspect-square rounded-xl bg-muted/50" />
+        </div>
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
new file mode 100644
index 000000000..ab6e23be6
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from '@/registry/new-york/ui/dialog'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const data = {
+  nav: [
+    { name: 'Notifications', icon: Bell },
+    { name: 'Navigation', icon: Menu },
+    { name: 'Home', icon: Home },
+    { name: 'Appearance', icon: Paintbrush },
+    { name: 'Messages & media', icon: MessageCircle },
+    { name: 'Language & region', icon: Globe },
+    { name: 'Accessibility', icon: Keyboard },
+    { name: 'Mark as read', icon: Check },
+    { name: 'Audio & video', icon: Video },
+    { name: 'Connected accounts', icon: Link },
+    { name: 'Privacy & visibility', icon: Lock },
+    { name: 'Advanced', icon: Settings },
+  ],
+}
+
+const open = ref(true)
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger as-child>
+      <Button size="sm">
+        Open Dialog
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+      <DialogTitle class="sr-only">
+        Settings
+      </DialogTitle>
+      <DialogDescription class="sr-only">
+        Customize your settings here.
+      </DialogDescription>
+      <SidebarProvider class="items-start">
+        <Sidebar collapsible="none" class="hidden md:flex">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem v-for="item in data.nav" :key="item.name">
+                    <SidebarMenuButton
+                      as-child
+                      :is-active="item.name === 'Messages & media'"
+                    >
+                      <a href="#">
+                        <component :is="item.icon" />
+                        <span>{{ item.name }}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <main class="flex h-[480px] flex-1 flex-col overflow-hidden">
+          <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+            <div class="flex items-center gap-2 px-4">
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem class="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Settings
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator class="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+            <div
+              v-for="i in 10"
+              :key="i"
+              class="aspect-video max-w-3xl rounded-xl bg-muted/50"
+            />
+          </div>
+        </main>
+      </SidebarProvider>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar13/page.vue b/apps/www/src/registry/default/block/Sidebar13/page.vue
new file mode 100644
index 000000000..1b5220cd8
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar13/page.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+export const description = 'A sidebar in a dialog.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
+</script>
+
+<template>
+  <div class="flex h-svh items-center justify-center">
+    <SettingsDialog />
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
new file mode 100644
index 000000000..6c72d051a
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type {
+  SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+              <SidebarMenuButton as-child>
+                <a :href="item.url" class="font-medium">
+                  {{ item.title }}
+                </a>
+              </SidebarMenuButton>
+              <SidebarMenuSub v-if="item.items.length">
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton
+                    as-child
+                    :is-active="subItem.isActive"
+                  >
+                    <a :href="subItem.url">{{ subItem.title }}</a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar14/page.vue b/apps/www/src/registry/default/block/Sidebar14/page.vue
new file mode 100644
index 000000000..ee75a15b8
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar14/page.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar on the right.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <SidebarTrigger class="-mr-1 ml-auto rotate-180" />
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+    <AppSidebar side="right" />
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
new file mode 100644
index 000000000..6c72d051a
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type {
+  SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+              <SidebarMenuButton as-child>
+                <a :href="item.url" class="font-medium">
+                  {{ item.title }}
+                </a>
+              </SidebarMenuButton>
+              <SidebarMenuSub v-if="item.items.length">
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton
+                    as-child
+                    :is-active="subItem.isActive"
+                  >
+                    <a :href="subItem.url">{{ subItem.title }}</a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
new file mode 100644
index 000000000..09a713c57
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}>()
+</script>
+
+<template>
+  <template v-for="(calendar, index) in calendars" :key="calendar.name">
+    <SidebarGroup class="py-0">
+      <Collapsible
+        :default-open="index === 0"
+        class="group/collapsible"
+      >
+        <SidebarGroupLabel
+          as-child
+          class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <CollapsibleTrigger>
+            {{ calendar.name }}
+            <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
+                <SidebarMenuButton>
+                  <div
+                    :data-active="index < 2"
+                    class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                  >
+                    <Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                  </div>
+                  {{ item }}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+    <SidebarSeparator class="mx-0" />
+  </template>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
new file mode 100644
index 000000000..ec51c38bf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarGroup class="px-0">
+    <SidebarGroupContent>
+      <Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
new file mode 100644
index 000000000..97a99afc4
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in favorites" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url" :title="item.name">
+            <span>{{ item.emoji }}</span>
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <StarOff class="text-muted-foreground" />
+              <span>Remove from Favorites</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Link class="text-muted-foreground" />
+              <span>Copy Link</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ArrowUpRight class="text-muted-foreground" />
+              <span>Open in New Tab</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
new file mode 100644
index 000000000..3fb44bcde
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="item in items" :key="item.title">
+      <SidebarMenuButton as-child :is-active="item.isActive">
+        <a :href="item.url">
+          <component :is="item.icon" />
+          <span>{{ item.title }}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
new file mode 100644
index 000000000..3d728239f
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import type { Component } from 'vue'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: Component
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child>
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <SidebarMenuBadge v-if="item.badge">
+            <component :is="item.badge" />
+          </SidebarMenuBadge>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
new file mode 100644
index 000000000..42bd13bdf
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="start"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
new file mode 100644
index 000000000..b768426d6
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
+
+defineProps<{
+  workspaces: {
+    name: string
+    emoji: string
+    pages: {
+      name: string
+      emoji: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <Collapsible v-for="workspace in workspaces" :key="workspace.name">
+          <SidebarMenuItem>
+            <SidebarMenuButton as-child>
+              <a href="#">
+                <span>{{ workspace.emoji }}</span>
+                <span>{{ workspace.name }}</span>
+              </a>
+            </SidebarMenuButton>
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction
+                class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                show-on-hover
+              >
+                <ChevronRight />
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <SidebarMenuAction show-on-hover>
+              <Plus />
+            </SidebarMenuAction>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
+                  <SidebarMenuSubButton as-child>
+                    <a href="#">
+                      <span>{{ page.emoji }}</span>
+                      <span>{{ page.name }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
new file mode 100644
index 000000000..0a30d6201
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
+
+import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: Command,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Search',
+      url: '#',
+      icon: Search,
+    },
+    {
+      title: 'Ask AI',
+      url: '#',
+      icon: Sparkles,
+    },
+    {
+      title: 'Home',
+      url: '#',
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      badge: '10',
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Calendar',
+      url: '#',
+      icon: Calendar,
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+    },
+    {
+      title: 'Templates',
+      url: '#',
+      icon: Blocks,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+    },
+    {
+      title: 'Help',
+      url: '#',
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: 'Project Management & Task Tracking',
+      url: '#',
+      emoji: '📊',
+    },
+    {
+      name: 'Family Recipe Collection & Meal Planning',
+      url: '#',
+      emoji: '🍳',
+    },
+    {
+      name: 'Fitness Tracker & Workout Routines',
+      url: '#',
+      emoji: '💪',
+    },
+    {
+      name: 'Book Notes & Reading List',
+      url: '#',
+      emoji: '📚',
+    },
+    {
+      name: 'Sustainable Gardening Tips & Plant Care',
+      url: '#',
+      emoji: '🌱',
+    },
+    {
+      name: 'Language Learning Progress & Resources',
+      url: '#',
+      emoji: '🗣️',
+    },
+    {
+      name: 'Home Renovation Ideas & Budget Tracker',
+      url: '#',
+      emoji: '🏠',
+    },
+    {
+      name: 'Personal Finance & Investment Portfolio',
+      url: '#',
+      emoji: '💰',
+    },
+    {
+      name: 'Movie & TV Show Watchlist with Reviews',
+      url: '#',
+      emoji: '🎬',
+    },
+    {
+      name: 'Daily Habit Tracker & Goal Setting',
+      url: '#',
+      emoji: '✅',
+    },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        {
+          name: 'Daily Journal & Reflection',
+          url: '#',
+          emoji: '📔',
+        },
+        {
+          name: 'Health & Wellness Tracker',
+          url: '#',
+          emoji: '🍏',
+        },
+        {
+          name: 'Personal Growth & Learning Goals',
+          url: '#',
+          emoji: '🌟',
+        },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        {
+          name: 'Career Objectives & Milestones',
+          url: '#',
+          emoji: '🎯',
+        },
+        {
+          name: 'Skill Acquisition & Training Log',
+          url: '#',
+          emoji: '🧠',
+        },
+        {
+          name: 'Networking Contacts & Events',
+          url: '#',
+          emoji: '🤝',
+        },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        {
+          name: 'Writing Ideas & Story Outlines',
+          url: '#',
+          emoji: '✍️',
+        },
+        {
+          name: 'Art & Design Portfolio',
+          url: '#',
+          emoji: '🖼️',
+        },
+        {
+          name: 'Music Composition & Practice Log',
+          url: '#',
+          emoji: '🎵',
+        },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        {
+          name: 'Household Budget & Expense Tracking',
+          url: '#',
+          emoji: '💰',
+        },
+        {
+          name: 'Home Maintenance Schedule & Tasks',
+          url: '#',
+          emoji: '🔧',
+        },
+        {
+          name: 'Family Calendar & Event Planning',
+          url: '#',
+          emoji: '📅',
+        },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        {
+          name: 'Trip Planning & Itineraries',
+          url: '#',
+          emoji: '🗺️',
+        },
+        {
+          name: 'Travel Bucket List & Inspiration',
+          url: '#',
+          emoji: '🌎',
+        },
+        {
+          name: 'Travel Journal & Photo Gallery',
+          url: '#',
+          emoji: '📸',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar class="border-r-0" v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+      <NavMain :items="data.navMain" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavFavorites :favorites="data.favorites" />
+      <NavWorkspaces :workspaces="data.workspaces" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
new file mode 100644
index 000000000..840c94578
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
+
+import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
+import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Plus } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'none',
+})
+
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  calendars: [
+    {
+      name: 'My Calendars',
+      items: ['Personal', 'Work', 'Family'],
+    },
+    {
+      name: 'Favorites',
+      items: ['Holidays', 'Birthdays'],
+    },
+    {
+      name: 'Other',
+      items: ['Travel', 'Reminders', 'Deadlines'],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar
+    class="sticky hidden lg:flex top-0 h-svh border-l"
+    v-bind="props"
+  >
+    <SidebarHeader class="h-16 border-b border-sidebar-border">
+      <NavUser :user="data.user" />
+    </SidebarHeader>
+    <SidebarContent>
+      <DatePicker />
+      <SidebarSeparator class="mx-0" />
+      <Calendars :calendars="data.calendars" />
+    </SidebarContent>
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <Plus />
+            <span>New Calendar</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
new file mode 100644
index 000000000..341074cda
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton class="w-fit px-1.5">
+            <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-3" />
+            </div>
+            <span class="truncate font-semibold">{{ activeTeam.name }}</span>
+            <ChevronDown class="opacity-50" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-64 rounded-lg"
+          align="start"
+          side="bottom"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/page.vue b/apps/www/src/registry/default/block/Sidebar15/page.vue
new file mode 100644
index 000000000..2ff6b9cb9
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar15/page.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A left and right sidebar.'
+</script>
+
+<script setup lang="ts">
+import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
+import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <SidebarLeft />
+    <SidebarInset>
+      <header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+        <div class="flex flex-1 items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage class="line-clamp-1">
+                  Project Management & Task Tracking
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+        <div class="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+      </div>
+    </SidebarInset>
+    <SidebarRight />
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
index 205343241..2fe6c8f1e 100644
--- a/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
@@ -43,7 +43,7 @@ const selectedVersion = ref(props.defaultVersion)
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width]"
+          class="w-[--reka-dropdown-menu-trigger-width]"
           align="start"
         >
           <DropdownMenuItem
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
index 367499292..89c5e0acc 100644
--- a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
@@ -42,7 +42,7 @@ const selectedVersion = ref(props.defaultVersion)
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width]"
+          class="w-[--reka-dropdown-menu-trigger-width]"
           align="start"
         >
           <DropdownMenuItem
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
index 1f1ab2f77..b6f1b6247 100644
--- a/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
index 5bb792dcf..0a2079944 100644
--- a/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
@@ -53,7 +53,7 @@ const activeTeam = ref(props.teams[0])
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           align="start"
           :side="isMobile ? 'bottom' : 'right'"
           :side-offset="4"
diff --git a/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
index 1f1ab2f77..b6f1b6247 100644
--- a/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
index 34a0843e9..4a31d47c9 100644
--- a/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
@@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
           </SidebarMenuButton>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
           :side="isMobile ? 'bottom' : 'right'"
           align="end"
           :side-offset="4"
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/AppSidebar.vue
new file mode 100644
index 000000000..15a158038
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/AppSidebar.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
+
+import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: Command,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Search',
+      url: '#',
+      icon: Search,
+    },
+    {
+      title: 'Ask AI',
+      url: '#',
+      icon: Sparkles,
+    },
+    {
+      title: 'Home',
+      url: '#',
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      badge: '10',
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Calendar',
+      url: '#',
+      icon: Calendar,
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+    },
+    {
+      title: 'Templates',
+      url: '#',
+      icon: Blocks,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+    },
+    {
+      title: 'Help',
+      url: '#',
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: 'Project Management & Task Tracking',
+      url: '#',
+      emoji: '📊',
+    },
+    {
+      name: 'Family Recipe Collection & Meal Planning',
+      url: '#',
+      emoji: '🍳',
+    },
+    {
+      name: 'Fitness Tracker & Workout Routines',
+      url: '#',
+      emoji: '💪',
+    },
+    {
+      name: 'Book Notes & Reading List',
+      url: '#',
+      emoji: '📚',
+    },
+    {
+      name: 'Sustainable Gardening Tips & Plant Care',
+      url: '#',
+      emoji: '🌱',
+    },
+    {
+      name: 'Language Learning Progress & Resources',
+      url: '#',
+      emoji: '🗣️',
+    },
+    {
+      name: 'Home Renovation Ideas & Budget Tracker',
+      url: '#',
+      emoji: '🏠',
+    },
+    {
+      name: 'Personal Finance & Investment Portfolio',
+      url: '#',
+      emoji: '💰',
+    },
+    {
+      name: 'Movie & TV Show Watchlist with Reviews',
+      url: '#',
+      emoji: '🎬',
+    },
+    {
+      name: 'Daily Habit Tracker & Goal Setting',
+      url: '#',
+      emoji: '✅',
+    },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        {
+          name: 'Daily Journal & Reflection',
+          url: '#',
+          emoji: '📔',
+        },
+        {
+          name: 'Health & Wellness Tracker',
+          url: '#',
+          emoji: '🍏',
+        },
+        {
+          name: 'Personal Growth & Learning Goals',
+          url: '#',
+          emoji: '🌟',
+        },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        {
+          name: 'Career Objectives & Milestones',
+          url: '#',
+          emoji: '🎯',
+        },
+        {
+          name: 'Skill Acquisition & Training Log',
+          url: '#',
+          emoji: '🧠',
+        },
+        {
+          name: 'Networking Contacts & Events',
+          url: '#',
+          emoji: '🤝',
+        },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        {
+          name: 'Writing Ideas & Story Outlines',
+          url: '#',
+          emoji: '✍️',
+        },
+        {
+          name: 'Art & Design Portfolio',
+          url: '#',
+          emoji: '🖼️',
+        },
+        {
+          name: 'Music Composition & Practice Log',
+          url: '#',
+          emoji: '🎵',
+        },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        {
+          name: 'Household Budget & Expense Tracking',
+          url: '#',
+          emoji: '💰',
+        },
+        {
+          name: 'Home Maintenance Schedule & Tasks',
+          url: '#',
+          emoji: '🔧',
+        },
+        {
+          name: 'Family Calendar & Event Planning',
+          url: '#',
+          emoji: '📅',
+        },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        {
+          name: 'Trip Planning & Itineraries',
+          url: '#',
+          emoji: '🗺️',
+        },
+        {
+          name: 'Travel Bucket List & Inspiration',
+          url: '#',
+          emoji: '🌎',
+        },
+        {
+          name: 'Travel Journal & Photo Gallery',
+          url: '#',
+          emoji: '📸',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar class="border-r-0" v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+      <NavMain :items="data.navMain" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavFavorites :favorites="data.favorites" />
+      <NavWorkspaces :workspaces="data.workspaces" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/NavActions.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/NavActions.vue
new file mode 100644
index 000000000..a3b303d39
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/NavActions.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/new-york/ui/popover'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowDown,
+  ArrowUp,
+  Bell,
+  Copy,
+  CornerUpLeft,
+  CornerUpRight,
+  FileText,
+  GalleryVerticalEnd,
+  LineChart,
+  Link,
+  MoreHorizontal,
+  Settings2,
+  Star,
+  Trash,
+  Trash2,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const data = [
+  [
+    {
+      label: 'Customize Page',
+      icon: Settings2,
+    },
+    {
+      label: 'Turn into wiki',
+      icon: FileText,
+    },
+  ],
+  [
+    {
+      label: 'Copy Link',
+      icon: Link,
+    },
+    {
+      label: 'Duplicate',
+      icon: Copy,
+    },
+    {
+      label: 'Move to',
+      icon: CornerUpRight,
+    },
+    {
+      label: 'Move to Trash',
+      icon: Trash2,
+    },
+  ],
+  [
+    {
+      label: 'Undo',
+      icon: CornerUpLeft,
+    },
+    {
+      label: 'View analytics',
+      icon: LineChart,
+    },
+    {
+      label: 'Version History',
+      icon: GalleryVerticalEnd,
+    },
+    {
+      label: 'Show delete pages',
+      icon: Trash,
+    },
+    {
+      label: 'Notifications',
+      icon: Bell,
+    },
+  ],
+  [
+    {
+      label: 'Import',
+      icon: ArrowUp,
+    },
+    {
+      label: 'Export',
+      icon: ArrowDown,
+    },
+  ],
+]
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center gap-2 text-sm">
+    <div class="hidden font-medium text-muted-foreground md:inline-block">
+      Edit Oct 08
+    </div>
+    <Button variant="ghost" size="icon" class="h-7 w-7">
+      <Star />
+    </Button>
+    <Popover v-model:open="isOpen">
+      <PopoverTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-7 w-7 data-[state=open]:bg-accent"
+        >
+          <MoreHorizontal />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        class="w-56 overflow-hidden rounded-lg p-0"
+        align="end"
+      >
+        <Sidebar collapsible="none" class="bg-transparent">
+          <SidebarContent>
+            <SidebarGroup v-for="(group, index) in data" :key="index" class="border-b last:border-none">
+              <SidebarGroupContent class="gap-0">
+                <SidebarMenu>
+                  <SidebarMenuItem v-for="(item, index) in group" :key="index">
+                    <SidebarMenuButton>
+                      <component :is="item.icon" /> <span>{{ item.label }}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/NavFavorites.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/NavFavorites.vue
new file mode 100644
index 000000000..97a99afc4
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/NavFavorites.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in favorites" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url" :title="item.name">
+            <span>{{ item.emoji }}</span>
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <StarOff class="text-muted-foreground" />
+              <span>Remove from Favorites</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Link class="text-muted-foreground" />
+              <span>Copy Link</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ArrowUpRight class="text-muted-foreground" />
+              <span>Open in New Tab</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/NavMain.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/NavMain.vue
new file mode 100644
index 000000000..3fb44bcde
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/NavMain.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="item in items" :key="item.title">
+      <SidebarMenuButton as-child :is-active="item.isActive">
+        <a :href="item.url">
+          <component :is="item.icon" />
+          <span>{{ item.title }}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/NavSecondary.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/NavSecondary.vue
new file mode 100644
index 000000000..3d728239f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/NavSecondary.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import type { Component } from 'vue'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: Component
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child>
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <SidebarMenuBadge v-if="item.badge">
+            <component :is="item.badge" />
+          </SidebarMenuBadge>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue
new file mode 100644
index 000000000..b768426d6
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
+
+defineProps<{
+  workspaces: {
+    name: string
+    emoji: string
+    pages: {
+      name: string
+      emoji: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <Collapsible v-for="workspace in workspaces" :key="workspace.name">
+          <SidebarMenuItem>
+            <SidebarMenuButton as-child>
+              <a href="#">
+                <span>{{ workspace.emoji }}</span>
+                <span>{{ workspace.name }}</span>
+              </a>
+            </SidebarMenuButton>
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction
+                class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                show-on-hover
+              >
+                <ChevronRight />
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <SidebarMenuAction show-on-hover>
+              <Plus />
+            </SidebarMenuAction>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
+                  <SidebarMenuSubButton as-child>
+                    <a href="#">
+                      <span>{{ page.emoji }}</span>
+                      <span>{{ page.name }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue
new file mode 100644
index 000000000..125caaa3e
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton class="w-fit px-1.5">
+            <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-3" />
+            </div>
+            <span class="truncate font-semibold">{{ activeTeam.name }}</span>
+            <ChevronDown class="opacity-50" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-64 rounded-lg"
+          align="start"
+          side="bottom"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar10/page.vue b/apps/www/src/registry/new-york/block/Sidebar10/page.vue
new file mode 100644
index 000000000..a48f22264
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar10/page.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+export const description = 'A sidebar in a popover.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
+import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-14 shrink-0 items-center gap-2">
+        <div class="flex flex-1 items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage class="line-clamp-1">
+                  Project Management & Task Tracking
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+        <div class="ml-auto px-3">
+          <NavActions />
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 px-4 py-10">
+        <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+        <div class="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar11/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar11/components/AppSidebar.vue
new file mode 100644
index 000000000..0039f959c
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar11/components/AppSidebar.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { File } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  changes: [
+    {
+      file: 'README.md',
+      state: 'M',
+    },
+    {
+      file: 'api/hello/route.ts',
+      state: 'U',
+    },
+    {
+      file: 'app/layout.tsx',
+      state: 'M',
+    },
+  ],
+  tree: [
+    [
+      'app',
+      [
+        'api',
+        ['hello', ['route.ts']],
+        'page.tsx',
+        'layout.tsx',
+        ['blog', ['page.tsx']],
+      ],
+    ],
+    [
+      'components',
+      ['ui', 'button.tsx', 'card.tsx'],
+      'header.tsx',
+      'footer.tsx',
+    ],
+    ['lib', ['util.ts']],
+    ['public', 'favicon.ico', 'vercel.svg'],
+    '.eslintrc.json',
+    '.gitignore',
+    'next.config.js',
+    'tailwind.config.js',
+    'package.json',
+    'README.md',
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Changes</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="(item, index) in data.changes" :key="index">
+              <SidebarMenuButton>
+                <File />
+                {{ item.file }}
+              </SidebarMenuButton>
+              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+      <SidebarGroup>
+        <SidebarGroupLabel>Files</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <Tree v-for="(item, index) in data.tree" :key="index" :item="item" />
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar11/components/Tree.vue b/apps/www/src/registry/new-york/block/Sidebar11/components/Tree.vue
new file mode 100644
index 000000000..f8fce337f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar11/components/Tree.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, File, Folder } from 'lucide-vue-next'
+
+const props = defineProps<{
+  item: string | any[]
+}>()
+
+const [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]
+</script>
+
+<template>
+  <SidebarMenuButton
+    v-if="!items.length"
+    :is-active="name === 'button.tsx'"
+    class="data-[active=true]:bg-transparent"
+  >
+    <File />
+    {{ name }}
+  </SidebarMenuButton>
+
+  <SidebarMenuItem v-else>
+    <Collapsible
+      class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+      :default-open="name === 'components' || name === 'ui'"
+    >
+      <CollapsibleTrigger as-child>
+        <SidebarMenuButton>
+          <ChevronRight class="transition-transform" />
+          <Folder />
+          {{ name }}
+        </SidebarMenuButton>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          <Tree v-for="(subItem, index) in items" :key="index" :item="subItem" />
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  </SidebarMenuItem>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar11/page.vue b/apps/www/src/registry/new-york/block/Sidebar11/page.vue
new file mode 100644
index 000000000..baa2bdb05
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar11/page.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+export const description = 'A sidebar with a collapsible file tree.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                components
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                ui
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>button.tsx</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar12/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar12/components/AppSidebar.vue
new file mode 100644
index 000000000..1425cc456
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar12/components/AppSidebar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
+
+import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
+import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  calendars: [
+    {
+      name: 'My Calendars',
+      items: ['Personal', 'Work', 'Family'],
+    },
+    {
+      name: 'Favorites',
+      items: ['Holidays', 'Birthdays'],
+    },
+    {
+      name: 'Other',
+      items: ['Travel', 'Reminders', 'Deadlines'],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader class="h-16 border-b border-sidebar-border">
+      <NavUser :user="data.user" />
+    </SidebarHeader>
+    <SidebarContent>
+      <DatePicker />
+      <SidebarSeparator class="mx-0" />
+      <Calendars :calendars="data.calendars" />
+    </SidebarContent>
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <Plus />
+            <span>New Calendar</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar12/components/Calendars.vue b/apps/www/src/registry/new-york/block/Sidebar12/components/Calendars.vue
new file mode 100644
index 000000000..09a713c57
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar12/components/Calendars.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}>()
+</script>
+
+<template>
+  <template v-for="(calendar, index) in calendars" :key="calendar.name">
+    <SidebarGroup class="py-0">
+      <Collapsible
+        :default-open="index === 0"
+        class="group/collapsible"
+      >
+        <SidebarGroupLabel
+          as-child
+          class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <CollapsibleTrigger>
+            {{ calendar.name }}
+            <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
+                <SidebarMenuButton>
+                  <div
+                    :data-active="index < 2"
+                    class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                  >
+                    <Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                  </div>
+                  {{ item }}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+    <SidebarSeparator class="mx-0" />
+  </template>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar12/components/DatePicker.vue b/apps/www/src/registry/new-york/block/Sidebar12/components/DatePicker.vue
new file mode 100644
index 000000000..ec51c38bf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar12/components/DatePicker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarGroup class="px-0">
+    <SidebarGroupContent>
+      <Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar12/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar12/components/NavUser.vue
new file mode 100644
index 000000000..42bd13bdf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar12/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="start"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar12/page.vue b/apps/www/src/registry/new-york/block/Sidebar12/page.vue
new file mode 100644
index 000000000..00d254303
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar12/page.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+export const description = 'A sidebar with a calendar.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbPage>October 2024</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-5">
+          <div v-for="i in 20" :key="i" class="aspect-square rounded-xl bg-muted/50" />
+        </div>
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar13/components/SettingsDialog.vue b/apps/www/src/registry/new-york/block/Sidebar13/components/SettingsDialog.vue
new file mode 100644
index 000000000..ab6e23be6
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar13/components/SettingsDialog.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from '@/registry/new-york/ui/dialog'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Bell,
+  Check,
+  Globe,
+  Home,
+  Keyboard,
+  Link,
+  Lock,
+  Menu,
+  MessageCircle,
+  Paintbrush,
+  Settings,
+  Video,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const data = {
+  nav: [
+    { name: 'Notifications', icon: Bell },
+    { name: 'Navigation', icon: Menu },
+    { name: 'Home', icon: Home },
+    { name: 'Appearance', icon: Paintbrush },
+    { name: 'Messages & media', icon: MessageCircle },
+    { name: 'Language & region', icon: Globe },
+    { name: 'Accessibility', icon: Keyboard },
+    { name: 'Mark as read', icon: Check },
+    { name: 'Audio & video', icon: Video },
+    { name: 'Connected accounts', icon: Link },
+    { name: 'Privacy & visibility', icon: Lock },
+    { name: 'Advanced', icon: Settings },
+  ],
+}
+
+const open = ref(true)
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger as-child>
+      <Button size="sm">
+        Open Dialog
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+      <DialogTitle class="sr-only">
+        Settings
+      </DialogTitle>
+      <DialogDescription class="sr-only">
+        Customize your settings here.
+      </DialogDescription>
+      <SidebarProvider class="items-start">
+        <Sidebar collapsible="none" class="hidden md:flex">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem v-for="item in data.nav" :key="item.name">
+                    <SidebarMenuButton
+                      as-child
+                      :is-active="item.name === 'Messages & media'"
+                    >
+                      <a href="#">
+                        <component :is="item.icon" />
+                        <span>{{ item.name }}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <main class="flex h-[480px] flex-1 flex-col overflow-hidden">
+          <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+            <div class="flex items-center gap-2 px-4">
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem class="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      Settings
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator class="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </header>
+          <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+            <div
+              v-for="i in 10"
+              :key="i"
+              class="aspect-video max-w-3xl rounded-xl bg-muted/50"
+            />
+          </div>
+        </main>
+      </SidebarProvider>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar13/page.vue b/apps/www/src/registry/new-york/block/Sidebar13/page.vue
new file mode 100644
index 000000000..1b5220cd8
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar13/page.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+export const description = 'A sidebar in a dialog.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
+</script>
+
+<template>
+  <div class="flex h-svh items-center justify-center">
+    <SettingsDialog />
+  </div>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar14/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar14/components/AppSidebar.vue
new file mode 100644
index 000000000..6c72d051a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar14/components/AppSidebar.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type {
+  SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+              <SidebarMenuButton as-child>
+                <a :href="item.url" class="font-medium">
+                  {{ item.title }}
+                </a>
+              </SidebarMenuButton>
+              <SidebarMenuSub v-if="item.items.length">
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton
+                    as-child
+                    :is-active="subItem.isActive"
+                  >
+                    <a :href="subItem.url">{{ subItem.title }}</a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar14/page.vue b/apps/www/src/registry/new-york/block/Sidebar14/page.vue
new file mode 100644
index 000000000..ee75a15b8
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar14/page.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar on the right.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <SidebarInset>
+      <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <SidebarTrigger class="-mr-1 ml-auto rotate-180" />
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+          <div class="aspect-video rounded-xl bg-muted/50" />
+        </div>
+        <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      </div>
+    </SidebarInset>
+    <AppSidebar side="right" />
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/AppSidebar.vue
new file mode 100644
index 000000000..6c72d051a
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/AppSidebar.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type {
+  SidebarProps,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+              <SidebarMenuButton as-child>
+                <a :href="item.url" class="font-medium">
+                  {{ item.title }}
+                </a>
+              </SidebarMenuButton>
+              <SidebarMenuSub v-if="item.items.length">
+                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                  <SidebarMenuSubButton
+                    as-child
+                    :is-active="subItem.isActive"
+                  >
+                    <a :href="subItem.url">{{ subItem.title }}</a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/Calendars.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/Calendars.vue
new file mode 100644
index 000000000..09a713c57
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/Calendars.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  calendars: {
+    name: string
+    items: string[]
+  }[]
+}>()
+</script>
+
+<template>
+  <template v-for="(calendar, index) in calendars" :key="calendar.name">
+    <SidebarGroup class="py-0">
+      <Collapsible
+        :default-open="index === 0"
+        class="group/collapsible"
+      >
+        <SidebarGroupLabel
+          as-child
+          class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <CollapsibleTrigger>
+            {{ calendar.name }}
+            <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+          </CollapsibleTrigger>
+        </SidebarGroupLabel>
+        <CollapsibleContent>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
+                <SidebarMenuButton>
+                  <div
+                    :data-active="index < 2"
+                    class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
+                  >
+                    <Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
+                  </div>
+                  {{ item }}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarGroup>
+    <SidebarSeparator class="mx-0" />
+  </template>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/DatePicker.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/DatePicker.vue
new file mode 100644
index 000000000..ec51c38bf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/DatePicker.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Calendar } from '@/registry/new-york/ui/calendar'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarGroup class="px-0">
+    <SidebarGroupContent>
+      <Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/NavFavorites.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/NavFavorites.vue
new file mode 100644
index 000000000..97a99afc4
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/NavFavorites.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  ArrowUpRight,
+  Link,
+  MoreHorizontal,
+  StarOff,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  favorites: {
+    name: string
+    url: string
+    emoji: string
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Favorites</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in favorites" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url" :title="item.name">
+            <span>{{ item.emoji }}</span>
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'"
+          >
+            <DropdownMenuItem>
+              <StarOff class="text-muted-foreground" />
+              <span>Remove from Favorites</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Link class="text-muted-foreground" />
+              <span>Copy Link</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ArrowUpRight class="text-muted-foreground" />
+              <span>Open in New Tab</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-muted-foreground" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+
+      <SidebarMenuItem>
+        <SidebarMenuButton class="text-sidebar-foreground/70">
+          <MoreHorizontal />
+          <span>More</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/NavMain.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/NavMain.vue
new file mode 100644
index 000000000..3fb44bcde
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/NavMain.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    isActive?: boolean
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="item in items" :key="item.title">
+      <SidebarMenuButton as-child :is-active="item.isActive">
+        <a :href="item.url">
+          <component :is="item.icon" />
+          <span>{{ item.title }}</span>
+        </a>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/NavSecondary.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/NavSecondary.vue
new file mode 100644
index 000000000..3d728239f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/NavSecondary.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { LucideIcon } from 'lucide-vue-next'
+
+import type { Component } from 'vue'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    badge?: Component
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton as-child>
+            <a :href="item.url">
+              <component :is="item.icon" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+          <SidebarMenuBadge v-if="item.badge">
+            <component :is="item.badge" />
+          </SidebarMenuBadge>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/NavUser.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/NavUser.vue
new file mode 100644
index 000000000..42bd13bdf
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/NavUser.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/registry/new-york/ui/avatar'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="start"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue
new file mode 100644
index 000000000..b768426d6
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
+
+defineProps<{
+  workspaces: {
+    name: string
+    emoji: string
+    pages: {
+      name: string
+      emoji: string
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <Collapsible v-for="workspace in workspaces" :key="workspace.name">
+          <SidebarMenuItem>
+            <SidebarMenuButton as-child>
+              <a href="#">
+                <span>{{ workspace.emoji }}</span>
+                <span>{{ workspace.name }}</span>
+              </a>
+            </SidebarMenuButton>
+            <CollapsibleTrigger as-child>
+              <SidebarMenuAction
+                class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
+                show-on-hover
+              >
+                <ChevronRight />
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <SidebarMenuAction show-on-hover>
+              <Plus />
+            </SidebarMenuAction>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
+                  <SidebarMenuSubButton as-child>
+                    <a href="#">
+                      <span>{{ page.emoji }}</span>
+                      <span>{{ page.name }}</span>
+                    </a>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <MoreHorizontal />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarLeft.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarLeft.vue
new file mode 100644
index 000000000..0a30d6201
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarLeft.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
+
+import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
+import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  AudioWaveform,
+  Blocks,
+  Calendar,
+  Command,
+  Home,
+  Inbox,
+  MessageCircleQuestion,
+  Search,
+  Settings2,
+  Sparkles,
+  Trash2,
+} from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: Command,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Search',
+      url: '#',
+      icon: Search,
+    },
+    {
+      title: 'Ask AI',
+      url: '#',
+      icon: Sparkles,
+    },
+    {
+      title: 'Home',
+      url: '#',
+      icon: Home,
+      isActive: true,
+    },
+    {
+      title: 'Inbox',
+      url: '#',
+      icon: Inbox,
+      badge: '10',
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Calendar',
+      url: '#',
+      icon: Calendar,
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+    },
+    {
+      title: 'Templates',
+      url: '#',
+      icon: Blocks,
+    },
+    {
+      title: 'Trash',
+      url: '#',
+      icon: Trash2,
+    },
+    {
+      title: 'Help',
+      url: '#',
+      icon: MessageCircleQuestion,
+    },
+  ],
+  favorites: [
+    {
+      name: 'Project Management & Task Tracking',
+      url: '#',
+      emoji: '📊',
+    },
+    {
+      name: 'Family Recipe Collection & Meal Planning',
+      url: '#',
+      emoji: '🍳',
+    },
+    {
+      name: 'Fitness Tracker & Workout Routines',
+      url: '#',
+      emoji: '💪',
+    },
+    {
+      name: 'Book Notes & Reading List',
+      url: '#',
+      emoji: '📚',
+    },
+    {
+      name: 'Sustainable Gardening Tips & Plant Care',
+      url: '#',
+      emoji: '🌱',
+    },
+    {
+      name: 'Language Learning Progress & Resources',
+      url: '#',
+      emoji: '🗣️',
+    },
+    {
+      name: 'Home Renovation Ideas & Budget Tracker',
+      url: '#',
+      emoji: '🏠',
+    },
+    {
+      name: 'Personal Finance & Investment Portfolio',
+      url: '#',
+      emoji: '💰',
+    },
+    {
+      name: 'Movie & TV Show Watchlist with Reviews',
+      url: '#',
+      emoji: '🎬',
+    },
+    {
+      name: 'Daily Habit Tracker & Goal Setting',
+      url: '#',
+      emoji: '✅',
+    },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        {
+          name: 'Daily Journal & Reflection',
+          url: '#',
+          emoji: '📔',
+        },
+        {
+          name: 'Health & Wellness Tracker',
+          url: '#',
+          emoji: '🍏',
+        },
+        {
+          name: 'Personal Growth & Learning Goals',
+          url: '#',
+          emoji: '🌟',
+        },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        {
+          name: 'Career Objectives & Milestones',
+          url: '#',
+          emoji: '🎯',
+        },
+        {
+          name: 'Skill Acquisition & Training Log',
+          url: '#',
+          emoji: '🧠',
+        },
+        {
+          name: 'Networking Contacts & Events',
+          url: '#',
+          emoji: '🤝',
+        },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        {
+          name: 'Writing Ideas & Story Outlines',
+          url: '#',
+          emoji: '✍️',
+        },
+        {
+          name: 'Art & Design Portfolio',
+          url: '#',
+          emoji: '🖼️',
+        },
+        {
+          name: 'Music Composition & Practice Log',
+          url: '#',
+          emoji: '🎵',
+        },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        {
+          name: 'Household Budget & Expense Tracking',
+          url: '#',
+          emoji: '💰',
+        },
+        {
+          name: 'Home Maintenance Schedule & Tasks',
+          url: '#',
+          emoji: '🔧',
+        },
+        {
+          name: 'Family Calendar & Event Planning',
+          url: '#',
+          emoji: '📅',
+        },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        {
+          name: 'Trip Planning & Itineraries',
+          url: '#',
+          emoji: '🗺️',
+        },
+        {
+          name: 'Travel Bucket List & Inspiration',
+          url: '#',
+          emoji: '🌎',
+        },
+        {
+          name: 'Travel Journal & Photo Gallery',
+          url: '#',
+          emoji: '📸',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar class="border-r-0" v-bind="props">
+    <SidebarHeader>
+      <TeamSwitcher :teams="data.teams" />
+      <NavMain :items="data.navMain" />
+    </SidebarHeader>
+    <SidebarContent>
+      <NavFavorites :favorites="data.favorites" />
+      <NavWorkspaces :workspaces="data.workspaces" />
+      <NavSecondary :items="data.navSecondary" class="mt-auto" />
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarRight.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarRight.vue
new file mode 100644
index 000000000..840c94578
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/SidebarRight.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
+
+import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
+import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarSeparator,
+} from '@/registry/new-york/ui/sidebar'
+import { Plus } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'none',
+})
+
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  calendars: [
+    {
+      name: 'My Calendars',
+      items: ['Personal', 'Work', 'Family'],
+    },
+    {
+      name: 'Favorites',
+      items: ['Holidays', 'Birthdays'],
+    },
+    {
+      name: 'Other',
+      items: ['Travel', 'Reminders', 'Deadlines'],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar
+    class="sticky hidden lg:flex top-0 h-svh border-l"
+    v-bind="props"
+  >
+    <SidebarHeader class="h-16 border-b border-sidebar-border">
+      <NavUser :user="data.user" />
+    </SidebarHeader>
+    <SidebarContent>
+      <DatePicker />
+      <SidebarSeparator class="mx-0" />
+      <Calendars :calendars="data.calendars" />
+    </SidebarContent>
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <Plus />
+            <span>New Calendar</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue
new file mode 100644
index 000000000..341074cda
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, Plus } from 'lucide-vue-next'
+
+import { type Component, ref } from 'vue'
+
+const props = defineProps<{
+  teams: {
+    name: string
+    logo: Component
+    plan: string
+  }[]
+}>()
+
+const activeTeam = ref(props.teams[0])
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton class="w-fit px-1.5">
+            <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+              <component :is="activeTeam.logo" class="size-3" />
+            </div>
+            <span class="truncate font-semibold">{{ activeTeam.name }}</span>
+            <ChevronDown class="opacity-50" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-64 rounded-lg"
+          align="start"
+          side="bottom"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="text-xs text-muted-foreground">
+            Teams
+          </DropdownMenuLabel>
+
+          <DropdownMenuItem
+            v-for="(team, index) in teams"
+            :key="team.name"
+            class="gap-2 p-2"
+            @click="activeTeam = team"
+          >
+            <div class="flex size-6 items-center justify-center rounded-sm border">
+              <component :is="team.logo" class="size-4 shrink-0" />
+            </div>
+            {{ team.name }}
+            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="gap-2 p-2">
+            <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+              <Plus class="size-4" />
+            </div>
+            <div class="font-medium text-muted-foreground">
+              Add team
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar15/page.vue b/apps/www/src/registry/new-york/block/Sidebar15/page.vue
new file mode 100644
index 000000000..2ff6b9cb9
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar15/page.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A left and right sidebar.'
+</script>
+
+<script setup lang="ts">
+import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
+import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <SidebarLeft />
+    <SidebarInset>
+      <header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+        <div class="flex flex-1 items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbPage class="line-clamp-1">
+                  Project Management & Task Tracking
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+        <div class="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
+      </div>
+    </SidebarInset>
+    <SidebarRight />
+  </SidebarProvider>
+</template>

From 41d836335fc0d4a5d6ebe42e890714e875a34944 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 25 Nov 2024 18:01:47 +0800
Subject: [PATCH 20/39] docs: sidebar

---
 .../theme/components/BlockContainer.vue       |    4 -
 .../.vitepress/theme/components/BlockPage.vue |    6 +-
 .../theme/components/BlockPreview.vue         |    2 +-
 .../.vitepress/theme/components/Blocks.vue    |    4 +-
 .../theme/components/TableOfContent.vue       |    4 +-
 apps/www/.vitepress/theme/style.css           |    6 +-
 apps/www/.vitepress/theme/styles/vp-doc.css   |   33 +-
 apps/www/__registry__/block.ts                | 1064 +++++++++++++++--
 apps/www/__registry__/index.ts                |  980 +++++++++++++--
 .../src/content/docs/components/sidebar.md    | 1054 +++++++++++++++-
 .../public/r/styles/default/DemoSidebar.json  |   16 +
 .../styles/default/DemoSidebarControlled.json |   17 +
 .../r/styles/default/DemoSidebarFooter.json   |   17 +
 .../r/styles/default/DemoSidebarGroup.json    |   16 +
 .../default/DemoSidebarGroupAction.json       |   18 +
 .../default/DemoSidebarGroupCollapsible.json  |   17 +
 .../r/styles/default/DemoSidebarHeader.json   |   17 +
 .../r/styles/default/DemoSidebarMenu.json     |   16 +
 .../styles/default/DemoSidebarMenuAction.json |   17 +
 .../styles/default/DemoSidebarMenuBadge.json  |   16 +
 .../default/DemoSidebarMenuCollapsible.json   |   17 +
 .../r/styles/default/DemoSidebarMenuSub.json  |   16 +
 .../src/public/r/styles/default/Login01.json  |   26 +
 .../public/r/styles/default/Sidebar01.json    |    8 +-
 .../public/r/styles/default/Sidebar02.json    |    2 +-
 .../public/r/styles/default/Sidebar03.json    |    2 +-
 .../public/r/styles/default/Sidebar06.json    |    8 +-
 .../public/r/styles/default/Sidebar07.json    |   12 +-
 .../public/r/styles/default/Sidebar08.json    |   12 +-
 .../public/r/styles/default/Sidebar09.json    |    6 +-
 .../public/r/styles/default/Sidebar10.json    |   16 +-
 .../public/r/styles/default/Sidebar11.json    |    2 +-
 .../public/r/styles/default/Sidebar12.json    |   10 +-
 .../public/r/styles/default/Sidebar13.json    |    4 +-
 .../public/r/styles/default/Sidebar14.json    |    4 +-
 .../public/r/styles/default/Sidebar15.json    |   24 +-
 .../public/r/styles/new-york/DemoSidebar.json |   16 +
 .../new-york/DemoSidebarControlled.json       |   17 +
 .../r/styles/new-york/DemoSidebarFooter.json  |   17 +
 .../r/styles/new-york/DemoSidebarGroup.json   |   16 +
 .../new-york/DemoSidebarGroupAction.json      |   18 +
 .../new-york/DemoSidebarGroupCollapsible.json |   17 +
 .../r/styles/new-york/DemoSidebarHeader.json  |   17 +
 .../r/styles/new-york/DemoSidebarMenu.json    |   16 +
 .../new-york/DemoSidebarMenuAction.json       |   17 +
 .../styles/new-york/DemoSidebarMenuBadge.json |   16 +
 .../new-york/DemoSidebarMenuCollapsible.json  |   17 +
 .../r/styles/new-york/DemoSidebarMenuSub.json |   16 +
 .../src/public/r/styles/new-york/Login01.json |   26 +
 .../public/r/styles/new-york/Sidebar01.json   |    2 +-
 .../public/r/styles/new-york/Sidebar02.json   |    2 +-
 .../public/r/styles/new-york/Sidebar07.json   |    4 +-
 .../public/r/styles/new-york/Sidebar08.json   |    2 +-
 .../public/r/styles/new-york/Sidebar09.json   |    2 +-
 .../public/r/styles/new-york/Sidebar10.json   |    2 +-
 .../public/r/styles/new-york/Sidebar12.json   |    2 +-
 .../public/r/styles/new-york/Sidebar13.json   |    2 +-
 .../public/r/styles/new-york/Sidebar14.json   |    2 +-
 .../public/r/styles/new-york/Sidebar15.json   |    8 +-
 apps/www/src/public/r/temp.json               |  572 ++++++++-
 .../registry/default/block/DemoSidebar.vue    |   75 ++
 .../default/block/DemoSidebarControlled.vue   |   93 ++
 .../default/block/DemoSidebarFooter.vue       |   64 +
 .../default/block/DemoSidebarGroup.vue        |   43 +
 .../default/block/DemoSidebarGroupAction.vue  |   74 ++
 .../block/DemoSidebarGroupCollapsible.vue     |   60 +
 .../default/block/DemoSidebarHeader.vue       |   54 +
 .../default/block/DemoSidebarMenu.vue         |   67 ++
 .../default/block/DemoSidebarMenuAction.vue   |  100 ++
 .../default/block/DemoSidebarMenuBadge.vue    |   77 ++
 .../block/DemoSidebarMenuCollapsible.vue      |  191 +++
 .../default/block/DemoSidebarMenuSub.vue      |  174 +++
 .../block/Login01/components/LoginForm.vue    |   59 +
 .../registry/default/block/Login01/page.vue   |   16 +
 .../block/Sidebar01/components/AppSidebar.vue |    6 +-
 .../block/Sidebar01/components/SearchForm.vue |    4 +-
 .../Sidebar01/components/VersionSwitcher.vue  |    4 +-
 .../registry/default/block/Sidebar01/page.vue |    8 +-
 .../block/Sidebar03/components/AppSidebar.vue |    2 +-
 .../registry/default/block/Sidebar03/page.vue |    8 +-
 .../block/Sidebar04/components/AppSidebar.vue |    2 +-
 .../registry/default/block/Sidebar04/page.vue |    8 +-
 .../block/Sidebar05/components/AppSidebar.vue |    6 +-
 .../block/Sidebar05/components/SearchForm.vue |    4 +-
 .../registry/default/block/Sidebar05/page.vue |    8 +-
 .../block/Sidebar06/components/AppSidebar.vue |    6 +-
 .../block/Sidebar06/components/NavMain.vue    |    4 +-
 .../Sidebar06/components/SidebarOptInForm.vue |    6 +-
 .../registry/default/block/Sidebar06/page.vue |    8 +-
 .../block/Sidebar07/components/AppSidebar.vue |   12 +-
 .../block/Sidebar07/components/NavMain.vue    |    4 +-
 .../Sidebar07/components/NavProjects.vue      |    4 +-
 .../block/Sidebar07/components/NavUser.vue    |    6 +-
 .../Sidebar07/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar07/page.vue |    8 +-
 .../block/Sidebar08/components/AppSidebar.vue |   10 +-
 .../block/Sidebar08/components/NavMain.vue    |    4 +-
 .../Sidebar08/components/NavProjects.vue      |    4 +-
 .../Sidebar08/components/NavSecondary.vue     |    2 +-
 .../block/Sidebar08/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar08/page.vue |    8 +-
 .../block/Sidebar09/components/AppSidebar.vue |    8 +-
 .../block/Sidebar09/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar09/page.vue |    8 +-
 .../block/Sidebar10/components/AppSidebar.vue |   12 +-
 .../block/Sidebar10/components/NavActions.vue |    6 +-
 .../Sidebar10/components/NavFavorites.vue     |    4 +-
 .../block/Sidebar10/components/NavMain.vue    |    2 +-
 .../Sidebar10/components/NavSecondary.vue     |    2 +-
 .../Sidebar10/components/NavWorkspaces.vue    |    4 +-
 .../Sidebar10/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar10/page.vue |   10 +-
 .../block/Sidebar11/components/AppSidebar.vue |    4 +-
 .../block/Sidebar11/components/Tree.vue       |    4 +-
 .../registry/default/block/Sidebar11/page.vue |    8 +-
 .../block/Sidebar12/components/AppSidebar.vue |    8 +-
 .../block/Sidebar12/components/Calendars.vue  |    4 +-
 .../block/Sidebar12/components/DatePicker.vue |    4 +-
 .../block/Sidebar12/components/NavUser.vue    |    6 +-
 .../registry/default/block/Sidebar12/page.vue |    8 +-
 .../Sidebar13/components/SettingsDialog.vue   |    8 +-
 .../registry/default/block/Sidebar13/page.vue |    2 +-
 .../block/Sidebar14/components/AppSidebar.vue |    4 +-
 .../registry/default/block/Sidebar14/page.vue |    6 +-
 .../block/Sidebar15/components/AppSidebar.vue |    4 +-
 .../block/Sidebar15/components/Calendars.vue  |    4 +-
 .../block/Sidebar15/components/DatePicker.vue |    4 +-
 .../Sidebar15/components/NavFavorites.vue     |    4 +-
 .../block/Sidebar15/components/NavMain.vue    |    2 +-
 .../Sidebar15/components/NavSecondary.vue     |    2 +-
 .../block/Sidebar15/components/NavUser.vue    |    6 +-
 .../Sidebar15/components/NavWorkspaces.vue    |    4 +-
 .../Sidebar15/components/SidebarLeft.vue      |   12 +-
 .../Sidebar15/components/SidebarRight.vue     |    8 +-
 .../Sidebar15/components/TeamSwitcher.vue     |    4 +-
 .../registry/default/block/Sidebar15/page.vue |   10 +-
 .../registry/new-york/block/DemoSidebar.vue   |   75 ++
 .../new-york/block/DemoSidebarControlled.vue  |   93 ++
 .../new-york/block/DemoSidebarFooter.vue      |   64 +
 .../new-york/block/DemoSidebarGroup.vue       |   43 +
 .../new-york/block/DemoSidebarGroupAction.vue |   74 ++
 .../block/DemoSidebarGroupCollapsible.vue     |   60 +
 .../new-york/block/DemoSidebarHeader.vue      |   54 +
 .../new-york/block/DemoSidebarMenu.vue        |   67 ++
 .../new-york/block/DemoSidebarMenuAction.vue  |  100 ++
 .../new-york/block/DemoSidebarMenuBadge.vue   |   77 ++
 .../block/DemoSidebarMenuCollapsible.vue      |  191 +++
 .../new-york/block/DemoSidebarMenuSub.vue     |  174 +++
 .../block/Login01/components/LoginForm.vue    |   59 +
 .../registry/new-york/block/Login01/page.vue  |   16 +
 150 files changed, 6451 insertions(+), 514 deletions(-)
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebar.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarControlled.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarFooter.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroup.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarHeader.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenu.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
 create mode 100644 apps/www/src/public/r/styles/default/Login01.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebar.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
 create mode 100644 apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
 create mode 100644 apps/www/src/public/r/styles/new-york/Login01.json
 create mode 100644 apps/www/src/registry/default/block/DemoSidebar.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarControlled.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarFooter.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroup.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarHeader.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenu.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
 create mode 100644 apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
 create mode 100644 apps/www/src/registry/default/block/Login01/components/LoginForm.vue
 create mode 100644 apps/www/src/registry/default/block/Login01/page.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebar.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
 create mode 100644 apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
 create mode 100644 apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
 create mode 100644 apps/www/src/registry/new-york/block/Login01/page.vue

diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 358b2b196..ba0f3142c 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -220,10 +220,6 @@ watch([style, codeConfig], async () => {
     </TabsContent>
     <TabsContent value="code" class="h-[--height]">
       <BlockViewerCode v-if="componentRegistry" :item="componentRegistry" />
-      <!-- <div
-        class="language-vue !h-full !max-h-[none] !mt-0"
-        v-html="codeHtml"
-      /> -->
     </TabsContent>
   </Tabs>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
index be644b625..2cd1fa29a 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import { useUrlSearchParams } from '@vueuse/core'
 import ComponentLoader from './ComponentLoader.vue'
 
@@ -6,7 +7,10 @@ const params = useUrlSearchParams('history')
 </script>
 
 <template>
-  <div v-if="params.name" :class="params.containerClass">
+  <div
+    v-if="params.name"
+    :class="cn('preview flex h-screen w-full justify-center p-10 items-center', params.containerClass)"
+  >
     <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 6aee8eb02..cdcf184b0 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -12,7 +12,7 @@ const isLoading = ref(true)
 
 <template>
   <div class="relative rounded-lg border overflow-hidden bg-background" :class="[container ? '' : 'aspect-[4/2.5]']">
-    <div v-if="isLoading" class="flex items-center justify-center h-full">
+    <div v-if="isLoading" class="flex items-center justify-center h-full w-full z-10 relative">
       <Spinner />
     </div>
     <div
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index c2cdb5292..323a88884 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { Index } from '../../../__registry__'
 import Announcement from '../components/Announcement.vue'
 import PageAction from '../components/PageAction.vue'
 
@@ -10,8 +9,7 @@ import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
-// const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
-const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block' && i.name.includes('Sidebar')).map((i: any) => i.name)
+const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index d441caaca..11bf210fa 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -60,8 +60,8 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="hidden text-sm xl:block">
-    <div class="no-scrollbar h-full overflow-auto pb-10 space-y-2">
+  <div class="hidden xl:block no-scrollbar h-full overflow-auto pb-16">
+    <div class="space-y-2">
       <p class="font-medium">
         On This Page
       </p>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index 770d7d6c4..e8f3635bf 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -223,7 +223,7 @@ pre code {
 }
 
 .line-numbers-wrapper {
-	@apply font-mono;
+  @apply !font-mono;
 }
 
 pre code .line {
@@ -231,7 +231,9 @@ pre code .line {
 }
 
 .line-number {
-	@apply !text-sm !inline-block text-muted-foreground leading-[--vp-code-line-height];
+  font-size: .75rem ;
+  color: hsla(0, 0%, 98%, .4) ;
+	@apply !inline-block leading-[--vp-code-line-height];
 }
 
 ::view-transition-old(root),
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 008137151..2a8cc5dcd 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -171,39 +171,26 @@
  * Table
  * -------------------------------------------------------------------------- */
 
-/* .vp-doc table {
-  display: block;
-  border-collapse: collapse;
-  margin: 20px 0;
-  overflow-x: auto;
+.vp-doc table {
+  @apply relative w-full overflow-hidden border-none text-sm;
 }
 
 .vp-doc tr {
-  border-top: 1px solid var(--vp-c-divider);
-  transition: background-color 0.5s;
+  @apply m-0 border-b;
+}
+.vp-doc tbody tr:last-child {
+  @apply border-b-0;
 }
 
-.vp-doc tr:nth-child(2n) {
-  background-color: var(--vp-c-bg-soft);
+.vp-doc th {
+  @apply px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
 }
 
-.vp-doc th,
 .vp-doc td {
-  border: 1px solid var(--vp-c-divider);
-  padding: 8px 16px;
+@apply px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
 }
 
-.vp-doc th {
-  text-align: left;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  background-color: var(--vp-c-bg-soft);
-}
 
-.vp-doc td {
-  font-size: 14px;
-} */
 
 /**
  * Decorational elements
@@ -427,7 +414,7 @@
   z-index: 3;
   border-right: 1px solid var(--vp-code-block-divider-color);
   padding-top: 14px;
-  padding-left: 8px;
+  padding-left: 20px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
index a651fdf72..ae32f0e28 100644
--- a/apps/www/__registry__/block.ts
+++ b/apps/www/__registry__/block.ts
@@ -191,6 +191,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -888,6 +1114,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -1392,196 +1844,422 @@ export const Index: Record<string, any> = {
         target: "",
         raw: () => import("@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-  },  "default": {
-    "Authentication01": {
-      name: "Authentication01",
+    "Dashboard07": {
+      name: "Dashboard07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
       files: [{
-        path: "registry/default/block/Authentication01.vue",
+        path: "registry/default/block/Dashboard07.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
+    "DemoSidebar": {
+      name: "DemoSidebar",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Authentication02.vue",
+        path: "registry/default/block/DemoSidebar.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["button","sidebar"],
       files: [{
-        path: "registry/default/block/Authentication03.vue",
+        path: "registry/default/block/DemoSidebarControlled.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","input","label"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Authentication04.vue",
+        path: "registry/default/block/DemoSidebarFooter.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard01.vue",
+        path: "registry/default/block/DemoSidebarGroup.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard02.vue",
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      registryDependencies: ["collapsible","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard03.vue",
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard04.vue",
+        path: "registry/default/block/DemoSidebarHeader.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard05.vue",
+        path: "registry/default/block/DemoSidebarMenu.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard06.vue",
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard07.vue",
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue",
-        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
+        raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
       }],
-      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2283,6 +2961,232 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebar.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarControlled.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarFooter.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroup.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarHeader.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenu.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuAction.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/DemoSidebarMenuSub.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Login01/components/LoginForm.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Login01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6ad46cbcd..a5c515318 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5235,6 +5235,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -10880,6 +11079,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/new-york/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/new-york/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
@@ -16307,236 +16705,435 @@ export const Index: Record<string, any> = {
       type: "registry:example",
       registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
       files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
+        path: "registry/default/example/VDatePickerForm.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithPresets": {
+      name: "VDatePickerWithPresets",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","select","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithPresets.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDatePickerWithRange": {
+      name: "VDatePickerWithRange",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDatePickerWithRange.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VDateTimePickerDemo": {
+      name: "VDateTimePickerDemo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VDateTimePickerDemo.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "VRangePickerWithSlot": {
+      name: "VRangePickerWithSlot",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","popover","v-calendar"],
+      files: [{
+        path: "registry/default/example/VRangePickerWithSlot.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
+    "Dashboard06": {
+      name: "Dashboard06",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
       files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
+    "Dashboard07": {
+      name: "Dashboard07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
       files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
+    "DemoSidebar": {
+      name: "DemoSidebar",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
       files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication01": {
-      name: "Authentication01",
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Authentication01.vue",
+        path: "registry/default/block/DemoSidebarFooter.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication02": {
-      name: "Authentication02",
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Authentication02.vue",
+        path: "registry/default/block/DemoSidebarGroup.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication03": {
-      name: "Authentication03",
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Authentication03.vue",
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Authentication04": {
-      name: "Authentication04",
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","input","label"],
+      registryDependencies: ["collapsible","sidebar"],
       files: [{
-        path: "registry/default/block/Authentication04.vue",
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard01": {
-      name: "Dashboard01",
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
       description: "",
       type: "registry:block",
-      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard01.vue",
+        path: "registry/default/block/DemoSidebarHeader.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard02": {
-      name: "Dashboard02",
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard02.vue",
+        path: "registry/default/block/DemoSidebarMenu.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard03": {
-      name: "Dashboard03",
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      registryDependencies: ["dropdown-menu","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard03.vue",
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard04": {
-      name: "Dashboard04",
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
       description: "",
       type: "registry:block",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard04.vue",
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard05": {
-      name: "Dashboard05",
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      registryDependencies: ["collapsible","sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard05.vue",
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard06": {
-      name: "Dashboard06",
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      registryDependencies: ["sidebar"],
       files: [{
-        path: "registry/default/block/Dashboard06.vue",
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
         type: "registry:block",
         target: "pages/dashboard/index.vue"
       }],
-      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
     },
-    "Dashboard07": {
-      name: "Dashboard07",
+    "Login01": {
+      name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
       files: [{
-        path: "registry/default/block/Dashboard07.vue",
-        type: "registry:block",
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
         target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
       }],
-      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22186,6 +22783,205 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "DemoSidebar": {
+      name: "DemoSidebar",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebar.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebar.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarControlled": {
+      name: "DemoSidebarControlled",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarControlled.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarControlled.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarFooter": {
+      name: "DemoSidebarFooter",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarFooter.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarFooter.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroup": {
+      name: "DemoSidebarGroup",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroup.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroup.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupAction": {
+      name: "DemoSidebarGroupAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarGroupCollapsible": {
+      name: "DemoSidebarGroupCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarGroupCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarGroupCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarHeader": {
+      name: "DemoSidebarHeader",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarHeader.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarHeader.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenu": {
+      name: "DemoSidebarMenu",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenu.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuAction": {
+      name: "DemoSidebarMenuAction",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["dropdown-menu","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuAction.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuAction.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuBadge": {
+      name: "DemoSidebarMenuBadge",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuBadge.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuBadge.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuCollapsible": {
+      name: "DemoSidebarMenuCollapsible",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["collapsible","sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuCollapsible.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuCollapsible.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "DemoSidebarMenuSub": {
+      name: "DemoSidebarMenuSub",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["sidebar"],
+      files: [{
+        path: "registry/default/block/DemoSidebarMenuSub.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue"
+      }],
+      component: () => import("@/registry/default/block/DemoSidebarMenuSub.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Login01": {
+      name: "Login01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Login01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Login01/components/LoginForm.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Login01/page.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "Sidebar01": {
       name: "Sidebar01",
       description: "",
diff --git a/apps/www/src/content/docs/components/sidebar.md b/apps/www/src/content/docs/components/sidebar.md
index 41157d56e..4b8100f40 100644
--- a/apps/www/src/content/docs/components/sidebar.md
+++ b/apps/www/src/content/docs/components/sidebar.md
@@ -3,10 +3,1062 @@ title: Sidebar
 description: A composable, themeable and customizable sidebar component.
 ---
 
-<BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar that collapses to icons.
+  </figcaption>
+</figure>
+
+Sidebars are one of the most complex components to build. They are central
+to any application and often contain a lot of moving parts.
+
+I don't like building sidebars. So I built 30+ of them. All kinds of
+configurations. Then I extracted the core components into `Sidebar*.vue`.
+
+We now have a solid foundation to build on top of. Composable. Themeable.
+Customizable.
+
+[Browse the Blocks Library](/blocks).
 
 ## Installation
 
+<Steps>
+
+### Run the following command to install `sidebar`
+
 ```bash
 npx shadcn-vue@latest add sidebar
 ```
+
+### Add the following colors to your CSS file
+
+The command above should install the colors for you. If not, copy and paste the following in your CSS file.
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css title="app/globals.css"
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+</Steps>
+
+## Structure
+
+A `Sidebar` component is composed of the following parts:
+
+- `SidebarProvider` - Handles collapsible state.
+- `Sidebar` - The sidebar container.
+- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
+- `SidebarContent` - Scrollable content.
+- `SidebarGroup` - Section within the `SidebarContent`.
+- `SidebarTrigger` - Trigger for the `Sidebar`.
+
+<img
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  class="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<img
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  class="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+## Usage
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot></slot>
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+```vue:line-numbers
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarGroup />
+    </SidebarContent>
+    <SidebarFooter />
+  </Sidebar>
+</template>
+```
+
+## Your First Sidebar
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+<Steps>
+
+###  Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import { AppSidebar } from '@/components/app-sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+### Create a new sidebar component at `components/AppSidebar.vue`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent />
+  </Sidebar>
+</template>
+```
+
+### Now, let's add a `SidebarMenu` to the sidebar.
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  { title: 'Home', url: '#', icon: Home },
+  { title: 'Inbox', url: '#', icon: Inbox },
+  { title: 'Calendar', url: '#', icon: Calendar },
+  { title: 'Search', url: '#', icon: Search },
+  { title: 'Settings', url: '#', icon: Settings },
+]
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in items" :key="item.title">
+              <SidebarMenuButton asChild>
+                <a :href="item.url">
+                  <component :is="item.icon" />
+                  <span>{{item.title}}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+### You've created your first sidebar.
+
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebar&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    Your first sidebar.
+  </figcaption>
+</figure>
+
+</Steps>
+
+## Components
+
+The components in `Sidebar*` are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn/ui components such as `DropdownMenu`, `Collapsible` or `Dialog` etc.
+
+**If you need to change the code in `Sidebar*.vue`, you are encouraged to do so. The code is yours. Use `Sidebar.vue` as a starting point and build your own.**
+
+In the next sections, we'll go over each component and how to use them.
+
+## SidebarProvider
+
+The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
+
+### Props
+
+| Name           | Type                      | Description                                  |
+| -------------- | ------------------------- | -------------------------------------------- |
+| `defaultOpen`  | `boolean`                 | Default open state of the sidebar.           |
+| `open`         | `boolean`                 | Open state of the sidebar (controlled).      |
+| `onOpenChange` | `(open: boolean) => void` | Sets open state of the sidebar (controlled). |
+
+### Width
+
+If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar/utils` to set the width of the sidebar.
+
+```ts:line-numbers
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+```
+
+For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
+
+To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
+
+```vue:line-numbers
+<template>
+  <SidebarProvider
+    :style="{
+      '--sidebar-width': '20rem',
+      '--sidebar-width-mobile': '20rem',
+    }"
+  >
+    <Sidebar />
+  </SidebarProvider>
+</template>
+```
+
+This will handle the width of the sidebar but also the layout spacing.
+
+### Keyboard Shortcut
+
+The `SIDEBAR_KEYBOARD_SHORTCUT` variable is used to set the keyboard shortcut used to open and close the sidebar.
+
+To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b` on Windows.
+
+You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
+
+```ts:line-numbers
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+```
+
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar:state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Nuxt, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```vue:line-numbers title="app/layout.tsx"
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+const sidebarState = useCookie('sidebar:state')
+
+const defaultOpen = computed(() => sidebarState.value === 'true')
+</script>
+
+<template>
+  <SidebarProvider :defaultOpen="defaultOpen">
+    <AppSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar/utils`.
+
+```ts:line-numbers
+const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+```
+
+## Sidebar
+
+The main `Sidebar` component used to render a collapsible sidebar.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar />
+</template>
+```
+
+### Props
+
+| Property      | Type                              | Description                       |
+| ------------- | --------------------------------- | --------------------------------- |
+| `side`        | `left` or `right`                 | The side of the sidebar.          |
+| `variant`     | `sidebar`, `floating`, or `inset` | The variant of the sidebar.       |
+| `collapsible` | `offcanvas`, `icon`, or `none`    | Collapsible state of the sidebar. |
+
+### side
+
+Use the `side` prop to change the side of the sidebar.
+
+Available options are `left` and `right`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar side="left | right" />
+</template>
+```
+
+### variant
+
+Use the `variant` prop to change the variant of the sidebar.
+
+Available options are `sidebar`, `floating` and `inset`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar variant="sidebar | floating | inset" />
+</template>
+```
+
+<Callout>
+
+  **Note:** If you use the `inset` variant, remember to wrap your main content
+  in a `SidebarInset` component.
+
+</Callout>
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar variant="inset" />
+    <SidebarInset>
+      <main><slot /></main>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
+```
+
+### collapsible
+
+Use the `collapsible` prop to make the sidebar collapsible.
+
+Available options are `offcanvas`, `icon` and `none`.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar collapsible="offcanvas | icon | none" />
+</template>
+```
+
+| Prop        | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `offcanvas` | A collapsible sidebar that slides in from the left or right. |
+| `icon`      | A sidebar that collapses to icons.                           |
+| `none`      | A non-collapsible sidebar.                                   |
+
+## useSidebar
+
+The `useSidebar` hook is used to control the sidebar.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { useSidebar } from '@/components/ui/sidebar'
+
+const {
+  state,
+  open,
+  setOpen,
+  openMobile,
+  setOpenMobile,
+  isMobile,
+  toggleSidebar,
+} = useSidebar()
+</script>
+
+```
+
+| Property        | Type                      | Description                                   |
+| --------------- | ------------------------- | --------------------------------------------- |
+| `state`         | `expanded` or `collapsed` | The current state of the sidebar.             |
+| `open`          | `boolean`                 | Whether the sidebar is open.                  |
+| `setOpen`       | `(open: boolean) => void` | Sets the open state of the sidebar.           |
+| `openMobile`    | `boolean`                 | Whether the sidebar is open on mobile.        |
+| `setOpenMobile` | `(open: boolean) => void` | Sets the open state of the sidebar on mobile. |
+| `isMobile`      | `boolean`                 | Whether the sidebar is on mobile.             |
+| `toggleSidebar` | `() => void`              | Toggles the sidebar. Desktop and mobile.      |
+
+## SidebarHeader
+
+Use the `SidebarHeader` component to add a sticky header to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarHeader`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarHeader&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar header with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton>
+                Select Workspace
+                <ChevronDown class="ml-auto" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+              <DropdownMenuItem>
+                <span>Acme Inc</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>Acme Corp.</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+  </Sidebar>
+</template>
+```
+
+## SidebarFooter
+
+Use the `SidebarFooter` component to add a sticky footer to the sidebar.
+
+The following example adds a `<DropdownMenu>` to the `SidebarFooter`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarFooter&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar footer with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton>
+                  <User2 />
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  </SidebarProvider>
+</template>
+```
+
+## SidebarContent
+
+The `SidebarContent` component is used to wrap the content of the sidebar. This is where you add your `SidebarGroup` components. It is scrollable.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarGroup />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarGroup
+
+Use the `SidebarGroup` component to create a section within the sidebar.
+
+A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optional `SidebarGroupAction`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroup&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar group.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<script setup lang="ts">
+import { Sidebar, SidebarContent, SidebarGroup } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupAction>
+          <Plus />
+          <span class="sr-only">Add Project</span>
+        </SidebarGroupAction>
+        <SidebarGroupContent></SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## Collapsible SidebarGroup
+
+To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroupCollapsible&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A collapsible sidebar group.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Collapsible defaultOpen class="group/collapsible">
+    <SidebarGroup>
+      <SidebarGroupLabel asChild>
+        <CollapsibleTrigger>
+          Help
+          <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+        </CollapsibleTrigger>
+      </SidebarGroupLabel>
+      <CollapsibleContent>
+        <SidebarGroupContent />
+      </CollapsibleContent>
+    </SidebarGroup>
+  </Collapsible>
+</template>
+```
+
+<Callout>
+
+  **Note:** We wrap the `CollapsibleTrigger` in a `SidebarGroupLabel` to render
+  a button.
+
+</Callout>
+
+## SidebarGroupAction
+
+Use the `SidebarGroupAction` component to add an action button to the `SidebarGroup`.
+
+```vue:line-numbers {5-7}
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
+    <SidebarGroupAction title="Add Project">
+      <Plus />
+      <span class="sr-only">Add Project</span>
+    </SidebarGroupAction>
+    <SidebarGroupContent />
+  </SidebarGroup>
+</template>
+```
+
+<figure class="flex flex-col gap-4">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarGroupAction&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar group with an action button.
+  </figcaption>
+</figure>
+
+## SidebarMenu
+
+The `SidebarMenu` component is used for building a menu within a `SidebarGroup`.
+
+A `SidebarMenu` component is composed of `SidebarMenuItem`, `SidebarMenuButton`, `<SidebarMenuAction />` and `<SidebarMenuSub />` components.
+
+<img
+  src="/images/sidebar-menu.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  class="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+/>
+<img
+  src="/images/sidebar-menu-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Menu"
+  class="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+/>
+
+Here's an example of a `SidebarMenu` component rendering a list of projects.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenu&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a list of projects.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Projects</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton asChild>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{project.name}}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarMenuButton
+
+The `SidebarMenuButton` component is used to render a menu button within a `SidebarMenuItem`.
+
+### Link or Anchor
+
+By default, the `SidebarMenuButton` renders a button but you can use the `asChild` prop to render a different component such as a `Link` or an `a` tag.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild>
+    <a href="#">Home</a>
+  </SidebarMenuButton>
+</template>
+```
+
+### Icon and Label
+
+You can render an icon and a truncated label inside the button. Remember to wrap the label in a `<span>`.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild>
+    <a href="#">
+      <Home />
+      <span>Home</span>
+    </a>
+  </SidebarMenuButton>
+</template>
+```
+
+### isActive
+
+Use the `isActive` prop to mark a menu item as active.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuButton asChild isActive>
+    <a href="#">Home</a>
+  </SidebarMenuButton>
+</template>
+```
+
+## SidebarMenuAction
+
+The `SidebarMenuAction` component is used to render a menu action within a `SidebarMenuItem`.
+
+This button works independently of the `SidebarMenuButton` i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton asChild>
+      <a href="#">
+        <Home />
+        <span>Home</span>
+      </a>
+    </SidebarMenuButton>
+    <SidebarMenuAction>
+      <Plus />
+      <span class="sr-only">Add Project</span>
+    </SidebarMenuAction>
+  </SidebarMenuItem>
+</template>
+```
+
+### DropdownMenu
+
+Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuAction&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu action with a dropdown menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton asChild>
+      <a href="#">
+        <Home />
+        <span>Home</span>
+      </a>
+    </SidebarMenuButton>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuAction>
+          <MoreHorizontal />
+        </SidebarMenuAction>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" align="start">
+        <DropdownMenuItem>
+          <span>Edit Project</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Delete Project</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </SidebarMenuItem>
+</template>
+```
+
+## SidebarMenuSub
+
+The `SidebarMenuSub` component is used to render a submenu within a `SidebarMenu`.
+
+Use `<SidebarMenuSubItem />` and `<SidebarMenuSubButton />` to render a submenu item.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuSub&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a submenu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuSub>
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton />
+      </SidebarMenuSubItem>
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton />
+      </SidebarMenuSubItem>
+    </SidebarMenuSub>
+  </SidebarMenuItem>
+</template>
+```
+
+## Collapsible SidebarMenu
+
+To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub` components in a `Collapsible`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuCollapsible&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A collapsible sidebar menu.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenu>
+    <Collapsible defaultOpen class="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton />
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <SidebarMenuSubItem />
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  </SidebarMenu>
+</template>
+```
+
+## SidebarMenuBadge
+
+The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenuItem`.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarMenuBadge&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A sidebar menu with a badge.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuBadge>24</SidebarMenuBadge>
+  </SidebarMenuItem>
+</template>
+```
+
+## SidebarMenuSkeleton
+
+The `SidebarMenuSkeleton` component is used to render a skeleton within a `SidebarMenuItem`. You can use this to show a loading state while waiting for data to load.
+
+```vue:line-numbers
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem v-for="i in 5" :key="i">
+      <SidebarMenuSkeleton />
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
+```
+
+## SidebarSeparator
+
+The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarSeparator />
+    <SidebarContent>
+      <SidebarGroup />
+      <SidebarSeparator />
+      <SidebarGroup />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+## SidebarTrigger
+
+Use the `SidebarTrigger` component to render a button that toggles the sidebar.
+
+The `SidebarTrigger` component must be used within a `SidebarProvider`.
+
+```vue:line-numbers
+<template>
+  <SidebarProvider>
+    <Sidebar />
+    <main>
+      <SidebarTrigger />
+    </main>
+  </SidebarProvider>
+</template>
+```
+
+### Custom Trigger
+
+To create a custom trigger, you can use the `useSidebar` hook.
+
+```vue:line-numbers
+<script setup lang="ts">
+import { useSidebar } from '@/components/ui/sidebar'
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button @click="toggleSidebar">Toggle Sidebar</button>
+</template>
+```
+
+## SidebarRail
+
+The `SidebarRail` component is used to render a rail within a `Sidebar`. This rail can be used to toggle the sidebar.
+
+```vue:line-numbers
+<template>
+  <Sidebar>
+    <SidebarHeader />
+    <SidebarContent>
+      <SidebarGroup />
+    </SidebarContent>
+    <SidebarFooter />
+    <SidebarRail />
+  </Sidebar>
+</template>
+```
+
+## Controlled Sidebar
+
+Use the `open` and `onOpenChange` props to control the sidebar.
+
+<figure class="flex flex-col gap-4 mt-6">
+  <BlockPreview url="/blocks/renderer?name=DemoSidebarControlled&styles=new-york" ></BlockPreview>
+  <figcaption class="text-center text-sm text-gray-500">
+    A controlled sidebar.
+  </figcaption>
+</figure>
+
+```vue:line-numbers
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar />
+  </SidebarProvider>
+</template>
+```
+
+## Theming
+
+We use the following CSS variables to theme the sidebar.
+
+```css
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 240 5.9% 10%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+```
+
+**We intentionally use different variables for the sidebar and the rest of the application** to make it easy to have a sidebar that is styled differently from the rest of the application. Think a sidebar with a darker shade from the main application.
+
+## Styling
+
+Here are some tips for styling the sidebar based on different states.
+
+- **Styling an element based on the sidebar collapsible state.** The following will hide the `SidebarGroup` when the sidebar is in `icon` mode.
+
+```vue
+<template>
+  <Sidebar collapsible="icon">
+    <SidebarContent>
+      <SidebarGroup class="group-data-[collapsible=icon]:hidden" />
+    </SidebarContent>
+  </Sidebar>
+</template>
+```
+
+- **Styling a menu action based on the menu button active state.** The following will force the menu action to be visible when the menu button is active.
+
+```vue
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton />
+    <SidebarMenuAction class="peer-data-[active=true]/menu-button:opacity-100" />
+  </SidebarMenuItem>
+</template>
+```
+
+You can find more tips on using states for styling in this [Twitter thread](https://x.com/shadcn/status/1842329158879420864).
diff --git a/apps/www/src/public/r/styles/default/DemoSidebar.json b/apps/www/src/public/r/styles/default/DemoSidebar.json
new file mode 100644
index 000000000..087fa87bb
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebar.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebar",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarControlled.json b/apps/www/src/public/r/styles/default/DemoSidebarControlled.json
new file mode 100644
index 000000000..b831f485a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarControlled.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarControlled",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarFooter.json b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
new file mode 100644
index 000000000..1b0e09ca7
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarFooter",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroup.json b/apps/www/src/public/r/styles/default/DemoSidebarGroup.json
new file mode 100644
index 000000000..2dae19a49
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroup.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarGroup",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
new file mode 100644
index 000000000..0e547328c
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "DemoSidebarGroupAction",
+  "type": "registry:block",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
new file mode 100644
index 000000000..2aab4e5e0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarGroupCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupCollapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarHeader.json b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
new file mode 100644
index 000000000..d24fffae1
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarHeader",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenu.json b/apps/www/src/public/r/styles/default/DemoSidebarMenu.json
new file mode 100644
index 000000000..a479108d0
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenu.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenu",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
new file mode 100644
index 000000000..61d1924bf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuAction.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuAction",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
new file mode 100644
index 000000000..a166ee8b2
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuBadge.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuBadge",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
new file mode 100644
index 000000000..82c453dbf
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuCollapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
new file mode 100644
index 000000000..99806a372
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuSub.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuSub",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                    <SidebarMenuSubButton as-child>\n                      <a :href=\"subItem.url\">\n                        <span>{{ subItem.title }}</span>\n                      </a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Login01.json b/apps/www/src/public/r/styles/default/Login01.json
new file mode 100644
index 000000000..9e7d8cb2d
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Login01.json
@@ -0,0 +1,26 @@
+{
+  "name": "Login01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "LoginForm.vue",
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Login01/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Login01/components/LoginForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index f86687c6e..dcb2eb2e2 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -15,25 +15,25 @@
   "files": [
     {
       "path": "block/Sidebar01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar01/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar01/components/SearchForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar01/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
index 4e8921b3c..6df2d906c 100644
--- a/apps/www/src/public/r/styles/default/Sidebar02.json
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar03.json b/apps/www/src/public/r/styles/default/Sidebar03.json
index 12881329a..51ef75c78 100644
--- a/apps/www/src/public/r/styles/default/Sidebar03.json
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -17,7 +17,7 @@
     },
     {
       "path": "block/Sidebar03/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar06.json b/apps/www/src/public/r/styles/default/Sidebar06.json
index 556210097..c1924b2e8 100644
--- a/apps/www/src/public/r/styles/default/Sidebar06.json
+++ b/apps/www/src/public/r/styles/default/Sidebar06.json
@@ -18,25 +18,25 @@
   "files": [
     {
       "path": "block/Sidebar06/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar06/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar06/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar06/components/SidebarOptInForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { SidebarInput } from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index d2d01970d..e29dcd9b9 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -18,37 +18,37 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar07/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/NavProjects.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/TeamSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar08.json b/apps/www/src/public/r/styles/default/Sidebar08.json
index b24f13546..413723623 100644
--- a/apps/www/src/public/r/styles/default/Sidebar08.json
+++ b/apps/www/src/public/r/styles/default/Sidebar08.json
@@ -18,37 +18,37 @@
   "files": [
     {
       "path": "block/Sidebar08/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar08/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/components/NavProjects.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/components/NavSecondary.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar08/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar09.json b/apps/www/src/public/r/styles/default/Sidebar09.json
index 4e6aa941f..bf028c2fa 100644
--- a/apps/www/src/public/r/styles/default/Sidebar09.json
+++ b/apps/www/src/public/r/styles/default/Sidebar09.json
@@ -16,19 +16,19 @@
   "files": [
     {
       "path": "block/Sidebar09/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar09/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar09/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar10.json b/apps/www/src/public/r/styles/default/Sidebar10.json
index 987027a10..0baa45461 100644
--- a/apps/www/src/public/r/styles/default/Sidebar10.json
+++ b/apps/www/src/public/r/styles/default/Sidebar10.json
@@ -21,49 +21,49 @@
   "files": [
     {
       "path": "block/Sidebar10/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar10/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/NavActions.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/NavFavorites.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/NavSecondary.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar10/components/TeamSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
index 6545b1e0b..9958c7cfa 100644
--- a/apps/www/src/public/r/styles/default/Sidebar11.json
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "block/Sidebar11/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar12.json b/apps/www/src/public/r/styles/default/Sidebar12.json
index 13238b694..b737597e6 100644
--- a/apps/www/src/public/r/styles/default/Sidebar12.json
+++ b/apps/www/src/public/r/styles/default/Sidebar12.json
@@ -18,31 +18,31 @@
   "files": [
     {
       "path": "block/Sidebar12/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar12/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/components/Calendars.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/components/DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar12/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar13.json b/apps/www/src/public/r/styles/default/Sidebar13.json
index 45e000319..7f9c60761 100644
--- a/apps/www/src/public/r/styles/default/Sidebar13.json
+++ b/apps/www/src/public/r/styles/default/Sidebar13.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "block/Sidebar13/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar13/components/SettingsDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar14.json b/apps/www/src/public/r/styles/default/Sidebar14.json
index 61f86f011..0a8e09e2d 100644
--- a/apps/www/src/public/r/styles/default/Sidebar14.json
+++ b/apps/www/src/public/r/styles/default/Sidebar14.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "block/Sidebar14/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar14/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar15.json b/apps/www/src/public/r/styles/default/Sidebar15.json
index d72f6be0e..5a63ea70c 100644
--- a/apps/www/src/public/r/styles/default/Sidebar15.json
+++ b/apps/www/src/public/r/styles/default/Sidebar15.json
@@ -24,73 +24,73 @@
   "files": [
     {
       "path": "block/Sidebar15/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar15/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/Calendars.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavFavorites.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavMain.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavSecondary.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/SidebarLeft.vue",
-      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/SidebarRight.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/TeamSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebar.json b/apps/www/src/public/r/styles/new-york/DemoSidebar.json
new file mode 100644
index 000000000..8452491f0
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebar.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebar",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json b/apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
new file mode 100644
index 000000000..f6882b6ca
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarControlled.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarControlled",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarControlled.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
new file mode 100644
index 000000000..b1ac69726
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarFooter",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
new file mode 100644
index 000000000..bf6a3398e
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroup.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarGroup",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
new file mode 100644
index 000000000..0ba7c82c2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
@@ -0,0 +1,18 @@
+{
+  "name": "DemoSidebarGroupAction",
+  "type": "registry:block",
+  "dependencies": [
+    "vue-sonner"
+  ],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
new file mode 100644
index 000000000..6c6ded414
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarGroupCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarGroupCollapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json b/apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
new file mode 100644
index 000000000..d24fffae1
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarHeader.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarHeader",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
new file mode 100644
index 000000000..7394fcba2
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenu.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenu",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
new file mode 100644
index 000000000..dcdf84f49
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuAction.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuAction",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "dropdown-menu",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
new file mode 100644
index 000000000..fbe86a359
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuBadge.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuBadge",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuBadge.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
new file mode 100644
index 000000000..fe279ba1c
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
@@ -0,0 +1,17 @@
+{
+  "name": "DemoSidebarMenuCollapsible",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "collapsible",
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuCollapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
new file mode 100644
index 000000000..516e0678d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuSub.json
@@ -0,0 +1,16 @@
+{
+  "name": "DemoSidebarMenuSub",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "sidebar"
+  ],
+  "files": [
+    {
+      "path": "block/DemoSidebarMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                    <SidebarMenuSubButton as-child>\n                      <a :href=\"subItem.url\">\n                        <span>{{ subItem.title }}</span>\n                      </a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:block",
+      "target": "pages/dashboard/index.vue"
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Login01.json b/apps/www/src/public/r/styles/new-york/Login01.json
new file mode 100644
index 000000000..9e7d8cb2d
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Login01.json
@@ -0,0 +1,26 @@
+{
+  "name": "Login01",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "LoginForm.vue",
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "block/Login01/page.vue",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Login01/components/LoginForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index f86687c6e..86432ecbd 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -33,7 +33,7 @@
     },
     {
       "path": "block/Sidebar01/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
index a4c37bbf1..5ab8ce360 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar02.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "block/Sidebar02/components/VersionSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index d2d01970d..62acb2765 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -42,13 +42,13 @@
     },
     {
       "path": "block/Sidebar07/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar07/components/TeamSwitcher.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar08.json b/apps/www/src/public/r/styles/new-york/Sidebar08.json
index b24f13546..472f743cd 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar08.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar08.json
@@ -48,7 +48,7 @@
     },
     {
       "path": "block/Sidebar08/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar09.json b/apps/www/src/public/r/styles/new-york/Sidebar09.json
index 88f206b63..3fb1bbffc 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar09.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar09.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "block/Sidebar09/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar10.json b/apps/www/src/public/r/styles/new-york/Sidebar10.json
index 987027a10..8efa072b8 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar10.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar10.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "block/Sidebar10/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar12.json b/apps/www/src/public/r/styles/new-york/Sidebar12.json
index 13238b694..63f7acf8a 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar12.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar12.json
@@ -42,7 +42,7 @@
     },
     {
       "path": "block/Sidebar12/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar13.json b/apps/www/src/public/r/styles/new-york/Sidebar13.json
index 45e000319..a7af51777 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar13.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar13.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "block/Sidebar13/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar14.json b/apps/www/src/public/r/styles/new-york/Sidebar14.json
index 61f86f011..a599da021 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar14.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar14.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "block/Sidebar14/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar15.json b/apps/www/src/public/r/styles/new-york/Sidebar15.json
index d72f6be0e..1f8309572 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar15.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar15.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "block/Sidebar15/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
@@ -66,13 +66,13 @@
     },
     {
       "path": "block/Sidebar15/components/NavUser.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar15/components/NavWorkspaces.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
@@ -84,7 +84,7 @@
     },
     {
       "path": "block/Sidebar15/components/SidebarRight.vue",
-      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 3db7b0c36..831834bd3 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -6717,6 +6717,232 @@
       }
     ]
   },
+  {
+    "name": "DemoSidebar",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarControlled",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarFooter",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroup",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupAction",
+    "type": "registry:block",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupCollapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarHeader",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenu",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuAction",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuBadge",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuCollapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuSub",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                    <SidebarMenuSubButton as-child>\n                      <a :href=\"subItem.url\">\n                        <span>{{ subItem.title }}</span>\n                      </a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Login01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "LoginForm.vue",
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "block/Login01/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Login01/components/LoginForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "Sidebar01",
     "type": "registry:block",
@@ -6752,7 +6978,7 @@
       },
       {
         "path": "block/Sidebar01/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -6794,7 +7020,7 @@
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -6972,13 +7198,13 @@
       },
       {
         "path": "block/Sidebar07/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/TeamSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7034,7 +7260,7 @@
       },
       {
         "path": "block/Sidebar08/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7070,7 +7296,7 @@
       },
       {
         "path": "block/Sidebar09/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7135,7 +7361,7 @@
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -7224,7 +7450,7 @@
       },
       {
         "path": "block/Sidebar12/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7244,7 +7470,7 @@
     "files": [
       {
         "path": "block/Sidebar13/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
@@ -7274,7 +7500,7 @@
       },
       {
         "path": "block/Sidebar14/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -7312,7 +7538,7 @@
       },
       {
         "path": "block/Sidebar15/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -7348,13 +7574,13 @@
       },
       {
         "path": "block/Sidebar15/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -7366,7 +7592,7 @@
       },
       {
         "path": "block/Sidebar15/components/SidebarRight.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -13909,6 +14135,232 @@
       }
     ]
   },
+  {
+    "name": "DemoSidebar",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nimport { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'\n\n// Menu items.\nconst items = [\n  {\n    title: 'Home',\n    url: '#',\n    icon: Home,\n  },\n  {\n    title: 'Inbox',\n    url: '#',\n    icon: Inbox,\n  },\n  {\n    title: 'Calendar',\n    url: '#',\n    icon: Calendar,\n  },\n  {\n    title: 'Search',\n    url: '#',\n    icon: Search,\n  },\n  {\n    title: 'Settings',\n    url: '#',\n    icon: Settings,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Application</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarControlled",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarControlled.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n\nconst open = ref(true)\n</script>\n\n<template>\n  <SidebarProvider v-model:open=\"open\">\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>\n      <header className=\"flex items-center h-12 px-4 justify-between\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"open = !open\"\n        >\n          <PanelLeftClose v-if=\"open\" />\n          <PanelLeftOpen v-else />\n          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>\n        </Button>\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarFooter",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarFooter.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroup",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Help</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <LifeBuoy />\n                  Support\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <Send />\n                  Feedback\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupAction",
+    "type": "registry:block",
+    "dependencies": [
+      "vue-sonner"
+    ],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarGroupCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarGroupCollapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <Collapsible :default-open=\"true\" class=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              as-child\n              class=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <CollapsibleTrigger>\n                Help\n                <ChevronDown class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n              </CollapsibleTrigger>\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <LifeBuoy />\n                      Support\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send />\n                      Feedback\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarHeader",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarHeader.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenu",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuAction",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "dropdown-menu",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuAction.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <SidebarMenuAction>\n                      <MoreHorizontal />\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent side=\"right\" align=\"start\">\n                    <DropdownMenuItem>\n                      <span>Edit Project</span>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <span>Delete Project</span>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuBadge",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuBadge.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nimport { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'\n\nconst projects = [\n  {\n    name: 'Design Engineering',\n    url: '#',\n    icon: Frame,\n    badge: '24',\n  },\n  {\n    name: 'Sales & Marketing',\n    url: '#',\n    icon: PieChart,\n    badge: '12',\n  },\n  {\n    name: 'Travel',\n    url: '#',\n    icon: Map,\n    badge: '3',\n  },\n  {\n    name: 'Support',\n    url: '#',\n    icon: LifeBuoy,\n    badge: '21',\n  },\n  {\n    name: 'Feedback',\n    url: '#',\n    icon: Send,\n    badge: '8',\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n                <SidebarMenuButton\n                  as-child\n                  class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n                >\n                  <a :href=\"project.url\">\n                    <component :is=\"project.icon\" />\n                    <span>{{ project.name }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuCollapsible",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "collapsible",
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuCollapsible.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "DemoSidebarMenuSub",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "sidebar"
+    ],
+    "files": [
+      {
+        "path": "block/DemoSidebarMenuSub.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in items\" :key=\"index\">\n                <SidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <span>{{ item.title }}</span>\n                  </a>\n                </SidebarMenuButton>\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                    <SidebarMenuSubButton as-child>\n                      <a :href=\"subItem.url\">\n                        <span>{{ subItem.title }}</span>\n                      </a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:block",
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Login01",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "LoginForm.vue",
+      "button",
+      "card",
+      "input",
+      "label"
+    ],
+    "files": [
+      {
+        "path": "block/Login01/page.vue",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Login01/components/LoginForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "Sidebar01",
     "type": "registry:block",
@@ -13926,25 +14378,25 @@
     "files": [
       {
         "path": "block/Sidebar01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar01/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar01/components/SearchForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar01/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -13986,7 +14438,7 @@
       },
       {
         "path": "block/Sidebar02/components/VersionSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14011,7 +14463,7 @@
       },
       {
         "path": "block/Sidebar03/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14096,25 +14548,25 @@
     "files": [
       {
         "path": "block/Sidebar06/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus as dropdowns.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar06/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar06/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'\nimport SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar06/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar06/components/SidebarOptInForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { SidebarInput } from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { SidebarInput } from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <Card class=\"shadow-none\">\n    <form>\n      <CardHeader class=\"p-4 pb-0\">\n        <CardTitle class=\"text-sm\">\n          Subscribe to our newsletter\n        </CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"grid gap-2.5 p-4\">\n        <SidebarInput type=\"email\" placeholder=\"Email\" />\n        <Button\n          class=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n          size=\"sm\"\n        >\n          Subscribe\n        </Button>\n      </CardContent>\n    </form>\n  </Card>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14140,37 +14592,37 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar07/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/new-york/ui/sidebar'\n\nimport NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/NavProjects.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar07/components/TeamSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14196,19 +14648,19 @@
     "files": [
       {
         "path": "block/Sidebar08/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'An inset sidebar with secondary navigation.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar08/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar08/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'\n\nimport NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'\nimport NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'inset',\n})\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <Command class=\"size-4\" />\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar08/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child>\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14220,13 +14672,13 @@
       },
       {
         "path": "block/Sidebar08/components/NavSecondary.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar08/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14250,19 +14702,19 @@
     "files": [
       {
         "path": "block/Sidebar09/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'Collapsible nested sidebars.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar09/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider\n    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar09/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'\n\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  navMain: [\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: 'Drafts',\n      url: '#',\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: 'Sent',\n      url: '#',\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: 'Junk',\n      url: '#',\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: 'William Smith',\n      email: 'williamsmith@example.com',\n      subject: 'Meeting Tomorrow',\n      date: '09:34 AM',\n      teaser:\n        'Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.',\n    },\n    {\n      name: 'Alice Smith',\n      email: 'alicesmith@example.com',\n      subject: 'Re: Project Update',\n      date: 'Yesterday',\n      teaser:\n        'Thanks for the update. The progress looks great so far.\\nLet\\'s schedule a call to discuss the next steps.',\n    },\n    {\n      name: 'Bob Johnson',\n      email: 'bobjohnson@example.com',\n      subject: 'Weekend Plans',\n      date: '2 days ago',\n      teaser:\n        'Hey everyone! I\\'m thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?',\n    },\n    {\n      name: 'Emily Davis',\n      email: 'emilydavis@example.com',\n      subject: 'Re: Question about Budget',\n      date: '2 days ago',\n      teaser:\n        'I\\'ve reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?',\n    },\n    {\n      name: 'Michael Wilson',\n      email: 'michaelwilson@example.com',\n      subject: 'Important Announcement',\n      date: '1 week ago',\n      teaser:\n        'Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company\\'s future.',\n    },\n    {\n      name: 'Sarah Brown',\n      email: 'sarahbrown@example.com',\n      subject: 'Re: Feedback on Proposal',\n      date: '1 week ago',\n      teaser:\n        'Thank you for sending over the proposal. I\\'ve reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?',\n    },\n    {\n      name: 'David Lee',\n      email: 'davidlee@example.com',\n      subject: 'New Project Idea',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?',\n    },\n    {\n      name: 'Olivia Wilson',\n      email: 'oliviawilson@example.com',\n      subject: 'Vacation Plans',\n      date: '1 week ago',\n      teaser:\n        'Just a heads up that I\\'ll be taking a two-week vacation next month.\\nI\\'ll make sure all my projects are up to date before I leave.',\n    },\n    {\n      name: 'James Martin',\n      email: 'jamesmartin@example.com',\n      subject: 'Re: Conference Registration',\n      date: '1 week ago',\n      teaser:\n        'I\\'ve completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.',\n    },\n    {\n      name: 'Sophia White',\n      email: 'sophiawhite@example.com',\n      subject: 'Team Dinner',\n      date: '1 week ago',\n      teaser:\n        'To celebrate our recent project success, I\\'d like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.',\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0])\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden [&>[data-sidebar=sidebar]]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"!w-[calc(var(--sidebar-width-icon)_+_1px)] border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar09/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14327,7 +14779,7 @@
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14392,31 +14844,31 @@
     "files": [
       {
         "path": "block/Sidebar12/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar12/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/components/Calendars.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/components/DatePicker.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar12/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14436,13 +14888,13 @@
     "files": [
       {
         "path": "block/Sidebar13/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div className=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar13/components/SettingsDialog.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n  nav: [\n    { name: 'Notifications', icon: Bell },\n    { name: 'Navigation', icon: Menu },\n    { name: 'Home', icon: Home },\n    { name: 'Appearance', icon: Paintbrush },\n    { name: 'Messages & media', icon: MessageCircle },\n    { name: 'Language & region', icon: Globe },\n    { name: 'Accessibility', icon: Keyboard },\n    { name: 'Mark as read', icon: Check },\n    { name: 'Audio & video', icon: Video },\n    { name: 'Connected accounts', icon: Link },\n    { name: 'Privacy & visibility', icon: Lock },\n    { name: 'Advanced', icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14460,13 +14912,13 @@
     "files": [
       {
         "path": "block/Sidebar14/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n    <AppSidebar side=\"right\" />\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar14/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14498,73 +14950,73 @@
     "files": [
       {
         "path": "block/Sidebar15/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A left and right sidebar.'\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'\nimport SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar15/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" className=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/Calendars.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/DatePicker.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavFavorites.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavSecondary.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/SidebarLeft.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar15/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar15/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/SidebarRight.vue",
-        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n  SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'\n\nimport DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'\nimport NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarSeparator,\n} from '@/registry/default/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'none',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  calendars: [\n    {\n      name: 'My Calendars',\n      items: ['Personal', 'Work', 'Family'],\n    },\n    {\n      name: 'Favorites',\n      items: ['Holidays', 'Birthdays'],\n    },\n    {\n      name: 'Other',\n      items: ['Travel', 'Reminders', 'Deadlines'],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar15/components/TeamSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
diff --git a/apps/www/src/registry/default/block/DemoSidebar.vue b/apps/www/src/registry/default/block/DemoSidebar.vue
new file mode 100644
index 000000000..09d6c3588
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in items" :key="item.title">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <component :is="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarControlled.vue b/apps/www/src/registry/default/block/DemoSidebarControlled.vue
new file mode 100644
index 000000000..1bc2d8060
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarControlled.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+
+const open = ref(true)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header className="flex items-center h-12 px-4 justify-between">
+        <Button
+          size="sm"
+          variant="ghost"
+          @click="open = !open"
+        >
+          <PanelLeftClose v-if="open" />
+          <PanelLeftOpen v-else />
+          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>
+        </Button>
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarFooter.vue b/apps/www/src/registry/default/block/DemoSidebarFooter.vue
new file mode 100644
index 000000000..f75795047
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarFooter.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+import { ChevronUp } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroup.vue b/apps/www/src/registry/default/block/DemoSidebarGroup.vue
new file mode 100644
index 000000000..5af07634a
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroup.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Help</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <LifeBuoy />
+                  Support
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Send />
+                  Feedback
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue b/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
new file mode 100644
index 000000000..c033c07cd
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroupAction.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  Map,
+  PieChart,
+  Plus,
+} from 'lucide-vue-next'
+
+import { toast, Toaster } from 'vue-sonner'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Toaster
+      position="bottom-left"
+      :toast-options="{
+        class: 'ml-[160px]',
+      }"
+    />
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupAction
+            title="Add Project"
+            @click="() => toast('You clicked the group action!')"
+          >
+            <Plus /> <span class="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Frame />
+                    <span>Design Engineering</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <PieChart />
+                    <span>Sales & Marketing</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Map />
+                    <span>Travel</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue b/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
new file mode 100644
index 000000000..cb07ec35c
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarGroupCollapsible.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <Collapsible :default-open="true" class="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel
+              as-child
+              class="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <CollapsibleTrigger>
+                Help
+                <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+              </CollapsibleTrigger>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <LifeBuoy />
+                      Support
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <Send />
+                      Feedback
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarHeader.vue b/apps/www/src/registry/default/block/DemoSidebarHeader.vue
new file mode 100644
index 000000000..edb2bd337
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarHeader.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+import { ChevronDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Select Workspace
+                  <ChevronDown class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+                <DropdownMenuItem>
+                  <span>Acme Inc</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Acme Corp.</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenu.vue b/apps/www/src/registry/default/block/DemoSidebarMenu.vue
new file mode 100644
index 000000000..59c791f99
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue b/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
new file mode 100644
index 000000000..c2ef7463e
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuAction.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue b/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
new file mode 100644
index 000000000..5fd743b4a
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuBadge.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+    badge: '24',
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+    badge: '12',
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+    badge: '3',
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+    badge: '21',
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+    badge: '8',
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue b/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
new file mode 100644
index 000000000..86a76fbcf
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuCollapsible.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Collapsible
+                v-for="(item, index) in items"
+                :key="index"
+                class="group/collapsible"
+                :default-open="index === 0"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger as-child>
+                    <SidebarMenuButton>
+                      <span>{{ item.title }}</span>
+                      <ChevronRight class="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                        <SidebarMenuSubButton as-child>
+                          <a :href="subItem.url">
+                            <span>{{ subItem.title }}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue b/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
new file mode 100644
index 000000000..a7e97fece
--- /dev/null
+++ b/apps/www/src/registry/default/block/DemoSidebarMenuSub.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/default/ui/sidebar'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in items" :key="index">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                    <SidebarMenuSubButton as-child>
+                      <a :href="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Login01/components/LoginForm.vue b/apps/www/src/registry/default/block/Login01/components/LoginForm.vue
new file mode 100644
index 000000000..41d6d5665
--- /dev/null
+++ b/apps/www/src/registry/default/block/Login01/components/LoginForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/default/ui/card'
+import { Input } from '@/registry/default/ui/input'
+import { Label } from '@/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/default/block/Login01/page.vue b/apps/www/src/registry/default/block/Login01/page.vue
new file mode 100644
index 000000000..4ded98e3f
--- /dev/null
+++ b/apps/www/src/registry/default/block/Login01/page.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '870px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'
+</script>
+
+<template>
+  <div className="flex h-screen w-full items-center justify-center px-4">
+    <LoginForm />
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
index 81f5e6397..ffdc80d11 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'
-import VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'
+import SearchForm from '@/registry/default/block/Sidebar01/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/default/block/Sidebar01/components/VersionSwitcher.vue'
 
 import {
   Sidebar,
@@ -14,7 +14,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
index bc39a8f4a..b88fa9e30 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/SearchForm.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarInput,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
index 2fe6c8f1e..5a6d3e024 100644
--- a/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
@@ -4,13 +4,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
 
 import { ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar01/page.vue b/apps/www/src/registry/default/block/Sidebar01/page.vue
index 33adc1dee..cff5022c1 100644
--- a/apps/www/src/registry/default/block/Sidebar01/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar01/page.vue
@@ -5,7 +5,7 @@ export const description
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -13,13 +13,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
index e8eb48055..9911908bb 100644
--- a/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar03/components/AppSidebar.vue
@@ -12,7 +12,7 @@ import {
   SidebarMenuSubItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar03/page.vue b/apps/www/src/registry/default/block/Sidebar03/page.vue
index fc0cce1bd..d0a87c41d 100644
--- a/apps/www/src/registry/default/block/Sidebar03/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar03/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
index 74342c740..0fa3b1575 100644
--- a/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar04/components/AppSidebar.vue
@@ -11,7 +11,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   type SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar04/page.vue b/apps/www/src/registry/default/block/Sidebar04/page.vue
index 80bfa2222..bb77458f3 100644
--- a/apps/www/src/registry/default/block/Sidebar04/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar04/page.vue
@@ -4,7 +4,7 @@ export const description = 'A floating sidebar with submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
index b1aeec8dc..0ebeac4c7 100644
--- a/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/components/AppSidebar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'
+import SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   Sidebar,
   SidebarContent,
@@ -18,7 +18,7 @@ import {
   SidebarMenuSubItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
index bc39a8f4a..b88fa9e30 100644
--- a/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/components/SearchForm.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarInput,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Search } from 'lucide-vue-next'
 </script>
 
diff --git a/apps/www/src/registry/default/block/Sidebar05/page.vue b/apps/www/src/registry/default/block/Sidebar05/page.vue
index 9cd241911..97e1e0432 100644
--- a/apps/www/src/registry/default/block/Sidebar05/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar05/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with collapsible submenus.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
index 757100bbf..e9d9bc3e6 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NavMain from '@/registry/new-york/block/Sidebar06/components/NavMain.vue'
-import SidebarOptInForm from '@/registry/new-york/block/Sidebar06/components/SidebarOptInForm.vue'
+import NavMain from '@/registry/default/block/Sidebar06/components/NavMain.vue'
+import SidebarOptInForm from '@/registry/default/block/Sidebar06/components/SidebarOptInForm.vue'
 
 import {
   Sidebar,
@@ -12,7 +12,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { GalleryVerticalEnd } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
index 13d0fd2f7..6a2c64783 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/NavMain.vue
@@ -4,14 +4,14 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { useMediaQuery } from '@vueuse/core'
 import { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'
 
diff --git a/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
index 8311df11e..fbfeaa7b8 100644
--- a/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/components/SidebarOptInForm.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/registry/new-york/ui/card'
-import { SidebarInput } from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/card'
+import { SidebarInput } from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar06/page.vue b/apps/www/src/registry/default/block/Sidebar06/page.vue
index 0e6d0b7a3..adcef7030 100644
--- a/apps/www/src/registry/default/block/Sidebar06/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar06/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar with submenus as dropdowns.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar06/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar06/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
index ed8dc8a4a..dfdb5932e 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/AppSidebar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { SidebarProps } from '@/registry/new-york/ui/sidebar'
+import type { SidebarProps } from '@/registry/default/ui/sidebar'
 
-import NavMain from '@/registry/new-york/block/Sidebar07/components/NavMain.vue'
-import NavProjects from '@/registry/new-york/block/Sidebar07/components/NavProjects.vue'
-import NavUser from '@/registry/new-york/block/Sidebar07/components/NavUser.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'
+import NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'
+import NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 import {
   AudioWaveform,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
index a2c4b664f..945643378 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavMain.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -13,7 +13,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
index b33a31968..b482f4e42 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavProjects.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Folder,
   Forward,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
index b6f1b6247..ca163b1ce 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
index 0a2079944..3e69d3bb3 100644
--- a/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
@@ -7,14 +7,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronsUpDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar07/page.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
index 8482f7701..83c8f5406 100644
--- a/apps/www/src/registry/default/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/page.vue
@@ -6,7 +6,7 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar07/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -14,13 +14,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
index d80b5c565..c7784427e 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/AppSidebar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import NavMain from '@/registry/new-york/block/Sidebar08/components/NavMain.vue'
+import NavMain from '@/registry/default/block/Sidebar08/components/NavMain.vue'
 
-import NavProjects from '@/registry/new-york/block/Sidebar08/components/NavProjects.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar08/components/NavSecondary.vue'
-import NavUser from '@/registry/new-york/block/Sidebar08/components/NavUser.vue'
+import NavProjects from '@/registry/default/block/Sidebar08/components/NavProjects.vue'
+import NavSecondary from '@/registry/default/block/Sidebar08/components/NavSecondary.vue'
+import NavUser from '@/registry/default/block/Sidebar08/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   type SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BookOpen,
   Bot,
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
index d17a748b3..db439924b 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavMain.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -14,7 +14,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
index b33a31968..b482f4e42 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavProjects.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Folder,
   Forward,
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
index 22c14698c..60cfece56 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavSecondary.vue
@@ -7,7 +7,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
index b6f1b6247..ca163b1ce 100644
--- a/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar08/page.vue b/apps/www/src/registry/default/block/Sidebar08/page.vue
index cee439ec1..d187e95e1 100644
--- a/apps/www/src/registry/default/block/Sidebar08/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar08/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar08/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar08/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
index fb09e7993..1a4ef28f3 100644
--- a/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import NavUser from '@/registry/new-york/block/Sidebar09/components/NavUser.vue'
+import NavUser from '@/registry/default/block/Sidebar09/components/NavUser.vue'
 
-import { Label } from '@/registry/new-york/ui/label'
+import { Label } from '@/registry/default/ui/label'
 import {
   Sidebar,
   SidebarContent,
@@ -15,8 +15,8 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
-import { Switch } from '@/registry/new-york/ui/switch'
+} from '@/registry/default/ui/sidebar'
+import { Switch } from '@/registry/default/ui/switch'
 import { ArchiveX, Command, File, Inbox, Send, Trash2 } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 
diff --git a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
index 4a31d47c9..84242afe4 100644
--- a/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar09/page.vue b/apps/www/src/registry/default/block/Sidebar09/page.vue
index 88430634b..02b94f095 100644
--- a/apps/www/src/registry/default/block/Sidebar09/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar09/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar09/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar09/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
index 15a158038..acd484c25 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
+import NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'
 
-import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
-import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'
+import NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarHeader,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   AudioWaveform,
   Blocks,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
index a3b303d39..d414a6173 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
+} from '@/registry/default/ui/popover'
 import {
   Sidebar,
   SidebarContent,
@@ -14,7 +14,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowDown,
   ArrowUp,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
index 97a99afc4..dbfffc2f9 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowUpRight,
   Link,
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
index 3fb44bcde..5d4907b7d 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue
@@ -5,7 +5,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
index 3d728239f..7dde7a3a9 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue
@@ -9,7 +9,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
index b768426d6..a046bddfa 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -16,7 +16,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
index 125caaa3e..b9b27e43c 100644
--- a/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue
@@ -7,12 +7,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar10/page.vue b/apps/www/src/registry/default/block/Sidebar10/page.vue
index a48f22264..8140e773d 100644
--- a/apps/www/src/registry/default/block/Sidebar10/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar10/page.vue
@@ -4,20 +4,20 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
-import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
+import AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'
+import NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
index 0039f959c..c44c17c4f 100644
--- a/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
+import Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -12,7 +12,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { File } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
index f8fce337f..62c1be165 100644
--- a/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/components/Tree.vue
@@ -3,13 +3,13 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, File, Folder } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar11/page.vue b/apps/www/src/registry/default/block/Sidebar11/page.vue
index baa2bdb05..da8b520c0 100644
--- a/apps/www/src/registry/default/block/Sidebar11/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar11/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar11/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,13 +12,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
index 1425cc456..972a2d95c 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
+import Calendars from '@/registry/default/block/Sidebar12/components/Calendars.vue'
 
-import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
-import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
+import DatePicker from '@/registry/default/block/Sidebar12/components/DatePicker.vue'
+import NavUser from '@/registry/default/block/Sidebar12/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -14,7 +14,7 @@ import {
   type SidebarProps,
   SidebarRail,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Plus } from 'lucide-vue-next'
 
 const props = defineProps<SidebarProps>()
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
index 09a713c57..c845894e9 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
index ec51c38bf..dcc555d5a 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   SidebarGroup,
   SidebarGroupContent,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
index 42bd13bdf..55fd84618 100644
--- a/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar12/page.vue b/apps/www/src/registry/default/block/Sidebar12/page.vue
index 00d254303..53fac0295 100644
--- a/apps/www/src/registry/default/block/Sidebar12/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar12/page.vue
@@ -4,19 +4,19 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar12/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
index ab6e23be6..af901d4da 100644
--- a/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
+++ b/apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue
@@ -6,16 +6,16 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 
-import { Button } from '@/registry/new-york/ui/button'
+import { Button } from '@/registry/default/ui/button'
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
   DialogTrigger,
-} from '@/registry/new-york/ui/dialog'
+} from '@/registry/default/ui/dialog'
 import {
   Sidebar,
   SidebarContent,
@@ -25,7 +25,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Bell,
   Check,
diff --git a/apps/www/src/registry/default/block/Sidebar13/page.vue b/apps/www/src/registry/default/block/Sidebar13/page.vue
index 1b5220cd8..f71450528 100644
--- a/apps/www/src/registry/default/block/Sidebar13/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar13/page.vue
@@ -4,7 +4,7 @@ export const iframeHeight = '800px'
 </script>
 
 <script setup lang="ts">
-import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
+import SettingsDialog from '@/registry/default/block/Sidebar13/components/SettingsDialog.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
index 6c72d051a..065f7c132 100644
--- a/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type {
   SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Sidebar,
   SidebarContent,
@@ -15,7 +15,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar14/page.vue b/apps/www/src/registry/default/block/Sidebar14/page.vue
index ee75a15b8..583d3e395 100644
--- a/apps/www/src/registry/default/block/Sidebar14/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar14/page.vue
@@ -4,7 +4,7 @@ export const description = 'A sidebar on the right.'
 </script>
 
 <script setup lang="ts">
-import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
+import AppSidebar from '@/registry/default/block/Sidebar14/components/AppSidebar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,12 +12,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/registry/new-york/ui/breadcrumb'
+} from '@/registry/default/ui/breadcrumb'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
index 6c72d051a..065f7c132 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type {
   SidebarProps,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   Sidebar,
   SidebarContent,
@@ -15,7 +15,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 const props = defineProps<SidebarProps>()
 
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
index 09a713c57..c845894e9 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -13,7 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Check, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
index ec51c38bf..dcc555d5a 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Calendar } from '@/registry/new-york/ui/calendar'
+import { Calendar } from '@/registry/default/ui/calendar'
 import {
   SidebarGroup,
   SidebarGroupContent,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
index 97a99afc4..dbfffc2f9 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarGroup,
@@ -15,7 +15,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   ArrowUpRight,
   Link,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
index 3fb44bcde..5d4907b7d 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue
@@ -5,7 +5,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
index 3d728239f..7dde7a3a9 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue
@@ -9,7 +9,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 
 defineProps<{
   items: {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
index 42bd13bdf..55fd84618 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue
@@ -3,7 +3,7 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-} from '@/registry/new-york/ui/avatar'
+} from '@/registry/default/ui/avatar'
 
 import {
   DropdownMenu,
@@ -13,13 +13,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   BadgeCheck,
   Bell,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
index b768426d6..a046bddfa 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue
@@ -3,7 +3,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/registry/new-york/ui/collapsible'
+} from '@/registry/default/ui/collapsible'
 
 import {
   SidebarGroup,
@@ -16,7 +16,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
 
 defineProps<{
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
index 0a30d6201..83ea44a75 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
+import NavFavorites from '@/registry/default/block/Sidebar15/components/NavFavorites.vue'
 
-import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
-import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
-import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
-import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
+import NavMain from '@/registry/default/block/Sidebar15/components/NavMain.vue'
+import NavSecondary from '@/registry/default/block/Sidebar15/components/NavSecondary.vue'
+import NavWorkspaces from '@/registry/default/block/Sidebar15/components/NavWorkspaces.vue'
+import TeamSwitcher from '@/registry/default/block/Sidebar15/components/TeamSwitcher.vue'
 import {
   Sidebar,
   SidebarContent,
   SidebarHeader,
   type SidebarProps,
   SidebarRail,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import {
   AudioWaveform,
   Blocks,
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
index 840c94578..3be823fab 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
+import Calendars from '@/registry/default/block/Sidebar15/components/Calendars.vue'
 
-import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
-import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
+import DatePicker from '@/registry/default/block/Sidebar15/components/DatePicker.vue'
+import NavUser from '@/registry/default/block/Sidebar15/components/NavUser.vue'
 import {
   Sidebar,
   SidebarContent,
@@ -13,7 +13,7 @@ import {
   SidebarMenuItem,
   type SidebarProps,
   SidebarSeparator,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { Plus } from 'lucide-vue-next'
 
 const props = withDefaults(defineProps<SidebarProps>(), {
diff --git a/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
index 341074cda..ad0ba82b1 100644
--- a/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue
@@ -7,13 +7,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from '@/registry/new-york/ui/dropdown-menu'
+} from '@/registry/default/ui/dropdown-menu'
 
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 import { ChevronDown, Plus } from 'lucide-vue-next'
 
 import { type Component, ref } from 'vue'
diff --git a/apps/www/src/registry/default/block/Sidebar15/page.vue b/apps/www/src/registry/default/block/Sidebar15/page.vue
index 2ff6b9cb9..ef05b1759 100644
--- a/apps/www/src/registry/default/block/Sidebar15/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar15/page.vue
@@ -4,20 +4,20 @@ export const description = 'A left and right sidebar.'
 </script>
 
 <script setup lang="ts">
-import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
-import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
+import SidebarLeft from '@/registry/default/block/Sidebar15/components/SidebarLeft.vue'
+import SidebarRight from '@/registry/default/block/Sidebar15/components/SidebarRight.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
-} from '@/registry/new-york/ui/breadcrumb'
-import { Separator } from '@/registry/new-york/ui/separator'
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from '@/registry/new-york/ui/sidebar'
+} from '@/registry/default/ui/sidebar'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebar.vue b/apps/www/src/registry/new-york/block/DemoSidebar.vue
new file mode 100644
index 000000000..0d4d09099
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-vue-next'
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in items" :key="item.title">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <component :is="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue b/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
new file mode 100644
index 000000000..048c4500d
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarControlled.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+
+const open = ref(true)
+</script>
+
+<template>
+  <SidebarProvider v-model:open="open">
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+    <SidebarInset>
+      <header className="flex items-center h-12 px-4 justify-between">
+        <Button
+          size="sm"
+          variant="ghost"
+          @click="open = !open"
+        >
+          <PanelLeftClose v-if="open" />
+          <PanelLeftOpen v-else />
+          <span>{{ open ? 'Close' : 'Open' }} Sidebar</span>
+        </Button>
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue b/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
new file mode 100644
index 000000000..a4017dcc8
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarFooter.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronUp } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent />
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Username
+                  <ChevronUp class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                class="w-[--reka-popper-anchor-width]"
+              >
+                <DropdownMenuItem>
+                  <span>Account</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Billing</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Sign out</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
new file mode 100644
index 000000000..dbf85ff67
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroup.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Help</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <LifeBuoy />
+                  Support
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Send />
+                  Feedback
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
new file mode 100644
index 000000000..20feb71b8
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroupAction.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  Map,
+  PieChart,
+  Plus,
+} from 'lucide-vue-next'
+
+import { toast, Toaster } from 'vue-sonner'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Toaster
+      position="bottom-left"
+      :toast-options="{
+        class: 'ml-[160px]',
+      }"
+    />
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupAction
+            title="Add Project"
+            @click="() => toast('You clicked the group action!')"
+          >
+            <Plus /> <span class="sr-only">Add Project</span>
+          </SidebarGroupAction>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Frame />
+                    <span>Design Engineering</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <PieChart />
+                    <span>Sales & Marketing</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton as-child>
+                  <a href="#">
+                    <Map />
+                    <span>Travel</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue b/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
new file mode 100644
index 000000000..31722eb0c
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarGroupCollapsible.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown, LifeBuoy, Send } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <Collapsible :default-open="true" class="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel
+              as-child
+              class="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            >
+              <CollapsibleTrigger>
+                Help
+                <ChevronDown class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+              </CollapsibleTrigger>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <LifeBuoy />
+                      Support
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <Send />
+                      Feedback
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue b/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
new file mode 100644
index 000000000..89ed10d47
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarHeader.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarMenuButton class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  Select Workspace
+                  <ChevronDown class="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="w-[--reka-popper-anchor-width]">
+                <DropdownMenuItem>
+                  <span>Acme Inc</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Acme Corp.</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+    </Sidebar>
+    <SidebarInset>
+      <header class="flex items-center justify-between px-4 h-12">
+        <SidebarTrigger />
+      </header>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
new file mode 100644
index 000000000..c707b3ea1
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton as-child>
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
new file mode 100644
index 000000000..1c388fb9f
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuAction.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import {
+  Frame,
+  LifeBuoy,
+  Map,
+  MoreHorizontal,
+  PieChart,
+  Send,
+} from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
new file mode 100644
index 000000000..8350bf9fa
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuBadge.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+import { Frame, LifeBuoy, Map, PieChart, Send } from 'lucide-vue-next'
+
+const projects = [
+  {
+    name: 'Design Engineering',
+    url: '#',
+    icon: Frame,
+    badge: '24',
+  },
+  {
+    name: 'Sales & Marketing',
+    url: '#',
+    icon: PieChart,
+    badge: '12',
+  },
+  {
+    name: 'Travel',
+    url: '#',
+    icon: Map,
+    badge: '3',
+  },
+  {
+    name: 'Support',
+    url: '#',
+    icon: LifeBuoy,
+    badge: '21',
+  },
+  {
+    name: 'Feedback',
+    url: '#',
+    icon: Send,
+    badge: '8',
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Projects</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="project in projects" :key="project.name">
+                <SidebarMenuButton
+                  as-child
+                  class="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
+                >
+                  <a :href="project.url">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>{{ project.badge }}</SidebarMenuBadge>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
new file mode 100644
index 000000000..962d6281e
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuCollapsible.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Collapsible
+                v-for="(item, index) in items"
+                :key="index"
+                class="group/collapsible"
+                :default-open="index === 0"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger as-child>
+                    <SidebarMenuButton>
+                      <span>{{ item.title }}</span>
+                      <ChevronRight class="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                        <SidebarMenuSubButton as-child>
+                          <a :href="subItem.url">
+                            <span>{{ subItem.title }}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue b/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
new file mode 100644
index 000000000..8dca212b1
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/DemoSidebarMenuSub.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/registry/new-york/ui/sidebar'
+
+const items = [
+  {
+    title: 'Getting Started',
+    url: '#',
+    items: [
+      {
+        title: 'Installation',
+        url: '#',
+      },
+      {
+        title: 'Project Structure',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Building Your Application',
+    url: '#',
+    items: [
+      {
+        title: 'Routing',
+        url: '#',
+      },
+      {
+        title: 'Data Fetching',
+        url: '#',
+        isActive: true,
+      },
+      {
+        title: 'Rendering',
+        url: '#',
+      },
+      {
+        title: 'Caching',
+        url: '#',
+      },
+      {
+        title: 'Styling',
+        url: '#',
+      },
+      {
+        title: 'Optimizing',
+        url: '#',
+      },
+      {
+        title: 'Configuring',
+        url: '#',
+      },
+      {
+        title: 'Testing',
+        url: '#',
+      },
+      {
+        title: 'Authentication',
+        url: '#',
+      },
+      {
+        title: 'Deploying',
+        url: '#',
+      },
+      {
+        title: 'Upgrading',
+        url: '#',
+      },
+      {
+        title: 'Examples',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'API Reference',
+    url: '#',
+    items: [
+      {
+        title: 'Components',
+        url: '#',
+      },
+      {
+        title: 'File Conventions',
+        url: '#',
+      },
+      {
+        title: 'Functions',
+        url: '#',
+      },
+      {
+        title: 'next.config.js Options',
+        url: '#',
+      },
+      {
+        title: 'CLI',
+        url: '#',
+      },
+      {
+        title: 'Edge Runtime',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Architecture',
+    url: '#',
+    items: [
+      {
+        title: 'Accessibility',
+        url: '#',
+      },
+      {
+        title: 'Fast Refresh',
+        url: '#',
+      },
+      {
+        title: 'Next.js Compiler',
+        url: '#',
+      },
+      {
+        title: 'Supported Browsers',
+        url: '#',
+      },
+      {
+        title: 'Turbopack',
+        url: '#',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <SidebarProvider>
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem v-for="(item, index) in items" :key="index">
+                <SidebarMenuButton as-child>
+                  <a :href="item.url">
+                    <span>{{ item.title }}</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="(subItem, subIndex) in item.items" :key="subIndex">
+                    <SidebarMenuSubButton as-child>
+                      <a :href="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue b/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
new file mode 100644
index 000000000..cefd26697
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Login01/components/LoginForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/registry/new-york/ui/card'
+import { Input } from '@/registry/new-york/ui/input'
+import { Label } from '@/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Login01/page.vue b/apps/www/src/registry/new-york/block/Login01/page.vue
new file mode 100644
index 000000000..7383b3ab5
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Login01/page.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '870px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'
+</script>
+
+<template>
+  <div className="flex h-screen w-full items-center justify-center px-4">
+    <LoginForm />
+  </div>
+</template>

From d963607719d04a197c18cda949339a66a31da429 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 25 Nov 2024 21:55:02 +0800
Subject: [PATCH 21/39] chore: fix json

---
 .../.vitepress/theme/components/BlockPage.vue |   2 +-
 apps/www/__registry__/index.ts                |   8 +-
 apps/www/src/public/r/index.json              |  30 ++---
 .../r/styles/default/DemoSidebarFooter.json   |   2 +-
 .../default/DemoSidebarGroupAction.json       |   2 +-
 .../r/styles/default/DemoSidebarHeader.json   |   2 +-
 .../default/DemoSidebarMenuCollapsible.json   |   2 +-
 .../src/public/r/styles/default/Login01.json  |   4 +-
 .../public/r/styles/default/Sidebar03.json    |   2 +-
 .../public/r/styles/default/Sidebar04.json    |   4 +-
 .../public/r/styles/default/Sidebar05.json    |   6 +-
 .../public/r/styles/default/Sidebar11.json    |   4 +-
 .../src/public/r/styles/default/sidebar.json  |  27 ++---
 .../r/styles/new-york/DemoSidebarFooter.json  |   2 +-
 .../new-york/DemoSidebarGroupAction.json      |   2 +-
 .../new-york/DemoSidebarMenuCollapsible.json  |   2 +-
 .../src/public/r/styles/new-york/sidebar.json |  27 ++---
 apps/www/src/public/r/temp.json               | 110 +++++++++---------
 .../registry/default/ui/sidebar/Sidebar.vue   |   3 +-
 .../default/ui/sidebar/SidebarInput.vue       |   2 +-
 .../default/ui/sidebar/SidebarMenuButton.vue  |   4 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |   2 +-
 .../default/ui/sidebar/SidebarSeparator.vue   |   2 +-
 .../default/ui/sidebar/SidebarTrigger.vue     |   2 +-
 .../registry/new-york/ui/sidebar/Sidebar.vue  |   3 +-
 .../new-york/ui/sidebar/SidebarInput.vue      |   2 +-
 .../new-york/ui/sidebar/SidebarMenuButton.vue |   4 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |   2 +-
 .../new-york/ui/sidebar/SidebarSeparator.vue  |   2 +-
 .../new-york/ui/sidebar/SidebarTrigger.vue    |   2 +-
 packages/cli/src/utils/get-project-info.ts    |   1 -
 packages/cli/src/utils/registry/index.ts      |   3 +-
 32 files changed, 124 insertions(+), 148 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
index 2cd1fa29a..532c1e8f8 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -9,7 +9,7 @@ const params = useUrlSearchParams('history')
 <template>
   <div
     v-if="params.name"
-    :class="cn('preview flex h-screen w-full justify-center p-10 items-center', params.containerClass)"
+    :class="cn('preview flex h-screen w-full justify-center items-center', params.containerClass)"
   >
     <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index a5c515318..b80247624 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1561,7 +1561,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -7405,7 +7405,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -13265,7 +13265,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
@@ -19109,7 +19109,7 @@ export const Index: Record<string, any> = {
       name: "sidebar",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["utils","Sheet.vue","SheetContent.vue","Input.vue","Tooltip.vue","TooltipContent.vue","TooltipTrigger.vue","Skeleton.vue","Separator.vue","Button.vue"],
+      registryDependencies: ["utils","sheet","input","tooltip","skeleton","separator","button"],
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index ce9989f0d..9b55e7bc3 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -1558,15 +1558,12 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
@@ -3625,15 +3622,12 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarFooter.json b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
index 1b0e09ca7..63287869f 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarFooter.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
index 0e547328c..d78b37b24 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarGroupAction.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/DemoSidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarHeader.json b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
index d24fffae1..1b253a565 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarHeader.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
index 82c453dbf..5670deaa5 100644
--- a/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
+++ b/apps/www/src/public/r/styles/default/DemoSidebarMenuCollapsible.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarMenuCollapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/default/Login01.json b/apps/www/src/public/r/styles/default/Login01.json
index 9e7d8cb2d..13ca20971 100644
--- a/apps/www/src/public/r/styles/default/Login01.json
+++ b/apps/www/src/public/r/styles/default/Login01.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "block/Login01/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Login01/components/LoginForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar03.json b/apps/www/src/public/r/styles/default/Sidebar03.json
index 51ef75c78..37ce2eb8f 100644
--- a/apps/www/src/public/r/styles/default/Sidebar03.json
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "block/Sidebar03/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
diff --git a/apps/www/src/public/r/styles/default/Sidebar04.json b/apps/www/src/public/r/styles/default/Sidebar04.json
index 4fdfff4de..e96771533 100644
--- a/apps/www/src/public/r/styles/default/Sidebar04.json
+++ b/apps/www/src/public/r/styles/default/Sidebar04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "block/Sidebar04/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar04/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar05.json b/apps/www/src/public/r/styles/default/Sidebar05.json
index 7cb2478e6..93a29d150 100644
--- a/apps/www/src/public/r/styles/default/Sidebar05.json
+++ b/apps/www/src/public/r/styles/default/Sidebar05.json
@@ -14,19 +14,19 @@
   "files": [
     {
       "path": "block/Sidebar05/page.vue",
-      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
       "target": "pages/dashboard/index.vue"
     },
     {
       "path": "block/Sidebar05/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar05/components/SearchForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
index 9958c7cfa..d79617565 100644
--- a/apps/www/src/public/r/styles/default/Sidebar11.json
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -19,13 +19,13 @@
     },
     {
       "path": "block/Sidebar11/components/AppSidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
       "type": "registry:component",
       "target": ""
     },
     {
       "path": "block/Sidebar11/components/Tree.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
       "type": "registry:component",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index bfc51e819..885fed126 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -6,20 +6,17 @@
   ],
   "registryDependencies": [
     "utils",
-    "Sheet.vue",
-    "SheetContent.vue",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
+    "sheet",
+    "input",
+    "tooltip",
+    "skeleton",
+    "separator",
+    "button"
   ],
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +64,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -97,7 +94,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuButton.vue"
     },
@@ -115,7 +112,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +148,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
index b1ac69726..45302e899 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarFooter.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
index 0ba7c82c2..0ed12b34b 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarGroupAction.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/DemoSidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
index fe279ba1c..65482668a 100644
--- a/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
+++ b/apps/www/src/public/r/styles/new-york/DemoSidebarMenuCollapsible.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "block/DemoSidebarMenuCollapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:block",
       "target": "pages/dashboard/index.vue"
     }
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index 89148bf68..3bfb6139b 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -6,20 +6,17 @@
   ],
   "registryDependencies": [
     "utils",
-    "Sheet.vue",
-    "SheetContent.vue",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
+    "sheet",
+    "input",
+    "tooltip",
+    "skeleton",
+    "separator",
+    "button"
   ],
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -67,7 +64,7 @@
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarInput.vue"
     },
@@ -97,7 +94,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuButton.vue"
     },
@@ -115,7 +112,7 @@
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarMenuSkeleton.vue"
     },
@@ -151,13 +148,13 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarSeparator.vue"
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/SidebarTrigger.vue"
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 831834bd3..4811471fe 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -2284,20 +2284,17 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2345,7 +2342,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -2375,7 +2372,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuButton.vue"
       },
@@ -2393,7 +2390,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -2429,13 +2426,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -6761,7 +6758,7 @@
     "files": [
       {
         "path": "block/DemoSidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -6795,7 +6792,7 @@
     "files": [
       {
         "path": "block/DemoSidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -6895,7 +6892,7 @@
     "files": [
       {
         "path": "block/DemoSidebarMenuCollapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -9701,20 +9698,17 @@
     ],
     "registryDependencies": [
       "utils",
-      "Sheet.vue",
-      "SheetContent.vue",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
+      "sheet",
+      "input",
+      "tooltip",
+      "skeleton",
+      "separator",
+      "button"
     ],
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -9762,7 +9756,7 @@
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Input from '@/registry/default/ui/input/Input.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarInput.vue"
       },
@@ -9792,7 +9786,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuButton.vue"
       },
@@ -9810,7 +9804,7 @@
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarMenuSkeleton.vue"
       },
@@ -9846,13 +9840,13 @@
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarSeparator.vue"
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/SidebarTrigger.vue"
       },
@@ -14179,7 +14173,7 @@
     "files": [
       {
         "path": "block/DemoSidebarFooter.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, ChevronUp, User2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronUp } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader />\n      <SidebarContent />\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Username\n                  <ChevronUp class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                class=\"w-[--reka-popper-anchor-width]\"\n              >\n                <DropdownMenuItem>\n                  <span>Account</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Billing</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Sign out</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14213,7 +14207,7 @@
     "files": [
       {
         "path": "block/DemoSidebarGroupAction.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ChevronDown,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Plus,\n  Send,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Frame,\n  Map,\n  PieChart,\n  Plus,\n} from 'lucide-vue-next'\n\nimport { toast, Toaster } from 'vue-sonner'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Toaster\n      position=\"bottom-left\"\n      :toast-options=\"{\n        class: 'ml-[160px]',\n      }\"\n    />\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupAction\n            title=\"Add Project\"\n            @click=\"() => toast('You clicked the group action!')\"\n          >\n            <Plus /> <span class=\"sr-only\">Add Project</span>\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Frame />\n                    <span>Design Engineering</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <PieChart />\n                    <span>Sales & Marketing</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton as-child>\n                  <a href=\"#\">\n                    <Map />\n                    <span>Travel</span>\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14247,7 +14241,7 @@
     "files": [
       {
         "path": "block/DemoSidebarHeader.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown } from 'lucide-vue-next'\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  Select Workspace\n                  <ChevronDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-popper-anchor-width]\">\n                <DropdownMenuItem>\n                  <span>Acme Inc</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex items-center justify-between px-4 h-12\">\n        <SidebarTrigger />\n      </header>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14313,7 +14307,7 @@
     "files": [
       {
         "path": "block/DemoSidebarMenuCollapsible.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      {\n        title: 'Installation',\n        url: '#',\n      },\n      {\n        title: 'Project Structure',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      {\n        title: 'Routing',\n        url: '#',\n      },\n      {\n        title: 'Data Fetching',\n        url: '#',\n        isActive: true,\n      },\n      {\n        title: 'Rendering',\n        url: '#',\n      },\n      {\n        title: 'Caching',\n        url: '#',\n      },\n      {\n        title: 'Styling',\n        url: '#',\n      },\n      {\n        title: 'Optimizing',\n        url: '#',\n      },\n      {\n        title: 'Configuring',\n        url: '#',\n      },\n      {\n        title: 'Testing',\n        url: '#',\n      },\n      {\n        title: 'Authentication',\n        url: '#',\n      },\n      {\n        title: 'Deploying',\n        url: '#',\n      },\n      {\n        title: 'Upgrading',\n        url: '#',\n      },\n      {\n        title: 'Examples',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      {\n        title: 'Components',\n        url: '#',\n      },\n      {\n        title: 'File Conventions',\n        url: '#',\n      },\n      {\n        title: 'Functions',\n        url: '#',\n      },\n      {\n        title: 'next.config.js Options',\n        url: '#',\n      },\n      {\n        title: 'CLI',\n        url: '#',\n      },\n      {\n        title: 'Edge Runtime',\n        url: '#',\n      },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      {\n        title: 'Accessibility',\n        url: '#',\n      },\n      {\n        title: 'Fast Refresh',\n        url: '#',\n      },\n      {\n        title: 'Next.js Compiler',\n        url: '#',\n      },\n      {\n        title: 'Supported Browsers',\n        url: '#',\n      },\n      {\n        title: 'Turbopack',\n        url: '#',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:block",
         "target": "pages/dashboard/index.vue"
       }
@@ -14349,13 +14343,13 @@
     "files": [
       {
         "path": "block/Login01/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/new-york/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '870px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport LoginForm from '@/registry/default/block/Login01/components/LoginForm.vue'\n</script>\n\n<template>\n  <div className=\"flex h-screen w-full items-center justify-center px-4\">\n    <LoginForm />\n  </div>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Login01/components/LoginForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14457,7 +14451,7 @@
     "files": [
       {
         "path": "block/Sidebar03/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar03/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n        <div class=\"flex items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
@@ -14482,13 +14476,13 @@
     "files": [
       {
         "path": "block/Sidebar04/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A floating sidebar with submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar04/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider :style=\"{ '--sidebar-width': '19rem' }\">\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar04/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n} from '@/registry/default/ui/sidebar'\n\nimport { GalleryVerticalEnd } from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  variant: 'floating',\n})\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu class=\"gap-2\">\n          <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n            <SidebarMenuButton as-child>\n              <a :href=\"item.url\" class=\"font-medium\">\n                {{ item.title }}\n              </a>\n            </SidebarMenuButton>\n            <SidebarMenuSub v-if=\"item.items.length\">\n              <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                <SidebarMenuSubButton as-child :is-active=\"childItem.isActive\">\n                  <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14510,19 +14504,19 @@
     "files": [
       {
         "path": "block/Sidebar05/page.vue",
-        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar05/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <Collapsible\n            v-for=\"(item, index) in data.navMain\"\n            :key=\"item.title\"\n            :default-open=\"index === 1\"\n            class=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger as-child>\n                <SidebarMenuButton>\n                  {{ item.title }}\n                  <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                  <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent v-if=\"item.items.length\">\n                <SidebarMenuSub>\n                  <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                    <SidebarMenuSubButton\n                      as-child\n                      :is-active=\"childItem.isActive\"\n                    >\n                      <a :href=\"childItem.url\">{{ childItem.title }}</a>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar05/components/SearchForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14616,7 +14610,7 @@
       },
       {
         "path": "block/Sidebar07/components/NavUser.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{{ user.name }}</span>\n              <span class=\"truncate text-xs\">{{ user.email }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"p-0 font-normal\">\n            <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n              <Avatar class=\"h-8 w-8 rounded-lg\">\n                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">{{ user.name }}</span>\n                <span class=\"truncate text-xs\">{{ user.email }}</span>\n              </div>\n            </div>\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14666,7 +14660,7 @@
       },
       {
         "path": "block/Sidebar08/components/NavProjects.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
@@ -14743,49 +14737,49 @@
     "files": [
       {
         "path": "block/Sidebar10/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar10/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: Command,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Search',\n      url: '#',\n      icon: Search,\n    },\n    {\n      title: 'Ask AI',\n      url: '#',\n      icon: Sparkles,\n    },\n    {\n      title: 'Home',\n      url: '#',\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: 'Inbox',\n      url: '#',\n      icon: Inbox,\n      badge: '10',\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Calendar',\n      url: '#',\n      icon: Calendar,\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n    },\n    {\n      title: 'Templates',\n      url: '#',\n      icon: Blocks,\n    },\n    {\n      title: 'Trash',\n      url: '#',\n      icon: Trash2,\n    },\n    {\n      title: 'Help',\n      url: '#',\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: 'Project Management & Task Tracking',\n      url: '#',\n      emoji: '📊',\n    },\n    {\n      name: 'Family Recipe Collection & Meal Planning',\n      url: '#',\n      emoji: '🍳',\n    },\n    {\n      name: 'Fitness Tracker & Workout Routines',\n      url: '#',\n      emoji: '💪',\n    },\n    {\n      name: 'Book Notes & Reading List',\n      url: '#',\n      emoji: '📚',\n    },\n    {\n      name: 'Sustainable Gardening Tips & Plant Care',\n      url: '#',\n      emoji: '🌱',\n    },\n    {\n      name: 'Language Learning Progress & Resources',\n      url: '#',\n      emoji: '🗣️',\n    },\n    {\n      name: 'Home Renovation Ideas & Budget Tracker',\n      url: '#',\n      emoji: '🏠',\n    },\n    {\n      name: 'Personal Finance & Investment Portfolio',\n      url: '#',\n      emoji: '💰',\n    },\n    {\n      name: 'Movie & TV Show Watchlist with Reviews',\n      url: '#',\n      emoji: '🎬',\n    },\n    {\n      name: 'Daily Habit Tracker & Goal Setting',\n      url: '#',\n      emoji: '✅',\n    },\n  ],\n  workspaces: [\n    {\n      name: 'Personal Life Management',\n      emoji: '🏠',\n      pages: [\n        {\n          name: 'Daily Journal & Reflection',\n          url: '#',\n          emoji: '📔',\n        },\n        {\n          name: 'Health & Wellness Tracker',\n          url: '#',\n          emoji: '🍏',\n        },\n        {\n          name: 'Personal Growth & Learning Goals',\n          url: '#',\n          emoji: '🌟',\n        },\n      ],\n    },\n    {\n      name: 'Professional Development',\n      emoji: '💼',\n      pages: [\n        {\n          name: 'Career Objectives & Milestones',\n          url: '#',\n          emoji: '🎯',\n        },\n        {\n          name: 'Skill Acquisition & Training Log',\n          url: '#',\n          emoji: '🧠',\n        },\n        {\n          name: 'Networking Contacts & Events',\n          url: '#',\n          emoji: '🤝',\n        },\n      ],\n    },\n    {\n      name: 'Creative Projects',\n      emoji: '🎨',\n      pages: [\n        {\n          name: 'Writing Ideas & Story Outlines',\n          url: '#',\n          emoji: '✍️',\n        },\n        {\n          name: 'Art & Design Portfolio',\n          url: '#',\n          emoji: '🖼️',\n        },\n        {\n          name: 'Music Composition & Practice Log',\n          url: '#',\n          emoji: '🎵',\n        },\n      ],\n    },\n    {\n      name: 'Home Management',\n      emoji: '🏡',\n      pages: [\n        {\n          name: 'Household Budget & Expense Tracking',\n          url: '#',\n          emoji: '💰',\n        },\n        {\n          name: 'Home Maintenance Schedule & Tasks',\n          url: '#',\n          emoji: '🔧',\n        },\n        {\n          name: 'Family Calendar & Event Planning',\n          url: '#',\n          emoji: '📅',\n        },\n      ],\n    },\n    {\n      name: 'Travel & Adventure',\n      emoji: '🧳',\n      pages: [\n        {\n          name: 'Trip Planning & Itineraries',\n          url: '#',\n          emoji: '🗺️',\n        },\n        {\n          name: 'Travel Bucket List & Inspiration',\n          url: '#',\n          emoji: '🌎',\n        },\n        {\n          name: 'Travel Journal & Photo Gallery',\n          url: '#',\n          emoji: '📸',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavActions.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavFavorites.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavMain.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :is-active=\"item.isActive\">\n        <a :href=\"item.url\">\n          <component :is=\"item.icon\" />\n          <span>{{ item.title }}</span>\n        </a>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavSecondary.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/NavWorkspaces.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar10/components/TeamSwitcher.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
@@ -14806,19 +14800,19 @@
     "files": [
       {
         "path": "block/Sidebar11/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar11/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                components\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                ui\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>button.tsx</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
         "target": "pages/dashboard/index.vue"
       },
       {
         "path": "block/Sidebar11/components/AppSidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/default/block/Sidebar11/components/Tree.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: 'README.md',\n      state: 'M',\n    },\n    {\n      file: 'api/hello/route.ts',\n      state: 'U',\n    },\n    {\n      file: 'app/layout.tsx',\n      state: 'M',\n    },\n  ],\n  tree: [\n    [\n      'app',\n      [\n        'api',\n        ['hello', ['route.ts']],\n        'page.tsx',\n        'layout.tsx',\n        ['blog', ['page.tsx']],\n      ],\n    ],\n    [\n      'components',\n      ['ui', 'button.tsx', 'card.tsx'],\n      'header.tsx',\n      'footer.tsx',\n    ],\n    ['lib', ['util.ts']],\n    ['public', 'favicon.ico', 'vercel.svg'],\n    '.eslintrc.json',\n    '.gitignore',\n    'next.config.js',\n    'tailwind.config.js',\n    'package.json',\n    'README.md',\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Changes</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n              <SidebarMenuButton>\n                <File />\n                {{ item.file }}\n              </SidebarMenuButton>\n              <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Files</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
         "type": "registry:component",
         "target": ""
       },
       {
         "path": "block/Sidebar11/components/Tree.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n  <SidebarMenuButton\n    v-if=\"!items.length\"\n    :is-active=\"name === 'button.tsx'\"\n    class=\"data-[active=true]:bg-transparent\"\n  >\n    <File />\n    {{ name }}\n  </SidebarMenuButton>\n\n  <SidebarMenuItem v-else>\n    <Collapsible\n      class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n      :default-open=\"name === 'components' || name === 'ui'\"\n    >\n      <CollapsibleTrigger as-child>\n        <SidebarMenuButton>\n          <ChevronRight class=\"transition-transform\" />\n          <Folder />\n          {{ name }}\n        </SidebarMenuButton>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <SidebarMenuSub>\n          <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n        </SidebarMenuSub>\n      </CollapsibleContent>\n    </Collapsible>\n  </SidebarMenuItem>\n</template>\n",
         "type": "registry:component",
         "target": ""
       }
diff --git a/apps/www/src/registry/default/ui/sidebar/Sidebar.vue b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
index bdd7db03f..043bfdda9 100644
--- a/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/default/ui/sidebar/Sidebar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Sheet from '@/registry/default/ui/sheet/Sheet.vue'
-import SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'
+import { Sheet, SheetContent } from '@/registry/default/ui/sheet'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
index 250df2cd5..684d653c9 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Input from '@/registry/default/ui/input/Input.vue'
+import { Input } from '@/registry/default/ui/input'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
index d9ba72864..86f160b67 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
index a91f0b2de..6017622f2 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'
+import { Skeleton } from '@/registry/default/ui/skeleton'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
index ff778e875..d5f46d1b5 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Separator from '@/registry/default/ui/separator/Separator.vue'
+import { Separator } from '@/registry/default/ui/separator'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
index 7ce9886d0..527465a23 100644
--- a/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/default/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Button from '@/registry/default/ui/button/Button.vue'
+import { Button } from '@/registry/default/ui/button'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
index 4b4e5577c..efbc5ce62 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { SidebarProps } from '.'
 import { cn } from '@/lib/utils'
-import Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'
-import SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'
+import { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
index 8c79b34e0..6032b4571 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Input from '@/registry/new-york/ui/input/Input.vue'
+import { Input } from '@/registry/new-york/ui/input'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
index 2540af843..80f089306 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuButton.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'
-import TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
 import { useSidebar } from './utils'
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
index 721612188..a31e9913b 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'
+import { Skeleton } from '@/registry/new-york/ui/skeleton'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
index 899053711..7277d24e2 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Separator from '@/registry/new-york/ui/separator/Separator.vue'
+import { Separator } from '@/registry/new-york/ui/separator'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
index 7f7c43217..692f53b83 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/SidebarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import Button from '@/registry/new-york/ui/button/Button.vue'
+import { Button } from '@/registry/new-york/ui/button'
 import { PanelLeft } from 'lucide-vue-next'
 import { useSidebar } from './utils'
 
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index 9c03d9d8c..500ccc425 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -132,7 +132,6 @@ export async function getTailwindConfigFile(cwd: string) {
 
 export async function getTsConfigAliasPrefix(cwd: string) {
   const tsConfig = await loadConfig(cwd)
-
   if (
     tsConfig?.resultType === 'failed'
     || !Object.entries(tsConfig?.paths).length
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 2a96ef983..8093d9aa7 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -19,7 +19,7 @@ import { HttpsProxyAgent } from 'https-proxy-agent'
 import { ofetch } from 'ofetch'
 import { z } from 'zod'
 
-const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://shadcn-vue.com/r'
+const REGISTRY_URL = process.env.REGISTRY_URL ?? 'https://next.shadcn-vue.com/r'
 
 const agent = process.env.https_proxy
   ? new HttpsProxyAgent(process.env.https_proxy)
@@ -182,6 +182,7 @@ async function fetchRegistry(paths: string[]) {
     const results = await Promise.all(
       paths.map(async (path) => {
         const url = getRegistryUrl(path)
+        console.log(url)
         const response = await ofetch(url, { agent, parseResponse: JSON.parse })
           .catch((error) => {
             throw new Error(error.data)

From 6d2515f02a7d531312fc40a055c4ba8b104d77ce Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 26 Nov 2024 12:15:04 +0800
Subject: [PATCH 22/39] chore: fix crawled content

---
 apps/www/__registry__/index.ts                | 2848 ++++++++---------
 .../public/r/styles/default/accordion.json    |   10 +-
 .../public/r/styles/default/alert-dialog.json |   20 +-
 .../src/public/r/styles/default/alert.json    |    8 +-
 .../public/r/styles/default/aspect-ratio.json |    4 +-
 .../public/r/styles/default/auto-form.json    |   32 +-
 .../src/public/r/styles/default/avatar.json   |    8 +-
 .../src/public/r/styles/default/badge.json    |    4 +-
 .../public/r/styles/default/breadcrumb.json   |   16 +-
 .../src/public/r/styles/default/button.json   |    4 +-
 .../src/public/r/styles/default/calendar.json |   26 +-
 .../www/src/public/r/styles/default/card.json |   14 +-
 .../src/public/r/styles/default/carousel.json |   16 +-
 .../public/r/styles/default/chart-area.json   |    4 +-
 .../public/r/styles/default/chart-bar.json    |    4 +-
 .../public/r/styles/default/chart-donut.json  |    4 +-
 .../public/r/styles/default/chart-line.json   |    4 +-
 .../src/public/r/styles/default/chart.json    |   12 +-
 .../src/public/r/styles/default/checkbox.json |    4 +-
 .../public/r/styles/default/collapsible.json  |    8 +-
 .../src/public/r/styles/default/command.json  |   20 +-
 .../public/r/styles/default/context-menu.json |   32 +-
 .../src/public/r/styles/default/dialog.json   |   20 +-
 .../src/public/r/styles/default/drawer.json   |   16 +-
 .../r/styles/default/dropdown-menu.json       |   30 +-
 .../www/src/public/r/styles/default/form.json |   16 +-
 .../public/r/styles/default/hover-card.json   |    8 +-
 .../src/public/r/styles/default/input.json    |    4 +-
 .../src/public/r/styles/default/label.json    |    4 +-
 .../src/public/r/styles/default/menubar.json  |   32 +-
 .../r/styles/default/navigation-menu.json     |   18 +-
 .../public/r/styles/default/number-field.json |   12 +-
 .../public/r/styles/default/pagination.json   |   12 +-
 .../public/r/styles/default/pin-input.json    |   10 +-
 .../src/public/r/styles/default/popover.json  |    8 +-
 .../src/public/r/styles/default/progress.json |    4 +-
 .../public/r/styles/default/radio-group.json  |    6 +-
 .../r/styles/default/range-calendar.json      |   26 +-
 .../public/r/styles/default/resizable.json    |    6 +-
 .../public/r/styles/default/scroll-area.json  |    6 +-
 .../src/public/r/styles/default/select.json   |   24 +-
 .../public/r/styles/default/separator.json    |    4 +-
 .../src/public/r/styles/default/sheet.json    |   18 +-
 .../src/public/r/styles/default/sidebar.json  |   52 +-
 .../src/public/r/styles/default/skeleton.json |    4 +-
 .../src/public/r/styles/default/slider.json   |    4 +-
 .../src/public/r/styles/default/sonner.json   |    4 +-
 .../src/public/r/styles/default/stepper.json  |   16 +-
 .../src/public/r/styles/default/switch.json   |    4 +-
 .../src/public/r/styles/default/table.json    |   20 +-
 .../www/src/public/r/styles/default/tabs.json |   10 +-
 .../public/r/styles/default/tags-input.json   |   12 +-
 .../src/public/r/styles/default/textarea.json |    4 +-
 .../src/public/r/styles/default/toast.json    |   20 +-
 .../public/r/styles/default/toggle-group.json |    6 +-
 .../src/public/r/styles/default/toggle.json   |    4 +-
 .../src/public/r/styles/default/tooltip.json  |   10 +-
 .../public/r/styles/default/v-calendar.json   |    4 +-
 .../public/r/styles/new-york/accordion.json   |   10 +-
 .../r/styles/new-york/alert-dialog.json       |   20 +-
 .../src/public/r/styles/new-york/alert.json   |    8 +-
 .../r/styles/new-york/aspect-ratio.json       |    4 +-
 .../public/r/styles/new-york/auto-form.json   |   32 +-
 .../src/public/r/styles/new-york/avatar.json  |    8 +-
 .../src/public/r/styles/new-york/badge.json   |    4 +-
 .../public/r/styles/new-york/breadcrumb.json  |   16 +-
 .../src/public/r/styles/new-york/button.json  |    4 +-
 .../public/r/styles/new-york/calendar.json    |   26 +-
 .../src/public/r/styles/new-york/card.json    |   14 +-
 .../public/r/styles/new-york/carousel.json    |   16 +-
 .../public/r/styles/new-york/chart-area.json  |    4 +-
 .../public/r/styles/new-york/chart-bar.json   |    4 +-
 .../public/r/styles/new-york/chart-donut.json |    4 +-
 .../public/r/styles/new-york/chart-line.json  |    4 +-
 .../src/public/r/styles/new-york/chart.json   |   12 +-
 .../public/r/styles/new-york/checkbox.json    |    4 +-
 .../public/r/styles/new-york/collapsible.json |    8 +-
 .../src/public/r/styles/new-york/command.json |   20 +-
 .../r/styles/new-york/context-menu.json       |   32 +-
 .../src/public/r/styles/new-york/dialog.json  |   20 +-
 .../src/public/r/styles/new-york/drawer.json  |   16 +-
 .../r/styles/new-york/dropdown-menu.json      |   30 +-
 .../src/public/r/styles/new-york/form.json    |   16 +-
 .../public/r/styles/new-york/hover-card.json  |    8 +-
 .../src/public/r/styles/new-york/input.json   |    4 +-
 .../src/public/r/styles/new-york/label.json   |    4 +-
 .../src/public/r/styles/new-york/menubar.json |   32 +-
 .../r/styles/new-york/navigation-menu.json    |   18 +-
 .../r/styles/new-york/number-field.json       |   12 +-
 .../public/r/styles/new-york/pagination.json  |   12 +-
 .../public/r/styles/new-york/pin-input.json   |   10 +-
 .../src/public/r/styles/new-york/popover.json |    8 +-
 .../public/r/styles/new-york/progress.json    |    4 +-
 .../public/r/styles/new-york/radio-group.json |    6 +-
 .../r/styles/new-york/range-calendar.json     |   26 +-
 .../public/r/styles/new-york/resizable.json   |    6 +-
 .../public/r/styles/new-york/scroll-area.json |    6 +-
 .../src/public/r/styles/new-york/select.json  |   24 +-
 .../public/r/styles/new-york/separator.json   |    4 +-
 .../src/public/r/styles/new-york/sheet.json   |   18 +-
 .../src/public/r/styles/new-york/sidebar.json |   52 +-
 .../public/r/styles/new-york/skeleton.json    |    4 +-
 .../src/public/r/styles/new-york/slider.json  |    4 +-
 .../src/public/r/styles/new-york/sonner.json  |    4 +-
 .../src/public/r/styles/new-york/stepper.json |   16 +-
 .../src/public/r/styles/new-york/switch.json  |    4 +-
 .../src/public/r/styles/new-york/table.json   |   20 +-
 .../src/public/r/styles/new-york/tabs.json    |   10 +-
 .../public/r/styles/new-york/tags-input.json  |   12 +-
 .../public/r/styles/new-york/textarea.json    |    4 +-
 .../src/public/r/styles/new-york/toast.json   |   20 +-
 .../r/styles/new-york/toggle-group.json       |    6 +-
 .../src/public/r/styles/new-york/toggle.json  |    4 +-
 .../src/public/r/styles/new-york/tooltip.json |   10 +-
 .../public/r/styles/new-york/v-calendar.json  |    4 +-
 apps/www/src/public/r/temp.json               | 1424 ++++-----
 apps/www/src/registry/crawl-content.ts        |    2 +-
 packages/cli/src/utils/registry/index.ts      |    1 -
 118 files changed, 2849 insertions(+), 2850 deletions(-)

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index b80247624..a9efd47a5 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -27,23 +27,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/accordion/Accordion.vue",
         type: "registry:ui",
-        target: "accordion/Accordion.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionContent.vue",
         type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionItem.vue",
         type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionTrigger.vue",
         type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/index.ts",
         type: "registry:ui",
-        target: "accordion/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
       source: "",
@@ -58,19 +58,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/alert/Alert.vue",
         type: "registry:ui",
-        target: "alert/Alert.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/AlertDescription.vue",
         type: "registry:ui",
-        target: "alert/AlertDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/AlertTitle.vue",
         type: "registry:ui",
-        target: "alert/AlertTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/index.ts",
         type: "registry:ui",
-        target: "alert/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
       source: "",
@@ -85,43 +85,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogAction.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogCancel.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogCancel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogContent.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogDescription.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogFooter.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogHeader.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogTitle.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/index.ts",
         type: "registry:ui",
-        target: "alert-dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
       source: "",
@@ -136,11 +136,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/aspect-ratio/AspectRatio.vue",
         type: "registry:ui",
-        target: "aspect-ratio/AspectRatio.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/aspect-ratio/index.ts",
         type: "registry:ui",
-        target: "aspect-ratio/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
       source: "",
@@ -155,67 +155,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
-        target: "auto-form/AutoForm.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormField.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormField.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldArray.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldArray.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldBoolean.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldDate.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldDate.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldEnum.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldEnum.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldFile.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldFile.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldInput.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldNumber.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldNumber.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldObject.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldObject.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormLabel.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/constant.ts",
         type: "registry:ui",
-        target: "auto-form/constant.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/dependencies.ts",
         type: "registry:ui",
-        target: "auto-form/dependencies.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/index.ts",
         type: "registry:ui",
-        target: "auto-form/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/interface.ts",
         type: "registry:ui",
-        target: "auto-form/interface.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/utils.ts",
         type: "registry:ui",
-        target: "auto-form/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
       source: "",
@@ -230,19 +230,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/avatar/Avatar.vue",
         type: "registry:ui",
-        target: "avatar/Avatar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/AvatarFallback.vue",
         type: "registry:ui",
-        target: "avatar/AvatarFallback.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/AvatarImage.vue",
         type: "registry:ui",
-        target: "avatar/AvatarImage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/index.ts",
         type: "registry:ui",
-        target: "avatar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
       source: "",
@@ -257,11 +257,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/badge/Badge.vue",
         type: "registry:ui",
-        target: "badge/Badge.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/badge/index.ts",
         type: "registry:ui",
-        target: "badge/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
       source: "",
@@ -276,35 +276,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/breadcrumb/Breadcrumb.vue",
         type: "registry:ui",
-        target: "breadcrumb/Breadcrumb.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbEllipsis.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbItem.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbLink.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbLink.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbList.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbPage.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbPage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/index.ts",
         type: "registry:ui",
-        target: "breadcrumb/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
       source: "",
@@ -319,11 +319,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/button/Button.vue",
         type: "registry:ui",
-        target: "button/Button.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/button/index.ts",
         type: "registry:ui",
-        target: "button/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
       source: "",
@@ -338,55 +338,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/calendar/Calendar.vue",
         type: "registry:ui",
-        target: "calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGrid.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGrid.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridBody.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridHead.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridRow.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeadCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeader.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeading.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeading.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarNextButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarPrevButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/index.ts",
         type: "registry:ui",
-        target: "calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -401,31 +401,31 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/card/Card.vue",
         type: "registry:ui",
-        target: "card/Card.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardContent.vue",
         type: "registry:ui",
-        target: "card/CardContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardDescription.vue",
         type: "registry:ui",
-        target: "card/CardDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardFooter.vue",
         type: "registry:ui",
-        target: "card/CardFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardHeader.vue",
         type: "registry:ui",
-        target: "card/CardHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardTitle.vue",
         type: "registry:ui",
-        target: "card/CardTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/index.ts",
         type: "registry:ui",
-        target: "card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
       source: "",
@@ -440,35 +440,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/carousel/Carousel.vue",
         type: "registry:ui",
-        target: "carousel/Carousel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselContent.vue",
         type: "registry:ui",
-        target: "carousel/CarouselContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselItem.vue",
         type: "registry:ui",
-        target: "carousel/CarouselItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselNext.vue",
         type: "registry:ui",
-        target: "carousel/CarouselNext.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselPrevious.vue",
         type: "registry:ui",
-        target: "carousel/CarouselPrevious.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/index.ts",
         type: "registry:ui",
-        target: "carousel/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/interface.ts",
         type: "registry:ui",
-        target: "carousel/interface.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/useCarousel.ts",
         type: "registry:ui",
-        target: "carousel/useCarousel.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
       source: "",
@@ -483,27 +483,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart/ChartCrosshair.vue",
         type: "registry:ui",
-        target: "chart/ChartCrosshair.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartLegend.vue",
         type: "registry:ui",
-        target: "chart/ChartLegend.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartSingleTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartSingleTooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartTooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/index.ts",
         type: "registry:ui",
-        target: "chart/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/interface.ts",
         type: "registry:ui",
-        target: "chart/interface.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
       source: "",
@@ -518,11 +518,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
-        target: "chart-area/AreaChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-area/index.ts",
         type: "registry:ui",
-        target: "chart-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
       source: "",
@@ -537,11 +537,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
-        target: "chart-bar/BarChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-bar/index.ts",
         type: "registry:ui",
-        target: "chart-bar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
       source: "",
@@ -556,11 +556,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
-        target: "chart-donut/DonutChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-donut/index.ts",
         type: "registry:ui",
-        target: "chart-donut/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
       source: "",
@@ -575,11 +575,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-line/LineChart.vue",
         type: "registry:ui",
-        target: "chart-line/LineChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-line/index.ts",
         type: "registry:ui",
-        target: "chart-line/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
       source: "",
@@ -594,11 +594,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/checkbox/Checkbox.vue",
         type: "registry:ui",
-        target: "checkbox/Checkbox.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/checkbox/index.ts",
         type: "registry:ui",
-        target: "checkbox/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
       source: "",
@@ -613,19 +613,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/collapsible/Collapsible.vue",
         type: "registry:ui",
-        target: "collapsible/Collapsible.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/CollapsibleContent.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/CollapsibleTrigger.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/index.ts",
         type: "registry:ui",
-        target: "collapsible/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
       source: "",
@@ -640,43 +640,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/command/Command.vue",
         type: "registry:ui",
-        target: "command/Command.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandDialog.vue",
         type: "registry:ui",
-        target: "command/CommandDialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandEmpty.vue",
         type: "registry:ui",
-        target: "command/CommandEmpty.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandGroup.vue",
         type: "registry:ui",
-        target: "command/CommandGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandInput.vue",
         type: "registry:ui",
-        target: "command/CommandInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandItem.vue",
         type: "registry:ui",
-        target: "command/CommandItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandList.vue",
         type: "registry:ui",
-        target: "command/CommandList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandSeparator.vue",
         type: "registry:ui",
-        target: "command/CommandSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandShortcut.vue",
         type: "registry:ui",
-        target: "command/CommandShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/index.ts",
         type: "registry:ui",
-        target: "command/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
       source: "",
@@ -691,67 +691,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/context-menu/ContextMenu.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuLabel.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuPortal.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuPortal.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuRadioItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSeparator.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuShortcut.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSub.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSubContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/index.ts",
         type: "registry:ui",
-        target: "context-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
       source: "",
@@ -766,43 +766,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/dialog/Dialog.vue",
         type: "registry:ui",
-        target: "dialog/Dialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogClose.vue",
         type: "registry:ui",
-        target: "dialog/DialogClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogDescription.vue",
         type: "registry:ui",
-        target: "dialog/DialogDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogFooter.vue",
         type: "registry:ui",
-        target: "dialog/DialogFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogHeader.vue",
         type: "registry:ui",
-        target: "dialog/DialogHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogScrollContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogScrollContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogTitle.vue",
         type: "registry:ui",
-        target: "dialog/DialogTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogTrigger.vue",
         type: "registry:ui",
-        target: "dialog/DialogTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/index.ts",
         type: "registry:ui",
-        target: "dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
       source: "",
@@ -817,35 +817,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/drawer/Drawer.vue",
         type: "registry:ui",
-        target: "drawer/Drawer.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerContent.vue",
         type: "registry:ui",
-        target: "drawer/DrawerContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerDescription.vue",
         type: "registry:ui",
-        target: "drawer/DrawerDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerFooter.vue",
         type: "registry:ui",
-        target: "drawer/DrawerFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerHeader.vue",
         type: "registry:ui",
-        target: "drawer/DrawerHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerOverlay.vue",
         type: "registry:ui",
-        target: "drawer/DrawerOverlay.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerTitle.vue",
         type: "registry:ui",
-        target: "drawer/DrawerTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/index.ts",
         type: "registry:ui",
-        target: "drawer/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
       source: "",
@@ -860,63 +860,63 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenu.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/index.ts",
         type: "registry:ui",
-        target: "dropdown-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
       source: "",
@@ -931,35 +931,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/form/FormControl.vue",
         type: "registry:ui",
-        target: "form/FormControl.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormDescription.vue",
         type: "registry:ui",
-        target: "form/FormDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormItem.vue",
         type: "registry:ui",
-        target: "form/FormItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormLabel.vue",
         type: "registry:ui",
-        target: "form/FormLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormMessage.vue",
         type: "registry:ui",
-        target: "form/FormMessage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/index.ts",
         type: "registry:ui",
-        target: "form/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/form/injectionKeys.ts",
         type: "registry:ui",
-        target: "form/injectionKeys.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/form/useFormField.ts",
         type: "registry:ui",
-        target: "form/useFormField.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
       source: "",
@@ -974,19 +974,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/hover-card/HoverCard.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCard.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/HoverCardContent.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/HoverCardTrigger.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/index.ts",
         type: "registry:ui",
-        target: "hover-card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
       source: "",
@@ -1001,11 +1001,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/input/Input.vue",
         type: "registry:ui",
-        target: "input/Input.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/input/index.ts",
         type: "registry:ui",
-        target: "input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
       source: "",
@@ -1020,11 +1020,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/label/Label.vue",
         type: "registry:ui",
-        target: "label/Label.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/label/index.ts",
         type: "registry:ui",
-        target: "label/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
       source: "",
@@ -1039,67 +1039,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/menubar/Menubar.vue",
         type: "registry:ui",
-        target: "menubar/Menubar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarCheckboxItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarLabel.vue",
         type: "registry:ui",
-        target: "menubar/MenubarLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarMenu.vue",
         type: "registry:ui",
-        target: "menubar/MenubarMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarRadioGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarRadioItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSeparator.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarShortcut.vue",
         type: "registry:ui",
-        target: "menubar/MenubarShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSub.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSubContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSubTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/index.ts",
         type: "registry:ui",
-        target: "menubar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
       source: "",
@@ -1114,39 +1114,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/navigation-menu/NavigationMenu.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuContent.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuIndicator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuItem.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuLink.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuLink.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuList.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuViewport.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/index.ts",
         type: "registry:ui",
-        target: "navigation-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
       source: "",
@@ -1161,27 +1161,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/number-field/NumberField.vue",
         type: "registry:ui",
-        target: "number-field/NumberField.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldContent.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldDecrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldDecrement.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldIncrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldIncrement.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldInput.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/index.ts",
         type: "registry:ui",
-        target: "number-field/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
       source: "",
@@ -1196,27 +1196,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/pagination/PaginationEllipsis.vue",
         type: "registry:ui",
-        target: "pagination/PaginationEllipsis.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationFirst.vue",
         type: "registry:ui",
-        target: "pagination/PaginationFirst.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationLast.vue",
         type: "registry:ui",
-        target: "pagination/PaginationLast.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationNext.vue",
         type: "registry:ui",
-        target: "pagination/PaginationNext.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationPrev.vue",
         type: "registry:ui",
-        target: "pagination/PaginationPrev.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/index.ts",
         type: "registry:ui",
-        target: "pagination/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
       source: "",
@@ -1231,23 +1231,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/pin-input/PinInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputGroup.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputSeparator.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/index.ts",
         type: "registry:ui",
-        target: "pin-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
       source: "",
@@ -1262,19 +1262,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/popover/Popover.vue",
         type: "registry:ui",
-        target: "popover/Popover.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/PopoverContent.vue",
         type: "registry:ui",
-        target: "popover/PopoverContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/PopoverTrigger.vue",
         type: "registry:ui",
-        target: "popover/PopoverTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/index.ts",
         type: "registry:ui",
-        target: "popover/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
       source: "",
@@ -1289,11 +1289,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/progress/Progress.vue",
         type: "registry:ui",
-        target: "progress/Progress.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/progress/index.ts",
         type: "registry:ui",
-        target: "progress/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
       source: "",
@@ -1308,15 +1308,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/radio-group/RadioGroup.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/radio-group/RadioGroupItem.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroupItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/radio-group/index.ts",
         type: "registry:ui",
-        target: "radio-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
       source: "",
@@ -1331,55 +1331,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/range-calendar/RangeCalendar.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGrid.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGrid.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeader.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeading.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeading.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/index.ts",
         type: "registry:ui",
-        target: "range-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
       source: "",
@@ -1394,15 +1394,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/resizable/ResizableHandle.vue",
         type: "registry:ui",
-        target: "resizable/ResizableHandle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/resizable/ResizablePanelGroup.vue",
         type: "registry:ui",
-        target: "resizable/ResizablePanelGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/resizable/index.ts",
         type: "registry:ui",
-        target: "resizable/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
       source: "",
@@ -1417,15 +1417,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/scroll-area/ScrollArea.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollArea.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/scroll-area/ScrollBar.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollBar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/scroll-area/index.ts",
         type: "registry:ui",
-        target: "scroll-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
       source: "",
@@ -1440,51 +1440,51 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/select/Select.vue",
         type: "registry:ui",
-        target: "select/Select.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectContent.vue",
         type: "registry:ui",
-        target: "select/SelectContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectGroup.vue",
         type: "registry:ui",
-        target: "select/SelectGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectItem.vue",
         type: "registry:ui",
-        target: "select/SelectItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectItemText.vue",
         type: "registry:ui",
-        target: "select/SelectItemText.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectLabel.vue",
         type: "registry:ui",
-        target: "select/SelectLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectScrollDownButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollDownButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectScrollUpButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollUpButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectSeparator.vue",
         type: "registry:ui",
-        target: "select/SelectSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectTrigger.vue",
         type: "registry:ui",
-        target: "select/SelectTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectValue.vue",
         type: "registry:ui",
-        target: "select/SelectValue.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/index.ts",
         type: "registry:ui",
-        target: "select/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
       source: "",
@@ -1499,11 +1499,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/separator/Separator.vue",
         type: "registry:ui",
-        target: "separator/Separator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/separator/index.ts",
         type: "registry:ui",
-        target: "separator/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
       source: "",
@@ -1518,39 +1518,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sheet/Sheet.vue",
         type: "registry:ui",
-        target: "sheet/Sheet.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetClose.vue",
         type: "registry:ui",
-        target: "sheet/SheetClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetContent.vue",
         type: "registry:ui",
-        target: "sheet/SheetContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetDescription.vue",
         type: "registry:ui",
-        target: "sheet/SheetDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetFooter.vue",
         type: "registry:ui",
-        target: "sheet/SheetFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetHeader.vue",
         type: "registry:ui",
-        target: "sheet/SheetHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetTitle.vue",
         type: "registry:ui",
-        target: "sheet/SheetTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetTrigger.vue",
         type: "registry:ui",
-        target: "sheet/SheetTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/index.ts",
         type: "registry:ui",
-        target: "sheet/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
       source: "",
@@ -1565,107 +1565,107 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
-        target: "sidebar/Sidebar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarFooter.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroup.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupLabel.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarHeader.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarInput.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarInset.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInset.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenu.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuBadge.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuBadge.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButtonChild.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSkeleton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSub.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSubButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSubItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarProvider.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarRail.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarRail.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarSeparator.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarTrigger.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/index.ts",
         type: "registry:ui",
-        target: "sidebar/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/utils.ts",
         type: "registry:ui",
-        target: "sidebar/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
       source: "",
@@ -1680,11 +1680,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/skeleton/Skeleton.vue",
         type: "registry:ui",
-        target: "skeleton/Skeleton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/skeleton/index.ts",
         type: "registry:ui",
-        target: "skeleton/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
       source: "",
@@ -1699,11 +1699,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/slider/Slider.vue",
         type: "registry:ui",
-        target: "slider/Slider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/slider/index.ts",
         type: "registry:ui",
-        target: "slider/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
       source: "",
@@ -1718,11 +1718,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sonner/Sonner.vue",
         type: "registry:ui",
-        target: "sonner/Sonner.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sonner/index.ts",
         type: "registry:ui",
-        target: "sonner/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
       source: "",
@@ -1737,35 +1737,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/stepper/Stepper.vue",
         type: "registry:ui",
-        target: "stepper/Stepper.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperDescription.vue",
         type: "registry:ui",
-        target: "stepper/StepperDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperIndicator.vue",
         type: "registry:ui",
-        target: "stepper/StepperIndicator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperItem.vue",
         type: "registry:ui",
-        target: "stepper/StepperItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperSeparator.vue",
         type: "registry:ui",
-        target: "stepper/StepperSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperTitle.vue",
         type: "registry:ui",
-        target: "stepper/StepperTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperTrigger.vue",
         type: "registry:ui",
-        target: "stepper/StepperTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/index.ts",
         type: "registry:ui",
-        target: "stepper/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
       source: "",
@@ -1780,11 +1780,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/switch/Switch.vue",
         type: "registry:ui",
-        target: "switch/Switch.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/switch/index.ts",
         type: "registry:ui",
-        target: "switch/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
       source: "",
@@ -1799,43 +1799,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/table/Table.vue",
         type: "registry:ui",
-        target: "table/Table.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableBody.vue",
         type: "registry:ui",
-        target: "table/TableBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableCaption.vue",
         type: "registry:ui",
-        target: "table/TableCaption.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableCell.vue",
         type: "registry:ui",
-        target: "table/TableCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableEmpty.vue",
         type: "registry:ui",
-        target: "table/TableEmpty.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableFooter.vue",
         type: "registry:ui",
-        target: "table/TableFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableHead.vue",
         type: "registry:ui",
-        target: "table/TableHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableHeader.vue",
         type: "registry:ui",
-        target: "table/TableHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableRow.vue",
         type: "registry:ui",
-        target: "table/TableRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/index.ts",
         type: "registry:ui",
-        target: "table/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
       source: "",
@@ -1850,23 +1850,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tabs/Tabs.vue",
         type: "registry:ui",
-        target: "tabs/Tabs.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsContent.vue",
         type: "registry:ui",
-        target: "tabs/TabsContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsList.vue",
         type: "registry:ui",
-        target: "tabs/TabsList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsTrigger.vue",
         type: "registry:ui",
-        target: "tabs/TabsTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/index.ts",
         type: "registry:ui",
-        target: "tabs/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
       source: "",
@@ -1881,27 +1881,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tags-input/TagsInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItem.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItemDelete.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemDelete.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItemText.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemText.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/index.ts",
         type: "registry:ui",
-        target: "tags-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
       source: "",
@@ -1916,11 +1916,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/textarea/Textarea.vue",
         type: "registry:ui",
-        target: "textarea/Textarea.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/textarea/index.ts",
         type: "registry:ui",
-        target: "textarea/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
       source: "",
@@ -1935,43 +1935,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toast/Toast.vue",
         type: "registry:ui",
-        target: "toast/Toast.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastAction.vue",
         type: "registry:ui",
-        target: "toast/ToastAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastClose.vue",
         type: "registry:ui",
-        target: "toast/ToastClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastDescription.vue",
         type: "registry:ui",
-        target: "toast/ToastDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastProvider.vue",
         type: "registry:ui",
-        target: "toast/ToastProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastTitle.vue",
         type: "registry:ui",
-        target: "toast/ToastTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastViewport.vue",
         type: "registry:ui",
-        target: "toast/ToastViewport.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/Toaster.vue",
         type: "registry:ui",
-        target: "toast/Toaster.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/index.ts",
         type: "registry:ui",
-        target: "toast/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/use-toast.ts",
         type: "registry:ui",
-        target: "toast/use-toast.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
       source: "",
@@ -1986,11 +1986,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toggle/Toggle.vue",
         type: "registry:ui",
-        target: "toggle/Toggle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle/index.ts",
         type: "registry:ui",
-        target: "toggle/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
       source: "",
@@ -2005,15 +2005,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toggle-group/ToggleGroup.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle-group/ToggleGroupItem.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroupItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle-group/index.ts",
         type: "registry:ui",
-        target: "toggle-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
       source: "",
@@ -2028,23 +2028,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tooltip/Tooltip.vue",
         type: "registry:ui",
-        target: "tooltip/Tooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipContent.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipProvider.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipTrigger.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/index.ts",
         type: "registry:ui",
-        target: "tooltip/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
       source: "",
@@ -2059,11 +2059,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
-        target: "v-calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/v-calendar/index.ts",
         type: "registry:ui",
-        target: "v-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -5871,23 +5871,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/accordion/Accordion.vue",
         type: "registry:ui",
-        target: "accordion/Accordion.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionContent.vue",
         type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionItem.vue",
         type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/AccordionTrigger.vue",
         type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/accordion/index.ts",
         type: "registry:ui",
-        target: "accordion/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
       source: "",
@@ -5902,19 +5902,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/alert/Alert.vue",
         type: "registry:ui",
-        target: "alert/Alert.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/AlertDescription.vue",
         type: "registry:ui",
-        target: "alert/AlertDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/AlertTitle.vue",
         type: "registry:ui",
-        target: "alert/AlertTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert/index.ts",
         type: "registry:ui",
-        target: "alert/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
       source: "",
@@ -5929,43 +5929,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogAction.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogCancel.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogCancel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogContent.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogDescription.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogFooter.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogHeader.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogTitle.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/AlertDialogTrigger.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/alert-dialog/index.ts",
         type: "registry:ui",
-        target: "alert-dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
       source: "",
@@ -5980,11 +5980,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/aspect-ratio/AspectRatio.vue",
         type: "registry:ui",
-        target: "aspect-ratio/AspectRatio.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/aspect-ratio/index.ts",
         type: "registry:ui",
-        target: "aspect-ratio/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
       source: "",
@@ -5999,67 +5999,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
-        target: "auto-form/AutoForm.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormField.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormField.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldArray.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldArray.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldBoolean.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldDate.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldDate.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldEnum.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldEnum.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldFile.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldFile.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldInput.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldNumber.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldNumber.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormFieldObject.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldObject.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/AutoFormLabel.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/constant.ts",
         type: "registry:ui",
-        target: "auto-form/constant.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/dependencies.ts",
         type: "registry:ui",
-        target: "auto-form/dependencies.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/index.ts",
         type: "registry:ui",
-        target: "auto-form/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/interface.ts",
         type: "registry:ui",
-        target: "auto-form/interface.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/auto-form/utils.ts",
         type: "registry:ui",
-        target: "auto-form/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
       source: "",
@@ -6074,19 +6074,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/avatar/Avatar.vue",
         type: "registry:ui",
-        target: "avatar/Avatar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/AvatarFallback.vue",
         type: "registry:ui",
-        target: "avatar/AvatarFallback.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/AvatarImage.vue",
         type: "registry:ui",
-        target: "avatar/AvatarImage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/avatar/index.ts",
         type: "registry:ui",
-        target: "avatar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
       source: "",
@@ -6101,11 +6101,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/badge/Badge.vue",
         type: "registry:ui",
-        target: "badge/Badge.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/badge/index.ts",
         type: "registry:ui",
-        target: "badge/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
       source: "",
@@ -6120,35 +6120,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/breadcrumb/Breadcrumb.vue",
         type: "registry:ui",
-        target: "breadcrumb/Breadcrumb.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbEllipsis.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbItem.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbLink.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbLink.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbList.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbPage.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbPage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/breadcrumb/index.ts",
         type: "registry:ui",
-        target: "breadcrumb/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
       source: "",
@@ -6163,11 +6163,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/button/Button.vue",
         type: "registry:ui",
-        target: "button/Button.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/button/index.ts",
         type: "registry:ui",
-        target: "button/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
       source: "",
@@ -6182,55 +6182,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/calendar/Calendar.vue",
         type: "registry:ui",
-        target: "calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGrid.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGrid.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridBody.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridHead.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarGridRow.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeadCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeader.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarHeading.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeading.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarNextButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/CalendarPrevButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/calendar/index.ts",
         type: "registry:ui",
-        target: "calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -6245,31 +6245,31 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/card/Card.vue",
         type: "registry:ui",
-        target: "card/Card.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardContent.vue",
         type: "registry:ui",
-        target: "card/CardContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardDescription.vue",
         type: "registry:ui",
-        target: "card/CardDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardFooter.vue",
         type: "registry:ui",
-        target: "card/CardFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardHeader.vue",
         type: "registry:ui",
-        target: "card/CardHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/CardTitle.vue",
         type: "registry:ui",
-        target: "card/CardTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/card/index.ts",
         type: "registry:ui",
-        target: "card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
       source: "",
@@ -6284,35 +6284,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/carousel/Carousel.vue",
         type: "registry:ui",
-        target: "carousel/Carousel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselContent.vue",
         type: "registry:ui",
-        target: "carousel/CarouselContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselItem.vue",
         type: "registry:ui",
-        target: "carousel/CarouselItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselNext.vue",
         type: "registry:ui",
-        target: "carousel/CarouselNext.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/CarouselPrevious.vue",
         type: "registry:ui",
-        target: "carousel/CarouselPrevious.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/index.ts",
         type: "registry:ui",
-        target: "carousel/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/interface.ts",
         type: "registry:ui",
-        target: "carousel/interface.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/carousel/useCarousel.ts",
         type: "registry:ui",
-        target: "carousel/useCarousel.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
       source: "",
@@ -6327,27 +6327,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart/ChartCrosshair.vue",
         type: "registry:ui",
-        target: "chart/ChartCrosshair.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartLegend.vue",
         type: "registry:ui",
-        target: "chart/ChartLegend.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartSingleTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartSingleTooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/ChartTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartTooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/index.ts",
         type: "registry:ui",
-        target: "chart/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/chart/interface.ts",
         type: "registry:ui",
-        target: "chart/interface.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
       source: "",
@@ -6362,11 +6362,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
-        target: "chart-area/AreaChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-area/index.ts",
         type: "registry:ui",
-        target: "chart-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
       source: "",
@@ -6381,11 +6381,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
-        target: "chart-bar/BarChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-bar/index.ts",
         type: "registry:ui",
-        target: "chart-bar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
       source: "",
@@ -6400,11 +6400,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
-        target: "chart-donut/DonutChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-donut/index.ts",
         type: "registry:ui",
-        target: "chart-donut/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
       source: "",
@@ -6419,11 +6419,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/chart-line/LineChart.vue",
         type: "registry:ui",
-        target: "chart-line/LineChart.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/chart-line/index.ts",
         type: "registry:ui",
-        target: "chart-line/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
       source: "",
@@ -6438,11 +6438,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/checkbox/Checkbox.vue",
         type: "registry:ui",
-        target: "checkbox/Checkbox.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/checkbox/index.ts",
         type: "registry:ui",
-        target: "checkbox/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
       source: "",
@@ -6457,19 +6457,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/collapsible/Collapsible.vue",
         type: "registry:ui",
-        target: "collapsible/Collapsible.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/CollapsibleContent.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/CollapsibleTrigger.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/collapsible/index.ts",
         type: "registry:ui",
-        target: "collapsible/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
       source: "",
@@ -6484,43 +6484,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/command/Command.vue",
         type: "registry:ui",
-        target: "command/Command.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandDialog.vue",
         type: "registry:ui",
-        target: "command/CommandDialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandEmpty.vue",
         type: "registry:ui",
-        target: "command/CommandEmpty.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandGroup.vue",
         type: "registry:ui",
-        target: "command/CommandGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandInput.vue",
         type: "registry:ui",
-        target: "command/CommandInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandItem.vue",
         type: "registry:ui",
-        target: "command/CommandItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandList.vue",
         type: "registry:ui",
-        target: "command/CommandList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandSeparator.vue",
         type: "registry:ui",
-        target: "command/CommandSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/CommandShortcut.vue",
         type: "registry:ui",
-        target: "command/CommandShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/command/index.ts",
         type: "registry:ui",
-        target: "command/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
       source: "",
@@ -6535,67 +6535,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/context-menu/ContextMenu.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuLabel.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuPortal.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuPortal.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuRadioItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSeparator.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuShortcut.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSub.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSubContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/ContextMenuTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/context-menu/index.ts",
         type: "registry:ui",
-        target: "context-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
       source: "",
@@ -6610,43 +6610,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/dialog/Dialog.vue",
         type: "registry:ui",
-        target: "dialog/Dialog.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogClose.vue",
         type: "registry:ui",
-        target: "dialog/DialogClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogDescription.vue",
         type: "registry:ui",
-        target: "dialog/DialogDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogFooter.vue",
         type: "registry:ui",
-        target: "dialog/DialogFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogHeader.vue",
         type: "registry:ui",
-        target: "dialog/DialogHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogScrollContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogScrollContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogTitle.vue",
         type: "registry:ui",
-        target: "dialog/DialogTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/DialogTrigger.vue",
         type: "registry:ui",
-        target: "dialog/DialogTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dialog/index.ts",
         type: "registry:ui",
-        target: "dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
       source: "",
@@ -6661,35 +6661,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/drawer/Drawer.vue",
         type: "registry:ui",
-        target: "drawer/Drawer.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerContent.vue",
         type: "registry:ui",
-        target: "drawer/DrawerContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerDescription.vue",
         type: "registry:ui",
-        target: "drawer/DrawerDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerFooter.vue",
         type: "registry:ui",
-        target: "drawer/DrawerFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerHeader.vue",
         type: "registry:ui",
-        target: "drawer/DrawerHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerOverlay.vue",
         type: "registry:ui",
-        target: "drawer/DrawerOverlay.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/DrawerTitle.vue",
         type: "registry:ui",
-        target: "drawer/DrawerTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/drawer/index.ts",
         type: "registry:ui",
-        target: "drawer/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
       source: "",
@@ -6704,63 +6704,63 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenu.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSeparator.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSub.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/DropdownMenuTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/dropdown-menu/index.ts",
         type: "registry:ui",
-        target: "dropdown-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
       source: "",
@@ -6775,35 +6775,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/form/FormControl.vue",
         type: "registry:ui",
-        target: "form/FormControl.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormDescription.vue",
         type: "registry:ui",
-        target: "form/FormDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormItem.vue",
         type: "registry:ui",
-        target: "form/FormItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormLabel.vue",
         type: "registry:ui",
-        target: "form/FormLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/FormMessage.vue",
         type: "registry:ui",
-        target: "form/FormMessage.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/form/index.ts",
         type: "registry:ui",
-        target: "form/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/form/injectionKeys.ts",
         type: "registry:ui",
-        target: "form/injectionKeys.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/form/useFormField.ts",
         type: "registry:ui",
-        target: "form/useFormField.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
       source: "",
@@ -6818,19 +6818,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/hover-card/HoverCard.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCard.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/HoverCardContent.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/HoverCardTrigger.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/hover-card/index.ts",
         type: "registry:ui",
-        target: "hover-card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
       source: "",
@@ -6845,11 +6845,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/input/Input.vue",
         type: "registry:ui",
-        target: "input/Input.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/input/index.ts",
         type: "registry:ui",
-        target: "input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
       source: "",
@@ -6864,11 +6864,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/label/Label.vue",
         type: "registry:ui",
-        target: "label/Label.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/label/index.ts",
         type: "registry:ui",
-        target: "label/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
       source: "",
@@ -6883,67 +6883,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/menubar/Menubar.vue",
         type: "registry:ui",
-        target: "menubar/Menubar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarCheckboxItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarLabel.vue",
         type: "registry:ui",
-        target: "menubar/MenubarLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarMenu.vue",
         type: "registry:ui",
-        target: "menubar/MenubarMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarRadioGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarRadioItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSeparator.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarShortcut.vue",
         type: "registry:ui",
-        target: "menubar/MenubarShortcut.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSub.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSubContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarSubTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/MenubarTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/menubar/index.ts",
         type: "registry:ui",
-        target: "menubar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
       source: "",
@@ -6958,39 +6958,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/navigation-menu/NavigationMenu.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuContent.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuIndicator.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuIndicator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuItem.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuLink.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuLink.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuList.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuViewport.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/navigation-menu/index.ts",
         type: "registry:ui",
-        target: "navigation-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
       source: "",
@@ -7005,27 +7005,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/number-field/NumberField.vue",
         type: "registry:ui",
-        target: "number-field/NumberField.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldContent.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldDecrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldDecrement.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldIncrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldIncrement.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/NumberFieldInput.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/number-field/index.ts",
         type: "registry:ui",
-        target: "number-field/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
       source: "",
@@ -7040,27 +7040,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/pagination/PaginationEllipsis.vue",
         type: "registry:ui",
-        target: "pagination/PaginationEllipsis.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationFirst.vue",
         type: "registry:ui",
-        target: "pagination/PaginationFirst.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationLast.vue",
         type: "registry:ui",
-        target: "pagination/PaginationLast.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationNext.vue",
         type: "registry:ui",
-        target: "pagination/PaginationNext.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/PaginationPrev.vue",
         type: "registry:ui",
-        target: "pagination/PaginationPrev.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pagination/index.ts",
         type: "registry:ui",
-        target: "pagination/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
       source: "",
@@ -7075,23 +7075,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/pin-input/PinInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputGroup.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/PinInputSeparator.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/pin-input/index.ts",
         type: "registry:ui",
-        target: "pin-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
       source: "",
@@ -7106,19 +7106,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/popover/Popover.vue",
         type: "registry:ui",
-        target: "popover/Popover.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/PopoverContent.vue",
         type: "registry:ui",
-        target: "popover/PopoverContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/PopoverTrigger.vue",
         type: "registry:ui",
-        target: "popover/PopoverTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/popover/index.ts",
         type: "registry:ui",
-        target: "popover/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
       source: "",
@@ -7133,11 +7133,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/progress/Progress.vue",
         type: "registry:ui",
-        target: "progress/Progress.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/progress/index.ts",
         type: "registry:ui",
-        target: "progress/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
       source: "",
@@ -7152,15 +7152,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/radio-group/RadioGroup.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/radio-group/RadioGroupItem.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroupItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/radio-group/index.ts",
         type: "registry:ui",
-        target: "radio-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
       source: "",
@@ -7175,55 +7175,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/range-calendar/RangeCalendar.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGrid.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGrid.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridBody.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridHead.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarGridRow.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeadCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeader.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarHeading.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeading.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/range-calendar/index.ts",
         type: "registry:ui",
-        target: "range-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
       source: "",
@@ -7238,15 +7238,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/resizable/ResizableHandle.vue",
         type: "registry:ui",
-        target: "resizable/ResizableHandle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/resizable/ResizablePanelGroup.vue",
         type: "registry:ui",
-        target: "resizable/ResizablePanelGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/resizable/index.ts",
         type: "registry:ui",
-        target: "resizable/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
       source: "",
@@ -7261,15 +7261,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/scroll-area/ScrollArea.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollArea.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/scroll-area/ScrollBar.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollBar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/scroll-area/index.ts",
         type: "registry:ui",
-        target: "scroll-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
       source: "",
@@ -7284,51 +7284,51 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/select/Select.vue",
         type: "registry:ui",
-        target: "select/Select.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectContent.vue",
         type: "registry:ui",
-        target: "select/SelectContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectGroup.vue",
         type: "registry:ui",
-        target: "select/SelectGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectItem.vue",
         type: "registry:ui",
-        target: "select/SelectItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectItemText.vue",
         type: "registry:ui",
-        target: "select/SelectItemText.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectLabel.vue",
         type: "registry:ui",
-        target: "select/SelectLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectScrollDownButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollDownButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectScrollUpButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollUpButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectSeparator.vue",
         type: "registry:ui",
-        target: "select/SelectSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectTrigger.vue",
         type: "registry:ui",
-        target: "select/SelectTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/SelectValue.vue",
         type: "registry:ui",
-        target: "select/SelectValue.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/select/index.ts",
         type: "registry:ui",
-        target: "select/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
       source: "",
@@ -7343,11 +7343,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/separator/Separator.vue",
         type: "registry:ui",
-        target: "separator/Separator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/separator/index.ts",
         type: "registry:ui",
-        target: "separator/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
       source: "",
@@ -7362,39 +7362,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sheet/Sheet.vue",
         type: "registry:ui",
-        target: "sheet/Sheet.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetClose.vue",
         type: "registry:ui",
-        target: "sheet/SheetClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetContent.vue",
         type: "registry:ui",
-        target: "sheet/SheetContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetDescription.vue",
         type: "registry:ui",
-        target: "sheet/SheetDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetFooter.vue",
         type: "registry:ui",
-        target: "sheet/SheetFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetHeader.vue",
         type: "registry:ui",
-        target: "sheet/SheetHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetTitle.vue",
         type: "registry:ui",
-        target: "sheet/SheetTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/SheetTrigger.vue",
         type: "registry:ui",
-        target: "sheet/SheetTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sheet/index.ts",
         type: "registry:ui",
-        target: "sheet/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
       source: "",
@@ -7409,107 +7409,107 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
-        target: "sidebar/Sidebar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarFooter.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroup.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarGroupLabel.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupLabel.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarHeader.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarInput.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarInset.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInset.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenu.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenu.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuBadge.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuBadge.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButtonChild.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSkeleton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSub.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSub.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSubButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubButton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarMenuSubItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarProvider.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarRail.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarRail.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarSeparator.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/SidebarTrigger.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/index.ts",
         type: "registry:ui",
-        target: "sidebar/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/sidebar/utils.ts",
         type: "registry:ui",
-        target: "sidebar/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
       source: "",
@@ -7524,11 +7524,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/skeleton/Skeleton.vue",
         type: "registry:ui",
-        target: "skeleton/Skeleton.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/skeleton/index.ts",
         type: "registry:ui",
-        target: "skeleton/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
       source: "",
@@ -7543,11 +7543,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/slider/Slider.vue",
         type: "registry:ui",
-        target: "slider/Slider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/slider/index.ts",
         type: "registry:ui",
-        target: "slider/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
       source: "",
@@ -7562,11 +7562,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/sonner/Sonner.vue",
         type: "registry:ui",
-        target: "sonner/Sonner.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/sonner/index.ts",
         type: "registry:ui",
-        target: "sonner/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
       source: "",
@@ -7581,35 +7581,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/stepper/Stepper.vue",
         type: "registry:ui",
-        target: "stepper/Stepper.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperDescription.vue",
         type: "registry:ui",
-        target: "stepper/StepperDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperIndicator.vue",
         type: "registry:ui",
-        target: "stepper/StepperIndicator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperItem.vue",
         type: "registry:ui",
-        target: "stepper/StepperItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperSeparator.vue",
         type: "registry:ui",
-        target: "stepper/StepperSeparator.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperTitle.vue",
         type: "registry:ui",
-        target: "stepper/StepperTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/StepperTrigger.vue",
         type: "registry:ui",
-        target: "stepper/StepperTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/stepper/index.ts",
         type: "registry:ui",
-        target: "stepper/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
       source: "",
@@ -7624,11 +7624,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/switch/Switch.vue",
         type: "registry:ui",
-        target: "switch/Switch.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/switch/index.ts",
         type: "registry:ui",
-        target: "switch/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
       source: "",
@@ -7643,43 +7643,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/table/Table.vue",
         type: "registry:ui",
-        target: "table/Table.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableBody.vue",
         type: "registry:ui",
-        target: "table/TableBody.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableCaption.vue",
         type: "registry:ui",
-        target: "table/TableCaption.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableCell.vue",
         type: "registry:ui",
-        target: "table/TableCell.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableEmpty.vue",
         type: "registry:ui",
-        target: "table/TableEmpty.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableFooter.vue",
         type: "registry:ui",
-        target: "table/TableFooter.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableHead.vue",
         type: "registry:ui",
-        target: "table/TableHead.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableHeader.vue",
         type: "registry:ui",
-        target: "table/TableHeader.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/TableRow.vue",
         type: "registry:ui",
-        target: "table/TableRow.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/table/index.ts",
         type: "registry:ui",
-        target: "table/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
       source: "",
@@ -7694,23 +7694,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tabs/Tabs.vue",
         type: "registry:ui",
-        target: "tabs/Tabs.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsContent.vue",
         type: "registry:ui",
-        target: "tabs/TabsContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsList.vue",
         type: "registry:ui",
-        target: "tabs/TabsList.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/TabsTrigger.vue",
         type: "registry:ui",
-        target: "tabs/TabsTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tabs/index.ts",
         type: "registry:ui",
-        target: "tabs/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
       source: "",
@@ -7725,27 +7725,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tags-input/TagsInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputInput.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItem.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItemDelete.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemDelete.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/TagsInputItemText.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemText.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tags-input/index.ts",
         type: "registry:ui",
-        target: "tags-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
       source: "",
@@ -7760,11 +7760,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/textarea/Textarea.vue",
         type: "registry:ui",
-        target: "textarea/Textarea.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/textarea/index.ts",
         type: "registry:ui",
-        target: "textarea/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
       source: "",
@@ -7779,43 +7779,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toast/Toast.vue",
         type: "registry:ui",
-        target: "toast/Toast.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastAction.vue",
         type: "registry:ui",
-        target: "toast/ToastAction.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastClose.vue",
         type: "registry:ui",
-        target: "toast/ToastClose.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastDescription.vue",
         type: "registry:ui",
-        target: "toast/ToastDescription.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastProvider.vue",
         type: "registry:ui",
-        target: "toast/ToastProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastTitle.vue",
         type: "registry:ui",
-        target: "toast/ToastTitle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/ToastViewport.vue",
         type: "registry:ui",
-        target: "toast/ToastViewport.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/Toaster.vue",
         type: "registry:ui",
-        target: "toast/Toaster.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/index.ts",
         type: "registry:ui",
-        target: "toast/index.ts"
+        target: ""
       },{
         path: "registry/new-york/ui/toast/use-toast.ts",
         type: "registry:ui",
-        target: "toast/use-toast.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
       source: "",
@@ -7830,11 +7830,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toggle/Toggle.vue",
         type: "registry:ui",
-        target: "toggle/Toggle.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle/index.ts",
         type: "registry:ui",
-        target: "toggle/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
       source: "",
@@ -7849,15 +7849,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/toggle-group/ToggleGroup.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroup.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle-group/ToggleGroupItem.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroupItem.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/toggle-group/index.ts",
         type: "registry:ui",
-        target: "toggle-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
       source: "",
@@ -7872,23 +7872,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/tooltip/Tooltip.vue",
         type: "registry:ui",
-        target: "tooltip/Tooltip.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipContent.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipContent.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipProvider.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipProvider.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/TooltipTrigger.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipTrigger.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/tooltip/index.ts",
         type: "registry:ui",
-        target: "tooltip/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
       source: "",
@@ -7903,11 +7903,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
-        target: "v-calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/new-york/ui/v-calendar/index.ts",
         type: "registry:ui",
-        target: "v-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -11731,23 +11731,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/accordion/Accordion.vue",
         type: "registry:ui",
-        target: "accordion/Accordion.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionContent.vue",
         type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionItem.vue",
         type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionTrigger.vue",
         type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/index.ts",
         type: "registry:ui",
-        target: "accordion/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
       source: "",
@@ -11762,19 +11762,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/alert/Alert.vue",
         type: "registry:ui",
-        target: "alert/Alert.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/AlertDescription.vue",
         type: "registry:ui",
-        target: "alert/AlertDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/AlertTitle.vue",
         type: "registry:ui",
-        target: "alert/AlertTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/index.ts",
         type: "registry:ui",
-        target: "alert/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
       source: "",
@@ -11789,43 +11789,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogCancel.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogDescription.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogFooter.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogHeader.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogTitle.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogTrigger.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/index.ts",
         type: "registry:ui",
-        target: "alert-dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
       source: "",
@@ -11840,11 +11840,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/aspect-ratio/AspectRatio.vue",
         type: "registry:ui",
-        target: "aspect-ratio/AspectRatio.vue"
+        target: ""
       },{
         path: "registry/default/ui/aspect-ratio/index.ts",
         type: "registry:ui",
-        target: "aspect-ratio/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
       source: "",
@@ -11859,67 +11859,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
-        target: "auto-form/AutoForm.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormField.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormField.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldArray.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldArray.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldBoolean.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldBoolean.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldDate.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldDate.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldEnum.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldEnum.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldFile.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldFile.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldInput.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldNumber.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldNumber.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldObject.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldObject.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormLabel.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/constant.ts",
         type: "registry:ui",
-        target: "auto-form/constant.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/dependencies.ts",
         type: "registry:ui",
-        target: "auto-form/dependencies.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/index.ts",
         type: "registry:ui",
-        target: "auto-form/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/interface.ts",
         type: "registry:ui",
-        target: "auto-form/interface.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/utils.ts",
         type: "registry:ui",
-        target: "auto-form/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
       source: "",
@@ -11934,19 +11934,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/avatar/Avatar.vue",
         type: "registry:ui",
-        target: "avatar/Avatar.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/AvatarFallback.vue",
         type: "registry:ui",
-        target: "avatar/AvatarFallback.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/AvatarImage.vue",
         type: "registry:ui",
-        target: "avatar/AvatarImage.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/index.ts",
         type: "registry:ui",
-        target: "avatar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
       source: "",
@@ -11961,11 +11961,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/badge/Badge.vue",
         type: "registry:ui",
-        target: "badge/Badge.vue"
+        target: ""
       },{
         path: "registry/default/ui/badge/index.ts",
         type: "registry:ui",
-        target: "badge/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
       source: "",
@@ -11980,35 +11980,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/breadcrumb/Breadcrumb.vue",
         type: "registry:ui",
-        target: "breadcrumb/Breadcrumb.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbEllipsis.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbItem.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbLink.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbLink.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbList.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbList.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbPage.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbPage.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbSeparator.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/index.ts",
         type: "registry:ui",
-        target: "breadcrumb/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
       source: "",
@@ -12023,11 +12023,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/button/Button.vue",
         type: "registry:ui",
-        target: "button/Button.vue"
+        target: ""
       },{
         path: "registry/default/ui/button/index.ts",
         type: "registry:ui",
-        target: "button/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
       source: "",
@@ -12042,55 +12042,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/calendar/Calendar.vue",
         type: "registry:ui",
-        target: "calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGrid.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGrid.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridBody.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridHead.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridRow.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeadCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeader.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeading.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeading.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarNextButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarPrevButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/index.ts",
         type: "registry:ui",
-        target: "calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -12105,31 +12105,31 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/card/Card.vue",
         type: "registry:ui",
-        target: "card/Card.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardContent.vue",
         type: "registry:ui",
-        target: "card/CardContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardDescription.vue",
         type: "registry:ui",
-        target: "card/CardDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardFooter.vue",
         type: "registry:ui",
-        target: "card/CardFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardHeader.vue",
         type: "registry:ui",
-        target: "card/CardHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardTitle.vue",
         type: "registry:ui",
-        target: "card/CardTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/index.ts",
         type: "registry:ui",
-        target: "card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
       source: "",
@@ -12144,35 +12144,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/carousel/Carousel.vue",
         type: "registry:ui",
-        target: "carousel/Carousel.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselContent.vue",
         type: "registry:ui",
-        target: "carousel/CarouselContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselItem.vue",
         type: "registry:ui",
-        target: "carousel/CarouselItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselNext.vue",
         type: "registry:ui",
-        target: "carousel/CarouselNext.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselPrevious.vue",
         type: "registry:ui",
-        target: "carousel/CarouselPrevious.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/index.ts",
         type: "registry:ui",
-        target: "carousel/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/carousel/interface.ts",
         type: "registry:ui",
-        target: "carousel/interface.ts"
+        target: ""
       },{
         path: "registry/default/ui/carousel/useCarousel.ts",
         type: "registry:ui",
-        target: "carousel/useCarousel.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
       source: "",
@@ -12187,27 +12187,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart/ChartCrosshair.vue",
         type: "registry:ui",
-        target: "chart/ChartCrosshair.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartLegend.vue",
         type: "registry:ui",
-        target: "chart/ChartLegend.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartSingleTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartSingleTooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartTooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/index.ts",
         type: "registry:ui",
-        target: "chart/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/chart/interface.ts",
         type: "registry:ui",
-        target: "chart/interface.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
       source: "",
@@ -12222,11 +12222,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
-        target: "chart-area/AreaChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-area/index.ts",
         type: "registry:ui",
-        target: "chart-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
       source: "",
@@ -12241,11 +12241,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
-        target: "chart-bar/BarChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-bar/index.ts",
         type: "registry:ui",
-        target: "chart-bar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
       source: "",
@@ -12260,11 +12260,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
-        target: "chart-donut/DonutChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-donut/index.ts",
         type: "registry:ui",
-        target: "chart-donut/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
       source: "",
@@ -12279,11 +12279,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-line/LineChart.vue",
         type: "registry:ui",
-        target: "chart-line/LineChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-line/index.ts",
         type: "registry:ui",
-        target: "chart-line/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
       source: "",
@@ -12298,11 +12298,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/checkbox/Checkbox.vue",
         type: "registry:ui",
-        target: "checkbox/Checkbox.vue"
+        target: ""
       },{
         path: "registry/default/ui/checkbox/index.ts",
         type: "registry:ui",
-        target: "checkbox/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
       source: "",
@@ -12317,19 +12317,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/collapsible/Collapsible.vue",
         type: "registry:ui",
-        target: "collapsible/Collapsible.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/CollapsibleContent.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/CollapsibleTrigger.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/index.ts",
         type: "registry:ui",
-        target: "collapsible/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
       source: "",
@@ -12344,43 +12344,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/command/Command.vue",
         type: "registry:ui",
-        target: "command/Command.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandDialog.vue",
         type: "registry:ui",
-        target: "command/CommandDialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandEmpty.vue",
         type: "registry:ui",
-        target: "command/CommandEmpty.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandGroup.vue",
         type: "registry:ui",
-        target: "command/CommandGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandInput.vue",
         type: "registry:ui",
-        target: "command/CommandInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandItem.vue",
         type: "registry:ui",
-        target: "command/CommandItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandList.vue",
         type: "registry:ui",
-        target: "command/CommandList.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandSeparator.vue",
         type: "registry:ui",
-        target: "command/CommandSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandShortcut.vue",
         type: "registry:ui",
-        target: "command/CommandShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/index.ts",
         type: "registry:ui",
-        target: "command/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
       source: "",
@@ -12395,67 +12395,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/context-menu/ContextMenu.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuLabel.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuPortal.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuPortal.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuRadioItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSeparator.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuShortcut.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSub.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSubContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/index.ts",
         type: "registry:ui",
-        target: "context-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
       source: "",
@@ -12470,43 +12470,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/dialog/Dialog.vue",
         type: "registry:ui",
-        target: "dialog/Dialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogClose.vue",
         type: "registry:ui",
-        target: "dialog/DialogClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogDescription.vue",
         type: "registry:ui",
-        target: "dialog/DialogDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogFooter.vue",
         type: "registry:ui",
-        target: "dialog/DialogFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogHeader.vue",
         type: "registry:ui",
-        target: "dialog/DialogHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogScrollContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogScrollContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogTitle.vue",
         type: "registry:ui",
-        target: "dialog/DialogTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogTrigger.vue",
         type: "registry:ui",
-        target: "dialog/DialogTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/index.ts",
         type: "registry:ui",
-        target: "dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
       source: "",
@@ -12521,35 +12521,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/drawer/Drawer.vue",
         type: "registry:ui",
-        target: "drawer/Drawer.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerContent.vue",
         type: "registry:ui",
-        target: "drawer/DrawerContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerDescription.vue",
         type: "registry:ui",
-        target: "drawer/DrawerDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerFooter.vue",
         type: "registry:ui",
-        target: "drawer/DrawerFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerHeader.vue",
         type: "registry:ui",
-        target: "drawer/DrawerHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerOverlay.vue",
         type: "registry:ui",
-        target: "drawer/DrawerOverlay.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerTitle.vue",
         type: "registry:ui",
-        target: "drawer/DrawerTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/index.ts",
         type: "registry:ui",
-        target: "drawer/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
       source: "",
@@ -12564,63 +12564,63 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/dropdown-menu/DropdownMenu.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuLabel.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSub.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/index.ts",
         type: "registry:ui",
-        target: "dropdown-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
       source: "",
@@ -12635,35 +12635,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/form/FormControl.vue",
         type: "registry:ui",
-        target: "form/FormControl.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormDescription.vue",
         type: "registry:ui",
-        target: "form/FormDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormItem.vue",
         type: "registry:ui",
-        target: "form/FormItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormLabel.vue",
         type: "registry:ui",
-        target: "form/FormLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormMessage.vue",
         type: "registry:ui",
-        target: "form/FormMessage.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/index.ts",
         type: "registry:ui",
-        target: "form/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/form/injectionKeys.ts",
         type: "registry:ui",
-        target: "form/injectionKeys.ts"
+        target: ""
       },{
         path: "registry/default/ui/form/useFormField.ts",
         type: "registry:ui",
-        target: "form/useFormField.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
       source: "",
@@ -12678,19 +12678,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/hover-card/HoverCard.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCard.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/HoverCardContent.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/HoverCardTrigger.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/index.ts",
         type: "registry:ui",
-        target: "hover-card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
       source: "",
@@ -12705,11 +12705,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/input/Input.vue",
         type: "registry:ui",
-        target: "input/Input.vue"
+        target: ""
       },{
         path: "registry/default/ui/input/index.ts",
         type: "registry:ui",
-        target: "input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
       source: "",
@@ -12724,11 +12724,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/label/Label.vue",
         type: "registry:ui",
-        target: "label/Label.vue"
+        target: ""
       },{
         path: "registry/default/ui/label/index.ts",
         type: "registry:ui",
-        target: "label/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
       source: "",
@@ -12743,67 +12743,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/menubar/Menubar.vue",
         type: "registry:ui",
-        target: "menubar/Menubar.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarCheckboxItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarLabel.vue",
         type: "registry:ui",
-        target: "menubar/MenubarLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarMenu.vue",
         type: "registry:ui",
-        target: "menubar/MenubarMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarRadioGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarRadioItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSeparator.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarShortcut.vue",
         type: "registry:ui",
-        target: "menubar/MenubarShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSub.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSubContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSubTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/index.ts",
         type: "registry:ui",
-        target: "menubar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
       source: "",
@@ -12818,39 +12818,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/navigation-menu/NavigationMenu.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuContent.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuIndicator.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuIndicator.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuItem.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuLink.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuLink.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuList.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuList.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuTrigger.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuViewport.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuViewport.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/index.ts",
         type: "registry:ui",
-        target: "navigation-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
       source: "",
@@ -12865,27 +12865,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/number-field/NumberField.vue",
         type: "registry:ui",
-        target: "number-field/NumberField.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldContent.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldDecrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldDecrement.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldIncrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldIncrement.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldInput.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/index.ts",
         type: "registry:ui",
-        target: "number-field/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
       source: "",
@@ -12900,27 +12900,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/pagination/PaginationEllipsis.vue",
         type: "registry:ui",
-        target: "pagination/PaginationEllipsis.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationFirst.vue",
         type: "registry:ui",
-        target: "pagination/PaginationFirst.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationLast.vue",
         type: "registry:ui",
-        target: "pagination/PaginationLast.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationNext.vue",
         type: "registry:ui",
-        target: "pagination/PaginationNext.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationPrev.vue",
         type: "registry:ui",
-        target: "pagination/PaginationPrev.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/index.ts",
         type: "registry:ui",
-        target: "pagination/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
       source: "",
@@ -12935,23 +12935,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/pin-input/PinInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputGroup.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputSeparator.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/index.ts",
         type: "registry:ui",
-        target: "pin-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
       source: "",
@@ -12966,19 +12966,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/popover/Popover.vue",
         type: "registry:ui",
-        target: "popover/Popover.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/PopoverContent.vue",
         type: "registry:ui",
-        target: "popover/PopoverContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/PopoverTrigger.vue",
         type: "registry:ui",
-        target: "popover/PopoverTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/index.ts",
         type: "registry:ui",
-        target: "popover/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
       source: "",
@@ -12993,11 +12993,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/progress/Progress.vue",
         type: "registry:ui",
-        target: "progress/Progress.vue"
+        target: ""
       },{
         path: "registry/default/ui/progress/index.ts",
         type: "registry:ui",
-        target: "progress/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
       source: "",
@@ -13012,15 +13012,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/radio-group/RadioGroup.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/radio-group/RadioGroupItem.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroupItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/radio-group/index.ts",
         type: "registry:ui",
-        target: "radio-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
       source: "",
@@ -13035,55 +13035,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/range-calendar/RangeCalendar.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGrid.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGrid.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridBody.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridHead.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridRow.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeadCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeader.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeading.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeading.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarNextButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarPrevButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/index.ts",
         type: "registry:ui",
-        target: "range-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
       source: "",
@@ -13098,15 +13098,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/resizable/ResizableHandle.vue",
         type: "registry:ui",
-        target: "resizable/ResizableHandle.vue"
+        target: ""
       },{
         path: "registry/default/ui/resizable/ResizablePanelGroup.vue",
         type: "registry:ui",
-        target: "resizable/ResizablePanelGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/resizable/index.ts",
         type: "registry:ui",
-        target: "resizable/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
       source: "",
@@ -13121,15 +13121,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/scroll-area/ScrollArea.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollArea.vue"
+        target: ""
       },{
         path: "registry/default/ui/scroll-area/ScrollBar.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollBar.vue"
+        target: ""
       },{
         path: "registry/default/ui/scroll-area/index.ts",
         type: "registry:ui",
-        target: "scroll-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
       source: "",
@@ -13144,51 +13144,51 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/select/Select.vue",
         type: "registry:ui",
-        target: "select/Select.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectContent.vue",
         type: "registry:ui",
-        target: "select/SelectContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectGroup.vue",
         type: "registry:ui",
-        target: "select/SelectGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectItem.vue",
         type: "registry:ui",
-        target: "select/SelectItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectItemText.vue",
         type: "registry:ui",
-        target: "select/SelectItemText.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectLabel.vue",
         type: "registry:ui",
-        target: "select/SelectLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectScrollDownButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollDownButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectScrollUpButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollUpButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectSeparator.vue",
         type: "registry:ui",
-        target: "select/SelectSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectTrigger.vue",
         type: "registry:ui",
-        target: "select/SelectTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectValue.vue",
         type: "registry:ui",
-        target: "select/SelectValue.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/index.ts",
         type: "registry:ui",
-        target: "select/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
       source: "",
@@ -13203,11 +13203,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/separator/Separator.vue",
         type: "registry:ui",
-        target: "separator/Separator.vue"
+        target: ""
       },{
         path: "registry/default/ui/separator/index.ts",
         type: "registry:ui",
-        target: "separator/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
       source: "",
@@ -13222,39 +13222,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sheet/Sheet.vue",
         type: "registry:ui",
-        target: "sheet/Sheet.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetClose.vue",
         type: "registry:ui",
-        target: "sheet/SheetClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetContent.vue",
         type: "registry:ui",
-        target: "sheet/SheetContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetDescription.vue",
         type: "registry:ui",
-        target: "sheet/SheetDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetFooter.vue",
         type: "registry:ui",
-        target: "sheet/SheetFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetHeader.vue",
         type: "registry:ui",
-        target: "sheet/SheetHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetTitle.vue",
         type: "registry:ui",
-        target: "sheet/SheetTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetTrigger.vue",
         type: "registry:ui",
-        target: "sheet/SheetTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/index.ts",
         type: "registry:ui",
-        target: "sheet/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
       source: "",
@@ -13269,107 +13269,107 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
-        target: "sidebar/Sidebar.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarFooter.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroup.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupLabel.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarHeader.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarInput.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarInset.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInset.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenu.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuBadge.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuBadge.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuButtonChild.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButtonChild.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSkeleton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSkeleton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSub.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSubButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSubItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarProvider.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarRail.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarRail.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarSeparator.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarTrigger.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/index.ts",
         type: "registry:ui",
-        target: "sidebar/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/utils.ts",
         type: "registry:ui",
-        target: "sidebar/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
       source: "",
@@ -13384,11 +13384,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/skeleton/Skeleton.vue",
         type: "registry:ui",
-        target: "skeleton/Skeleton.vue"
+        target: ""
       },{
         path: "registry/default/ui/skeleton/index.ts",
         type: "registry:ui",
-        target: "skeleton/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
       source: "",
@@ -13403,11 +13403,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/slider/Slider.vue",
         type: "registry:ui",
-        target: "slider/Slider.vue"
+        target: ""
       },{
         path: "registry/default/ui/slider/index.ts",
         type: "registry:ui",
-        target: "slider/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
       source: "",
@@ -13422,11 +13422,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sonner/Sonner.vue",
         type: "registry:ui",
-        target: "sonner/Sonner.vue"
+        target: ""
       },{
         path: "registry/default/ui/sonner/index.ts",
         type: "registry:ui",
-        target: "sonner/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
       source: "",
@@ -13441,35 +13441,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/stepper/Stepper.vue",
         type: "registry:ui",
-        target: "stepper/Stepper.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperDescription.vue",
         type: "registry:ui",
-        target: "stepper/StepperDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperIndicator.vue",
         type: "registry:ui",
-        target: "stepper/StepperIndicator.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperItem.vue",
         type: "registry:ui",
-        target: "stepper/StepperItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperSeparator.vue",
         type: "registry:ui",
-        target: "stepper/StepperSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperTitle.vue",
         type: "registry:ui",
-        target: "stepper/StepperTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperTrigger.vue",
         type: "registry:ui",
-        target: "stepper/StepperTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/index.ts",
         type: "registry:ui",
-        target: "stepper/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
       source: "",
@@ -13484,11 +13484,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/switch/Switch.vue",
         type: "registry:ui",
-        target: "switch/Switch.vue"
+        target: ""
       },{
         path: "registry/default/ui/switch/index.ts",
         type: "registry:ui",
-        target: "switch/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
       source: "",
@@ -13503,43 +13503,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/table/Table.vue",
         type: "registry:ui",
-        target: "table/Table.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableBody.vue",
         type: "registry:ui",
-        target: "table/TableBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableCaption.vue",
         type: "registry:ui",
-        target: "table/TableCaption.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableCell.vue",
         type: "registry:ui",
-        target: "table/TableCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableEmpty.vue",
         type: "registry:ui",
-        target: "table/TableEmpty.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableFooter.vue",
         type: "registry:ui",
-        target: "table/TableFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableHead.vue",
         type: "registry:ui",
-        target: "table/TableHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableHeader.vue",
         type: "registry:ui",
-        target: "table/TableHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableRow.vue",
         type: "registry:ui",
-        target: "table/TableRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/index.ts",
         type: "registry:ui",
-        target: "table/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
       source: "",
@@ -13554,23 +13554,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tabs/Tabs.vue",
         type: "registry:ui",
-        target: "tabs/Tabs.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsContent.vue",
         type: "registry:ui",
-        target: "tabs/TabsContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsList.vue",
         type: "registry:ui",
-        target: "tabs/TabsList.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsTrigger.vue",
         type: "registry:ui",
-        target: "tabs/TabsTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/index.ts",
         type: "registry:ui",
-        target: "tabs/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
       source: "",
@@ -13585,27 +13585,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tags-input/TagsInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItem.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItemDelete.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemDelete.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItemText.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemText.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/index.ts",
         type: "registry:ui",
-        target: "tags-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
       source: "",
@@ -13620,11 +13620,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/textarea/Textarea.vue",
         type: "registry:ui",
-        target: "textarea/Textarea.vue"
+        target: ""
       },{
         path: "registry/default/ui/textarea/index.ts",
         type: "registry:ui",
-        target: "textarea/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
       source: "",
@@ -13639,43 +13639,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toast/Toast.vue",
         type: "registry:ui",
-        target: "toast/Toast.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastAction.vue",
         type: "registry:ui",
-        target: "toast/ToastAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastClose.vue",
         type: "registry:ui",
-        target: "toast/ToastClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastDescription.vue",
         type: "registry:ui",
-        target: "toast/ToastDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastProvider.vue",
         type: "registry:ui",
-        target: "toast/ToastProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastTitle.vue",
         type: "registry:ui",
-        target: "toast/ToastTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastViewport.vue",
         type: "registry:ui",
-        target: "toast/ToastViewport.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/Toaster.vue",
         type: "registry:ui",
-        target: "toast/Toaster.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/index.ts",
         type: "registry:ui",
-        target: "toast/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/toast/use-toast.ts",
         type: "registry:ui",
-        target: "toast/use-toast.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
       source: "",
@@ -13690,11 +13690,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toggle/Toggle.vue",
         type: "registry:ui",
-        target: "toggle/Toggle.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle/index.ts",
         type: "registry:ui",
-        target: "toggle/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
       source: "",
@@ -13709,15 +13709,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toggle-group/ToggleGroup.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle-group/ToggleGroupItem.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroupItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle-group/index.ts",
         type: "registry:ui",
-        target: "toggle-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
       source: "",
@@ -13732,23 +13732,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tooltip/Tooltip.vue",
         type: "registry:ui",
-        target: "tooltip/Tooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipContent.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipProvider.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipTrigger.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/index.ts",
         type: "registry:ui",
-        target: "tooltip/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
       source: "",
@@ -13763,11 +13763,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
-        target: "v-calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/v-calendar/index.ts",
         type: "registry:ui",
-        target: "v-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -17575,23 +17575,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/accordion/Accordion.vue",
         type: "registry:ui",
-        target: "accordion/Accordion.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionContent.vue",
         type: "registry:ui",
-        target: "accordion/AccordionContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionItem.vue",
         type: "registry:ui",
-        target: "accordion/AccordionItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/AccordionTrigger.vue",
         type: "registry:ui",
-        target: "accordion/AccordionTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/accordion/index.ts",
         type: "registry:ui",
-        target: "accordion/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
       source: "",
@@ -17606,19 +17606,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/alert/Alert.vue",
         type: "registry:ui",
-        target: "alert/Alert.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/AlertDescription.vue",
         type: "registry:ui",
-        target: "alert/AlertDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/AlertTitle.vue",
         type: "registry:ui",
-        target: "alert/AlertTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert/index.ts",
         type: "registry:ui",
-        target: "alert/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
       source: "",
@@ -17633,43 +17633,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/alert-dialog/AlertDialog.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogAction.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogCancel.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogCancel.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogContent.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogDescription.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogFooter.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogHeader.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogTitle.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/AlertDialogTrigger.vue",
         type: "registry:ui",
-        target: "alert-dialog/AlertDialogTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/alert-dialog/index.ts",
         type: "registry:ui",
-        target: "alert-dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
       source: "",
@@ -17684,11 +17684,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/aspect-ratio/AspectRatio.vue",
         type: "registry:ui",
-        target: "aspect-ratio/AspectRatio.vue"
+        target: ""
       },{
         path: "registry/default/ui/aspect-ratio/index.ts",
         type: "registry:ui",
-        target: "aspect-ratio/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
       source: "",
@@ -17703,67 +17703,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/auto-form/AutoForm.vue",
         type: "registry:ui",
-        target: "auto-form/AutoForm.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormField.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormField.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldArray.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldArray.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldBoolean.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldBoolean.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldDate.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldDate.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldEnum.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldEnum.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldFile.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldFile.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldInput.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldNumber.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldNumber.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormFieldObject.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormFieldObject.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/AutoFormLabel.vue",
         type: "registry:ui",
-        target: "auto-form/AutoFormLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/constant.ts",
         type: "registry:ui",
-        target: "auto-form/constant.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/dependencies.ts",
         type: "registry:ui",
-        target: "auto-form/dependencies.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/index.ts",
         type: "registry:ui",
-        target: "auto-form/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/interface.ts",
         type: "registry:ui",
-        target: "auto-form/interface.ts"
+        target: ""
       },{
         path: "registry/default/ui/auto-form/utils.ts",
         type: "registry:ui",
-        target: "auto-form/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
       source: "",
@@ -17778,19 +17778,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/avatar/Avatar.vue",
         type: "registry:ui",
-        target: "avatar/Avatar.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/AvatarFallback.vue",
         type: "registry:ui",
-        target: "avatar/AvatarFallback.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/AvatarImage.vue",
         type: "registry:ui",
-        target: "avatar/AvatarImage.vue"
+        target: ""
       },{
         path: "registry/default/ui/avatar/index.ts",
         type: "registry:ui",
-        target: "avatar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
       source: "",
@@ -17805,11 +17805,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/badge/Badge.vue",
         type: "registry:ui",
-        target: "badge/Badge.vue"
+        target: ""
       },{
         path: "registry/default/ui/badge/index.ts",
         type: "registry:ui",
-        target: "badge/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
       source: "",
@@ -17824,35 +17824,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/breadcrumb/Breadcrumb.vue",
         type: "registry:ui",
-        target: "breadcrumb/Breadcrumb.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbEllipsis.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbItem.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbLink.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbLink.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbList.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbList.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbPage.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbPage.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/BreadcrumbSeparator.vue",
         type: "registry:ui",
-        target: "breadcrumb/BreadcrumbSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/breadcrumb/index.ts",
         type: "registry:ui",
-        target: "breadcrumb/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
       source: "",
@@ -17867,11 +17867,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/button/Button.vue",
         type: "registry:ui",
-        target: "button/Button.vue"
+        target: ""
       },{
         path: "registry/default/ui/button/index.ts",
         type: "registry:ui",
-        target: "button/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
       source: "",
@@ -17886,55 +17886,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/calendar/Calendar.vue",
         type: "registry:ui",
-        target: "calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "calendar/CalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGrid.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGrid.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridBody.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridHead.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarGridRow.vue",
         type: "registry:ui",
-        target: "calendar/CalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeadCell.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeader.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarHeading.vue",
         type: "registry:ui",
-        target: "calendar/CalendarHeading.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarNextButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/CalendarPrevButton.vue",
         type: "registry:ui",
-        target: "calendar/CalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/calendar/index.ts",
         type: "registry:ui",
-        target: "calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
       source: "",
@@ -17949,31 +17949,31 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/card/Card.vue",
         type: "registry:ui",
-        target: "card/Card.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardContent.vue",
         type: "registry:ui",
-        target: "card/CardContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardDescription.vue",
         type: "registry:ui",
-        target: "card/CardDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardFooter.vue",
         type: "registry:ui",
-        target: "card/CardFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardHeader.vue",
         type: "registry:ui",
-        target: "card/CardHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/CardTitle.vue",
         type: "registry:ui",
-        target: "card/CardTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/card/index.ts",
         type: "registry:ui",
-        target: "card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
       source: "",
@@ -17988,35 +17988,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/carousel/Carousel.vue",
         type: "registry:ui",
-        target: "carousel/Carousel.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselContent.vue",
         type: "registry:ui",
-        target: "carousel/CarouselContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselItem.vue",
         type: "registry:ui",
-        target: "carousel/CarouselItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselNext.vue",
         type: "registry:ui",
-        target: "carousel/CarouselNext.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/CarouselPrevious.vue",
         type: "registry:ui",
-        target: "carousel/CarouselPrevious.vue"
+        target: ""
       },{
         path: "registry/default/ui/carousel/index.ts",
         type: "registry:ui",
-        target: "carousel/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/carousel/interface.ts",
         type: "registry:ui",
-        target: "carousel/interface.ts"
+        target: ""
       },{
         path: "registry/default/ui/carousel/useCarousel.ts",
         type: "registry:ui",
-        target: "carousel/useCarousel.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
       source: "",
@@ -18031,27 +18031,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart/ChartCrosshair.vue",
         type: "registry:ui",
-        target: "chart/ChartCrosshair.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartLegend.vue",
         type: "registry:ui",
-        target: "chart/ChartLegend.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartSingleTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartSingleTooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/ChartTooltip.vue",
         type: "registry:ui",
-        target: "chart/ChartTooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart/index.ts",
         type: "registry:ui",
-        target: "chart/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/chart/interface.ts",
         type: "registry:ui",
-        target: "chart/interface.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
       source: "",
@@ -18066,11 +18066,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-area/AreaChart.vue",
         type: "registry:ui",
-        target: "chart-area/AreaChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-area/index.ts",
         type: "registry:ui",
-        target: "chart-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
       source: "",
@@ -18085,11 +18085,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-bar/BarChart.vue",
         type: "registry:ui",
-        target: "chart-bar/BarChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-bar/index.ts",
         type: "registry:ui",
-        target: "chart-bar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
       source: "",
@@ -18104,11 +18104,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-donut/DonutChart.vue",
         type: "registry:ui",
-        target: "chart-donut/DonutChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-donut/index.ts",
         type: "registry:ui",
-        target: "chart-donut/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
       source: "",
@@ -18123,11 +18123,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/chart-line/LineChart.vue",
         type: "registry:ui",
-        target: "chart-line/LineChart.vue"
+        target: ""
       },{
         path: "registry/default/ui/chart-line/index.ts",
         type: "registry:ui",
-        target: "chart-line/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
       source: "",
@@ -18142,11 +18142,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/checkbox/Checkbox.vue",
         type: "registry:ui",
-        target: "checkbox/Checkbox.vue"
+        target: ""
       },{
         path: "registry/default/ui/checkbox/index.ts",
         type: "registry:ui",
-        target: "checkbox/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
       source: "",
@@ -18161,19 +18161,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/collapsible/Collapsible.vue",
         type: "registry:ui",
-        target: "collapsible/Collapsible.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/CollapsibleContent.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/CollapsibleTrigger.vue",
         type: "registry:ui",
-        target: "collapsible/CollapsibleTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/collapsible/index.ts",
         type: "registry:ui",
-        target: "collapsible/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
       source: "",
@@ -18188,43 +18188,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/command/Command.vue",
         type: "registry:ui",
-        target: "command/Command.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandDialog.vue",
         type: "registry:ui",
-        target: "command/CommandDialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandEmpty.vue",
         type: "registry:ui",
-        target: "command/CommandEmpty.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandGroup.vue",
         type: "registry:ui",
-        target: "command/CommandGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandInput.vue",
         type: "registry:ui",
-        target: "command/CommandInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandItem.vue",
         type: "registry:ui",
-        target: "command/CommandItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandList.vue",
         type: "registry:ui",
-        target: "command/CommandList.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandSeparator.vue",
         type: "registry:ui",
-        target: "command/CommandSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/CommandShortcut.vue",
         type: "registry:ui",
-        target: "command/CommandShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/command/index.ts",
         type: "registry:ui",
-        target: "command/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
       source: "",
@@ -18239,67 +18239,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/context-menu/ContextMenu.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuLabel.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuPortal.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuPortal.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuRadioItem.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSeparator.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuShortcut.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSub.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSubContent.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/ContextMenuTrigger.vue",
         type: "registry:ui",
-        target: "context-menu/ContextMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/context-menu/index.ts",
         type: "registry:ui",
-        target: "context-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
       source: "",
@@ -18314,43 +18314,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/dialog/Dialog.vue",
         type: "registry:ui",
-        target: "dialog/Dialog.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogClose.vue",
         type: "registry:ui",
-        target: "dialog/DialogClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogDescription.vue",
         type: "registry:ui",
-        target: "dialog/DialogDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogFooter.vue",
         type: "registry:ui",
-        target: "dialog/DialogFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogHeader.vue",
         type: "registry:ui",
-        target: "dialog/DialogHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogScrollContent.vue",
         type: "registry:ui",
-        target: "dialog/DialogScrollContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogTitle.vue",
         type: "registry:ui",
-        target: "dialog/DialogTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/DialogTrigger.vue",
         type: "registry:ui",
-        target: "dialog/DialogTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dialog/index.ts",
         type: "registry:ui",
-        target: "dialog/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
       source: "",
@@ -18365,35 +18365,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/drawer/Drawer.vue",
         type: "registry:ui",
-        target: "drawer/Drawer.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerContent.vue",
         type: "registry:ui",
-        target: "drawer/DrawerContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerDescription.vue",
         type: "registry:ui",
-        target: "drawer/DrawerDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerFooter.vue",
         type: "registry:ui",
-        target: "drawer/DrawerFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerHeader.vue",
         type: "registry:ui",
-        target: "drawer/DrawerHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerOverlay.vue",
         type: "registry:ui",
-        target: "drawer/DrawerOverlay.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/DrawerTitle.vue",
         type: "registry:ui",
-        target: "drawer/DrawerTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/drawer/index.ts",
         type: "registry:ui",
-        target: "drawer/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
       source: "",
@@ -18408,63 +18408,63 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/dropdown-menu/DropdownMenu.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuLabel.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSub.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue",
         type: "registry:ui",
-        target: "dropdown-menu/DropdownMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/dropdown-menu/index.ts",
         type: "registry:ui",
-        target: "dropdown-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
       source: "",
@@ -18479,35 +18479,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/form/FormControl.vue",
         type: "registry:ui",
-        target: "form/FormControl.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormDescription.vue",
         type: "registry:ui",
-        target: "form/FormDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormItem.vue",
         type: "registry:ui",
-        target: "form/FormItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormLabel.vue",
         type: "registry:ui",
-        target: "form/FormLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/FormMessage.vue",
         type: "registry:ui",
-        target: "form/FormMessage.vue"
+        target: ""
       },{
         path: "registry/default/ui/form/index.ts",
         type: "registry:ui",
-        target: "form/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/form/injectionKeys.ts",
         type: "registry:ui",
-        target: "form/injectionKeys.ts"
+        target: ""
       },{
         path: "registry/default/ui/form/useFormField.ts",
         type: "registry:ui",
-        target: "form/useFormField.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
       source: "",
@@ -18522,19 +18522,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/hover-card/HoverCard.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCard.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/HoverCardContent.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/HoverCardTrigger.vue",
         type: "registry:ui",
-        target: "hover-card/HoverCardTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/hover-card/index.ts",
         type: "registry:ui",
-        target: "hover-card/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
       source: "",
@@ -18549,11 +18549,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/input/Input.vue",
         type: "registry:ui",
-        target: "input/Input.vue"
+        target: ""
       },{
         path: "registry/default/ui/input/index.ts",
         type: "registry:ui",
-        target: "input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
       source: "",
@@ -18568,11 +18568,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/label/Label.vue",
         type: "registry:ui",
-        target: "label/Label.vue"
+        target: ""
       },{
         path: "registry/default/ui/label/index.ts",
         type: "registry:ui",
-        target: "label/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
       source: "",
@@ -18587,67 +18587,67 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/menubar/Menubar.vue",
         type: "registry:ui",
-        target: "menubar/Menubar.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarCheckboxItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarCheckboxItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarLabel.vue",
         type: "registry:ui",
-        target: "menubar/MenubarLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarMenu.vue",
         type: "registry:ui",
-        target: "menubar/MenubarMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarRadioGroup.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarRadioItem.vue",
         type: "registry:ui",
-        target: "menubar/MenubarRadioItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSeparator.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarShortcut.vue",
         type: "registry:ui",
-        target: "menubar/MenubarShortcut.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSub.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSubContent.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarSubTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarSubTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/MenubarTrigger.vue",
         type: "registry:ui",
-        target: "menubar/MenubarTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/menubar/index.ts",
         type: "registry:ui",
-        target: "menubar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
       source: "",
@@ -18662,39 +18662,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/navigation-menu/NavigationMenu.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuContent.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuIndicator.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuIndicator.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuItem.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuLink.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuLink.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuList.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuList.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuTrigger.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/NavigationMenuViewport.vue",
         type: "registry:ui",
-        target: "navigation-menu/NavigationMenuViewport.vue"
+        target: ""
       },{
         path: "registry/default/ui/navigation-menu/index.ts",
         type: "registry:ui",
-        target: "navigation-menu/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
       source: "",
@@ -18709,27 +18709,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/number-field/NumberField.vue",
         type: "registry:ui",
-        target: "number-field/NumberField.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldContent.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldDecrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldDecrement.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldIncrement.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldIncrement.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/NumberFieldInput.vue",
         type: "registry:ui",
-        target: "number-field/NumberFieldInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/number-field/index.ts",
         type: "registry:ui",
-        target: "number-field/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
       source: "",
@@ -18744,27 +18744,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/pagination/PaginationEllipsis.vue",
         type: "registry:ui",
-        target: "pagination/PaginationEllipsis.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationFirst.vue",
         type: "registry:ui",
-        target: "pagination/PaginationFirst.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationLast.vue",
         type: "registry:ui",
-        target: "pagination/PaginationLast.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationNext.vue",
         type: "registry:ui",
-        target: "pagination/PaginationNext.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/PaginationPrev.vue",
         type: "registry:ui",
-        target: "pagination/PaginationPrev.vue"
+        target: ""
       },{
         path: "registry/default/ui/pagination/index.ts",
         type: "registry:ui",
-        target: "pagination/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
       source: "",
@@ -18779,23 +18779,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/pin-input/PinInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputGroup.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputInput.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/PinInputSeparator.vue",
         type: "registry:ui",
-        target: "pin-input/PinInputSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/pin-input/index.ts",
         type: "registry:ui",
-        target: "pin-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
       source: "",
@@ -18810,19 +18810,19 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/popover/Popover.vue",
         type: "registry:ui",
-        target: "popover/Popover.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/PopoverContent.vue",
         type: "registry:ui",
-        target: "popover/PopoverContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/PopoverTrigger.vue",
         type: "registry:ui",
-        target: "popover/PopoverTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/popover/index.ts",
         type: "registry:ui",
-        target: "popover/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
       source: "",
@@ -18837,11 +18837,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/progress/Progress.vue",
         type: "registry:ui",
-        target: "progress/Progress.vue"
+        target: ""
       },{
         path: "registry/default/ui/progress/index.ts",
         type: "registry:ui",
-        target: "progress/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
       source: "",
@@ -18856,15 +18856,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/radio-group/RadioGroup.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/radio-group/RadioGroupItem.vue",
         type: "registry:ui",
-        target: "radio-group/RadioGroupItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/radio-group/index.ts",
         type: "registry:ui",
-        target: "radio-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
       source: "",
@@ -18879,55 +18879,55 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/range-calendar/RangeCalendar.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarCellTrigger.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarCellTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGrid.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGrid.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridBody.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridHead.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarGridRow.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarGridRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeadCell.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeadCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeader.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarHeading.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarHeading.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarNextButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarNextButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/RangeCalendarPrevButton.vue",
         type: "registry:ui",
-        target: "range-calendar/RangeCalendarPrevButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/range-calendar/index.ts",
         type: "registry:ui",
-        target: "range-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
       source: "",
@@ -18942,15 +18942,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/resizable/ResizableHandle.vue",
         type: "registry:ui",
-        target: "resizable/ResizableHandle.vue"
+        target: ""
       },{
         path: "registry/default/ui/resizable/ResizablePanelGroup.vue",
         type: "registry:ui",
-        target: "resizable/ResizablePanelGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/resizable/index.ts",
         type: "registry:ui",
-        target: "resizable/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
       source: "",
@@ -18965,15 +18965,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/scroll-area/ScrollArea.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollArea.vue"
+        target: ""
       },{
         path: "registry/default/ui/scroll-area/ScrollBar.vue",
         type: "registry:ui",
-        target: "scroll-area/ScrollBar.vue"
+        target: ""
       },{
         path: "registry/default/ui/scroll-area/index.ts",
         type: "registry:ui",
-        target: "scroll-area/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
       source: "",
@@ -18988,51 +18988,51 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/select/Select.vue",
         type: "registry:ui",
-        target: "select/Select.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectContent.vue",
         type: "registry:ui",
-        target: "select/SelectContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectGroup.vue",
         type: "registry:ui",
-        target: "select/SelectGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectItem.vue",
         type: "registry:ui",
-        target: "select/SelectItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectItemText.vue",
         type: "registry:ui",
-        target: "select/SelectItemText.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectLabel.vue",
         type: "registry:ui",
-        target: "select/SelectLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectScrollDownButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollDownButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectScrollUpButton.vue",
         type: "registry:ui",
-        target: "select/SelectScrollUpButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectSeparator.vue",
         type: "registry:ui",
-        target: "select/SelectSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectTrigger.vue",
         type: "registry:ui",
-        target: "select/SelectTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/SelectValue.vue",
         type: "registry:ui",
-        target: "select/SelectValue.vue"
+        target: ""
       },{
         path: "registry/default/ui/select/index.ts",
         type: "registry:ui",
-        target: "select/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
       source: "",
@@ -19047,11 +19047,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/separator/Separator.vue",
         type: "registry:ui",
-        target: "separator/Separator.vue"
+        target: ""
       },{
         path: "registry/default/ui/separator/index.ts",
         type: "registry:ui",
-        target: "separator/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
       source: "",
@@ -19066,39 +19066,39 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sheet/Sheet.vue",
         type: "registry:ui",
-        target: "sheet/Sheet.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetClose.vue",
         type: "registry:ui",
-        target: "sheet/SheetClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetContent.vue",
         type: "registry:ui",
-        target: "sheet/SheetContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetDescription.vue",
         type: "registry:ui",
-        target: "sheet/SheetDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetFooter.vue",
         type: "registry:ui",
-        target: "sheet/SheetFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetHeader.vue",
         type: "registry:ui",
-        target: "sheet/SheetHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetTitle.vue",
         type: "registry:ui",
-        target: "sheet/SheetTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/SheetTrigger.vue",
         type: "registry:ui",
-        target: "sheet/SheetTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/sheet/index.ts",
         type: "registry:ui",
-        target: "sheet/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
       source: "",
@@ -19113,107 +19113,107 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sidebar/Sidebar.vue",
         type: "registry:ui",
-        target: "sidebar/Sidebar.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarFooter.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroup.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupContent.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarGroupLabel.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarGroupLabel.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarHeader.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarInput.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarInset.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarInset.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenu.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenu.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuAction.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuBadge.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuBadge.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuButtonChild.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuButtonChild.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSkeleton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSkeleton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSub.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSub.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSubButton.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubButton.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarMenuSubItem.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarMenuSubItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarProvider.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarRail.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarRail.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarSeparator.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/SidebarTrigger.vue",
         type: "registry:ui",
-        target: "sidebar/SidebarTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/index.ts",
         type: "registry:ui",
-        target: "sidebar/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/sidebar/utils.ts",
         type: "registry:ui",
-        target: "sidebar/utils.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
       source: "",
@@ -19228,11 +19228,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/skeleton/Skeleton.vue",
         type: "registry:ui",
-        target: "skeleton/Skeleton.vue"
+        target: ""
       },{
         path: "registry/default/ui/skeleton/index.ts",
         type: "registry:ui",
-        target: "skeleton/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
       source: "",
@@ -19247,11 +19247,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/slider/Slider.vue",
         type: "registry:ui",
-        target: "slider/Slider.vue"
+        target: ""
       },{
         path: "registry/default/ui/slider/index.ts",
         type: "registry:ui",
-        target: "slider/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
       source: "",
@@ -19266,11 +19266,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/sonner/Sonner.vue",
         type: "registry:ui",
-        target: "sonner/Sonner.vue"
+        target: ""
       },{
         path: "registry/default/ui/sonner/index.ts",
         type: "registry:ui",
-        target: "sonner/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
       source: "",
@@ -19285,35 +19285,35 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/stepper/Stepper.vue",
         type: "registry:ui",
-        target: "stepper/Stepper.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperDescription.vue",
         type: "registry:ui",
-        target: "stepper/StepperDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperIndicator.vue",
         type: "registry:ui",
-        target: "stepper/StepperIndicator.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperItem.vue",
         type: "registry:ui",
-        target: "stepper/StepperItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperSeparator.vue",
         type: "registry:ui",
-        target: "stepper/StepperSeparator.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperTitle.vue",
         type: "registry:ui",
-        target: "stepper/StepperTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/StepperTrigger.vue",
         type: "registry:ui",
-        target: "stepper/StepperTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/stepper/index.ts",
         type: "registry:ui",
-        target: "stepper/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
       source: "",
@@ -19328,11 +19328,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/switch/Switch.vue",
         type: "registry:ui",
-        target: "switch/Switch.vue"
+        target: ""
       },{
         path: "registry/default/ui/switch/index.ts",
         type: "registry:ui",
-        target: "switch/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
       source: "",
@@ -19347,43 +19347,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/table/Table.vue",
         type: "registry:ui",
-        target: "table/Table.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableBody.vue",
         type: "registry:ui",
-        target: "table/TableBody.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableCaption.vue",
         type: "registry:ui",
-        target: "table/TableCaption.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableCell.vue",
         type: "registry:ui",
-        target: "table/TableCell.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableEmpty.vue",
         type: "registry:ui",
-        target: "table/TableEmpty.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableFooter.vue",
         type: "registry:ui",
-        target: "table/TableFooter.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableHead.vue",
         type: "registry:ui",
-        target: "table/TableHead.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableHeader.vue",
         type: "registry:ui",
-        target: "table/TableHeader.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/TableRow.vue",
         type: "registry:ui",
-        target: "table/TableRow.vue"
+        target: ""
       },{
         path: "registry/default/ui/table/index.ts",
         type: "registry:ui",
-        target: "table/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
       source: "",
@@ -19398,23 +19398,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tabs/Tabs.vue",
         type: "registry:ui",
-        target: "tabs/Tabs.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsContent.vue",
         type: "registry:ui",
-        target: "tabs/TabsContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsList.vue",
         type: "registry:ui",
-        target: "tabs/TabsList.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/TabsTrigger.vue",
         type: "registry:ui",
-        target: "tabs/TabsTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/tabs/index.ts",
         type: "registry:ui",
-        target: "tabs/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
       source: "",
@@ -19429,27 +19429,27 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tags-input/TagsInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputInput.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputInput.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItem.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItemDelete.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemDelete.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/TagsInputItemText.vue",
         type: "registry:ui",
-        target: "tags-input/TagsInputItemText.vue"
+        target: ""
       },{
         path: "registry/default/ui/tags-input/index.ts",
         type: "registry:ui",
-        target: "tags-input/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
       source: "",
@@ -19464,11 +19464,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/textarea/Textarea.vue",
         type: "registry:ui",
-        target: "textarea/Textarea.vue"
+        target: ""
       },{
         path: "registry/default/ui/textarea/index.ts",
         type: "registry:ui",
-        target: "textarea/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
       source: "",
@@ -19483,43 +19483,43 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toast/Toast.vue",
         type: "registry:ui",
-        target: "toast/Toast.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastAction.vue",
         type: "registry:ui",
-        target: "toast/ToastAction.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastClose.vue",
         type: "registry:ui",
-        target: "toast/ToastClose.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastDescription.vue",
         type: "registry:ui",
-        target: "toast/ToastDescription.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastProvider.vue",
         type: "registry:ui",
-        target: "toast/ToastProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastTitle.vue",
         type: "registry:ui",
-        target: "toast/ToastTitle.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/ToastViewport.vue",
         type: "registry:ui",
-        target: "toast/ToastViewport.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/Toaster.vue",
         type: "registry:ui",
-        target: "toast/Toaster.vue"
+        target: ""
       },{
         path: "registry/default/ui/toast/index.ts",
         type: "registry:ui",
-        target: "toast/index.ts"
+        target: ""
       },{
         path: "registry/default/ui/toast/use-toast.ts",
         type: "registry:ui",
-        target: "toast/use-toast.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
       source: "",
@@ -19534,11 +19534,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toggle/Toggle.vue",
         type: "registry:ui",
-        target: "toggle/Toggle.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle/index.ts",
         type: "registry:ui",
-        target: "toggle/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
       source: "",
@@ -19553,15 +19553,15 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/toggle-group/ToggleGroup.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroup.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle-group/ToggleGroupItem.vue",
         type: "registry:ui",
-        target: "toggle-group/ToggleGroupItem.vue"
+        target: ""
       },{
         path: "registry/default/ui/toggle-group/index.ts",
         type: "registry:ui",
-        target: "toggle-group/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
       source: "",
@@ -19576,23 +19576,23 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/tooltip/Tooltip.vue",
         type: "registry:ui",
-        target: "tooltip/Tooltip.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipContent.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipContent.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipProvider.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipProvider.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/TooltipTrigger.vue",
         type: "registry:ui",
-        target: "tooltip/TooltipTrigger.vue"
+        target: ""
       },{
         path: "registry/default/ui/tooltip/index.ts",
         type: "registry:ui",
-        target: "tooltip/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
       source: "",
@@ -19607,11 +19607,11 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/ui/v-calendar/Calendar.vue",
         type: "registry:ui",
-        target: "v-calendar/Calendar.vue"
+        target: ""
       },{
         path: "registry/default/ui/v-calendar/index.ts",
         type: "registry:ui",
-        target: "v-calendar/index.ts"
+        target: ""
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
       source: "",
diff --git a/apps/www/src/public/r/styles/default/accordion.json b/apps/www/src/public/r/styles/default/accordion.json
index 08dd71528..e0f5e2ff2 100644
--- a/apps/www/src/public/r/styles/default/accordion.json
+++ b/apps/www/src/public/r/styles/default/accordion.json
@@ -10,31 +10,31 @@
       "path": "ui/accordion/Accordion.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/Accordion.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionContent.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionItem.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/index.ts",
       "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "accordion/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/alert-dialog.json b/apps/www/src/public/r/styles/default/alert-dialog.json
index fc87d419f..18908cef9 100644
--- a/apps/www/src/public/r/styles/default/alert-dialog.json
+++ b/apps/www/src/public/r/styles/default/alert-dialog.json
@@ -11,61 +11,61 @@
       "path": "ui/alert-dialog/AlertDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialog.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogAction.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogCancel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogCancel.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogContent.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/index.ts",
       "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "alert-dialog/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/alert.json b/apps/www/src/public/r/styles/default/alert.json
index c3d581e0e..3bd7b0017 100644
--- a/apps/www/src/public/r/styles/default/alert.json
+++ b/apps/www/src/public/r/styles/default/alert.json
@@ -10,25 +10,25 @@
       "path": "ui/alert/Alert.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/Alert.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/AlertDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/AlertDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/AlertTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/AlertTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
       "type": "registry:ui",
-      "target": "alert/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/aspect-ratio.json b/apps/www/src/public/r/styles/default/aspect-ratio.json
index 97080b06e..c579b3ec2 100644
--- a/apps/www/src/public/r/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/default/aspect-ratio.json
@@ -8,13 +8,13 @@
       "path": "ui/aspect-ratio/AspectRatio.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
       "type": "registry:ui",
-      "target": "aspect-ratio/AspectRatio.vue"
+      "target": ""
     },
     {
       "path": "ui/aspect-ratio/index.ts",
       "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
       "type": "registry:ui",
-      "target": "aspect-ratio/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/auto-form.json b/apps/www/src/public/r/styles/default/auto-form.json
index dbf096b39..cb5f7276a 100644
--- a/apps/www/src/public/r/styles/default/auto-form.json
+++ b/apps/www/src/public/r/styles/default/auto-form.json
@@ -27,97 +27,97 @@
       "path": "ui/auto-form/AutoForm.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoForm.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormField.vue",
       "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormField.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldArray.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldArray.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldBoolean.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldBoolean.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldDate.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldEnum.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldEnum.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldFile.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldFile.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldInput.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldNumber.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldNumber.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldObject.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldObject.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/constant.ts",
       "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/constant.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/dependencies.ts",
       "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/dependencies.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/index.ts",
       "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
       "type": "registry:ui",
-      "target": "auto-form/index.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/interface.ts",
       "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
       "type": "registry:ui",
-      "target": "auto-form/interface.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/utils.ts",
       "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/utils.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/avatar.json b/apps/www/src/public/r/styles/default/avatar.json
index 454a63643..a779e8509 100644
--- a/apps/www/src/public/r/styles/default/avatar.json
+++ b/apps/www/src/public/r/styles/default/avatar.json
@@ -10,25 +10,25 @@
       "path": "ui/avatar/Avatar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/Avatar.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/AvatarFallback.vue",
       "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/AvatarFallback.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/AvatarImage.vue",
       "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/AvatarImage.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
       "type": "registry:ui",
-      "target": "avatar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/badge.json b/apps/www/src/public/r/styles/default/badge.json
index 28c2597b4..700b3314c 100644
--- a/apps/www/src/public/r/styles/default/badge.json
+++ b/apps/www/src/public/r/styles/default/badge.json
@@ -10,13 +10,13 @@
       "path": "ui/badge/Badge.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "badge/Badge.vue"
+      "target": ""
     },
     {
       "path": "ui/badge/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
       "type": "registry:ui",
-      "target": "badge/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/breadcrumb.json b/apps/www/src/public/r/styles/default/breadcrumb.json
index 0807b031b..584c016a7 100644
--- a/apps/www/src/public/r/styles/default/breadcrumb.json
+++ b/apps/www/src/public/r/styles/default/breadcrumb.json
@@ -10,49 +10,49 @@
       "path": "ui/breadcrumb/Breadcrumb.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/Breadcrumb.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbItem.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbLink.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbLink.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbList.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbList.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbPage.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbPage.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/index.ts",
       "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
       "type": "registry:ui",
-      "target": "breadcrumb/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/button.json b/apps/www/src/public/r/styles/default/button.json
index 5e4dad92a..29008e758 100644
--- a/apps/www/src/public/r/styles/default/button.json
+++ b/apps/www/src/public/r/styles/default/button.json
@@ -10,13 +10,13 @@
       "path": "ui/button/Button.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "button/Button.vue"
+      "target": ""
     },
     {
       "path": "ui/button/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
       "type": "registry:ui",
-      "target": "button/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/calendar.json b/apps/www/src/public/r/styles/default/calendar.json
index b1baaec3f..8fc29689b 100644
--- a/apps/www/src/public/r/styles/default/calendar.json
+++ b/apps/www/src/public/r/styles/default/calendar.json
@@ -11,79 +11,79 @@
       "path": "ui/calendar/Calendar.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/Calendar.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarCell.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarCellTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarCellTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGrid.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGrid.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridBody.vue",
       "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridBody.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridHead.vue",
       "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridHead.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridRow.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridRow.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeadCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeadCell.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeading.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeading.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarNextButton.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarPrevButton.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/index.ts",
       "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
       "type": "registry:ui",
-      "target": "calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/card.json b/apps/www/src/public/r/styles/default/card.json
index 0ad806880..f7b594bd2 100644
--- a/apps/www/src/public/r/styles/default/card.json
+++ b/apps/www/src/public/r/styles/default/card.json
@@ -10,43 +10,43 @@
       "path": "ui/card/Card.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/Card.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardContent.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/card/index.ts",
       "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
       "type": "registry:ui",
-      "target": "card/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/carousel.json b/apps/www/src/public/r/styles/default/carousel.json
index 1631d6e79..8529ebcf8 100644
--- a/apps/www/src/public/r/styles/default/carousel.json
+++ b/apps/www/src/public/r/styles/default/carousel.json
@@ -14,49 +14,49 @@
       "path": "ui/carousel/Carousel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/Carousel.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselContent.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselItem.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselNext.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselPrevious.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/index.ts",
       "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
       "type": "registry:ui",
-      "target": "carousel/index.ts"
+      "target": ""
     },
     {
       "path": "ui/carousel/interface.ts",
       "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
       "type": "registry:ui",
-      "target": "carousel/interface.ts"
+      "target": ""
     },
     {
       "path": "ui/carousel/useCarousel.ts",
       "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
       "type": "registry:ui",
-      "target": "carousel/useCarousel.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/chart-area.json b/apps/www/src/public/r/styles/default/chart-area.json
index 54bd968fe..75d29d80f 100644
--- a/apps/www/src/public/r/styles/default/chart-area.json
+++ b/apps/www/src/public/r/styles/default/chart-area.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-area/AreaChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-area/AreaChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-area/index.ts",
       "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-area/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/chart-bar.json b/apps/www/src/public/r/styles/default/chart-bar.json
index 49208bd31..66a591eb2 100644
--- a/apps/www/src/public/r/styles/default/chart-bar.json
+++ b/apps/www/src/public/r/styles/default/chart-bar.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-bar/BarChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-bar/BarChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-bar/index.ts",
       "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-bar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/chart-donut.json b/apps/www/src/public/r/styles/default/chart-donut.json
index cfe68abf8..cb2d72020 100644
--- a/apps/www/src/public/r/styles/default/chart-donut.json
+++ b/apps/www/src/public/r/styles/default/chart-donut.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-donut/DonutChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-donut/DonutChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-donut/index.ts",
       "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-donut/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/chart-line.json b/apps/www/src/public/r/styles/default/chart-line.json
index 8047ed988..ef39d562e 100644
--- a/apps/www/src/public/r/styles/default/chart-line.json
+++ b/apps/www/src/public/r/styles/default/chart-line.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-line/LineChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-line/LineChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-line/index.ts",
       "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-line/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/chart.json b/apps/www/src/public/r/styles/default/chart.json
index 3b6fb98cd..991dc7d75 100644
--- a/apps/www/src/public/r/styles/default/chart.json
+++ b/apps/www/src/public/r/styles/default/chart.json
@@ -14,37 +14,37 @@
       "path": "ui/chart/ChartCrosshair.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartCrosshair.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartLegend.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartLegend.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartSingleTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartSingleTooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartTooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/index.ts",
       "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
       "type": "registry:ui",
-      "target": "chart/index.ts"
+      "target": ""
     },
     {
       "path": "ui/chart/interface.ts",
       "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart/interface.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/checkbox.json b/apps/www/src/public/r/styles/default/checkbox.json
index aa676ea91..af760208a 100644
--- a/apps/www/src/public/r/styles/default/checkbox.json
+++ b/apps/www/src/public/r/styles/default/checkbox.json
@@ -10,13 +10,13 @@
       "path": "ui/checkbox/Checkbox.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "checkbox/Checkbox.vue"
+      "target": ""
     },
     {
       "path": "ui/checkbox/index.ts",
       "content": "export { default as Checkbox } from './Checkbox.vue'\n",
       "type": "registry:ui",
-      "target": "checkbox/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/collapsible.json b/apps/www/src/public/r/styles/default/collapsible.json
index 43003ad3c..d6336bf4f 100644
--- a/apps/www/src/public/r/styles/default/collapsible.json
+++ b/apps/www/src/public/r/styles/default/collapsible.json
@@ -8,25 +8,25 @@
       "path": "ui/collapsible/Collapsible.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/Collapsible.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/CollapsibleContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/CollapsibleContent.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/CollapsibleTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/CollapsibleTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/index.ts",
       "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "collapsible/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/command.json b/apps/www/src/public/r/styles/default/command.json
index 664656cb0..e4a8b3569 100644
--- a/apps/www/src/public/r/styles/default/command.json
+++ b/apps/www/src/public/r/styles/default/command.json
@@ -11,61 +11,61 @@
       "path": "ui/command/Command.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/Command.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandDialog.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandEmpty.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandEmpty.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandInput.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandItem.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandList.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandList.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/command/index.ts",
       "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
       "type": "registry:ui",
-      "target": "command/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/context-menu.json b/apps/www/src/public/r/styles/default/context-menu.json
index a06ceed07..4641dec64 100644
--- a/apps/www/src/public/r/styles/default/context-menu.json
+++ b/apps/www/src/public/r/styles/default/context-menu.json
@@ -10,97 +10,97 @@
       "path": "ui/context-menu/ContextMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuPortal.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuPortal.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/index.ts",
       "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "context-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/dialog.json b/apps/www/src/public/r/styles/default/dialog.json
index dbeb74f3a..ec4336934 100644
--- a/apps/www/src/public/r/styles/default/dialog.json
+++ b/apps/www/src/public/r/styles/default/dialog.json
@@ -10,61 +10,61 @@
       "path": "ui/dialog/Dialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/Dialog.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogClose.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogScrollContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogScrollContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/index.ts",
       "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "dialog/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/drawer.json b/apps/www/src/public/r/styles/default/drawer.json
index 31faeb6e3..33bc4910f 100644
--- a/apps/www/src/public/r/styles/default/drawer.json
+++ b/apps/www/src/public/r/styles/default/drawer.json
@@ -12,49 +12,49 @@
       "path": "ui/drawer/Drawer.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/Drawer.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerContent.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerContent.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerFooter.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerOverlay.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerOverlay.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerTitle.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/index.ts",
       "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
       "type": "registry:ui",
-      "target": "drawer/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/dropdown-menu.json b/apps/www/src/public/r/styles/default/dropdown-menu.json
index 51ba28ecf..92805cac8 100644
--- a/apps/www/src/public/r/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/default/dropdown-menu.json
@@ -10,91 +10,91 @@
       "path": "ui/dropdown-menu/DropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/index.ts",
       "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/form.json b/apps/www/src/public/r/styles/default/form.json
index b948dcf13..6c8aaf2c1 100644
--- a/apps/www/src/public/r/styles/default/form.json
+++ b/apps/www/src/public/r/styles/default/form.json
@@ -15,49 +15,49 @@
       "path": "ui/form/FormControl.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormControl.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormItem.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormLabel.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/default/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormMessage.vue",
       "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormMessage.vue"
+      "target": ""
     },
     {
       "path": "ui/form/index.ts",
       "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
       "type": "registry:ui",
-      "target": "form/index.ts"
+      "target": ""
     },
     {
       "path": "ui/form/injectionKeys.ts",
       "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
       "type": "registry:ui",
-      "target": "form/injectionKeys.ts"
+      "target": ""
     },
     {
       "path": "ui/form/useFormField.ts",
       "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
       "type": "registry:ui",
-      "target": "form/useFormField.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/hover-card.json b/apps/www/src/public/r/styles/default/hover-card.json
index 90eda7444..f41248ba0 100644
--- a/apps/www/src/public/r/styles/default/hover-card.json
+++ b/apps/www/src/public/r/styles/default/hover-card.json
@@ -10,25 +10,25 @@
       "path": "ui/hover-card/HoverCard.vue",
       "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCard.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/HoverCardContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCardContent.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/HoverCardTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCardTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/index.ts",
       "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "hover-card/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/input.json b/apps/www/src/public/r/styles/default/input.json
index 5c69b4886..c2de8a006 100644
--- a/apps/www/src/public/r/styles/default/input.json
+++ b/apps/www/src/public/r/styles/default/input.json
@@ -12,13 +12,13 @@
       "path": "ui/input/Input.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
       "type": "registry:ui",
-      "target": "input/Input.vue"
+      "target": ""
     },
     {
       "path": "ui/input/index.ts",
       "content": "export { default as Input } from './Input.vue'\n",
       "type": "registry:ui",
-      "target": "input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/label.json b/apps/www/src/public/r/styles/default/label.json
index 839718f1f..5c8db8412 100644
--- a/apps/www/src/public/r/styles/default/label.json
+++ b/apps/www/src/public/r/styles/default/label.json
@@ -10,13 +10,13 @@
       "path": "ui/label/Label.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
-      "target": "label/Label.vue"
+      "target": ""
     },
     {
       "path": "ui/label/index.ts",
       "content": "export { default as Label } from './Label.vue'\n",
       "type": "registry:ui",
-      "target": "label/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/menubar.json b/apps/www/src/public/r/styles/default/menubar.json
index 9d550a1f9..f60c35324 100644
--- a/apps/www/src/public/r/styles/default/menubar.json
+++ b/apps/www/src/public/r/styles/default/menubar.json
@@ -10,97 +10,97 @@
       "path": "ui/menubar/Menubar.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/Menubar.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarContent.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSub.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSub.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/index.ts",
       "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "menubar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/navigation-menu.json b/apps/www/src/public/r/styles/default/navigation-menu.json
index 3d7ea69ca..8784ea948 100644
--- a/apps/www/src/public/r/styles/default/navigation-menu.json
+++ b/apps/www/src/public/r/styles/default/navigation-menu.json
@@ -10,55 +10,55 @@
       "path": "ui/navigation-menu/NavigationMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuIndicator.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuLink.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuLink.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuList.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuList.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuViewport.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuViewport.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/index.ts",
       "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
       "type": "registry:ui",
-      "target": "navigation-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/number-field.json b/apps/www/src/public/r/styles/default/number-field.json
index 0413588a3..346656783 100644
--- a/apps/www/src/public/r/styles/default/number-field.json
+++ b/apps/www/src/public/r/styles/default/number-field.json
@@ -10,37 +10,37 @@
       "path": "ui/number-field/NumberField.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberField.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldContent.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldDecrement.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldDecrement.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldIncrement.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldIncrement.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldInput.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/index.ts",
       "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
       "type": "registry:ui",
-      "target": "number-field/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/pagination.json b/apps/www/src/public/r/styles/default/pagination.json
index 43cd31373..89d49f10e 100644
--- a/apps/www/src/public/r/styles/default/pagination.json
+++ b/apps/www/src/public/r/styles/default/pagination.json
@@ -11,37 +11,37 @@
       "path": "ui/pagination/PaginationEllipsis.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationEllipsis.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationFirst.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationLast.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationNext.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationPrev.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/index.ts",
       "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "pagination/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/pin-input.json b/apps/www/src/public/r/styles/default/pin-input.json
index 880e4d534..3c524f5f4 100644
--- a/apps/www/src/public/r/styles/default/pin-input.json
+++ b/apps/www/src/public/r/styles/default/pin-input.json
@@ -10,31 +10,31 @@
       "path": "ui/pin-input/PinInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInput.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputInput.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/index.ts",
       "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
       "type": "registry:ui",
-      "target": "pin-input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/popover.json b/apps/www/src/public/r/styles/default/popover.json
index e38b8ce56..c07b45977 100644
--- a/apps/www/src/public/r/styles/default/popover.json
+++ b/apps/www/src/public/r/styles/default/popover.json
@@ -10,25 +10,25 @@
       "path": "ui/popover/Popover.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/Popover.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/PopoverContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/PopoverContent.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/PopoverTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/PopoverTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/index.ts",
       "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "popover/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/progress.json b/apps/www/src/public/r/styles/default/progress.json
index 4d52d771a..f5c3b9725 100644
--- a/apps/www/src/public/r/styles/default/progress.json
+++ b/apps/www/src/public/r/styles/default/progress.json
@@ -10,13 +10,13 @@
       "path": "ui/progress/Progress.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "progress/Progress.vue"
+      "target": ""
     },
     {
       "path": "ui/progress/index.ts",
       "content": "export { default as Progress } from './Progress.vue'\n",
       "type": "registry:ui",
-      "target": "progress/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/radio-group.json b/apps/www/src/public/r/styles/default/radio-group.json
index a64552baa..2a22ee486 100644
--- a/apps/www/src/public/r/styles/default/radio-group.json
+++ b/apps/www/src/public/r/styles/default/radio-group.json
@@ -10,19 +10,19 @@
       "path": "ui/radio-group/RadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "radio-group/RadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/radio-group/RadioGroupItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "radio-group/RadioGroupItem.vue"
+      "target": ""
     },
     {
       "path": "ui/radio-group/index.ts",
       "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
       "type": "registry:ui",
-      "target": "radio-group/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/range-calendar.json b/apps/www/src/public/r/styles/default/range-calendar.json
index 88bf8e25f..3679a9538 100644
--- a/apps/www/src/public/r/styles/default/range-calendar.json
+++ b/apps/www/src/public/r/styles/default/range-calendar.json
@@ -11,79 +11,79 @@
       "path": "ui/range-calendar/RangeCalendar.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendar.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarCell.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGrid.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGrid.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridBody.vue",
       "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridBody.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridHead.vue",
       "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridHead.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridRow.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridRow.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeadCell.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeading.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeading.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarNextButton.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarPrevButton.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/index.ts",
       "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
       "type": "registry:ui",
-      "target": "range-calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/resizable.json b/apps/www/src/public/r/styles/default/resizable.json
index 6b165949f..4b94744e1 100644
--- a/apps/www/src/public/r/styles/default/resizable.json
+++ b/apps/www/src/public/r/styles/default/resizable.json
@@ -10,19 +10,19 @@
       "path": "ui/resizable/ResizableHandle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
       "type": "registry:ui",
-      "target": "resizable/ResizableHandle.vue"
+      "target": ""
     },
     {
       "path": "ui/resizable/ResizablePanelGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "resizable/ResizablePanelGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/resizable/index.ts",
       "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "resizable/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/scroll-area.json b/apps/www/src/public/r/styles/default/scroll-area.json
index f3cbbe4b7..f5fe2cc7f 100644
--- a/apps/www/src/public/r/styles/default/scroll-area.json
+++ b/apps/www/src/public/r/styles/default/scroll-area.json
@@ -10,19 +10,19 @@
       "path": "ui/scroll-area/ScrollArea.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "scroll-area/ScrollArea.vue"
+      "target": ""
     },
     {
       "path": "ui/scroll-area/ScrollBar.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
       "type": "registry:ui",
-      "target": "scroll-area/ScrollBar.vue"
+      "target": ""
     },
     {
       "path": "ui/scroll-area/index.ts",
       "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
       "type": "registry:ui",
-      "target": "scroll-area/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/select.json b/apps/www/src/public/r/styles/default/select.json
index 88f02a6f0..fdf551cec 100644
--- a/apps/www/src/public/r/styles/default/select.json
+++ b/apps/www/src/public/r/styles/default/select.json
@@ -10,73 +10,73 @@
       "path": "ui/select/Select.vue",
       "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/Select.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectContent.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectItem.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectItemText.vue",
       "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectItemText.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectScrollDownButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectScrollDownButton.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectScrollUpButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectScrollUpButton.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectValue.vue",
       "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectValue.vue"
+      "target": ""
     },
     {
       "path": "ui/select/index.ts",
       "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
       "type": "registry:ui",
-      "target": "select/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/separator.json b/apps/www/src/public/r/styles/default/separator.json
index bc1e11aa5..d3314e647 100644
--- a/apps/www/src/public/r/styles/default/separator.json
+++ b/apps/www/src/public/r/styles/default/separator.json
@@ -10,13 +10,13 @@
       "path": "ui/separator/Separator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
       "type": "registry:ui",
-      "target": "separator/Separator.vue"
+      "target": ""
     },
     {
       "path": "ui/separator/index.ts",
       "content": "export { default as Separator } from './Separator.vue'\n",
       "type": "registry:ui",
-      "target": "separator/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/sheet.json b/apps/www/src/public/r/styles/default/sheet.json
index ed21bc795..3f28ddba9 100644
--- a/apps/www/src/public/r/styles/default/sheet.json
+++ b/apps/www/src/public/r/styles/default/sheet.json
@@ -10,55 +10,55 @@
       "path": "ui/sheet/Sheet.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/Sheet.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetClose.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
       "type": "registry:ui",
-      "target": "sheet/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index 885fed126..ca98cba28 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -18,157 +18,157 @@
       "path": "ui/sidebar/Sidebar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/Sidebar.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupAction.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupAction.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarInput.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarInset.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarInset.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuAction.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuAction.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuBadge.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuBadge.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuButton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuButtonChild.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuButtonChild.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSkeleton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSubButton.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSubButton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSubItem.vue",
       "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSubItem.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarRail.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarRail.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/index.ts",
       "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
-      "target": "sidebar/index.ts"
+      "target": ""
     },
     {
       "path": "ui/sidebar/utils.ts",
       "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
       "type": "registry:ui",
-      "target": "sidebar/utils.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/skeleton.json b/apps/www/src/public/r/styles/default/skeleton.json
index abf64aef3..f3b9960e1 100644
--- a/apps/www/src/public/r/styles/default/skeleton.json
+++ b/apps/www/src/public/r/styles/default/skeleton.json
@@ -10,13 +10,13 @@
       "path": "ui/skeleton/Skeleton.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "skeleton/Skeleton.vue"
+      "target": ""
     },
     {
       "path": "ui/skeleton/index.ts",
       "content": "export { default as Skeleton } from './Skeleton.vue'\n",
       "type": "registry:ui",
-      "target": "skeleton/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/slider.json b/apps/www/src/public/r/styles/default/slider.json
index 0201c0191..4c8901c35 100644
--- a/apps/www/src/public/r/styles/default/slider.json
+++ b/apps/www/src/public/r/styles/default/slider.json
@@ -10,13 +10,13 @@
       "path": "ui/slider/Slider.vue",
       "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "slider/Slider.vue"
+      "target": ""
     },
     {
       "path": "ui/slider/index.ts",
       "content": "export { default as Slider } from './Slider.vue'\n",
       "type": "registry:ui",
-      "target": "slider/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/sonner.json b/apps/www/src/public/r/styles/default/sonner.json
index 4dfc04d8b..e0bc7d6d5 100644
--- a/apps/www/src/public/r/styles/default/sonner.json
+++ b/apps/www/src/public/r/styles/default/sonner.json
@@ -10,13 +10,13 @@
       "path": "ui/sonner/Sonner.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "sonner/Sonner.vue"
+      "target": ""
     },
     {
       "path": "ui/sonner/index.ts",
       "content": "export { default as Toaster } from './Sonner.vue'\n",
       "type": "registry:ui",
-      "target": "sonner/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/stepper.json b/apps/www/src/public/r/styles/default/stepper.json
index 3ab451f16..47164abdb 100644
--- a/apps/www/src/public/r/styles/default/stepper.json
+++ b/apps/www/src/public/r/styles/default/stepper.json
@@ -10,49 +10,49 @@
       "path": "ui/stepper/Stepper.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/Stepper.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperIndicator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperIndicator.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperItem.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperSeparator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperTitle.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/index.ts",
       "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "stepper/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/switch.json b/apps/www/src/public/r/styles/default/switch.json
index 9898c3997..947767a79 100644
--- a/apps/www/src/public/r/styles/default/switch.json
+++ b/apps/www/src/public/r/styles/default/switch.json
@@ -10,13 +10,13 @@
       "path": "ui/switch/Switch.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "switch/Switch.vue"
+      "target": ""
     },
     {
       "path": "ui/switch/index.ts",
       "content": "export { default as Switch } from './Switch.vue'\n",
       "type": "registry:ui",
-      "target": "switch/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/table.json b/apps/www/src/public/r/styles/default/table.json
index 5225660f5..3a36089f6 100644
--- a/apps/www/src/public/r/styles/default/table.json
+++ b/apps/www/src/public/r/styles/default/table.json
@@ -10,61 +10,61 @@
       "path": "ui/table/Table.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/Table.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableBody.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableBody.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableCaption.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableCaption.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableCell.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableCell.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableEmpty.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableEmpty.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableHead.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableHead.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableRow.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableRow.vue"
+      "target": ""
     },
     {
       "path": "ui/table/index.ts",
       "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
       "type": "registry:ui",
-      "target": "table/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/tabs.json b/apps/www/src/public/r/styles/default/tabs.json
index b0351aa1c..8b847e6a9 100644
--- a/apps/www/src/public/r/styles/default/tabs.json
+++ b/apps/www/src/public/r/styles/default/tabs.json
@@ -10,31 +10,31 @@
       "path": "ui/tabs/Tabs.vue",
       "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/Tabs.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsContent.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsList.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsList.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/index.ts",
       "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "tabs/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/tags-input.json b/apps/www/src/public/r/styles/default/tags-input.json
index a3936cd38..e56c5ec39 100644
--- a/apps/www/src/public/r/styles/default/tags-input.json
+++ b/apps/www/src/public/r/styles/default/tags-input.json
@@ -10,37 +10,37 @@
       "path": "ui/tags-input/TagsInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInput.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputInput.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItem.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItemDelete.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItemDelete.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItemText.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItemText.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/index.ts",
       "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
       "type": "registry:ui",
-      "target": "tags-input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/textarea.json b/apps/www/src/public/r/styles/default/textarea.json
index eab8d994e..1123d079a 100644
--- a/apps/www/src/public/r/styles/default/textarea.json
+++ b/apps/www/src/public/r/styles/default/textarea.json
@@ -12,13 +12,13 @@
       "path": "ui/textarea/Textarea.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "textarea/Textarea.vue"
+      "target": ""
     },
     {
       "path": "ui/textarea/index.ts",
       "content": "export { default as Textarea } from './Textarea.vue'\n",
       "type": "registry:ui",
-      "target": "textarea/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/toast.json b/apps/www/src/public/r/styles/default/toast.json
index 772187f50..d977a0fd1 100644
--- a/apps/www/src/public/r/styles/default/toast.json
+++ b/apps/www/src/public/r/styles/default/toast.json
@@ -10,61 +10,61 @@
       "path": "ui/toast/Toast.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/Toast.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastAction.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastClose.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastViewport.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastViewport.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/Toaster.vue",
       "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/Toaster.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/index.ts",
       "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
       "type": "registry:ui",
-      "target": "toast/index.ts"
+      "target": ""
     },
     {
       "path": "ui/toast/use-toast.ts",
       "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
       "type": "registry:ui",
-      "target": "toast/use-toast.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/toggle-group.json b/apps/www/src/public/r/styles/default/toggle-group.json
index 6338eb2fb..2a9432327 100644
--- a/apps/www/src/public/r/styles/default/toggle-group.json
+++ b/apps/www/src/public/r/styles/default/toggle-group.json
@@ -11,19 +11,19 @@
       "path": "ui/toggle-group/ToggleGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle-group/ToggleGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle-group/ToggleGroupItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle-group/ToggleGroupItem.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle-group/index.ts",
       "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
       "type": "registry:ui",
-      "target": "toggle-group/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
index d316e8299..46942f048 100644
--- a/apps/www/src/public/r/styles/default/toggle.json
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -10,13 +10,13 @@
       "path": "ui/toggle/Toggle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle/Toggle.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
-      "target": "toggle/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/tooltip.json b/apps/www/src/public/r/styles/default/tooltip.json
index 01ebfbc1d..860507df5 100644
--- a/apps/www/src/public/r/styles/default/tooltip.json
+++ b/apps/www/src/public/r/styles/default/tooltip.json
@@ -10,31 +10,31 @@
       "path": "ui/tooltip/Tooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/Tooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipContent.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/index.ts",
       "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "tooltip/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/v-calendar.json b/apps/www/src/public/r/styles/default/v-calendar.json
index df70fdc77..4841ce376 100644
--- a/apps/www/src/public/r/styles/default/v-calendar.json
+++ b/apps/www/src/public/r/styles/default/v-calendar.json
@@ -14,13 +14,13 @@
       "path": "ui/v-calendar/Calendar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
       "type": "registry:ui",
-      "target": "v-calendar/Calendar.vue"
+      "target": ""
     },
     {
       "path": "ui/v-calendar/index.ts",
       "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
       "type": "registry:ui",
-      "target": "v-calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/accordion.json b/apps/www/src/public/r/styles/new-york/accordion.json
index 5a44bd29e..47b5242e0 100644
--- a/apps/www/src/public/r/styles/new-york/accordion.json
+++ b/apps/www/src/public/r/styles/new-york/accordion.json
@@ -10,31 +10,31 @@
       "path": "ui/accordion/Accordion.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/Accordion.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionContent.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionItem.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/AccordionTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "accordion/AccordionTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/accordion/index.ts",
       "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "accordion/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/alert-dialog.json b/apps/www/src/public/r/styles/new-york/alert-dialog.json
index 4c895b8f4..8aa6ad743 100644
--- a/apps/www/src/public/r/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/r/styles/new-york/alert-dialog.json
@@ -11,61 +11,61 @@
       "path": "ui/alert-dialog/AlertDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialog.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogAction.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogCancel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogCancel.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogContent.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/AlertDialogTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert-dialog/AlertDialogTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/alert-dialog/index.ts",
       "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "alert-dialog/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/alert.json b/apps/www/src/public/r/styles/new-york/alert.json
index 9a947b5a9..a670fc591 100644
--- a/apps/www/src/public/r/styles/new-york/alert.json
+++ b/apps/www/src/public/r/styles/new-york/alert.json
@@ -10,25 +10,25 @@
       "path": "ui/alert/Alert.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/Alert.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/AlertDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/AlertDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/AlertTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
       "type": "registry:ui",
-      "target": "alert/AlertTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/alert/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
       "type": "registry:ui",
-      "target": "alert/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/aspect-ratio.json b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
index 97080b06e..c579b3ec2 100644
--- a/apps/www/src/public/r/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
@@ -8,13 +8,13 @@
       "path": "ui/aspect-ratio/AspectRatio.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
       "type": "registry:ui",
-      "target": "aspect-ratio/AspectRatio.vue"
+      "target": ""
     },
     {
       "path": "ui/aspect-ratio/index.ts",
       "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
       "type": "registry:ui",
-      "target": "aspect-ratio/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/auto-form.json b/apps/www/src/public/r/styles/new-york/auto-form.json
index f4b60fc2e..ba955df3f 100644
--- a/apps/www/src/public/r/styles/new-york/auto-form.json
+++ b/apps/www/src/public/r/styles/new-york/auto-form.json
@@ -27,97 +27,97 @@
       "path": "ui/auto-form/AutoForm.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoForm.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormField.vue",
       "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormField.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldArray.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldArray.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldBoolean.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldBoolean.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldDate.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldEnum.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldEnum.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldFile.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldFile.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldInput.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldNumber.vue",
       "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldNumber.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormFieldObject.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormFieldObject.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/AutoFormLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "auto-form/AutoFormLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/auto-form/constant.ts",
       "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/constant.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/dependencies.ts",
       "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/dependencies.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/index.ts",
       "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
       "type": "registry:ui",
-      "target": "auto-form/index.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/interface.ts",
       "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
       "type": "registry:ui",
-      "target": "auto-form/interface.ts"
+      "target": ""
     },
     {
       "path": "ui/auto-form/utils.ts",
       "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
       "type": "registry:ui",
-      "target": "auto-form/utils.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/avatar.json b/apps/www/src/public/r/styles/new-york/avatar.json
index 454a63643..a779e8509 100644
--- a/apps/www/src/public/r/styles/new-york/avatar.json
+++ b/apps/www/src/public/r/styles/new-york/avatar.json
@@ -10,25 +10,25 @@
       "path": "ui/avatar/Avatar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/Avatar.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/AvatarFallback.vue",
       "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/AvatarFallback.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/AvatarImage.vue",
       "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "avatar/AvatarImage.vue"
+      "target": ""
     },
     {
       "path": "ui/avatar/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
       "type": "registry:ui",
-      "target": "avatar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/badge.json b/apps/www/src/public/r/styles/new-york/badge.json
index 2a25a5399..d1a7c09e8 100644
--- a/apps/www/src/public/r/styles/new-york/badge.json
+++ b/apps/www/src/public/r/styles/new-york/badge.json
@@ -10,13 +10,13 @@
       "path": "ui/badge/Badge.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "badge/Badge.vue"
+      "target": ""
     },
     {
       "path": "ui/badge/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
       "type": "registry:ui",
-      "target": "badge/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/breadcrumb.json b/apps/www/src/public/r/styles/new-york/breadcrumb.json
index 2a6831477..9904992a1 100644
--- a/apps/www/src/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/r/styles/new-york/breadcrumb.json
@@ -10,49 +10,49 @@
       "path": "ui/breadcrumb/Breadcrumb.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/Breadcrumb.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbEllipsis.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbItem.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbLink.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbLink.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbList.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbList.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbPage.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbPage.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "breadcrumb/BreadcrumbSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/breadcrumb/index.ts",
       "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
       "type": "registry:ui",
-      "target": "breadcrumb/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/button.json b/apps/www/src/public/r/styles/new-york/button.json
index 0597ef899..6cffc1406 100644
--- a/apps/www/src/public/r/styles/new-york/button.json
+++ b/apps/www/src/public/r/styles/new-york/button.json
@@ -10,13 +10,13 @@
       "path": "ui/button/Button.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "button/Button.vue"
+      "target": ""
     },
     {
       "path": "ui/button/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
       "type": "registry:ui",
-      "target": "button/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/calendar.json b/apps/www/src/public/r/styles/new-york/calendar.json
index 67070517d..f6ff50e85 100644
--- a/apps/www/src/public/r/styles/new-york/calendar.json
+++ b/apps/www/src/public/r/styles/new-york/calendar.json
@@ -11,79 +11,79 @@
       "path": "ui/calendar/Calendar.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/Calendar.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarCell.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarCellTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarCellTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGrid.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGrid.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridBody.vue",
       "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridBody.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridHead.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridHead.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarGridRow.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarGridRow.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeadCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeadCell.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarHeading.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarHeading.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarNextButton.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "calendar/CalendarPrevButton.vue"
+      "target": ""
     },
     {
       "path": "ui/calendar/index.ts",
       "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
       "type": "registry:ui",
-      "target": "calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/card.json b/apps/www/src/public/r/styles/new-york/card.json
index 932da894a..eee3c0fb8 100644
--- a/apps/www/src/public/r/styles/new-york/card.json
+++ b/apps/www/src/public/r/styles/new-york/card.json
@@ -10,43 +10,43 @@
       "path": "ui/card/Card.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/Card.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardContent.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/card/CardTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
       "type": "registry:ui",
-      "target": "card/CardTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/card/index.ts",
       "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
       "type": "registry:ui",
-      "target": "card/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/carousel.json b/apps/www/src/public/r/styles/new-york/carousel.json
index df94c1e6c..52d75c0b7 100644
--- a/apps/www/src/public/r/styles/new-york/carousel.json
+++ b/apps/www/src/public/r/styles/new-york/carousel.json
@@ -14,49 +14,49 @@
       "path": "ui/carousel/Carousel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/Carousel.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselContent.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselItem.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselNext.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
       "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "carousel/CarouselPrevious.vue"
+      "target": ""
     },
     {
       "path": "ui/carousel/index.ts",
       "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
       "type": "registry:ui",
-      "target": "carousel/index.ts"
+      "target": ""
     },
     {
       "path": "ui/carousel/interface.ts",
       "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
       "type": "registry:ui",
-      "target": "carousel/interface.ts"
+      "target": ""
     },
     {
       "path": "ui/carousel/useCarousel.ts",
       "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
       "type": "registry:ui",
-      "target": "carousel/useCarousel.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/chart-area.json b/apps/www/src/public/r/styles/new-york/chart-area.json
index 72dc617c1..8133bc765 100644
--- a/apps/www/src/public/r/styles/new-york/chart-area.json
+++ b/apps/www/src/public/r/styles/new-york/chart-area.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-area/AreaChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-area/AreaChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-area/index.ts",
       "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-area/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/chart-bar.json b/apps/www/src/public/r/styles/new-york/chart-bar.json
index 688a4c55d..e6699c647 100644
--- a/apps/www/src/public/r/styles/new-york/chart-bar.json
+++ b/apps/www/src/public/r/styles/new-york/chart-bar.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-bar/BarChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-bar/BarChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-bar/index.ts",
       "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-bar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/chart-donut.json b/apps/www/src/public/r/styles/new-york/chart-donut.json
index efdff2bc2..0e479dbd0 100644
--- a/apps/www/src/public/r/styles/new-york/chart-donut.json
+++ b/apps/www/src/public/r/styles/new-york/chart-donut.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-donut/DonutChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-donut/DonutChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-donut/index.ts",
       "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-donut/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/chart-line.json b/apps/www/src/public/r/styles/new-york/chart-line.json
index b0505eaaa..e30f18e3e 100644
--- a/apps/www/src/public/r/styles/new-york/chart-line.json
+++ b/apps/www/src/public/r/styles/new-york/chart-line.json
@@ -15,13 +15,13 @@
       "path": "ui/chart-line/LineChart.vue",
       "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart-line/LineChart.vue"
+      "target": ""
     },
     {
       "path": "ui/chart-line/index.ts",
       "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart-line/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/chart.json b/apps/www/src/public/r/styles/new-york/chart.json
index a94700e91..9e1bfabb4 100644
--- a/apps/www/src/public/r/styles/new-york/chart.json
+++ b/apps/www/src/public/r/styles/new-york/chart.json
@@ -14,37 +14,37 @@
       "path": "ui/chart/ChartCrosshair.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartCrosshair.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartLegend.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartLegend.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartSingleTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartSingleTooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/ChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:ui",
-      "target": "chart/ChartTooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/chart/index.ts",
       "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
       "type": "registry:ui",
-      "target": "chart/index.ts"
+      "target": ""
     },
     {
       "path": "ui/chart/interface.ts",
       "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
       "type": "registry:ui",
-      "target": "chart/interface.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/checkbox.json b/apps/www/src/public/r/styles/new-york/checkbox.json
index a783cec66..211d41fe5 100644
--- a/apps/www/src/public/r/styles/new-york/checkbox.json
+++ b/apps/www/src/public/r/styles/new-york/checkbox.json
@@ -10,13 +10,13 @@
       "path": "ui/checkbox/Checkbox.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "checkbox/Checkbox.vue"
+      "target": ""
     },
     {
       "path": "ui/checkbox/index.ts",
       "content": "export { default as Checkbox } from './Checkbox.vue'\n",
       "type": "registry:ui",
-      "target": "checkbox/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/collapsible.json b/apps/www/src/public/r/styles/new-york/collapsible.json
index 43003ad3c..d6336bf4f 100644
--- a/apps/www/src/public/r/styles/new-york/collapsible.json
+++ b/apps/www/src/public/r/styles/new-york/collapsible.json
@@ -8,25 +8,25 @@
       "path": "ui/collapsible/Collapsible.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/Collapsible.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/CollapsibleContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/CollapsibleContent.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/CollapsibleTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "collapsible/CollapsibleTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/collapsible/index.ts",
       "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "collapsible/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 4748136f9..67500d085 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -11,61 +11,61 @@
       "path": "ui/command/Command.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/Command.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandDialog.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandEmpty.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandEmpty.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandInput.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandItem.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandList.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandList.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/command/CommandShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "command/CommandShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/command/index.ts",
       "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
       "type": "registry:ui",
-      "target": "command/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/context-menu.json b/apps/www/src/public/r/styles/new-york/context-menu.json
index f1af8b6a9..0f763fa79 100644
--- a/apps/www/src/public/r/styles/new-york/context-menu.json
+++ b/apps/www/src/public/r/styles/new-york/context-menu.json
@@ -10,97 +10,97 @@
       "path": "ui/context-menu/ContextMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuPortal.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuPortal.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/ContextMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "context-menu/ContextMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/context-menu/index.ts",
       "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "context-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/dialog.json b/apps/www/src/public/r/styles/new-york/dialog.json
index bfee9736d..f758bc155 100644
--- a/apps/www/src/public/r/styles/new-york/dialog.json
+++ b/apps/www/src/public/r/styles/new-york/dialog.json
@@ -10,61 +10,61 @@
       "path": "ui/dialog/Dialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/Dialog.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogClose.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogScrollContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogScrollContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/DialogTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dialog/DialogTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dialog/index.ts",
       "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "dialog/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/drawer.json b/apps/www/src/public/r/styles/new-york/drawer.json
index 31faeb6e3..33bc4910f 100644
--- a/apps/www/src/public/r/styles/new-york/drawer.json
+++ b/apps/www/src/public/r/styles/new-york/drawer.json
@@ -12,49 +12,49 @@
       "path": "ui/drawer/Drawer.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/Drawer.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerContent.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerContent.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerFooter.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerOverlay.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerOverlay.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/DrawerTitle.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "drawer/DrawerTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/drawer/index.ts",
       "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
       "type": "registry:ui",
-      "target": "drawer/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/dropdown-menu.json b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
index a63fbbc71..489cfa0aa 100644
--- a/apps/www/src/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
@@ -10,91 +10,91 @@
       "path": "ui/dropdown-menu/DropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/DropdownMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/dropdown-menu/index.ts",
       "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "dropdown-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/form.json b/apps/www/src/public/r/styles/new-york/form.json
index 10ed46c5e..3f952f0ee 100644
--- a/apps/www/src/public/r/styles/new-york/form.json
+++ b/apps/www/src/public/r/styles/new-york/form.json
@@ -15,49 +15,49 @@
       "path": "ui/form/FormControl.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormControl.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormItem.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormLabel.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/form/FormMessage.vue",
       "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "form/FormMessage.vue"
+      "target": ""
     },
     {
       "path": "ui/form/index.ts",
       "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
       "type": "registry:ui",
-      "target": "form/index.ts"
+      "target": ""
     },
     {
       "path": "ui/form/injectionKeys.ts",
       "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
       "type": "registry:ui",
-      "target": "form/injectionKeys.ts"
+      "target": ""
     },
     {
       "path": "ui/form/useFormField.ts",
       "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
       "type": "registry:ui",
-      "target": "form/useFormField.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/hover-card.json b/apps/www/src/public/r/styles/new-york/hover-card.json
index 90eda7444..f41248ba0 100644
--- a/apps/www/src/public/r/styles/new-york/hover-card.json
+++ b/apps/www/src/public/r/styles/new-york/hover-card.json
@@ -10,25 +10,25 @@
       "path": "ui/hover-card/HoverCard.vue",
       "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCard.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/HoverCardContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCardContent.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/HoverCardTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "hover-card/HoverCardTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/hover-card/index.ts",
       "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "hover-card/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/input.json b/apps/www/src/public/r/styles/new-york/input.json
index 06f9244aa..2fdd94754 100644
--- a/apps/www/src/public/r/styles/new-york/input.json
+++ b/apps/www/src/public/r/styles/new-york/input.json
@@ -12,13 +12,13 @@
       "path": "ui/input/Input.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
       "type": "registry:ui",
-      "target": "input/Input.vue"
+      "target": ""
     },
     {
       "path": "ui/input/index.ts",
       "content": "export { default as Input } from './Input.vue'\n",
       "type": "registry:ui",
-      "target": "input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/label.json b/apps/www/src/public/r/styles/new-york/label.json
index 839718f1f..5c8db8412 100644
--- a/apps/www/src/public/r/styles/new-york/label.json
+++ b/apps/www/src/public/r/styles/new-york/label.json
@@ -10,13 +10,13 @@
       "path": "ui/label/Label.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
       "type": "registry:ui",
-      "target": "label/Label.vue"
+      "target": ""
     },
     {
       "path": "ui/label/index.ts",
       "content": "export { default as Label } from './Label.vue'\n",
       "type": "registry:ui",
-      "target": "label/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/menubar.json b/apps/www/src/public/r/styles/new-york/menubar.json
index 929eb32fa..553ced462 100644
--- a/apps/www/src/public/r/styles/new-york/menubar.json
+++ b/apps/www/src/public/r/styles/new-york/menubar.json
@@ -10,97 +10,97 @@
       "path": "ui/menubar/Menubar.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/Menubar.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarCheckboxItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarCheckboxItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarContent.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarRadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarRadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarRadioItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarRadioItem.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarShortcut.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarShortcut.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSub.vue",
       "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSub.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSubContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSubContent.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarSubTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarSubTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/MenubarTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "menubar/MenubarTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/menubar/index.ts",
       "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "menubar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/navigation-menu.json b/apps/www/src/public/r/styles/new-york/navigation-menu.json
index 2e83cf267..83613a4e0 100644
--- a/apps/www/src/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/r/styles/new-york/navigation-menu.json
@@ -10,55 +10,55 @@
       "path": "ui/navigation-menu/NavigationMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuContent.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuIndicator.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuLink.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuLink.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuList.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuList.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/NavigationMenuViewport.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "navigation-menu/NavigationMenuViewport.vue"
+      "target": ""
     },
     {
       "path": "ui/navigation-menu/index.ts",
       "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
       "type": "registry:ui",
-      "target": "navigation-menu/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/number-field.json b/apps/www/src/public/r/styles/new-york/number-field.json
index bcb77b720..b6c2fe3fc 100644
--- a/apps/www/src/public/r/styles/new-york/number-field.json
+++ b/apps/www/src/public/r/styles/new-york/number-field.json
@@ -10,37 +10,37 @@
       "path": "ui/number-field/NumberField.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberField.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldContent.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldDecrement.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldDecrement.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldIncrement.vue",
       "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldIncrement.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/NumberFieldInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "number-field/NumberFieldInput.vue"
+      "target": ""
     },
     {
       "path": "ui/number-field/index.ts",
       "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
       "type": "registry:ui",
-      "target": "number-field/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/pagination.json b/apps/www/src/public/r/styles/new-york/pagination.json
index 91ae815ea..fb11a30c4 100644
--- a/apps/www/src/public/r/styles/new-york/pagination.json
+++ b/apps/www/src/public/r/styles/new-york/pagination.json
@@ -11,37 +11,37 @@
       "path": "ui/pagination/PaginationEllipsis.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationEllipsis.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationFirst.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationLast.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationNext.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "pagination/PaginationPrev.vue"
+      "target": ""
     },
     {
       "path": "ui/pagination/index.ts",
       "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "pagination/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/pin-input.json b/apps/www/src/public/r/styles/new-york/pin-input.json
index d64094549..3957c2ba6 100644
--- a/apps/www/src/public/r/styles/new-york/pin-input.json
+++ b/apps/www/src/public/r/styles/new-york/pin-input.json
@@ -10,31 +10,31 @@
       "path": "ui/pin-input/PinInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInput.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputInput.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/PinInputSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "pin-input/PinInputSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/pin-input/index.ts",
       "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
       "type": "registry:ui",
-      "target": "pin-input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/popover.json b/apps/www/src/public/r/styles/new-york/popover.json
index b11ced75c..a8f4ed61e 100644
--- a/apps/www/src/public/r/styles/new-york/popover.json
+++ b/apps/www/src/public/r/styles/new-york/popover.json
@@ -10,25 +10,25 @@
       "path": "ui/popover/Popover.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/Popover.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/PopoverContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/PopoverContent.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/PopoverTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "popover/PopoverTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/popover/index.ts",
       "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "popover/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/progress.json b/apps/www/src/public/r/styles/new-york/progress.json
index be04580a3..843d6c0ca 100644
--- a/apps/www/src/public/r/styles/new-york/progress.json
+++ b/apps/www/src/public/r/styles/new-york/progress.json
@@ -10,13 +10,13 @@
       "path": "ui/progress/Progress.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "progress/Progress.vue"
+      "target": ""
     },
     {
       "path": "ui/progress/index.ts",
       "content": "export { default as Progress } from './Progress.vue'\n",
       "type": "registry:ui",
-      "target": "progress/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
index 309c48fa8..6ae2c4b5b 100644
--- a/apps/www/src/public/r/styles/new-york/radio-group.json
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -10,19 +10,19 @@
       "path": "ui/radio-group/RadioGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "radio-group/RadioGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/radio-group/RadioGroupItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "radio-group/RadioGroupItem.vue"
+      "target": ""
     },
     {
       "path": "ui/radio-group/index.ts",
       "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
       "type": "registry:ui",
-      "target": "radio-group/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/range-calendar.json b/apps/www/src/public/r/styles/new-york/range-calendar.json
index 3ba49fa8b..deb19adbb 100644
--- a/apps/www/src/public/r/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/range-calendar.json
@@ -11,79 +11,79 @@
       "path": "ui/range-calendar/RangeCalendar.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendar.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarCell.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarCellTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGrid.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGrid.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridBody.vue",
       "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridBody.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridHead.vue",
       "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridHead.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarGridRow.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarGridRow.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeadCell.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeader.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarHeading.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarHeading.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarNextButton.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
       "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
-      "target": "range-calendar/RangeCalendarPrevButton.vue"
+      "target": ""
     },
     {
       "path": "ui/range-calendar/index.ts",
       "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
       "type": "registry:ui",
-      "target": "range-calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/resizable.json b/apps/www/src/public/r/styles/new-york/resizable.json
index 30be3b24f..5efa95ba9 100644
--- a/apps/www/src/public/r/styles/new-york/resizable.json
+++ b/apps/www/src/public/r/styles/new-york/resizable.json
@@ -10,19 +10,19 @@
       "path": "ui/resizable/ResizableHandle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
       "type": "registry:ui",
-      "target": "resizable/ResizableHandle.vue"
+      "target": ""
     },
     {
       "path": "ui/resizable/ResizablePanelGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "resizable/ResizablePanelGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/resizable/index.ts",
       "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
       "type": "registry:ui",
-      "target": "resizable/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/scroll-area.json b/apps/www/src/public/r/styles/new-york/scroll-area.json
index f3cbbe4b7..f5fe2cc7f 100644
--- a/apps/www/src/public/r/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/r/styles/new-york/scroll-area.json
@@ -10,19 +10,19 @@
       "path": "ui/scroll-area/ScrollArea.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "scroll-area/ScrollArea.vue"
+      "target": ""
     },
     {
       "path": "ui/scroll-area/ScrollBar.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
       "type": "registry:ui",
-      "target": "scroll-area/ScrollBar.vue"
+      "target": ""
     },
     {
       "path": "ui/scroll-area/index.ts",
       "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
       "type": "registry:ui",
-      "target": "scroll-area/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/select.json b/apps/www/src/public/r/styles/new-york/select.json
index 232adf2d3..cf18bc4c6 100644
--- a/apps/www/src/public/r/styles/new-york/select.json
+++ b/apps/www/src/public/r/styles/new-york/select.json
@@ -10,73 +10,73 @@
       "path": "ui/select/Select.vue",
       "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/Select.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectContent.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectItem.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectItemText.vue",
       "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectItemText.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectScrollDownButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectScrollDownButton.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectScrollUpButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectScrollUpButton.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/select/SelectValue.vue",
       "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
       "type": "registry:ui",
-      "target": "select/SelectValue.vue"
+      "target": ""
     },
     {
       "path": "ui/select/index.ts",
       "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
       "type": "registry:ui",
-      "target": "select/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/separator.json b/apps/www/src/public/r/styles/new-york/separator.json
index e5a78b265..2173b60f0 100644
--- a/apps/www/src/public/r/styles/new-york/separator.json
+++ b/apps/www/src/public/r/styles/new-york/separator.json
@@ -10,13 +10,13 @@
       "path": "ui/separator/Separator.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
       "type": "registry:ui",
-      "target": "separator/Separator.vue"
+      "target": ""
     },
     {
       "path": "ui/separator/index.ts",
       "content": "export { default as Separator } from './Separator.vue'\n",
       "type": "registry:ui",
-      "target": "separator/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/sheet.json b/apps/www/src/public/r/styles/new-york/sheet.json
index 47bd776cd..a3ea36534 100644
--- a/apps/www/src/public/r/styles/new-york/sheet.json
+++ b/apps/www/src/public/r/styles/new-york/sheet.json
@@ -10,55 +10,55 @@
       "path": "ui/sheet/Sheet.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/Sheet.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetClose.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/SheetTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "sheet/SheetTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/sheet/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
       "type": "registry:ui",
-      "target": "sheet/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index 3bfb6139b..82bf25593 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -18,157 +18,157 @@
       "path": "ui/sidebar/Sidebar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/Sidebar.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupAction.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupAction.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupContent.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupContent.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarGroupLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarGroupLabel.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarInput.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarInput.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarInset.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarInset.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenu.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuAction.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuAction.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuBadge.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuBadge.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuButton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuButtonChild.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuButtonChild.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuItem.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSkeleton.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSkeleton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSub.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSub.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSubButton.vue",
       "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSubButton.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarMenuSubItem.vue",
       "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarMenuSubItem.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarRail.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarRail.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/SidebarTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
       "type": "registry:ui",
-      "target": "sidebar/SidebarTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/sidebar/index.ts",
       "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
-      "target": "sidebar/index.ts"
+      "target": ""
     },
     {
       "path": "ui/sidebar/utils.ts",
       "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
       "type": "registry:ui",
-      "target": "sidebar/utils.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/skeleton.json b/apps/www/src/public/r/styles/new-york/skeleton.json
index 0702b002d..c774d832e 100644
--- a/apps/www/src/public/r/styles/new-york/skeleton.json
+++ b/apps/www/src/public/r/styles/new-york/skeleton.json
@@ -10,13 +10,13 @@
       "path": "ui/skeleton/Skeleton.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "skeleton/Skeleton.vue"
+      "target": ""
     },
     {
       "path": "ui/skeleton/index.ts",
       "content": "export { default as Skeleton } from './Skeleton.vue'\n",
       "type": "registry:ui",
-      "target": "skeleton/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/slider.json b/apps/www/src/public/r/styles/new-york/slider.json
index f83999cd8..4d2d31cd8 100644
--- a/apps/www/src/public/r/styles/new-york/slider.json
+++ b/apps/www/src/public/r/styles/new-york/slider.json
@@ -10,13 +10,13 @@
       "path": "ui/slider/Slider.vue",
       "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "slider/Slider.vue"
+      "target": ""
     },
     {
       "path": "ui/slider/index.ts",
       "content": "export { default as Slider } from './Slider.vue'\n",
       "type": "registry:ui",
-      "target": "slider/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/sonner.json b/apps/www/src/public/r/styles/new-york/sonner.json
index 4dfc04d8b..e0bc7d6d5 100644
--- a/apps/www/src/public/r/styles/new-york/sonner.json
+++ b/apps/www/src/public/r/styles/new-york/sonner.json
@@ -10,13 +10,13 @@
       "path": "ui/sonner/Sonner.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "sonner/Sonner.vue"
+      "target": ""
     },
     {
       "path": "ui/sonner/index.ts",
       "content": "export { default as Toaster } from './Sonner.vue'\n",
       "type": "registry:ui",
-      "target": "sonner/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/stepper.json b/apps/www/src/public/r/styles/new-york/stepper.json
index 6aebbcc06..c09548bc2 100644
--- a/apps/www/src/public/r/styles/new-york/stepper.json
+++ b/apps/www/src/public/r/styles/new-york/stepper.json
@@ -10,49 +10,49 @@
       "path": "ui/stepper/Stepper.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/Stepper.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperDescription.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperIndicator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperIndicator.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperItem.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperItem.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperSeparator.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperSeparator.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperTitle.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/StepperTrigger.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "stepper/StepperTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/stepper/index.ts",
       "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "stepper/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/switch.json b/apps/www/src/public/r/styles/new-york/switch.json
index cd41cba4c..c2fed459a 100644
--- a/apps/www/src/public/r/styles/new-york/switch.json
+++ b/apps/www/src/public/r/styles/new-york/switch.json
@@ -10,13 +10,13 @@
       "path": "ui/switch/Switch.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "switch/Switch.vue"
+      "target": ""
     },
     {
       "path": "ui/switch/index.ts",
       "content": "export { default as Switch } from './Switch.vue'\n",
       "type": "registry:ui",
-      "target": "switch/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/table.json b/apps/www/src/public/r/styles/new-york/table.json
index f94f5f41c..69aacea81 100644
--- a/apps/www/src/public/r/styles/new-york/table.json
+++ b/apps/www/src/public/r/styles/new-york/table.json
@@ -10,61 +10,61 @@
       "path": "ui/table/Table.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/Table.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableBody.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableBody.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableCaption.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableCaption.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableCell.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableCell.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableEmpty.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableEmpty.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableFooter.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableFooter.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableHead.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableHead.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableHeader.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableHeader.vue"
+      "target": ""
     },
     {
       "path": "ui/table/TableRow.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
       "type": "registry:ui",
-      "target": "table/TableRow.vue"
+      "target": ""
     },
     {
       "path": "ui/table/index.ts",
       "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
       "type": "registry:ui",
-      "target": "table/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/tabs.json b/apps/www/src/public/r/styles/new-york/tabs.json
index a3417c5ae..cd79c8965 100644
--- a/apps/www/src/public/r/styles/new-york/tabs.json
+++ b/apps/www/src/public/r/styles/new-york/tabs.json
@@ -10,31 +10,31 @@
       "path": "ui/tabs/Tabs.vue",
       "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/Tabs.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsContent.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsList.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsList.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/TabsTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "tabs/TabsTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/tabs/index.ts",
       "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "tabs/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/tags-input.json b/apps/www/src/public/r/styles/new-york/tags-input.json
index 7c95a30e2..634a92ae9 100644
--- a/apps/www/src/public/r/styles/new-york/tags-input.json
+++ b/apps/www/src/public/r/styles/new-york/tags-input.json
@@ -10,37 +10,37 @@
       "path": "ui/tags-input/TagsInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInput.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputInput.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputInput.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItem.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItem.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItemDelete.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItemDelete.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/TagsInputItemText.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "tags-input/TagsInputItemText.vue"
+      "target": ""
     },
     {
       "path": "ui/tags-input/index.ts",
       "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
       "type": "registry:ui",
-      "target": "tags-input/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/textarea.json b/apps/www/src/public/r/styles/new-york/textarea.json
index 67128cce3..ff774bbdb 100644
--- a/apps/www/src/public/r/styles/new-york/textarea.json
+++ b/apps/www/src/public/r/styles/new-york/textarea.json
@@ -12,13 +12,13 @@
       "path": "ui/textarea/Textarea.vue",
       "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "textarea/Textarea.vue"
+      "target": ""
     },
     {
       "path": "ui/textarea/index.ts",
       "content": "export { default as Textarea } from './Textarea.vue'\n",
       "type": "registry:ui",
-      "target": "textarea/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/toast.json b/apps/www/src/public/r/styles/new-york/toast.json
index 6ed9ac15a..933f1295a 100644
--- a/apps/www/src/public/r/styles/new-york/toast.json
+++ b/apps/www/src/public/r/styles/new-york/toast.json
@@ -10,61 +10,61 @@
       "path": "ui/toast/Toast.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/Toast.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastAction.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastClose.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastClose.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastDescription.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastDescription.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastTitle.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/ToastViewport.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/ToastViewport.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/Toaster.vue",
       "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "toast/Toaster.vue"
+      "target": ""
     },
     {
       "path": "ui/toast/index.ts",
       "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
       "type": "registry:ui",
-      "target": "toast/index.ts"
+      "target": ""
     },
     {
       "path": "ui/toast/use-toast.ts",
       "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
       "type": "registry:ui",
-      "target": "toast/use-toast.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/toggle-group.json b/apps/www/src/public/r/styles/new-york/toggle-group.json
index 5050ed113..e92baa9c2 100644
--- a/apps/www/src/public/r/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/r/styles/new-york/toggle-group.json
@@ -11,19 +11,19 @@
       "path": "ui/toggle-group/ToggleGroup.vue",
       "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle-group/ToggleGroup.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle-group/ToggleGroupItem.vue",
       "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle-group/ToggleGroupItem.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle-group/index.ts",
       "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
       "type": "registry:ui",
-      "target": "toggle-group/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
index 44ad20083..da95269b8 100644
--- a/apps/www/src/public/r/styles/new-york/toggle.json
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -10,13 +10,13 @@
       "path": "ui/toggle/Toggle.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
       "type": "registry:ui",
-      "target": "toggle/Toggle.vue"
+      "target": ""
     },
     {
       "path": "ui/toggle/index.ts",
       "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
-      "target": "toggle/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/tooltip.json b/apps/www/src/public/r/styles/new-york/tooltip.json
index c5ad65e26..aa4827920 100644
--- a/apps/www/src/public/r/styles/new-york/tooltip.json
+++ b/apps/www/src/public/r/styles/new-york/tooltip.json
@@ -10,31 +10,31 @@
       "path": "ui/tooltip/Tooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/Tooltip.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipContent.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipContent.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipProvider.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipProvider.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/TooltipTrigger.vue",
       "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
       "type": "registry:ui",
-      "target": "tooltip/TooltipTrigger.vue"
+      "target": ""
     },
     {
       "path": "ui/tooltip/index.ts",
       "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
       "type": "registry:ui",
-      "target": "tooltip/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/v-calendar.json b/apps/www/src/public/r/styles/new-york/v-calendar.json
index 8f99520fb..27c19cdad 100644
--- a/apps/www/src/public/r/styles/new-york/v-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/v-calendar.json
@@ -14,13 +14,13 @@
       "path": "ui/v-calendar/Calendar.vue",
       "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
       "type": "registry:ui",
-      "target": "v-calendar/Calendar.vue"
+      "target": ""
     },
     {
       "path": "ui/v-calendar/index.ts",
       "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
       "type": "registry:ui",
-      "target": "v-calendar/index.ts"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 4811471fe..840ff7f3a 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -199,31 +199,31 @@
         "path": "ui/accordion/Accordion.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/Accordion.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionContent.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionItem.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/index.ts",
         "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "accordion/index.ts"
+        "target": ""
       }
     ]
   },
@@ -239,25 +239,25 @@
         "path": "ui/alert/Alert.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/Alert.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/AlertDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/AlertDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/AlertTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/AlertTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
         "type": "registry:ui",
-        "target": "alert/index.ts"
+        "target": ""
       }
     ]
   },
@@ -274,61 +274,61 @@
         "path": "ui/alert-dialog/AlertDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialog.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogAction.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogCancel.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogContent.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/index.ts",
         "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "alert-dialog/index.ts"
+        "target": ""
       }
     ]
   },
@@ -342,13 +342,13 @@
         "path": "ui/aspect-ratio/AspectRatio.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
         "type": "registry:ui",
-        "target": "aspect-ratio/AspectRatio.vue"
+        "target": ""
       },
       {
         "path": "ui/aspect-ratio/index.ts",
         "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
         "type": "registry:ui",
-        "target": "aspect-ratio/index.ts"
+        "target": ""
       }
     ]
   },
@@ -381,97 +381,97 @@
         "path": "ui/auto-form/AutoForm.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoForm.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormField.vue",
         "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormField.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldArray.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldArray.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldBoolean.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldBoolean.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldDate.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldEnum.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldEnum.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldFile.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldFile.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldInput.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldNumber.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldNumber.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldObject.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldObject.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/constant.ts",
         "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/constant.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/dependencies.ts",
         "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/dependencies.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/index.ts",
         "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
         "type": "registry:ui",
-        "target": "auto-form/index.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/interface.ts",
         "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
         "type": "registry:ui",
-        "target": "auto-form/interface.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/utils.ts",
         "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/utils.ts"
+        "target": ""
       }
     ]
   },
@@ -487,25 +487,25 @@
         "path": "ui/avatar/Avatar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/Avatar.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/AvatarFallback.vue",
         "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/AvatarFallback.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/AvatarImage.vue",
         "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/AvatarImage.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
         "type": "registry:ui",
-        "target": "avatar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -521,13 +521,13 @@
         "path": "ui/badge/Badge.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "badge/Badge.vue"
+        "target": ""
       },
       {
         "path": "ui/badge/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
         "type": "registry:ui",
-        "target": "badge/index.ts"
+        "target": ""
       }
     ]
   },
@@ -543,49 +543,49 @@
         "path": "ui/breadcrumb/Breadcrumb.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/Breadcrumb.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbItem.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbLink.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbLink.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbList.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbList.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbPage.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbPage.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/index.ts",
         "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
         "type": "registry:ui",
-        "target": "breadcrumb/index.ts"
+        "target": ""
       }
     ]
   },
@@ -601,13 +601,13 @@
         "path": "ui/button/Button.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "button/Button.vue"
+        "target": ""
       },
       {
         "path": "ui/button/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
         "type": "registry:ui",
-        "target": "button/index.ts"
+        "target": ""
       }
     ]
   },
@@ -624,79 +624,79 @@
         "path": "ui/calendar/Calendar.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/Calendar.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarCell.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarCellTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGrid.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGrid.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridBody.vue",
         "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridBody.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridHead.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridHead.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridRow.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridRow.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeadCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeadCell.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeading.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeading.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarNextButton.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarPrevButton.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/index.ts",
         "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
         "type": "registry:ui",
-        "target": "calendar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -712,43 +712,43 @@
         "path": "ui/card/Card.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/Card.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardContent.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/card/index.ts",
         "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
         "type": "registry:ui",
-        "target": "card/index.ts"
+        "target": ""
       }
     ]
   },
@@ -768,49 +768,49 @@
         "path": "ui/carousel/Carousel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/Carousel.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselContent.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselItem.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselNext.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselPrevious.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/index.ts",
         "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
         "type": "registry:ui",
-        "target": "carousel/index.ts"
+        "target": ""
       },
       {
         "path": "ui/carousel/interface.ts",
         "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
         "type": "registry:ui",
-        "target": "carousel/interface.ts"
+        "target": ""
       },
       {
         "path": "ui/carousel/useCarousel.ts",
         "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
         "type": "registry:ui",
-        "target": "carousel/useCarousel.ts"
+        "target": ""
       }
     ]
   },
@@ -830,37 +830,37 @@
         "path": "ui/chart/ChartCrosshair.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartCrosshair.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartLegend.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartLegend.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartSingleTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartSingleTooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartTooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/index.ts",
         "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
         "type": "registry:ui",
-        "target": "chart/index.ts"
+        "target": ""
       },
       {
         "path": "ui/chart/interface.ts",
         "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart/interface.ts"
+        "target": ""
       }
     ]
   },
@@ -881,13 +881,13 @@
         "path": "ui/chart-area/AreaChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-area/AreaChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-area/index.ts",
         "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-area/index.ts"
+        "target": ""
       }
     ]
   },
@@ -908,13 +908,13 @@
         "path": "ui/chart-bar/BarChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-bar/BarChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-bar/index.ts",
         "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-bar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -935,13 +935,13 @@
         "path": "ui/chart-donut/DonutChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-donut/DonutChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-donut/index.ts",
         "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-donut/index.ts"
+        "target": ""
       }
     ]
   },
@@ -962,13 +962,13 @@
         "path": "ui/chart-line/LineChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-line/LineChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-line/index.ts",
         "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-line/index.ts"
+        "target": ""
       }
     ]
   },
@@ -984,13 +984,13 @@
         "path": "ui/checkbox/Checkbox.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "checkbox/Checkbox.vue"
+        "target": ""
       },
       {
         "path": "ui/checkbox/index.ts",
         "content": "export { default as Checkbox } from './Checkbox.vue'\n",
         "type": "registry:ui",
-        "target": "checkbox/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1004,25 +1004,25 @@
         "path": "ui/collapsible/Collapsible.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/Collapsible.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/CollapsibleContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/CollapsibleContent.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/CollapsibleTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/CollapsibleTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/index.ts",
         "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "collapsible/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1039,61 +1039,61 @@
         "path": "ui/command/Command.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/Command.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandDialog.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandEmpty.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandEmpty.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandInput.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandItem.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandList.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandList.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/command/index.ts",
         "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
         "type": "registry:ui",
-        "target": "command/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1109,97 +1109,97 @@
         "path": "ui/context-menu/ContextMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuPortal.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuPortal.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/index.ts",
         "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "context-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1215,61 +1215,61 @@
         "path": "ui/dialog/Dialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/Dialog.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogClose.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogScrollContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogScrollContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/index.ts",
         "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "dialog/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1287,49 +1287,49 @@
         "path": "ui/drawer/Drawer.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/Drawer.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerContent.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerContent.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerFooter.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerOverlay.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerOverlay.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerTitle.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/index.ts",
         "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
         "type": "registry:ui",
-        "target": "drawer/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1345,91 +1345,91 @@
         "path": "ui/dropdown-menu/DropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/index.ts",
         "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1450,49 +1450,49 @@
         "path": "ui/form/FormControl.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormControl.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormItem.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormLabel.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormMessage.vue",
         "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormMessage.vue"
+        "target": ""
       },
       {
         "path": "ui/form/index.ts",
         "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n",
         "type": "registry:ui",
-        "target": "form/index.ts"
+        "target": ""
       },
       {
         "path": "ui/form/injectionKeys.ts",
         "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
         "type": "registry:ui",
-        "target": "form/injectionKeys.ts"
+        "target": ""
       },
       {
         "path": "ui/form/useFormField.ts",
         "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
         "type": "registry:ui",
-        "target": "form/useFormField.ts"
+        "target": ""
       }
     ]
   },
@@ -1508,25 +1508,25 @@
         "path": "ui/hover-card/HoverCard.vue",
         "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCard.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/HoverCardContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCardContent.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/HoverCardTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCardTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/index.ts",
         "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "hover-card/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1544,13 +1544,13 @@
         "path": "ui/input/Input.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
         "type": "registry:ui",
-        "target": "input/Input.vue"
+        "target": ""
       },
       {
         "path": "ui/input/index.ts",
         "content": "export { default as Input } from './Input.vue'\n",
         "type": "registry:ui",
-        "target": "input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1566,13 +1566,13 @@
         "path": "ui/label/Label.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
-        "target": "label/Label.vue"
+        "target": ""
       },
       {
         "path": "ui/label/index.ts",
         "content": "export { default as Label } from './Label.vue'\n",
         "type": "registry:ui",
-        "target": "label/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1588,97 +1588,97 @@
         "path": "ui/menubar/Menubar.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/Menubar.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarContent.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSub.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSub.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/index.ts",
         "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "menubar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1694,55 +1694,55 @@
         "path": "ui/navigation-menu/NavigationMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuIndicator.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuLink.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuLink.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuList.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuList.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuViewport.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuViewport.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/index.ts",
         "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
         "type": "registry:ui",
-        "target": "navigation-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1758,37 +1758,37 @@
         "path": "ui/number-field/NumberField.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberField.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldContent.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldDecrement.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldDecrement.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldIncrement.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldIncrement.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldInput.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/index.ts",
         "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
         "type": "registry:ui",
-        "target": "number-field/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1805,37 +1805,37 @@
         "path": "ui/pagination/PaginationEllipsis.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationEllipsis.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationFirst.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationLast.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationNext.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationPrev.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/index.ts",
         "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "pagination/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1851,31 +1851,31 @@
         "path": "ui/pin-input/PinInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInput.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputInput.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/index.ts",
         "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
         "type": "registry:ui",
-        "target": "pin-input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1891,25 +1891,25 @@
         "path": "ui/popover/Popover.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/Popover.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/PopoverContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/PopoverContent.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/PopoverTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/PopoverTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/index.ts",
         "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "popover/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1925,13 +1925,13 @@
         "path": "ui/progress/Progress.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "progress/Progress.vue"
+        "target": ""
       },
       {
         "path": "ui/progress/index.ts",
         "content": "export { default as Progress } from './Progress.vue'\n",
         "type": "registry:ui",
-        "target": "progress/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1947,19 +1947,19 @@
         "path": "ui/radio-group/RadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "radio-group/RadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "radio-group/RadioGroupItem.vue"
+        "target": ""
       },
       {
         "path": "ui/radio-group/index.ts",
         "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
         "type": "registry:ui",
-        "target": "radio-group/index.ts"
+        "target": ""
       }
     ]
   },
@@ -1976,79 +1976,79 @@
         "path": "ui/range-calendar/RangeCalendar.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendar.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCell.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGrid.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGrid.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridBody.vue",
         "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridBody.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridHead.vue",
         "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridHead.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridRow.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridRow.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeadCell.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeading.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeading.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarNextButton.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarPrevButton.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/index.ts",
         "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
         "type": "registry:ui",
-        "target": "range-calendar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2064,19 +2064,19 @@
         "path": "ui/resizable/ResizableHandle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
         "type": "registry:ui",
-        "target": "resizable/ResizableHandle.vue"
+        "target": ""
       },
       {
         "path": "ui/resizable/ResizablePanelGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "resizable/ResizablePanelGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/resizable/index.ts",
         "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "resizable/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2092,19 +2092,19 @@
         "path": "ui/scroll-area/ScrollArea.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "scroll-area/ScrollArea.vue"
+        "target": ""
       },
       {
         "path": "ui/scroll-area/ScrollBar.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
         "type": "registry:ui",
-        "target": "scroll-area/ScrollBar.vue"
+        "target": ""
       },
       {
         "path": "ui/scroll-area/index.ts",
         "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
         "type": "registry:ui",
-        "target": "scroll-area/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2120,73 +2120,73 @@
         "path": "ui/select/Select.vue",
         "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/Select.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectContent.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectItem.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectItemText.vue",
         "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectItemText.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectScrollDownButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectScrollDownButton.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectScrollUpButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectScrollUpButton.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectValue.vue",
         "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectValue.vue"
+        "target": ""
       },
       {
         "path": "ui/select/index.ts",
         "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
         "type": "registry:ui",
-        "target": "select/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2202,13 +2202,13 @@
         "path": "ui/separator/Separator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
         "type": "registry:ui",
-        "target": "separator/Separator.vue"
+        "target": ""
       },
       {
         "path": "ui/separator/index.ts",
         "content": "export { default as Separator } from './Separator.vue'\n",
         "type": "registry:ui",
-        "target": "separator/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2224,55 +2224,55 @@
         "path": "ui/sheet/Sheet.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/Sheet.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetClose.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
         "type": "registry:ui",
-        "target": "sheet/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2296,157 +2296,157 @@
         "path": "ui/sidebar/Sidebar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/new-york/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/Sidebar.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupAction.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupAction.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/new-york/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarInput.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarInset.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarInset.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuAction.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuAction.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuBadge.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuBadge.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuButtonChild.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButtonChild.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSkeleton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSubButton.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubButton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSubItem.vue",
         "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubItem.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarRail.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarRail.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/index.ts",
         "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
-        "target": "sidebar/index.ts"
+        "target": ""
       },
       {
         "path": "ui/sidebar/utils.ts",
         "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
         "type": "registry:ui",
-        "target": "sidebar/utils.ts"
+        "target": ""
       }
     ]
   },
@@ -2462,13 +2462,13 @@
         "path": "ui/skeleton/Skeleton.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "skeleton/Skeleton.vue"
+        "target": ""
       },
       {
         "path": "ui/skeleton/index.ts",
         "content": "export { default as Skeleton } from './Skeleton.vue'\n",
         "type": "registry:ui",
-        "target": "skeleton/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2484,13 +2484,13 @@
         "path": "ui/slider/Slider.vue",
         "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "slider/Slider.vue"
+        "target": ""
       },
       {
         "path": "ui/slider/index.ts",
         "content": "export { default as Slider } from './Slider.vue'\n",
         "type": "registry:ui",
-        "target": "slider/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2506,13 +2506,13 @@
         "path": "ui/sonner/Sonner.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "sonner/Sonner.vue"
+        "target": ""
       },
       {
         "path": "ui/sonner/index.ts",
         "content": "export { default as Toaster } from './Sonner.vue'\n",
         "type": "registry:ui",
-        "target": "sonner/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2528,49 +2528,49 @@
         "path": "ui/stepper/Stepper.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/Stepper.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperIndicator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperIndicator.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperItem.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperSeparator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperTitle.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/index.ts",
         "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "stepper/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2586,13 +2586,13 @@
         "path": "ui/switch/Switch.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "switch/Switch.vue"
+        "target": ""
       },
       {
         "path": "ui/switch/index.ts",
         "content": "export { default as Switch } from './Switch.vue'\n",
         "type": "registry:ui",
-        "target": "switch/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2608,61 +2608,61 @@
         "path": "ui/table/Table.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/Table.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableBody.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableBody.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableCaption.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableCaption.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableCell.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableCell.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableEmpty.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableEmpty.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableHead.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableHead.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableRow.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableRow.vue"
+        "target": ""
       },
       {
         "path": "ui/table/index.ts",
         "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
         "type": "registry:ui",
-        "target": "table/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2678,31 +2678,31 @@
         "path": "ui/tabs/Tabs.vue",
         "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/Tabs.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsContent.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsList.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsList.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/index.ts",
         "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "tabs/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2718,37 +2718,37 @@
         "path": "ui/tags-input/TagsInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInput.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputInput.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItem.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItemDelete.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItemDelete.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItemText.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItemText.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/index.ts",
         "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
         "type": "registry:ui",
-        "target": "tags-input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2766,13 +2766,13 @@
         "path": "ui/textarea/Textarea.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "textarea/Textarea.vue"
+        "target": ""
       },
       {
         "path": "ui/textarea/index.ts",
         "content": "export { default as Textarea } from './Textarea.vue'\n",
         "type": "registry:ui",
-        "target": "textarea/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2788,61 +2788,61 @@
         "path": "ui/toast/Toast.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/Toast.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastAction.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastClose.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastViewport.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastViewport.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/Toaster.vue",
         "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/Toaster.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/index.ts",
         "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
         "type": "registry:ui",
-        "target": "toast/index.ts"
+        "target": ""
       },
       {
         "path": "ui/toast/use-toast.ts",
         "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
         "type": "registry:ui",
-        "target": "toast/use-toast.ts"
+        "target": ""
       }
     ]
   },
@@ -2858,13 +2858,13 @@
         "path": "ui/toggle/Toggle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle/Toggle.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
-        "target": "toggle/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2881,19 +2881,19 @@
         "path": "ui/toggle-group/ToggleGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle-group/ToggleGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle-group/ToggleGroupItem.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle-group/index.ts",
         "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
         "type": "registry:ui",
-        "target": "toggle-group/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2909,31 +2909,31 @@
         "path": "ui/tooltip/Tooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/Tooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipContent.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/index.ts",
         "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "tooltip/index.ts"
+        "target": ""
       }
     ]
   },
@@ -2953,13 +2953,13 @@
         "path": "ui/v-calendar/Calendar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
         "type": "registry:ui",
-        "target": "v-calendar/Calendar.vue"
+        "target": ""
       },
       {
         "path": "ui/v-calendar/index.ts",
         "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
         "type": "registry:ui",
-        "target": "v-calendar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7613,31 +7613,31 @@
         "path": "ui/accordion/Accordion.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/Accordion.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionContent.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionItem.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/AccordionTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "accordion/AccordionTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/accordion/index.ts",
         "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "accordion/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7653,25 +7653,25 @@
         "path": "ui/alert/Alert.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/Alert.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/AlertDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/AlertDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/AlertTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert/AlertTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/alert/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
         "type": "registry:ui",
-        "target": "alert/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7688,61 +7688,61 @@
         "path": "ui/alert-dialog/AlertDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialog.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogAction.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogCancel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogCancel.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogContent.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/AlertDialogTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "alert-dialog/AlertDialogTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/alert-dialog/index.ts",
         "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "alert-dialog/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7756,13 +7756,13 @@
         "path": "ui/aspect-ratio/AspectRatio.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n",
         "type": "registry:ui",
-        "target": "aspect-ratio/AspectRatio.vue"
+        "target": ""
       },
       {
         "path": "ui/aspect-ratio/index.ts",
         "content": "export { default as AspectRatio } from './AspectRatio.vue'\n",
         "type": "registry:ui",
-        "target": "aspect-ratio/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7795,97 +7795,97 @@
         "path": "ui/auto-form/AutoForm.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoForm.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormField.vue",
         "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormField.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldArray.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldArray.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldBoolean.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldBoolean.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldDate.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldEnum.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldEnum.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldFile.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldFile.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldInput.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldNumber.vue",
         "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldNumber.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormFieldObject.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormFieldObject.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/AutoFormLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "auto-form/AutoFormLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/auto-form/constant.ts",
         "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/constant.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/dependencies.ts",
         "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/dependencies.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/index.ts",
         "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n",
         "type": "registry:ui",
-        "target": "auto-form/index.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/interface.ts",
         "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n",
         "type": "registry:ui",
-        "target": "auto-form/interface.ts"
+        "target": ""
       },
       {
         "path": "ui/auto-form/utils.ts",
         "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n",
         "type": "registry:ui",
-        "target": "auto-form/utils.ts"
+        "target": ""
       }
     ]
   },
@@ -7901,25 +7901,25 @@
         "path": "ui/avatar/Avatar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/Avatar.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/AvatarFallback.vue",
         "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/AvatarFallback.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/AvatarImage.vue",
         "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "avatar/AvatarImage.vue"
+        "target": ""
       },
       {
         "path": "ui/avatar/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n",
         "type": "registry:ui",
-        "target": "avatar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7935,13 +7935,13 @@
         "path": "ui/badge/Badge.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "badge/Badge.vue"
+        "target": ""
       },
       {
         "path": "ui/badge/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
         "type": "registry:ui",
-        "target": "badge/index.ts"
+        "target": ""
       }
     ]
   },
@@ -7957,49 +7957,49 @@
         "path": "ui/breadcrumb/Breadcrumb.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/Breadcrumb.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbEllipsis.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbItem.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbLink.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbLink.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbList.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbList.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbPage.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbPage.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "breadcrumb/BreadcrumbSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/breadcrumb/index.ts",
         "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n",
         "type": "registry:ui",
-        "target": "breadcrumb/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8015,13 +8015,13 @@
         "path": "ui/button/Button.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "button/Button.vue"
+        "target": ""
       },
       {
         "path": "ui/button/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
         "type": "registry:ui",
-        "target": "button/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8038,79 +8038,79 @@
         "path": "ui/calendar/Calendar.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/Calendar.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarCell.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarCellTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarCellTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGrid.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGrid.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridBody.vue",
         "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridBody.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridHead.vue",
         "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridHead.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarGridRow.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarGridRow.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeadCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeadCell.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarHeading.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarHeading.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarNextButton.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "calendar/CalendarPrevButton.vue"
+        "target": ""
       },
       {
         "path": "ui/calendar/index.ts",
         "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n",
         "type": "registry:ui",
-        "target": "calendar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8126,43 +8126,43 @@
         "path": "ui/card/Card.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/Card.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardContent.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/card/CardTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n",
         "type": "registry:ui",
-        "target": "card/CardTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/card/index.ts",
         "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n",
         "type": "registry:ui",
-        "target": "card/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8182,49 +8182,49 @@
         "path": "ui/carousel/Carousel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/Carousel.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselContent.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselItem.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselNext.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
         "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "carousel/CarouselPrevious.vue"
+        "target": ""
       },
       {
         "path": "ui/carousel/index.ts",
         "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n",
         "type": "registry:ui",
-        "target": "carousel/index.ts"
+        "target": ""
       },
       {
         "path": "ui/carousel/interface.ts",
         "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n",
         "type": "registry:ui",
-        "target": "carousel/interface.ts"
+        "target": ""
       },
       {
         "path": "ui/carousel/useCarousel.ts",
         "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n",
         "type": "registry:ui",
-        "target": "carousel/useCarousel.ts"
+        "target": ""
       }
     ]
   },
@@ -8244,37 +8244,37 @@
         "path": "ui/chart/ChartCrosshair.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartCrosshair.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartLegend.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartLegend.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartSingleTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartSingleTooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/ChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart/ChartTooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/chart/index.ts",
         "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n",
         "type": "registry:ui",
-        "target": "chart/index.ts"
+        "target": ""
       },
       {
         "path": "ui/chart/interface.ts",
         "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart/interface.ts"
+        "target": ""
       }
     ]
   },
@@ -8295,13 +8295,13 @@
         "path": "ui/chart-area/AreaChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-area/AreaChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-area/index.ts",
         "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-area/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8322,13 +8322,13 @@
         "path": "ui/chart-bar/BarChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-bar/BarChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-bar/index.ts",
         "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-bar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8349,13 +8349,13 @@
         "path": "ui/chart-donut/DonutChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-donut/DonutChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-donut/index.ts",
         "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-donut/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8376,13 +8376,13 @@
         "path": "ui/chart-line/LineChart.vue",
         "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "chart-line/LineChart.vue"
+        "target": ""
       },
       {
         "path": "ui/chart-line/index.ts",
         "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n",
         "type": "registry:ui",
-        "target": "chart-line/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8398,13 +8398,13 @@
         "path": "ui/checkbox/Checkbox.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "checkbox/Checkbox.vue"
+        "target": ""
       },
       {
         "path": "ui/checkbox/index.ts",
         "content": "export { default as Checkbox } from './Checkbox.vue'\n",
         "type": "registry:ui",
-        "target": "checkbox/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8418,25 +8418,25 @@
         "path": "ui/collapsible/Collapsible.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/Collapsible.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/CollapsibleContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/CollapsibleContent.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/CollapsibleTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "collapsible/CollapsibleTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/collapsible/index.ts",
         "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "collapsible/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8453,61 +8453,61 @@
         "path": "ui/command/Command.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/Command.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandDialog.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandEmpty.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandEmpty.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandInput.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandItem.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandList.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandList.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/command/CommandShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "command/CommandShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/command/index.ts",
         "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
         "type": "registry:ui",
-        "target": "command/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8523,97 +8523,97 @@
         "path": "ui/context-menu/ContextMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuPortal.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuPortal.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/ContextMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "context-menu/ContextMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/context-menu/index.ts",
         "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "context-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8629,61 +8629,61 @@
         "path": "ui/dialog/Dialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/Dialog.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogClose.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogScrollContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogScrollContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/DialogTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dialog/DialogTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dialog/index.ts",
         "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "dialog/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8701,49 +8701,49 @@
         "path": "ui/drawer/Drawer.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/Drawer.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerContent.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerContent.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerFooter.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerOverlay.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerOverlay.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/DrawerTitle.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "drawer/DrawerTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/drawer/index.ts",
         "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n",
         "type": "registry:ui",
-        "target": "drawer/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8759,91 +8759,91 @@
         "path": "ui/dropdown-menu/DropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/DropdownMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/dropdown-menu/index.ts",
         "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "dropdown-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8864,49 +8864,49 @@
         "path": "ui/form/FormControl.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormControl.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormItem.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormLabel.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/registry/default/ui/label'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/form/FormMessage.vue",
         "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "form/FormMessage.vue"
+        "target": ""
       },
       {
         "path": "ui/form/index.ts",
         "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n",
         "type": "registry:ui",
-        "target": "form/index.ts"
+        "target": ""
       },
       {
         "path": "ui/form/injectionKeys.ts",
         "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n",
         "type": "registry:ui",
-        "target": "form/injectionKeys.ts"
+        "target": ""
       },
       {
         "path": "ui/form/useFormField.ts",
         "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n",
         "type": "registry:ui",
-        "target": "form/useFormField.ts"
+        "target": ""
       }
     ]
   },
@@ -8922,25 +8922,25 @@
         "path": "ui/hover-card/HoverCard.vue",
         "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCard.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/HoverCardContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCardContent.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/HoverCardTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "hover-card/HoverCardTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/hover-card/index.ts",
         "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "hover-card/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8958,13 +8958,13 @@
         "path": "ui/input/Input.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n",
         "type": "registry:ui",
-        "target": "input/Input.vue"
+        "target": ""
       },
       {
         "path": "ui/input/index.ts",
         "content": "export { default as Input } from './Input.vue'\n",
         "type": "registry:ui",
-        "target": "input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -8980,13 +8980,13 @@
         "path": "ui/label/Label.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n",
         "type": "registry:ui",
-        "target": "label/Label.vue"
+        "target": ""
       },
       {
         "path": "ui/label/index.ts",
         "content": "export { default as Label } from './Label.vue'\n",
         "type": "registry:ui",
-        "target": "label/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9002,97 +9002,97 @@
         "path": "ui/menubar/Menubar.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/Menubar.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarCheckboxItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarCheckboxItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarContent.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarRadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarRadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarRadioItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarRadioItem.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarShortcut.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarShortcut.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSub.vue",
         "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSub.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSubContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSubContent.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarSubTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarSubTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/MenubarTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "menubar/MenubarTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/menubar/index.ts",
         "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "menubar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9108,55 +9108,55 @@
         "path": "ui/navigation-menu/NavigationMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuContent.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuIndicator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuIndicator.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuLink.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuLink.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuList.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuList.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/NavigationMenuViewport.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "navigation-menu/NavigationMenuViewport.vue"
+        "target": ""
       },
       {
         "path": "ui/navigation-menu/index.ts",
         "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n",
         "type": "registry:ui",
-        "target": "navigation-menu/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9172,37 +9172,37 @@
         "path": "ui/number-field/NumberField.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberField.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldContent.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldDecrement.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldDecrement.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldIncrement.vue",
         "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldIncrement.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/NumberFieldInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "number-field/NumberFieldInput.vue"
+        "target": ""
       },
       {
         "path": "ui/number-field/index.ts",
         "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n",
         "type": "registry:ui",
-        "target": "number-field/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9219,37 +9219,37 @@
         "path": "ui/pagination/PaginationEllipsis.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationEllipsis.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationFirst.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationLast.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationNext.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "pagination/PaginationPrev.vue"
+        "target": ""
       },
       {
         "path": "ui/pagination/index.ts",
         "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "pagination/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9265,31 +9265,31 @@
         "path": "ui/pin-input/PinInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInput.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputInput.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/PinInputSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "pin-input/PinInputSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/pin-input/index.ts",
         "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n",
         "type": "registry:ui",
-        "target": "pin-input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9305,25 +9305,25 @@
         "path": "ui/popover/Popover.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/Popover.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/PopoverContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/PopoverContent.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/PopoverTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "popover/PopoverTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/popover/index.ts",
         "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "popover/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9339,13 +9339,13 @@
         "path": "ui/progress/Progress.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "progress/Progress.vue"
+        "target": ""
       },
       {
         "path": "ui/progress/index.ts",
         "content": "export { default as Progress } from './Progress.vue'\n",
         "type": "registry:ui",
-        "target": "progress/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9361,19 +9361,19 @@
         "path": "ui/radio-group/RadioGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "radio-group/RadioGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "radio-group/RadioGroupItem.vue"
+        "target": ""
       },
       {
         "path": "ui/radio-group/index.ts",
         "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n",
         "type": "registry:ui",
-        "target": "radio-group/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9390,79 +9390,79 @@
         "path": "ui/range-calendar/RangeCalendar.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendar.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCell.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarCellTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarCellTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGrid.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGrid.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridBody.vue",
         "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridBody.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridHead.vue",
         "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridHead.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarGridRow.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarGridRow.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeadCell.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeadCell.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeader.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarHeading.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarHeading.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarNextButton.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
         "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
         "type": "registry:ui",
-        "target": "range-calendar/RangeCalendarPrevButton.vue"
+        "target": ""
       },
       {
         "path": "ui/range-calendar/index.ts",
         "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n",
         "type": "registry:ui",
-        "target": "range-calendar/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9478,19 +9478,19 @@
         "path": "ui/resizable/ResizableHandle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
         "type": "registry:ui",
-        "target": "resizable/ResizableHandle.vue"
+        "target": ""
       },
       {
         "path": "ui/resizable/ResizablePanelGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "resizable/ResizablePanelGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/resizable/index.ts",
         "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n",
         "type": "registry:ui",
-        "target": "resizable/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9506,19 +9506,19 @@
         "path": "ui/scroll-area/ScrollArea.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "scroll-area/ScrollArea.vue"
+        "target": ""
       },
       {
         "path": "ui/scroll-area/ScrollBar.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n",
         "type": "registry:ui",
-        "target": "scroll-area/ScrollBar.vue"
+        "target": ""
       },
       {
         "path": "ui/scroll-area/index.ts",
         "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
         "type": "registry:ui",
-        "target": "scroll-area/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9534,73 +9534,73 @@
         "path": "ui/select/Select.vue",
         "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/Select.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectContent.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectItem.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectItemText.vue",
         "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectItemText.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectScrollDownButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectScrollDownButton.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectScrollUpButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectScrollUpButton.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/select/SelectValue.vue",
         "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n",
         "type": "registry:ui",
-        "target": "select/SelectValue.vue"
+        "target": ""
       },
       {
         "path": "ui/select/index.ts",
         "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n",
         "type": "registry:ui",
-        "target": "select/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9616,13 +9616,13 @@
         "path": "ui/separator/Separator.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n",
         "type": "registry:ui",
-        "target": "separator/Separator.vue"
+        "target": ""
       },
       {
         "path": "ui/separator/index.ts",
         "content": "export { default as Separator } from './Separator.vue'\n",
         "type": "registry:ui",
-        "target": "separator/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9638,55 +9638,55 @@
         "path": "ui/sheet/Sheet.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/Sheet.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetClose.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/SheetTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "sheet/SheetTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/sheet/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n",
         "type": "registry:ui",
-        "target": "sheet/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9710,157 +9710,157 @@
         "path": "ui/sidebar/Sidebar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Sheet, SheetContent } from '@/registry/default/ui/sheet'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/Sidebar.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupAction.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupAction.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupContent.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupContent.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarGroupLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarGroupLabel.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarInput.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/registry/default/ui/input'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarInput.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarInset.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarInset.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenu.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuAction.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuAction.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuBadge.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuBadge.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuButtonChild.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuButtonChild.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuItem.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSkeleton.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Skeleton } from '@/registry/default/ui/skeleton'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSkeleton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSub.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSub.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSubButton.vue",
         "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubButton.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarMenuSubItem.vue",
         "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarMenuSubItem.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarRail.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarRail.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarSeparator.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/SidebarTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n",
         "type": "registry:ui",
-        "target": "sidebar/SidebarTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/sidebar/index.ts",
         "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
-        "target": "sidebar/index.ts"
+        "target": ""
       },
       {
         "path": "ui/sidebar/utils.ts",
         "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n",
         "type": "registry:ui",
-        "target": "sidebar/utils.ts"
+        "target": ""
       }
     ]
   },
@@ -9876,13 +9876,13 @@
         "path": "ui/skeleton/Skeleton.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "skeleton/Skeleton.vue"
+        "target": ""
       },
       {
         "path": "ui/skeleton/index.ts",
         "content": "export { default as Skeleton } from './Skeleton.vue'\n",
         "type": "registry:ui",
-        "target": "skeleton/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9898,13 +9898,13 @@
         "path": "ui/slider/Slider.vue",
         "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "slider/Slider.vue"
+        "target": ""
       },
       {
         "path": "ui/slider/index.ts",
         "content": "export { default as Slider } from './Slider.vue'\n",
         "type": "registry:ui",
-        "target": "slider/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9920,13 +9920,13 @@
         "path": "ui/sonner/Sonner.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "sonner/Sonner.vue"
+        "target": ""
       },
       {
         "path": "ui/sonner/index.ts",
         "content": "export { default as Toaster } from './Sonner.vue'\n",
         "type": "registry:ui",
-        "target": "sonner/index.ts"
+        "target": ""
       }
     ]
   },
@@ -9942,49 +9942,49 @@
         "path": "ui/stepper/Stepper.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/Stepper.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperDescription.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperIndicator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperIndicator.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperItem.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperItem.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperSeparator.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperSeparator.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperTitle.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/StepperTrigger.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "stepper/StepperTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/stepper/index.ts",
         "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "stepper/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10000,13 +10000,13 @@
         "path": "ui/switch/Switch.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "switch/Switch.vue"
+        "target": ""
       },
       {
         "path": "ui/switch/index.ts",
         "content": "export { default as Switch } from './Switch.vue'\n",
         "type": "registry:ui",
-        "target": "switch/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10022,61 +10022,61 @@
         "path": "ui/table/Table.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/Table.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableBody.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableBody.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableCaption.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableCaption.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableCell.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableCell.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableEmpty.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableEmpty.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableFooter.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableFooter.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableHead.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableHead.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableHeader.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableHeader.vue"
+        "target": ""
       },
       {
         "path": "ui/table/TableRow.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n",
         "type": "registry:ui",
-        "target": "table/TableRow.vue"
+        "target": ""
       },
       {
         "path": "ui/table/index.ts",
         "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
         "type": "registry:ui",
-        "target": "table/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10092,31 +10092,31 @@
         "path": "ui/tabs/Tabs.vue",
         "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/Tabs.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsContent.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsList.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsList.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/TabsTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "tabs/TabsTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/tabs/index.ts",
         "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "tabs/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10132,37 +10132,37 @@
         "path": "ui/tags-input/TagsInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInput.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputInput.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputInput.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItem.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItem.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItemDelete.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItemDelete.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/TagsInputItemText.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "tags-input/TagsInputItemText.vue"
+        "target": ""
       },
       {
         "path": "ui/tags-input/index.ts",
         "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n",
         "type": "registry:ui",
-        "target": "tags-input/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10180,13 +10180,13 @@
         "path": "ui/textarea/Textarea.vue",
         "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "textarea/Textarea.vue"
+        "target": ""
       },
       {
         "path": "ui/textarea/index.ts",
         "content": "export { default as Textarea } from './Textarea.vue'\n",
         "type": "registry:ui",
-        "target": "textarea/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10202,61 +10202,61 @@
         "path": "ui/toast/Toast.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/Toast.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastAction.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastClose.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastClose.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastDescription.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastDescription.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastTitle.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/ToastViewport.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/ToastViewport.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/Toaster.vue",
         "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "toast/Toaster.vue"
+        "target": ""
       },
       {
         "path": "ui/toast/index.ts",
         "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n",
         "type": "registry:ui",
-        "target": "toast/index.ts"
+        "target": ""
       },
       {
         "path": "ui/toast/use-toast.ts",
         "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n",
         "type": "registry:ui",
-        "target": "toast/use-toast.ts"
+        "target": ""
       }
     ]
   },
@@ -10272,13 +10272,13 @@
         "path": "ui/toggle/Toggle.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle/Toggle.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle/index.ts",
         "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
-        "target": "toggle/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10295,19 +10295,19 @@
         "path": "ui/toggle-group/ToggleGroup.vue",
         "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle-group/ToggleGroup.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle-group/ToggleGroupItem.vue",
         "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n",
         "type": "registry:ui",
-        "target": "toggle-group/ToggleGroupItem.vue"
+        "target": ""
       },
       {
         "path": "ui/toggle-group/index.ts",
         "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
         "type": "registry:ui",
-        "target": "toggle-group/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10323,31 +10323,31 @@
         "path": "ui/tooltip/Tooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/Tooltip.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipContent.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipContent.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipProvider.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipProvider.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/TooltipTrigger.vue",
         "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n",
         "type": "registry:ui",
-        "target": "tooltip/TooltipTrigger.vue"
+        "target": ""
       },
       {
         "path": "ui/tooltip/index.ts",
         "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n",
         "type": "registry:ui",
-        "target": "tooltip/index.ts"
+        "target": ""
       }
     ]
   },
@@ -10367,13 +10367,13 @@
         "path": "ui/v-calendar/Calendar.vue",
         "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
         "type": "registry:ui",
-        "target": "v-calendar/Calendar.vue"
+        "target": ""
       },
       {
         "path": "ui/v-calendar/index.ts",
         "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
         "type": "registry:ui",
-        "target": "v-calendar/index.ts"
+        "target": ""
       }
     ]
   },
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index 5b7dfaf83..80360fd09 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -213,7 +213,7 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
     const filepath = join(componentPath, dirent.name)
     const relativePath = join('ui', componentName, dirent.name)
     const source = await readFile(filepath, { encoding: 'utf8' })
-    const target = `${componentName}/${dirent.name}`
+    const target = '' // `${componentName}/${dirent.name}`
 
     files.push({ content: source, path: relativePath, type, target })
 
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 8093d9aa7..bfbaa0516 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -182,7 +182,6 @@ async function fetchRegistry(paths: string[]) {
     const results = await Promise.all(
       paths.map(async (path) => {
         const url = getRegistryUrl(path)
-        console.log(url)
         const response = await ofetch(url, { agent, parseResponse: JSON.parse })
           .catch((error) => {
             throw new Error(error.data)

From ec790cb5ba353176a54c8f9f08e16802ef6e53b7 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 26 Nov 2024 13:46:07 +0800
Subject: [PATCH 23/39] chore: fix regsitry dependencies adding .vue files

---
 apps/www/__registry__/block.ts                | 128 +++++++++---------
 apps/www/__registry__/index.ts                | 128 +++++++++---------
 .../src/public/r/styles/default/Login01.json  |   1 -
 .../public/r/styles/default/Sidebar01.json    |   3 -
 .../public/r/styles/default/Sidebar02.json    |   3 -
 .../public/r/styles/default/Sidebar03.json    |   1 -
 .../public/r/styles/default/Sidebar04.json    |   1 -
 .../public/r/styles/default/Sidebar05.json    |   2 -
 .../public/r/styles/default/Sidebar06.json    |   3 -
 .../public/r/styles/default/Sidebar07.json    |   5 -
 .../public/r/styles/default/Sidebar08.json    |   5 -
 .../public/r/styles/default/Sidebar09.json    |   2 -
 .../public/r/styles/default/Sidebar10.json    |   7 -
 .../public/r/styles/default/Sidebar11.json    |   2 -
 .../public/r/styles/default/Sidebar12.json    |   4 -
 .../public/r/styles/default/Sidebar13.json    |   1 -
 .../public/r/styles/default/Sidebar14.json    |   1 -
 .../public/r/styles/default/Sidebar15.json    |  12 +-
 .../src/public/r/styles/new-york/Login01.json |   1 -
 .../public/r/styles/new-york/Sidebar01.json   |   3 -
 .../public/r/styles/new-york/Sidebar02.json   |   3 -
 .../public/r/styles/new-york/Sidebar03.json   |   1 -
 .../public/r/styles/new-york/Sidebar04.json   |   1 -
 .../public/r/styles/new-york/Sidebar05.json   |   2 -
 .../public/r/styles/new-york/Sidebar06.json   |   3 -
 .../public/r/styles/new-york/Sidebar07.json   |   5 -
 .../public/r/styles/new-york/Sidebar08.json   |   5 -
 .../public/r/styles/new-york/Sidebar09.json   |   2 -
 .../public/r/styles/new-york/Sidebar10.json   |   7 -
 .../public/r/styles/new-york/Sidebar11.json   |   2 -
 .../public/r/styles/new-york/Sidebar12.json   |   4 -
 .../public/r/styles/new-york/Sidebar13.json   |   1 -
 .../public/r/styles/new-york/Sidebar14.json   |   1 -
 .../public/r/styles/new-york/Sidebar15.json   |  12 +-
 apps/www/src/public/r/temp.json               | 106 +--------------
 apps/www/src/registry/crawl-content.ts        |   4 +-
 packages/cli/src/utils/registry/index.ts      |   4 +-
 .../cli/src/utils/updaters/update-files.ts    |   7 +-
 38 files changed, 141 insertions(+), 342 deletions(-)

diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
index ae32f0e28..d577222c9 100644
--- a/apps/www/__registry__/block.ts
+++ b/apps/www/__registry__/block.ts
@@ -399,7 +399,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/new-york/block/Login01/page.vue",
         type: "registry:page",
@@ -421,7 +421,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -453,7 +453,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -485,7 +485,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -507,7 +507,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -529,7 +529,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/new-york/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -556,7 +556,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/new-york/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -588,7 +588,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -630,7 +630,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -672,7 +672,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -699,7 +699,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -751,7 +751,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -778,7 +778,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -815,7 +815,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -837,7 +837,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -859,7 +859,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -1322,7 +1322,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/new-york/block/Login01/page.vue",
         type: "registry:page",
@@ -1344,7 +1344,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -1376,7 +1376,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -1408,7 +1408,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -1430,7 +1430,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -1452,7 +1452,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/new-york/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -1479,7 +1479,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/new-york/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -1511,7 +1511,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -1553,7 +1553,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -1595,7 +1595,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -1622,7 +1622,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -1674,7 +1674,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -1701,7 +1701,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -1738,7 +1738,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -1760,7 +1760,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -1782,7 +1782,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -2246,7 +2246,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/default/block/Login01/page.vue",
         type: "registry:page",
@@ -2268,7 +2268,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -2300,7 +2300,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -2332,7 +2332,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -2354,7 +2354,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -2376,7 +2376,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/default/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -2403,7 +2403,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/default/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -2435,7 +2435,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -2477,7 +2477,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -2519,7 +2519,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -2546,7 +2546,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -2598,7 +2598,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -2625,7 +2625,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -2662,7 +2662,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -2684,7 +2684,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -2706,7 +2706,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -3169,7 +3169,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/default/block/Login01/page.vue",
         type: "registry:page",
@@ -3191,7 +3191,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -3223,7 +3223,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -3255,7 +3255,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -3277,7 +3277,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -3299,7 +3299,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/default/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -3326,7 +3326,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/default/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -3358,7 +3358,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -3400,7 +3400,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -3442,7 +3442,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -3469,7 +3469,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -3521,7 +3521,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -3548,7 +3548,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -3585,7 +3585,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -3607,7 +3607,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -3629,7 +3629,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar15/page.vue",
         type: "registry:page",
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index a9efd47a5..39f5c66da 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -5419,7 +5419,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/new-york/block/Login01/page.vue",
         type: "registry:page",
@@ -5438,7 +5438,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -5465,7 +5465,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -5492,7 +5492,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -5511,7 +5511,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -5530,7 +5530,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/new-york/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -5553,7 +5553,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/new-york/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -5580,7 +5580,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -5615,7 +5615,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -5650,7 +5650,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -5673,7 +5673,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -5716,7 +5716,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -5739,7 +5739,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -5770,7 +5770,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -5789,7 +5789,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -5808,7 +5808,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -11263,7 +11263,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/new-york/block/Login01/page.vue",
         type: "registry:page",
@@ -11282,7 +11282,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -11309,7 +11309,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -11336,7 +11336,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -11355,7 +11355,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -11374,7 +11374,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/new-york/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -11397,7 +11397,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/new-york/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -11424,7 +11424,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -11459,7 +11459,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -11494,7 +11494,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -11517,7 +11517,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -11560,7 +11560,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/new-york/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -11583,7 +11583,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/new-york/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -11614,7 +11614,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -11633,7 +11633,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/new-york/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -11652,7 +11652,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/new-york/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -17123,7 +17123,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/default/block/Login01/page.vue",
         type: "registry:page",
@@ -17142,7 +17142,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -17169,7 +17169,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -17196,7 +17196,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -17215,7 +17215,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -17234,7 +17234,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/default/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -17257,7 +17257,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/default/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -17284,7 +17284,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -17319,7 +17319,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -17354,7 +17354,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -17377,7 +17377,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -17420,7 +17420,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -17443,7 +17443,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -17474,7 +17474,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -17493,7 +17493,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -17512,7 +17512,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar15/page.vue",
         type: "registry:page",
@@ -22967,7 +22967,7 @@ export const Index: Record<string, any> = {
       name: "Login01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["LoginForm.vue","button","card","input","label"],
+      registryDependencies: ["button","card","input","label"],
       files: [{
         path: "registry/default/block/Login01/page.vue",
         type: "registry:page",
@@ -22986,7 +22986,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar01",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
@@ -23013,7 +23013,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar02",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar02/page.vue",
         type: "registry:page",
@@ -23040,7 +23040,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar03",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar03/page.vue",
         type: "registry:page",
@@ -23059,7 +23059,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar04",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar"],
+      registryDependencies: ["breadcrumb","separator","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar04/page.vue",
         type: "registry:page",
@@ -23078,7 +23078,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar05",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","collapsible","label"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","label"],
       files: [{
         path: "registry/default/block/Sidebar05/page.vue",
         type: "registry:page",
@@ -23101,7 +23101,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar06",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","SidebarOptInForm.vue","dropdown-menu","button","card"],
+      registryDependencies: ["breadcrumb","separator","sidebar","dropdown-menu","button","card"],
       files: [{
         path: "registry/default/block/Sidebar06/page.vue",
         type: "registry:page",
@@ -23128,7 +23128,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar07",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavUser.vue","TeamSwitcher.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
@@ -23163,7 +23163,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar08",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavMain.vue","NavProjects.vue","NavSecondary.vue","NavUser.vue","collapsible","dropdown-menu","avatar"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar08/page.vue",
         type: "registry:page",
@@ -23198,7 +23198,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar09",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","NavUser.vue","label","switch","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","label","switch","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar09/page.vue",
         type: "registry:page",
@@ -23221,7 +23221,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar10",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","button","popover","dropdown-menu","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar10/page.vue",
         type: "registry:page",
@@ -23264,7 +23264,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar11",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible"],
       files: [{
         path: "registry/default/block/Sidebar11/page.vue",
         type: "registry:page",
@@ -23287,7 +23287,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar12",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","avatar","dropdown-menu"],
       files: [{
         path: "registry/default/block/Sidebar12/page.vue",
         type: "registry:page",
@@ -23318,7 +23318,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar13",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
+      registryDependencies: ["breadcrumb","button","dialog","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar13/page.vue",
         type: "registry:page",
@@ -23337,7 +23337,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar14",
       description: "",
       type: "registry:block",
-      registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
+      registryDependencies: ["breadcrumb","sidebar"],
       files: [{
         path: "registry/default/block/Sidebar14/page.vue",
         type: "registry:page",
@@ -23356,7 +23356,7 @@ export const Index: Record<string, any> = {
       name: "Sidebar15",
       description: "",
       type: "registry:block",
-      registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
+      registryDependencies: ["breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar"],
       files: [{
         path: "registry/default/block/Sidebar15/page.vue",
         type: "registry:page",
diff --git a/apps/www/src/public/r/styles/default/Login01.json b/apps/www/src/public/r/styles/default/Login01.json
index 13ca20971..75e25b7a8 100644
--- a/apps/www/src/public/r/styles/default/Login01.json
+++ b/apps/www/src/public/r/styles/default/Login01.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "LoginForm.vue",
     "button",
     "card",
     "input",
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index dcb2eb2e2..985188f38 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -3,12 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
-    "VersionSwitcher.vue",
     "label",
     "dropdown-menu"
   ],
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
index 6df2d906c..cea32c29b 100644
--- a/apps/www/src/public/r/styles/default/Sidebar02.json
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -3,12 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
-    "VersionSwitcher.vue",
     "collapsible",
     "label",
     "dropdown-menu"
diff --git a/apps/www/src/public/r/styles/default/Sidebar03.json b/apps/www/src/public/r/styles/default/Sidebar03.json
index 37ce2eb8f..18f1b8273 100644
--- a/apps/www/src/public/r/styles/default/Sidebar03.json
+++ b/apps/www/src/public/r/styles/default/Sidebar03.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar"
diff --git a/apps/www/src/public/r/styles/default/Sidebar04.json b/apps/www/src/public/r/styles/default/Sidebar04.json
index e96771533..c3b492d55 100644
--- a/apps/www/src/public/r/styles/default/Sidebar04.json
+++ b/apps/www/src/public/r/styles/default/Sidebar04.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar"
diff --git a/apps/www/src/public/r/styles/default/Sidebar05.json b/apps/www/src/public/r/styles/default/Sidebar05.json
index 93a29d150..b22df9304 100644
--- a/apps/www/src/public/r/styles/default/Sidebar05.json
+++ b/apps/www/src/public/r/styles/default/Sidebar05.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
     "collapsible",
     "label"
   ],
diff --git a/apps/www/src/public/r/styles/default/Sidebar06.json b/apps/www/src/public/r/styles/default/Sidebar06.json
index c1924b2e8..7310a029b 100644
--- a/apps/www/src/public/r/styles/default/Sidebar06.json
+++ b/apps/www/src/public/r/styles/default/Sidebar06.json
@@ -5,12 +5,9 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "SidebarOptInForm.vue",
     "dropdown-menu",
     "button",
     "card"
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index e29dcd9b9..875087ea4 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -3,14 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "NavProjects.vue",
-    "NavUser.vue",
-    "TeamSwitcher.vue",
     "collapsible",
     "dropdown-menu",
     "avatar"
diff --git a/apps/www/src/public/r/styles/default/Sidebar08.json b/apps/www/src/public/r/styles/default/Sidebar08.json
index 413723623..d7d41ed92 100644
--- a/apps/www/src/public/r/styles/default/Sidebar08.json
+++ b/apps/www/src/public/r/styles/default/Sidebar08.json
@@ -3,14 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "NavProjects.vue",
-    "NavSecondary.vue",
-    "NavUser.vue",
     "collapsible",
     "dropdown-menu",
     "avatar"
diff --git a/apps/www/src/public/r/styles/default/Sidebar09.json b/apps/www/src/public/r/styles/default/Sidebar09.json
index bf028c2fa..e6a0d8ac3 100644
--- a/apps/www/src/public/r/styles/default/Sidebar09.json
+++ b/apps/www/src/public/r/styles/default/Sidebar09.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavUser.vue",
     "label",
     "switch",
     "avatar",
diff --git a/apps/www/src/public/r/styles/default/Sidebar10.json b/apps/www/src/public/r/styles/default/Sidebar10.json
index 0baa45461..374eebb93 100644
--- a/apps/www/src/public/r/styles/default/Sidebar10.json
+++ b/apps/www/src/public/r/styles/default/Sidebar10.json
@@ -3,16 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
-    "NavActions.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavFavorites.vue",
-    "NavMain.vue",
-    "NavSecondary.vue",
-    "NavWorkspaces.vue",
-    "TeamSwitcher.vue",
     "button",
     "popover",
     "dropdown-menu",
diff --git a/apps/www/src/public/r/styles/default/Sidebar11.json b/apps/www/src/public/r/styles/default/Sidebar11.json
index d79617565..1fd090f6e 100644
--- a/apps/www/src/public/r/styles/default/Sidebar11.json
+++ b/apps/www/src/public/r/styles/default/Sidebar11.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "Tree.vue",
     "collapsible"
   ],
   "files": [
diff --git a/apps/www/src/public/r/styles/default/Sidebar12.json b/apps/www/src/public/r/styles/default/Sidebar12.json
index b737597e6..e77add140 100644
--- a/apps/www/src/public/r/styles/default/Sidebar12.json
+++ b/apps/www/src/public/r/styles/default/Sidebar12.json
@@ -3,13 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "Calendars.vue",
-    "DatePicker.vue",
-    "NavUser.vue",
     "collapsible",
     "calendar",
     "avatar",
diff --git a/apps/www/src/public/r/styles/default/Sidebar13.json b/apps/www/src/public/r/styles/default/Sidebar13.json
index 7f9c60761..00614ecf3 100644
--- a/apps/www/src/public/r/styles/default/Sidebar13.json
+++ b/apps/www/src/public/r/styles/default/Sidebar13.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "SettingsDialog.vue",
     "breadcrumb",
     "button",
     "dialog",
diff --git a/apps/www/src/public/r/styles/default/Sidebar14.json b/apps/www/src/public/r/styles/default/Sidebar14.json
index 0a8e09e2d..2fa6bbe55 100644
--- a/apps/www/src/public/r/styles/default/Sidebar14.json
+++ b/apps/www/src/public/r/styles/default/Sidebar14.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "sidebar"
   ],
diff --git a/apps/www/src/public/r/styles/default/Sidebar15.json b/apps/www/src/public/r/styles/default/Sidebar15.json
index 5a63ea70c..c19c82749 100644
--- a/apps/www/src/public/r/styles/default/Sidebar15.json
+++ b/apps/www/src/public/r/styles/default/Sidebar15.json
@@ -3,23 +3,13 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "SidebarLeft.vue",
-    "SidebarRight.vue",
     "breadcrumb",
     "separator",
     "sidebar",
     "collapsible",
     "calendar",
     "dropdown-menu",
-    "avatar",
-    "NavFavorites.vue",
-    "NavMain.vue",
-    "NavSecondary.vue",
-    "NavWorkspaces.vue",
-    "TeamSwitcher.vue",
-    "Calendars.vue",
-    "DatePicker.vue",
-    "NavUser.vue"
+    "avatar"
   ],
   "files": [
     {
diff --git a/apps/www/src/public/r/styles/new-york/Login01.json b/apps/www/src/public/r/styles/new-york/Login01.json
index 9e7d8cb2d..d933202f4 100644
--- a/apps/www/src/public/r/styles/new-york/Login01.json
+++ b/apps/www/src/public/r/styles/new-york/Login01.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "LoginForm.vue",
     "button",
     "card",
     "input",
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index 86432ecbd..82e5e30d4 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -3,12 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
-    "VersionSwitcher.vue",
     "label",
     "dropdown-menu"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
index 5ab8ce360..ba6f4259f 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar02.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -3,12 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
-    "VersionSwitcher.vue",
     "collapsible",
     "label",
     "dropdown-menu"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar03.json b/apps/www/src/public/r/styles/new-york/Sidebar03.json
index 12881329a..a65122408 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar03.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar03.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar04.json b/apps/www/src/public/r/styles/new-york/Sidebar04.json
index 4fdfff4de..b3756ecc5 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar04.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar04.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar05.json b/apps/www/src/public/r/styles/new-york/Sidebar05.json
index 34600cabb..5a319d5c3 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar05.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar05.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "SearchForm.vue",
     "collapsible",
     "label"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar06.json b/apps/www/src/public/r/styles/new-york/Sidebar06.json
index 556210097..cf21599a0 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar06.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar06.json
@@ -5,12 +5,9 @@
     "@vueuse/core"
   ],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "SidebarOptInForm.vue",
     "dropdown-menu",
     "button",
     "card"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index 62acb2765..762f20a1f 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -3,14 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "NavProjects.vue",
-    "NavUser.vue",
-    "TeamSwitcher.vue",
     "collapsible",
     "dropdown-menu",
     "avatar"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar08.json b/apps/www/src/public/r/styles/new-york/Sidebar08.json
index 472f743cd..0dfc42002 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar08.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar08.json
@@ -3,14 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavMain.vue",
-    "NavProjects.vue",
-    "NavSecondary.vue",
-    "NavUser.vue",
     "collapsible",
     "dropdown-menu",
     "avatar"
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar09.json b/apps/www/src/public/r/styles/new-york/Sidebar09.json
index 3fb1bbffc..4295b6e68 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar09.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar09.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavUser.vue",
     "label",
     "switch",
     "avatar",
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar10.json b/apps/www/src/public/r/styles/new-york/Sidebar10.json
index 8efa072b8..8e1fe9df2 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar10.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar10.json
@@ -3,16 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
-    "NavActions.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "NavFavorites.vue",
-    "NavMain.vue",
-    "NavSecondary.vue",
-    "NavWorkspaces.vue",
-    "TeamSwitcher.vue",
     "button",
     "popover",
     "dropdown-menu",
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar11.json b/apps/www/src/public/r/styles/new-york/Sidebar11.json
index 6545b1e0b..bf344883e 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar11.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar11.json
@@ -3,11 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "Tree.vue",
     "collapsible"
   ],
   "files": [
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar12.json b/apps/www/src/public/r/styles/new-york/Sidebar12.json
index 63f7acf8a..1a29d1755 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar12.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar12.json
@@ -3,13 +3,9 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "separator",
     "sidebar",
-    "Calendars.vue",
-    "DatePicker.vue",
-    "NavUser.vue",
     "collapsible",
     "calendar",
     "avatar",
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar13.json b/apps/www/src/public/r/styles/new-york/Sidebar13.json
index a7af51777..7f9a3416b 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar13.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar13.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "SettingsDialog.vue",
     "breadcrumb",
     "button",
     "dialog",
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar14.json b/apps/www/src/public/r/styles/new-york/Sidebar14.json
index a599da021..ba241a570 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar14.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar14.json
@@ -3,7 +3,6 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "AppSidebar.vue",
     "breadcrumb",
     "sidebar"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar15.json b/apps/www/src/public/r/styles/new-york/Sidebar15.json
index 1f8309572..1216573cd 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar15.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar15.json
@@ -3,23 +3,13 @@
   "type": "registry:block",
   "dependencies": [],
   "registryDependencies": [
-    "SidebarLeft.vue",
-    "SidebarRight.vue",
     "breadcrumb",
     "separator",
     "sidebar",
     "collapsible",
     "calendar",
     "dropdown-menu",
-    "avatar",
-    "NavFavorites.vue",
-    "NavMain.vue",
-    "NavSecondary.vue",
-    "NavWorkspaces.vue",
-    "TeamSwitcher.vue",
-    "Calendars.vue",
-    "DatePicker.vue",
-    "NavUser.vue"
+    "avatar"
   ],
   "files": [
     {
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 840ff7f3a..e7fab6108 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -6919,7 +6919,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "LoginForm.vue",
       "button",
       "card",
       "input",
@@ -6945,12 +6944,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
-      "VersionSwitcher.vue",
       "label",
       "dropdown-menu"
     ],
@@ -6986,12 +6982,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
-      "VersionSwitcher.vue",
       "collapsible",
       "label",
       "dropdown-menu"
@@ -7028,7 +7021,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar"
@@ -7053,7 +7045,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar"
@@ -7078,11 +7069,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
       "collapsible",
       "label"
     ],
@@ -7114,12 +7103,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "SidebarOptInForm.vue",
       "dropdown-menu",
       "button",
       "card"
@@ -7156,14 +7142,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "NavProjects.vue",
-      "NavUser.vue",
-      "TeamSwitcher.vue",
       "collapsible",
       "dropdown-menu",
       "avatar"
@@ -7212,14 +7193,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "NavProjects.vue",
-      "NavSecondary.vue",
-      "NavUser.vue",
       "collapsible",
       "dropdown-menu",
       "avatar"
@@ -7268,11 +7244,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavUser.vue",
       "label",
       "switch",
       "avatar",
@@ -7304,16 +7278,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
-      "NavActions.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavFavorites.vue",
-      "NavMain.vue",
-      "NavSecondary.vue",
-      "NavWorkspaces.vue",
-      "TeamSwitcher.vue",
       "button",
       "popover",
       "dropdown-menu",
@@ -7375,11 +7342,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "Tree.vue",
       "collapsible"
     ],
     "files": [
@@ -7408,13 +7373,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "Calendars.vue",
-      "DatePicker.vue",
-      "NavUser.vue",
       "collapsible",
       "calendar",
       "avatar",
@@ -7458,7 +7419,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "SettingsDialog.vue",
       "breadcrumb",
       "button",
       "dialog",
@@ -7484,7 +7444,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "sidebar"
     ],
@@ -7508,23 +7467,13 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "SidebarLeft.vue",
-      "SidebarRight.vue",
       "breadcrumb",
       "separator",
       "sidebar",
       "collapsible",
       "calendar",
       "dropdown-menu",
-      "avatar",
-      "NavFavorites.vue",
-      "NavMain.vue",
-      "NavSecondary.vue",
-      "NavWorkspaces.vue",
-      "TeamSwitcher.vue",
-      "Calendars.vue",
-      "DatePicker.vue",
-      "NavUser.vue"
+      "avatar"
     ],
     "files": [
       {
@@ -14334,7 +14283,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "LoginForm.vue",
       "button",
       "card",
       "input",
@@ -14360,12 +14308,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
-      "VersionSwitcher.vue",
       "label",
       "dropdown-menu"
     ],
@@ -14401,12 +14346,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
-      "VersionSwitcher.vue",
       "collapsible",
       "label",
       "dropdown-menu"
@@ -14443,7 +14385,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar"
@@ -14468,7 +14409,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar"
@@ -14493,11 +14433,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "SearchForm.vue",
       "collapsible",
       "label"
     ],
@@ -14529,12 +14467,9 @@
       "@vueuse/core"
     ],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "SidebarOptInForm.vue",
       "dropdown-menu",
       "button",
       "card"
@@ -14571,14 +14506,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "NavProjects.vue",
-      "NavUser.vue",
-      "TeamSwitcher.vue",
       "collapsible",
       "dropdown-menu",
       "avatar"
@@ -14627,14 +14557,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavMain.vue",
-      "NavProjects.vue",
-      "NavSecondary.vue",
-      "NavUser.vue",
       "collapsible",
       "dropdown-menu",
       "avatar"
@@ -14683,11 +14608,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavUser.vue",
       "label",
       "switch",
       "avatar",
@@ -14719,16 +14642,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
-      "NavActions.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "NavFavorites.vue",
-      "NavMain.vue",
-      "NavSecondary.vue",
-      "NavWorkspaces.vue",
-      "TeamSwitcher.vue",
       "button",
       "popover",
       "dropdown-menu",
@@ -14790,11 +14706,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "Tree.vue",
       "collapsible"
     ],
     "files": [
@@ -14823,13 +14737,9 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "separator",
       "sidebar",
-      "Calendars.vue",
-      "DatePicker.vue",
-      "NavUser.vue",
       "collapsible",
       "calendar",
       "avatar",
@@ -14873,7 +14783,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "SettingsDialog.vue",
       "breadcrumb",
       "button",
       "dialog",
@@ -14899,7 +14808,6 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "AppSidebar.vue",
       "breadcrumb",
       "sidebar"
     ],
@@ -14923,23 +14831,13 @@
     "type": "registry:block",
     "dependencies": [],
     "registryDependencies": [
-      "SidebarLeft.vue",
-      "SidebarRight.vue",
       "breadcrumb",
       "separator",
       "sidebar",
       "collapsible",
       "calendar",
       "dropdown-menu",
-      "avatar",
-      "NavFavorites.vue",
-      "NavMain.vue",
-      "NavSecondary.vue",
-      "NavWorkspaces.vue",
-      "TeamSwitcher.vue",
-      "Calendars.vue",
-      "DatePicker.vue",
-      "NavUser.vue"
+      "avatar"
     ],
     "files": [
       {
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index 80360fd09..7b44c25a4 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -213,7 +213,7 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
     const filepath = join(componentPath, dirent.name)
     const relativePath = join('ui', componentName, dirent.name)
     const source = await readFile(filepath, { encoding: 'utf8' })
-    const target = '' // `${componentName}/${dirent.name}`
+    const target = ''
 
     files.push({ content: source, path: relativePath, type, target })
 
@@ -291,7 +291,7 @@ async function getFileDependencies(filename: string, sourceCode: string) {
       peerDeps.forEach(dep => dependencies.add(dep))
     }
 
-    if (source.startsWith(REGISTRY_DEPENDENCY)) {
+    if (source.startsWith(REGISTRY_DEPENDENCY) && !source.endsWith('.vue')) {
       const component = source.split('/').at(-1)!
       registryDependencies.add(component)
     }
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index bfbaa0516..2288e9a97 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -210,7 +210,9 @@ export function getRegistryItemFileTargetPath(
   }
 
   if (file.type === 'registry:ui') {
-    return config.resolvedPaths.ui
+    // For UI component we place them in folder
+    const folder = file.path.split('/')[1]
+    return path.join(config.resolvedPaths.ui, folder)
   }
 
   if (file.type === 'registry:lib') {
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
index 2b226afe7..279174cd2 100644
--- a/packages/cli/src/utils/updaters/update-files.ts
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -22,9 +22,10 @@ export function resolveTargetDir(
   if (target.startsWith('~/')) {
     return path.join(config.resolvedPaths.cwd, target.replace('~/', ''))
   }
-  return projectInfo?.isSrcDir
-    ? path.join(config.resolvedPaths.cwd, 'src', target)
-    : path.join(config.resolvedPaths.cwd, target)
+  return path.join(config.resolvedPaths.cwd, target)
+  // return projectInfo?.isSrcDir
+  //   ? path.join(config.resolvedPaths.cwd, 'src', target)
+  //   : path.join(config.resolvedPaths.cwd, target)
 }
 
 export async function updateFiles(

From b3e10e480f118d98d3b2484c1c54c9577b62ddd6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 26 Nov 2024 17:34:54 +0800
Subject: [PATCH 24/39] chore: make sure to detect reka-ui as deps

---
 apps/www/src/public/r/index.json              | 326 +++++++++++----
 .../r/styles/default/CalendarWithSelect.json  |   3 +-
 .../DatePickerWithIndependentMonths.json      |   4 +-
 .../r/styles/default/DatePickerWithRange.json |   4 +-
 .../default/DropdownMenuCheckboxes.json       |   4 +-
 .../r/styles/default/RangeCalendarDemo.json   |   4 +-
 .../styles/default/TagsInputComboboxDemo.json |   4 +-
 .../public/r/styles/default/accordion.json    |   4 +-
 .../public/r/styles/default/alert-dialog.json |   4 +-
 .../public/r/styles/default/aspect-ratio.json |   4 +-
 .../public/r/styles/default/auto-form.json    |   3 +-
 .../src/public/r/styles/default/avatar.json   |   4 +-
 .../public/r/styles/default/breadcrumb.json   |   4 +-
 .../src/public/r/styles/default/button.json   |   4 +-
 .../src/public/r/styles/default/calendar.json |   4 +-
 .../public/r/styles/default/chart-area.json   |   3 +-
 .../src/public/r/styles/default/checkbox.json |   4 +-
 .../public/r/styles/default/collapsible.json  |   4 +-
 .../src/public/r/styles/default/command.json  |   4 +-
 .../public/r/styles/default/context-menu.json |   4 +-
 .../src/public/r/styles/default/dialog.json   |   4 +-
 .../src/public/r/styles/default/drawer.json   |   3 +-
 .../r/styles/default/dropdown-menu.json       |   4 +-
 .../www/src/public/r/styles/default/form.json |   1 +
 .../public/r/styles/default/hover-card.json   |   4 +-
 .../src/public/r/styles/default/label.json    |   4 +-
 .../src/public/r/styles/default/menubar.json  |   4 +-
 .../r/styles/default/navigation-menu.json     |   4 +-
 .../public/r/styles/default/number-field.json |   4 +-
 .../public/r/styles/default/pagination.json   |   4 +-
 .../public/r/styles/default/pin-input.json    |   4 +-
 .../src/public/r/styles/default/popover.json  |   4 +-
 .../src/public/r/styles/default/progress.json |   4 +-
 .../public/r/styles/default/radio-group.json  |   4 +-
 .../r/styles/default/range-calendar.json      |   4 +-
 .../public/r/styles/default/resizable.json    |   4 +-
 .../public/r/styles/default/scroll-area.json  |   4 +-
 .../src/public/r/styles/default/select.json   |   4 +-
 .../public/r/styles/default/separator.json    |   4 +-
 .../src/public/r/styles/default/sheet.json    |   4 +-
 .../src/public/r/styles/default/sidebar.json  |   1 +
 .../src/public/r/styles/default/slider.json   |   4 +-
 .../src/public/r/styles/default/stepper.json  |   4 +-
 .../src/public/r/styles/default/switch.json   |   4 +-
 .../www/src/public/r/styles/default/tabs.json |   4 +-
 .../public/r/styles/default/tags-input.json   |   4 +-
 .../src/public/r/styles/default/toast.json    |   4 +-
 .../public/r/styles/default/toggle-group.json |   4 +-
 .../src/public/r/styles/default/toggle.json   |   4 +-
 .../src/public/r/styles/default/tooltip.json  |   4 +-
 .../r/styles/new-york/CalendarWithSelect.json |   3 +-
 .../DatePickerWithIndependentMonths.json      |   4 +-
 .../styles/new-york/DatePickerWithRange.json  |   4 +-
 .../new-york/DropdownMenuCheckboxes.json      |   4 +-
 .../r/styles/new-york/RangeCalendarDemo.json  |   4 +-
 .../new-york/TagsInputComboboxDemo.json       |   4 +-
 .../public/r/styles/new-york/accordion.json   |   4 +-
 .../r/styles/new-york/alert-dialog.json       |   4 +-
 .../r/styles/new-york/aspect-ratio.json       |   4 +-
 .../public/r/styles/new-york/auto-form.json   |   3 +-
 .../src/public/r/styles/new-york/avatar.json  |   4 +-
 .../public/r/styles/new-york/breadcrumb.json  |   4 +-
 .../src/public/r/styles/new-york/button.json  |   4 +-
 .../public/r/styles/new-york/calendar.json    |   4 +-
 .../public/r/styles/new-york/chart-area.json  |   3 +-
 .../public/r/styles/new-york/checkbox.json    |   4 +-
 .../public/r/styles/new-york/collapsible.json |   4 +-
 .../src/public/r/styles/new-york/command.json |   4 +-
 .../r/styles/new-york/context-menu.json       |   4 +-
 .../src/public/r/styles/new-york/dialog.json  |   4 +-
 .../src/public/r/styles/new-york/drawer.json  |   3 +-
 .../r/styles/new-york/dropdown-menu.json      |   4 +-
 .../src/public/r/styles/new-york/form.json    |   1 +
 .../public/r/styles/new-york/hover-card.json  |   4 +-
 .../src/public/r/styles/new-york/label.json   |   4 +-
 .../src/public/r/styles/new-york/menubar.json |   4 +-
 .../r/styles/new-york/navigation-menu.json    |   4 +-
 .../r/styles/new-york/number-field.json       |   4 +-
 .../public/r/styles/new-york/pagination.json  |   4 +-
 .../public/r/styles/new-york/pin-input.json   |   4 +-
 .../src/public/r/styles/new-york/popover.json |   4 +-
 .../public/r/styles/new-york/progress.json    |   4 +-
 .../public/r/styles/new-york/radio-group.json |   4 +-
 .../r/styles/new-york/range-calendar.json     |   4 +-
 .../public/r/styles/new-york/resizable.json   |   4 +-
 .../public/r/styles/new-york/scroll-area.json |   4 +-
 .../src/public/r/styles/new-york/select.json  |   4 +-
 .../public/r/styles/new-york/separator.json   |   4 +-
 .../src/public/r/styles/new-york/sheet.json   |   4 +-
 .../src/public/r/styles/new-york/sidebar.json |   1 +
 .../src/public/r/styles/new-york/slider.json  |   4 +-
 .../src/public/r/styles/new-york/stepper.json |   4 +-
 .../src/public/r/styles/new-york/switch.json  |   4 +-
 .../src/public/r/styles/new-york/tabs.json    |   4 +-
 .../public/r/styles/new-york/tags-input.json  |   4 +-
 .../src/public/r/styles/new-york/toast.json   |   4 +-
 .../r/styles/new-york/toggle-group.json       |   4 +-
 .../src/public/r/styles/new-york/toggle.json  |   4 +-
 .../src/public/r/styles/new-york/tooltip.json |   4 +-
 apps/www/src/public/r/temp.json               | 372 +++++++++++++-----
 apps/www/src/registry/crawl-content.ts        |   1 +
 101 files changed, 801 insertions(+), 270 deletions(-)

diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index 9b55e7bc3..9d3d89698 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -2,7 +2,9 @@
   {
     "name": "accordion",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -58,7 +60,9 @@
   {
     "name": "alert-dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -109,7 +113,9 @@
   {
     "name": "aspect-ratio",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -128,7 +134,8 @@
     "dependencies": [
       "vee-validate",
       "@vee-validate/zod",
-      "zod"
+      "zod",
+      "reka-ui"
     ],
     "registryDependencies": [
       "form",
@@ -216,7 +223,9 @@
   {
     "name": "avatar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -260,7 +269,9 @@
   {
     "name": "breadcrumb",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -302,7 +313,9 @@
   {
     "name": "button",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -320,7 +333,9 @@
   {
     "name": "calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -508,7 +523,8 @@
     "dependencies": [
       "@unovis/vue",
       "@unovis/ts",
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -597,7 +613,9 @@
   {
     "name": "checkbox",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -615,7 +633,9 @@
   {
     "name": "collapsible",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -639,7 +659,9 @@
   {
     "name": "command",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "dialog"
@@ -690,7 +712,9 @@
   {
     "name": "context-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -764,7 +788,9 @@
   {
     "name": "dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -815,7 +841,8 @@
     "name": "drawer",
     "type": "registry:ui",
     "dependencies": [
-      "vaul-vue"
+      "vaul-vue",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils"
@@ -858,7 +885,9 @@
   {
     "name": "dropdown-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -929,6 +958,7 @@
     "name": "form",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "vee-validate",
       "@vee-validate/zod",
       "zod"
@@ -975,7 +1005,9 @@
   {
     "name": "hover-card",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1021,7 +1053,9 @@
   {
     "name": "label",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1039,7 +1073,9 @@
   {
     "name": "menubar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1113,7 +1149,9 @@
   {
     "name": "navigation-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1159,7 +1197,9 @@
   {
     "name": "number-field",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1193,7 +1233,9 @@
   {
     "name": "pagination",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -1228,7 +1270,9 @@
   {
     "name": "pin-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1258,7 +1302,9 @@
   {
     "name": "popover",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1284,7 +1330,9 @@
   {
     "name": "progress",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1302,7 +1350,9 @@
   {
     "name": "radio-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1324,7 +1374,9 @@
   {
     "name": "range-calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -1387,7 +1439,9 @@
   {
     "name": "resizable",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1409,7 +1463,9 @@
   {
     "name": "scroll-area",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1431,7 +1487,9 @@
   {
     "name": "select",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1489,7 +1547,9 @@
   {
     "name": "separator",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1507,7 +1567,9 @@
   {
     "name": "sheet",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1554,6 +1616,7 @@
     "name": "sidebar",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "@vueuse/core"
     ],
     "registryDependencies": [
@@ -1693,7 +1756,9 @@
   {
     "name": "slider",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1729,7 +1794,9 @@
   {
     "name": "stepper",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1771,7 +1838,9 @@
   {
     "name": "switch",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1839,7 +1908,9 @@
   {
     "name": "tabs",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1869,7 +1940,9 @@
   {
     "name": "tags-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1923,7 +1996,9 @@
   {
     "name": "toast",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1973,7 +2048,9 @@
   {
     "name": "toggle",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1991,7 +2068,9 @@
   {
     "name": "toggle-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "toggle",
       "utils"
@@ -2014,7 +2093,9 @@
   {
     "name": "tooltip",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2066,7 +2147,9 @@
   {
     "name": "accordion",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2122,7 +2205,9 @@
   {
     "name": "alert-dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -2173,7 +2258,9 @@
   {
     "name": "aspect-ratio",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -2192,7 +2279,8 @@
     "dependencies": [
       "vee-validate",
       "@vee-validate/zod",
-      "zod"
+      "zod",
+      "reka-ui"
     ],
     "registryDependencies": [
       "form",
@@ -2280,7 +2368,9 @@
   {
     "name": "avatar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2324,7 +2414,9 @@
   {
     "name": "breadcrumb",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2366,7 +2458,9 @@
   {
     "name": "button",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2384,7 +2478,9 @@
   {
     "name": "calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -2572,7 +2668,8 @@
     "dependencies": [
       "@unovis/vue",
       "@unovis/ts",
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -2661,7 +2758,9 @@
   {
     "name": "checkbox",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2679,7 +2778,9 @@
   {
     "name": "collapsible",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -2703,7 +2804,9 @@
   {
     "name": "command",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "dialog"
@@ -2754,7 +2857,9 @@
   {
     "name": "context-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2828,7 +2933,9 @@
   {
     "name": "dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2879,7 +2986,8 @@
     "name": "drawer",
     "type": "registry:ui",
     "dependencies": [
-      "vaul-vue"
+      "vaul-vue",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils"
@@ -2922,7 +3030,9 @@
   {
     "name": "dropdown-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2993,6 +3103,7 @@
     "name": "form",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "vee-validate",
       "@vee-validate/zod",
       "zod"
@@ -3039,7 +3150,9 @@
   {
     "name": "hover-card",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3085,7 +3198,9 @@
   {
     "name": "label",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3103,7 +3218,9 @@
   {
     "name": "menubar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3177,7 +3294,9 @@
   {
     "name": "navigation-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3223,7 +3342,9 @@
   {
     "name": "number-field",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3257,7 +3378,9 @@
   {
     "name": "pagination",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -3292,7 +3415,9 @@
   {
     "name": "pin-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3322,7 +3447,9 @@
   {
     "name": "popover",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3348,7 +3475,9 @@
   {
     "name": "progress",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3366,7 +3495,9 @@
   {
     "name": "radio-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3388,7 +3519,9 @@
   {
     "name": "range-calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -3451,7 +3584,9 @@
   {
     "name": "resizable",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3473,7 +3608,9 @@
   {
     "name": "scroll-area",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3495,7 +3632,9 @@
   {
     "name": "select",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3553,7 +3692,9 @@
   {
     "name": "separator",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3571,7 +3712,9 @@
   {
     "name": "sheet",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3618,6 +3761,7 @@
     "name": "sidebar",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "@vueuse/core"
     ],
     "registryDependencies": [
@@ -3757,7 +3901,9 @@
   {
     "name": "slider",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3793,7 +3939,9 @@
   {
     "name": "stepper",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3835,7 +3983,9 @@
   {
     "name": "switch",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3903,7 +4053,9 @@
   {
     "name": "tabs",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3933,7 +4085,9 @@
   {
     "name": "tags-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3987,7 +4141,9 @@
   {
     "name": "toast",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -4037,7 +4193,9 @@
   {
     "name": "toggle",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -4055,7 +4213,9 @@
   {
     "name": "toggle-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "toggle",
       "utils"
@@ -4078,7 +4238,9 @@
   {
     "name": "tooltip",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
diff --git a/apps/www/src/public/r/styles/default/CalendarWithSelect.json b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
index 814e3c6e0..c13a1d4b6 100644
--- a/apps/www/src/public/r/styles/default/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
@@ -2,7 +2,8 @@
   "name": "CalendarWithSelect",
   "type": "registry:example",
   "dependencies": [
-    "@vueuse/core"
+    "@vueuse/core",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils",
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
index b2869b045..187115c78 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
@@ -1,7 +1,9 @@
 {
   "name": "DatePickerWithIndependentMonths",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button",
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithRange.json b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
index 14c882b89..bdecd3880 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
@@ -1,7 +1,9 @@
 {
   "name": "DatePickerWithRange",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button",
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
index 73ba0c2d2..30500fd74 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
@@ -1,7 +1,9 @@
 {
   "name": "DropdownMenuCheckboxes",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "button",
     "dropdown-menu"
diff --git a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
index 17b8b5374..dcfe3a275 100644
--- a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
@@ -1,7 +1,9 @@
 {
   "name": "RangeCalendarDemo",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "range-calendar"
   ],
diff --git a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
index 5ca21f279..5ab63b176 100644
--- a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
@@ -1,7 +1,9 @@
 {
   "name": "TagsInputComboboxDemo",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "command",
     "tags-input"
diff --git a/apps/www/src/public/r/styles/default/accordion.json b/apps/www/src/public/r/styles/default/accordion.json
index e0f5e2ff2..7a9c60351 100644
--- a/apps/www/src/public/r/styles/default/accordion.json
+++ b/apps/www/src/public/r/styles/default/accordion.json
@@ -1,7 +1,9 @@
 {
   "name": "accordion",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/alert-dialog.json b/apps/www/src/public/r/styles/default/alert-dialog.json
index 18908cef9..fb58ac39b 100644
--- a/apps/www/src/public/r/styles/default/alert-dialog.json
+++ b/apps/www/src/public/r/styles/default/alert-dialog.json
@@ -1,7 +1,9 @@
 {
   "name": "alert-dialog",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/default/aspect-ratio.json b/apps/www/src/public/r/styles/default/aspect-ratio.json
index c579b3ec2..35c0917fb 100644
--- a/apps/www/src/public/r/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/default/aspect-ratio.json
@@ -1,7 +1,9 @@
 {
   "name": "aspect-ratio",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [],
   "files": [
     {
diff --git a/apps/www/src/public/r/styles/default/auto-form.json b/apps/www/src/public/r/styles/default/auto-form.json
index cb5f7276a..e0937d4db 100644
--- a/apps/www/src/public/r/styles/default/auto-form.json
+++ b/apps/www/src/public/r/styles/default/auto-form.json
@@ -4,7 +4,8 @@
   "dependencies": [
     "vee-validate",
     "@vee-validate/zod",
-    "zod"
+    "zod",
+    "reka-ui"
   ],
   "registryDependencies": [
     "form",
diff --git a/apps/www/src/public/r/styles/default/avatar.json b/apps/www/src/public/r/styles/default/avatar.json
index a779e8509..f249473af 100644
--- a/apps/www/src/public/r/styles/default/avatar.json
+++ b/apps/www/src/public/r/styles/default/avatar.json
@@ -1,7 +1,9 @@
 {
   "name": "avatar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/breadcrumb.json b/apps/www/src/public/r/styles/default/breadcrumb.json
index 584c016a7..b259132c6 100644
--- a/apps/www/src/public/r/styles/default/breadcrumb.json
+++ b/apps/www/src/public/r/styles/default/breadcrumb.json
@@ -1,7 +1,9 @@
 {
   "name": "breadcrumb",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/button.json b/apps/www/src/public/r/styles/default/button.json
index 29008e758..3c5b4d726 100644
--- a/apps/www/src/public/r/styles/default/button.json
+++ b/apps/www/src/public/r/styles/default/button.json
@@ -1,7 +1,9 @@
 {
   "name": "button",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/calendar.json b/apps/www/src/public/r/styles/default/calendar.json
index 8fc29689b..3efa90311 100644
--- a/apps/www/src/public/r/styles/default/calendar.json
+++ b/apps/www/src/public/r/styles/default/calendar.json
@@ -1,7 +1,9 @@
 {
   "name": "calendar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/default/chart-area.json b/apps/www/src/public/r/styles/default/chart-area.json
index 75d29d80f..99dbcfa06 100644
--- a/apps/www/src/public/r/styles/default/chart-area.json
+++ b/apps/www/src/public/r/styles/default/chart-area.json
@@ -4,7 +4,8 @@
   "dependencies": [
     "@unovis/vue",
     "@unovis/ts",
-    "@vueuse/core"
+    "@vueuse/core",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils",
diff --git a/apps/www/src/public/r/styles/default/checkbox.json b/apps/www/src/public/r/styles/default/checkbox.json
index af760208a..87182b8ae 100644
--- a/apps/www/src/public/r/styles/default/checkbox.json
+++ b/apps/www/src/public/r/styles/default/checkbox.json
@@ -1,7 +1,9 @@
 {
   "name": "checkbox",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/collapsible.json b/apps/www/src/public/r/styles/default/collapsible.json
index d6336bf4f..366a8c743 100644
--- a/apps/www/src/public/r/styles/default/collapsible.json
+++ b/apps/www/src/public/r/styles/default/collapsible.json
@@ -1,7 +1,9 @@
 {
   "name": "collapsible",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [],
   "files": [
     {
diff --git a/apps/www/src/public/r/styles/default/command.json b/apps/www/src/public/r/styles/default/command.json
index e4a8b3569..6b3fb3bdd 100644
--- a/apps/www/src/public/r/styles/default/command.json
+++ b/apps/www/src/public/r/styles/default/command.json
@@ -1,7 +1,9 @@
 {
   "name": "command",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "dialog"
diff --git a/apps/www/src/public/r/styles/default/context-menu.json b/apps/www/src/public/r/styles/default/context-menu.json
index 4641dec64..361b2bd37 100644
--- a/apps/www/src/public/r/styles/default/context-menu.json
+++ b/apps/www/src/public/r/styles/default/context-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "context-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/dialog.json b/apps/www/src/public/r/styles/default/dialog.json
index ec4336934..3bbdd3ac9 100644
--- a/apps/www/src/public/r/styles/default/dialog.json
+++ b/apps/www/src/public/r/styles/default/dialog.json
@@ -1,7 +1,9 @@
 {
   "name": "dialog",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/drawer.json b/apps/www/src/public/r/styles/default/drawer.json
index 33bc4910f..14adb9b5f 100644
--- a/apps/www/src/public/r/styles/default/drawer.json
+++ b/apps/www/src/public/r/styles/default/drawer.json
@@ -2,7 +2,8 @@
   "name": "drawer",
   "type": "registry:ui",
   "dependencies": [
-    "vaul-vue"
+    "vaul-vue",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils"
diff --git a/apps/www/src/public/r/styles/default/dropdown-menu.json b/apps/www/src/public/r/styles/default/dropdown-menu.json
index 92805cac8..a6d369c18 100644
--- a/apps/www/src/public/r/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/default/dropdown-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "dropdown-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/form.json b/apps/www/src/public/r/styles/default/form.json
index 6c8aaf2c1..e6f1271df 100644
--- a/apps/www/src/public/r/styles/default/form.json
+++ b/apps/www/src/public/r/styles/default/form.json
@@ -2,6 +2,7 @@
   "name": "form",
   "type": "registry:ui",
   "dependencies": [
+    "reka-ui",
     "vee-validate",
     "@vee-validate/zod",
     "zod"
diff --git a/apps/www/src/public/r/styles/default/hover-card.json b/apps/www/src/public/r/styles/default/hover-card.json
index f41248ba0..c09b28f5c 100644
--- a/apps/www/src/public/r/styles/default/hover-card.json
+++ b/apps/www/src/public/r/styles/default/hover-card.json
@@ -1,7 +1,9 @@
 {
   "name": "hover-card",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/label.json b/apps/www/src/public/r/styles/default/label.json
index 5c8db8412..db62597f1 100644
--- a/apps/www/src/public/r/styles/default/label.json
+++ b/apps/www/src/public/r/styles/default/label.json
@@ -1,7 +1,9 @@
 {
   "name": "label",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/menubar.json b/apps/www/src/public/r/styles/default/menubar.json
index f60c35324..1ac760736 100644
--- a/apps/www/src/public/r/styles/default/menubar.json
+++ b/apps/www/src/public/r/styles/default/menubar.json
@@ -1,7 +1,9 @@
 {
   "name": "menubar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/navigation-menu.json b/apps/www/src/public/r/styles/default/navigation-menu.json
index 8784ea948..6e82bea08 100644
--- a/apps/www/src/public/r/styles/default/navigation-menu.json
+++ b/apps/www/src/public/r/styles/default/navigation-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "navigation-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/number-field.json b/apps/www/src/public/r/styles/default/number-field.json
index 346656783..d8fff0e42 100644
--- a/apps/www/src/public/r/styles/default/number-field.json
+++ b/apps/www/src/public/r/styles/default/number-field.json
@@ -1,7 +1,9 @@
 {
   "name": "number-field",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/pagination.json b/apps/www/src/public/r/styles/default/pagination.json
index 89d49f10e..6ac95092e 100644
--- a/apps/www/src/public/r/styles/default/pagination.json
+++ b/apps/www/src/public/r/styles/default/pagination.json
@@ -1,7 +1,9 @@
 {
   "name": "pagination",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/default/pin-input.json b/apps/www/src/public/r/styles/default/pin-input.json
index 3c524f5f4..881b5e987 100644
--- a/apps/www/src/public/r/styles/default/pin-input.json
+++ b/apps/www/src/public/r/styles/default/pin-input.json
@@ -1,7 +1,9 @@
 {
   "name": "pin-input",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/popover.json b/apps/www/src/public/r/styles/default/popover.json
index c07b45977..7f4f2053f 100644
--- a/apps/www/src/public/r/styles/default/popover.json
+++ b/apps/www/src/public/r/styles/default/popover.json
@@ -1,7 +1,9 @@
 {
   "name": "popover",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/progress.json b/apps/www/src/public/r/styles/default/progress.json
index f5c3b9725..4b6f65621 100644
--- a/apps/www/src/public/r/styles/default/progress.json
+++ b/apps/www/src/public/r/styles/default/progress.json
@@ -1,7 +1,9 @@
 {
   "name": "progress",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/radio-group.json b/apps/www/src/public/r/styles/default/radio-group.json
index 2a22ee486..98d265d17 100644
--- a/apps/www/src/public/r/styles/default/radio-group.json
+++ b/apps/www/src/public/r/styles/default/radio-group.json
@@ -1,7 +1,9 @@
 {
   "name": "radio-group",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/range-calendar.json b/apps/www/src/public/r/styles/default/range-calendar.json
index 3679a9538..3724d378d 100644
--- a/apps/www/src/public/r/styles/default/range-calendar.json
+++ b/apps/www/src/public/r/styles/default/range-calendar.json
@@ -1,7 +1,9 @@
 {
   "name": "range-calendar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/default/resizable.json b/apps/www/src/public/r/styles/default/resizable.json
index 4b94744e1..9d7e1ccb3 100644
--- a/apps/www/src/public/r/styles/default/resizable.json
+++ b/apps/www/src/public/r/styles/default/resizable.json
@@ -1,7 +1,9 @@
 {
   "name": "resizable",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/scroll-area.json b/apps/www/src/public/r/styles/default/scroll-area.json
index f5fe2cc7f..009cda75c 100644
--- a/apps/www/src/public/r/styles/default/scroll-area.json
+++ b/apps/www/src/public/r/styles/default/scroll-area.json
@@ -1,7 +1,9 @@
 {
   "name": "scroll-area",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/select.json b/apps/www/src/public/r/styles/default/select.json
index fdf551cec..8e2d083de 100644
--- a/apps/www/src/public/r/styles/default/select.json
+++ b/apps/www/src/public/r/styles/default/select.json
@@ -1,7 +1,9 @@
 {
   "name": "select",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/separator.json b/apps/www/src/public/r/styles/default/separator.json
index d3314e647..aa8bcbda5 100644
--- a/apps/www/src/public/r/styles/default/separator.json
+++ b/apps/www/src/public/r/styles/default/separator.json
@@ -1,7 +1,9 @@
 {
   "name": "separator",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/sheet.json b/apps/www/src/public/r/styles/default/sheet.json
index 3f28ddba9..d92bb8c7b 100644
--- a/apps/www/src/public/r/styles/default/sheet.json
+++ b/apps/www/src/public/r/styles/default/sheet.json
@@ -1,7 +1,9 @@
 {
   "name": "sheet",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index ca98cba28..2a0cf4a74 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -2,6 +2,7 @@
   "name": "sidebar",
   "type": "registry:ui",
   "dependencies": [
+    "reka-ui",
     "@vueuse/core"
   ],
   "registryDependencies": [
diff --git a/apps/www/src/public/r/styles/default/slider.json b/apps/www/src/public/r/styles/default/slider.json
index 4c8901c35..ebcaf6578 100644
--- a/apps/www/src/public/r/styles/default/slider.json
+++ b/apps/www/src/public/r/styles/default/slider.json
@@ -1,7 +1,9 @@
 {
   "name": "slider",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/stepper.json b/apps/www/src/public/r/styles/default/stepper.json
index 47164abdb..eedbf3db2 100644
--- a/apps/www/src/public/r/styles/default/stepper.json
+++ b/apps/www/src/public/r/styles/default/stepper.json
@@ -1,7 +1,9 @@
 {
   "name": "stepper",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/switch.json b/apps/www/src/public/r/styles/default/switch.json
index 947767a79..b557d0f86 100644
--- a/apps/www/src/public/r/styles/default/switch.json
+++ b/apps/www/src/public/r/styles/default/switch.json
@@ -1,7 +1,9 @@
 {
   "name": "switch",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/tabs.json b/apps/www/src/public/r/styles/default/tabs.json
index 8b847e6a9..5d2fcdd43 100644
--- a/apps/www/src/public/r/styles/default/tabs.json
+++ b/apps/www/src/public/r/styles/default/tabs.json
@@ -1,7 +1,9 @@
 {
   "name": "tabs",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/tags-input.json b/apps/www/src/public/r/styles/default/tags-input.json
index e56c5ec39..4a417741e 100644
--- a/apps/www/src/public/r/styles/default/tags-input.json
+++ b/apps/www/src/public/r/styles/default/tags-input.json
@@ -1,7 +1,9 @@
 {
   "name": "tags-input",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/toast.json b/apps/www/src/public/r/styles/default/toast.json
index d977a0fd1..e8d0086cc 100644
--- a/apps/www/src/public/r/styles/default/toast.json
+++ b/apps/www/src/public/r/styles/default/toast.json
@@ -1,7 +1,9 @@
 {
   "name": "toast",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/toggle-group.json b/apps/www/src/public/r/styles/default/toggle-group.json
index 2a9432327..a406880d7 100644
--- a/apps/www/src/public/r/styles/default/toggle-group.json
+++ b/apps/www/src/public/r/styles/default/toggle-group.json
@@ -1,7 +1,9 @@
 {
   "name": "toggle-group",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "toggle",
     "utils"
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
index 46942f048..f282acaf1 100644
--- a/apps/www/src/public/r/styles/default/toggle.json
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -1,7 +1,9 @@
 {
   "name": "toggle",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/default/tooltip.json b/apps/www/src/public/r/styles/default/tooltip.json
index 860507df5..f39f65ebf 100644
--- a/apps/www/src/public/r/styles/default/tooltip.json
+++ b/apps/www/src/public/r/styles/default/tooltip.json
@@ -1,7 +1,9 @@
 {
   "name": "tooltip",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
index 78d0e8a89..d854b12f9 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
@@ -2,7 +2,8 @@
   "name": "CalendarWithSelect",
   "type": "registry:example",
   "dependencies": [
-    "@vueuse/core"
+    "@vueuse/core",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils",
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
index c5e8780f0..911e16acf 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -1,7 +1,9 @@
 {
   "name": "DatePickerWithIndependentMonths",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button",
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
index f259da24d..530a2eb0c 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -1,7 +1,9 @@
 {
   "name": "DatePickerWithRange",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button",
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
index 2a73d3a12..bf5bc2747 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
@@ -1,7 +1,9 @@
 {
   "name": "DropdownMenuCheckboxes",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "button",
     "dropdown-menu"
diff --git a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
index dd502996b..40ed4cef6 100644
--- a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
@@ -1,7 +1,9 @@
 {
   "name": "RangeCalendarDemo",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "range-calendar"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
index b0a877e5b..f09c286b3 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
@@ -1,7 +1,9 @@
 {
   "name": "TagsInputComboboxDemo",
   "type": "registry:example",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "command",
     "tags-input"
diff --git a/apps/www/src/public/r/styles/new-york/accordion.json b/apps/www/src/public/r/styles/new-york/accordion.json
index 47b5242e0..41e782b96 100644
--- a/apps/www/src/public/r/styles/new-york/accordion.json
+++ b/apps/www/src/public/r/styles/new-york/accordion.json
@@ -1,7 +1,9 @@
 {
   "name": "accordion",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/alert-dialog.json b/apps/www/src/public/r/styles/new-york/alert-dialog.json
index 8aa6ad743..f0dad9af0 100644
--- a/apps/www/src/public/r/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/r/styles/new-york/alert-dialog.json
@@ -1,7 +1,9 @@
 {
   "name": "alert-dialog",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/new-york/aspect-ratio.json b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
index c579b3ec2..35c0917fb 100644
--- a/apps/www/src/public/r/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/r/styles/new-york/aspect-ratio.json
@@ -1,7 +1,9 @@
 {
   "name": "aspect-ratio",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [],
   "files": [
     {
diff --git a/apps/www/src/public/r/styles/new-york/auto-form.json b/apps/www/src/public/r/styles/new-york/auto-form.json
index ba955df3f..2c0ac13c7 100644
--- a/apps/www/src/public/r/styles/new-york/auto-form.json
+++ b/apps/www/src/public/r/styles/new-york/auto-form.json
@@ -4,7 +4,8 @@
   "dependencies": [
     "vee-validate",
     "@vee-validate/zod",
-    "zod"
+    "zod",
+    "reka-ui"
   ],
   "registryDependencies": [
     "form",
diff --git a/apps/www/src/public/r/styles/new-york/avatar.json b/apps/www/src/public/r/styles/new-york/avatar.json
index a779e8509..f249473af 100644
--- a/apps/www/src/public/r/styles/new-york/avatar.json
+++ b/apps/www/src/public/r/styles/new-york/avatar.json
@@ -1,7 +1,9 @@
 {
   "name": "avatar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/breadcrumb.json b/apps/www/src/public/r/styles/new-york/breadcrumb.json
index 9904992a1..d2b762850 100644
--- a/apps/www/src/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/r/styles/new-york/breadcrumb.json
@@ -1,7 +1,9 @@
 {
   "name": "breadcrumb",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/button.json b/apps/www/src/public/r/styles/new-york/button.json
index 6cffc1406..cdd7258fd 100644
--- a/apps/www/src/public/r/styles/new-york/button.json
+++ b/apps/www/src/public/r/styles/new-york/button.json
@@ -1,7 +1,9 @@
 {
   "name": "button",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/calendar.json b/apps/www/src/public/r/styles/new-york/calendar.json
index f6ff50e85..532396cd9 100644
--- a/apps/www/src/public/r/styles/new-york/calendar.json
+++ b/apps/www/src/public/r/styles/new-york/calendar.json
@@ -1,7 +1,9 @@
 {
   "name": "calendar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/new-york/chart-area.json b/apps/www/src/public/r/styles/new-york/chart-area.json
index 8133bc765..ac484f2f9 100644
--- a/apps/www/src/public/r/styles/new-york/chart-area.json
+++ b/apps/www/src/public/r/styles/new-york/chart-area.json
@@ -4,7 +4,8 @@
   "dependencies": [
     "@unovis/vue",
     "@unovis/ts",
-    "@vueuse/core"
+    "@vueuse/core",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils",
diff --git a/apps/www/src/public/r/styles/new-york/checkbox.json b/apps/www/src/public/r/styles/new-york/checkbox.json
index 211d41fe5..32e40e76d 100644
--- a/apps/www/src/public/r/styles/new-york/checkbox.json
+++ b/apps/www/src/public/r/styles/new-york/checkbox.json
@@ -1,7 +1,9 @@
 {
   "name": "checkbox",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/collapsible.json b/apps/www/src/public/r/styles/new-york/collapsible.json
index d6336bf4f..366a8c743 100644
--- a/apps/www/src/public/r/styles/new-york/collapsible.json
+++ b/apps/www/src/public/r/styles/new-york/collapsible.json
@@ -1,7 +1,9 @@
 {
   "name": "collapsible",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [],
   "files": [
     {
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 67500d085..3dfdf9d93 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -1,7 +1,9 @@
 {
   "name": "command",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "dialog"
diff --git a/apps/www/src/public/r/styles/new-york/context-menu.json b/apps/www/src/public/r/styles/new-york/context-menu.json
index 0f763fa79..8875b22be 100644
--- a/apps/www/src/public/r/styles/new-york/context-menu.json
+++ b/apps/www/src/public/r/styles/new-york/context-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "context-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/dialog.json b/apps/www/src/public/r/styles/new-york/dialog.json
index f758bc155..9f6707c6a 100644
--- a/apps/www/src/public/r/styles/new-york/dialog.json
+++ b/apps/www/src/public/r/styles/new-york/dialog.json
@@ -1,7 +1,9 @@
 {
   "name": "dialog",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/drawer.json b/apps/www/src/public/r/styles/new-york/drawer.json
index 33bc4910f..14adb9b5f 100644
--- a/apps/www/src/public/r/styles/new-york/drawer.json
+++ b/apps/www/src/public/r/styles/new-york/drawer.json
@@ -2,7 +2,8 @@
   "name": "drawer",
   "type": "registry:ui",
   "dependencies": [
-    "vaul-vue"
+    "vaul-vue",
+    "reka-ui"
   ],
   "registryDependencies": [
     "utils"
diff --git a/apps/www/src/public/r/styles/new-york/dropdown-menu.json b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
index 489cfa0aa..274453974 100644
--- a/apps/www/src/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "dropdown-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/form.json b/apps/www/src/public/r/styles/new-york/form.json
index 3f952f0ee..d632a2bf3 100644
--- a/apps/www/src/public/r/styles/new-york/form.json
+++ b/apps/www/src/public/r/styles/new-york/form.json
@@ -2,6 +2,7 @@
   "name": "form",
   "type": "registry:ui",
   "dependencies": [
+    "reka-ui",
     "vee-validate",
     "@vee-validate/zod",
     "zod"
diff --git a/apps/www/src/public/r/styles/new-york/hover-card.json b/apps/www/src/public/r/styles/new-york/hover-card.json
index f41248ba0..c09b28f5c 100644
--- a/apps/www/src/public/r/styles/new-york/hover-card.json
+++ b/apps/www/src/public/r/styles/new-york/hover-card.json
@@ -1,7 +1,9 @@
 {
   "name": "hover-card",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/label.json b/apps/www/src/public/r/styles/new-york/label.json
index 5c8db8412..db62597f1 100644
--- a/apps/www/src/public/r/styles/new-york/label.json
+++ b/apps/www/src/public/r/styles/new-york/label.json
@@ -1,7 +1,9 @@
 {
   "name": "label",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/menubar.json b/apps/www/src/public/r/styles/new-york/menubar.json
index 553ced462..bd59af5bd 100644
--- a/apps/www/src/public/r/styles/new-york/menubar.json
+++ b/apps/www/src/public/r/styles/new-york/menubar.json
@@ -1,7 +1,9 @@
 {
   "name": "menubar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/navigation-menu.json b/apps/www/src/public/r/styles/new-york/navigation-menu.json
index 83613a4e0..ec6095cb0 100644
--- a/apps/www/src/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/r/styles/new-york/navigation-menu.json
@@ -1,7 +1,9 @@
 {
   "name": "navigation-menu",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/number-field.json b/apps/www/src/public/r/styles/new-york/number-field.json
index b6c2fe3fc..772c7228b 100644
--- a/apps/www/src/public/r/styles/new-york/number-field.json
+++ b/apps/www/src/public/r/styles/new-york/number-field.json
@@ -1,7 +1,9 @@
 {
   "name": "number-field",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/pagination.json b/apps/www/src/public/r/styles/new-york/pagination.json
index fb11a30c4..10fb693e3 100644
--- a/apps/www/src/public/r/styles/new-york/pagination.json
+++ b/apps/www/src/public/r/styles/new-york/pagination.json
@@ -1,7 +1,9 @@
 {
   "name": "pagination",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/new-york/pin-input.json b/apps/www/src/public/r/styles/new-york/pin-input.json
index 3957c2ba6..361c27518 100644
--- a/apps/www/src/public/r/styles/new-york/pin-input.json
+++ b/apps/www/src/public/r/styles/new-york/pin-input.json
@@ -1,7 +1,9 @@
 {
   "name": "pin-input",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/popover.json b/apps/www/src/public/r/styles/new-york/popover.json
index a8f4ed61e..681237e10 100644
--- a/apps/www/src/public/r/styles/new-york/popover.json
+++ b/apps/www/src/public/r/styles/new-york/popover.json
@@ -1,7 +1,9 @@
 {
   "name": "popover",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/progress.json b/apps/www/src/public/r/styles/new-york/progress.json
index 843d6c0ca..150e3f2ef 100644
--- a/apps/www/src/public/r/styles/new-york/progress.json
+++ b/apps/www/src/public/r/styles/new-york/progress.json
@@ -1,7 +1,9 @@
 {
   "name": "progress",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
index 6ae2c4b5b..2952fbce1 100644
--- a/apps/www/src/public/r/styles/new-york/radio-group.json
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -1,7 +1,9 @@
 {
   "name": "radio-group",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/range-calendar.json b/apps/www/src/public/r/styles/new-york/range-calendar.json
index deb19adbb..221650bcb 100644
--- a/apps/www/src/public/r/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/range-calendar.json
@@ -1,7 +1,9 @@
 {
   "name": "range-calendar",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils",
     "button"
diff --git a/apps/www/src/public/r/styles/new-york/resizable.json b/apps/www/src/public/r/styles/new-york/resizable.json
index 5efa95ba9..806200b72 100644
--- a/apps/www/src/public/r/styles/new-york/resizable.json
+++ b/apps/www/src/public/r/styles/new-york/resizable.json
@@ -1,7 +1,9 @@
 {
   "name": "resizable",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/scroll-area.json b/apps/www/src/public/r/styles/new-york/scroll-area.json
index f5fe2cc7f..009cda75c 100644
--- a/apps/www/src/public/r/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/r/styles/new-york/scroll-area.json
@@ -1,7 +1,9 @@
 {
   "name": "scroll-area",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/select.json b/apps/www/src/public/r/styles/new-york/select.json
index cf18bc4c6..a0f6b2a49 100644
--- a/apps/www/src/public/r/styles/new-york/select.json
+++ b/apps/www/src/public/r/styles/new-york/select.json
@@ -1,7 +1,9 @@
 {
   "name": "select",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/separator.json b/apps/www/src/public/r/styles/new-york/separator.json
index 2173b60f0..fd9a3ef29 100644
--- a/apps/www/src/public/r/styles/new-york/separator.json
+++ b/apps/www/src/public/r/styles/new-york/separator.json
@@ -1,7 +1,9 @@
 {
   "name": "separator",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/sheet.json b/apps/www/src/public/r/styles/new-york/sheet.json
index a3ea36534..0e16fdd63 100644
--- a/apps/www/src/public/r/styles/new-york/sheet.json
+++ b/apps/www/src/public/r/styles/new-york/sheet.json
@@ -1,7 +1,9 @@
 {
   "name": "sheet",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index 82bf25593..39996e3f9 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -2,6 +2,7 @@
   "name": "sidebar",
   "type": "registry:ui",
   "dependencies": [
+    "reka-ui",
     "@vueuse/core"
   ],
   "registryDependencies": [
diff --git a/apps/www/src/public/r/styles/new-york/slider.json b/apps/www/src/public/r/styles/new-york/slider.json
index 4d2d31cd8..fa1e1cb04 100644
--- a/apps/www/src/public/r/styles/new-york/slider.json
+++ b/apps/www/src/public/r/styles/new-york/slider.json
@@ -1,7 +1,9 @@
 {
   "name": "slider",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/stepper.json b/apps/www/src/public/r/styles/new-york/stepper.json
index c09548bc2..0ea3c4614 100644
--- a/apps/www/src/public/r/styles/new-york/stepper.json
+++ b/apps/www/src/public/r/styles/new-york/stepper.json
@@ -1,7 +1,9 @@
 {
   "name": "stepper",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/switch.json b/apps/www/src/public/r/styles/new-york/switch.json
index c2fed459a..6cc867c34 100644
--- a/apps/www/src/public/r/styles/new-york/switch.json
+++ b/apps/www/src/public/r/styles/new-york/switch.json
@@ -1,7 +1,9 @@
 {
   "name": "switch",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/tabs.json b/apps/www/src/public/r/styles/new-york/tabs.json
index cd79c8965..ff5aa4f7a 100644
--- a/apps/www/src/public/r/styles/new-york/tabs.json
+++ b/apps/www/src/public/r/styles/new-york/tabs.json
@@ -1,7 +1,9 @@
 {
   "name": "tabs",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/tags-input.json b/apps/www/src/public/r/styles/new-york/tags-input.json
index 634a92ae9..4da24fcaf 100644
--- a/apps/www/src/public/r/styles/new-york/tags-input.json
+++ b/apps/www/src/public/r/styles/new-york/tags-input.json
@@ -1,7 +1,9 @@
 {
   "name": "tags-input",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/toast.json b/apps/www/src/public/r/styles/new-york/toast.json
index 933f1295a..69150c505 100644
--- a/apps/www/src/public/r/styles/new-york/toast.json
+++ b/apps/www/src/public/r/styles/new-york/toast.json
@@ -1,7 +1,9 @@
 {
   "name": "toast",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/toggle-group.json b/apps/www/src/public/r/styles/new-york/toggle-group.json
index e92baa9c2..fd119bdf2 100644
--- a/apps/www/src/public/r/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/r/styles/new-york/toggle-group.json
@@ -1,7 +1,9 @@
 {
   "name": "toggle-group",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "toggle",
     "utils"
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
index da95269b8..99e5cd8af 100644
--- a/apps/www/src/public/r/styles/new-york/toggle.json
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -1,7 +1,9 @@
 {
   "name": "toggle",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/styles/new-york/tooltip.json b/apps/www/src/public/r/styles/new-york/tooltip.json
index aa4827920..d4a407b36 100644
--- a/apps/www/src/public/r/styles/new-york/tooltip.json
+++ b/apps/www/src/public/r/styles/new-york/tooltip.json
@@ -1,7 +1,9 @@
 {
   "name": "tooltip",
   "type": "registry:ui",
-  "dependencies": [],
+  "dependencies": [
+    "reka-ui"
+  ],
   "registryDependencies": [
     "utils"
   ],
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index e7fab6108..b097f810b 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -190,7 +190,9 @@
   {
     "name": "accordion",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -264,7 +266,9 @@
   {
     "name": "alert-dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -335,7 +339,9 @@
   {
     "name": "aspect-ratio",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -358,7 +364,8 @@
     "dependencies": [
       "vee-validate",
       "@vee-validate/zod",
-      "zod"
+      "zod",
+      "reka-ui"
     ],
     "registryDependencies": [
       "form",
@@ -478,7 +485,9 @@
   {
     "name": "avatar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -534,7 +543,9 @@
   {
     "name": "breadcrumb",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -592,7 +603,9 @@
   {
     "name": "button",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -614,7 +627,9 @@
   {
     "name": "calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -870,7 +885,8 @@
     "dependencies": [
       "@unovis/vue",
       "@unovis/ts",
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -975,7 +991,9 @@
   {
     "name": "checkbox",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -997,7 +1015,9 @@
   {
     "name": "collapsible",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -1029,7 +1049,9 @@
   {
     "name": "command",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "dialog"
@@ -1100,7 +1122,9 @@
   {
     "name": "context-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1206,7 +1230,9 @@
   {
     "name": "dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1277,7 +1303,8 @@
     "name": "drawer",
     "type": "registry:ui",
     "dependencies": [
-      "vaul-vue"
+      "vaul-vue",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils"
@@ -1336,7 +1363,9 @@
   {
     "name": "dropdown-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1437,6 +1466,7 @@
     "name": "form",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "vee-validate",
       "@vee-validate/zod",
       "zod"
@@ -1499,7 +1529,9 @@
   {
     "name": "hover-card",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1557,7 +1589,9 @@
   {
     "name": "label",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1579,7 +1613,9 @@
   {
     "name": "menubar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1685,7 +1721,9 @@
   {
     "name": "navigation-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1749,7 +1787,9 @@
   {
     "name": "number-field",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1795,7 +1835,9 @@
   {
     "name": "pagination",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -1842,7 +1884,9 @@
   {
     "name": "pin-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1882,7 +1926,9 @@
   {
     "name": "popover",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1916,7 +1962,9 @@
   {
     "name": "progress",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1938,7 +1986,9 @@
   {
     "name": "radio-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -1966,7 +2016,9 @@
   {
     "name": "range-calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -2055,7 +2107,9 @@
   {
     "name": "resizable",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2083,7 +2137,9 @@
   {
     "name": "scroll-area",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2111,7 +2167,9 @@
   {
     "name": "select",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2193,7 +2251,9 @@
   {
     "name": "separator",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2215,7 +2275,9 @@
   {
     "name": "sheet",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2280,6 +2342,7 @@
     "name": "sidebar",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "@vueuse/core"
     ],
     "registryDependencies": [
@@ -2475,7 +2538,9 @@
   {
     "name": "slider",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2519,7 +2584,9 @@
   {
     "name": "stepper",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2577,7 +2644,9 @@
   {
     "name": "switch",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2669,7 +2738,9 @@
   {
     "name": "tabs",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2709,7 +2780,9 @@
   {
     "name": "tags-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2779,7 +2852,9 @@
   {
     "name": "toast",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2849,7 +2924,9 @@
   {
     "name": "toggle",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -2871,7 +2948,9 @@
   {
     "name": "toggle-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "toggle",
       "utils"
@@ -2900,7 +2979,9 @@
   {
     "name": "tooltip",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -3692,7 +3773,8 @@
     "name": "CalendarWithSelect",
     "type": "registry:example",
     "dependencies": [
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -4345,7 +4427,9 @@
   {
     "name": "DatePickerWithIndependentMonths",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button",
@@ -4384,7 +4468,9 @@
   {
     "name": "DatePickerWithRange",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button",
@@ -4601,7 +4687,9 @@
   {
     "name": "DropdownMenuCheckboxes",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "button",
       "dropdown-menu"
@@ -5199,7 +5287,9 @@
   {
     "name": "RangeCalendarDemo",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "range-calendar"
     ],
@@ -5681,7 +5771,9 @@
   {
     "name": "TagsInputComboboxDemo",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "command",
       "tags-input"
@@ -7553,7 +7645,9 @@
   {
     "name": "accordion",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -7627,7 +7721,9 @@
   {
     "name": "alert-dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -7698,7 +7794,9 @@
   {
     "name": "aspect-ratio",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -7721,7 +7819,8 @@
     "dependencies": [
       "vee-validate",
       "@vee-validate/zod",
-      "zod"
+      "zod",
+      "reka-ui"
     ],
     "registryDependencies": [
       "form",
@@ -7841,7 +7940,9 @@
   {
     "name": "avatar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -7897,7 +7998,9 @@
   {
     "name": "breadcrumb",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -7955,7 +8058,9 @@
   {
     "name": "button",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -7977,7 +8082,9 @@
   {
     "name": "calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -8233,7 +8340,8 @@
     "dependencies": [
       "@unovis/vue",
       "@unovis/ts",
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -8338,7 +8446,9 @@
   {
     "name": "checkbox",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8360,7 +8470,9 @@
   {
     "name": "collapsible",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [],
     "files": [
       {
@@ -8392,7 +8504,9 @@
   {
     "name": "command",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "dialog"
@@ -8463,7 +8577,9 @@
   {
     "name": "context-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8569,7 +8685,9 @@
   {
     "name": "dialog",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8640,7 +8758,8 @@
     "name": "drawer",
     "type": "registry:ui",
     "dependencies": [
-      "vaul-vue"
+      "vaul-vue",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils"
@@ -8699,7 +8818,9 @@
   {
     "name": "dropdown-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8800,6 +8921,7 @@
     "name": "form",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "vee-validate",
       "@vee-validate/zod",
       "zod"
@@ -8862,7 +8984,9 @@
   {
     "name": "hover-card",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8920,7 +9044,9 @@
   {
     "name": "label",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -8942,7 +9068,9 @@
   {
     "name": "menubar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9048,7 +9176,9 @@
   {
     "name": "navigation-menu",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9112,7 +9242,9 @@
   {
     "name": "number-field",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9158,7 +9290,9 @@
   {
     "name": "pagination",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -9205,7 +9339,9 @@
   {
     "name": "pin-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9245,7 +9381,9 @@
   {
     "name": "popover",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9279,7 +9417,9 @@
   {
     "name": "progress",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9301,7 +9441,9 @@
   {
     "name": "radio-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9329,7 +9471,9 @@
   {
     "name": "range-calendar",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button"
@@ -9418,7 +9562,9 @@
   {
     "name": "resizable",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9446,7 +9592,9 @@
   {
     "name": "scroll-area",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9474,7 +9622,9 @@
   {
     "name": "select",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9556,7 +9706,9 @@
   {
     "name": "separator",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9578,7 +9730,9 @@
   {
     "name": "sheet",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9643,6 +9797,7 @@
     "name": "sidebar",
     "type": "registry:ui",
     "dependencies": [
+      "reka-ui",
       "@vueuse/core"
     ],
     "registryDependencies": [
@@ -9838,7 +9993,9 @@
   {
     "name": "slider",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9882,7 +10039,9 @@
   {
     "name": "stepper",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -9940,7 +10099,9 @@
   {
     "name": "switch",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -10032,7 +10193,9 @@
   {
     "name": "tabs",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -10072,7 +10235,9 @@
   {
     "name": "tags-input",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -10142,7 +10307,9 @@
   {
     "name": "toast",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -10212,7 +10379,9 @@
   {
     "name": "toggle",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -10234,7 +10403,9 @@
   {
     "name": "toggle-group",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "toggle",
       "utils"
@@ -10263,7 +10434,9 @@
   {
     "name": "tooltip",
     "type": "registry:ui",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils"
     ],
@@ -11055,7 +11228,8 @@
     "name": "CalendarWithSelect",
     "type": "registry:example",
     "dependencies": [
-      "@vueuse/core"
+      "@vueuse/core",
+      "reka-ui"
     ],
     "registryDependencies": [
       "utils",
@@ -11709,7 +11883,9 @@
   {
     "name": "DatePickerWithIndependentMonths",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button",
@@ -11748,7 +11924,9 @@
   {
     "name": "DatePickerWithRange",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "utils",
       "button",
@@ -11965,7 +12143,9 @@
   {
     "name": "DropdownMenuCheckboxes",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "button",
       "dropdown-menu"
@@ -12563,7 +12743,9 @@
   {
     "name": "RangeCalendarDemo",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "range-calendar"
     ],
@@ -13045,7 +13227,9 @@
   {
     "name": "TagsInputComboboxDemo",
     "type": "registry:example",
-    "dependencies": [],
+    "dependencies": [
+      "reka-ui"
+    ],
     "registryDependencies": [
       "command",
       "tags-input"
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index 7b44c25a4..ce56e7e70 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -7,6 +7,7 @@ import { type RegistryStyle, styles } from './registry-styles'
 
 // [Dependency, [...PeerDependencies]]
 const DEPENDENCIES = new Map<string, string[]>([
+  ['reka-ui', []],
   ['@vueuse/core', []],
   ['vue-sonner', []],
   ['vaul-vue', []],

From b4e1135b15f8f12a3f83584a7ccb653126bdd9dc Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:10:34 +0800
Subject: [PATCH 25/39] feat: transform icons

---
 packages/cli/src/utils/transformers/index.ts  |  5 ++
 .../src/utils/transformers/transform-icons.ts | 75 +++++++++++++++++++
 .../cli/src/utils/updaters/update-files.ts    | 53 +++++++++----
 .../transform-icons.test.ts.snap              | 27 +++++++
 .../cli/test/utils/transform-icons.test.ts    | 44 +++++++++++
 5 files changed, 190 insertions(+), 14 deletions(-)
 create mode 100644 packages/cli/src/utils/transformers/transform-icons.ts
 create mode 100644 packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
 create mode 100644 packages/cli/test/utils/transform-icons.test.ts

diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts
index 98ffcd019..365ab463c 100644
--- a/packages/cli/src/utils/transformers/index.ts
+++ b/packages/cli/src/utils/transformers/index.ts
@@ -1,11 +1,13 @@
 import type { Config } from '@/src/utils/get-config'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import type * as z from 'zod'
+import { getRegistryIcons } from '@/src/utils/registry'
 import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
 import { transformImport } from '@/src/utils/transformers/transform-import'
 import { transformSFC } from '@/src/utils/transformers/transform-sfc'
 import { transformTwPrefix } from '@/src/utils/transformers/transform-tw-prefix'
 import { transform as metaTransform } from 'vue-metamorph'
+import { transformIcons } from './transform-icons'
 
 export interface TransformOpts {
   filename: string
@@ -17,9 +19,12 @@ export interface TransformOpts {
 export async function transform(opts: TransformOpts) {
   const source = await transformSFC(opts)
 
+  const registryIcons = await getRegistryIcons()
+
   return metaTransform(source, opts.filename, [
     transformImport(opts),
     transformCssVars(opts),
     transformTwPrefix(opts),
+    transformIcons(opts, registryIcons),
   ]).code
 }
diff --git a/packages/cli/src/utils/transformers/transform-icons.ts b/packages/cli/src/utils/transformers/transform-icons.ts
new file mode 100644
index 000000000..efa2df448
--- /dev/null
+++ b/packages/cli/src/utils/transformers/transform-icons.ts
@@ -0,0 +1,75 @@
+import type { CodemodPlugin } from 'vue-metamorph'
+import type { TransformOpts } from '.'
+import { ICON_LIBRARIES } from '@/src/utils/icon-libraries'
+
+// Lucide is the default icon library in the registry.
+const SOURCE_LIBRARY = 'lucide'
+
+export function transformIcons(opts: TransformOpts, registryIcons: Record<string, Record<string, string>>): CodemodPlugin {
+  return {
+    type: 'codemod',
+    name: 'modify import of icon library on user config',
+
+    transform({ scriptASTs, sfcAST, utils: { traverseScriptAST, traverseTemplateAST } }) {
+      let transformCount = 0
+      const { config } = opts
+
+      // No transform if we cannot read the icon library.
+      if (!config.iconLibrary || !(config.iconLibrary in ICON_LIBRARIES)) {
+        return transformCount
+      }
+
+      const sourceLibrary = SOURCE_LIBRARY
+      const targetLibrary = config.iconLibrary
+
+      if (sourceLibrary === targetLibrary) {
+        return transformCount
+      }
+
+      // Map<orignalIcon, targetedIcon>
+      const targetedIconsMap: Map<string, string> = new Map()
+      for (const scriptAST of scriptASTs) {
+        traverseScriptAST(scriptAST, {
+
+          visitImportDeclaration(path) {
+            if (![ICON_LIBRARIES.radix.import, ICON_LIBRARIES.lucide.import].includes(`${path.node.source.value}`))
+              return this.traverse(path)
+
+            for (const specifier of path.node.specifiers ?? []) {
+              if (specifier.type === 'ImportSpecifier') {
+                const iconName = specifier.imported.name
+
+                const targetedIcon = registryIcons[iconName]?.[targetLibrary]
+
+                if (!targetedIcon || targetedIconsMap.has(targetedIcon)) {
+                  continue
+                }
+
+                targetedIconsMap.set(iconName, targetedIcon)
+                specifier.imported.name = targetedIcon
+              }
+            }
+
+            if (targetedIconsMap.size > 0)
+              path.node.source.value = ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES].import
+
+            return this.traverse(path)
+          },
+        })
+
+        if (sfcAST) {
+          traverseTemplateAST(sfcAST, {
+            enterNode(node) {
+              if (node.type === 'VElement' && targetedIconsMap.has(node.rawName)) {
+                node.rawName = targetedIconsMap.get(node.rawName) ?? ''
+                transformCount++
+              }
+            },
+          })
+        }
+      }
+
+      return transformCount
+    },
+  }
+}
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
index 279174cd2..976313557 100644
--- a/packages/cli/src/utils/updaters/update-files.ts
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -1,7 +1,7 @@
 import type { Config } from '@/src/utils/get-config'
 import type { RegistryItem } from '@/src/utils/registry/schema'
 import { existsSync, promises as fs } from 'node:fs'
-import path, { basename } from 'node:path'
+import path, { basename, dirname } from 'node:path'
 import { getProjectInfo } from '@/src/utils/get-project-info'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
@@ -57,6 +57,7 @@ export async function updateFiles(
 
   const filesCreated = []
   const filesUpdated = []
+  const folderSkipped = new Map<string, boolean>()
   const filesSkipped = []
 
   for (const file of files) {
@@ -78,22 +79,46 @@ export async function updateFiles(
     }
 
     const existingFile = existsSync(filePath)
-    if (existingFile && !options.overwrite) {
-      filesCreatedSpinner.stop()
-      const { overwrite } = await prompts({
-        type: 'confirm',
-        name: 'overwrite',
-        message: `The file ${highlighter.info(
-          fileName,
-        )} already exists. Would you like to overwrite?`,
-        initial: false,
-      })
-
-      if (!overwrite) {
+
+    // Check for existing folder in UI component only
+    if (file.type === 'registry:ui') {
+      const folderName = basename(dirname(filePath))
+
+      if (!folderSkipped.has(folderName)) {
+        filesCreatedSpinner.stop()
+        const { overwrite } = await prompts({
+          type: 'confirm',
+          name: 'overwrite',
+          message: `The folder ${highlighter.info(folderName)} already exists. Would you like to overwrite?`,
+          initial: false,
+        })
+        folderSkipped.set(folderName, !overwrite)
+        filesCreatedSpinner?.start()
+      }
+
+      if (folderSkipped.get(folderName) === true) {
         filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
         continue
       }
-      filesCreatedSpinner?.start()
+    }
+    else {
+      if (existingFile && !options.overwrite) {
+        filesCreatedSpinner.stop()
+        const { overwrite } = await prompts({
+          type: 'confirm',
+          name: 'overwrite',
+          message: `The file ${highlighter.info(
+            fileName,
+          )} already exists. Would you like to overwrite?`,
+          initial: false,
+        })
+
+        if (!overwrite) {
+          filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+          continue
+        }
+        filesCreatedSpinner?.start()
+      }
     }
 
     // Create the target directory if it doesn't exist.
diff --git a/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
new file mode 100644
index 000000000..d159155c5
--- /dev/null
+++ b/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformIcons > does not transform lucide icons 1`] = `
+"<script setup>
+import { Check } from 'lucide-vue-next';
+import { Primitive } from 'reka-ui';
+</script>
+
+<template>
+  <Check />
+  <Primitive />
+</template>
+"
+`;
+
+exports[`transformIcons > transforms radix icons 1`] = `
+"<script setup>
+import { CheckIcon } from '@radix-icons/vue';
+import { Primitive } from 'reka-ui';
+</script>
+
+<template>
+  <CheckIcon />
+  <Primitive />
+</template>
+"
+`;
diff --git a/packages/cli/test/utils/transform-icons.test.ts b/packages/cli/test/utils/transform-icons.test.ts
new file mode 100644
index 000000000..03c6a42df
--- /dev/null
+++ b/packages/cli/test/utils/transform-icons.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { transform } from '../../src/utils/transformers'
+
+describe('transformIcons', () => {
+  it('transforms radix icons', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      import { Check } from 'lucide-vue-next'
+      import { Primitive } from 'reka-ui'
+      </script>
+
+      <template>
+        <Check />
+        <Primitive />
+      </template>
+      `,
+      config: {
+        iconLibrary: 'radix',
+      },
+    })
+    expect(result).toMatchSnapshot()
+  })
+
+  it('does not transform lucide icons', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      import { Check } from 'lucide-vue-next'
+      import { Primitive } from 'reka-ui'
+      </script>
+
+      <template>
+        <Check />
+        <Primitive />
+      </template>
+      `,
+      config: {
+        iconLibrary: 'lucide',
+      },
+    })
+    expect(result).toMatchSnapshot()
+  })
+})

From 8fec27eed4bf0bc5d52eb3448bbfb335f6df1dfd Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:10:55 +0800
Subject: [PATCH 26/39] refactor: replace with lucide icon, dropped v-calendar

---
 .../theme/components/BlockCopyCodeButton.vue  |   6 +-
 apps/www/__registry__/index.ts                | 496 ------------------
 apps/www/package.json                         |   1 -
 .../src/content/docs/components/calendar.md   |   6 -
 .../src/content/docs/components/v-calendar.md |  91 ----
 .../content/docs/components/v-date-picker.md  |  79 ---
 .../forms/components/AppearanceForm.vue       |   4 +-
 .../examples/forms/components/ProfileForm.vue |   6 +-
 apps/www/src/public/r/icons/index.json        | 150 ++++++
 apps/www/src/public/r/index.json              |  44 --
 .../public/r/styles/new-york/AlertDemo.json   |   2 +-
 .../styles/new-york/AlertDestructiveDemo.json |   2 +-
 .../r/styles/new-york/BreadcrumbDropdown.json |   2 +-
 .../new-york/BreadcrumbSeparatorDemo.json     |   2 +-
 .../r/styles/new-york/ButtonIconDemo.json     |   2 +-
 .../r/styles/new-york/ButtonLoadingDemo.json  |   2 +-
 .../r/styles/new-york/ButtonWithIconDemo.json |   2 +-
 .../r/styles/new-york/CalendarForm.json       |   2 +-
 .../public/r/styles/new-york/CardChat.json    |   2 +-
 .../public/r/styles/new-york/CardDemo.json    |   2 +-
 .../r/styles/new-york/CollapsibleDemo.json    |   2 +-
 .../r/styles/new-york/ComboboxDemo.json       |   2 +-
 .../styles/new-york/ComboboxDropdownMenu.json |   2 +-
 .../r/styles/new-york/ComboboxForm.json       |   2 +-
 .../public/r/styles/new-york/CommandDemo.json |   2 +-
 .../new-york/DataTableColumnPinningDemo.json  |   2 +-
 .../r/styles/new-york/DataTableDemo.json      |   2 +-
 .../styles/new-york/DataTableDemoColumn.json  |   2 +-
 .../r/styles/new-york/DatePickerDemo.json     |   2 +-
 .../r/styles/new-york/DatePickerForm.json     |   2 +-
 .../DatePickerWithIndependentMonths.json      |   2 +-
 .../new-york/DatePickerWithPresets.json       |   2 +-
 .../styles/new-york/DatePickerWithRange.json  |   2 +-
 .../new-york/DialogCustomCloseButton.json     |   2 +-
 .../public/r/styles/new-york/DrawerDemo.json  |   2 +-
 .../r/styles/new-york/HoverCardDemo.json      |   2 +-
 .../r/styles/new-york/InputWithIcon.json      |   2 +-
 .../public/r/styles/new-york/StepperForm.json |   2 +-
 .../r/styles/new-york/StepperHorizental.json  |   2 +-
 .../r/styles/new-york/StepperVertical.json    |   2 +-
 .../public/r/styles/new-york/ToggleDemo.json  |   2 +-
 .../r/styles/new-york/ToggleDisabledDemo.json |   2 +-
 .../r/styles/new-york/ToggleGroupDemo.json    |   2 +-
 .../new-york/ToggleGroupDisabledDemo.json     |   2 +-
 .../styles/new-york/ToggleGroupLargeDemo.json |   2 +-
 .../new-york/ToggleGroupOutlineDemo.json      |   2 +-
 .../new-york/ToggleGroupSingleDemo.json       |   2 +-
 .../styles/new-york/ToggleGroupSmallDemo.json |   2 +-
 .../r/styles/new-york/ToggleItalicDemo.json   |   2 +-
 .../new-york/ToggleItalicWithTextDemo.json    |   2 +-
 .../r/styles/new-york/ToggleLargeDemo.json    |   2 +-
 .../r/styles/new-york/ToggleSmallDemo.json    |   2 +-
 .../public/r/styles/new-york/accordion.json   |   2 +-
 .../public/r/styles/new-york/auto-form.json   |   4 +-
 .../public/r/styles/new-york/breadcrumb.json  |   4 +-
 .../public/r/styles/new-york/calendar.json    |   4 +-
 .../public/r/styles/new-york/carousel.json    |   4 +-
 .../public/r/styles/new-york/checkbox.json    |   2 +-
 .../src/public/r/styles/new-york/command.json |   2 +-
 .../r/styles/new-york/context-menu.json       |   6 +-
 .../src/public/r/styles/new-york/dialog.json  |   4 +-
 .../r/styles/new-york/dropdown-menu.json      |   6 +-
 .../src/public/r/styles/new-york/menubar.json |   6 +-
 .../r/styles/new-york/navigation-menu.json    |   2 +-
 .../public/r/styles/new-york/pagination.json  |  10 +-
 .../public/r/styles/new-york/pin-input.json   |   2 +-
 .../public/r/styles/new-york/radio-group.json |   2 +-
 .../r/styles/new-york/range-calendar.json     |   4 +-
 .../public/r/styles/new-york/resizable.json   |   2 +-
 .../src/public/r/styles/new-york/select.json  |   8 +-
 .../src/public/r/styles/new-york/sheet.json   |   2 +-
 .../public/r/styles/new-york/tags-input.json  |   2 +-
 .../src/public/r/styles/new-york/toast.json   |   2 +-
 apps/www/src/public/r/temp.json               | 490 +++--------------
 apps/www/src/registry/crawl-content.ts        |  17 +-
 .../default/example/VCalendarDemo.vue         |  10 -
 .../default/example/VDatePickerDemo.vue       |  36 --
 .../default/example/VDatePickerForm.vue       |  79 ---
 .../example/VDatePickerWithPresets.vue        |  73 ---
 .../default/example/VDatePickerWithRange.vue  |  51 --
 .../default/example/VDateTimePickerDemo.vue   |  36 --
 .../default/example/VRangePickerWithSlot.vue  |  69 ---
 .../default/ui/v-calendar/Calendar.vue        | 343 ------------
 .../registry/default/ui/v-calendar/index.ts   |  22 -
 .../registry/new-york/example/AlertDemo.vue   |   4 +-
 .../new-york/example/AlertDestructiveDemo.vue |   4 +-
 .../new-york/example/BreadcrumbDropdown.vue   |   6 +-
 .../example/BreadcrumbSeparatorDemo.vue       |   6 +-
 .../new-york/example/ButtonIconDemo.vue       |   4 +-
 .../new-york/example/ButtonLoadingDemo.vue    |   4 +-
 .../new-york/example/ButtonWithIconDemo.vue   |   4 +-
 .../new-york/example/CalendarForm.vue         |   2 +-
 .../registry/new-york/example/CardChat.vue    |   8 +-
 .../registry/new-york/example/CardDemo.vue    |   6 +-
 .../new-york/example/Cards/ActivityGoal.vue   |   6 +-
 .../new-york/example/Cards/DataTable.vue      |   6 +-
 .../new-york/example/CollapsibleDemo.vue      |   4 +-
 .../new-york/example/ComboboxDemo.vue         |   6 +-
 .../new-york/example/ComboboxDropdownMenu.vue |   4 +-
 .../new-york/example/ComboboxForm.vue         |   6 +-
 .../registry/new-york/example/CommandDemo.vue |  44 +-
 .../example/DataTableColumnPinningDemo.vue    |   6 +-
 .../new-york/example/DataTableDemo.vue        |   6 +-
 .../new-york/example/DataTableDemoColumn.vue  |   4 +-
 .../new-york/example/DatePickerDemo.vue       |   2 +-
 .../new-york/example/DatePickerForm.vue       |   2 +-
 .../DatePickerWithIndependentMonths.vue       |  18 +-
 .../example/DatePickerWithPresets.vue         |   2 +-
 .../new-york/example/DatePickerWithRange.vue  |   2 +-
 .../example/DialogCustomCloseButton.vue       |   4 +-
 .../registry/new-york/example/DrawerDemo.vue  |   6 +-
 .../new-york/example/HoverCardDemo.vue        |   2 +-
 .../new-york/example/InputWithIcon.vue        |   4 +-
 .../registry/new-york/example/StepperForm.vue |   8 +-
 .../new-york/example/StepperHorizental.vue    |   8 +-
 .../new-york/example/StepperVertical.vue      |   8 +-
 .../registry/new-york/example/ToggleDemo.vue  |   5 +-
 .../new-york/example/ToggleDisabledDemo.vue   |   5 +-
 .../new-york/example/ToggleGroupDemo.vue      |  13 +-
 .../example/ToggleGroupDisabledDemo.vue       |  12 +-
 .../new-york/example/ToggleGroupLargeDemo.vue |  13 +-
 .../example/ToggleGroupOutlineDemo.vue        |  13 +-
 .../example/ToggleGroupSingleDemo.vue         |  13 +-
 .../new-york/example/ToggleGroupSmallDemo.vue |  13 +-
 .../new-york/example/ToggleItalicDemo.vue     |   5 +-
 .../example/ToggleItalicWithTextDemo.vue      |   5 +-
 .../new-york/example/ToggleLargeDemo.vue      |   5 +-
 .../new-york/example/ToggleSmallDemo.vue      |   5 +-
 .../new-york/example/VCalendarDemo.vue        |  10 -
 .../new-york/example/VDatePickerDemo.vue      |  36 --
 .../new-york/example/VDatePickerForm.vue      |  79 ---
 .../example/VDatePickerWithPresets.vue        |  73 ---
 .../new-york/example/VDatePickerWithRange.vue |  51 --
 .../new-york/example/VDateTimePickerDemo.vue  |  36 --
 .../new-york/example/VRangePickerWithSlot.vue |  73 ---
 .../ui/accordion/AccordionTrigger.vue         |   4 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |   2 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |   4 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   4 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   4 +-
 .../ui/calendar/CalendarNextButton.vue        |   4 +-
 .../ui/calendar/CalendarPrevButton.vue        |   4 +-
 .../new-york/ui/carousel/CarouselNext.vue     |   4 +-
 .../new-york/ui/carousel/CarouselPrevious.vue |   4 +-
 .../new-york/ui/checkbox/Checkbox.vue         |   4 +-
 .../new-york/ui/command/CommandInput.vue      |   4 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |   4 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |   4 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |   4 +-
 .../new-york/ui/dialog/DialogContent.vue      |   4 +-
 .../ui/dialog/DialogScrollContent.vue         |   4 +-
 .../DropdownMenuCheckboxItem.vue              |   4 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   4 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   4 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |   4 +-
 .../new-york/ui/menubar/MenubarRadioItem.vue  |   4 +-
 .../new-york/ui/menubar/MenubarSubTrigger.vue |   4 +-
 .../navigation-menu/NavigationMenuTrigger.vue |   4 +-
 .../ui/pagination/PaginationEllipsis.vue      |   4 +-
 .../ui/pagination/PaginationFirst.vue         |   4 +-
 .../new-york/ui/pagination/PaginationLast.vue |   4 +-
 .../new-york/ui/pagination/PaginationNext.vue |   4 +-
 .../new-york/ui/pagination/PaginationPrev.vue |   4 +-
 .../ui/pin-input/PinInputSeparator.vue        |   4 +-
 .../ui/radio-group/RadioGroupItem.vue         |   4 +-
 .../RangeCalendarNextButton.vue               |   4 +-
 .../RangeCalendarPrevButton.vue               |   4 +-
 .../new-york/ui/resizable/ResizableHandle.vue |   4 +-
 .../new-york/ui/select/SelectItem.vue         |   4 +-
 .../ui/select/SelectScrollDownButton.vue      |   4 +-
 .../ui/select/SelectScrollUpButton.vue        |   4 +-
 .../new-york/ui/select/SelectTrigger.vue      |   4 +-
 .../new-york/ui/sheet/SheetContent.vue        |   4 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |   4 +-
 .../registry/new-york/ui/toast/ToastClose.vue |   4 +-
 .../new-york/ui/v-calendar/Calendar.vue       | 337 ------------
 .../registry/new-york/ui/v-calendar/index.ts  |  22 -
 packages/module/playground/app.vue            |   4 +-
 178 files changed, 548 insertions(+), 2917 deletions(-)
 delete mode 100644 apps/www/src/content/docs/components/v-calendar.md
 delete mode 100644 apps/www/src/content/docs/components/v-date-picker.md
 create mode 100644 apps/www/src/public/r/icons/index.json
 delete mode 100644 apps/www/src/registry/default/example/VCalendarDemo.vue
 delete mode 100644 apps/www/src/registry/default/example/VDatePickerDemo.vue
 delete mode 100644 apps/www/src/registry/default/example/VDatePickerForm.vue
 delete mode 100644 apps/www/src/registry/default/example/VDatePickerWithPresets.vue
 delete mode 100644 apps/www/src/registry/default/example/VDatePickerWithRange.vue
 delete mode 100644 apps/www/src/registry/default/example/VDateTimePickerDemo.vue
 delete mode 100644 apps/www/src/registry/default/example/VRangePickerWithSlot.vue
 delete mode 100644 apps/www/src/registry/default/ui/v-calendar/Calendar.vue
 delete mode 100644 apps/www/src/registry/default/ui/v-calendar/index.ts
 delete mode 100644 apps/www/src/registry/new-york/example/VCalendarDemo.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VDatePickerDemo.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VDatePickerForm.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
 delete mode 100644 apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
 delete mode 100644 apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
 delete mode 100644 apps/www/src/registry/new-york/ui/v-calendar/index.ts

diff --git a/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue b/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
index 4f770e66f..74a07f85c 100644
--- a/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
+++ b/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
@@ -5,8 +5,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/registry/new-york/ui/tooltip'
-import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
 import { useClipboard } from '@vueuse/core'
+import { Check, Clipboard } from 'lucide-vue-next'
 import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -29,8 +29,8 @@ const { copy, copied } = useClipboard({ source: code })
         @click="copy()"
       >
         <span class="sr-only">Copy</span>
-        <CheckIcon v-if="copied" />
-        <ClipboardIcon v-else />
+        <Check v-if="copied" />
+        <Clipboard v-else />
       </Button>
     </TooltipTrigger>
     <TooltipContent>Copy code</TooltipContent>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 39f5c66da..9544e7e72 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -2051,25 +2051,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/new-york/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/new-york/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -4965,111 +4946,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -7895,25 +7771,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/new-york/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/new-york/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -10809,111 +10666,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/new-york/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -13755,25 +13507,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/default/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/default/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -16669,111 +16402,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/default/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
@@ -19599,25 +19227,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "v-calendar": {
-      name: "v-calendar",
-      description: "",
-      type: "registry:ui",
-      registryDependencies: ["utils","button"],
-      files: [{
-        path: "registry/default/ui/v-calendar/Calendar.vue",
-        type: "registry:ui",
-        target: ""
-      },{
-        path: "registry/default/ui/v-calendar/index.ts",
-        type: "registry:ui",
-        target: ""
-      }],
-      component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "AccordionDemo": {
       name: "AccordionDemo",
       description: "",
@@ -22513,111 +22122,6 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
-    "VCalendarDemo": {
-      name: "VCalendarDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["v-calendar"],
-      files: [{
-        path: "registry/default/example/VCalendarDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerDemo": {
-      name: "VDatePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerForm": {
-      name: "VDatePickerForm",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","form","popover","toast","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerForm.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithPresets": {
-      name: "VDatePickerWithPresets",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","select","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithPresets.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDatePickerWithRange": {
-      name: "VDatePickerWithRange",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDatePickerWithRange.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VDateTimePickerDemo": {
-      name: "VDateTimePickerDemo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VDateTimePickerDemo.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
-    "VRangePickerWithSlot": {
-      name: "VRangePickerWithSlot",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["utils","button","popover","v-calendar"],
-      files: [{
-        path: "registry/default/example/VRangePickerWithSlot.vue",
-        type: "registry:example",
-        target: ""
-      }],
-      component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      source: "",
-      category: "",
-      subcategory: ""
-    },
     "Authentication01": {
       name: "Authentication01",
       description: "",
diff --git a/apps/www/package.json b/apps/www/package.json
index 9640037f8..9d598c493 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -35,7 +35,6 @@
     "magic-string": "^0.30.13",
     "reka-ui": "catalog:",
     "tailwindcss-animate": "^1.0.7",
-    "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
     "vue": "^3.5.13",
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index ce56ccc9e..989bb5f00 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -7,12 +7,6 @@ primitive: https://www.reka-ui.com/docs/components/calendar.html
 
 <ComponentPreview name="CalendarDemo" />
 
-<Callout class="text-base mt-12">
-
-If you're looking for **previous** Calendar implementation, checkout to <span class="font-bold underline">[VCalendar](/docs/components/v-calendar)</span> component
-
-</Callout>
-
 ## About
 
 The `<Calendar />` component is built on top of the [RadixVue Calendar](https://www.reka-ui.com/docs/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
diff --git a/apps/www/src/content/docs/components/v-calendar.md b/apps/www/src/content/docs/components/v-calendar.md
deleted file mode 100644
index 9c8d837b5..000000000
--- a/apps/www/src/content/docs/components/v-calendar.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: VCalendar
-description: A date field component that allows users to enter and edit date.
-source: apps/www/registry/default/ui/calendar
-primitive: https://vcalendar.io/
----
-
-<ComponentPreview name="VCalendarDemo" />
-
-## About
-
-The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/getting-started/installation.html).
-
-## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
-
-```bash
-npx shadcn-vue@latest add v-calendar
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency
-
-```bash
-npm install v-calendar
-```
-
-### Copy and paste the following code into your project
-
-<<< @/registry/default/ui/v-calendar/Calendar.vue
-
-</Steps>
-
-</template>
-</TabPreview>
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/v-calendar'
-</script>
-
-<template>
-  <Calendar />
-</template>
-```
-
-The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
-
-### Slots
-
-The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely :
-
-- `day-content`
-- `day-popover`
-- `dp-footer`
-- `footer`
-- `header-title-wrapper`
-- `header-title`
-- `header-prev-button`
-- `header-next-button`
-- `nav`
-- `nav-prev-button`
-- `nav-next-button`
-- `page`
-- `time-header`
-
-Example using the `day-content` slot:
-
-```vue
-<script setup lang="ts">
-import { Calendar } from '@/components/ui/v-calendar'
-</script>
-
-<template>
-  <Calendar>
-    <template #day-content="{ day, dayProps, dayEvents }">
-      <div v-bind="dayProps" v-on="dayEvents">
-        {{ day.label }}
-      </div>
-    </template>
-  </Calendar>
-</template>
-```
diff --git a/apps/www/src/content/docs/components/v-date-picker.md b/apps/www/src/content/docs/components/v-date-picker.md
deleted file mode 100644
index d9288b208..000000000
--- a/apps/www/src/content/docs/components/v-date-picker.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: VCalendar Date Picker
-description: A date picker component with range and presets.
----
-
-<ComponentPreview name="VDatePickerDemo"  />
-
-## Installation
-
-The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
-
-See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-
-import { Calendar } from '@/components/ui/v-calendar'
-import { cn } from '@/lib/utils'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>
-```
-
-## Examples
-
-### Date Picker
-
-<ComponentPreview name="VDatePickerDemo"  />
-
-### Date Range Picker
-
-<ComponentPreview name="VDatePickerWithRange"  />
-
-### Date Time Picker
-
-<ComponentPreview name="VDateTimePickerDemo"  />
-
-### With Presets
-
-<ComponentPreview name="VDatePickerWithPresets"  />
-
-### With Slot
-
-<ComponentPreview name="VRangePickerWithSlot"  />
-
-### Form
-
-<ComponentPreview name="VDatePickerForm"  />
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 9b2a2d10c..57664a06f 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -6,8 +6,8 @@ import { Button, buttonVariants } from '@/registry/new-york/ui/button'
 
 import { Separator } from '@/registry/new-york/ui/separator'
 import { toast } from '@/registry/new-york/ui/toast'
-import { ChevronDownIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { ChevronDown } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
 import * as z from 'zod'
@@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
               </option>
             </select>
           </FormControl>
-          <ChevronDownIcon class="pointer-events-none absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+          <ChevronDown class="pointer-events-none absolute right-3 top-2.5 h-4 w-4 opacity-50" />
         </div>
         <FormDescription>
           Set the font you want to use in the dashboard.
diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue
index 190ea49c1..c9a35a869 100644
--- a/apps/www/src/examples/forms/components/ProfileForm.vue
+++ b/apps/www/src/examples/forms/components/ProfileForm.vue
@@ -15,7 +15,6 @@ import { Separator } from '@/registry/new-york/ui/separator'
 
 import { Textarea } from '@/registry/new-york/ui/textarea'
 import { toast } from '@/registry/new-york/ui/toast'
-import { Cross1Icon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { FieldArray, useForm } from 'vee-validate'
 import { h, ref } from 'vue'
@@ -129,7 +128,7 @@ const onSubmit = handleSubmit((values) => {
     </FormField>
 
     <div>
-      <FieldArray v-slot="{ fields, push, remove }" name="urls">
+      <FieldArray v-slot="{ fields, push }" name="urls">
         <div v-for="(field, index) in fields" :key="`urls-${field.key}`">
           <FormField v-slot="{ componentField }" :name="`urls[${index}].value`">
             <FormItem>
@@ -143,9 +142,6 @@ const onSubmit = handleSubmit((values) => {
                 <FormControl>
                   <Input type="url" v-bind="componentField" />
                 </FormControl>
-                <button type="button" class="absolute py-2 pe-3 end-0 text-muted-foreground" @click="remove(index)">
-                  <Cross1Icon class="w-3" />
-                </button>
               </div>
               <FormMessage />
             </FormItem>
diff --git a/apps/www/src/public/r/icons/index.json b/apps/www/src/public/r/icons/index.json
new file mode 100644
index 000000000..6561bf321
--- /dev/null
+++ b/apps/www/src/public/r/icons/index.json
@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index 9d3d89698..48ed096ea 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -2122,28 +2122,6 @@
       }
     ]
   },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "type": "registry:ui"
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "type": "registry:ui"
-      }
-    ]
-  },
   {
     "name": "accordion",
     "type": "registry:ui",
@@ -4266,27 +4244,5 @@
         "type": "registry:ui"
       }
     ]
-  },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "type": "registry:ui"
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "type": "registry:ui"
-      }
-    ]
   }
 ]
diff --git a/apps/www/src/public/r/styles/new-york/AlertDemo.json b/apps/www/src/public/r/styles/new-york/AlertDemo.json
index bfa3128f3..5a5b433d5 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/AlertDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { Rocket } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Rocket class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
index 29d362466..9ecdcbeeb 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/AlertDestructiveDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index 3a39aca37..c4c682c70 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/BreadcrumbDropdown.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
index fdfd7e7bb..64190a3f9 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/BreadcrumbSeparatorDemo.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
index 2e0de32c1..042ac04b2 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonIconDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
index 7f66b92d2..9d0b1fbd2 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonLoadingDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
index 1a0bcd70f..cb9632d0f 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ButtonWithIconDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { MailOpen } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <MailOpen class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarForm.json b/apps/www/src/public/r/styles/new-york/CalendarForm.json
index 02d713f2b..412a27a7d 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarForm.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarForm.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/CalendarForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CardChat.json b/apps/www/src/public/r/styles/new-york/CardChat.json
index 0b4c1e90b..c3de4a573 100644
--- a/apps/www/src/public/r/styles/new-york/CardChat.json
+++ b/apps/www/src/public/r/styles/new-york/CardChat.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "example/CardChat.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CardDemo.json b/apps/www/src/public/r/styles/new-york/CardDemo.json
index 8b54b97e7..3404296ab 100644
--- a/apps/www/src/public/r/styles/new-york/CardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardDemo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/CardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { Bell, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <Bell />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
index 67f5e1023..41e5d8095 100644
--- a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/CollapsibleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
index 1cbe9d41d..aee8cd53f 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
index 014b8dfda..44959cedf 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "example/ComboboxDropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
index 22a26e926..ecfa5c631 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index 75bee9c35..e66ac2e3a 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/CommandDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
index 1486d9946..d57b9ecaf 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "example/DataTableColumnPinningDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemo.json b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
index 618a75f1c..aaf7f028a 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "example/DataTableDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
index 12d0effa0..e6b9bd51d 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/DataTableDemoColumn.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
index 0829c2989..ab870c1ce 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/DatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerForm.json b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
index 795a25c9b..ce596ad93 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "example/DatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
index 911e16acf..c1beb8bf5 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/DatePickerWithIndependentMonths.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <Calendar class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
index 6a4862a4f..afdeeb6fe 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "example/DatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
index 530a2eb0c..3bd4083d0 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/DatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
index ad88c0b29..4a892a4fd 100644
--- a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "example/DialogCustomCloseButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDemo.json b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
index f39a7f8c9..1b0dd9b7f 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "example/DrawerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
index 1ed6ca5f5..29230b27d 100644
--- a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "example/HoverCardDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithIcon.json b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
index b1384a9bd..78ca22225 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/InputWithIcon.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/StepperForm.json b/apps/www/src/public/r/styles/new-york/StepperForm.json
index 6d2f2914f..042c20c1c 100644
--- a/apps/www/src/public/r/styles/new-york/StepperForm.json
+++ b/apps/www/src/public/r/styles/new-york/StepperForm.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/StepperForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/StepperHorizental.json b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
index eccfe5a7b..0f1dae049 100644
--- a/apps/www/src/public/r/styles/new-york/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/StepperHorizental.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/StepperVertical.json b/apps/www/src/public/r/styles/new-york/StepperVertical.json
index 11e663a8a..094856adc 100644
--- a/apps/www/src/public/r/styles/new-york/StepperVertical.json
+++ b/apps/www/src/public/r/styles/new-york/StepperVertical.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/StepperVertical.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
index 4823f0c2c..f04d40a95 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
index debe3c850..37c8919b8 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleDisabledDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
index 94d3443a3..d0f9e8d4b 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
index dbe87b8b6..7e5fde61f 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupDisabledDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
index 41dc4fdb2..91c54c3af 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupLargeDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
index 9253a6786..4b996d63c 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupOutlineDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
index d8d1c6b41..2d2f88734 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupSingleDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
index 19105a61f..ee173cfe5 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleGroupSmallDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
index dd66b9d7e..a7ca9a853 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleItalicDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
index e8a8ce231..e3254ad6e 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleItalicWithTextDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
index 930306dc8..8cbc6ac96 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleLargeDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
index e0c96cfb2..c222920b9 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/ToggleSmallDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/accordion.json b/apps/www/src/public/r/styles/new-york/accordion.json
index 41e782b96..fbd92ecf5 100644
--- a/apps/www/src/public/r/styles/new-york/accordion.json
+++ b/apps/www/src/public/r/styles/new-york/accordion.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/accordion/AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/auto-form.json b/apps/www/src/public/r/styles/new-york/auto-form.json
index 2c0ac13c7..3ff428e3e 100644
--- a/apps/www/src/public/r/styles/new-york/auto-form.json
+++ b/apps/www/src/public/r/styles/new-york/auto-form.json
@@ -50,7 +50,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -62,7 +62,7 @@
     },
     {
       "path": "ui/auto-form/AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Trash } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <Trash />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/breadcrumb.json b/apps/www/src/public/r/styles/new-york/breadcrumb.json
index d2b762850..1f0a2064f 100644
--- a/apps/www/src/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/r/styles/new-york/breadcrumb.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/calendar.json b/apps/www/src/public/r/styles/new-york/calendar.json
index 532396cd9..cfff3a007 100644
--- a/apps/www/src/public/r/styles/new-york/calendar.json
+++ b/apps/www/src/public/r/styles/new-york/calendar.json
@@ -71,13 +71,13 @@
     },
     {
       "path": "ui/calendar/CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/calendar/CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/carousel.json b/apps/www/src/public/r/styles/new-york/carousel.json
index 52d75c0b7..5fdd4245e 100644
--- a/apps/www/src/public/r/styles/new-york/carousel.json
+++ b/apps/www/src/public/r/styles/new-york/carousel.json
@@ -30,13 +30,13 @@
     },
     {
       "path": "ui/carousel/CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/carousel/CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/checkbox.json b/apps/www/src/public/r/styles/new-york/checkbox.json
index 32e40e76d..a6e55652b 100644
--- a/apps/www/src/public/r/styles/new-york/checkbox.json
+++ b/apps/www/src/public/r/styles/new-york/checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/checkbox/Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 3dfdf9d93..1ffda2141 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -35,7 +35,7 @@
     },
     {
       "path": "ui/command/CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/context-menu.json b/apps/www/src/public/r/styles/new-york/context-menu.json
index 8875b22be..308bd7732 100644
--- a/apps/www/src/public/r/styles/new-york/context-menu.json
+++ b/apps/www/src/public/r/styles/new-york/context-menu.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -58,7 +58,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -88,7 +88,7 @@
     },
     {
       "path": "ui/context-menu/ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/dialog.json b/apps/www/src/public/r/styles/new-york/dialog.json
index 9f6707c6a..4a4f9dc4e 100644
--- a/apps/www/src/public/r/styles/new-york/dialog.json
+++ b/apps/www/src/public/r/styles/new-york/dialog.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/dialog/DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/dialog/DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/dropdown-menu.json b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
index 274453974..cf3c57d8e 100644
--- a/apps/www/src/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/r/styles/new-york/dropdown-menu.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -52,7 +52,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -82,7 +82,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/menubar.json b/apps/www/src/public/r/styles/new-york/menubar.json
index bd59af5bd..7e909224e 100644
--- a/apps/www/src/public/r/styles/new-york/menubar.json
+++ b/apps/www/src/public/r/styles/new-york/menubar.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/menubar/MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -58,7 +58,7 @@
     },
     {
       "path": "ui/menubar/MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -88,7 +88,7 @@
     },
     {
       "path": "ui/menubar/MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/navigation-menu.json b/apps/www/src/public/r/styles/new-york/navigation-menu.json
index ec6095cb0..ff7295e4d 100644
--- a/apps/www/src/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/r/styles/new-york/navigation-menu.json
@@ -46,7 +46,7 @@
     },
     {
       "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/pagination.json b/apps/www/src/public/r/styles/new-york/pagination.json
index 10fb693e3..1bb3bbc18 100644
--- a/apps/www/src/public/r/styles/new-york/pagination.json
+++ b/apps/www/src/public/r/styles/new-york/pagination.json
@@ -11,31 +11,31 @@
   "files": [
     {
       "path": "ui/pagination/PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/pagination/PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/pin-input.json b/apps/www/src/public/r/styles/new-york/pin-input.json
index 361c27518..5d0f4fed7 100644
--- a/apps/www/src/public/r/styles/new-york/pin-input.json
+++ b/apps/www/src/public/r/styles/new-york/pin-input.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/pin-input/PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { Minus } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Minus class=\"w-2\" />\n    </slot>\n  </primitive>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
index 2952fbce1..86eac016a 100644
--- a/apps/www/src/public/r/styles/new-york/radio-group.json
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/radio-group/RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/range-calendar.json b/apps/www/src/public/r/styles/new-york/range-calendar.json
index 221650bcb..829864900 100644
--- a/apps/www/src/public/r/styles/new-york/range-calendar.json
+++ b/apps/www/src/public/r/styles/new-york/range-calendar.json
@@ -71,13 +71,13 @@
     },
     {
       "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/resizable.json b/apps/www/src/public/r/styles/new-york/resizable.json
index 806200b72..9d7e1ccb3 100644
--- a/apps/www/src/public/r/styles/new-york/resizable.json
+++ b/apps/www/src/public/r/styles/new-york/resizable.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/resizable/ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/select.json b/apps/www/src/public/r/styles/new-york/select.json
index a0f6b2a49..4294de611 100644
--- a/apps/www/src/public/r/styles/new-york/select.json
+++ b/apps/www/src/public/r/styles/new-york/select.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/select/SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -46,13 +46,13 @@
     },
     {
       "path": "ui/select/SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/select/SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -64,7 +64,7 @@
     },
     {
       "path": "ui/select/SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/sheet.json b/apps/www/src/public/r/styles/new-york/sheet.json
index 0e16fdd63..ee2f1d43b 100644
--- a/apps/www/src/public/r/styles/new-york/sheet.json
+++ b/apps/www/src/public/r/styles/new-york/sheet.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/sheet/SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/tags-input.json b/apps/www/src/public/r/styles/new-york/tags-input.json
index 4da24fcaf..7a341b9f1 100644
--- a/apps/www/src/public/r/styles/new-york/tags-input.json
+++ b/apps/www/src/public/r/styles/new-york/tags-input.json
@@ -28,7 +28,7 @@
     },
     {
       "path": "ui/tags-input/TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/toast.json b/apps/www/src/public/r/styles/new-york/toast.json
index 69150c505..fac0541ff 100644
--- a/apps/www/src/public/r/styles/new-york/toast.json
+++ b/apps/www/src/public/r/styles/new-york/toast.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/toast/ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index b097f810b..fea589d4a 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -217,7 +217,7 @@
       },
       {
         "path": "ui/accordion/AccordionTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -410,7 +410,7 @@
       },
       {
         "path": "ui/auto-form/AutoFormFieldDate.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -422,7 +422,7 @@
       },
       {
         "path": "ui/auto-form/AutoFormFieldFile.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Trash } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <Trash />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -558,7 +558,7 @@
       },
       {
         "path": "ui/breadcrumb/BreadcrumbEllipsis.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -588,7 +588,7 @@
       },
       {
         "path": "ui/breadcrumb/BreadcrumbSeparator.vue",
-        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -697,13 +697,13 @@
       },
       {
         "path": "ui/calendar/CalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/calendar/CalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -799,13 +799,13 @@
       },
       {
         "path": "ui/carousel/CarouselNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/carousel/CarouselPrevious.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1000,7 +1000,7 @@
     "files": [
       {
         "path": "ui/checkbox/Checkbox.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1083,7 +1083,7 @@
       },
       {
         "path": "ui/command/CommandInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1137,7 +1137,7 @@
       },
       {
         "path": "ui/context-menu/ContextMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1179,7 +1179,7 @@
       },
       {
         "path": "ui/context-menu/ContextMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1209,7 +1209,7 @@
       },
       {
         "path": "ui/context-menu/ContextMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1251,7 +1251,7 @@
       },
       {
         "path": "ui/dialog/DialogContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1275,7 +1275,7 @@
       },
       {
         "path": "ui/dialog/DialogScrollContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1378,7 +1378,7 @@
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1414,7 +1414,7 @@
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1444,7 +1444,7 @@
       },
       {
         "path": "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1628,7 +1628,7 @@
       },
       {
         "path": "ui/menubar/MenubarCheckboxItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1670,7 +1670,7 @@
       },
       {
         "path": "ui/menubar/MenubarRadioItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1700,7 +1700,7 @@
       },
       {
         "path": "ui/menubar/MenubarSubTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1766,7 +1766,7 @@
       },
       {
         "path": "ui/navigation-menu/NavigationMenuTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1845,31 +1845,31 @@
     "files": [
       {
         "path": "ui/pagination/PaginationEllipsis.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/pagination/PaginationFirst.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/pagination/PaginationLast.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/pagination/PaginationNext.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/pagination/PaginationPrev.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1911,7 +1911,7 @@
       },
       {
         "path": "ui/pin-input/PinInputSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Minus } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Minus class=\"w-2\" />\n    </slot>\n  </primitive>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2001,7 +2001,7 @@
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2086,13 +2086,13 @@
       },
       {
         "path": "ui/range-calendar/RangeCalendarNextButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/range-calendar/RangeCalendarPrevButton.vue",
-        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2116,7 +2116,7 @@
     "files": [
       {
         "path": "ui/resizable/ResizableHandle.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2194,7 +2194,7 @@
       },
       {
         "path": "ui/select/SelectItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2212,13 +2212,13 @@
       },
       {
         "path": "ui/select/SelectScrollDownButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/select/SelectScrollUpButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2230,7 +2230,7 @@
       },
       {
         "path": "ui/select/SelectTrigger.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2296,7 +2296,7 @@
       },
       {
         "path": "ui/sheet/SheetContent.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2807,7 +2807,7 @@
       },
       {
         "path": "ui/tags-input/TagsInputItemDelete.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -2873,7 +2873,7 @@
       },
       {
         "path": "ui/toast/ToastClose.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -3018,32 +3018,6 @@
       }
     ]
   },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-        "type": "registry:ui",
-        "target": ""
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-        "type": "registry:ui",
-        "target": ""
-      }
-    ]
-  },
   {
     "name": "AccordionDemo",
     "type": "registry:example",
@@ -3070,7 +3044,7 @@
     "files": [
       {
         "path": "example/AlertDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { Rocket } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Rocket class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3086,7 +3060,7 @@
     "files": [
       {
         "path": "example/AlertDestructiveDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3493,7 +3467,7 @@
     "files": [
       {
         "path": "example/BreadcrumbDropdown.vue",
-        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3562,7 +3536,7 @@
     "files": [
       {
         "path": "example/BreadcrumbSeparatorDemo.vue",
-        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3642,7 +3616,7 @@
     "files": [
       {
         "path": "example/ButtonIconDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3674,7 +3648,7 @@
     "files": [
       {
         "path": "example/ButtonLoadingDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3722,7 +3696,7 @@
     "files": [
       {
         "path": "example/ButtonWithIconDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { MailOpen } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <MailOpen class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3763,7 +3737,7 @@
     "files": [
       {
         "path": "example/CalendarForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3807,7 +3781,7 @@
     "files": [
       {
         "path": "example/CardChat.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -3826,7 +3800,7 @@
     "files": [
       {
         "path": "example/CardDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { Bell, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <Bell />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4121,7 +4095,7 @@
     "files": [
       {
         "path": "example/CollapsibleDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4140,7 +4114,7 @@
     "files": [
       {
         "path": "example/ComboboxDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4158,7 +4132,7 @@
     "files": [
       {
         "path": "example/ComboboxDropdownMenu.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4183,7 +4157,7 @@
     "files": [
       {
         "path": "example/ComboboxForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4238,7 +4212,7 @@
     "files": [
       {
         "path": "example/CommandDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4311,7 +4285,7 @@
     "files": [
       {
         "path": "example/DataTableColumnPinningDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4334,7 +4308,7 @@
     "files": [
       {
         "path": "example/DataTableDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4351,7 +4325,7 @@
     "files": [
       {
         "path": "example/DataTableDemoColumn.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4393,7 +4367,7 @@
     "files": [
       {
         "path": "example/DatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4418,7 +4392,7 @@
     "files": [
       {
         "path": "example/DatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4439,7 +4413,7 @@
     "files": [
       {
         "path": "example/DatePickerWithIndependentMonths.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <Calendar class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4459,7 +4433,7 @@
     "files": [
       {
         "path": "example/DatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4480,7 +4454,7 @@
     "files": [
       {
         "path": "example/DatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4499,7 +4473,7 @@
     "files": [
       {
         "path": "example/DialogCustomCloseButton.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4656,7 +4630,7 @@
     "files": [
       {
         "path": "example/DrawerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4749,7 +4723,7 @@
     "files": [
       {
         "path": "example/HoverCardDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4877,7 +4851,7 @@
     "files": [
       {
         "path": "example/InputWithIcon.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -5632,7 +5606,7 @@
     "files": [
       {
         "path": "example/StepperForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -5649,7 +5623,7 @@
     "files": [
       {
         "path": "example/StepperHorizental.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -5666,7 +5640,7 @@
     "files": [
       {
         "path": "example/StepperVertical.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6029,7 +6003,7 @@
     "files": [
       {
         "path": "example/ToggleDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6045,7 +6019,7 @@
     "files": [
       {
         "path": "example/ToggleDisabledDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6061,7 +6035,7 @@
     "files": [
       {
         "path": "example/ToggleGroupDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6077,7 +6051,7 @@
     "files": [
       {
         "path": "example/ToggleGroupDisabledDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6093,7 +6067,7 @@
     "files": [
       {
         "path": "example/ToggleGroupLargeDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6109,7 +6083,7 @@
     "files": [
       {
         "path": "example/ToggleGroupOutlineDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6125,7 +6099,7 @@
     "files": [
       {
         "path": "example/ToggleGroupSingleDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6141,7 +6115,7 @@
     "files": [
       {
         "path": "example/ToggleGroupSmallDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6157,7 +6131,7 @@
     "files": [
       {
         "path": "example/ToggleItalicDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6173,7 +6147,7 @@
     "files": [
       {
         "path": "example/ToggleItalicWithTextDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6189,7 +6163,7 @@
     "files": [
       {
         "path": "example/ToggleLargeDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6205,7 +6179,7 @@
     "files": [
       {
         "path": "example/ToggleSmallDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -6424,143 +6398,6 @@
       }
     ]
   },
-  {
-    "name": "VCalendarDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VCalendarDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerForm",
-    "type": "registry:example",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "form",
-      "popover",
-      "toast",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerWithPresets",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "select",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerWithRange",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDateTimePickerDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDateTimePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VRangePickerWithSlot",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VRangePickerWithSlot.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
   {
     "name": "Authentication01",
     "type": "registry:block",
@@ -10473,32 +10310,6 @@
       }
     ]
   },
-  {
-    "name": "v-calendar",
-    "type": "registry:ui",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      {
-        "path": "ui/v-calendar/Calendar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-        "type": "registry:ui",
-        "target": ""
-      },
-      {
-        "path": "ui/v-calendar/index.ts",
-        "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-        "type": "registry:ui",
-        "target": ""
-      }
-    ]
-  },
   {
     "name": "AccordionDemo",
     "type": "registry:example",
@@ -13880,143 +13691,6 @@
       }
     ]
   },
-  {
-    "name": "VCalendarDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VCalendarDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerForm",
-    "type": "registry:example",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "form",
-      "popover",
-      "toast",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerWithPresets",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "select",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerWithPresets.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDatePickerWithRange",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDatePickerWithRange.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VDateTimePickerDemo",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VDateTimePickerDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "VRangePickerWithSlot",
-    "type": "registry:example",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button",
-      "popover",
-      "v-calendar"
-    ],
-    "files": [
-      {
-        "path": "example/VRangePickerWithSlot.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-        "type": "registry:example",
-        "target": ""
-      }
-    ]
-  },
   {
     "name": "Authentication01",
     "type": "registry:block",
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index ce56e7e70..e0bace4b6 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -11,16 +11,15 @@ const DEPENDENCIES = new Map<string, string[]>([
   ['@vueuse/core', []],
   ['vue-sonner', []],
   ['vaul-vue', []],
-  ['v-calendar', []],
   ['@tanstack/vue-table', []],
   ['@unovis/vue', ['@unovis/ts']],
   ['embla-carousel-vue', []],
   ['vee-validate', ['@vee-validate/zod', 'zod']],
 ])
 // Some dependencies latest tag were not compatible with Vue3.
-const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
-  ['v-calendar', 'v-calendar@next'],
-])
+// const DEPENDENCIES_WITH_TAGS = new Map<string, string>([
+//   ['v-calendar', 'v-calendar@next'],
+// ])
 const REGISTRY_DEPENDENCY = '@/'
 
 type ArrayItem<T> = T extends Array<infer X> ? X : never
@@ -283,12 +282,12 @@ async function getFileDependencies(filename: string, sourceCode: string) {
 
   const populateDeps = (source: string) => {
     const peerDeps = DEPENDENCIES.get(source)
-    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
+    // const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
     if (peerDeps !== undefined) {
-      if (taggedDeps !== undefined)
-        dependencies.add(taggedDeps)
-      else
-        dependencies.add(source)
+      // if (taggedDeps !== undefined)
+      //   dependencies.add(taggedDeps)
+      // else
+      dependencies.add(source)
       peerDeps.forEach(dep => dependencies.add(dep))
     }
 
diff --git a/apps/www/src/registry/default/example/VCalendarDemo.vue b/apps/www/src/registry/default/example/VCalendarDemo.vue
deleted file mode 100644
index 93a3565c1..000000000
--- a/apps/www/src/registry/default/example/VCalendarDemo.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { ref } from 'vue'
-
-const date = ref(new Date())
-</script>
-
-<template>
-  <Calendar v-model="date" class="rounded-md border" />
-</template>
diff --git a/apps/www/src/registry/default/example/VDatePickerDemo.vue b/apps/www/src/registry/default/example/VDatePickerDemo.vue
deleted file mode 100644
index b7bf5c9af..000000000
--- a/apps/www/src/registry/default/example/VDatePickerDemo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/default/example/VDatePickerForm.vue b/apps/www/src/registry/default/example/VDatePickerForm.vue
deleted file mode 100644
index b3b3d2df7..000000000
--- a/apps/www/src/registry/default/example/VDatePickerForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/registry/default/ui/form'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { toast } from '@/registry/default/ui/toast'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-
-import { toTypedSchema } from '@vee-validate/zod'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { useForm } from 'vee-validate'
-
-import { h } from 'vue'
-import * as z from 'zod'
-
-const formSchema = toTypedSchema(z.object({
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
-}))
-
-const { handleSubmit } = useForm({
-  validationSchema: formSchema,
-})
-
-const onSubmit = handleSubmit((values) => {
-  toast({
-    title: 'You submitted the following values:',
-    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
-  })
-})
-</script>
-
-<template>
-  <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField, value }" name="dob">
-      <FormItem class="flex flex-col">
-        <FormLabel>Date of birth</FormLabel>
-        <Popover>
-          <PopoverTrigger as-child>
-            <FormControl>
-              <Button
-                variant="outline" :class="cn(
-                  'w-[240px] ps-3 text-start font-normal',
-                  !value && 'text-muted-foreground',
-                )"
-              >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
-                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
-              </Button>
-            </FormControl>
-          </PopoverTrigger>
-          <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
-          </PopoverContent>
-        </Popover>
-        <FormDescription>
-          Your date of birth is used to calculate your age.
-        </FormDescription>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-    <Button type="submit">
-      Submit
-    </Button>
-  </Form>
-</template>
diff --git a/apps/www/src/registry/default/example/VDatePickerWithPresets.vue b/apps/www/src/registry/default/example/VDatePickerWithPresets.vue
deleted file mode 100644
index da9ecb89e..000000000
--- a/apps/www/src/registry/default/example/VDatePickerWithPresets.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/registry/default/ui/select'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <template v-if="date">
-          {{ format(date, "PPP") }}
-        </template>
-        <template v-else>
-          <span>Pick a date</span>
-        </template>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
-      <Select
-        @update:model-value="(value) => {
-          date = addDays(new Date(), parseInt(value))
-        }"
-      >
-        <SelectTrigger>
-          <SelectValue placeholder="Select" />
-        </SelectTrigger>
-        <SelectContent position="popper">
-          <SelectItem value="0">
-            Today
-          </SelectItem>
-          <SelectItem value="1">
-            Tomorrow
-          </SelectItem>
-          <SelectItem value="3">
-            In 3 days
-          </SelectItem>
-          <SelectItem value="7">
-            In a week
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="rounded-md border">
-        <Calendar v-model="date" mode="single" />
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/default/example/VDatePickerWithRange.vue b/apps/www/src/registry/default/example/VDatePickerWithRange.vue
deleted file mode 100644
index 490d84144..000000000
--- a/apps/www/src/registry/default/example/VDatePickerWithRange.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
-        />
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>
diff --git a/apps/www/src/registry/default/example/VDateTimePickerDemo.vue b/apps/www/src/registry/default/example/VDateTimePickerDemo.vue
deleted file mode 100644
index 013bcda06..000000000
--- a/apps/www/src/registry/default/example/VDateTimePickerDemo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" mode="datetime" />
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/default/example/VRangePickerWithSlot.vue b/apps/www/src/registry/default/example/VRangePickerWithSlot.vue
deleted file mode 100644
index 1fa9bfbba..000000000
--- a/apps/www/src/registry/default/example/VRangePickerWithSlot.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Calendar } from '@/registry/default/ui/v-calendar'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          mode="date"
-          :columns="2"
-        >
-          <template #footer>
-            <div class="w-full px-3 pb-3">
-              Entry time
-              <Calendar
-                v-model="date.start"
-                mode="time"
-                hide-time-header
-              />
-              Exit time
-              <Calendar
-                v-model="date.end"
-                mode="time"
-                hide-time-header
-              />
-            </div>
-          </template>
-        </Calendar>
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>
diff --git a/apps/www/src/registry/default/ui/v-calendar/Calendar.vue b/apps/www/src/registry/default/ui/v-calendar/Calendar.vue
deleted file mode 100644
index 227a7c918..000000000
--- a/apps/www/src/registry/default/ui/v-calendar/Calendar.vue
+++ /dev/null
@@ -1,343 +0,0 @@
-<script setup lang="ts">
-import type { Calendar } from 'v-calendar'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/registry/default/ui/button'
-import { useVModel } from '@vueuse/core'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { DatePicker } from 'v-calendar'
-import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
-
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-const props = withDefaults(defineProps< {
-  modelValue?: string | number | Date | DatePickerModel
-  modelModifiers?: object
-  columns?: number
-  type?: 'single' | 'range'
-}>(), {
-  type: 'single',
-  columns: 1,
-})
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-})
-
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value)
-    return
-
-  if (direction === 'prev')
-    calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter(name => isVCalendarSlot(name))
-    .reduce((obj: Record<string, any>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        )"
-        @click="handleNav('prev')"
-      >
-        <ChevronLeft class="w-4 h-4" />
-      </button>
-      <button
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        )"
-        @click="handleNav('next')"
-      >
-        <ChevronRight class="w-4 h-4" />
-      </button>
-    </div>
-
-    <DatePicker
-      ref="datePicker"
-      v-bind="$attrs"
-      v-model="modelValue"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-
-      <template #nav-prev-button>
-        <ChevronLeft />
-      </template>
-
-      <template #nav-next-button>
-        <ChevronRight />
-      </template>
-    </DatePicker>
-  </div>
-</template>
-
-<style lang="css">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4 max-sm:!grid-cols-1;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium relative z-20;
-}
-.vc-popover-content-wrapper .vc-popover-content {
-  @apply mt-3 rounded-md max-w-xs border bg-background;
-}
-.vc-popover-content-wrapper .vc-nav-header {
-  @apply flex justify-between items-center p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items {
-  @apply grid grid-cols-4 gap-2 p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
-  @apply rounded-md px-2 py-1;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
-  @apply text-muted-foreground bg-muted;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
-  @apply bg-primary text-primary-foreground;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply justify-items-center;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
-}
-.calendar .vc-weeks {
-  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
-  @apply bg-secondary text-primary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
-  @apply rounded-md;
-}
-.calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent text-accent-foreground;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply w-full relative;
-}
-:root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
-}
-
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
-}
-
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
-}
-
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-	opacity: 0;
-}
-
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
-}
-
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-t border-solid border-secondary mt-2;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
-}
-.vc-time-select-group {
-  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
-}
-.vc-time-select-group select {
-  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>
diff --git a/apps/www/src/registry/default/ui/v-calendar/index.ts b/apps/www/src/registry/default/ui/v-calendar/index.ts
deleted file mode 100644
index d17d00f2f..000000000
--- a/apps/www/src/registry/default/ui/v-calendar/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
-
-export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
-  const validSlots: CalendarSlotName[] = [
-    'day-content',
-    'day-popover',
-    'dp-footer',
-    'footer',
-    'header-title-wrapper',
-    'header-title',
-    'header-prev-button',
-    'header-next-button',
-    'nav',
-    'nav-prev-button',
-    'nav-next-button',
-    'page',
-    'time-header',
-  ]
-
-  return validSlots.includes(slotName as CalendarSlotName)
-}
diff --git a/apps/www/src/registry/new-york/example/AlertDemo.vue b/apps/www/src/registry/new-york/example/AlertDemo.vue
index 8229c2285..69c0fad95 100644
--- a/apps/www/src/registry/new-york/example/AlertDemo.vue
+++ b/apps/www/src/registry/new-york/example/AlertDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
-import { RocketIcon } from '@radix-icons/vue'
+import { Rocket } from 'lucide-vue-next'
 </script>
 
 <template>
   <Alert>
-    <RocketIcon class="h-4 w-4" />
+    <Rocket class="h-4 w-4" />
     <AlertTitle>Heads up!</AlertTitle>
     <AlertDescription>
       You can add components to your app using the cli.
diff --git a/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue b/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
index b99280f60..70f95f2e5 100644
--- a/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
+++ b/apps/www/src/registry/new-york/example/AlertDestructiveDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'
-import { ExclamationTriangleIcon } from '@radix-icons/vue'
+import { AlertCircle } from 'lucide-vue-next'
 </script>
 
 <template>
   <Alert variant="destructive">
-    <ExclamationTriangleIcon class="w-4 h-4" />
+    <AlertCircle class="w-4 h-4" />
     <AlertTitle>Error</AlertTitle>
     <AlertDescription>
       Your session has expired. Please log in again.
diff --git a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
index 55adf6a87..02131919b 100644
--- a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/registry/new-york/ui/dropdown-menu'
-import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
+import { ChevronDown, Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -25,13 +25,13 @@ import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <DropdownMenu>
           <DropdownMenuTrigger class="flex items-center gap-1">
             Components
-            <ChevronDownIcon class="h-4 w-4" />
+            <ChevronDown class="h-4 w-4" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
             <DropdownMenuItem>Documentation</DropdownMenuItem>
diff --git a/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
index a02ca4289..de8b89fe8 100644
--- a/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbSeparatorDemo.vue
@@ -7,7 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/registry/new-york/ui/breadcrumb'
-import { SlashIcon } from '@radix-icons/vue'
+import { Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -19,7 +19,7 @@ import { SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbLink href="/docs/components/accordion.html">
@@ -27,7 +27,7 @@ import { SlashIcon } from '@radix-icons/vue'
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
diff --git a/apps/www/src/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/registry/new-york/example/ButtonIconDemo.vue
index 423f654e2..f0644f4a9 100644
--- a/apps/www/src/registry/new-york/example/ButtonIconDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonIconDemo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRightIcon class="w-4 h-4" />
+    <ChevronRight class="w-4 h-4" />
   </Button>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
index 8b111d687..1601380f7 100644
--- a/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonLoadingDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { ReloadIcon } from '@radix-icons/vue'
+import { Loader2 } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button disabled>
-    <ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
+    <Loader2 class="w-4 h-4 mr-2 animate-spin" />
     Please wait
   </Button>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
index 53a79037c..83253d94e 100644
--- a/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/registry/new-york/example/ButtonWithIconDemo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
-import { EnvelopeOpenIcon } from '@radix-icons/vue'
+import { MailOpen } from 'lucide-vue-next'
 </script>
 
 <template>
   <Button>
-    <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
+    <MailOpen class="w-4 h-4 mr-2" /> Login with Email
   </Button>
 </template>
diff --git a/apps/www/src/registry/new-york/example/CalendarForm.vue b/apps/www/src/registry/new-york/example/CalendarForm.vue
index 7b0afbd0b..81b1d7882 100644
--- a/apps/www/src/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/registry/new-york/example/CalendarForm.vue
@@ -13,8 +13,8 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { CalendarIcon } from 'lucide-vue-next'
 import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
diff --git a/apps/www/src/registry/new-york/example/CardChat.vue b/apps/www/src/registry/new-york/example/CardChat.vue
index 00eca58ee..f4dd9f7ab 100644
--- a/apps/www/src/registry/new-york/example/CardChat.vue
+++ b/apps/www/src/registry/new-york/example/CardChat.vue
@@ -18,7 +18,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/registry/new-york/ui/tooltip'
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
+import { Check, Plus, Send } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
 const input = ref('')
@@ -89,7 +89,7 @@ const selectedUsers = ref<User[]>([])
               class="rounded-full p-2.5 flex items-center justify-center"
               @click="open = true"
             >
-              <PlusIcon class="w-4 h-4" />
+              <Plus class="w-4 h-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent :side-offset="10">
@@ -125,7 +125,7 @@ const selectedUsers = ref<User[]>([])
       >
         <Input v-model="input" placeholder="Type a message..." class="flex-1" />
         <Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
-          <PaperPlaneIcon class="w-4 h-4" />
+          <Send class="w-4 h-4" />
           <span class="sr-only">Send</span>
         </Button>
       </form>
@@ -173,7 +173,7 @@ const selectedUsers = ref<User[]>([])
                   {{ user.email }}
                 </p>
               </div>
-              <CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
+              <Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
             </CommandItem>
           </CommandGroup>
         </CommandList>
diff --git a/apps/www/src/registry/new-york/example/CardDemo.vue b/apps/www/src/registry/new-york/example/CardDemo.vue
index cce67f4b7..3deaaec51 100644
--- a/apps/www/src/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/registry/new-york/example/CardDemo.vue
@@ -10,7 +10,7 @@ import {
   CardTitle,
 } from '@/registry/new-york/ui/card'
 import { Switch } from '@/registry/new-york/ui/switch'
-import { BellIcon, CheckIcon } from '@radix-icons/vue'
+import { Bell, Check } from 'lucide-vue-next'
 
 const notifications = [
   {
@@ -36,7 +36,7 @@ const notifications = [
     </CardHeader>
     <CardContent class="grid gap-4">
       <div class=" flex items-center space-x-4 rounded-md border p-4">
-        <BellIcon />
+        <Bell />
         <div class="flex-1 space-y-1">
           <p class="text-sm font-medium leading-none">
             Push Notifications
@@ -66,7 +66,7 @@ const notifications = [
     </CardContent>
     <CardFooter>
       <Button class="w-full">
-        <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
+        <Check class="mr-2 h-4 w-4" /> Mark all as read
       </Button>
     </CardFooter>
   </Card>
diff --git a/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
index 01df84163..530c0a9b5 100644
--- a/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/registry/new-york/example/Cards/ActivityGoal.vue
@@ -8,8 +8,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@/registry/new-york/ui/card'
-import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Minus, Plus } from 'lucide-vue-next'
 
 import { ref } from 'vue'
 
@@ -50,7 +50,7 @@ const data = [
           :disabled="goal <= 200"
           @click="goal -= 10"
         >
-          <MinusIcon class="h-4 w-4" />
+          <Minus class="h-4 w-4" />
           <span class="sr-only">Decrease</span>
         </Button>
         <div class="flex-1 text-center">
@@ -68,7 +68,7 @@ const data = [
           :disabled="goal >= 400"
           @click="goal += 10 "
         >
-          <PlusIcon class="h-4 w-4" />
+          <Plus class="h-4 w-4" />
           <span class="sr-only">Increase</span>
         </Button>
       </div>
diff --git a/apps/www/src/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/registry/new-york/example/Cards/DataTable.vue
index a3837e20c..beb89e9d6 100644
--- a/apps/www/src/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/registry/new-york/example/Cards/DataTable.vue
@@ -25,7 +25,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/registry/new-york/ui/table'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
   getCoreRowModel,
@@ -34,6 +33,7 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
 
@@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -179,7 +179,7 @@ const table = useVueTable({
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
               <Button variant="outline" class="ml-auto">
-                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+                Columns <ChevronDown class="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
diff --git a/apps/www/src/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/registry/new-york/example/CollapsibleDemo.vue
index 828bafce1..1a0a28ce0 100644
--- a/apps/www/src/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/registry/new-york/example/CollapsibleDemo.vue
@@ -6,7 +6,7 @@ import {
   CollapsibleTrigger,
 } from '@/registry/new-york/ui/collapsible'
 
-import { CaretSortIcon } from '@radix-icons/vue'
+import { ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const isOpen = ref(false)
@@ -23,7 +23,7 @@ const isOpen = ref(false)
       </h4>
       <CollapsibleTrigger as-child>
         <Button variant="ghost" size="sm" class="w-9 p-0">
-          <CaretSortIcon class="h-4 w-4" />
+          <ChevronsUpDown class="h-4 w-4" />
           <span class="sr-only">Toggle</span>
         </Button>
       </CollapsibleTrigger>
diff --git a/apps/www/src/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
index 41b8c380d..09805ba1e 100644
--- a/apps/www/src/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
@@ -15,7 +15,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/registry/new-york/ui/popover'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const frameworks = [
@@ -42,7 +42,7 @@ const value = ref('')
         {{ value
           ? frameworks.find((framework) => framework.value === value)?.label
           : "Select framework..." }}
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -63,7 +63,7 @@ const value = ref('')
               }"
             >
               {{ framework.label }}
-              <CheckIcon
+              <Check
                 :class="cn(
                   'ml-auto h-4 w-4',
                   value === framework.value ? 'opacity-100' : 'opacity-0',
diff --git a/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
index f42c57a0a..c1e0db627 100644
--- a/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxDropdownMenu.vue
@@ -22,7 +22,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/registry/new-york/ui/dropdown-menu'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const labels = [
@@ -50,7 +50,7 @@ const open = ref(false)
     <DropdownMenu v-model:open="open">
       <DropdownMenuTrigger as-child>
         <Button variant="ghost" size="sm">
-          <DotsHorizontalIcon />
+          <MoreHorizontal />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" class="w-[200px]">
diff --git a/apps/www/src/registry/new-york/example/ComboboxForm.vue b/apps/www/src/registry/new-york/example/ComboboxForm.vue
index 02b5a4d08..7168d520e 100644
--- a/apps/www/src/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxForm.vue
@@ -24,8 +24,8 @@ import {
   PopoverTrigger,
 } from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { useForm } from 'vee-validate'
 import { h } from 'vue'
 import * as z from 'zod'
@@ -79,7 +79,7 @@ const onSubmit = handleSubmit((values) => {
                 {{ values.language ? languages.find(
                   (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
-                <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
             </FormControl>
           </PopoverTrigger>
@@ -98,7 +98,7 @@ const onSubmit = handleSubmit((values) => {
                     }"
                   >
                     {{ language.label }}
-                    <CheckIcon
+                    <Check
                       :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                     />
                   </CommandItem>
diff --git a/apps/www/src/registry/new-york/example/CommandDemo.vue b/apps/www/src/registry/new-york/example/CommandDemo.vue
index e1c99bdc6..bab80998a 100644
--- a/apps/www/src/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/registry/new-york/example/CommandDemo.vue
@@ -11,48 +11,48 @@ import {
 } from '@/registry/new-york/ui/command'
 
 import {
-  CalendarIcon,
-  EnvelopeClosedIcon,
-  FaceIcon,
-  GearIcon,
-  PersonIcon,
-  RocketIcon,
-} from '@radix-icons/vue'
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from 'lucide-vue-next'
 </script>
 
 <template>
-  <Command class="rounded-lg border shadow-md max-w-[450px]">
+  <Command class="rounded-lg border shadow-md md:min-w-[450px]">
     <CommandInput placeholder="Type a command or search..." />
     <CommandList>
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandGroup heading="Suggestions">
-        <CommandItem value="Calendar">
-          <CalendarIcon class="mr-2 h-4 w-4" />
+        <CommandItem value="calendar">
+          <Calendar />
           <span>Calendar</span>
         </CommandItem>
-        <CommandItem value="Search Emoji">
-          <FaceIcon class="mr-2 h-4 w-4" />
+        <CommandItem value="search">
+          <Smile />
           <span>Search Emoji</span>
         </CommandItem>
-        <CommandItem value="Launch">
-          <RocketIcon class="mr-2 h-4 w-4" />
-          <span>Launch</span>
+        <CommandItem disabled value="calculator">
+          <Calculator />
+          <span>Calculator</span>
         </CommandItem>
       </CommandGroup>
       <CommandSeparator />
       <CommandGroup heading="Settings">
-        <CommandItem value="Profile">
-          <PersonIcon class="mr-2 h-4 w-4" />
+        <CommandItem value="profile">
+          <User />
           <span>Profile</span>
           <CommandShortcut>⌘P</CommandShortcut>
         </CommandItem>
-        <CommandItem value="Mail">
-          <EnvelopeClosedIcon class="mr-2 h-4 w-4" />
-          <span>Mail</span>
+        <CommandItem value="billing">
+          <CreditCard />
+          <span>Billing</span>
           <CommandShortcut>⌘B</CommandShortcut>
         </CommandItem>
-        <CommandItem value="Settings">
-          <GearIcon class="mr-2 h-4 w-4" />
+        <CommandItem value="settings">
+          <Settings />
           <span>Settings</span>
           <CommandShortcut>⌘S</CommandShortcut>
         </CommandItem>
diff --git a/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
index 8c8e0399a..2fe536699 100644
--- a/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -24,7 +24,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/registry/new-york/ui/table'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   createColumnHelper,
   FlexRender,
@@ -35,6 +34,7 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
+import { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 import DropdownAction from './DataTableDemoColumn.vue'
 
@@ -108,7 +108,7 @@ const columns = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   }),
@@ -184,7 +184,7 @@ const table = useVueTable({
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button variant="outline" class="ml-auto">
-            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+            Columns <ChevronDown class="ml-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/apps/www/src/registry/new-york/example/DataTableDemo.vue b/apps/www/src/registry/new-york/example/DataTableDemo.vue
index eb2229ebe..0b707bba5 100644
--- a/apps/www/src/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/registry/new-york/example/DataTableDemo.vue
@@ -25,7 +25,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/registry/new-york/ui/table'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
   getCoreRowModel,
@@ -35,6 +34,7 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
+import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 import DropdownAction from './DataTableDemoColumn.vue'
 
@@ -105,7 +105,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -179,7 +179,7 @@ const table = useVueTable({
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button variant="outline" class="ml-auto">
-            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+            Columns <ChevronDown class="ml-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue b/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
index 3dc27c87b..f9115179b 100644
--- a/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
+++ b/apps/www/src/registry/new-york/example/DataTableDemoColumn.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Button } from '@/registry/new-york/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 defineProps<{
   payment: {
@@ -23,7 +23,7 @@ function copy(id: string) {
     <DropdownMenuTrigger as-child>
       <Button variant="ghost" class="h-8 w-8 p-0">
         <span class="sr-only">Open menu</span>
-        <DotsHorizontalIcon class="h-4 w-4" />
+        <MoreHorizontal class="h-4 w-4" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
diff --git a/apps/www/src/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/registry/new-york/example/DatePickerDemo.vue
index e8592b7ea..c96030d51 100644
--- a/apps/www/src/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerDemo.vue
@@ -9,7 +9,7 @@ import {
   type DateValue,
   getLocalTimeZone,
 } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
+import { CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
diff --git a/apps/www/src/registry/new-york/example/DatePickerForm.vue b/apps/www/src/registry/new-york/example/DatePickerForm.vue
index 506750d9a..e69b5a5af 100644
--- a/apps/www/src/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerForm.vue
@@ -13,8 +13,8 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
 import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { CalendarIcon } from 'lucide-vue-next'
 import { toDate } from 'reka-ui/date'
 import { useForm } from 'vee-validate'
 import { computed, h, ref } from 'vue'
diff --git a/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue b/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
index 2b53713d0..42e36dd07 100644
--- a/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithIndependentMonths.vue
@@ -23,10 +23,10 @@ import {
   isEqualMonth,
 } from '@internationalized/date'
 import {
-  CalendarIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from '@radix-icons/vue'
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-vue-next'
 import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'
 import { createMonth, type Grid, toDate } from 'reka-ui/date'
 import { type Ref, ref, watch } from 'vue'
@@ -108,7 +108,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
           )
         "
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <Calendar class="mr-2 h-4 w-4" />
         <template v-if="value.start">
           <template v-if="value.end">
             {{
@@ -153,7 +153,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('first', -1)"
               >
-                <ChevronLeftIcon class="h-4 w-4" />
+                <ChevronLeft class="h-4 w-4" />
               </button>
               <div :class="cn('text-sm font-medium')">
                 {{
@@ -171,7 +171,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('first', 1)"
               >
-                <ChevronRightIcon class="h-4 w-4" />
+                <ChevronRight class="h-4 w-4" />
               </button>
             </div>
             <RangeCalendarGrid>
@@ -219,7 +219,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('second', -1)"
               >
-                <ChevronLeftIcon class="h-4 w-4" />
+                <ChevronLeft class="h-4 w-4" />
               </button>
               <div :class="cn('text-sm font-medium')">
                 {{
@@ -238,7 +238,7 @@ watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
                 "
                 @click="updateMonth('second', 1)"
               >
-                <ChevronRightIcon class="h-4 w-4" />
+                <ChevronRight class="h-4 w-4" />
               </button>
             </div>
             <RangeCalendarGrid>
diff --git a/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
index f661c8cf2..a704b8262 100644
--- a/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithPresets.vue
@@ -11,7 +11,7 @@ import {
   getLocalTimeZone,
   today,
 } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
+import { CalendarIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
diff --git a/apps/www/src/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/registry/new-york/example/DatePickerWithRange.vue
index 9dd653110..b671d548c 100644
--- a/apps/www/src/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/registry/new-york/example/DatePickerWithRange.vue
@@ -10,7 +10,7 @@ import {
   DateFormatter,
   getLocalTimeZone,
 } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
+import { CalendarIcon } from 'lucide-vue-next'
 import { type Ref, ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
diff --git a/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
index b99540db7..85f3b09de 100644
--- a/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/registry/new-york/example/DialogCustomCloseButton.vue
@@ -12,7 +12,7 @@ import {
 } from '@/registry/new-york/ui/dialog'
 import { Input } from '@/registry/new-york/ui/input'
 import { Label } from '@/registry/new-york/ui/label'
-import { CopyIcon } from '@radix-icons/vue'
+import { Copy } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -42,7 +42,7 @@ import { CopyIcon } from '@radix-icons/vue'
         </div>
         <Button type="submit" size="sm" class="px-3">
           <span class="sr-only">Copy</span>
-          <CopyIcon class="w-4 h-4" />
+          <Copy class="w-4 h-4" />
         </Button>
       </div>
       <DialogFooter class="sm:justify-start">
diff --git a/apps/www/src/registry/new-york/example/DrawerDemo.vue b/apps/www/src/registry/new-york/example/DrawerDemo.vue
index 8ed2ae6b2..ec6c9770d 100644
--- a/apps/www/src/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/registry/new-york/example/DrawerDemo.vue
@@ -10,8 +10,8 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '@/registry/new-york/ui/drawer'
-import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Minus, Plus } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 const goal = ref(350)
@@ -56,7 +56,7 @@ const data = [
               :disabled="goal <= 200"
               @click="goal -= 10"
             >
-              <MinusIcon class="h-4 w-4" />
+              <Minus class="h-4 w-4" />
               <span class="sr-only">Decrease</span>
             </Button>
             <div class="flex-1 text-center">
@@ -74,7 +74,7 @@ const data = [
               :disabled="goal >= 400"
               @click="goal += 10"
             >
-              <PlusIcon class="h-4 w-4" />
+              <Plus class="h-4 w-4" />
               <span class="sr-only">Increase</span>
             </Button>
           </div>
diff --git a/apps/www/src/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/registry/new-york/example/HoverCardDemo.vue
index 337727f98..fd2be674a 100644
--- a/apps/www/src/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/registry/new-york/example/HoverCardDemo.vue
@@ -11,7 +11,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@/registry/new-york/ui/hover-card'
-import { CalendarIcon } from '@radix-icons/vue'
+import { CalendarIcon } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/registry/new-york/example/InputWithIcon.vue b/apps/www/src/registry/new-york/example/InputWithIcon.vue
index ee9e17d19..5456af61a 100644
--- a/apps/www/src/registry/new-york/example/InputWithIcon.vue
+++ b/apps/www/src/registry/new-york/example/InputWithIcon.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Input } from '@/registry/new-york/ui/input'
-import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Search } from 'lucide-vue-next'
 </script>
 
 <template>
   <div class="relative w-full max-w-sm items-center">
     <Input id="search" type="text" placeholder="Search..." class="pl-10" />
     <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+      <Search class="size-6 text-muted-foreground" />
     </span>
   </div>
 </template>
diff --git a/apps/www/src/registry/new-york/example/StepperForm.vue b/apps/www/src/registry/new-york/example/StepperForm.vue
index 423af32cc..3642db0b0 100644
--- a/apps/www/src/registry/new-york/example/StepperForm.vue
+++ b/apps/www/src/registry/new-york/example/StepperForm.vue
@@ -12,8 +12,8 @@ import {
 } from '@/registry/new-york/ui/select'
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
 import { toast } from '@/registry/new-york/ui/toast'
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
 import { toTypedSchema } from '@vee-validate/zod'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 import * as z from 'zod'
 
@@ -103,9 +103,9 @@ function onSubmit(values: any) {
                 :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
                 :disabled="state !== 'completed' && !meta.valid"
               >
-                <CheckIcon v-if="state === 'completed'" class="size-5" />
-                <CircleIcon v-if="state === 'active'" />
-                <DotIcon v-if="state === 'inactive'" />
+                <Check v-if="state === 'completed'" class="size-5" />
+                <Circle v-if="state === 'active'" />
+                <Dot v-if="state === 'inactive'" />
               </Button>
             </StepperTrigger>
 
diff --git a/apps/www/src/registry/new-york/example/StepperHorizental.vue b/apps/www/src/registry/new-york/example/StepperHorizental.vue
index 993bd9b47..c32daace2 100644
--- a/apps/www/src/registry/new-york/example/StepperHorizental.vue
+++ b/apps/www/src/registry/new-york/example/StepperHorizental.vue
@@ -2,7 +2,7 @@
 import { Button } from '@/registry/new-york/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
   {
@@ -44,9 +44,9 @@ const steps = [
           class="z-10 rounded-full shrink-0"
           :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
         >
-          <CheckIcon v-if="state === 'completed'" class="size-5" />
-          <CircleIcon v-if="state === 'active'" />
-          <DotIcon v-if="state === 'inactive'" />
+          <Check v-if="state === 'completed'" class="size-5" />
+          <Circle v-if="state === 'active'" />
+          <Dot v-if="state === 'inactive'" />
         </Button>
       </StepperTrigger>
 
diff --git a/apps/www/src/registry/new-york/example/StepperVertical.vue b/apps/www/src/registry/new-york/example/StepperVertical.vue
index 72c969f68..4369e428e 100644
--- a/apps/www/src/registry/new-york/example/StepperVertical.vue
+++ b/apps/www/src/registry/new-york/example/StepperVertical.vue
@@ -2,7 +2,7 @@
 import { Button } from '@/registry/new-york/ui/button'
 
 import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'
-import { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'
+import { Check, Circle, Dot } from 'lucide-vue-next'
 
 const steps = [
   {
@@ -46,9 +46,9 @@ const steps = [
           class="z-10 rounded-full shrink-0"
           :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']"
         >
-          <CheckIcon v-if="state === 'completed'" class="size-5" />
-          <CircleIcon v-if="state === 'active'" />
-          <DotIcon v-if="state === 'inactive'" />
+          <Check v-if="state === 'completed'" class="size-5" />
+          <Circle v-if="state === 'active'" />
+          <Dot v-if="state === 'inactive'" />
         </Button>
       </StepperTrigger>
 
diff --git a/apps/www/src/registry/new-york/example/ToggleDemo.vue b/apps/www/src/registry/new-york/example/ToggleDemo.vue
index ce1b75357..ce2cd84ef 100644
--- a/apps/www/src/registry/new-york/example/ToggleDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleDemo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { FontBoldIcon } from '@radix-icons/vue'
+import { Bold } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle aria-label="Toggle italic">
-    <FontBoldIcon class="h-4 w-4" />
+    <Bold class="h-4 w-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue b/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
index f5f28f451..1facba155 100644
--- a/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleDisabledDemo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { UnderlineIcon } from '@radix-icons/vue'
+import { Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle aria-label="Toggle italic" disabled>
-    <UnderlineIcon class="w-4 h-4" />
+    <Underline class="w-4 h-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
index 69fdb158f..9d867a670 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupDemo.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
-
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="multiple">
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
index bdecd635d..df004be03 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupDisabledDemo.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="multiple" disabled>
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
index 304dbde73..74763222f 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupLargeDemo.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
-
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="multiple" size="lg">
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
index 035eafd66..d0f63dd53 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupOutlineDemo.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
-
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="multiple" variant="outline">
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
index 559e3b1b1..1a2e13cb7 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupSingleDemo.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
-
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="single">
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue b/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
index b32939b04..bbcd83d1b 100644
--- a/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleGroupSmallDemo.vue
@@ -1,23 +1,18 @@
 <script setup lang="ts">
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
-
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from '@radix-icons/vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
   <ToggleGroup type="multiple" size="sm">
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
-      <FontBoldIcon class="h-4 w-4" />
+      <Bold class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="italic" aria-label="Toggle italic">
-      <FontItalicIcon class="h-4 w-4" />
+      <Italic class="h-4 w-4" />
     </ToggleGroupItem>
     <ToggleGroupItem value="underline" aria-label="Toggle underline">
-      <UnderlineIcon class="h-4 w-4" />
+      <Underline class="h-4 w-4" />
     </ToggleGroupItem>
   </ToggleGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue b/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
index 833b99238..b05271b24 100644
--- a/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleItalicDemo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { FontItalicIcon } from '@radix-icons/vue'
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle variant="outline" aria-label="Toggle italic">
-    <FontItalicIcon class="w-4 h-4" />
+    <Italic class="w-4 h-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue b/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
index 4ddf0a29d..eb2a81332 100644
--- a/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleItalicWithTextDemo.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { FontItalicIcon } from '@radix-icons/vue'
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle aria-label="Toggle italic">
-    <FontItalicIcon class="w-4 h-4 mr-2" />
+    <Italic class="w-4 h-4 mr-2" />
     Italic
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue b/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
index 5abe9236b..12439119f 100644
--- a/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleLargeDemo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { FontItalicIcon } from '@radix-icons/vue'
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle size="lg" aria-label="Toggle italic">
-    <FontItalicIcon class="w-4 h-4" />
+    <Italic class="w-4 h-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue b/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
index 487f42cef..3b339e4ee 100644
--- a/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
+++ b/apps/www/src/registry/new-york/example/ToggleSmallDemo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Toggle } from '@/registry/new-york/ui/toggle'
-
-import { FontItalicIcon } from '@radix-icons/vue'
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
   <Toggle size="sm" aria-label="Toggle italic">
-    <FontItalicIcon class="w-4 h-4" />
+    <Italic class="w-4 h-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/registry/new-york/example/VCalendarDemo.vue b/apps/www/src/registry/new-york/example/VCalendarDemo.vue
deleted file mode 100644
index 87f7f6c9b..000000000
--- a/apps/www/src/registry/new-york/example/VCalendarDemo.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { ref } from 'vue'
-
-const date = ref(new Date())
-</script>
-
-<template>
-  <Calendar v-model="date" class="rounded-md border" />
-</template>
diff --git a/apps/www/src/registry/new-york/example/VDatePickerDemo.vue b/apps/www/src/registry/new-york/example/VDatePickerDemo.vue
deleted file mode 100644
index 2719cea1b..000000000
--- a/apps/www/src/registry/new-york/example/VDatePickerDemo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { CalendarIcon } from '@radix-icons/vue'
-import { format } from 'date-fns'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/new-york/example/VDatePickerForm.vue b/apps/www/src/registry/new-york/example/VDatePickerForm.vue
deleted file mode 100644
index 2b72082a4..000000000
--- a/apps/www/src/registry/new-york/example/VDatePickerForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/registry/new-york/ui/form'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-import { toast } from '@/registry/new-york/ui/toast'
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-
-import { CalendarIcon } from '@radix-icons/vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import { format } from 'date-fns'
-import { useForm } from 'vee-validate'
-
-import { h } from 'vue'
-import * as z from 'zod'
-
-const formSchema = toTypedSchema(z.object({
-  dob: z.date({
-    required_error: 'A date of birth is required.',
-  }),
-}))
-
-const { handleSubmit } = useForm({
-  validationSchema: formSchema,
-})
-
-const onSubmit = handleSubmit((values) => {
-  toast({
-    title: 'You submitted the following values:',
-    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
-  })
-})
-</script>
-
-<template>
-  <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField, value }" name="dob">
-      <FormItem class="flex flex-col">
-        <FormLabel>Date of birth</FormLabel>
-        <Popover>
-          <PopoverTrigger as-child>
-            <FormControl>
-              <Button
-                variant="outline" :class="cn(
-                  'w-[240px] ps-3 text-start font-normal',
-                  !value && 'text-muted-foreground',
-                )"
-              >
-                <span>{{ value ? format(value, "PPP") : "Pick a date" }}</span>
-                <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
-              </Button>
-            </FormControl>
-          </PopoverTrigger>
-          <PopoverContent class="p-0">
-            <Calendar v-bind="componentField" />
-          </PopoverContent>
-        </Popover>
-        <FormDescription>
-          Your date of birth is used to calculate your age.
-        </FormDescription>
-        <FormMessage />
-      </FormItem>
-    </FormField>
-    <Button type="submit">
-      Submit
-    </Button>
-  </Form>
-</template>
diff --git a/apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue b/apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
deleted file mode 100644
index b294f2c66..000000000
--- a/apps/www/src/registry/new-york/example/VDatePickerWithPresets.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/registry/new-york/ui/select'
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { CalendarIcon } from '@radix-icons/vue'
-import { addDays, format } from 'date-fns'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <template v-if="date">
-          {{ format(date, "PPP") }}
-        </template>
-        <template v-else>
-          <span>Pick a date</span>
-        </template>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
-      <Select
-        @update:model-value="(value) => {
-          date = addDays(new Date(), parseInt(value))
-        }"
-      >
-        <SelectTrigger>
-          <SelectValue placeholder="Select" />
-        </SelectTrigger>
-        <SelectContent position="popper">
-          <SelectItem value="0">
-            Today
-          </SelectItem>
-          <SelectItem value="1">
-            Tomorrow
-          </SelectItem>
-          <SelectItem value="3">
-            In 3 days
-          </SelectItem>
-          <SelectItem value="7">
-            In a week
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="rounded-md border">
-        <Calendar v-model="date" mode="single" />
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/new-york/example/VDatePickerWithRange.vue b/apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
deleted file mode 100644
index c898dc418..000000000
--- a/apps/www/src/registry/new-york/example/VDatePickerWithRange.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { CalendarIcon } from '@radix-icons/vue'
-import { addDays, format } from 'date-fns'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          :columns="2"
-        />
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>
diff --git a/apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue b/apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
deleted file mode 100644
index d5f0726c4..000000000
--- a/apps/www/src/registry/new-york/example/VDateTimePickerDemo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { CalendarIcon } from '@radix-icons/vue'
-import { format } from 'date-fns'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        :variant="'outline'"
-        :class="cn(
-          'w-[280px] justify-start text-left font-normal',
-          !date && 'text-muted-foreground',
-        )"
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" mode="datetime" />
-    </PopoverContent>
-  </Popover>
-</template>
diff --git a/apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue b/apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
deleted file mode 100644
index ff5024be8..000000000
--- a/apps/www/src/registry/new-york/example/VRangePickerWithSlot.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-
-import { Calendar } from '@/registry/new-york/ui/v-calendar'
-import { CalendarIcon } from '@radix-icons/vue'
-import { addDays, format } from 'date-fns'
-import { ref } from 'vue'
-
-const date = ref({
-  start: new Date(2022, 0, 20),
-  end: addDays(new Date(2022, 0, 20), 20),
-})
-</script>
-
-<template>
-  <div :class="cn('grid gap-2', $attrs.class ?? '')">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button
-          id="date"
-          :variant="'outline'"
-          :class="cn(
-            'w-[280px] justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-          )"
-        >
-          <CalendarIcon class="mr-2 h-4 w-4" />
-
-          <span>
-            {{ date.start ? (
-              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
-              : format(date.start, 'LLL dd, y')
-            ) : 'Pick a date' }}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
-        <Calendar
-          v-model.range="date"
-          mode="date"
-          :columns="2"
-        >
-          <template #footer>
-            <div class="flex w-full mt-6 border-t border-accent pt-4">
-              <div class="w-1/2">
-                <strong>Entry time</strong>
-                <Calendar
-                  v-model="date.start"
-                  mode="time"
-                  hide-time-header
-                />
-              </div>
-              <div class="w-1/2">
-                <strong>Exit time</strong>
-                <Calendar
-                  v-model="date.end"
-                  mode="time"
-                  hide-time-header
-                />
-              </div>
-            </div>
-          </template>
-        </Calendar>
-      </PopoverContent>
-    </Popover>
-  </div>
-</template>
diff --git a/apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue
index e8f343b31..de4d4e091 100644
--- a/apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/accordion/AccordionTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
   AccordionTrigger,
@@ -30,7 +30,7 @@ const delegatedProps = computed(() => {
     >
       <slot />
       <slot name="icon">
-        <ChevronDownIcon
+        <ChevronDown
           class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
         />
       </slot>
diff --git a/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
index bee7d2caa..2a1d5c671 100644
--- a/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
@@ -7,7 +7,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '
 import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
 
 import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
+import { CalendarIcon } from 'lucide-vue-next'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
 
diff --git a/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
index ea3d4d2ac..c3b758e5b 100644
--- a/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
+++ b/apps/www/src/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
@@ -3,7 +3,7 @@ import type { FieldProps } from './interface'
 import { Button } from '@/registry/new-york/ui/button'
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'
 import { Input } from '@/registry/new-york/ui/input'
-import { TrashIcon } from '@radix-icons/vue'
+import { Trash } from 'lucide-vue-next'
 import { ref } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
@@ -60,7 +60,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
                 slotProps.componentField.onInput(undefined)
               }"
             >
-              <TrashIcon />
+              <Trash />
             </Button>
           </div>
         </slot>
diff --git a/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
index 67c01ac06..cfccf9feb 100644
--- a/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
   >
     <slot>
-      <DotsHorizontalIcon class="h-4 w-4" />
+      <MoreHorizontal class="h-4 w-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>
diff --git a/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
index 61c61d2e9..8b56104b0 100644
--- a/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRightIcon />
+      <ChevronRight />
     </slot>
   </li>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
index e1247abe0..d4aab7f6c 100644
--- a/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/registry/new-york/ui/calendar/CalendarNextButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/registry/new-york/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronRightIcon class="h-4 w-4" />
+      <ChevronRight class="h-4 w-4" />
     </slot>
   </CalendarNext>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue b/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
index 7c5ac6a05..10bb7dff0 100644
--- a/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/registry/new-york/ui/calendar/CalendarPrevButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/registry/new-york/ui/button'
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronLeftIcon class="h-4 w-4" />
+      <ChevronLeft class="h-4 w-4" />
     </slot>
   </CalendarPrev>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
index 429b61201..a169e66ad 100644
--- a/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/registry/new-york/ui/carousel/CarouselNext.vue
@@ -2,7 +2,7 @@
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/registry/new-york/ui/button'
-import { ArrowRightIcon } from '@radix-icons/vue'
+import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ArrowRightIcon class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current" />
       <span class="sr-only">Next Slide</span>
     </slot>
   </Button>
diff --git a/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
index 59e89a62e..80cde972c 100644
--- a/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -2,7 +2,7 @@
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/registry/new-york/ui/button'
-import { ArrowLeftIcon } from '@radix-icons/vue'
+import { ArrowLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeftIcon class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current" />
       <span class="sr-only">Previous Slide</span>
     </slot>
   </Button>
diff --git a/apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue
index 1bdfbc5a1..8eb8a185e 100644
--- a/apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/registry/new-york/ui/checkbox/Checkbox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/registry/new-york/ui/command/CommandInput.vue
index 262022aed..a8cb4e0da 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Search } from 'lucide-vue-next'
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
diff --git a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index 29d569ac3..1d75d5541 100644
--- a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index 3e1e74579..e29691c15 100644
--- a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-4 w-4 fill-current" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 7731cf8ba..354d4be99 100644
--- a/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/registry/new-york/ui/dialog/DialogContent.vue
index 7788527ce..be00c5e6f 100644
--- a/apps/www/src/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/registry/new-york/ui/dialog/DialogContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="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"
       >
-        <Cross2Icon class="w-4 h-4" />
+        <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue
index 9aef11204..017cbd2e5 100644
--- a/apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/registry/new-york/ui/dialog/DialogScrollContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <DialogClose
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <Cross2Icon class="w-4 h-4" />
+          <X class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 9dd67248e..d4934a474 100644
--- a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <CheckIcon class="w-4 h-4" />
+        <Check class="w-4 h-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 7b3828fcc..d514f72a7 100644
--- a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-4 w-4 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index f70c2aaad..815dc8110 100644
--- a/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index dfd4204a6..e0606f9dd 100644
--- a/apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
-        <CheckIcon class="w-4 h-4" />
+        <Check class="w-4 h-4" />
       </MenubarItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue
index 25a9b459e..02ebe1b55 100644
--- a/apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DotFilledIcon } from '@radix-icons/vue'
+import { Circle } from 'lucide-vue-next'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-4 w-4 fill-current" />
       </MenubarItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index 07b1bfe2b..33e1c3662 100644
--- a/apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </MenubarSubTrigger>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 3385bb464..21c623743 100644
--- a/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
   >
     <slot />
-    <ChevronDownIcon
+    <ChevronDown
       class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
diff --git a/apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue
index 16033d1b3..0f493d596 100644
--- a/apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationEllipsis.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
-      <DotsHorizontalIcon />
+      <MoreHorizontal />
     </slot>
   </PaginationEllipsis>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
index dfc1f3d2a..5696976b2 100644
--- a/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   Button,
 } from '@/registry/new-york/ui/button'
-import { DoubleArrowLeftIcon } from '@radix-icons/vue'
+import { ChevronsLeft } from 'lucide-vue-next'
 import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationFirst v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowLeftIcon />
+        <ChevronsLeft />
       </slot>
     </Button>
   </PaginationFirst>
diff --git a/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
index a722ee03f..b21cfa9ab 100644
--- a/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationLast.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   Button,
 } from '@/registry/new-york/ui/button'
-import { DoubleArrowRightIcon } from '@radix-icons/vue'
+import { ChevronsRight } from 'lucide-vue-next'
 import { PaginationLast, type PaginationLastProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationLast v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowRightIcon />
+        <ChevronsRight />
       </slot>
     </Button>
   </PaginationLast>
diff --git a/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
index cf304c880..3292c5921 100644
--- a/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationNext.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   Button,
 } from '@/registry/new-york/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { PaginationNext, type PaginationNextProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationNext v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRightIcon />
+        <ChevronRight />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
index b74f97b82..cba8e9366 100644
--- a/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import {
   Button,
 } from '@/registry/new-york/ui/button'
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationPrev v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeftIcon />
+        <ChevronLeft />
       </slot>
     </Button>
   </PaginationPrev>
diff --git a/apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue b/apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue
index 9e1a21c66..8440ec8fd 100644
--- a/apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/pin-input/PinInputSeparator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DashIcon } from '@radix-icons/vue'
+import { Minus } from 'lucide-vue-next'
 import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps>()
@@ -9,7 +9,7 @@ const forwardedProps = useForwardProps(props)
 <template>
   <Primitive v-bind="forwardedProps">
     <slot>
-      <DashIcon />
+      <Minus class="w-2" />
     </slot>
   </primitive>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
index c6a2b6dfb..0f8649341 100644
--- a/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
@@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     "
   >
     <RadioGroupIndicator class="flex items-center justify-center">
-      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
+      <Check class="h-3.5 w-3.5 fill-primary" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
index a9325725f..e5ddaaf3f 100644
--- a/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
+++ b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarNextButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/registry/new-york/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronRightIcon class="h-4 w-4" />
+      <ChevronRight class="h-4 w-4" />
     </slot>
   </RangeCalendarNext>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
index 0c4d4d3c9..add1d4658 100644
--- a/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
+++ b/apps/www/src/registry/new-york/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/registry/new-york/ui/button'
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
   >
     <slot>
-      <ChevronLeftIcon class="h-4 w-4" />
+      <ChevronLeft class="h-4 w-4" />
     </slot>
   </RangeCalendarPrev>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue b/apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue
index 2b60e790e..24056f482 100644
--- a/apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue
+++ b/apps/www/src/registry/new-york/ui/resizable/ResizableHandle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { GripVertical } from 'lucide-vue-next'
 import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
     <template v-if="props.withHandle">
       <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon class="h-2.5 w-2.5" />
+        <GripVertical class="h-2.5 w-2.5" />
       </div>
     </template>
   </SplitterResizeHandle>
diff --git a/apps/www/src/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/registry/new-york/ui/select/SelectItem.vue
index af4cae1b2..49cb78e78 100644
--- a/apps/www/src/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/registry/new-york/ui/select/SelectItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CheckIcon } from '@radix-icons/vue'
+import { Check } from 'lucide-vue-next'
 import {
   SelectItem,
   SelectItemIndicator,
@@ -33,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </SelectItemIndicator>
     </span>
 
diff --git a/apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue b/apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue
index 24be33eee..c9beb57e1 100644
--- a/apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue
+++ b/apps/www/src/registry/new-york/ui/select/SelectScrollDownButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronDownIcon />
+      <ChevronDown />
     </slot>
   </SelectScrollDownButton>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue b/apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue
index 1a065ae62..49b83c9a2 100644
--- a/apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue
+++ b/apps/www/src/registry/new-york/ui/select/SelectScrollUpButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { ChevronUpIcon } from '@radix-icons/vue'
+import { ChevronUp } from 'lucide-vue-next'
 import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronUpIcon />
+      <ChevronUp />
     </slot>
   </SelectScrollUpButton>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/registry/new-york/ui/select/SelectTrigger.vue
index 3721e30db..b78ecf2db 100644
--- a/apps/www/src/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { CaretSortIcon } from '@radix-icons/vue'
+import { ChevronDown } from 'lucide-vue-next'
 import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <SelectIcon as-child>
-      <CaretSortIcon class="w-4 h-4 opacity-50 shrink-0" />
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/registry/new-york/ui/sheet/SheetContent.vue
index e12c3b2ce..3d85d2831 100644
--- a/apps/www/src/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/registry/new-york/ui/sheet/SheetContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -49,7 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="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-secondary"
       >
-        <Cross2Icon class="w-4 h-4" />
+        <X class="w-4 h-4" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
index c62db2fec..be8aa4d32 100644
--- a/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
+++ b/apps/www/src/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
     <slot>
-      <Cross2Icon class="w-4 h-4" />
+      <X class="w-4 h-4" />
     </slot>
   </TagsInputItemDelete>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/registry/new-york/ui/toast/ToastClose.vue
index 922368079..8113a7e77 100644
--- a/apps/www/src/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/registry/new-york/ui/toast/ToastClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import { ToastClose, type ToastCloseProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
@@ -17,6 +17,6 @@ const delegatedProps = computed(() => {
 
 <template>
   <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
-    <Cross2Icon class="h-4 w-4" />
+    <X class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue b/apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
deleted file mode 100644
index ee2838ea9..000000000
--- a/apps/www/src/registry/new-york/ui/v-calendar/Calendar.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<script setup lang="ts">
-import type { Calendar } from 'v-calendar'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/registry/new-york/ui/button'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
-import { useVModel } from '@vueuse/core'
-import { DatePicker } from 'v-calendar'
-import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
-
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<{
-  modelValue?: string | number | Date | DatePickerModel
-  modelModifiers?: object
-  columns?: number
-  type?: 'single' | 'range'
-}>(), {
-  type: 'single',
-  columns: 1,
-})
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-})
-
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value)
-    return
-
-  if (direction === 'prev')
-    calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter(name => isVCalendarSlot(name))
-    .reduce((obj: Record<string, any>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        )"
-        @click="handleNav('prev')"
-      >
-        <ChevronLeftIcon class="w-4 h-4" />
-      </button>
-      <button
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        )"
-        @click="handleNav('next')"
-      >
-        <ChevronRightIcon class="w-4 h-4" />
-      </button>
-    </div>
-
-    <DatePicker
-      ref="datePicker"
-      v-model="modelValue"
-      v-bind="$attrs"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-
-      <template #nav-prev-button>
-        <ChevronLeftIcon />
-      </template>
-
-      <template #nav-next-button>
-        <ChevronRightIcon />
-      </template>
-    </DatePicker>
-  </div>
-</template>
-
-<style lang="css">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4 max-sm:!grid-cols-1;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium relative z-20;
-}
-.vc-popover-content-wrapper .vc-popover-content {
-  @apply mt-3 rounded-md max-w-xs border bg-background;
-}
-.vc-popover-content-wrapper .vc-nav-header {
-  @apply flex justify-between items-center p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items {
-  @apply grid grid-cols-4 gap-2 p-2;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
-  @apply rounded-md px-2 py-1;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
-  @apply text-muted-foreground bg-muted;
-}
-.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
-  @apply bg-primary text-primary-foreground;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply justify-items-center;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
-}
-.calendar .vc-weeks {
-  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
-  @apply bg-secondary text-primary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
-  @apply rounded-md;
-}
-.calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent text-accent-foreground;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply w-full relative;
-}
-:root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
-}
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
-}
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
-}
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-	opacity: 0;
-}
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
-}
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
-}
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-t border-solid border-secondary mt-2;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
-}
-.vc-time-select-group {
-  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
-}
-.vc-time-select-group select {
-  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>
diff --git a/apps/www/src/registry/new-york/ui/v-calendar/index.ts b/apps/www/src/registry/new-york/ui/v-calendar/index.ts
deleted file mode 100644
index d17d00f2f..000000000
--- a/apps/www/src/registry/new-york/ui/v-calendar/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
-
-export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
-  const validSlots: CalendarSlotName[] = [
-    'day-content',
-    'day-popover',
-    'dp-footer',
-    'footer',
-    'header-title-wrapper',
-    'header-title',
-    'header-prev-button',
-    'header-next-button',
-    'nav',
-    'nav-prev-button',
-    'nav-next-button',
-    'page',
-    'time-header',
-  ]
-
-  return validSlots.includes(slotName as CalendarSlotName)
-}
diff --git a/packages/module/playground/app.vue b/packages/module/playground/app.vue
index c7572bf0e..f111fd8c5 100644
--- a/packages/module/playground/app.vue
+++ b/packages/module/playground/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MoonIcon, SunIcon } from '@radix-icons/vue'
+import { Moon, Sun } from 'lucide-vue-next'
 
 const isDark = ref(true)
 useHead({ htmlAttrs: { class: () => isDark.value ? 'dark' : '' } })
@@ -20,7 +20,7 @@ useHead({ htmlAttrs: { class: () => isDark.value ? 'dark' : '' } })
             @click="isDark = !isDark"
           >
             <component
-              :is="isDark ? SunIcon : MoonIcon"
+              :is="isDark ? Sun : Moon"
               class="size-5"
             />
           </button>

From 47c4fbf8156fd95562eec5d56214ab893f9603ed Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:21:46 +0800
Subject: [PATCH 27/39] chore: cleanup

---
 .../content/docs/components/date-picker.md    |    6 -
 .../r/styles/default/VCalendarDemo.json       |   16 -
 .../r/styles/default/VDatePickerDemo.json     |   19 -
 .../r/styles/default/VDatePickerForm.json     |   25 -
 .../default/VDatePickerWithPresets.json       |   20 -
 .../styles/default/VDatePickerWithRange.json  |   19 -
 .../r/styles/default/VDateTimePickerDemo.json |   19 -
 .../styles/default/VRangePickerWithSlot.json  |   19 -
 .../public/r/styles/default/v-calendar.json   |   26 -
 .../r/styles/new-york/BreadcrumbDropdown.json |    2 +-
 .../public/r/styles/new-york/CommandDemo.json |    2 +-
 .../r/styles/new-york/VCalendarDemo.json      |   16 -
 .../r/styles/new-york/VDatePickerDemo.json    |   19 -
 .../r/styles/new-york/VDatePickerForm.json    |   25 -
 .../new-york/VDatePickerWithPresets.json      |   20 -
 .../styles/new-york/VDatePickerWithRange.json |   19 -
 .../styles/new-york/VDateTimePickerDemo.json  |   19 -
 .../styles/new-york/VRangePickerWithSlot.json |   19 -
 .../src/public/r/styles/new-york/command.json |    2 +-
 .../public/r/styles/new-york/v-calendar.json  |   26 -
 apps/www/src/public/r/temp.json               |    6 +-
 apps/www/src/public/registry/colors/gray.json |   92 -
 .../www/src/public/registry/colors/index.json | 1999 -----------------
 apps/www/src/public/registry/colors/lime.json |   92 -
 .../src/public/registry/colors/neutral.json   |   92 -
 .../www/src/public/registry/colors/slate.json |   92 -
 .../www/src/public/registry/colors/stone.json |   92 -
 apps/www/src/public/registry/colors/zinc.json |   92 -
 apps/www/src/public/registry/index.json       | 1001 ---------
 .../registry/styles/default/accordion.json    |   30 -
 .../registry/styles/default/alert-dialog.json |   51 -
 .../public/registry/styles/default/alert.json |   26 -
 .../registry/styles/default/area-chart.json   |   19 -
 .../registry/styles/default/aspect-ratio.json |   16 -
 .../registry/styles/default/auto-form.json    |   91 -
 .../registry/styles/default/avatar.json       |   26 -
 .../public/registry/styles/default/badge.json |   18 -
 .../registry/styles/default/breadcrumb.json   |   42 -
 .../registry/styles/default/button.json       |   18 -
 .../registry/styles/default/calendar.json     |   63 -
 .../public/registry/styles/default/card.json  |   38 -
 .../registry/styles/default/carousel.json     |   46 -
 .../registry/styles/default/chart-area.json   |   23 -
 .../registry/styles/default/chart-bar.json    |   23 -
 .../registry/styles/default/chart-donut.json  |   23 -
 .../registry/styles/default/chart-line.json   |   23 -
 .../public/registry/styles/default/chart.json |   38 -
 .../registry/styles/default/checkbox.json     |   18 -
 .../registry/styles/default/collapsible.json  |   24 -
 .../registry/styles/default/command.json      |   51 -
 .../registry/styles/default/context-menu.json |   74 -
 .../registry/styles/default/data-table.json   |   18 -
 .../registry/styles/default/date-picker.json  |   18 -
 .../registry/styles/default/dialog.json       |   50 -
 .../registry/styles/default/drawer.json       |   44 -
 .../styles/default/dropdown-menu.json         |   70 -
 .../public/registry/styles/default/form.json  |   47 -
 .../registry/styles/default/hover-card.json   |   26 -
 .../public/registry/styles/default/input.json |   20 -
 .../public/registry/styles/default/kbd.json   |   16 -
 .../public/registry/styles/default/label.json |   18 -
 .../registry/styles/default/menubar.json      |   74 -
 .../styles/default/navigation-menu.json       |   46 -
 .../registry/styles/default/number-field.json |   34 -
 .../registry/styles/default/pagination.json   |   35 -
 .../registry/styles/default/pin-input.json    |   30 -
 .../registry/styles/default/popover.json      |   26 -
 .../registry/styles/default/progress.json     |   18 -
 .../registry/styles/default/radio-group.json  |   22 -
 .../styles/default/range-calendar.json        |   63 -
 .../registry/styles/default/resizable.json    |   22 -
 .../registry/styles/default/scroll-area.json  |   22 -
 .../registry/styles/default/select.json       |   58 -
 .../registry/styles/default/separator.json    |   18 -
 .../public/registry/styles/default/sheet.json |   46 -
 .../registry/styles/default/sidebar.json      |  125 --
 .../registry/styles/default/skeleton.json     |   18 -
 .../registry/styles/default/slider.json       |   18 -
 .../registry/styles/default/sonner.json       |   18 -
 .../registry/styles/default/stepper.json      |   42 -
 .../registry/styles/default/switch.json       |   18 -
 .../public/registry/styles/default/table.json |   50 -
 .../public/registry/styles/default/tabs.json  |   30 -
 .../registry/styles/default/tags-input.json   |   34 -
 .../registry/styles/default/textarea.json     |   20 -
 .../public/registry/styles/default/toast.json |   50 -
 .../registry/styles/default/toggle-group.json |   23 -
 .../registry/styles/default/toggle.json       |   18 -
 .../registry/styles/default/tooltip.json      |   30 -
 .../registry/styles/default/v-calendar.json   |   22 -
 .../www/src/public/registry/styles/index.json |   10 -
 .../registry/styles/new-york/accordion.json   |   30 -
 .../styles/new-york/alert-dialog.json         |   51 -
 .../registry/styles/new-york/alert.json       |   26 -
 .../registry/styles/new-york/area-chart.json  |   19 -
 .../styles/new-york/aspect-ratio.json         |   16 -
 .../registry/styles/new-york/auto-form.json   |   91 -
 .../registry/styles/new-york/avatar.json      |   26 -
 .../registry/styles/new-york/badge.json       |   18 -
 .../registry/styles/new-york/breadcrumb.json  |   42 -
 .../registry/styles/new-york/button.json      |   18 -
 .../registry/styles/new-york/calendar.json    |   63 -
 .../public/registry/styles/new-york/card.json |   38 -
 .../registry/styles/new-york/carousel.json    |   46 -
 .../registry/styles/new-york/chart-area.json  |   23 -
 .../registry/styles/new-york/chart-bar.json   |   23 -
 .../registry/styles/new-york/chart-donut.json |   23 -
 .../registry/styles/new-york/chart-line.json  |   23 -
 .../registry/styles/new-york/chart.json       |   38 -
 .../registry/styles/new-york/checkbox.json    |   18 -
 .../registry/styles/new-york/collapsible.json |   24 -
 .../registry/styles/new-york/command.json     |   51 -
 .../styles/new-york/context-menu.json         |   74 -
 .../registry/styles/new-york/dialog.json      |   50 -
 .../registry/styles/new-york/drawer.json      |   44 -
 .../styles/new-york/dropdown-menu.json        |   70 -
 .../public/registry/styles/new-york/form.json |   47 -
 .../registry/styles/new-york/hover-card.json  |   26 -
 .../registry/styles/new-york/input.json       |   20 -
 .../registry/styles/new-york/label.json       |   18 -
 .../registry/styles/new-york/menubar.json     |   74 -
 .../styles/new-york/navigation-menu.json      |   46 -
 .../styles/new-york/number-field.json         |   34 -
 .../registry/styles/new-york/pagination.json  |   35 -
 .../registry/styles/new-york/pin-input.json   |   30 -
 .../registry/styles/new-york/popover.json     |   26 -
 .../registry/styles/new-york/progress.json    |   18 -
 .../registry/styles/new-york/radio-group.json |   22 -
 .../styles/new-york/range-calendar.json       |   63 -
 .../registry/styles/new-york/resizable.json   |   22 -
 .../registry/styles/new-york/scroll-area.json |   22 -
 .../registry/styles/new-york/select.json      |   58 -
 .../registry/styles/new-york/separator.json   |   18 -
 .../registry/styles/new-york/sheet.json       |   46 -
 .../registry/styles/new-york/sidebar.json     |  125 --
 .../registry/styles/new-york/skeleton.json    |   18 -
 .../registry/styles/new-york/slider.json      |   18 -
 .../registry/styles/new-york/sonner.json      |   18 -
 .../registry/styles/new-york/stepper.json     |   42 -
 .../registry/styles/new-york/switch.json      |   18 -
 .../registry/styles/new-york/table.json       |   50 -
 .../public/registry/styles/new-york/tabs.json |   30 -
 .../registry/styles/new-york/tags-input.json  |   34 -
 .../registry/styles/new-york/textarea.json    |   20 -
 .../registry/styles/new-york/toast.json       |   50 -
 .../styles/new-york/toggle-group.json         |   23 -
 .../registry/styles/new-york/toggle.json      |   18 -
 .../registry/styles/new-york/tooltip.json     |   30 -
 .../registry/styles/new-york/v-calendar.json  |   22 -
 apps/www/src/public/registry/themes.css       |  768 -------
 apps/www/src/public/registry/themes/gray.json |   48 -
 .../src/public/registry/themes/neutral.json   |   48 -
 .../www/src/public/registry/themes/slate.json |   48 -
 .../www/src/public/registry/themes/stone.json |   48 -
 apps/www/src/public/registry/themes/zinc.json |   48 -
 .../new-york/example/BreadcrumbDropdown.vue   |    2 +-
 .../registry/new-york/example/CommandDemo.vue |    2 +-
 .../new-york/ui/command/CommandItem.vue       |    2 +-
 pnpm-lock.yaml                                |   56 -
 159 files changed, 9 insertions(+), 9191 deletions(-)
 delete mode 100644 apps/www/src/public/r/styles/default/VCalendarDemo.json
 delete mode 100644 apps/www/src/public/r/styles/default/VDatePickerDemo.json
 delete mode 100644 apps/www/src/public/r/styles/default/VDatePickerForm.json
 delete mode 100644 apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
 delete mode 100644 apps/www/src/public/r/styles/default/VDatePickerWithRange.json
 delete mode 100644 apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
 delete mode 100644 apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
 delete mode 100644 apps/www/src/public/r/styles/default/v-calendar.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VCalendarDemo.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerForm.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
 delete mode 100644 apps/www/src/public/r/styles/new-york/v-calendar.json
 delete mode 100644 apps/www/src/public/registry/colors/gray.json
 delete mode 100644 apps/www/src/public/registry/colors/index.json
 delete mode 100644 apps/www/src/public/registry/colors/lime.json
 delete mode 100644 apps/www/src/public/registry/colors/neutral.json
 delete mode 100644 apps/www/src/public/registry/colors/slate.json
 delete mode 100644 apps/www/src/public/registry/colors/stone.json
 delete mode 100644 apps/www/src/public/registry/colors/zinc.json
 delete mode 100644 apps/www/src/public/registry/index.json
 delete mode 100644 apps/www/src/public/registry/styles/default/accordion.json
 delete mode 100644 apps/www/src/public/registry/styles/default/alert-dialog.json
 delete mode 100644 apps/www/src/public/registry/styles/default/alert.json
 delete mode 100644 apps/www/src/public/registry/styles/default/area-chart.json
 delete mode 100644 apps/www/src/public/registry/styles/default/aspect-ratio.json
 delete mode 100644 apps/www/src/public/registry/styles/default/auto-form.json
 delete mode 100644 apps/www/src/public/registry/styles/default/avatar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/badge.json
 delete mode 100644 apps/www/src/public/registry/styles/default/breadcrumb.json
 delete mode 100644 apps/www/src/public/registry/styles/default/button.json
 delete mode 100644 apps/www/src/public/registry/styles/default/calendar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/card.json
 delete mode 100644 apps/www/src/public/registry/styles/default/carousel.json
 delete mode 100644 apps/www/src/public/registry/styles/default/chart-area.json
 delete mode 100644 apps/www/src/public/registry/styles/default/chart-bar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/chart-donut.json
 delete mode 100644 apps/www/src/public/registry/styles/default/chart-line.json
 delete mode 100644 apps/www/src/public/registry/styles/default/chart.json
 delete mode 100644 apps/www/src/public/registry/styles/default/checkbox.json
 delete mode 100644 apps/www/src/public/registry/styles/default/collapsible.json
 delete mode 100644 apps/www/src/public/registry/styles/default/command.json
 delete mode 100644 apps/www/src/public/registry/styles/default/context-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/default/data-table.json
 delete mode 100644 apps/www/src/public/registry/styles/default/date-picker.json
 delete mode 100644 apps/www/src/public/registry/styles/default/dialog.json
 delete mode 100644 apps/www/src/public/registry/styles/default/drawer.json
 delete mode 100644 apps/www/src/public/registry/styles/default/dropdown-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/default/form.json
 delete mode 100644 apps/www/src/public/registry/styles/default/hover-card.json
 delete mode 100644 apps/www/src/public/registry/styles/default/input.json
 delete mode 100644 apps/www/src/public/registry/styles/default/kbd.json
 delete mode 100644 apps/www/src/public/registry/styles/default/label.json
 delete mode 100644 apps/www/src/public/registry/styles/default/menubar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/navigation-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/default/number-field.json
 delete mode 100644 apps/www/src/public/registry/styles/default/pagination.json
 delete mode 100644 apps/www/src/public/registry/styles/default/pin-input.json
 delete mode 100644 apps/www/src/public/registry/styles/default/popover.json
 delete mode 100644 apps/www/src/public/registry/styles/default/progress.json
 delete mode 100644 apps/www/src/public/registry/styles/default/radio-group.json
 delete mode 100644 apps/www/src/public/registry/styles/default/range-calendar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/resizable.json
 delete mode 100644 apps/www/src/public/registry/styles/default/scroll-area.json
 delete mode 100644 apps/www/src/public/registry/styles/default/select.json
 delete mode 100644 apps/www/src/public/registry/styles/default/separator.json
 delete mode 100644 apps/www/src/public/registry/styles/default/sheet.json
 delete mode 100644 apps/www/src/public/registry/styles/default/sidebar.json
 delete mode 100644 apps/www/src/public/registry/styles/default/skeleton.json
 delete mode 100644 apps/www/src/public/registry/styles/default/slider.json
 delete mode 100644 apps/www/src/public/registry/styles/default/sonner.json
 delete mode 100644 apps/www/src/public/registry/styles/default/stepper.json
 delete mode 100644 apps/www/src/public/registry/styles/default/switch.json
 delete mode 100644 apps/www/src/public/registry/styles/default/table.json
 delete mode 100644 apps/www/src/public/registry/styles/default/tabs.json
 delete mode 100644 apps/www/src/public/registry/styles/default/tags-input.json
 delete mode 100644 apps/www/src/public/registry/styles/default/textarea.json
 delete mode 100644 apps/www/src/public/registry/styles/default/toast.json
 delete mode 100644 apps/www/src/public/registry/styles/default/toggle-group.json
 delete mode 100644 apps/www/src/public/registry/styles/default/toggle.json
 delete mode 100644 apps/www/src/public/registry/styles/default/tooltip.json
 delete mode 100644 apps/www/src/public/registry/styles/default/v-calendar.json
 delete mode 100644 apps/www/src/public/registry/styles/index.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/accordion.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/alert-dialog.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/alert.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/area-chart.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/aspect-ratio.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/auto-form.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/avatar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/badge.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/breadcrumb.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/button.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/calendar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/card.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/carousel.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/chart-area.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/chart-bar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/chart-donut.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/chart-line.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/chart.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/checkbox.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/collapsible.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/command.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/context-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/dialog.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/drawer.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/dropdown-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/form.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/hover-card.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/input.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/label.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/menubar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/navigation-menu.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/number-field.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/pagination.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/pin-input.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/popover.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/progress.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/radio-group.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/range-calendar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/resizable.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/scroll-area.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/select.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/separator.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/sheet.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/sidebar.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/skeleton.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/slider.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/sonner.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/stepper.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/switch.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/table.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/tabs.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/tags-input.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/textarea.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/toast.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/toggle-group.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/toggle.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/tooltip.json
 delete mode 100644 apps/www/src/public/registry/styles/new-york/v-calendar.json
 delete mode 100644 apps/www/src/public/registry/themes.css
 delete mode 100644 apps/www/src/public/registry/themes/gray.json
 delete mode 100644 apps/www/src/public/registry/themes/neutral.json
 delete mode 100644 apps/www/src/public/registry/themes/slate.json
 delete mode 100644 apps/www/src/public/registry/themes/stone.json
 delete mode 100644 apps/www/src/public/registry/themes/zinc.json

diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index cf5e676e5..77b9a3736 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -7,12 +7,6 @@ primitive: https://www.reka-ui.com/docs/components/calendar.html
 
 <ComponentPreview name="DatePickerDemo" />
 
-<Callout class="text-base mt-12">
-
-If you're looking for **previous** Date Picker implementation, checkout to <span class="font-bold underline">[VCalendar Datepicker](/docs/components/v-date-picker)</span> component
-
-</Callout>
-
 ## Installation
 
 The Date Picker is built using a composition of the `<Popover />` and either the `<Calendar />` or `<RangeCalendar />` components.
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
deleted file mode 100644
index ebd3e5fac..000000000
--- a/apps/www/src/public/r/styles/default/VCalendarDemo.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "VCalendarDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VCalendarDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
deleted file mode 100644
index 3b97c7b0f..000000000
--- a/apps/www/src/public/r/styles/default/VDatePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
deleted file mode 100644
index 14b928570..000000000
--- a/apps/www/src/public/r/styles/default/VDatePickerForm.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "VDatePickerForm",
-  "type": "registry:example",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "form",
-    "popover",
-    "toast",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
deleted file mode 100644
index 71d802a9a..000000000
--- a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "VDatePickerWithPresets",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "select",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
deleted file mode 100644
index 73dab0a4c..000000000
--- a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerWithRange",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
deleted file mode 100644
index 45cbd2e18..000000000
--- a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDateTimePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
deleted file mode 100644
index cf4db1365..000000000
--- a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VRangePickerWithSlot",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/default/v-calendar.json b/apps/www/src/public/r/styles/default/v-calendar.json
deleted file mode 100644
index 4841ce376..000000000
--- a/apps/www/src/public/r/styles/default/v-calendar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "v-calendar",
-  "type": "registry:ui",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-      "type": "registry:ui",
-      "target": ""
-    },
-    {
-      "path": "ui/v-calendar/index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-      "type": "registry:ui",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index c4c682c70..d07a4b312 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/BreadcrumbDropdown.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index e66ac2e3a..daa792664 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/CommandDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
deleted file mode 100644
index e9167d700..000000000
--- a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "VCalendarDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VCalendarDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
deleted file mode 100644
index 9af091402..000000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
deleted file mode 100644
index a803d856a..000000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "VDatePickerForm",
-  "type": "registry:example",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "form",
-    "popover",
-    "toast",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
deleted file mode 100644
index 32796580f..000000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "VDatePickerWithPresets",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "select",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithPresets.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
deleted file mode 100644
index e7c10d2ee..000000000
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDatePickerWithRange",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDatePickerWithRange.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
deleted file mode 100644
index 354314283..000000000
--- a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VDateTimePickerDemo",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VDateTimePickerDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
deleted file mode 100644
index 15fa7b80f..000000000
--- a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "VRangePickerWithSlot",
-  "type": "registry:example",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button",
-    "popover",
-    "v-calendar"
-  ],
-  "files": [
-    {
-      "path": "example/VRangePickerWithSlot.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 1ffda2141..37ea9efb4 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -41,7 +41,7 @@
     },
     {
       "path": "ui/command/CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/styles/new-york/v-calendar.json b/apps/www/src/public/r/styles/new-york/v-calendar.json
deleted file mode 100644
index 27c19cdad..000000000
--- a/apps/www/src/public/r/styles/new-york/v-calendar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "v-calendar",
-  "type": "registry:ui",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "path": "ui/v-calendar/Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n",
-      "type": "registry:ui",
-      "target": ""
-    },
-    {
-      "path": "ui/v-calendar/index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n",
-      "type": "registry:ui",
-      "target": ""
-    }
-  ]
-}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index fea589d4a..8f66d78c3 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -1089,7 +1089,7 @@
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -3467,7 +3467,7 @@
     "files": [
       {
         "path": "example/BreadcrumbDropdown.vue",
-        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4212,7 +4212,7 @@
     "files": [
       {
         "path": "example/CommandDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md md:min-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"calendar\">\n          <Calendar />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"search\">\n          <Smile />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem disabled value=\"calculator\">\n          <Calculator />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"profile\">\n          <User />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"billing\">\n          <CreditCard />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"settings\">\n          <Settings />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
diff --git a/apps/www/src/public/registry/colors/gray.json b/apps/www/src/public/registry/colors/gray.json
deleted file mode 100644
index b57a3f18f..000000000
--- a/apps/www/src/public/registry/colors/gray.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "gray-950",
-      "card": "white",
-      "card-foreground": "gray-950",
-      "popover": "white",
-      "popover-foreground": "gray-950",
-      "primary": "gray-900",
-      "primary-foreground": "gray-50",
-      "secondary": "gray-100",
-      "secondary-foreground": "gray-900",
-      "muted": "gray-100",
-      "muted-foreground": "gray-500",
-      "accent": "gray-100",
-      "accent-foreground": "gray-900",
-      "destructive": "red-500",
-      "destructive-foreground": "gray-50",
-      "border": "gray-200",
-      "input": "gray-200",
-      "ring": "gray-950"
-    },
-    "dark": {
-      "background": "gray-950",
-      "foreground": "gray-50",
-      "card": "gray-950",
-      "card-foreground": "gray-50",
-      "popover": "gray-950",
-      "popover-foreground": "gray-50",
-      "primary": "gray-50",
-      "primary-foreground": "gray-900",
-      "secondary": "gray-800",
-      "secondary-foreground": "gray-50",
-      "muted": "gray-800",
-      "muted-foreground": "gray-400",
-      "accent": "gray-800",
-      "accent-foreground": "gray-50",
-      "destructive": "red-900",
-      "destructive-foreground": "gray-50",
-      "border": "gray-800",
-      "input": "gray-800",
-      "ring": "gray-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "224 71.4% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "primary": "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      "secondary": "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "accent": "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
-      "ring": "224 71.4% 4.1%"
-    },
-    "dark": {
-      "background": "224 71.4% 4.1%",
-      "foreground": "210 20% 98%",
-      "card": "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "primary": "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      "secondary": "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "accent": "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
-      "ring": "216 12.2% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n\n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n\n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n\n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n\n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n\n    --ring: 224 71.4% 4.1%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n\n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n\n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n\n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n\n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n\n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n\n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n\n    --ring: 216 12.2% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/index.json b/apps/www/src/public/registry/colors/index.json
deleted file mode 100644
index 6b70773e7..000000000
--- a/apps/www/src/public/registry/colors/index.json
+++ /dev/null
@@ -1,1999 +0,0 @@
-{
-  "inherit": "inherit",
-  "current": "currentColor",
-  "transparent": "transparent",
-  "black": {
-    "hex": "#000000",
-    "rgb": "rgb(0,0,0)",
-    "hsl": "hsl(0,0%,0%)",
-    "rgbChannel": "0 0 0",
-    "hslChannel": "0 0% 0%"
-  },
-  "white": {
-    "hex": "#ffffff",
-    "rgb": "rgb(255,255,255)",
-    "hsl": "hsl(0,0%,100%)",
-    "rgbChannel": "255 255 255",
-    "hslChannel": "0 0% 100%"
-  },
-  "slate": [
-    {
-      "scale": 50,
-      "hex": "#f8fafc",
-      "rgb": "rgb(248,250,252)",
-      "hsl": "hsl(210,40%,98%)",
-      "rgbChannel": "248 250 252",
-      "hslChannel": "210 40% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f1f5f9",
-      "rgb": "rgb(241,245,249)",
-      "hsl": "hsl(210,40%,96.1%)",
-      "rgbChannel": "241 245 249",
-      "hslChannel": "210 40% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e2e8f0",
-      "rgb": "rgb(226,232,240)",
-      "hsl": "hsl(214.3,31.8%,91.4%)",
-      "rgbChannel": "226 232 240",
-      "hslChannel": "214.3 31.8% 91.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#cbd5e1",
-      "rgb": "rgb(203,213,225)",
-      "hsl": "hsl(212.7,26.8%,83.9%)",
-      "rgbChannel": "203 213 225",
-      "hslChannel": "212.7 26.8% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#94a3b8",
-      "rgb": "rgb(148,163,184)",
-      "hsl": "hsl(215,20.2%,65.1%)",
-      "rgbChannel": "148 163 184",
-      "hslChannel": "215 20.2% 65.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#64748b",
-      "rgb": "rgb(100,116,139)",
-      "hsl": "hsl(215.4,16.3%,46.9%)",
-      "rgbChannel": "100 116 139",
-      "hslChannel": "215.4 16.3% 46.9%"
-    },
-    {
-      "scale": 600,
-      "hex": "#475569",
-      "rgb": "rgb(71,85,105)",
-      "hsl": "hsl(215.3,19.3%,34.5%)",
-      "rgbChannel": "71 85 105",
-      "hslChannel": "215.3 19.3% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#334155",
-      "rgb": "rgb(51,65,85)",
-      "hsl": "hsl(215.3,25%,26.7%)",
-      "rgbChannel": "51 65 85",
-      "hslChannel": "215.3 25% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e293b",
-      "rgb": "rgb(30,41,59)",
-      "hsl": "hsl(217.2,32.6%,17.5%)",
-      "rgbChannel": "30 41 59",
-      "hslChannel": "217.2 32.6% 17.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0f172a",
-      "rgb": "rgb(15,23,42)",
-      "hsl": "hsl(222.2,47.4%,11.2%)",
-      "rgbChannel": "15 23 42",
-      "hslChannel": "222.2 47.4% 11.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#020617",
-      "rgb": "rgb(2,6,23)",
-      "hsl": "hsl(222.2,84%,4.9%)",
-      "rgbChannel": "2 6 23",
-      "hslChannel": "222.2 84% 4.9%"
-    }
-  ],
-  "gray": [
-    {
-      "scale": 50,
-      "hex": "#f9fafb",
-      "rgb": "rgb(249,250,251)",
-      "hsl": "hsl(210,20%,98%)",
-      "rgbChannel": "249 250 251",
-      "hslChannel": "210 20% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3f4f6",
-      "rgb": "rgb(243,244,246)",
-      "hsl": "hsl(220,14.3%,95.9%)",
-      "rgbChannel": "243 244 246",
-      "hslChannel": "220 14.3% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e7eb",
-      "rgb": "rgb(229,231,235)",
-      "hsl": "hsl(220,13%,91%)",
-      "rgbChannel": "229 231 235",
-      "hslChannel": "220 13% 91%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d1d5db",
-      "rgb": "rgb(209,213,219)",
-      "hsl": "hsl(216,12.2%,83.9%)",
-      "rgbChannel": "209 213 219",
-      "hslChannel": "216 12.2% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#9ca3af",
-      "rgb": "rgb(156,163,175)",
-      "hsl": "hsl(217.9,10.6%,64.9%)",
-      "rgbChannel": "156 163 175",
-      "hslChannel": "217.9 10.6% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6b7280",
-      "rgb": "rgb(107,114,128)",
-      "hsl": "hsl(220,8.9%,46.1%)",
-      "rgbChannel": "107 114 128",
-      "hslChannel": "220 8.9% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4b5563",
-      "rgb": "rgb(75,85,99)",
-      "hsl": "hsl(215,13.8%,34.1%)",
-      "rgbChannel": "75 85 99",
-      "hslChannel": "215 13.8% 34.1%"
-    },
-    {
-      "scale": 700,
-      "hex": "#374151",
-      "rgb": "rgb(55,65,81)",
-      "hsl": "hsl(216.9,19.1%,26.7%)",
-      "rgbChannel": "55 65 81",
-      "hslChannel": "216.9 19.1% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1f2937",
-      "rgb": "rgb(31,41,55)",
-      "hsl": "hsl(215,27.9%,16.9%)",
-      "rgbChannel": "31 41 55",
-      "hslChannel": "215 27.9% 16.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#111827",
-      "rgb": "rgb(17,24,39)",
-      "hsl": "hsl(220.9,39.3%,11%)",
-      "rgbChannel": "17 24 39",
-      "hslChannel": "220.9 39.3% 11%"
-    },
-    {
-      "scale": 950,
-      "hex": "#030712",
-      "rgb": "rgb(3,7,18)",
-      "hsl": "hsl(224,71.4%,4.1%)",
-      "rgbChannel": "3 7 18",
-      "hslChannel": "224 71.4% 4.1%"
-    }
-  ],
-  "zinc": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f4f4f5",
-      "rgb": "rgb(244,244,245)",
-      "hsl": "hsl(240,4.8%,95.9%)",
-      "rgbChannel": "244 244 245",
-      "hslChannel": "240 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e4e4e7",
-      "rgb": "rgb(228,228,231)",
-      "hsl": "hsl(240,5.9%,90%)",
-      "rgbChannel": "228 228 231",
-      "hslChannel": "240 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d8",
-      "rgb": "rgb(212,212,216)",
-      "hsl": "hsl(240,4.9%,83.9%)",
-      "rgbChannel": "212 212 216",
-      "hslChannel": "240 4.9% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a1a1aa",
-      "rgb": "rgb(161,161,170)",
-      "hsl": "hsl(240,5%,64.9%)",
-      "rgbChannel": "161 161 170",
-      "hslChannel": "240 5% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#71717a",
-      "rgb": "rgb(113,113,122)",
-      "hsl": "hsl(240,3.8%,46.1%)",
-      "rgbChannel": "113 113 122",
-      "hslChannel": "240 3.8% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#52525b",
-      "rgb": "rgb(82,82,91)",
-      "hsl": "hsl(240,5.2%,33.9%)",
-      "rgbChannel": "82 82 91",
-      "hslChannel": "240 5.2% 33.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#3f3f46",
-      "rgb": "rgb(63,63,70)",
-      "hsl": "hsl(240,5.3%,26.1%)",
-      "rgbChannel": "63 63 70",
-      "hslChannel": "240 5.3% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#27272a",
-      "rgb": "rgb(39,39,42)",
-      "hsl": "hsl(240,3.7%,15.9%)",
-      "rgbChannel": "39 39 42",
-      "hslChannel": "240 3.7% 15.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#18181b",
-      "rgb": "rgb(24,24,27)",
-      "hsl": "hsl(240,5.9%,10%)",
-      "rgbChannel": "24 24 27",
-      "hslChannel": "240 5.9% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#09090b",
-      "rgb": "rgb(9,9,11)",
-      "hsl": "hsl(240,10%,3.9%)",
-      "rgbChannel": "9 9 11",
-      "hslChannel": "240 10% 3.9%"
-    }
-  ],
-  "neutral": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f5",
-      "rgb": "rgb(245,245,245)",
-      "hsl": "hsl(0,0%,96.1%)",
-      "rgbChannel": "245 245 245",
-      "hslChannel": "0 0% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e5e5",
-      "rgb": "rgb(229,229,229)",
-      "hsl": "hsl(0,0%,89.8%)",
-      "rgbChannel": "229 229 229",
-      "hslChannel": "0 0% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d4",
-      "rgb": "rgb(212,212,212)",
-      "hsl": "hsl(0,0%,83.1%)",
-      "rgbChannel": "212 212 212",
-      "hslChannel": "0 0% 83.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3a3a3",
-      "rgb": "rgb(163,163,163)",
-      "hsl": "hsl(0,0%,63.9%)",
-      "rgbChannel": "163 163 163",
-      "hslChannel": "0 0% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#737373",
-      "rgb": "rgb(115,115,115)",
-      "hsl": "hsl(0,0%,45.1%)",
-      "rgbChannel": "115 115 115",
-      "hslChannel": "0 0% 45.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#525252",
-      "rgb": "rgb(82,82,82)",
-      "hsl": "hsl(0,0%,32.2%)",
-      "rgbChannel": "82 82 82",
-      "hslChannel": "0 0% 32.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#404040",
-      "rgb": "rgb(64,64,64)",
-      "hsl": "hsl(0,0%,25.1%)",
-      "rgbChannel": "64 64 64",
-      "hslChannel": "0 0% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#262626",
-      "rgb": "rgb(38,38,38)",
-      "hsl": "hsl(0,0%,14.9%)",
-      "rgbChannel": "38 38 38",
-      "hslChannel": "0 0% 14.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#171717",
-      "rgb": "rgb(23,23,23)",
-      "hsl": "hsl(0,0%,9%)",
-      "rgbChannel": "23 23 23",
-      "hslChannel": "0 0% 9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0a0a0a",
-      "rgb": "rgb(10,10,10)",
-      "hsl": "hsl(0,0%,3.9%)",
-      "rgbChannel": "10 10 10",
-      "hslChannel": "0 0% 3.9%"
-    }
-  ],
-  "stone": [
-    {
-      "scale": 50,
-      "hex": "#fafaf9",
-      "rgb": "rgb(250,250,249)",
-      "hsl": "hsl(60,9.1%,97.8%)",
-      "rgbChannel": "250 250 249",
-      "hslChannel": "60 9.1% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f4",
-      "rgb": "rgb(245,245,244)",
-      "hsl": "hsl(60,4.8%,95.9%)",
-      "rgbChannel": "245 245 244",
-      "hslChannel": "60 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e7e5e4",
-      "rgb": "rgb(231,229,228)",
-      "hsl": "hsl(20,5.9%,90%)",
-      "rgbChannel": "231 229 228",
-      "hslChannel": "20 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d6d3d1",
-      "rgb": "rgb(214,211,209)",
-      "hsl": "hsl(24,5.7%,82.9%)",
-      "rgbChannel": "214 211 209",
-      "hslChannel": "24 5.7% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a8a29e",
-      "rgb": "rgb(168,162,158)",
-      "hsl": "hsl(24,5.4%,63.9%)",
-      "rgbChannel": "168 162 158",
-      "hslChannel": "24 5.4% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#78716c",
-      "rgb": "rgb(120,113,108)",
-      "hsl": "hsl(25,5.3%,44.7%)",
-      "rgbChannel": "120 113 108",
-      "hslChannel": "25 5.3% 44.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#57534e",
-      "rgb": "rgb(87,83,78)",
-      "hsl": "hsl(33.3,5.5%,32.4%)",
-      "rgbChannel": "87 83 78",
-      "hslChannel": "33.3 5.5% 32.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#44403c",
-      "rgb": "rgb(68,64,60)",
-      "hsl": "hsl(30,6.3%,25.1%)",
-      "rgbChannel": "68 64 60",
-      "hslChannel": "30 6.3% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#292524",
-      "rgb": "rgb(41,37,36)",
-      "hsl": "hsl(12,6.5%,15.1%)",
-      "rgbChannel": "41 37 36",
-      "hslChannel": "12 6.5% 15.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1c1917",
-      "rgb": "rgb(28,25,23)",
-      "hsl": "hsl(24,9.8%,10%)",
-      "rgbChannel": "28 25 23",
-      "hslChannel": "24 9.8% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0c0a09",
-      "rgb": "rgb(12,10,9)",
-      "hsl": "hsl(20,14.3%,4.1%)",
-      "rgbChannel": "12 10 9",
-      "hslChannel": "20 14.3% 4.1%"
-    }
-  ],
-  "red": [
-    {
-      "scale": 50,
-      "hex": "#fef2f2",
-      "rgb": "rgb(254,242,242)",
-      "hsl": "hsl(0,85.7%,97.3%)",
-      "rgbChannel": "254 242 242",
-      "hslChannel": "0 85.7% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fee2e2",
-      "rgb": "rgb(254,226,226)",
-      "hsl": "hsl(0,93.3%,94.1%)",
-      "rgbChannel": "254 226 226",
-      "hslChannel": "0 93.3% 94.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecaca",
-      "rgb": "rgb(254,202,202)",
-      "hsl": "hsl(0,96.3%,89.4%)",
-      "rgbChannel": "254 202 202",
-      "hslChannel": "0 96.3% 89.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fca5a5",
-      "rgb": "rgb(252,165,165)",
-      "hsl": "hsl(0,93.5%,81.8%)",
-      "rgbChannel": "252 165 165",
-      "hslChannel": "0 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f87171",
-      "rgb": "rgb(248,113,113)",
-      "hsl": "hsl(0,90.6%,70.8%)",
-      "rgbChannel": "248 113 113",
-      "hslChannel": "0 90.6% 70.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ef4444",
-      "rgb": "rgb(239,68,68)",
-      "hsl": "hsl(0,84.2%,60.2%)",
-      "rgbChannel": "239 68 68",
-      "hslChannel": "0 84.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#dc2626",
-      "rgb": "rgb(220,38,38)",
-      "hsl": "hsl(0,72.2%,50.6%)",
-      "rgbChannel": "220 38 38",
-      "hslChannel": "0 72.2% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b91c1c",
-      "rgb": "rgb(185,28,28)",
-      "hsl": "hsl(0,73.7%,41.8%)",
-      "rgbChannel": "185 28 28",
-      "hslChannel": "0 73.7% 41.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#991b1b",
-      "rgb": "rgb(153,27,27)",
-      "hsl": "hsl(0,70%,35.3%)",
-      "rgbChannel": "153 27 27",
-      "hslChannel": "0 70% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7f1d1d",
-      "rgb": "rgb(127,29,29)",
-      "hsl": "hsl(0,62.8%,30.6%)",
-      "rgbChannel": "127 29 29",
-      "hslChannel": "0 62.8% 30.6%"
-    },
-    {
-      "scale": 950,
-      "hex": "#450a0a",
-      "rgb": "rgb(69,10,10)",
-      "hsl": "hsl(0,74.7%,15.5%)",
-      "rgbChannel": "69 10 10",
-      "hslChannel": "0 74.7% 15.5%"
-    }
-  ],
-  "orange": [
-    {
-      "scale": 50,
-      "hex": "#fff7ed",
-      "rgb": "rgb(255,247,237)",
-      "hsl": "hsl(33.3,100%,96.5%)",
-      "rgbChannel": "255 247 237",
-      "hslChannel": "33.3 100% 96.5%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffedd5",
-      "rgb": "rgb(255,237,213)",
-      "hsl": "hsl(34.3,100%,91.8%)",
-      "rgbChannel": "255 237 213",
-      "hslChannel": "34.3 100% 91.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fed7aa",
-      "rgb": "rgb(254,215,170)",
-      "hsl": "hsl(32.1,97.7%,83.1%)",
-      "rgbChannel": "254 215 170",
-      "hslChannel": "32.1 97.7% 83.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fdba74",
-      "rgb": "rgb(253,186,116)",
-      "hsl": "hsl(30.7,97.2%,72.4%)",
-      "rgbChannel": "253 186 116",
-      "hslChannel": "30.7 97.2% 72.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb923c",
-      "rgb": "rgb(251,146,60)",
-      "hsl": "hsl(27,96%,61%)",
-      "rgbChannel": "251 146 60",
-      "hslChannel": "27 96% 61%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f97316",
-      "rgb": "rgb(249,115,22)",
-      "hsl": "hsl(24.6,95%,53.1%)",
-      "rgbChannel": "249 115 22",
-      "hslChannel": "24.6 95% 53.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ea580c",
-      "rgb": "rgb(234,88,12)",
-      "hsl": "hsl(20.5,90.2%,48.2%)",
-      "rgbChannel": "234 88 12",
-      "hslChannel": "20.5 90.2% 48.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#c2410c",
-      "rgb": "rgb(194,65,12)",
-      "hsl": "hsl(17.5,88.3%,40.4%)",
-      "rgbChannel": "194 65 12",
-      "hslChannel": "17.5 88.3% 40.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9a3412",
-      "rgb": "rgb(154,52,18)",
-      "hsl": "hsl(15,79.1%,33.7%)",
-      "rgbChannel": "154 52 18",
-      "hslChannel": "15 79.1% 33.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7c2d12",
-      "rgb": "rgb(124,45,18)",
-      "hsl": "hsl(15.3,74.6%,27.8%)",
-      "rgbChannel": "124 45 18",
-      "hslChannel": "15.3 74.6% 27.8%"
-    },
-    {
-      "scale": 950,
-      "hex": "#431407",
-      "rgb": "rgb(67,20,7)",
-      "hsl": "hsl(13,81.1%,14.5%)",
-      "rgbChannel": "67 20 7",
-      "hslChannel": "13 81.1% 14.5%"
-    }
-  ],
-  "amber": [
-    {
-      "scale": 50,
-      "hex": "#fffbeb",
-      "rgb": "rgb(255,251,235)",
-      "hsl": "hsl(48,100%,96.1%)",
-      "rgbChannel": "255 251 235",
-      "hslChannel": "48 100% 96.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef3c7",
-      "rgb": "rgb(254,243,199)",
-      "hsl": "hsl(48,96.5%,88.8%)",
-      "rgbChannel": "254 243 199",
-      "hslChannel": "48 96.5% 88.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fde68a",
-      "rgb": "rgb(253,230,138)",
-      "hsl": "hsl(48,96.6%,76.7%)",
-      "rgbChannel": "253 230 138",
-      "hslChannel": "48 96.6% 76.7%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fcd34d",
-      "rgb": "rgb(252,211,77)",
-      "hsl": "hsl(45.9,96.7%,64.5%)",
-      "rgbChannel": "252 211 77",
-      "hslChannel": "45.9 96.7% 64.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fbbf24",
-      "rgb": "rgb(251,191,36)",
-      "hsl": "hsl(43.3,96.4%,56.3%)",
-      "rgbChannel": "251 191 36",
-      "hslChannel": "43.3 96.4% 56.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f59e0b",
-      "rgb": "rgb(245,158,11)",
-      "hsl": "hsl(37.7,92.1%,50.2%)",
-      "rgbChannel": "245 158 11",
-      "hslChannel": "37.7 92.1% 50.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#d97706",
-      "rgb": "rgb(217,119,6)",
-      "hsl": "hsl(32.1,94.6%,43.7%)",
-      "rgbChannel": "217 119 6",
-      "hslChannel": "32.1 94.6% 43.7%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b45309",
-      "rgb": "rgb(180,83,9)",
-      "hsl": "hsl(26,90.5%,37.1%)",
-      "rgbChannel": "180 83 9",
-      "hslChannel": "26 90.5% 37.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#92400e",
-      "rgb": "rgb(146,64,14)",
-      "hsl": "hsl(22.7,82.5%,31.4%)",
-      "rgbChannel": "146 64 14",
-      "hslChannel": "22.7 82.5% 31.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#78350f",
-      "rgb": "rgb(120,53,15)",
-      "hsl": "hsl(21.7,77.8%,26.5%)",
-      "rgbChannel": "120 53 15",
-      "hslChannel": "21.7 77.8% 26.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#451a03",
-      "rgb": "rgb(69,26,3)",
-      "hsl": "hsl(20.9,91.7%,14.1%)",
-      "rgbChannel": "69 26 3",
-      "hslChannel": "20.9 91.7% 14.1%"
-    }
-  ],
-  "yellow": [
-    {
-      "scale": 50,
-      "hex": "#fefce8",
-      "rgb": "rgb(254,252,232)",
-      "hsl": "hsl(54.5,91.7%,95.3%)",
-      "rgbChannel": "254 252 232",
-      "hslChannel": "54.5 91.7% 95.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef9c3",
-      "rgb": "rgb(254,249,195)",
-      "hsl": "hsl(54.9,96.7%,88%)",
-      "rgbChannel": "254 249 195",
-      "hslChannel": "54.9 96.7% 88%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fef08a",
-      "rgb": "rgb(254,240,138)",
-      "hsl": "hsl(52.8,98.3%,76.9%)",
-      "rgbChannel": "254 240 138",
-      "hslChannel": "52.8 98.3% 76.9%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fde047",
-      "rgb": "rgb(253,224,71)",
-      "hsl": "hsl(50.4,97.8%,63.5%)",
-      "rgbChannel": "253 224 71",
-      "hslChannel": "50.4 97.8% 63.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#facc15",
-      "rgb": "rgb(250,204,21)",
-      "hsl": "hsl(47.9,95.8%,53.1%)",
-      "rgbChannel": "250 204 21",
-      "hslChannel": "47.9 95.8% 53.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#eab308",
-      "rgb": "rgb(234,179,8)",
-      "hsl": "hsl(45.4,93.4%,47.5%)",
-      "rgbChannel": "234 179 8",
-      "hslChannel": "45.4 93.4% 47.5%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ca8a04",
-      "rgb": "rgb(202,138,4)",
-      "hsl": "hsl(40.6,96.1%,40.4%)",
-      "rgbChannel": "202 138 4",
-      "hslChannel": "40.6 96.1% 40.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a16207",
-      "rgb": "rgb(161,98,7)",
-      "hsl": "hsl(35.5,91.7%,32.9%)",
-      "rgbChannel": "161 98 7",
-      "hslChannel": "35.5 91.7% 32.9%"
-    },
-    {
-      "scale": 800,
-      "hex": "#854d0e",
-      "rgb": "rgb(133,77,14)",
-      "hsl": "hsl(31.8,81%,28.8%)",
-      "rgbChannel": "133 77 14",
-      "hslChannel": "31.8 81% 28.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#713f12",
-      "rgb": "rgb(113,63,18)",
-      "hsl": "hsl(28.4,72.5%,25.7%)",
-      "rgbChannel": "113 63 18",
-      "hslChannel": "28.4 72.5% 25.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#422006",
-      "rgb": "rgb(66,32,6)",
-      "hsl": "hsl(26,83.3%,14.1%)",
-      "rgbChannel": "66 32 6",
-      "hslChannel": "26 83.3% 14.1%"
-    }
-  ],
-  "lime": [
-    {
-      "scale": 50,
-      "hex": "#f7fee7",
-      "rgb": "rgb(247,254,231)",
-      "hsl": "hsl(78.3,92%,95.1%)",
-      "rgbChannel": "247 254 231",
-      "hslChannel": "78.3 92% 95.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ecfccb",
-      "rgb": "rgb(236,252,203)",
-      "hsl": "hsl(79.6,89.1%,89.2%)",
-      "rgbChannel": "236 252 203",
-      "hslChannel": "79.6 89.1% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#d9f99d",
-      "rgb": "rgb(217,249,157)",
-      "hsl": "hsl(80.9,88.5%,79.6%)",
-      "rgbChannel": "217 249 157",
-      "hslChannel": "80.9 88.5% 79.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#bef264",
-      "rgb": "rgb(190,242,100)",
-      "hsl": "hsl(82,84.5%,67.1%)",
-      "rgbChannel": "190 242 100",
-      "hslChannel": "82 84.5% 67.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3e635",
-      "rgb": "rgb(163,230,53)",
-      "hsl": "hsl(82.7,78%,55.5%)",
-      "rgbChannel": "163 230 53",
-      "hslChannel": "82.7 78% 55.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#84cc16",
-      "rgb": "rgb(132,204,22)",
-      "hsl": "hsl(83.7,80.5%,44.3%)",
-      "rgbChannel": "132 204 22",
-      "hslChannel": "83.7 80.5% 44.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#65a30d",
-      "rgb": "rgb(101,163,13)",
-      "hsl": "hsl(84.8,85.2%,34.5%)",
-      "rgbChannel": "101 163 13",
-      "hslChannel": "84.8 85.2% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4d7c0f",
-      "rgb": "rgb(77,124,15)",
-      "hsl": "hsl(85.9,78.4%,27.3%)",
-      "rgbChannel": "77 124 15",
-      "hslChannel": "85.9 78.4% 27.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3f6212",
-      "rgb": "rgb(63,98,18)",
-      "hsl": "hsl(86.3,69%,22.7%)",
-      "rgbChannel": "63 98 18",
-      "hslChannel": "86.3 69% 22.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#365314",
-      "rgb": "rgb(54,83,20)",
-      "hsl": "hsl(87.6,61.2%,20.2%)",
-      "rgbChannel": "54 83 20",
-      "hslChannel": "87.6 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1a2e05",
-      "rgb": "rgb(26,46,5)",
-      "hsl": "hsl(89.3,80.4%,10%)",
-      "rgbChannel": "26 46 5",
-      "hslChannel": "89.3 80.4% 10%"
-    }
-  ],
-  "green": [
-    {
-      "scale": 50,
-      "hex": "#f0fdf4",
-      "rgb": "rgb(240,253,244)",
-      "hsl": "hsl(138.5,76.5%,96.7%)",
-      "rgbChannel": "240 253 244",
-      "hslChannel": "138.5 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dcfce7",
-      "rgb": "rgb(220,252,231)",
-      "hsl": "hsl(140.6,84.2%,92.5%)",
-      "rgbChannel": "220 252 231",
-      "hslChannel": "140.6 84.2% 92.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bbf7d0",
-      "rgb": "rgb(187,247,208)",
-      "hsl": "hsl(141,78.9%,85.1%)",
-      "rgbChannel": "187 247 208",
-      "hslChannel": "141 78.9% 85.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#86efac",
-      "rgb": "rgb(134,239,172)",
-      "hsl": "hsl(141.7,76.6%,73.1%)",
-      "rgbChannel": "134 239 172",
-      "hslChannel": "141.7 76.6% 73.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#4ade80",
-      "rgb": "rgb(74,222,128)",
-      "hsl": "hsl(141.9,69.2%,58%)",
-      "rgbChannel": "74 222 128",
-      "hslChannel": "141.9 69.2% 58%"
-    },
-    {
-      "scale": 500,
-      "hex": "#22c55e",
-      "rgb": "rgb(34,197,94)",
-      "hsl": "hsl(142.1,70.6%,45.3%)",
-      "rgbChannel": "34 197 94",
-      "hslChannel": "142.1 70.6% 45.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#16a34a",
-      "rgb": "rgb(22,163,74)",
-      "hsl": "hsl(142.1,76.2%,36.3%)",
-      "rgbChannel": "22 163 74",
-      "hslChannel": "142.1 76.2% 36.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#15803d",
-      "rgb": "rgb(21,128,61)",
-      "hsl": "hsl(142.4,71.8%,29.2%)",
-      "rgbChannel": "21 128 61",
-      "hslChannel": "142.4 71.8% 29.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#166534",
-      "rgb": "rgb(22,101,52)",
-      "hsl": "hsl(142.8,64.2%,24.1%)",
-      "rgbChannel": "22 101 52",
-      "hslChannel": "142.8 64.2% 24.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#14532d",
-      "rgb": "rgb(20,83,45)",
-      "hsl": "hsl(143.8,61.2%,20.2%)",
-      "rgbChannel": "20 83 45",
-      "hslChannel": "143.8 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#052e16",
-      "rgb": "rgb(5,46,22)",
-      "hsl": "hsl(144.9,80.4%,10%)",
-      "rgbChannel": "5 46 22",
-      "hslChannel": "144.9 80.4% 10%"
-    }
-  ],
-  "emerald": [
-    {
-      "scale": 50,
-      "hex": "#ecfdf5",
-      "rgb": "rgb(236,253,245)",
-      "hsl": "hsl(151.8,81%,95.9%)",
-      "rgbChannel": "236 253 245",
-      "hslChannel": "151.8 81% 95.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#d1fae5",
-      "rgb": "rgb(209,250,229)",
-      "hsl": "hsl(149.3,80.4%,90%)",
-      "rgbChannel": "209 250 229",
-      "hslChannel": "149.3 80.4% 90%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a7f3d0",
-      "rgb": "rgb(167,243,208)",
-      "hsl": "hsl(152.4,76%,80.4%)",
-      "rgbChannel": "167 243 208",
-      "hslChannel": "152.4 76% 80.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#6ee7b7",
-      "rgb": "rgb(110,231,183)",
-      "hsl": "hsl(156.2,71.6%,66.9%)",
-      "rgbChannel": "110 231 183",
-      "hslChannel": "156.2 71.6% 66.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#34d399",
-      "rgb": "rgb(52,211,153)",
-      "hsl": "hsl(158.1,64.4%,51.6%)",
-      "rgbChannel": "52 211 153",
-      "hslChannel": "158.1 64.4% 51.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#10b981",
-      "rgb": "rgb(16,185,129)",
-      "hsl": "hsl(160.1,84.1%,39.4%)",
-      "rgbChannel": "16 185 129",
-      "hslChannel": "160.1 84.1% 39.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#059669",
-      "rgb": "rgb(5,150,105)",
-      "hsl": "hsl(161.4,93.5%,30.4%)",
-      "rgbChannel": "5 150 105",
-      "hslChannel": "161.4 93.5% 30.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#047857",
-      "rgb": "rgb(4,120,87)",
-      "hsl": "hsl(162.9,93.5%,24.3%)",
-      "rgbChannel": "4 120 87",
-      "hslChannel": "162.9 93.5% 24.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#065f46",
-      "rgb": "rgb(6,95,70)",
-      "hsl": "hsl(163.1,88.1%,19.8%)",
-      "rgbChannel": "6 95 70",
-      "hslChannel": "163.1 88.1% 19.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#064e3b",
-      "rgb": "rgb(6,78,59)",
-      "hsl": "hsl(164.2,85.7%,16.5%)",
-      "rgbChannel": "6 78 59",
-      "hslChannel": "164.2 85.7% 16.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#022c22",
-      "rgb": "rgb(2,44,34)",
-      "hsl": "hsl(165.7,91.3%,9%)",
-      "rgbChannel": "2 44 34",
-      "hslChannel": "165.7 91.3% 9%"
-    }
-  ],
-  "teal": [
-    {
-      "scale": 50,
-      "hex": "#f0fdfa",
-      "rgb": "rgb(240,253,250)",
-      "hsl": "hsl(166.2,76.5%,96.7%)",
-      "rgbChannel": "240 253 250",
-      "hslChannel": "166.2 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ccfbf1",
-      "rgb": "rgb(204,251,241)",
-      "hsl": "hsl(167.2,85.5%,89.2%)",
-      "rgbChannel": "204 251 241",
-      "hslChannel": "167.2 85.5% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#99f6e4",
-      "rgb": "rgb(153,246,228)",
-      "hsl": "hsl(168.4,83.8%,78.2%)",
-      "rgbChannel": "153 246 228",
-      "hslChannel": "168.4 83.8% 78.2%"
-    },
-    {
-      "scale": 300,
-      "hex": "#5eead4",
-      "rgb": "rgb(94,234,212)",
-      "hsl": "hsl(170.6,76.9%,64.3%)",
-      "rgbChannel": "94 234 212",
-      "hslChannel": "170.6 76.9% 64.3%"
-    },
-    {
-      "scale": 400,
-      "hex": "#2dd4bf",
-      "rgb": "rgb(45,212,191)",
-      "hsl": "hsl(172.5,66%,50.4%)",
-      "rgbChannel": "45 212 191",
-      "hslChannel": "172.5 66% 50.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#14b8a6",
-      "rgb": "rgb(20,184,166)",
-      "hsl": "hsl(173.4,80.4%,40%)",
-      "rgbChannel": "20 184 166",
-      "hslChannel": "173.4 80.4% 40%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0d9488",
-      "rgb": "rgb(13,148,136)",
-      "hsl": "hsl(174.7,83.9%,31.6%)",
-      "rgbChannel": "13 148 136",
-      "hslChannel": "174.7 83.9% 31.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0f766e",
-      "rgb": "rgb(15,118,110)",
-      "hsl": "hsl(175.3,77.4%,26.1%)",
-      "rgbChannel": "15 118 110",
-      "hslChannel": "175.3 77.4% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#115e59",
-      "rgb": "rgb(17,94,89)",
-      "hsl": "hsl(176.1,69.4%,21.8%)",
-      "rgbChannel": "17 94 89",
-      "hslChannel": "176.1 69.4% 21.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#134e4a",
-      "rgb": "rgb(19,78,74)",
-      "hsl": "hsl(175.9,60.8%,19%)",
-      "rgbChannel": "19 78 74",
-      "hslChannel": "175.9 60.8% 19%"
-    },
-    {
-      "scale": 950,
-      "hex": "#042f2e",
-      "rgb": "rgb(4,47,46)",
-      "hsl": "hsl(178.6,84.3%,10%)",
-      "rgbChannel": "4 47 46",
-      "hslChannel": "178.6 84.3% 10%"
-    }
-  ],
-  "cyan": [
-    {
-      "scale": 50,
-      "hex": "#ecfeff",
-      "rgb": "rgb(236,254,255)",
-      "hsl": "hsl(183.2,100%,96.3%)",
-      "rgbChannel": "236 254 255",
-      "hslChannel": "183.2 100% 96.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#cffafe",
-      "rgb": "rgb(207,250,254)",
-      "hsl": "hsl(185.1,95.9%,90.4%)",
-      "rgbChannel": "207 250 254",
-      "hslChannel": "185.1 95.9% 90.4%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a5f3fc",
-      "rgb": "rgb(165,243,252)",
-      "hsl": "hsl(186.2,93.5%,81.8%)",
-      "rgbChannel": "165 243 252",
-      "hslChannel": "186.2 93.5% 81.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#67e8f9",
-      "rgb": "rgb(103,232,249)",
-      "hsl": "hsl(187,92.4%,69%)",
-      "rgbChannel": "103 232 249",
-      "hslChannel": "187 92.4% 69%"
-    },
-    {
-      "scale": 400,
-      "hex": "#22d3ee",
-      "rgb": "rgb(34,211,238)",
-      "hsl": "hsl(187.9,85.7%,53.3%)",
-      "rgbChannel": "34 211 238",
-      "hslChannel": "187.9 85.7% 53.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#06b6d4",
-      "rgb": "rgb(6,182,212)",
-      "hsl": "hsl(188.7,94.5%,42.7%)",
-      "rgbChannel": "6 182 212",
-      "hslChannel": "188.7 94.5% 42.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0891b2",
-      "rgb": "rgb(8,145,178)",
-      "hsl": "hsl(191.6,91.4%,36.5%)",
-      "rgbChannel": "8 145 178",
-      "hslChannel": "191.6 91.4% 36.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0e7490",
-      "rgb": "rgb(14,116,144)",
-      "hsl": "hsl(192.9,82.3%,31%)",
-      "rgbChannel": "14 116 144",
-      "hslChannel": "192.9 82.3% 31%"
-    },
-    {
-      "scale": 800,
-      "hex": "#155e75",
-      "rgb": "rgb(21,94,117)",
-      "hsl": "hsl(194.4,69.6%,27.1%)",
-      "rgbChannel": "21 94 117",
-      "hslChannel": "194.4 69.6% 27.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#164e63",
-      "rgb": "rgb(22,78,99)",
-      "hsl": "hsl(196.4,63.6%,23.7%)",
-      "rgbChannel": "22 78 99",
-      "hslChannel": "196.4 63.6% 23.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#083344",
-      "rgb": "rgb(8,51,68)",
-      "hsl": "hsl(197,78.9%,14.9%)",
-      "rgbChannel": "8 51 68",
-      "hslChannel": "197 78.9% 14.9%"
-    }
-  ],
-  "sky": [
-    {
-      "scale": 50,
-      "hex": "#f0f9ff",
-      "rgb": "rgb(240,249,255)",
-      "hsl": "hsl(204,100%,97.1%)",
-      "rgbChannel": "240 249 255",
-      "hslChannel": "204 100% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0f2fe",
-      "rgb": "rgb(224,242,254)",
-      "hsl": "hsl(204,93.8%,93.7%)",
-      "rgbChannel": "224 242 254",
-      "hslChannel": "204 93.8% 93.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bae6fd",
-      "rgb": "rgb(186,230,253)",
-      "hsl": "hsl(200.6,94.4%,86.1%)",
-      "rgbChannel": "186 230 253",
-      "hslChannel": "200.6 94.4% 86.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#7dd3fc",
-      "rgb": "rgb(125,211,252)",
-      "hsl": "hsl(199.4,95.5%,73.9%)",
-      "rgbChannel": "125 211 252",
-      "hslChannel": "199.4 95.5% 73.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#38bdf8",
-      "rgb": "rgb(56,189,248)",
-      "hsl": "hsl(198.4,93.2%,59.6%)",
-      "rgbChannel": "56 189 248",
-      "hslChannel": "198.4 93.2% 59.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#0ea5e9",
-      "rgb": "rgb(14,165,233)",
-      "hsl": "hsl(198.6,88.7%,48.4%)",
-      "rgbChannel": "14 165 233",
-      "hslChannel": "198.6 88.7% 48.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0284c7",
-      "rgb": "rgb(2,132,199)",
-      "hsl": "hsl(200.4,98%,39.4%)",
-      "rgbChannel": "2 132 199",
-      "hslChannel": "200.4 98% 39.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0369a1",
-      "rgb": "rgb(3,105,161)",
-      "hsl": "hsl(201.3,96.3%,32.2%)",
-      "rgbChannel": "3 105 161",
-      "hslChannel": "201.3 96.3% 32.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#075985",
-      "rgb": "rgb(7,89,133)",
-      "hsl": "hsl(201,90%,27.5%)",
-      "rgbChannel": "7 89 133",
-      "hslChannel": "201 90% 27.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0c4a6e",
-      "rgb": "rgb(12,74,110)",
-      "hsl": "hsl(202,80.3%,23.9%)",
-      "rgbChannel": "12 74 110",
-      "hslChannel": "202 80.3% 23.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#082f49",
-      "rgb": "rgb(8,47,73)",
-      "hsl": "hsl(204,80.2%,15.9%)",
-      "rgbChannel": "8 47 73",
-      "hslChannel": "204 80.2% 15.9%"
-    }
-  ],
-  "blue": [
-    {
-      "scale": 50,
-      "hex": "#eff6ff",
-      "rgb": "rgb(239,246,255)",
-      "hsl": "hsl(213.8,100%,96.9%)",
-      "rgbChannel": "239 246 255",
-      "hslChannel": "213.8 100% 96.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dbeafe",
-      "rgb": "rgb(219,234,254)",
-      "hsl": "hsl(214.3,94.6%,92.7%)",
-      "rgbChannel": "219 234 254",
-      "hslChannel": "214.3 94.6% 92.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bfdbfe",
-      "rgb": "rgb(191,219,254)",
-      "hsl": "hsl(213.3,96.9%,87.3%)",
-      "rgbChannel": "191 219 254",
-      "hslChannel": "213.3 96.9% 87.3%"
-    },
-    {
-      "scale": 300,
-      "hex": "#93c5fd",
-      "rgb": "rgb(147,197,253)",
-      "hsl": "hsl(211.7,96.4%,78.4%)",
-      "rgbChannel": "147 197 253",
-      "hslChannel": "211.7 96.4% 78.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#60a5fa",
-      "rgb": "rgb(96,165,250)",
-      "hsl": "hsl(213.1,93.9%,67.8%)",
-      "rgbChannel": "96 165 250",
-      "hslChannel": "213.1 93.9% 67.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#3b82f6",
-      "rgb": "rgb(59,130,246)",
-      "hsl": "hsl(217.2,91.2%,59.8%)",
-      "rgbChannel": "59 130 246",
-      "hslChannel": "217.2 91.2% 59.8%"
-    },
-    {
-      "scale": 600,
-      "hex": "#2563eb",
-      "rgb": "rgb(37,99,235)",
-      "hsl": "hsl(221.2,83.2%,53.3%)",
-      "rgbChannel": "37 99 235",
-      "hslChannel": "221.2 83.2% 53.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#1d4ed8",
-      "rgb": "rgb(29,78,216)",
-      "hsl": "hsl(224.3,76.3%,48%)",
-      "rgbChannel": "29 78 216",
-      "hslChannel": "224.3 76.3% 48%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e40af",
-      "rgb": "rgb(30,64,175)",
-      "hsl": "hsl(225.9,70.7%,40.2%)",
-      "rgbChannel": "30 64 175",
-      "hslChannel": "225.9 70.7% 40.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1e3a8a",
-      "rgb": "rgb(30,58,138)",
-      "hsl": "hsl(224.4,64.3%,32.9%)",
-      "rgbChannel": "30 58 138",
-      "hslChannel": "224.4 64.3% 32.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#172554",
-      "rgb": "rgb(23,37,84)",
-      "hsl": "hsl(226.2,57%,21%)",
-      "rgbChannel": "23 37 84",
-      "hslChannel": "226.2 57% 21%"
-    }
-  ],
-  "indigo": [
-    {
-      "scale": 50,
-      "hex": "#eef2ff",
-      "rgb": "rgb(238,242,255)",
-      "hsl": "hsl(225.9,100%,96.7%)",
-      "rgbChannel": "238 242 255",
-      "hslChannel": "225.9 100% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0e7ff",
-      "rgb": "rgb(224,231,255)",
-      "hsl": "hsl(226.5,100%,93.9%)",
-      "rgbChannel": "224 231 255",
-      "hslChannel": "226.5 100% 93.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#c7d2fe",
-      "rgb": "rgb(199,210,254)",
-      "hsl": "hsl(228,96.5%,88.8%)",
-      "rgbChannel": "199 210 254",
-      "hslChannel": "228 96.5% 88.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#a5b4fc",
-      "rgb": "rgb(165,180,252)",
-      "hsl": "hsl(229.7,93.5%,81.8%)",
-      "rgbChannel": "165 180 252",
-      "hslChannel": "229.7 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#818cf8",
-      "rgb": "rgb(129,140,248)",
-      "hsl": "hsl(234.5,89.5%,73.9%)",
-      "rgbChannel": "129 140 248",
-      "hslChannel": "234.5 89.5% 73.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6366f1",
-      "rgb": "rgb(99,102,241)",
-      "hsl": "hsl(238.7,83.5%,66.7%)",
-      "rgbChannel": "99 102 241",
-      "hslChannel": "238.7 83.5% 66.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4f46e5",
-      "rgb": "rgb(79,70,229)",
-      "hsl": "hsl(243.4,75.4%,58.6%)",
-      "rgbChannel": "79 70 229",
-      "hslChannel": "243.4 75.4% 58.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4338ca",
-      "rgb": "rgb(67,56,202)",
-      "hsl": "hsl(244.5,57.9%,50.6%)",
-      "rgbChannel": "67 56 202",
-      "hslChannel": "244.5 57.9% 50.6%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3730a3",
-      "rgb": "rgb(55,48,163)",
-      "hsl": "hsl(243.7,54.5%,41.4%)",
-      "rgbChannel": "55 48 163",
-      "hslChannel": "243.7 54.5% 41.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#312e81",
-      "rgb": "rgb(49,46,129)",
-      "hsl": "hsl(242.2,47.4%,34.3%)",
-      "rgbChannel": "49 46 129",
-      "hslChannel": "242.2 47.4% 34.3%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(30,27,75)",
-      "hsl": "hsl(243.8,47.1%,20%)",
-      "rgbChannel": "30 27 75",
-      "hslChannel": "243.8 47.1% 20%"
-    }
-  ],
-  "violet": [
-    {
-      "scale": 50,
-      "hex": "#f5f3ff",
-      "rgb": "rgb(245,243,255)",
-      "hsl": "hsl(250,100%,97.6%)",
-      "rgbChannel": "245 243 255",
-      "hslChannel": "250 100% 97.6%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ede9fe",
-      "rgb": "rgb(237,233,254)",
-      "hsl": "hsl(251.4,91.3%,95.5%)",
-      "rgbChannel": "237 233 254",
-      "hslChannel": "251.4 91.3% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#ddd6fe",
-      "rgb": "rgb(221,214,254)",
-      "hsl": "hsl(250.5,95.2%,91.8%)",
-      "rgbChannel": "221 214 254",
-      "hslChannel": "250.5 95.2% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#c4b5fd",
-      "rgb": "rgb(196,181,253)",
-      "hsl": "hsl(252.5,94.7%,85.1%)",
-      "rgbChannel": "196 181 253",
-      "hslChannel": "252.5 94.7% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a78bfa",
-      "rgb": "rgb(167,139,250)",
-      "hsl": "hsl(255.1,91.7%,76.3%)",
-      "rgbChannel": "167 139 250",
-      "hslChannel": "255.1 91.7% 76.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#8b5cf6",
-      "rgb": "rgb(139,92,246)",
-      "hsl": "hsl(258.3,89.5%,66.3%)",
-      "rgbChannel": "139 92 246",
-      "hslChannel": "258.3 89.5% 66.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#7c3aed",
-      "rgb": "rgb(124,58,237)",
-      "hsl": "hsl(262.1,83.3%,57.8%)",
-      "rgbChannel": "124 58 237",
-      "hslChannel": "262.1 83.3% 57.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#6d28d9",
-      "rgb": "rgb(109,40,217)",
-      "hsl": "hsl(263.4,70%,50.4%)",
-      "rgbChannel": "109 40 217",
-      "hslChannel": "263.4 70% 50.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#5b21b6",
-      "rgb": "rgb(91,33,182)",
-      "hsl": "hsl(263.4,69.3%,42.2%)",
-      "rgbChannel": "91 33 182",
-      "hslChannel": "263.4 69.3% 42.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#4c1d95",
-      "rgb": "rgb(76,29,149)",
-      "hsl": "hsl(263.5,67.4%,34.9%)",
-      "rgbChannel": "76 29 149",
-      "hslChannel": "263.5 67.4% 34.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(46,16,101)",
-      "hsl": "hsl(261.2,72.6%,22.9%)",
-      "rgbChannel": "46 16 101",
-      "hslChannel": "261.2 72.6% 22.9%"
-    }
-  ],
-  "purple": [
-    {
-      "scale": 50,
-      "hex": "#faf5ff",
-      "rgb": "rgb(250,245,255)",
-      "hsl": "hsl(270,100%,98%)",
-      "rgbChannel": "250 245 255",
-      "hslChannel": "270 100% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3e8ff",
-      "rgb": "rgb(243,232,255)",
-      "hsl": "hsl(268.7,100%,95.5%)",
-      "rgbChannel": "243 232 255",
-      "hslChannel": "268.7 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e9d5ff",
-      "rgb": "rgb(233,213,255)",
-      "hsl": "hsl(268.6,100%,91.8%)",
-      "rgbChannel": "233 213 255",
-      "hslChannel": "268.6 100% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d8b4fe",
-      "rgb": "rgb(216,180,254)",
-      "hsl": "hsl(269.2,97.4%,85.1%)",
-      "rgbChannel": "216 180 254",
-      "hslChannel": "269.2 97.4% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#c084fc",
-      "rgb": "rgb(192,132,252)",
-      "hsl": "hsl(270,95.2%,75.3%)",
-      "rgbChannel": "192 132 252",
-      "hslChannel": "270 95.2% 75.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#a855f7",
-      "rgb": "rgb(168,85,247)",
-      "hsl": "hsl(270.7,91%,65.1%)",
-      "rgbChannel": "168 85 247",
-      "hslChannel": "270.7 91% 65.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#9333ea",
-      "rgb": "rgb(147,51,234)",
-      "hsl": "hsl(271.5,81.3%,55.9%)",
-      "rgbChannel": "147 51 234",
-      "hslChannel": "271.5 81.3% 55.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#7e22ce",
-      "rgb": "rgb(126,34,206)",
-      "hsl": "hsl(272.1,71.7%,47.1%)",
-      "rgbChannel": "126 34 206",
-      "hslChannel": "272.1 71.7% 47.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#6b21a8",
-      "rgb": "rgb(107,33,168)",
-      "hsl": "hsl(272.9,67.2%,39.4%)",
-      "rgbChannel": "107 33 168",
-      "hslChannel": "272.9 67.2% 39.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#581c87",
-      "rgb": "rgb(88,28,135)",
-      "hsl": "hsl(273.6,65.6%,32%)",
-      "rgbChannel": "88 28 135",
-      "hslChannel": "273.6 65.6% 32%"
-    },
-    {
-      "scale": 950,
-      "hex": "#3b0764",
-      "rgb": "rgb(59,7,100)",
-      "hsl": "hsl(273.5,86.9%,21%)",
-      "rgbChannel": "59 7 100",
-      "hslChannel": "273.5 86.9% 21%"
-    }
-  ],
-  "fuchsia": [
-    {
-      "scale": 50,
-      "hex": "#fdf4ff",
-      "rgb": "rgb(253,244,255)",
-      "hsl": "hsl(289.1,100%,97.8%)",
-      "rgbChannel": "253 244 255",
-      "hslChannel": "289.1 100% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fae8ff",
-      "rgb": "rgb(250,232,255)",
-      "hsl": "hsl(287,100%,95.5%)",
-      "rgbChannel": "250 232 255",
-      "hslChannel": "287 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#f5d0fe",
-      "rgb": "rgb(245,208,254)",
-      "hsl": "hsl(288.3,95.8%,90.6%)",
-      "rgbChannel": "245 208 254",
-      "hslChannel": "288.3 95.8% 90.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f0abfc",
-      "rgb": "rgb(240,171,252)",
-      "hsl": "hsl(291.1,93.1%,82.9%)",
-      "rgbChannel": "240 171 252",
-      "hslChannel": "291.1 93.1% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#e879f9",
-      "rgb": "rgb(232,121,249)",
-      "hsl": "hsl(292,91.4%,72.5%)",
-      "rgbChannel": "232 121 249",
-      "hslChannel": "292 91.4% 72.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#d946ef",
-      "rgb": "rgb(217,70,239)",
-      "hsl": "hsl(292.2,84.1%,60.6%)",
-      "rgbChannel": "217 70 239",
-      "hslChannel": "292.2 84.1% 60.6%"
-    },
-    {
-      "scale": 600,
-      "hex": "#c026d3",
-      "rgb": "rgb(192,38,211)",
-      "hsl": "hsl(293.4,69.5%,48.8%)",
-      "rgbChannel": "192 38 211",
-      "hslChannel": "293.4 69.5% 48.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a21caf",
-      "rgb": "rgb(162,28,175)",
-      "hsl": "hsl(294.7,72.4%,39.8%)",
-      "rgbChannel": "162 28 175",
-      "hslChannel": "294.7 72.4% 39.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#86198f",
-      "rgb": "rgb(134,25,143)",
-      "hsl": "hsl(295.4,70.2%,32.9%)",
-      "rgbChannel": "134 25 143",
-      "hslChannel": "295.4 70.2% 32.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#701a75",
-      "rgb": "rgb(112,26,117)",
-      "hsl": "hsl(296.7,63.6%,28%)",
-      "rgbChannel": "112 26 117",
-      "hslChannel": "296.7 63.6% 28%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4a044e",
-      "rgb": "rgb(74,4,78)",
-      "hsl": "hsl(296.8,90.2%,16.1%)",
-      "rgbChannel": "74 4 78",
-      "hslChannel": "296.8 90.2% 16.1%"
-    }
-  ],
-  "pink": [
-    {
-      "scale": 50,
-      "hex": "#fdf2f8",
-      "rgb": "rgb(253,242,248)",
-      "hsl": "hsl(327.3,73.3%,97.1%)",
-      "rgbChannel": "253 242 248",
-      "hslChannel": "327.3 73.3% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fce7f3",
-      "rgb": "rgb(252,231,243)",
-      "hsl": "hsl(325.7,77.8%,94.7%)",
-      "rgbChannel": "252 231 243",
-      "hslChannel": "325.7 77.8% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fbcfe8",
-      "rgb": "rgb(251,207,232)",
-      "hsl": "hsl(325.9,84.6%,89.8%)",
-      "rgbChannel": "251 207 232",
-      "hslChannel": "325.9 84.6% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f9a8d4",
-      "rgb": "rgb(249,168,212)",
-      "hsl": "hsl(327.4,87.1%,81.8%)",
-      "rgbChannel": "249 168 212",
-      "hslChannel": "327.4 87.1% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f472b6",
-      "rgb": "rgb(244,114,182)",
-      "hsl": "hsl(328.6,85.5%,70.2%)",
-      "rgbChannel": "244 114 182",
-      "hslChannel": "328.6 85.5% 70.2%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ec4899",
-      "rgb": "rgb(236,72,153)",
-      "hsl": "hsl(330.4,81.2%,60.4%)",
-      "rgbChannel": "236 72 153",
-      "hslChannel": "330.4 81.2% 60.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#db2777",
-      "rgb": "rgb(219,39,119)",
-      "hsl": "hsl(333.3,71.4%,50.6%)",
-      "rgbChannel": "219 39 119",
-      "hslChannel": "333.3 71.4% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be185d",
-      "rgb": "rgb(190,24,93)",
-      "hsl": "hsl(335.1,77.6%,42%)",
-      "rgbChannel": "190 24 93",
-      "hslChannel": "335.1 77.6% 42%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9d174d",
-      "rgb": "rgb(157,23,77)",
-      "hsl": "hsl(335.8,74.4%,35.3%)",
-      "rgbChannel": "157 23 77",
-      "hslChannel": "335.8 74.4% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#831843",
-      "rgb": "rgb(131,24,67)",
-      "hsl": "hsl(335.9,69%,30.4%)",
-      "rgbChannel": "131 24 67",
-      "hslChannel": "335.9 69% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#500724",
-      "rgb": "rgb(80,7,36)",
-      "hsl": "hsl(336.2,83.9%,17.1%)",
-      "rgbChannel": "80 7 36",
-      "hslChannel": "336.2 83.9% 17.1%"
-    }
-  ],
-  "rose": [
-    {
-      "scale": 50,
-      "hex": "#fff1f2",
-      "rgb": "rgb(255,241,242)",
-      "hsl": "hsl(355.7,100%,97.3%)",
-      "rgbChannel": "255 241 242",
-      "hslChannel": "355.7 100% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffe4e6",
-      "rgb": "rgb(255,228,230)",
-      "hsl": "hsl(355.6,100%,94.7%)",
-      "rgbChannel": "255 228 230",
-      "hslChannel": "355.6 100% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecdd3",
-      "rgb": "rgb(254,205,211)",
-      "hsl": "hsl(352.7,96.1%,90%)",
-      "rgbChannel": "254 205 211",
-      "hslChannel": "352.7 96.1% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fda4af",
-      "rgb": "rgb(253,164,175)",
-      "hsl": "hsl(352.6,95.7%,81.8%)",
-      "rgbChannel": "253 164 175",
-      "hslChannel": "352.6 95.7% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb7185",
-      "rgb": "rgb(251,113,133)",
-      "hsl": "hsl(351.3,94.5%,71.4%)",
-      "rgbChannel": "251 113 133",
-      "hslChannel": "351.3 94.5% 71.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f43f5e",
-      "rgb": "rgb(244,63,94)",
-      "hsl": "hsl(349.7,89.2%,60.2%)",
-      "rgbChannel": "244 63 94",
-      "hslChannel": "349.7 89.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#e11d48",
-      "rgb": "rgb(225,29,72)",
-      "hsl": "hsl(346.8,77.2%,49.8%)",
-      "rgbChannel": "225 29 72",
-      "hslChannel": "346.8 77.2% 49.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be123c",
-      "rgb": "rgb(190,18,60)",
-      "hsl": "hsl(345.3,82.7%,40.8%)",
-      "rgbChannel": "190 18 60",
-      "hslChannel": "345.3 82.7% 40.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9f1239",
-      "rgb": "rgb(159,18,57)",
-      "hsl": "hsl(343.4,79.7%,34.7%)",
-      "rgbChannel": "159 18 57",
-      "hslChannel": "343.4 79.7% 34.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#881337",
-      "rgb": "rgb(136,19,55)",
-      "hsl": "hsl(341.5,75.5%,30.4%)",
-      "rgbChannel": "136 19 55",
-      "hslChannel": "341.5 75.5% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4c0519",
-      "rgb": "rgb(76,5,25)",
-      "hsl": "hsl(343.1,87.7%,15.9%)",
-      "rgbChannel": "76 5 25",
-      "hslChannel": "343.1 87.7% 15.9%"
-    }
-  ]
-}
diff --git a/apps/www/src/public/registry/colors/lime.json b/apps/www/src/public/registry/colors/lime.json
deleted file mode 100644
index 385067319..000000000
--- a/apps/www/src/public/registry/colors/lime.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "lime-950",
-      "card": "white",
-      "card-foreground": "lime-950",
-      "popover": "white",
-      "popover-foreground": "lime-950",
-      "primary": "lime-900",
-      "primary-foreground": "lime-50",
-      "secondary": "lime-100",
-      "secondary-foreground": "lime-900",
-      "muted": "lime-100",
-      "muted-foreground": "lime-500",
-      "accent": "lime-100",
-      "accent-foreground": "lime-900",
-      "destructive": "red-500",
-      "destructive-foreground": "lime-50",
-      "border": "lime-200",
-      "input": "lime-200",
-      "ring": "lime-950"
-    },
-    "dark": {
-      "background": "lime-950",
-      "foreground": "lime-50",
-      "card": "lime-950",
-      "card-foreground": "lime-50",
-      "popover": "lime-950",
-      "popover-foreground": "lime-50",
-      "primary": "lime-50",
-      "primary-foreground": "lime-900",
-      "secondary": "lime-800",
-      "secondary-foreground": "lime-50",
-      "muted": "lime-800",
-      "muted-foreground": "lime-400",
-      "accent": "lime-800",
-      "accent-foreground": "lime-50",
-      "destructive": "red-900",
-      "destructive-foreground": "lime-50",
-      "border": "lime-800",
-      "input": "lime-800",
-      "ring": "lime-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "89.3 80.4% 10%",
-      "card": "0 0% 100%",
-      "card-foreground": "89.3 80.4% 10%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "89.3 80.4% 10%",
-      "primary": "87.6 61.2% 20.2%",
-      "primary-foreground": "78.3 92% 95.1%",
-      "secondary": "79.6 89.1% 89.2%",
-      "secondary-foreground": "87.6 61.2% 20.2%",
-      "muted": "79.6 89.1% 89.2%",
-      "muted-foreground": "83.7 80.5% 44.3%",
-      "accent": "79.6 89.1% 89.2%",
-      "accent-foreground": "87.6 61.2% 20.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "80.9 88.5% 79.6%",
-      "input": "80.9 88.5% 79.6%",
-      "ring": "89.3 80.4% 10%"
-    },
-    "dark": {
-      "background": "89.3 80.4% 10%",
-      "foreground": "78.3 92% 95.1%",
-      "card": "89.3 80.4% 10%",
-      "card-foreground": "78.3 92% 95.1%",
-      "popover": "89.3 80.4% 10%",
-      "popover-foreground": "78.3 92% 95.1%",
-      "primary": "78.3 92% 95.1%",
-      "primary-foreground": "87.6 61.2% 20.2%",
-      "secondary": "86.3 69% 22.7%",
-      "secondary-foreground": "78.3 92% 95.1%",
-      "muted": "86.3 69% 22.7%",
-      "muted-foreground": "82.7 78% 55.5%",
-      "accent": "86.3 69% 22.7%",
-      "accent-foreground": "78.3 92% 95.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "border": "86.3 69% 22.7%",
-      "input": "86.3 69% 22.7%",
-      "ring": "82 84.5% 67.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n\n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n\n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n\n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n\n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n\n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n\n    --ring: 89.3 80.4% 10%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n\n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n\n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n\n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n\n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n\n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n\n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n\n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 78.3 92% 95.1%;\n\n    --ring: 82 84.5% 67.1%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/neutral.json b/apps/www/src/public/registry/colors/neutral.json
deleted file mode 100644
index cb4046582..000000000
--- a/apps/www/src/public/registry/colors/neutral.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "ring": "neutral-950"
-    },
-    "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "ring": "neutral-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 0 0% 3.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 0 0% 83.1%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/slate.json b/apps/www/src/public/registry/colors/slate.json
deleted file mode 100644
index 97a1e966c..000000000
--- a/apps/www/src/public/registry/colors/slate.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "slate-950",
-      "card": "white",
-      "card-foreground": "slate-950",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "primary": "slate-900",
-      "primary-foreground": "slate-50",
-      "secondary": "slate-100",
-      "secondary-foreground": "slate-900",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "accent": "slate-100",
-      "accent-foreground": "slate-900",
-      "destructive": "red-500",
-      "destructive-foreground": "slate-50",
-      "border": "slate-200",
-      "input": "slate-200",
-      "ring": "slate-950"
-    },
-    "dark": {
-      "background": "slate-950",
-      "foreground": "slate-50",
-      "card": "slate-950",
-      "card-foreground": "slate-50",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "primary": "slate-50",
-      "primary-foreground": "slate-900",
-      "secondary": "slate-800",
-      "secondary-foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "accent": "slate-800",
-      "accent-foreground": "slate-50",
-      "destructive": "red-900",
-      "destructive-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
-      "ring": "slate-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "ring": "222.2 84% 4.9%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "ring": "212.7 26.8% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/stone.json b/apps/www/src/public/registry/colors/stone.json
deleted file mode 100644
index f37ba5ca5..000000000
--- a/apps/www/src/public/registry/colors/stone.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "border": "stone-200",
-      "input": "stone-200",
-      "ring": "stone-950"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "ring": "stone-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --ring: 20 14.3% 4.1%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --ring: 24 5.7% 82.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/colors/zinc.json b/apps/www/src/public/registry/colors/zinc.json
deleted file mode 100644
index 378095fba..000000000
--- a/apps/www/src/public/registry/colors/zinc.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "ring": "zinc-950"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "ring": "zinc-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 240 10% 3.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n\n    --ring: 240 4.9% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
deleted file mode 100644
index 0c7a3934c..000000000
--- a/apps/www/src/public/registry/index.json
+++ /dev/null
@@ -1,1001 +0,0 @@
-[
-  {
-    "name": "accordion",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/accordion/Accordion.vue",
-      "ui/accordion/AccordionContent.vue",
-      "ui/accordion/AccordionItem.vue",
-      "ui/accordion/AccordionTrigger.vue",
-      "ui/accordion/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/alert/Alert.vue",
-      "ui/alert/AlertDescription.vue",
-      "ui/alert/AlertTitle.vue",
-      "ui/alert/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert-dialog",
-    "dependencies": [],
-    "registryDependencies": [
-      "button",
-      "utils"
-    ],
-    "files": [
-      "ui/alert-dialog/AlertDialog.vue",
-      "ui/alert-dialog/AlertDialogAction.vue",
-      "ui/alert-dialog/AlertDialogCancel.vue",
-      "ui/alert-dialog/AlertDialogContent.vue",
-      "ui/alert-dialog/AlertDialogDescription.vue",
-      "ui/alert-dialog/AlertDialogFooter.vue",
-      "ui/alert-dialog/AlertDialogHeader.vue",
-      "ui/alert-dialog/AlertDialogTitle.vue",
-      "ui/alert-dialog/AlertDialogTrigger.vue",
-      "ui/alert-dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "aspect-ratio",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/aspect-ratio/AspectRatio.vue",
-      "ui/aspect-ratio/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "auto-form",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "form",
-      "accordion",
-      "button",
-      "separator",
-      "checkbox",
-      "switch",
-      "calendar",
-      "popover",
-      "utils",
-      "label",
-      "radio-group",
-      "select",
-      "input",
-      "textarea"
-    ],
-    "files": [
-      "ui/auto-form/AutoForm.vue",
-      "ui/auto-form/AutoFormField.vue",
-      "ui/auto-form/AutoFormFieldArray.vue",
-      "ui/auto-form/AutoFormFieldBoolean.vue",
-      "ui/auto-form/AutoFormFieldDate.vue",
-      "ui/auto-form/AutoFormFieldEnum.vue",
-      "ui/auto-form/AutoFormFieldFile.vue",
-      "ui/auto-form/AutoFormFieldInput.vue",
-      "ui/auto-form/AutoFormFieldNumber.vue",
-      "ui/auto-form/AutoFormFieldObject.vue",
-      "ui/auto-form/AutoFormLabel.vue",
-      "ui/auto-form/constant.ts",
-      "ui/auto-form/dependencies.ts",
-      "ui/auto-form/index.ts",
-      "ui/auto-form/interface.ts",
-      "ui/auto-form/utils.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "avatar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/avatar/Avatar.vue",
-      "ui/avatar/AvatarFallback.vue",
-      "ui/avatar/AvatarImage.vue",
-      "ui/avatar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "badge",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/badge/Badge.vue",
-      "ui/badge/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "breadcrumb",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/breadcrumb/Breadcrumb.vue",
-      "ui/breadcrumb/BreadcrumbEllipsis.vue",
-      "ui/breadcrumb/BreadcrumbItem.vue",
-      "ui/breadcrumb/BreadcrumbLink.vue",
-      "ui/breadcrumb/BreadcrumbList.vue",
-      "ui/breadcrumb/BreadcrumbPage.vue",
-      "ui/breadcrumb/BreadcrumbSeparator.vue",
-      "ui/breadcrumb/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "button",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/button/Button.vue",
-      "ui/button/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "calendar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/calendar/Calendar.vue",
-      "ui/calendar/CalendarCell.vue",
-      "ui/calendar/CalendarCellTrigger.vue",
-      "ui/calendar/CalendarGrid.vue",
-      "ui/calendar/CalendarGridBody.vue",
-      "ui/calendar/CalendarGridHead.vue",
-      "ui/calendar/CalendarGridRow.vue",
-      "ui/calendar/CalendarHeadCell.vue",
-      "ui/calendar/CalendarHeader.vue",
-      "ui/calendar/CalendarHeading.vue",
-      "ui/calendar/CalendarNextButton.vue",
-      "ui/calendar/CalendarPrevButton.vue",
-      "ui/calendar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "card",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/card/Card.vue",
-      "ui/card/CardContent.vue",
-      "ui/card/CardDescription.vue",
-      "ui/card/CardFooter.vue",
-      "ui/card/CardHeader.vue",
-      "ui/card/CardTitle.vue",
-      "ui/card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "carousel",
-    "dependencies": [
-      "embla-carousel-vue",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/carousel/Carousel.vue",
-      "ui/carousel/CarouselContent.vue",
-      "ui/carousel/CarouselItem.vue",
-      "ui/carousel/CarouselNext.vue",
-      "ui/carousel/CarouselPrevious.vue",
-      "ui/carousel/index.ts",
-      "ui/carousel/interface.ts",
-      "ui/carousel/useCarousel.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts"
-    ],
-    "registryDependencies": [
-      "button",
-      "card"
-    ],
-    "files": [
-      "ui/chart/ChartCrosshair.vue",
-      "ui/chart/ChartLegend.vue",
-      "ui/chart/ChartSingleTooltip.vue",
-      "ui/chart/ChartTooltip.vue",
-      "ui/chart/index.ts",
-      "ui/chart/interface.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-area",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-area/AreaChart.vue",
-      "ui/chart-area/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-bar",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-bar/BarChart.vue",
-      "ui/chart-bar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-donut",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-donut/DonutChart.vue",
-      "ui/chart-donut/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "chart-line",
-    "dependencies": [
-      "@unovis/vue",
-      "@unovis/ts",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "chart",
-      "utils"
-    ],
-    "files": [
-      "ui/chart-line/LineChart.vue",
-      "ui/chart-line/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "checkbox",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/checkbox/Checkbox.vue",
-      "ui/checkbox/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "collapsible",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/collapsible/Collapsible.vue",
-      "ui/collapsible/CollapsibleContent.vue",
-      "ui/collapsible/CollapsibleTrigger.vue",
-      "ui/collapsible/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "command",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "dialog"
-    ],
-    "files": [
-      "ui/command/Command.vue",
-      "ui/command/CommandDialog.vue",
-      "ui/command/CommandEmpty.vue",
-      "ui/command/CommandGroup.vue",
-      "ui/command/CommandInput.vue",
-      "ui/command/CommandItem.vue",
-      "ui/command/CommandList.vue",
-      "ui/command/CommandSeparator.vue",
-      "ui/command/CommandShortcut.vue",
-      "ui/command/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "context-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/context-menu/ContextMenu.vue",
-      "ui/context-menu/ContextMenuCheckboxItem.vue",
-      "ui/context-menu/ContextMenuContent.vue",
-      "ui/context-menu/ContextMenuGroup.vue",
-      "ui/context-menu/ContextMenuItem.vue",
-      "ui/context-menu/ContextMenuLabel.vue",
-      "ui/context-menu/ContextMenuPortal.vue",
-      "ui/context-menu/ContextMenuRadioGroup.vue",
-      "ui/context-menu/ContextMenuRadioItem.vue",
-      "ui/context-menu/ContextMenuSeparator.vue",
-      "ui/context-menu/ContextMenuShortcut.vue",
-      "ui/context-menu/ContextMenuSub.vue",
-      "ui/context-menu/ContextMenuSubContent.vue",
-      "ui/context-menu/ContextMenuSubTrigger.vue",
-      "ui/context-menu/ContextMenuTrigger.vue",
-      "ui/context-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dialog",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dialog/Dialog.vue",
-      "ui/dialog/DialogClose.vue",
-      "ui/dialog/DialogContent.vue",
-      "ui/dialog/DialogDescription.vue",
-      "ui/dialog/DialogFooter.vue",
-      "ui/dialog/DialogHeader.vue",
-      "ui/dialog/DialogScrollContent.vue",
-      "ui/dialog/DialogTitle.vue",
-      "ui/dialog/DialogTrigger.vue",
-      "ui/dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "drawer",
-    "dependencies": [
-      "vaul-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/drawer/Drawer.vue",
-      "ui/drawer/DrawerContent.vue",
-      "ui/drawer/DrawerDescription.vue",
-      "ui/drawer/DrawerFooter.vue",
-      "ui/drawer/DrawerHeader.vue",
-      "ui/drawer/DrawerOverlay.vue",
-      "ui/drawer/DrawerTitle.vue",
-      "ui/drawer/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dropdown-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dropdown-menu/DropdownMenu.vue",
-      "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-      "ui/dropdown-menu/DropdownMenuContent.vue",
-      "ui/dropdown-menu/DropdownMenuGroup.vue",
-      "ui/dropdown-menu/DropdownMenuItem.vue",
-      "ui/dropdown-menu/DropdownMenuLabel.vue",
-      "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
-      "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-      "ui/dropdown-menu/DropdownMenuSeparator.vue",
-      "ui/dropdown-menu/DropdownMenuShortcut.vue",
-      "ui/dropdown-menu/DropdownMenuSub.vue",
-      "ui/dropdown-menu/DropdownMenuSubContent.vue",
-      "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-      "ui/dropdown-menu/DropdownMenuTrigger.vue",
-      "ui/dropdown-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "form",
-    "dependencies": [
-      "vee-validate",
-      "@vee-validate/zod",
-      "zod"
-    ],
-    "registryDependencies": [
-      "utils",
-      "label"
-    ],
-    "files": [
-      "ui/form/FormControl.vue",
-      "ui/form/FormDescription.vue",
-      "ui/form/FormItem.vue",
-      "ui/form/FormLabel.vue",
-      "ui/form/FormMessage.vue",
-      "ui/form/index.ts",
-      "ui/form/injectionKeys.ts",
-      "ui/form/useFormField.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "hover-card",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/hover-card/HoverCard.vue",
-      "ui/hover-card/HoverCardContent.vue",
-      "ui/hover-card/HoverCardTrigger.vue",
-      "ui/hover-card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "input",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/input/Input.vue",
-      "ui/input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "label",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/label/Label.vue",
-      "ui/label/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "menubar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/menubar/Menubar.vue",
-      "ui/menubar/MenubarCheckboxItem.vue",
-      "ui/menubar/MenubarContent.vue",
-      "ui/menubar/MenubarGroup.vue",
-      "ui/menubar/MenubarItem.vue",
-      "ui/menubar/MenubarLabel.vue",
-      "ui/menubar/MenubarMenu.vue",
-      "ui/menubar/MenubarRadioGroup.vue",
-      "ui/menubar/MenubarRadioItem.vue",
-      "ui/menubar/MenubarSeparator.vue",
-      "ui/menubar/MenubarShortcut.vue",
-      "ui/menubar/MenubarSub.vue",
-      "ui/menubar/MenubarSubContent.vue",
-      "ui/menubar/MenubarSubTrigger.vue",
-      "ui/menubar/MenubarTrigger.vue",
-      "ui/menubar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "navigation-menu",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/navigation-menu/NavigationMenu.vue",
-      "ui/navigation-menu/NavigationMenuContent.vue",
-      "ui/navigation-menu/NavigationMenuIndicator.vue",
-      "ui/navigation-menu/NavigationMenuItem.vue",
-      "ui/navigation-menu/NavigationMenuLink.vue",
-      "ui/navigation-menu/NavigationMenuList.vue",
-      "ui/navigation-menu/NavigationMenuTrigger.vue",
-      "ui/navigation-menu/NavigationMenuViewport.vue",
-      "ui/navigation-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "number-field",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/number-field/NumberField.vue",
-      "ui/number-field/NumberFieldContent.vue",
-      "ui/number-field/NumberFieldDecrement.vue",
-      "ui/number-field/NumberFieldIncrement.vue",
-      "ui/number-field/NumberFieldInput.vue",
-      "ui/number-field/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "pagination",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/pagination/PaginationEllipsis.vue",
-      "ui/pagination/PaginationFirst.vue",
-      "ui/pagination/PaginationLast.vue",
-      "ui/pagination/PaginationNext.vue",
-      "ui/pagination/PaginationPrev.vue",
-      "ui/pagination/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "pin-input",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/pin-input/PinInput.vue",
-      "ui/pin-input/PinInputGroup.vue",
-      "ui/pin-input/PinInputInput.vue",
-      "ui/pin-input/PinInputSeparator.vue",
-      "ui/pin-input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "popover",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/popover/Popover.vue",
-      "ui/popover/PopoverContent.vue",
-      "ui/popover/PopoverTrigger.vue",
-      "ui/popover/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "progress",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/progress/Progress.vue",
-      "ui/progress/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "radio-group",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/radio-group/RadioGroup.vue",
-      "ui/radio-group/RadioGroupItem.vue",
-      "ui/radio-group/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "range-calendar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/range-calendar/RangeCalendar.vue",
-      "ui/range-calendar/RangeCalendarCell.vue",
-      "ui/range-calendar/RangeCalendarCellTrigger.vue",
-      "ui/range-calendar/RangeCalendarGrid.vue",
-      "ui/range-calendar/RangeCalendarGridBody.vue",
-      "ui/range-calendar/RangeCalendarGridHead.vue",
-      "ui/range-calendar/RangeCalendarGridRow.vue",
-      "ui/range-calendar/RangeCalendarHeadCell.vue",
-      "ui/range-calendar/RangeCalendarHeader.vue",
-      "ui/range-calendar/RangeCalendarHeading.vue",
-      "ui/range-calendar/RangeCalendarNextButton.vue",
-      "ui/range-calendar/RangeCalendarPrevButton.vue",
-      "ui/range-calendar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "resizable",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/resizable/ResizableHandle.vue",
-      "ui/resizable/ResizablePanelGroup.vue",
-      "ui/resizable/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "scroll-area",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/scroll-area/ScrollArea.vue",
-      "ui/scroll-area/ScrollBar.vue",
-      "ui/scroll-area/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "select",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/select/Select.vue",
-      "ui/select/SelectContent.vue",
-      "ui/select/SelectGroup.vue",
-      "ui/select/SelectItem.vue",
-      "ui/select/SelectItemText.vue",
-      "ui/select/SelectLabel.vue",
-      "ui/select/SelectScrollDownButton.vue",
-      "ui/select/SelectScrollUpButton.vue",
-      "ui/select/SelectSeparator.vue",
-      "ui/select/SelectTrigger.vue",
-      "ui/select/SelectValue.vue",
-      "ui/select/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "separator",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/separator/Separator.vue",
-      "ui/separator/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sheet",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/sheet/Sheet.vue",
-      "ui/sheet/SheetClose.vue",
-      "ui/sheet/SheetContent.vue",
-      "ui/sheet/SheetDescription.vue",
-      "ui/sheet/SheetFooter.vue",
-      "ui/sheet/SheetHeader.vue",
-      "ui/sheet/SheetTitle.vue",
-      "ui/sheet/SheetTrigger.vue",
-      "ui/sheet/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sidebar",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "Sheet.vue",
-      "SheetContent.vue",
-      "utils",
-      "Input.vue",
-      "Tooltip.vue",
-      "TooltipContent.vue",
-      "TooltipTrigger.vue",
-      "Skeleton.vue",
-      "Separator.vue",
-      "Button.vue"
-    ],
-    "files": [
-      "ui/sidebar/Sidebar.vue",
-      "ui/sidebar/SidebarContent.vue",
-      "ui/sidebar/SidebarFooter.vue",
-      "ui/sidebar/SidebarGroup.vue",
-      "ui/sidebar/SidebarGroupAction.vue",
-      "ui/sidebar/SidebarGroupContent.vue",
-      "ui/sidebar/SidebarGroupLabel.vue",
-      "ui/sidebar/SidebarHeader.vue",
-      "ui/sidebar/SidebarInput.vue",
-      "ui/sidebar/SidebarInset.vue",
-      "ui/sidebar/SidebarMenu.vue",
-      "ui/sidebar/SidebarMenuAction.vue",
-      "ui/sidebar/SidebarMenuBadge.vue",
-      "ui/sidebar/SidebarMenuButton.vue",
-      "ui/sidebar/SidebarMenuButtonChild.vue",
-      "ui/sidebar/SidebarMenuItem.vue",
-      "ui/sidebar/SidebarMenuSkeleton.vue",
-      "ui/sidebar/SidebarMenuSub.vue",
-      "ui/sidebar/SidebarMenuSubButton.vue",
-      "ui/sidebar/SidebarMenuSubItem.vue",
-      "ui/sidebar/SidebarProvider.vue",
-      "ui/sidebar/SidebarRail.vue",
-      "ui/sidebar/SidebarSeparator.vue",
-      "ui/sidebar/SidebarTrigger.vue",
-      "ui/sidebar/index.ts",
-      "ui/sidebar/utils.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "skeleton",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/skeleton/Skeleton.vue",
-      "ui/skeleton/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "slider",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/slider/Slider.vue",
-      "ui/slider/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sonner",
-    "dependencies": [
-      "vue-sonner"
-    ],
-    "registryDependencies": [],
-    "files": [
-      "ui/sonner/Sonner.vue",
-      "ui/sonner/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "stepper",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/stepper/Stepper.vue",
-      "ui/stepper/StepperDescription.vue",
-      "ui/stepper/StepperIndicator.vue",
-      "ui/stepper/StepperItem.vue",
-      "ui/stepper/StepperSeparator.vue",
-      "ui/stepper/StepperTitle.vue",
-      "ui/stepper/StepperTrigger.vue",
-      "ui/stepper/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "switch",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/switch/Switch.vue",
-      "ui/switch/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "table",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/table/Table.vue",
-      "ui/table/TableBody.vue",
-      "ui/table/TableCaption.vue",
-      "ui/table/TableCell.vue",
-      "ui/table/TableEmpty.vue",
-      "ui/table/TableFooter.vue",
-      "ui/table/TableHead.vue",
-      "ui/table/TableHeader.vue",
-      "ui/table/TableRow.vue",
-      "ui/table/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tabs",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tabs/Tabs.vue",
-      "ui/tabs/TabsContent.vue",
-      "ui/tabs/TabsList.vue",
-      "ui/tabs/TabsTrigger.vue",
-      "ui/tabs/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tags-input",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tags-input/TagsInput.vue",
-      "ui/tags-input/TagsInputInput.vue",
-      "ui/tags-input/TagsInputItem.vue",
-      "ui/tags-input/TagsInputItemDelete.vue",
-      "ui/tags-input/TagsInputItemText.vue",
-      "ui/tags-input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "textarea",
-    "dependencies": [
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/textarea/Textarea.vue",
-      "ui/textarea/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toast",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/toast/Toast.vue",
-      "ui/toast/ToastAction.vue",
-      "ui/toast/ToastClose.vue",
-      "ui/toast/ToastDescription.vue",
-      "ui/toast/ToastProvider.vue",
-      "ui/toast/ToastTitle.vue",
-      "ui/toast/ToastViewport.vue",
-      "ui/toast/Toaster.vue",
-      "ui/toast/index.ts",
-      "ui/toast/use-toast.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toggle",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/toggle/Toggle.vue",
-      "ui/toggle/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toggle-group",
-    "dependencies": [],
-    "registryDependencies": [
-      "toggle",
-      "utils"
-    ],
-    "files": [
-      "ui/toggle-group/ToggleGroup.vue",
-      "ui/toggle-group/ToggleGroupItem.vue",
-      "ui/toggle-group/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tooltip",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tooltip/Tooltip.vue",
-      "ui/tooltip/TooltipContent.vue",
-      "ui/tooltip/TooltipProvider.vue",
-      "ui/tooltip/TooltipTrigger.vue",
-      "ui/tooltip/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "v-calendar",
-    "dependencies": [
-      "v-calendar@next",
-      "@vueuse/core"
-    ],
-    "registryDependencies": [
-      "button",
-      "utils"
-    ],
-    "files": [
-      "ui/v-calendar/Calendar.vue",
-      "ui/v-calendar/index.ts"
-    ],
-    "type": "components:ui"
-  }
-]
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
deleted file mode 100644
index e4e624d84..000000000
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "accordion",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
-    },
-    {
-      "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
-    },
-    {
-      "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
-    },
-    {
-      "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDown\n          class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
deleted file mode 100644
index 3ef1af8e4..000000000
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "alert-dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/alert.json b/apps/www/src/public/registry/styles/default/alert.json
deleted file mode 100644
index 077895852..000000000
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "alert",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/area-chart.json b/apps/www/src/public/registry/styles/default/area-chart.json
deleted file mode 100644
index 4cf4d8ab8..000000000
--- a/apps/www/src/public/registry/styles/default/area-chart.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "area-chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
deleted file mode 100644
index 0d50bc374..000000000
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "aspect-ratio",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
deleted file mode 100644
index aa00f8c01..000000000
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "name": "auto-form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "form",
-    "accordion",
-    "button",
-    "separator",
-    "checkbox",
-    "switch",
-    "calendar",
-    "popover",
-    "utils",
-    "label",
-    "radio-group",
-    "select",
-    "input",
-    "textarea"
-  ],
-  "files": [
-    {
-      "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/default/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" :size=\"16\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { TrashIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon :size=\"16\" />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\nimport { FormItem } from '@/registry/default/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
-    },
-    {
-      "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/default/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
-    },
-    {
-      "name": "constant.ts",
-      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
-    },
-    {
-      "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
deleted file mode 100644
index 5af79a8a6..000000000
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "avatar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
-    },
-    {
-      "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
-    },
-    {
-      "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/badge.json b/apps/www/src/public/registry/styles/default/badge.json
deleted file mode 100644
index 36703f6ca..000000000
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "badge",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
deleted file mode 100644
index 8a354dd2b..000000000
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "breadcrumb",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Breadcrumb.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontal class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbList.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbPage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRight />\n    </slot>\n  </li>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
deleted file mode 100644
index 919bf04eb..000000000
--- a/apps/www/src/public/registry/styles/default/button.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "button",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
deleted file mode 100644
index 36e1d094c..000000000
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
-    },
-    {
-      "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
deleted file mode 100644
index 08eb900fe..000000000
--- a/apps/www/src/public/registry/styles/default/card.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "CardFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
deleted file mode 100644
index 01f24983f..000000000
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRight class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeft class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
-    },
-    {
-      "name": "useCarousel.ts",
-      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-area.json b/apps/www/src/public/registry/styles/default/chart-area.json
deleted file mode 100644
index cb68838ab..000000000
--- a/apps/www/src/public/registry/styles/default/chart-area.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-area",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
deleted file mode 100644
index 00d122a2a..000000000
--- a/apps/www/src/public/registry/styles/default/chart-bar.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-bar",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-donut.json b/apps/www/src/public/registry/styles/default/chart-donut.json
deleted file mode 100644
index 44cc4dee2..000000000
--- a/apps/www/src/public/registry/styles/default/chart-donut.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-donut",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart-line.json b/apps/www/src/public/registry/styles/default/chart-line.json
deleted file mode 100644
index 4cb4cabd9..000000000
--- a/apps/www/src/public/registry/styles/default/chart-line.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-line",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/chart.json b/apps/www/src/public/registry/styles/default/chart.json
deleted file mode 100644
index 15c702d27..000000000
--- a/apps/www/src/public/registry/styles/default/chart.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
-    },
-    {
-      "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
deleted file mode 100644
index c495496eb..000000000
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "checkbox",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <Check class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
deleted file mode 100644
index 1f6da7fca..000000000
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "collapsible",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
deleted file mode 100644
index 14a6999c1..000000000
--- a/apps/www/src/public/registry/styles/default/command.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "command",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "dialog"
-  ],
-  "files": [
-    {
-      "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
-    },
-    {
-      "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/default/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
-    },
-    {
-      "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
-    },
-    {
-      "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
-    },
-    {
-      "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
-    },
-    {
-      "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
-    },
-    {
-      "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
-    },
-    {
-      "name": "CommandShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
deleted file mode 100644
index aee4f960c..000000000
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "context-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
deleted file mode 100644
index 17c01863b..000000000
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "data-table",
-  "dependencies": [
-    "@tanstack/vue-table"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "DataTable.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :modelValue=\"column.getIsVisible()\"\n            @update:modelValue=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DataTable } from './DataTable.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/date-picker.json b/apps/www/src/public/registry/styles/default/date-picker.json
deleted file mode 100644
index 12037ec22..000000000
--- a/apps/www/src/public/registry/styles/default/date-picker.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "date-picker",
-  "dependencies": [
-    "v-calendar"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "DatePicker.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useDark } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport 'v-calendar/style.css'\n\nconst isDark = useDark()\n</script>\n\n<template>\n  <DatePicker :is-dark=\"isDark\" borderless trim-weeks expanded />\n</template>\n\n<style>\n:root {\n  --vc-font-family: \"Inter\", sans-serif;\n  --vc-rounded-full: var(--radius);\n  --vc-font-bold: 500;\n  --vc-font-semibold: 600;\n  --vc-text-lg: 14px;\n}\n\n.vc-light,\n.vc-dark {\n  --vc-bg: var(--background);\n  --vc-border: var(--border);\n  --vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);\n  --vc-weekday-color: var(--muted);\n  --vc-popover-content-color: var(--muted);\n  --vc-popover-content-bg: var(--background);\n  --vc-popover-content-border: var(--border);\n\n  &.vc-attr,\n  & .vc-attr {\n    --vc-content-color: var(--primary);\n    --vc-highlight-outline-bg: var(--primary);\n    --vc-highlight-outline-border: var(--primary);\n    --vc-highlight-outline-content-color: var(--primary-foreground);\n    --vc-highlight-light-bg: var(\n      --vc-accent-200\n    ); /* Highlighted color between two dates */\n    --vc-highlight-light-content-color: var(--secondary-foreground);\n    --vc-highlight-solid-bg: var(--primary);\n    --vc-highlight-solid-content-color: var(--primary-foreground);\n    --vc-dot-bg: var(--primary);\n    --vc-bar-bg: var(--primary);\n  }\n}\n\n.vc-blue {\n  --vc-accent-200: var(--secondary);\n  --vc-accent-400: var(--primary);\n  --vc-accent-500: var(--primary);\n  --vc-accent-600: var(--primary);\n}\n\n.dark {\n  .vc-blue {\n    --vc-accent-200: var(--secondary);\n    --vc-accent-400: var(--primary);\n    --vc-accent-500: var(--secondary);\n  }\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DatePicker } from './DatePicker.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
deleted file mode 100644
index 844646150..000000000
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <X class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/drawer.json b/apps/www/src/public/registry/styles/default/drawer.json
deleted file mode 100644
index 3b6f992a5..000000000
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "drawer",
-  "dependencies": [
-    "vaul-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
-    },
-    {
-      "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
-    },
-    {
-      "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n"
-    },
-    {
-      "name": "DrawerFooter.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
deleted file mode 100644
index 5c12d0530..000000000
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "dropdown-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
deleted file mode 100644
index cedf14ed3..000000000
--- a/apps/www/src/public/registry/styles/default/form.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "label"
-  ],
-  "files": [
-    {
-      "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
-    },
-    {
-      "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/default/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "FormMessage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-sm font-medium text-destructive\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, Form } from 'vee-validate'\n"
-    },
-    {
-      "name": "injectionKeys.ts",
-      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
-    },
-    {
-      "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
deleted file mode 100644
index 934f0e208..000000000
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "hover-card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
-    },
-    {
-      "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
-    },
-    {
-      "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
deleted file mode 100644
index 37d76352a..000000000
--- a/apps/www/src/public/registry/styles/default/input.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "input",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Input } from './Input.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/kbd.json b/apps/www/src/public/registry/styles/default/kbd.json
deleted file mode 100644
index 2eeafdda7..000000000
--- a/apps/www/src/public/registry/styles/default/kbd.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "kbd",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Kbd.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n  as?: string\n  size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n  as: 'kbd',\n  size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n  return cva(\n    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n    {\n      variants: {\n        size: {\n          xs: 'min-h-4 text-[10px] h-4 px-1',\n          sm: 'min-h-5 text-[11px] h-5 px-1',\n          md: 'min-h-6 text-[12px] h-6 px-1.5',\n        },\n      },\n    },\n  )({\n    size: props.size,\n  })\n})\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"kbdClass\">\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Kbd } from './Kbd.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
deleted file mode 100644
index 35db08b24..000000000
--- a/apps/www/src/public/registry/styles/default/label.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "label",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Label } from './Label.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
deleted file mode 100644
index de8cddef5..000000000
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "menubar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
-    },
-    {
-      "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Check class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
-    },
-    {
-      "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
-    },
-    {
-      "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
deleted file mode 100644
index b1cb537b8..000000000
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "navigation-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDown\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-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-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/number-field.json b/apps/www/src/public/registry/styles/default/number-field.json
deleted file mode 100644
index e72b127f2..000000000
--- a/apps/www/src/public/registry/styles/default/number-field.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "number-field",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
deleted file mode 100644
index 500a1ac4c..000000000
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "pagination",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
-    },
-    {
-      "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
-    },
-    {
-      "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
-    },
-    {
-      "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
-    },
-    {
-      "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-10 h-10 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
deleted file mode 100644
index b5170d09d..000000000
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "pin-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
-    },
-    {
-      "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Dot } from 'lucide-vue-next'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
deleted file mode 100644
index 3afda1fb2..000000000
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "popover",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
-    },
-    {
-      "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
-    },
-    {
-      "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
deleted file mode 100644
index 628f91075..000000000
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "progress",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Progress } from './Progress.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
deleted file mode 100644
index 9669d8317..000000000
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "radio-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Circle } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        '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',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <Circle class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/range-calendar.json b/apps/www/src/public/registry/styles/default/range-calendar.json
deleted file mode 100644
index 11bbd9887..000000000
--- a/apps/www/src/public/registry/styles/default/range-calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "range-calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex mt-2 w-full', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell :class=\"cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRight class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeft class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/resizable.json b/apps/www/src/public/registry/styles/default/resizable.json
deleted file mode 100644
index c5c416884..000000000
--- a/apps/www/src/public/registry/styles/default/resizable.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "resizable",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { GripVertical } from 'lucide-vue-next'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
-    },
-    {
-      "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
deleted file mode 100644
index 8c2f5b080..000000000
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "scroll-area",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
-    },
-    {
-      "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
deleted file mode 100644
index e96b5fd53..000000000
--- a/apps/www/src/public/registry/styles/default/select.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "select",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
-    },
-    {
-      "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
-    },
-    {
-      "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
-    },
-    {
-      "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default 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',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
-    },
-    {
-      "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
-    },
-    {
-      "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDown class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUp class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
-    },
-    {
-      "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
-    },
-    {
-      "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
deleted file mode 100644
index 846b45072..000000000
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "separator",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n      )\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Separator } from './Separator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
deleted file mode 100644
index 8e62490f3..000000000
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "sheet",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sidebar.json b/apps/www/src/public/registry/styles/default/sidebar.json
deleted file mode 100644
index 530437702..000000000
--- a/apps/www/src/public/registry/styles/default/sidebar.json
+++ /dev/null
@@ -1,125 +0,0 @@
-{
-  "name": "sidebar",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "Sheet.vue",
-    "SheetContent.vue",
-    "utils",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
-  ],
-  "files": [
-    {
-      "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/default/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/default/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/default/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
-    },
-    {
-      "name": "SidebarInset.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuBadge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/default/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/default/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/default/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/default/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubItem.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "SidebarRail.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n"
-    },
-    {
-      "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/default/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/default/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
deleted file mode 100644
index 019e04865..000000000
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "skeleton",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
deleted file mode 100644
index e352b927d..000000000
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "slider",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Slider } from './Slider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
deleted file mode 100644
index 3a164849b..000000000
--- a/apps/www/src/public/registry/styles/default/sonner.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "sonner",
-  "dependencies": [
-    "vue-sonner"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Sonner.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Toaster } from './Sonner.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/stepper.json b/apps/www/src/public/registry/styles/default/stepper.json
deleted file mode 100644
index 1f1d67b97..000000000
--- a/apps/www/src/public/registry/styles/default/stepper.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "stepper",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
-    },
-    {
-      "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
-    },
-    {
-      "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
-    },
-    {
-      "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
-    },
-    {
-      "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
-    },
-    {
-      "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
-    },
-    {
-      "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
deleted file mode 100644
index df60e70b6..000000000
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "switch",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Switch } from './Switch.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
deleted file mode 100644
index 90352697b..000000000
--- a/apps/www/src/public/registry/styles/default/table.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "table",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "TableBody.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
-    },
-    {
-      "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
-    },
-    {
-      "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
-    },
-    {
-      "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
-    },
-    {
-      "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
-    },
-    {
-      "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
-    },
-    {
-      "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
-    },
-    {
-      "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
deleted file mode 100644
index b7ea0e324..000000000
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tabs",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
-    },
-    {
-      "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
-    },
-    {
-      "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
-    },
-    {
-      "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
deleted file mode 100644
index d684f2a45..000000000
--- a/apps/www/src/public/registry/styles/default/tags-input.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "tags-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
-    },
-    {
-      "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
-    },
-    {
-      "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
-    },
-    {
-      "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
deleted file mode 100644
index 0f8ea3146..000000000
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "textarea",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Textarea } from './Textarea.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
deleted file mode 100644
index c4344b053..000000000
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "toast",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
-    },
-    {
-      "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
-    },
-    {
-      "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { X } from 'lucide-vue-next'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <X class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
-    },
-    {
-      "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
-    },
-    {
-      "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
-    },
-    {
-      "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
-    },
-    {
-      "name": "use-toast.ts",
-      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
deleted file mode 100644
index 59f7e53b9..000000000
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "toggle-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "toggle",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/default/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
deleted file mode 100644
index 7fcaf8370..000000000
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "toggle",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
deleted file mode 100644
index 35899e8f2..000000000
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tooltip",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
-    },
-    {
-      "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
-    },
-    {
-      "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
deleted file mode 100644
index cd58eca14..000000000
--- a/apps/www/src/public/registry/styles/default/v-calendar.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "v-calendar",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/index.json b/apps/www/src/public/registry/styles/index.json
deleted file mode 100644
index 2002ac50f..000000000
--- a/apps/www/src/public/registry/styles/index.json
+++ /dev/null
@@ -1,10 +0,0 @@
-[
-  {
-    "name": "default",
-    "label": "Default"
-  },
-  {
-    "name": "new-york",
-    "label": "New York"
-  }
-]
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
deleted file mode 100644
index a2de5bcf9..000000000
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "accordion",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
-    },
-    {
-      "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"delegatedProps\"\n    class=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n  >\n    <div :class=\"cn('pb-4 pt-0', props.class)\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
-    },
-    {
-      "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('border-b', props.class)\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
-    },
-    {
-      "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\">\n    <AccordionTrigger\n      v-bind=\"delegatedProps\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon\n          class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n        />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
deleted file mode 100644
index bb0026a33..000000000
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "alert-dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"forwarded\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"delegatedProps\" :class=\"cn(buttonVariants(), props.class)\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <AlertDialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogDescription\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogTitle\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-lg font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/alert.json b/apps/www/src/public/registry/styles/new-york/alert.json
deleted file mode 100644
index ccbc207cd..000000000
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "alert",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type AlertVariants, alertVariants } from '.'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: AlertVariants['variant']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class)\" role=\"alert\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', props.class)\">\n    <slot />\n  </h5>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/area-chart.json b/apps/www/src/public/registry/styles/new-york/area-chart.json
deleted file mode 100644
index 4cf4d8ab8..000000000
--- a/apps/www/src/public/registry/styles/new-york/area-chart.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "area-chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
deleted file mode 100644
index 0d50bc374..000000000
--- a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "aspect-ratio",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'reka-ui'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
deleted file mode 100644
index 2870289ac..000000000
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "name": "auto-form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "form",
-    "accordion",
-    "button",
-    "separator",
-    "checkbox",
-    "switch",
-    "calendar",
-    "popover",
-    "utils",
-    "label",
-    "radio-group",
-    "select",
-    "input",
-    "textarea"
-  ],
-  "files": [
-    {
-      "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport type { z, ZodAny } from 'zod'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport { Form } from '@/registry/new-york/ui/form'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { computed, toRefs } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'\n\nconst props = defineProps<{\n  schema: T\n  form?: FormContext<GenericObject>\n  fieldConfig?: Config<z.infer<T>>\n  dependencies?: Dependency<z.infer<T>>[]\n}>()\n\nconst emits = defineEmits<{\n  submit: [event: z.infer<T>]\n}>()\n\nconst { dependencies } = toRefs(props)\nprovideDependencies(dependencies)\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n  const baseSchema = getObjectFormSchema(props.schema)\n  const shape = baseSchema.shape\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: baseItem,\n    }\n  })\n  return val\n})\n\nconst fields = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}\n  for (const key in shapes.value) {\n    const shape = shapes.value[key]\n    val[key as keyof z.infer<T>] = {\n      shape,\n      config: props.fieldConfig?.[key] as ConfigItem,\n      fieldName: key,\n    }\n  }\n  return val\n})\n\nconst formComponent = computed(() => props.form ? 'form' : Form)\nconst formComponentProps = computed(() => {\n  if (props.form) {\n    return {\n      onSubmit: props.form.handleSubmit(val => emits('submit', val)),\n    }\n  }\n  else {\n    const formSchema = toTypedSchema(props.schema)\n    return {\n      keepValues: true,\n      validationSchema: formSchema,\n      onSubmit: (val: GenericObject) => emits('submit', val),\n    }\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"formComponent\"\n    v-bind=\"formComponentProps\"\n  >\n    <slot name=\"customAutoForm\" :fields=\"fields\">\n      <template v-for=\"(shape, key) of shapes\" :key=\"key\">\n        <slot\n          :shape=\"shape\"\n          :name=\"key.toString() as keyof z.infer<T>\"\n          :field-name=\"key.toString()\"\n          :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n        >\n          <AutoFormField\n            :config=\"fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem\"\n            :field-name=\"key.toString()\"\n            :shape=\"shape\"\n          />\n        </slot>\n      </template>\n    </slot>\n\n    <slot :shapes=\"shapes\" />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { computed } from 'vue'\nimport { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'\nimport useDependencies from './dependencies'\n\nconst props = defineProps<{\n  fieldName: string\n  shape: Shape\n  config?: ConfigItem | Config<U>\n}>()\n\nfunction isValidConfig(config: any): config is ConfigItem {\n  return !!config?.component\n}\n\nconst delegatedProps = computed(() => {\n  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))\n    return { schema: props.shape?.schema }\n  return undefined\n})\n\nconst { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)\n</script>\n\n<template>\n  <component\n    :is=\"isValidConfig(config)\n      ? typeof config.component === 'string'\n        ? INPUT_COMPONENTS[config.component!]\n        : config.component\n      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] \"\n    v-if=\"!isHidden\"\n    :field-name=\"fieldName\"\n    :label=\"shape.schema?.description\"\n    :required=\"isRequired || shape.required\"\n    :options=\"overrideOptions || shape.options\"\n    :disabled=\"isDisabled\"\n    :config=\"config\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldArray.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends z.ZodAny\">\nimport type { Config, ConfigItem } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport * as z from 'zod'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseType } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: z.ZodArray<T>\n  disabled?: boolean\n}>()\n\nfunction isZodArray(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodArray<any> {\n  return item instanceof z.ZodArray\n}\n\nfunction isZodDefault(\n  item: z.ZodArray<any> | z.ZodDefault<any>,\n): item is z.ZodDefault<any> {\n  return item instanceof z.ZodDefault\n}\n\nconst itemShape = computed(() => {\n  if (!props.schema)\n    return\n\n  const schema: z.ZodAny = isZodArray(props.schema)\n    ? props.schema._def.type\n    : isZodDefault(props.schema)\n    // @ts-expect-error missing schema\n      ? props.schema._def.innerType._def.type\n      : null\n\n  return {\n    type: getBaseType(schema),\n    schema,\n  }\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <FieldArray v-slot=\"{ fields, remove, push }\" as=\"section\" :name=\"fieldName\">\n    <slot v-bind=\"props\">\n      <Accordion type=\"multiple\" class=\"w-full\" collapsible :disabled=\"disabled\" as-child>\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <template v-for=\"(field, index) of fields\" :key=\"field.key\">\n                <div class=\"mb-4 p-1\">\n                  <AutoFormField\n                    :field-name=\"`${fieldName}[${index}]`\"\n                    :label=\"fieldName\"\n                    :shape=\"itemShape!\"\n                    :config=\"config as ConfigItem\"\n                  />\n\n                  <div class=\"!my-4 flex justify-end\">\n                    <Button\n                      type=\"button\"\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      @click=\"remove(index)\"\n                    >\n                      <TrashIcon :size=\"16\" />\n                    </Button>\n                  </div>\n                  <Separator v-if=\"!field.isLast\" />\n                </div>\n              </template>\n\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                class=\"mt-4 flex items-center\"\n                @click=\"push(null)\"\n              >\n                <PlusIcon class=\"mr-2\" :size=\"16\" />\n                Add\n              </Button>\n            </AccordionContent>\n\n            <FormMessage />\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </FieldArray>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :model-value=\"slotProps.componentField.modelValue\"\n              @update:model-value=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { cn } from '@/lib/utils'\n\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <div>\n            <Popover>\n              <PopoverTrigger as-child :disabled=\"disabled\">\n                <Button\n                  variant=\"outline\"\n                  :class=\"cn(\n                    'w-full justify-start text-left font-normal',\n                    !slotProps.componentField.modelValue && 'text-muted-foreground',\n                  )\"\n                >\n                  <CalendarIcon class=\"mr-2 h-4 w-4\" />\n                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent class=\"w-auto p-0\">\n                <Calendar initial-focus v-bind=\"slotProps.componentField\" />\n              </PopoverContent>\n            </Popover>\n          </div>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps & {\n  options?: string[]\n}>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <RadioGroup v-if=\"config?.component === 'radio'\" :disabled=\"disabled\" :orientation=\"'vertical'\" v-bind=\"{ ...slotProps.componentField }\">\n            <div v-for=\"(option, index) in options\" :key=\"option\" class=\"mb-2 flex items-center gap-3 space-y-0\">\n              <RadioGroupItem :id=\"`${option}-${index}`\" :value=\"option\" />\n              <Label :for=\"`${option}-${index}`\">{{ beautifyObjectName(option) }}</Label>\n            </div>\n          </RadioGroup>\n\n          <Select v-else :disabled=\"disabled\" v-bind=\"{ ...slotProps.componentField }\">\n            <SelectTrigger class=\"w-full\">\n              <SelectValue :placeholder=\"config?.inputProps?.placeholder\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"option in options\" :key=\"option\" :value=\"option\">\n                {{ beautifyObjectName(option) }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </slot>\n      </FormControl>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineProps<FieldProps>()\n\nconst inputFile = ref<File>()\nasync function parseFileAsString(file: File | undefined): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (file) {\n      const reader = new FileReader()\n      reader.onloadend = () => {\n        resolve(reader.result as string)\n      }\n      reader.onerror = (err) => {\n        reject(err)\n      }\n      reader.readAsDataURL(file)\n    }\n  })\n}\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input\n            v-if=\"!inputFile\"\n            type=\"file\"\n            v-bind=\"{ ...config?.inputProps }\"\n            :disabled=\"disabled\"\n            @change=\"async (ev: InputEvent) => {\n              const file = (ev.target as HTMLInputElement).files?.[0]\n              inputFile = file\n              const parsed = await parseFileAsString(file)\n              slotProps.componentField.onInput(parsed)\n            }\"\n          />\n          <div v-else class=\"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors\">\n            <p>{{ inputFile?.name }}</p>\n            <Button\n              :size=\"'icon'\"\n              :variant=\"'ghost'\"\n              class=\"h-[26px] w-[26px]\"\n              aria-label=\"Remove file\"\n              type=\"button\"\n              @click=\"() => {\n                inputFile = undefined\n                slotProps.componentField.onInput(undefined)\n              }\"\n            >\n              <TrashIcon />\n            </Button>\n          </div>\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\nconst inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem v-bind=\"$attrs\">\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <component\n            :is=\"inputComponent\"\n            type=\"text\"\n            v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\"\n            :disabled=\"disabled\"\n          />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\ndefineProps<FieldProps>()\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n        {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n      </AutoFormLabel>\n      <FormControl>\n        <slot v-bind=\"slotProps\">\n          <Input type=\"number\" v-bind=\"{ ...slotProps.componentField, ...config?.inputProps }\" :disabled=\"disabled\" />\n        </slot>\n      </FormControl>\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
-    },
-    {
-      "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\nimport { FormItem } from '@/registry/new-york/ui/form'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport { computed, provide } from 'vue'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\n\nconst props = defineProps<{\n  fieldName: string\n  required?: boolean\n  config?: Config<T>\n  schema?: ZodObject<T>\n  disabled?: boolean\n}>()\n\nconst shapes = computed(() => {\n  // @ts-expect-error ignore {} not assignable to object\n  const val: { [key in keyof T]: Shape } = {}\n\n  if (!props.schema)\n    return\n  const shape = getBaseSchema(props.schema)?.shape\n  if (!shape)\n    return\n  Object.keys(shape).forEach((name) => {\n    const item = shape[name] as ZodAny\n    const baseItem = getBaseSchema(item) as ZodAny\n    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined\n    if (!Array.isArray(options) && typeof options === 'object')\n      options = Object.values(options)\n\n    val[name as keyof T] = {\n      type: getBaseType(item),\n      default: getDefaultValueInZodStack(item),\n      options,\n      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),\n      schema: item,\n    }\n  })\n  return val\n})\n\nconst fieldContext = useField(props.fieldName)\n// @ts-expect-error ignore missing `id`\nprovide(FieldContextKey, fieldContext)\n</script>\n\n<template>\n  <section>\n    <slot v-bind=\"props\">\n      <Accordion type=\"single\" as-child class=\"w-full\" collapsible :disabled=\"disabled\">\n        <FormItem>\n          <AccordionItem :value=\"fieldName\" class=\"border-none\">\n            <AccordionTrigger>\n              <AutoFormLabel class=\"text-base\" :required=\"required\">\n                {{ schema?.description || beautifyObjectName(fieldName) }}\n              </AutoFormLabel>\n            </AccordionTrigger>\n            <AccordionContent class=\"p-1 space-y-5\">\n              <template v-for=\"(shape, key) in shapes\" :key=\"key\">\n                <AutoFormField\n                  :config=\"config?.[key as keyof typeof config] as ConfigItem\"\n                  :field-name=\"`${fieldName}.${key.toString()}`\"\n                  :label=\"key.toString()\"\n                  :shape=\"shape\"\n                />\n              </template>\n            </AccordionContent>\n          </AccordionItem>\n        </FormItem>\n      </Accordion>\n    </slot>\n  </section>\n</template>\n"
-    },
-    {
-      "name": "AutoFormLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { FormLabel } from '@/registry/new-york/ui/form'\n\ndefineProps<{\n  required?: boolean\n}>()\n</script>\n\n<template>\n  <FormLabel>\n    <slot />\n    <span v-if=\"required\" class=\"text-destructive\"> *</span>\n  </FormLabel>\n</template>\n"
-    },
-    {
-      "name": "constant.ts",
-      "content": "import type { InputComponents } from './interface'\nimport AutoFormFieldArray from './AutoFormFieldArray.vue'\nimport AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'\nimport AutoFormFieldDate from './AutoFormFieldDate.vue'\nimport AutoFormFieldEnum from './AutoFormFieldEnum.vue'\nimport AutoFormFieldFile from './AutoFormFieldFile.vue'\nimport AutoFormFieldInput from './AutoFormFieldInput.vue'\nimport AutoFormFieldNumber from './AutoFormFieldNumber.vue'\nimport AutoFormFieldObject from './AutoFormFieldObject.vue'\n\nexport const INPUT_COMPONENTS: InputComponents = {\n  date: AutoFormFieldDate,\n  select: AutoFormFieldEnum,\n  radio: AutoFormFieldEnum,\n  checkbox: AutoFormFieldBoolean,\n  switch: AutoFormFieldBoolean,\n  textarea: AutoFormFieldInput,\n  number: AutoFormFieldNumber,\n  string: AutoFormFieldInput,\n  file: AutoFormFieldFile,\n  array: AutoFormFieldArray,\n  object: AutoFormFieldObject,\n}\n\n/**\n * Define handlers for specific Zod types.\n * You can expand this object to support more types.\n */\nexport const DEFAULT_ZOD_HANDLERS: {\n  [key: string]: keyof typeof INPUT_COMPONENTS\n} = {\n  ZodString: 'string',\n  ZodBoolean: 'checkbox',\n  ZodDate: 'date',\n  ZodEnum: 'select',\n  ZodNativeEnum: 'select',\n  ZodNumber: 'number',\n  ZodArray: 'array',\n  ZodObject: 'object',\n}\n"
-    },
-    {
-      "name": "dependencies.ts",
-      "content": "import type { Ref } from 'vue'\nimport type * as z from 'zod'\nimport { createContext } from 'reka-ui'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { computed, ref, watch } from 'vue'\nimport { type Dependency, DependencyType, type EnumValues } from './interface'\nimport { getFromPath, getIndexIfArray } from './utils'\n\nexport const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')\n\nexport default function useDependencies(\n  fieldName: string,\n) {\n  const form = useFormValues()\n  // parsed test[0].age => test.age\n  const currentFieldName = fieldName.replace(/\\[\\d+\\]/g, '')\n  const currentFieldValue = useFieldValue<any>(fieldName)\n\n  if (!form)\n    throw new Error('useDependencies should be used within <AutoForm>')\n\n  const dependencies = injectDependencies()\n  const isDisabled = ref(false)\n  const isHidden = ref(false)\n  const isRequired = ref(false)\n  const overrideOptions = ref<EnumValues | undefined>()\n\n  const currentFieldDependencies = computed(() => dependencies.value?.filter(\n    dependency => dependency.targetField === currentFieldName,\n  ))\n\n  function getSourceValue(dep: Dependency<any>) {\n    const source = dep.sourceField as string\n    const index = getIndexIfArray(fieldName) ?? -1\n    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()\n    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()\n\n    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {\n      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()\n      return getFromPath(form.value, currentInitial.join('.') + sourceLast)\n    }\n\n    return getFromPath(form.value, source)\n  }\n\n  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))\n\n  const resetConditionState = () => {\n    isDisabled.value = false\n    isHidden.value = false\n    isRequired.value = false\n    overrideOptions.value = undefined\n  }\n\n  watch([sourceFieldValues, dependencies], () => {\n    resetConditionState()\n    currentFieldDependencies.value?.forEach((dep) => {\n      const sourceValue = getSourceValue(dep)\n      const conditionMet = dep.when(sourceValue, currentFieldValue.value)\n\n      switch (dep.type) {\n        case DependencyType.DISABLES:\n          if (conditionMet)\n            isDisabled.value = true\n\n          break\n        case DependencyType.REQUIRES:\n          if (conditionMet)\n            isRequired.value = true\n\n          break\n        case DependencyType.HIDES:\n          if (conditionMet)\n            isHidden.value = true\n\n          break\n        case DependencyType.SETS_OPTIONS:\n          if (conditionMet)\n            overrideOptions.value = dep.options\n\n          break\n      }\n    })\n  }, { immediate: true, deep: true })\n\n  return {\n    isDisabled,\n    isHidden,\n    isRequired,\n    overrideOptions,\n  }\n}\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\n\nexport { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'\nexport { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'\nexport { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'\nexport { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'\nexport { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\nexport type { Config, ConfigItem, FieldProps } from './interface'\nexport { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Component, InputHTMLAttributes } from 'vue'\nimport type { z, ZodAny } from 'zod'\nimport type { INPUT_COMPONENTS } from './constant'\n\nexport interface FieldProps {\n  fieldName: string\n  label?: string\n  required?: boolean\n  config?: ConfigItem\n  disabled?: boolean\n}\n\nexport interface Shape {\n  type: string\n  default?: any\n  required?: boolean\n  options?: string[]\n  schema?: ZodAny\n}\n\nexport interface InputComponents {\n  date: Component\n  select: Component\n  radio: Component\n  checkbox: Component\n  switch: Component\n  textarea: Component\n  number: Component\n  string: Component\n  file: Component\n  array: Component\n  object: Component\n};\n\nexport interface ConfigItem {\n  /** Value for the `FormLabel` */\n  label?: string\n  /** Value for the `FormDescription` */\n  description?: string\n  /** Pick which component to be rendered. */\n  component?: keyof typeof INPUT_COMPONENTS | Component\n  /** Hide `FormLabel`. */\n  hideLabel?: boolean\n  inputProps?: InputHTMLAttributes\n}\n\n// Define a type to unwrap an array\ntype UnwrapArray<T> = T extends (infer U)[] ? U : never\n\nexport type Config<SchemaType extends object> = {\n  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem\n  [Key in keyof SchemaType]?:\n  SchemaType[Key] extends any[]\n    ? UnwrapArray<Config<SchemaType[Key]>>\n    : SchemaType[Key] extends object\n      ? Config<SchemaType[Key]>\n      : ConfigItem;\n}\n\nexport enum DependencyType {\n  DISABLES,\n  REQUIRES,\n  HIDES,\n  SETS_OPTIONS,\n}\n\ninterface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {\n  sourceField: keyof SchemaType\n  type: DependencyType\n  targetField: keyof SchemaType\n  when: (sourceFieldValue: any, targetFieldValue: any) => boolean\n}\n\nexport type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  BaseDependency<SchemaType> & {\n    type:\n      | DependencyType.DISABLES\n      | DependencyType.REQUIRES\n      | DependencyType.HIDES\n  }\n\nexport type EnumValues = readonly [string, ...string[]]\n\nexport type OptionsDependency<\n  SchemaType extends z.infer<z.ZodObject<any, any>>,\n> = BaseDependency<SchemaType> & {\n  type: DependencyType.SETS_OPTIONS\n\n  // Partial array of values from sourceField that will trigger the dependency\n  options: EnumValues\n}\n\nexport type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =\n  | ValueDependency<SchemaType>\n  | OptionsDependency<SchemaType>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { z } from 'zod'\n\n// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.\nexport type ZodObjectOrWrapped =\n  | z.ZodObject<any, any>\n  | z.ZodEffects<z.ZodObject<any, any>>\n\n/**\n * Beautify a camelCase string.\n * e.g. \"myString\" -> \"My String\"\n */\nexport function beautifyObjectName(string: string) {\n  // Remove bracketed indices\n  // if numbers only return the string\n  let output = string.replace(/\\[\\d+\\]/g, '').replace(/([A-Z])/g, ' $1')\n  output = output.charAt(0).toUpperCase() + output.slice(1)\n  return output\n}\n\n/**\n * Parse string and extract the index\n * @param string\n * @returns index or undefined\n */\nexport function getIndexIfArray(string: string) {\n  const indexRegex = /\\[(\\d+)\\]/\n  // Match the index\n  const match = string.match(indexRegex)\n  // Extract the index (number)\n  const index = match ? Number.parseInt(match[1]) : undefined\n  return index\n}\n\n/**\n * Get the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseSchema<\n  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,\n>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {\n  if (!schema)\n    return null\n  if ('innerType' in schema._def)\n    return getBaseSchema(schema._def.innerType as ChildType)\n\n  if ('schema' in schema._def)\n    return getBaseSchema(schema._def.schema as ChildType)\n\n  return schema as ChildType\n}\n\n/**\n * Get the type name of the lowest level Zod type.\n * This will unpack optionals, refinements, etc.\n */\nexport function getBaseType(schema: z.ZodAny) {\n  const baseSchema = getBaseSchema(schema)\n  return baseSchema ? baseSchema._def.typeName : ''\n}\n\n/**\n * Search for a \"ZodDefault\" in the Zod stack and return its value.\n */\nexport function getDefaultValueInZodStack(schema: z.ZodAny): any {\n  const typedSchema = schema as unknown as z.ZodDefault<\n    z.ZodNumber | z.ZodString\n  >\n\n  if (typedSchema._def.typeName === 'ZodDefault')\n    return typedSchema._def.defaultValue()\n\n  if ('innerType' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      typedSchema._def.innerType as unknown as z.ZodAny,\n    )\n  }\n  if ('schema' in typedSchema._def) {\n    return getDefaultValueInZodStack(\n      (typedSchema._def as any).schema as z.ZodAny,\n    )\n  }\n\n  return undefined\n}\n\nexport function getObjectFormSchema(\n  schema: ZodObjectOrWrapped,\n): z.ZodObject<any, any> {\n  if (schema?._def.typeName === 'ZodEffects') {\n    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>\n    return getObjectFormSchema(typedSchema._def.schema)\n  }\n  return schema as z.ZodObject<any, any>\n}\n\nfunction isIndex(value: unknown): value is number {\n  return Number(value) >= 0\n}\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n */\nexport function normalizeFormPath(path: string): string {\n  const pathArr = path.split('.')\n  if (!pathArr.length)\n    return ''\n\n  let fullPath = String(pathArr[0])\n  for (let i = 1; i < pathArr.length; i++) {\n    if (isIndex(pathArr[i])) {\n      fullPath += `[${pathArr[i]}]`\n      continue\n    }\n\n    fullPath += `.${pathArr[i]}`\n  }\n\n  return fullPath\n}\n\ntype NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }\n/**\n * Checks if the path opted out of nested fields using `[fieldName]` syntax\n */\nexport function isNotNestedPath(path: string) {\n  return /^\\[.+\\]$/.test(path)\n}\nfunction isObject(obj: unknown): obj is Record<string, unknown> {\n  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)\n}\nfunction isContainerValue(value: unknown): value is Record<string, unknown> {\n  return isObject(value) || Array.isArray(value)\n}\nfunction cleanupNonNestedPath(path: string) {\n  if (isNotNestedPath(path))\n    return path.replace(/\\[|\\]/g, '')\n\n  return path\n}\n\n/**\n * Gets a nested property value from an object\n */\nexport function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback\nexport function getFromPath<TValue = unknown, TFallback = TValue>(\n  object: NestedRecord | undefined,\n  path: string,\n  fallback?: TFallback,\n): TValue | TFallback | undefined {\n  if (!object)\n    return fallback\n\n  if (isNotNestedPath(path))\n    return object[cleanupNonNestedPath(path)] as TValue | undefined\n\n  const resolvedValue = (path || '')\n    .split(/\\.|\\[(\\d+)\\]/)\n    .filter(Boolean)\n    .reduce((acc, propKey) => {\n      if (isContainerValue(acc) && propKey in acc)\n        return acc[propKey]\n\n      return fallback\n    }, object as unknown)\n\n  return resolvedValue as TValue | undefined\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
deleted file mode 100644
index 5af79a8a6..000000000
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "avatar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { AvatarRoot } from 'reka-ui'\nimport { avatarVariant, type AvatarVariants } from '.'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  size?: AvatarVariants['size']\n  shape?: AvatarVariants['shape']\n}>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
-    },
-    {
-      "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
-    },
-    {
-      "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'reka-ui'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n\nexport type AvatarVariants = VariantProps<typeof avatarVariant>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/badge.json b/apps/www/src/public/registry/styles/new-york/badge.json
deleted file mode 100644
index e3de8c247..000000000
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "badge",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { type BadgeVariants, badgeVariants } from '.'\n\nconst props = defineProps<{\n  variant?: BadgeVariants['variant']\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
deleted file mode 100644
index 288ef1069..000000000
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "breadcrumb",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Breadcrumb.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n    <slot />\n  </nav>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <DotsHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbList.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n  >\n    <slot />\n  </ol>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbPage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', props.class)\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/button.json b/apps/www/src/public/registry/styles/new-york/button.json
deleted file mode 100644
index ffa545282..000000000
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "button",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type ButtonVariants, buttonVariants } from '.'\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
deleted file mode 100644
index abecc5d9d..000000000
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\n\nconst props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <CalendarHeader>\n      <CalendarPrevButton />\n      <CalendarHeading />\n      <CalendarNextButton />\n    </CalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody>\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCell\n    :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 [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selected\n      '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',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </CalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridBodyProps>()\n</script>\n\n<template>\n  <CalendarGridBody v-bind=\"props\">\n    <slot />\n  </CalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <CalendarGridHead v-bind=\"props\">\n    <slot />\n  </CalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeadCell :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </CalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </CalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarNext>\n</template>\n"
-    },
-    {
-      "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <CalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </CalendarPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nexport { default as CalendarCell } from './CalendarCell.vue'\nexport { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'\nexport { default as CalendarGrid } from './CalendarGrid.vue'\nexport { default as CalendarGridBody } from './CalendarGridBody.vue'\nexport { default as CalendarGridHead } from './CalendarGridHead.vue'\nexport { default as CalendarGridRow } from './CalendarGridRow.vue'\nexport { default as CalendarHeadCell } from './CalendarHeadCell.vue'\nexport { default as CalendarHeader } from './CalendarHeader.vue'\nexport { default as CalendarHeading } from './CalendarHeading.vue'\nexport { default as CalendarNextButton } from './CalendarNextButton.vue'\nexport { default as CalendarPrevButton } from './CalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/card.json b/apps/www/src/public/registry/styles/new-york/card.json
deleted file mode 100644
index 050b6fdc0..000000000
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-xl border bg-card text-card-foreground shadow',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "CardFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex items-center p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('font-semibold leading-none tracking-tight', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardFooter } from './CardFooter.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
deleted file mode 100644
index 8a8baaf59..000000000
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "carousel",
-  "dependencies": [
-    "embla-carousel-vue",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useProvideCarousel } from './useCarousel'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n  orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)\n\ndefineExpose({\n  canScrollNext,\n  canScrollPrev,\n  carouselApi,\n  carouselRef,\n  orientation,\n  scrollNext,\n  scrollPrev,\n})\n\nfunction onKeyDown(event: KeyboardEvent) {\n  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n  if (event.key === prevKey) {\n    event.preventDefault()\n    scrollPrev()\n\n    return\n  }\n\n  if (event.key === nextKey) {\n    event.preventDefault()\n    scrollNext()\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('relative', props.class)\"\n    role=\"region\"\n    aria-roledescription=\"carousel\"\n    tabindex=\"0\"\n    @keydown=\"onKeyDown\"\n  >\n    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n  <div ref=\"carouselRef\" class=\"overflow-hidden\">\n    <div\n      :class=\"\n        cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          props.class,\n        )\"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-roledescription=\"slide\"\n    :class=\"cn(\n      'min-w-0 shrink-0 grow-0 basis-full',\n      orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CarouselNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollNext\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-right-12 top-1/2 -translate-y-1/2'\n        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollNext\"\n  >\n    <slot>\n      <ArrowRightIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Next Slide</span>\n    </slot>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n  <Button\n    :disabled=\"!canScrollPrev\"\n    :class=\"cn(\n      'touch-manipulation absolute h-8 w-8 rounded-full p-0',\n      orientation === 'horizontal'\n        ? '-left-12 top-1/2 -translate-y-1/2'\n        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      props.class,\n    )\"\n    variant=\"outline\"\n    @click=\"scrollPrev\"\n  >\n    <slot>\n      <ArrowLeftIcon class=\"h-4 w-4 text-current\" />\n      <span class=\"sr-only\">Previous Slide</span>\n    </slot>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n\nexport { useCarousel } from './useCarousel'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-vue'\nimport type { HTMLAttributes, UnwrapRef } from 'vue'\n\ntype CarouselApi = EmblaCarouselVueType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\nexport type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>\n\nexport interface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n  (e: 'init-api', payload: UnwrapRefCarouselApi): void\n}\n\nexport interface WithClassAsProps {\n  class?: HTMLAttributes['class']\n}\n"
-    },
-    {
-      "name": "useCarousel.ts",
-      "content": "import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\nimport { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n  ({\n    opts,\n    orientation,\n    plugins,\n  }: CarouselProps, emits: CarouselEmits) => {\n    const [emblaNode, emblaApi] = emblaCarouselVue({\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    }, plugins)\n\n    function scrollPrev() {\n      emblaApi.value?.scrollPrev()\n    }\n    function scrollNext() {\n      emblaApi.value?.scrollNext()\n    }\n\n    const canScrollNext = ref(false)\n    const canScrollPrev = ref(false)\n\n    function onSelect(api: CarouselApi) {\n      canScrollNext.value = api?.canScrollNext() || false\n      canScrollPrev.value = api?.canScrollPrev() || false\n    }\n\n    onMounted(() => {\n      if (!emblaApi.value)\n        return\n\n      emblaApi.value?.on('init', onSelect)\n      emblaApi.value?.on('reInit', onSelect)\n      emblaApi.value?.on('select', onSelect)\n\n      emits('init-api', emblaApi.value)\n    })\n\n    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n  },\n)\n\nfunction useCarousel() {\n  const carouselState = useInjectCarousel()\n\n  if (!carouselState)\n    throw new Error('useCarousel must be used within a <Carousel />')\n\n  return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-area.json b/apps/www/src/public/registry/styles/new-york/chart-area.json
deleted file mode 100644
index da202d6bf..000000000
--- a/apps/www/src/public/registry/styles/new-york/chart-area.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-area",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "AreaChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'reka-ui'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst chartRef = useId()\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`${chartRef}-color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AreaChart } from './AreaChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
deleted file mode 100644
index 2a2135bb6..000000000
--- a/apps/www/src/public/registry/styles/new-york/chart-bar.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-bar",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "BarChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as BarChart } from './BarChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-donut.json b/apps/www/src/public/registry/styles/new-york/chart-donut.json
deleted file mode 100644
index ac2b862eb..000000000
--- a/apps/www/src/public/registry/styles/new-york/chart-donut.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-donut",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DonutChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { Donut } from '@unovis/ts'\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DonutChart } from './DonutChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-line.json b/apps/www/src/public/registry/styles/new-york/chart-line.json
deleted file mode 100644
index bdd2c4047..000000000
--- a/apps/www/src/public/registry/styles/new-york/chart-line.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "chart-line",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "chart",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "LineChart.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/chart.json b/apps/www/src/public/registry/styles/new-york/chart.json
deleted file mode 100644
index 4b41bc730..000000000
--- a/apps/www/src/public/registry/styles/new-york/chart.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "chart",
-  "dependencies": [
-    "@unovis/vue",
-    "@unovis/ts"
-  ],
-  "registryDependencies": [
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
-    },
-    {
-      "name": "ChartLegend.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { BulletLegend } from '@unovis/ts'\nimport { VisBulletLegend } from '@unovis/vue'\nimport { nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { VisTooltip } from '@unovis/vue'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "ChartTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ChartCrosshair } from './ChartCrosshair.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartTooltip } from './ChartTooltip.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
-    },
-    {
-      "name": "interface.ts",
-      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
deleted file mode 100644
index 210f81097..000000000
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "checkbox",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         props.class)\"\n  >\n    <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n      <slot>\n        <CheckIcon class=\"h-4 w-4\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
deleted file mode 100644
index 1f6da7fca..000000000
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "collapsible",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'\nimport { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"forwarded\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
deleted file mode 100644
index 1265e32eb..000000000
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "name": "command",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "dialog"
-  ],
-  "files": [
-    {
-      "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
-    },
-    {
-      "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui'\nimport { Dialog, DialogContent } from '@/registry/new-york/ui/dialog'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport Command from './Command.vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
-    },
-    {
-      "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n"
-    },
-    {
-      "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
-    },
-    {
-      "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n"
-    },
-    {
-      "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n"
-    },
-    {
-      "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n"
-    },
-    {
-      "name": "CommandShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
deleted file mode 100644
index df3d24194..000000000
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "context-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class,\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-border', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
deleted file mode 100644
index d5b5fd6aa..000000000
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "dialog",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "DialogClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n          props.class,\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"forwardedProps\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    >\n      <DialogContent\n        :class=\"\n          cn(\n            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n            props.class,\n          )\n        \"\n        v-bind=\"forwarded\"\n        @pointer-down-outside=\"(event) => {\n          const originalEvent = event.detail.originalEvent;\n          const target = originalEvent.target as HTMLElement;\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault();\n          }\n        }\"\n      >\n        <slot />\n\n        <DialogClose\n          class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n        >\n          <Cross2Icon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      </DialogContent>\n    </DialogOverlay>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'text-lg font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/drawer.json b/apps/www/src/public/registry/styles/new-york/drawer.json
deleted file mode 100644
index 3b6f992a5..000000000
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "drawer",
-  "dependencies": [
-    "vaul-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerRoot } from 'vaul-vue'\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n})\n\nconst emits = defineEmits<DrawerRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerRoot v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n"
-    },
-    {
-      "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useForwardPropsEmits } from 'reka-ui'\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\n\nconst props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerContent\n      v-bind=\"forwarded\" :class=\"cn(\n        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',\n        props.class,\n      )\"\n    >\n      <div class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"
-    },
-    {
-      "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerDescription } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerDescription v-bind=\"delegatedProps\" :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </DrawerDescription>\n</template>\n"
-    },
-    {
-      "name": "DrawerFooter.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('mt-auto flex flex-col gap-2 p-4', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HtmlHTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HtmlHTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerOverlay v-bind=\"delegatedProps\" :class=\"cn('fixed inset-0 z-50 bg-black/80', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\nimport { DrawerTitle } from 'vaul-vue'\nimport { computed, type HtmlHTMLAttributes } from 'vue'\n\nconst props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DrawerTitle v-bind=\"delegatedProps\" :class=\"cn('text-lg font-semibold leading-none tracking-tight', props.class)\">\n    <slot />\n  </DrawerTitle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Drawer } from './Drawer.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
deleted file mode 100644
index a7ec8f0c7..000000000
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "dropdown-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<DropdownMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    :class=\"cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"forwardedProps\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as DropdownMenu } from './DropdownMenu.vue'\n\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { DropdownMenuPortal } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
deleted file mode 100644
index 8073f094f..000000000
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "form",
-  "dependencies": [
-    "vee-validate",
-    "@vee-validate/zod",
-    "zod"
-  ],
-  "registryDependencies": [
-    "utils",
-    "label"
-  ],
-  "files": [
-    {
-      "name": "FormControl.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n  <Slot\n    :id=\"formItemId\"\n    :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n    :aria-invalid=\"!!error\"\n  >\n    <slot />\n  </Slot>\n</template>\n"
-    },
-    {
-      "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n  >\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "FormItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { useId } from 'reka-ui'\nimport { type HTMLAttributes, provide } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { cn } from '@/lib/utils'\nimport { useFormField } from './useFormField'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      props.class,\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "FormMessage.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n  <ErrorMessage\n    :id=\"formMessageId\"\n    as=\"p\"\n    :name=\"toValue(name)\"\n    class=\"text-[0.8rem] font-medium text-destructive\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as FormControl } from './FormControl.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nexport { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'\n"
-    },
-    {
-      "name": "injectionKeys.ts",
-      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
-    },
-    {
-      "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  }\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/hover-card.json b/apps/www/src/public/registry/styles/new-york/hover-card.json
deleted file mode 100644
index 934f0e208..000000000
--- a/apps/www/src/public/registry/styles/new-york/hover-card.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "hover-card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<HoverCardRootProps>()\nconst emits = defineEmits<HoverCardRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"forwarded\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
-    },
-    {
-      "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    sideOffset: 4,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
-    },
-    {
-      "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/input.json b/apps/www/src/public/registry/styles/new-york/input.json
deleted file mode 100644
index d1c59084e..000000000
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "input",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n  class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\">\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Input } from './Input.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
deleted file mode 100644
index 35db08b24..000000000
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "label",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Label, type LabelProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Label\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Label } from './Label.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
deleted file mode 100644
index 39fd9e614..000000000
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "name": "menubar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
-    },
-    {
-      "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarCheckboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'reka-ui'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { MenubarLabel, type MenubarLabelProps } from 'reka-ui'\n\nconst props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
-    },
-    {
-      "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'reka-ui'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<MenubarRadioItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex cursor-default 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',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </MenubarItemIndicator>\n    </span>\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-muted', props.class)\" v-bind=\"forwardedProps\" />\n</template>\n"
-    },
-    {
-      "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <MenubarSub v-bind=\"forwarded\">\n    <slot />\n  </MenubarSub>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarSubTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n      inset && 'pl-8',\n      props.class,\n    )\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </MenubarSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
deleted file mode 100644
index d1eabda6b..000000000
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "navigation-menu",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    :class=\"cn('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', props.class)\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'reka-ui'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center gap-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { navigationMenuTriggerStyle } from '.'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/number-field.json b/apps/www/src/public/registry/styles/new-york/number-field.json
deleted file mode 100644
index 0c97cbfee..000000000
--- a/apps/www/src/public/registry/styles/new-york/number-field.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "number-field",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NumberField.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <NumberFieldRoot v-bind=\"forwarded\" :class=\"cn('grid gap-1.5', props.class)\">\n    <slot />\n  </NumberFieldRoot>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Minus } from 'lucide-vue-next'\nimport { NumberFieldDecrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Plus } from 'lucide-vue-next'\nimport { NumberFieldIncrement, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" v-bind=\"forwarded\" :class=\"cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
-    },
-    {
-      "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { NumberFieldInput } from 'reka-ui'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
deleted file mode 100644
index e1965290a..000000000
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "pagination",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "PaginationEllipsis.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationEllipsis v-bind=\"delegatedProps\" :class=\"cn('w-9 h-9 flex items-center justify-center', props.class)\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
-    },
-    {
-      "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
-    },
-    {
-      "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport { PaginationLast, type PaginationLastProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationLast v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
-    },
-    {
-      "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { PaginationNext, type PaginationNextProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationNext v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
-    },
-    {
-      "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {\n  asChild: true,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"delegatedProps\">\n    <Button :class=\"cn('w-9 h-9 p-0', props.class)\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\nexport {\n  PaginationList,\n  PaginationListItem,\n  PaginationRoot as Pagination,\n} from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/pin-input.json b/apps/www/src/public/registry/styles/new-york/pin-input.json
deleted file mode 100644
index 868a7c03e..000000000
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "pin-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: () => [],\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
-    },
-    {
-      "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DashIcon } from '@radix-icons/vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps>()\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/popover.json b/apps/www/src/public/registry/styles/new-york/popover.json
deleted file mode 100644
index de247445c..000000000
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "popover",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"forwarded\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
-    },
-    {
-      "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    align: 'center',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
-    },
-    {
-      "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { PopoverAnchor } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/progress.json b/apps/www/src/public/registry/styles/new-york/progress.json
deleted file mode 100644
index e9902e740..000000000
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "progress",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    modelValue: 0,\n  },\n)\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ProgressRoot\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        props.class,\n      )\n    \"\n  >\n    <ProgressIndicator\n      class=\"h-full w-full flex-1 bg-primary transition-all\"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Progress } from './Progress.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
deleted file mode 100644
index 75a89969b..000000000
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "radio-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RadioGroupRoot\n    :class=\"cn('grid gap-2', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/range-calendar.json b/apps/www/src/public/registry/styles/new-york/range-calendar.json
deleted file mode 100644
index fb316ce63..000000000
--- a/apps/www/src/public/registry/styles/new-york/range-calendar.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-  "name": "range-calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\n\nconst props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<RangeCalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ grid, weekDays }\"\n    :class=\"cn('p-3', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <RangeCalendarHeader>\n      <RangeCalendarPrevButton />\n      <RangeCalendarHeading />\n      <RangeCalendarNextButton />\n    </RangeCalendarHeader>\n\n    <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <RangeCalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <RangeCalendarGridHead>\n          <RangeCalendarGridRow>\n            <RangeCalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </RangeCalendarHeadCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridHead>\n        <RangeCalendarGridBody>\n          <RangeCalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <RangeCalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <RangeCalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </RangeCalendarCell>\n          </RangeCalendarGridRow>\n        </RangeCalendarGridBody>\n      </RangeCalendarGrid>\n    </div>\n  </RangeCalendarRoot>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCell\n    :class=\"cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarCellTrigger\n    :class=\"cn(\n      buttonVariants({ variant: 'ghost' }),\n      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',\n      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',\n      // Selection Start\n      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',\n      // Selection End\n      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',\n      // Outside months\n      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',\n      // Disabled\n      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',\n      // Unavailable\n      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarCellTrigger>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGrid\n    :class=\"cn('w-full border-collapse space-y-1', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarGrid>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridBody.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridBodyProps>()\n</script>\n\n<template>\n  <RangeCalendarGridBody v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridBody>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridHead.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui'\n\nconst props = defineProps<RangeCalendarGridHeadProps>()\n</script>\n\n<template>\n  <RangeCalendarGridHead v-bind=\"props\">\n    <slot />\n  </RangeCalendarGridHead>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarGridRow :class=\"cn('flex', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarGridRow>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeadCell\n    :class=\"cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </RangeCalendarHeadCell>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeader :class=\"cn('relative flex w-full items-center justify-between pt-1', props.class)\" v-bind=\"forwardedProps\">\n    <slot />\n  </RangeCalendarHeader>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@/lib/utils'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarHeading\n    v-slot=\"{ headingValue }\"\n    :class=\"cn('text-sm font-medium', props.class)\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot :heading-value>\n      {{ headingValue }}\n    </slot>\n  </RangeCalendarHeading>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarNext\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronRightIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarNext>\n</template>\n"
-    },
-    {
-      "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RangeCalendarPrev\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot>\n      <ChevronLeftIcon class=\"h-4 w-4\" />\n    </slot>\n  </RangeCalendarPrev>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RangeCalendar } from './RangeCalendar.vue'\nexport { default as RangeCalendarCell } from './RangeCalendarCell.vue'\nexport { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'\nexport { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'\nexport { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'\nexport { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'\nexport { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'\nexport { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'\nexport { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'\nexport { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'\nexport { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'\nexport { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/resizable.json b/apps/www/src/public/registry/styles/new-york/resizable.json
deleted file mode 100644
index 301cbf99b..000000000
--- a/apps/www/src/public/registry/styles/new-york/resizable.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "resizable",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
-    },
-    {
-      "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ResizableHandle } from './ResizableHandle.vue'\nexport { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { SplitterPanel as ResizablePanel } from 'reka-ui'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
deleted file mode 100644
index 8c2f5b080..000000000
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "scroll-area",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaRoot v-bind=\"delegatedProps\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
-    },
-    {
-      "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-px',\n         orientation === 'horizontal'\n           && 'h-2.5 flex-col border-t border-t-transparent p-px',\n         props.class)\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
deleted file mode 100644
index 002a4dcbc..000000000
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "select",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui'\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
-    },
-    {
-      "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
-    },
-    {
-      "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </SelectGroup>\n</template>\n"
-    },
-    {
-      "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CheckIcon } from '@radix-icons/vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
-    },
-    {
-      "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
-    },
-    {
-      "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronDownIcon />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
-    },
-    {
-      "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton v-bind=\"forwardedProps\" :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\">\n    <slot>\n      <ChevronUpIcon />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
-    },
-    {
-      "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <SelectSeparator v-bind=\"delegatedProps\" :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
-    },
-    {
-      "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectValue } from './SelectValue.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
deleted file mode 100644
index 73551fd3c..000000000
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "separator",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Separator, type SeparatorProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<\n  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border relative',\n        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n        props.class,\n      )\n    \"\n  >\n    <span\n      v-if=\"props.label\"\n      :class=\"\n        cn(\n          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',\n          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n        )\n      \"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Separator } from './Separator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
deleted file mode 100644
index 4a3a0f20a..000000000
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "name": "sheet",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DialogRoot v-bind=\"forwarded\">\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'reka-ui'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type SheetVariants, sheetVariants } from '.'\n\ninterface SheetContentProps extends DialogContentProps {\n  class?: HTMLAttributes['class']\n  side?: SheetVariants['side']\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, side, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), props.class)\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"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-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogDescription, type DialogDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { DialogTitle, type DialogTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'reka-ui'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\n\nexport const sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\nexport type SheetVariants = VariantProps<typeof sheetVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sidebar.json b/apps/www/src/public/registry/styles/new-york/sidebar.json
deleted file mode 100644
index 4823d5402..000000000
--- a/apps/www/src/public/registry/styles/new-york/sidebar.json
+++ /dev/null
@@ -1,125 +0,0 @@
-{
-  "name": "sidebar",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "Sheet.vue",
-    "SheetContent.vue",
-    "utils",
-    "Input.vue",
-    "Tooltip.vue",
-    "TooltipContent.vue",
-    "TooltipTrigger.vue",
-    "Skeleton.vue",
-    "Separator.vue",
-    "Button.vue"
-  ],
-  "files": [
-    {
-      "name": "Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { cn } from '@/lib/utils'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-action\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarGroupLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = defineProps<PrimitiveProps & {\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"group-label\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(\n      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n      props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Input from '@/registry/new-york/ui/input/Input.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Input\n    data-sidebar=\"input\"\n    :class=\"cn(\n      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Input>\n</template>\n"
-    },
-    {
-      "name": "SidebarInset.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <main\n    :class=\"cn(\n      'relative flex min-h-svh flex-1 flex-col bg-background',\n      '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',\n      props.class,\n    )\"\n  >\n    <slot />\n  </main>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  showOnHover?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-action\"\n    :class=\"cn(\n      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n      // Increases the hit area of the button on mobile.\n      'after:absolute after:-inset-2 after:md:hidden',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      showOnHover\n        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n      props.class,\n    )\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuBadge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',\n      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n      'peer-data-[size=sm]/menu-button:top-1',\n      'peer-data-[size=default]/menu-button:top-1.5',\n      'peer-data-[size=lg]/menu-button:top-2.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Tooltip from '@/registry/new-york/ui/tooltip/Tooltip.vue'\nimport TooltipContent from '@/registry/new-york/ui/tooltip/TooltipContent.vue'\nimport TooltipTrigger from '@/registry/new-york/ui/tooltip/TooltipTrigger.vue'\nimport { type Component, computed } from 'vue'\nimport SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'\nimport { useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string | Component\n}>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n\nconst { isMobile, state } = useSidebar()\n\nconst delegatedProps = computed(() => {\n  const { tooltip, ...delegated } = props\n  return delegated\n})\n</script>\n\n<template>\n  <SidebarMenuButtonChild v-if=\"!tooltip\" v-bind=\"{ ...delegatedProps, ...$attrs }\">\n    <slot />\n  </SidebarMenuButtonChild>\n\n  <Tooltip v-else>\n    <TooltipTrigger as-child>\n      <SidebarMenuButtonChild v-bind=\"{ ...delegatedProps, ...$attrs }\">\n        <slot />\n      </SidebarMenuButtonChild>\n    </TooltipTrigger>\n    <TooltipContent\n      side=\"right\"\n      align=\"center\"\n      :hidden=\"state !== 'collapsed' || isMobile\"\n    >\n      <template v-if=\"typeof tooltip === 'string'\">\n        {{ tooltip }}\n      </template>\n      <component :is=\"tooltip\" v-else />\n    </TooltipContent>\n  </Tooltip>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuButtonChild.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  variant?: SidebarMenuButtonVariants['variant']\n  size?: SidebarMenuButtonVariants['size']\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-button\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(sidebarMenuButtonVariants({ variant, size }), props.class)\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <li\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSkeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport Skeleton from '@/registry/new-york/ui/skeleton/Skeleton.vue'\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n  showIcon?: boolean\n  class?: HTMLAttributes['class']\n}>()\n\nconst width = computed(() => {\n  return `${Math.floor(Math.random() * 40) + 50}%`\n})\n</script>\n\n<template>\n  <div\n    data-sidebar=\"menu-skeleton\"\n    :class=\"cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)\"\n  >\n    <Skeleton\n      v-if=\"showIcon\"\n      class=\"size-4 rounded-md\"\n      data-sidebar=\"menu-skeleton-icon\"\n    />\n\n    <Skeleton\n      class=\"h-4 flex-1 max-w-[--skeleton-width]\"\n      data-sidebar=\"menu-skeleton-text\"\n      :style=\"{ '--skeleton-width': width }\"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <ul\n    data-sidebar=\"menu-badge\"\n    :class=\"cn(\n      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </ul>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  size?: 'sm' | 'md'\n  isActive?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  as: 'a',\n  size: 'md',\n})\n</script>\n\n<template>\n  <Primitive\n    data-sidebar=\"menu-sub-button\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :data-size=\"size\"\n    :data-active=\"isActive\"\n    :class=\"cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      props.class,\n    )\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
-    },
-    {
-      "name": "SidebarMenuSubItem.vue",
-      "content": "<script setup lang=\"ts\">\n</script>\n\n<template>\n  <li>\n    <slot />\n  </li>\n</template>\n"
-    },
-    {
-      "name": "SidebarProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'\nimport { TooltipProvider } from 'reka-ui'\nimport { computed, type HTMLAttributes, type Ref, ref } from 'vue'\nimport { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'\n\nconst props = withDefaults(defineProps<{\n  defaultOpen?: boolean\n  open?: boolean\n  class?: HTMLAttributes['class']\n}>(), {\n  defaultOpen: true,\n  open: undefined,\n})\n\nconst emits = defineEmits<{\n  'update:open': [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\nconst openMobile = ref(false)\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen ?? false,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nfunction setOpen(value: boolean) {\n  open.value = value // emits('update:open', value)\n\n  // This sets the cookie to keep the sidebar state.\n  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\n// Helper to toggle the sidebar.\nfunction toggleSidebar() {\n  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)\n}\n\nuseEventListener('keydown', (event: KeyboardEvent) => {\n  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    toggleSidebar()\n  }\n})\n\n// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n// This makes it easier to style the sidebar with Tailwind classes.\nconst state = computed(() => open.value ? 'expanded' : 'collapsed')\n\nprovideSidebarContext({\n  state,\n  open,\n  setOpen,\n  isMobile,\n  openMobile,\n  setOpenMobile,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"0\">\n    <div\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH,\n        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      }\"\n      :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)\"\n    >\n      <slot />\n    </div>\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "SidebarRail.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-sidebar=\"rail\"\n    aria-label=\"Toggle Sidebar\"\n    :tabindex=\"-1\"\n    title=\"Toggle Sidebar\"\n    :class=\"cn(\n      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      props.class,\n    )\"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n"
-    },
-    {
-      "name": "SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Separator from '@/registry/new-york/ui/separator/Separator.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n"
-    },
-    {
-      "name": "SidebarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport Button from '@/registry/new-york/ui/button/Button.vue'\nimport { cn } from '@/lib/utils'\nimport { PanelLeft } from 'lucide-vue-next'\nimport { useSidebar } from './utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-sidebar=\"trigger\"\n    variant=\"ghost\"\n    size=\"icon\"\n    :class=\"cn('h-7 w-7', props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeft />\n    <span class=\"sr-only\">Toggle Sidebar</span>\n  </Button>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n"
-    },
-    {
-      "name": "utils.ts",
-      "content": "import type { ComputedRef, Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar:state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport const [useSidebar, provideSidebarContext] = createContext<{\n  state: ComputedRef<'expanded' | 'collapsed'>\n  open: Ref<boolean>\n  setOpen: (value: boolean) => void\n  isMobile: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}>('Sidebar')\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/skeleton.json b/apps/www/src/public/registry/styles/new-york/skeleton.json
deleted file mode 100644
index ceb9997da..000000000
--- a/apps/www/src/public/registry/styles/new-york/skeleton.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "skeleton",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-primary/10', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
deleted file mode 100644
index 2ee05cbe1..000000000
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "slider",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Slider } from './Slider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
deleted file mode 100644
index 3a164849b..000000000
--- a/apps/www/src/public/registry/styles/new-york/sonner.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "sonner",
-  "dependencies": [
-    "vue-sonner"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "Sonner.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Toaster as Sonner, type ToasterProps } from 'vue-sonner'\n\nconst props = defineProps<ToasterProps>()\n</script>\n\n<template>\n  <Sonner\n    class=\"toaster group\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      classes: {\n        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',\n        description: 'group-[.toast]:text-muted-foreground',\n        actionButton:\n          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n        cancelButton:\n          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n      },\n    }\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Toaster } from './Sonner.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/stepper.json b/apps/www/src/public/registry/styles/new-york/stepper.json
deleted file mode 100644
index 9906bd6bc..000000000
--- a/apps/www/src/public/registry/styles/new-york/stepper.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "stepper",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperRootEmits, StepperRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperRoot, useForwardPropsEmits } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<StepperRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"slotProps\"\n    :class=\"cn(\n      'flex gap-2',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperRoot>\n</template>\n"
-    },
-    {
-      "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperDescriptionProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperDescription, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperDescription v-slot=\"slotProps\" v-bind=\"forwarded\" :class=\"cn('text-xs text-muted-foreground', props.class)\">\n    <slot v-bind=\"slotProps\" />\n  </StepperDescription>\n</template>\n"
-    },
-    {
-      "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperIndicatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperIndicator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperIndicator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',\n      // Disabled\n      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',\n      // Active\n      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',\n      // Completed\n      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </StepperIndicator>\n</template>\n"
-    },
-    {
-      "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperItem, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperItem\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </StepperItem>\n</template>\n"
-    },
-    {
-      "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperSeparator, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperSeparator\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'bg-muted',\n      // Disabled\n      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',\n      // Completed\n      'group-data-[state=completed]:bg-accent-foreground',\n      props.class,\n    )\"\n  />\n</template>\n"
-    },
-    {
-      "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTitleProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTitle, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTitle v-bind=\"forwarded\" :class=\"cn('text-md font-semibold whitespace-nowrap', props.class)\">\n    <slot />\n  </StepperTitle>\n</template>\n"
-    },
-    {
-      "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { StepperTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { StepperTrigger, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <StepperTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)\"\n  >\n    <slot />\n  </StepperTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
deleted file mode 100644
index a01e27638..000000000
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "switch",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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',\n      props.class,\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')\"\n    >\n      <slot name=\"thumb\" />\n    </SwitchThumb>\n  </SwitchRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Switch } from './Switch.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
deleted file mode 100644
index dbed52191..000000000
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "table",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "TableBody.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
-    },
-    {
-      "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
-    },
-    {
-      "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
-    },
-    {
-      "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { computed, type HTMLAttributes } from 'vue'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes['class']\n  colspan?: number\n}>(), {\n  colspan: 1,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
-    },
-    {
-      "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
-    },
-    {
-      "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)\">\n    <slot />\n  </th>\n</template>\n"
-    },
-    {
-      "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
-    },
-    {
-      "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
deleted file mode 100644
index 1fec294b9..000000000
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tabs",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { TabsRootEmits, TabsRootProps } from 'reka-ui'\nimport { TabsRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TabsRootProps>()\nconst emits = defineEmits<TabsRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TabsRoot v-bind=\"forwarded\">\n    <slot />\n  </TabsRoot>\n</template>\n"
-    },
-    {
-      "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsContent, type TabsContentProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"delegatedProps\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
-    },
-    {
-      "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsList, type TabsListProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      props.class,\n    )\"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
-    },
-    {
-      "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      props.class,\n    )\"\n  >\n    <span class=\"truncate\">\n      <slot />\n    </span>\n  </TabsTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsContent } from './TabsContent.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
deleted file mode 100644
index ece36edfe..000000000
--- a/apps/www/src/public/registry/styles/new-york/tags-input.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "tags-input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "TagsInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
-    },
-    {
-      "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'\n\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
-    },
-    {
-      "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
-    },
-    {
-      "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/textarea.json b/apps/www/src/public/registry/styles/new-york/textarea.json
deleted file mode 100644
index edd758194..000000000
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "textarea",
-  "dependencies": [
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useVModel } from '@vueuse/core'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :class=\"cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Textarea } from './Textarea.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
deleted file mode 100644
index e91628976..000000000
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "toast",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type ToastProps, toastVariants } from '.'\n\nconst props = defineProps<ToastProps>()\n\nconst emits = defineEmits<ToastRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToastRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(toastVariants({ variant }), props.class)\"\n    @update:open=\"onOpenChange\"\n  >\n    <slot />\n  </ToastRoot>\n</template>\n"
-    },
-    {
-      "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastAction, type ToastActionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastAction v-bind=\"delegatedProps\" :class=\"cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring 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', props.class)\">\n    <slot />\n  </ToastAction>\n</template>\n"
-    },
-    {
-      "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { ToastClose, type ToastCloseProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastCloseProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastClose v-bind=\"delegatedProps\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
-    },
-    {
-      "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastDescription, type ToastDescriptionProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastDescription :class=\"cn('text-sm opacity-90', props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </ToastDescription>\n</template>\n"
-    },
-    {
-      "name": "ToastProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastProvider, type ToastProviderProps } from 'reka-ui'\n\nconst props = defineProps<ToastProviderProps>()\n</script>\n\n<template>\n  <ToastProvider v-bind=\"props\">\n    <slot />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastTitle, type ToastTitleProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastTitle v-bind=\"delegatedProps\" :class=\"cn('text-sm font-semibold [&+div]:text-xs', props.class)\">\n    <slot />\n  </ToastTitle>\n</template>\n"
-    },
-    {
-      "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ToastViewport, type ToastViewportProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ToastViewport v-bind=\"delegatedProps\" :class=\"cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\nimport { useToast } from './use-toast'\n\nconst { toasts } = useToast()\n</script>\n\n<template>\n  <ToastProvider>\n    <Toast v-for=\"toast in toasts\" :key=\"toast.id\" v-bind=\"toast\">\n      <div class=\"grid gap-1\">\n        <ToastTitle v-if=\"toast.title\">\n          {{ toast.title }}\n        </ToastTitle>\n        <template v-if=\"toast.description\">\n          <ToastDescription v-if=\"isVNode(toast.description)\">\n            <component :is=\"toast.description\" />\n          </ToastDescription>\n          <ToastDescription v-else>\n            {{ toast.description }}\n          </ToastDescription>\n        </template>\n        <ToastClose />\n      </div>\n      <component :is=\"toast.action\" />\n    </Toast>\n    <ToastViewport />\n  </ToastProvider>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
-    },
-    {
-      "name": "use-toast.ts",
-      "content": "import type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\nimport { computed, ref } from 'vue'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\nexport type StringOrVNode =\n  | string\n  | VNode\n  | (() => VNode)\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: string\n  description?: StringOrVNode\n  action?: Component\n}\n\nconst actionTypes = {\n  ADD_TOAST: 'ADD_TOAST',\n  UPDATE_TOAST: 'UPDATE_TOAST',\n  DISMISS_TOAST: 'DISMISS_TOAST',\n  REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_VALUE\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n    type: ActionType['ADD_TOAST']\n    toast: ToasterToast\n  }\n  | {\n    type: ActionType['UPDATE_TOAST']\n    toast: Partial<ToasterToast>\n  }\n  | {\n    type: ActionType['DISMISS_TOAST']\n    toastId?: ToasterToast['id']\n  }\n  | {\n    type: ActionType['REMOVE_TOAST']\n    toastId?: ToasterToast['id']\n  }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nfunction addToRemoveQueue(toastId: string) {\n  if (toastTimeouts.has(toastId))\n    return\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: actionTypes.REMOVE_TOAST,\n      toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nconst state = ref<State>({\n  toasts: [],\n})\n\nfunction dispatch(action: Action) {\n  switch (action.type) {\n    case actionTypes.ADD_TOAST:\n      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)\n      break\n\n    case actionTypes.UPDATE_TOAST:\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === action.toast.id ? { ...t, ...action.toast } : t,\n      )\n      break\n\n    case actionTypes.DISMISS_TOAST: {\n      const { toastId } = action\n\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      }\n      else {\n        state.value.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      state.value.toasts = state.value.toasts.map(t =>\n        t.id === toastId || toastId === undefined\n          ? {\n              ...t,\n              open: false,\n            }\n          : t,\n      )\n      break\n    }\n\n    case actionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined)\n        state.value.toasts = []\n      else\n        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)\n\n      break\n  }\n}\n\nfunction useToast() {\n  return {\n    toasts: computed(() => state.value.toasts),\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n  }\n}\n\ntype Toast = Omit<ToasterToast, 'id'>\n\nfunction toast(props: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: actionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    })\n\n  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })\n\n  dispatch({\n    type: actionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open: boolean) => {\n        if (!open)\n          dismiss()\n      },\n    },\n  })\n\n  return {\n    id,\n    dismiss,\n    update,\n  }\n}\n\nexport { toast, useToast }\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
deleted file mode 100644
index 0387d1883..000000000
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "toggle-group",
-  "dependencies": [],
-  "registryDependencies": [
-    "toggle",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ToggleGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, provide } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupRootProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n})\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot v-bind=\"forwarded\" :class=\"cn('flex items-center justify-center gap-1', props.class)\">\n    <slot />\n  </ToggleGroupRoot>\n</template>\n"
-    },
-    {
-      "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes, inject } from 'vue'\n\ntype ToggleGroupVariants = VariantProps<typeof toggleVariants>\n\nconst props = defineProps<ToggleGroupItemProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleGroupVariants['variant']\n  size?: ToggleGroupVariants['size']\n}>()\n\nconst context = inject<ToggleGroupVariants>('toggleGroup')\n\nconst delegatedProps = computed(() => {\n  const { class: _, variant, size, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-bind=\"forwardedProps\" :class=\"cn(toggleVariants({\n      variant: context?.variant || variant,\n      size: context?.size || size,\n    }), props.class)\"\n  >\n    <slot />\n  </ToggleGroupItem>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
deleted file mode 100644
index f0ceab843..000000000
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "toggle",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { type ToggleVariants, toggleVariants } from '.'\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  class?: HTMLAttributes['class']\n  variant?: ToggleVariants['variant']\n  size?: ToggleVariants['size']\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, size, variant, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/tooltip.json b/apps/www/src/public/registry/styles/new-york/tooltip.json
deleted file mode 100644
index ca0171b57..000000000
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "tooltip",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
-    },
-    {
-      "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {\n  sideOffset: 4,\n})\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\">\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n"
-    },
-    {
-      "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json
deleted file mode 100644
index 4ab67b85b..000000000
--- a/apps/www/src/public/registry/styles/new-york/v-calendar.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "v-calendar",
-  "dependencies": [
-    "v-calendar@next",
-    "@vueuse/core"
-  ],
-  "registryDependencies": [
-    "button",
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { Calendar } from 'v-calendar'\nimport { buttonVariants } from '@/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { useVModel } from '@vueuse/core'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('prev')\"\n      >\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button\n        :class=\"cn(\n          buttonVariants({ variant: 'outline' }),\n          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        )\"\n        @click=\"handleNav('next')\"\n      >\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4 max-sm:!grid-cols-1;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\nimport type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'\n\nexport function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {\n  const validSlots: CalendarSlotName[] = [\n    'day-content',\n    'day-popover',\n    'dp-footer',\n    'footer',\n    'header-title-wrapper',\n    'header-title',\n    'header-prev-button',\n    'header-next-button',\n    'nav',\n    'nav-prev-button',\n    'nav-next-button',\n    'page',\n    'time-header',\n  ]\n\n  return validSlots.includes(slotName as CalendarSlotName)\n}\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/src/public/registry/themes.css b/apps/www/src/public/registry/themes.css
deleted file mode 100644
index 284237c61..000000000
--- a/apps/www/src/public/registry/themes.css
+++ /dev/null
@@ -1,768 +0,0 @@
-
-  .theme-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 5.9% 10%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 4.9% 83.9%;
-  }
-
-  .theme-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 212.7 26.8% 83.9;
-  }
-
-  .theme-stone {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 24 5.7% 82.9%;
-  }
-
-  .theme-gray {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 224 71.4% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 216 12.2% 83.9%;
-  }
-
-  .theme-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 0% 83.1%;
-  }
-
-  .theme-red {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 72.2% 50.6%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-red {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 0 72.2% 50.6%;
-  }
-
-  .theme-rose {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 346.8 77.2% 49.8%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-rose {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 346.8 77.2% 49.8%;
-  }
-
-  .theme-orange {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 24.6 95% 53.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-orange {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20.5 90.2% 48.2%;
-  }
-
-  .theme-green {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 355.7 100% 97.3%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 142.1 76.2% 36.3%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-green {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
-
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 144.9 80.4% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 142.4 71.8% 29.2%;
-  }
-
-  .theme-blue {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 221.2 83.2% 53.3%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-blue {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 224.3 76.3% 48%;
-  }
-
-  .theme-yellow {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 20 14.3% 4.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-yellow {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --ring: 35.5 91.7% 32.9%;
-  }
-
-  .theme-violet {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 262.1 83.3% 57.8%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark .theme-violet {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
-
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-
-    --ring: 263.4 70% 50.4%;
-  }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/themes/gray.json b/apps/www/src/public/registry/themes/gray.json
deleted file mode 100644
index 3f702b7fe..000000000
--- a/apps/www/src/public/registry/themes/gray.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "gray",
-  "label": "Gray",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "224 71.4% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "primary": "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      "secondary": "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "accent": "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
-      "ring": "224 71.4% 4.1%"
-    },
-    "dark": {
-      "background": "224 71.4% 4.1%",
-      "foreground": "210 20% 98%",
-      "card": "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "primary": "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      "secondary": "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "accent": "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
-      "ring": "216 12.2% 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/neutral.json b/apps/www/src/public/registry/themes/neutral.json
deleted file mode 100644
index 625428d0e..000000000
--- a/apps/www/src/public/registry/themes/neutral.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "neutral",
-  "label": "Neutral",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/slate.json b/apps/www/src/public/registry/themes/slate.json
deleted file mode 100644
index 2cd8397f2..000000000
--- a/apps/www/src/public/registry/themes/slate.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "slate",
-  "label": "Slate",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "ring": "222.2 84% 4.9%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "ring": "212.7 26.8 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/stone.json b/apps/www/src/public/registry/themes/stone.json
deleted file mode 100644
index ae16da328..000000000
--- a/apps/www/src/public/registry/themes/stone.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "stone",
-  "label": "Stone",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%"
-    }
-  }
-}
diff --git a/apps/www/src/public/registry/themes/zinc.json b/apps/www/src/public/registry/themes/zinc.json
deleted file mode 100644
index ea49146d6..000000000
--- a/apps/www/src/public/registry/themes/zinc.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "zinc",
-  "label": "Zinc",
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%"
-    }
-  }
-}
diff --git a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
index 02131919b..b539430f8 100644
--- a/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/registry/new-york/example/BreadcrumbDropdown.vue
@@ -41,7 +41,7 @@ import { ChevronDown, Slash } from 'lucide-vue-next'
         </DropdownMenu>
       </BreadcrumbItem>
       <BreadcrumbSeparator>
-        <SlashIcon />
+        <Slash />
       </BreadcrumbSeparator>
       <BreadcrumbItem>
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
diff --git a/apps/www/src/registry/new-york/example/CommandDemo.vue b/apps/www/src/registry/new-york/example/CommandDemo.vue
index bab80998a..83f1fbb7a 100644
--- a/apps/www/src/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/registry/new-york/example/CommandDemo.vue
@@ -21,7 +21,7 @@ import {
 </script>
 
 <template>
-  <Command class="rounded-lg border shadow-md md:min-w-[450px]">
+  <Command class="rounded-lg border shadow-md max-w-[450px]">
     <CommandInput placeholder="Type a command or search..." />
     <CommandList>
       <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
index dd5a872dc..dcbe942e6 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
   >
     <slot />
   </ComboboxItem>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97350e403..189e1188f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,9 +122,6 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.15)
-      v-calendar:
-        specifier: ^3.1.2
-        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3))
       vaul-vue:
         specifier: ^0.2.0
         version: 0.2.0(radix-vue@1.9.8(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
@@ -1866,9 +1863,6 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
   '@radix-icons/vue@1.0.0':
     resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
     peerDependencies:
@@ -2316,9 +2310,6 @@ packages:
   '@types/prompts@2.4.9':
     resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
 
-  '@types/resize-observer-browser@0.1.11':
-    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
-
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -3604,15 +3595,6 @@ packages:
     resolution: {integrity: sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==}
     engines: {node: '>= 8'}
 
-  date-fns-tz@2.0.1:
-    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
-    peerDependencies:
-      date-fns: 2.x
-
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
@@ -7437,12 +7419,6 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  v-calendar@3.1.2:
-    resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
-    peerDependencies:
-      '@popperjs/core': ^2.0.0
-      vue: ^3.2.0
-
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -7683,11 +7659,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue-screen-utils@1.0.0-beta.13:
-    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
-    peerDependencies:
-      vue: ^3.2.0
-
   vue-sonner@1.2.5:
     resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
 
@@ -9441,8 +9412,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@popperjs/core@2.11.8': {}
-
   '@radix-icons/vue@1.0.0(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       vue: 3.5.13(typescript@5.6.3)
@@ -9934,8 +9903,6 @@ snapshots:
       '@types/node': 22.9.0
       kleur: 3.0.3
 
-  '@types/resize-observer-browser@0.1.11': {}
-
   '@types/resolve@1.20.2': {}
 
   '@types/responselike@1.0.3':
@@ -11540,14 +11507,6 @@ snapshots:
       image-size: 0.8.3
       mimer: 1.1.0
 
-  date-fns-tz@2.0.1(date-fns@2.30.0):
-    dependencies:
-      date-fns: 2.30.0
-
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.26.0
-
   date-fns@4.1.0: {}
 
   db0@0.2.1: {}
@@ -16023,17 +15982,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      '@types/lodash': 4.17.13
-      '@types/resize-observer-browser': 0.1.11
-      date-fns: 2.30.0
-      date-fns-tz: 2.0.1(date-fns@2.30.0)
-      lodash: 4.17.21
-      vue: 3.5.13(typescript@5.6.3)
-      vue-screen-utils: 1.0.0-beta.13(vue@3.5.13(typescript@5.6.3))
-
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -16444,10 +16392,6 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.6.3)
 
-  vue-screen-utils@1.0.0-beta.13(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      vue: 3.5.13(typescript@5.6.3)
-
   vue-sonner@1.2.5: {}
 
   vue-tsc@2.1.10(typescript@5.6.3):

From 124f28240e7eae091a339896c49aecaec7c097b0 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:28:21 +0800
Subject: [PATCH 28/39] test: update

---
 .../registry-resolve-items-tree.test.ts.snap  | 61 ++++++++++---------
 .../test/utils/updaters/update-files.test.ts  |  9 +--
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
index c1c9205aa..884196119 100644
--- a/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
+++ b/packages/cli/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
@@ -14,6 +14,7 @@ exports[`registryResolveItemTree > should resolve index 1`] = `
     "lucide-vue-next",
     "clsx",
     "tailwind-merge",
+    "reka-ui",
   ],
   "devDependencies": [],
   "docs": "",
@@ -69,14 +70,14 @@ const delegatedProps = computed(() => {
 </template>
 ",
       "path": "ui/label/Label.vue",
-      "target": "label/Label.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
       "content": "export { default as Label } from './Label.vue'
 ",
       "path": "ui/label/index.ts",
-      "target": "label/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
   ],
@@ -104,6 +105,7 @@ exports[`registryResolveItemTree > should resolve items tree 1`] = `
 {
   "cssVars": {},
   "dependencies": [
+    "reka-ui",
     "clsx",
     "tailwind-merge",
   ],
@@ -139,7 +141,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ",
       "path": "ui/button/Button.vue",
-      "target": "button/Button.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -180,7 +182,7 @@ export const buttonVariants = cva(
 export type ButtonVariants = VariantProps<typeof buttonVariants>
 ",
       "path": "ui/button/index.ts",
-      "target": "button/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -213,9 +215,12 @@ exports[`registryResolveItemTree > should resolve multiple items tree 1`] = `
 {
   "cssVars": {},
   "dependencies": [
+    "reka-ui",
     "clsx",
     "tailwind-merge",
     "@vueuse/core",
+    "reka-ui",
+    "reka-ui",
   ],
   "devDependencies": [],
   "docs": "",
@@ -249,7 +254,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ",
       "path": "ui/button/Button.vue",
-      "target": "button/Button.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -290,7 +295,7 @@ export const buttonVariants = cva(
 export type ButtonVariants = VariantProps<typeof buttonVariants>
 ",
       "path": "ui/button/index.ts",
-      "target": "button/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -341,14 +346,14 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </template>
 ",
       "path": "ui/input/Input.vue",
-      "target": "input/Input.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
       "content": "export { default as Input } from './Input.vue'
 ",
       "path": "ui/input/index.ts",
-      "target": "input/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -384,7 +389,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </template>
 ",
       "path": "ui/command/Command.vue",
-      "target": "command/Command.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -411,7 +416,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </template>
 ",
       "path": "ui/command/CommandDialog.vue",
-      "target": "command/CommandDialog.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -437,7 +442,7 @@ const delegatedProps = computed(() => {
 </template>
 ",
       "path": "ui/command/CommandEmpty.vue",
-      "target": "command/CommandEmpty.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -472,7 +477,7 @@ const delegatedProps = computed(() => {
 </template>
 ",
       "path": "ui/command/CommandGroup.vue",
-      "target": "command/CommandGroup.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -511,7 +516,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </template>
 ",
       "path": "ui/command/CommandInput.vue",
-      "target": "command/CommandInput.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -543,7 +548,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </template>
 ",
       "path": "ui/command/CommandItem.vue",
-      "target": "command/CommandItem.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -576,7 +581,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </template>
 ",
       "path": "ui/command/CommandList.vue",
-      "target": "command/CommandList.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -605,7 +610,7 @@ const delegatedProps = computed(() => {
 </template>
 ",
       "path": "ui/command/CommandSeparator.vue",
-      "target": "command/CommandSeparator.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -625,7 +630,7 @@ const props = defineProps<{
 </template>
 ",
       "path": "ui/command/CommandShortcut.vue",
-      "target": "command/CommandShortcut.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -640,7 +645,7 @@ export { default as CommandSeparator } from './CommandSeparator.vue'
 export { default as CommandShortcut } from './CommandShortcut.vue'
 ",
       "path": "ui/command/index.ts",
-      "target": "command/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -660,7 +665,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </template>
 ",
       "path": "ui/dialog/Dialog.vue",
-      "target": "dialog/Dialog.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -677,7 +682,7 @@ const props = defineProps<DialogCloseProps>()
 </template>
 ",
       "path": "ui/dialog/DialogClose.vue",
-      "target": "dialog/DialogClose.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -733,7 +738,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </template>
 ",
       "path": "ui/dialog/DialogContent.vue",
-      "target": "dialog/DialogContent.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -763,7 +768,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </template>
 ",
       "path": "ui/dialog/DialogDescription.vue",
-      "target": "dialog/DialogDescription.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -788,7 +793,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </template>
 ",
       "path": "ui/dialog/DialogFooter.vue",
-      "target": "dialog/DialogFooter.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -810,7 +815,7 @@ const props = defineProps<{
 </template>
 ",
       "path": "ui/dialog/DialogHeader.vue",
-      "target": "dialog/DialogHeader.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -875,7 +880,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </template>
 ",
       "path": "ui/dialog/DialogScrollContent.vue",
-      "target": "dialog/DialogScrollContent.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -910,7 +915,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </template>
 ",
       "path": "ui/dialog/DialogTitle.vue",
-      "target": "dialog/DialogTitle.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -927,7 +932,7 @@ const props = defineProps<DialogTriggerProps>()
 </template>
 ",
       "path": "ui/dialog/DialogTrigger.vue",
-      "target": "dialog/DialogTrigger.vue",
+      "target": "",
       "type": "registry:ui",
     },
     {
@@ -942,7 +947,7 @@ export { default as DialogTitle } from './DialogTitle.vue'
 export { default as DialogTrigger } from './DialogTrigger.vue'
 ",
       "path": "ui/dialog/index.ts",
-      "target": "dialog/index.ts",
+      "target": "",
       "type": "registry:ui",
     },
   ],
diff --git a/packages/cli/test/utils/updaters/update-files.test.ts b/packages/cli/test/utils/updaters/update-files.test.ts
index 43fb4bff0..67f46219c 100644
--- a/packages/cli/test/utils/updaters/update-files.test.ts
+++ b/packages/cli/test/utils/updaters/update-files.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import { resolveTargetDir } from '../../../src/utils/updaters/update-files'
 
+// TODO: `isSrcDir` is not being use yet
 describe('resolveTargetDir', () => {
   it('should handle a home target without a src directory', () => {
     const targetDir = resolveTargetDir(
@@ -43,9 +44,9 @@ describe('resolveTargetDir', () => {
           cwd: '/foo/bar',
         },
       },
-      './components/ui/button.tsx',
+      './components/ui/button.ts',
     )
-    expect(targetDir).toBe('/foo/bar/components/ui/button.tsx')
+    expect(targetDir).toBe('/foo/bar/components/ui/button.ts')
   })
 
   it('should handle a simple target with src directory', () => {
@@ -58,8 +59,8 @@ describe('resolveTargetDir', () => {
           cwd: '/foo/bar',
         },
       },
-      './components/ui/button.tsx',
+      './components/ui/button.ts',
     )
-    expect(targetDir).toBe('/foo/bar/src/components/ui/button.tsx')
+    expect(targetDir).toBe('/foo/bar/components/ui/button.ts')
   })
 })

From dc5c3fbb3ca65998718940e0092e6204c36c61c4 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:47:22 +0800
Subject: [PATCH 29/39] chore: update playground

---
 apps/www/.vitepress/theme/utils/codeeditor.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index f406f56b8..c5958f0f0 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -21,7 +21,7 @@ export function makeStackblitzParams(componentName: string, style: RegistryStyle
   Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content))
 
   return sdk.openProject({
-    title: `${componentName} - Radix Vue`,
+    title: `${componentName} - Reka UI`,
     files,
     template: 'node',
   }, {
@@ -88,7 +88,6 @@ function constructFiles(componentName: string, style: RegistryStyle, sources: Re
     },
   }
 
-  const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
   const dependencies = {
     'vue': 'latest',
     'reka-ui': 'latest',
@@ -97,7 +96,7 @@ function constructFiles(componentName: string, style: RegistryStyle, sources: Re
     'class-variance-authority': 'latest',
     'tailwind-merge': 'latest',
     'tailwindcss-animate': 'latest',
-    [iconPackage]: 'latest',
+    'lucide-vue-next': 'latest',
     'shadcn-vue': 'latest',
     'typescript': 'latest',
     'vaul-vue': 'latest',

From 2326784ba00dbb012b12c1bf2f7d0bf6fa1d5111 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:54:38 +0800
Subject: [PATCH 30/39] chore: release next tag

---
 .github/workflows/release.yaml | 6 +++---
 packages/module/package.json   | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 310d283d7..e9630f4b0 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -1,6 +1,6 @@
 # .github/workflows/release.yml
 
-name: Release
+name: Release (next)
 
 permissions:
   contents: write
@@ -29,11 +29,11 @@ jobs:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
       - name: Build CLI & Publish to npm
-        run: pnpm --filter shadcn-vue pub:release
+        run: pnpm --filter shadcn-vue pub:next
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Build Module & Publish to npm
-        run: pnpm --filter shadcn-nuxt pub:release
+        run: pnpm --filter shadcn-nuxt pub:next
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/packages/module/package.json b/packages/module/package.json
index 015d41409..841a540ff 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -33,6 +33,7 @@
     "test": "vitest run",
     "test:watch": "vitest watch",
     "release": "pnpm run prepack && pnpm publish && git push --follow-tags",
+    "pub:next": "pnpm prepack && pnpm publish  --no-git-checks --access public --tag next",
     "pub:release": "pnpm prepack && pnpm publish  --no-git-checks --access public"
   },
   "dependencies": {

From 69fbfb35453920531d947d2b36d0cae6b47ee73f Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 11:54:54 +0800
Subject: [PATCH 31/39] chore: release v1.0.0-next.0

---
 apps/www/package.json        | 2 +-
 package.json                 | 2 +-
 packages/cli/package.json    | 2 +-
 packages/module/package.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 9d598c493..fe213e176 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.11.3",
+  "version": "1.0.0-next.0",
   "files": [
     "dist"
   ],
diff --git a/package.json b/package.json
index e3cb146d6..16dae657a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.11.3",
+  "version": "1.0.0-next.0",
   "private": true,
   "packageManager": "pnpm@9.10.0",
   "license": "MIT",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 9d5597741..f9413b676 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.11.3",
+  "version": "1.0.0-next.0",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
diff --git a/packages/module/package.json b/packages/module/package.json
index 841a540ff..0807f97f1 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-nuxt",
   "type": "module",
-  "version": "0.11.3",
+  "version": "1.0.0-next.0",
   "description": "Add shadcn-vue module to Nuxt",
   "publishConfig": {
     "access": "public"

From 20bb9c612b670eb7b2b4a824588c2d6a9950ffc1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 27 Nov 2024 13:26:29 +0800
Subject: [PATCH 32/39] chore: update demo

---
 apps/www/.vitepress/theme/utils/codeeditor.ts |  3 +-
 .../cli/src/utils/updaters/update-files.ts    |  5 ++++
 .../transform-icons.test.ts.snap              | 13 ++++++++
 .../cli/test/utils/transform-icons.test.ts    | 30 +++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index c5958f0f0..f6c424697 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -86,6 +86,7 @@ function constructFiles(componentName: string, style: RegistryStyle, sources: Re
       utils: '@/utils',
       components: '@/components',
     },
+    iconLibrary: 'lucide',
   }
 
   const dependencies = {
@@ -97,7 +98,7 @@ function constructFiles(componentName: string, style: RegistryStyle, sources: Re
     'tailwind-merge': 'latest',
     'tailwindcss-animate': 'latest',
     'lucide-vue-next': 'latest',
-    'shadcn-vue': 'latest',
+    'shadcn-vue': 'next',
     'typescript': 'latest',
     'vaul-vue': 'latest',
     'vue-sonner': 'latest',
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
index 976313557..1899ae1c2 100644
--- a/packages/cli/src/utils/updaters/update-files.ts
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -83,6 +83,11 @@ export async function updateFiles(
     // Check for existing folder in UI component only
     if (file.type === 'registry:ui') {
       const folderName = basename(dirname(filePath))
+      const existingFolder = existsSync(dirname(filePath))
+
+      if (!existingFolder) {
+        folderSkipped.set(folderName, false)
+      }
 
       if (!folderSkipped.has(folderName)) {
         filesCreatedSpinner.stop()
diff --git a/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
index d159155c5..978aad21f 100644
--- a/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap
@@ -13,6 +13,19 @@ import { Primitive } from 'reka-ui';
 "
 `;
 
+exports[`transformIcons > does nothing 1`] = `
+"<script setup>
+import { Check } from 'lucide-vue-next';
+import { Primitive } from 'reka-ui';
+</script>
+
+<template>
+  <Check />
+  <Primitive />
+</template>
+"
+`;
+
 exports[`transformIcons > transforms radix icons 1`] = `
 "<script setup>
 import { CheckIcon } from '@radix-icons/vue';
diff --git a/packages/cli/test/utils/transform-icons.test.ts b/packages/cli/test/utils/transform-icons.test.ts
index 03c6a42df..e2d91bcbb 100644
--- a/packages/cli/test/utils/transform-icons.test.ts
+++ b/packages/cli/test/utils/transform-icons.test.ts
@@ -41,4 +41,34 @@ describe('transformIcons', () => {
     })
     expect(result).toMatchSnapshot()
   })
+
+  it('does nothing', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      import { Check } from 'lucide-vue-next'
+      import { Primitive } from 'reka-ui'
+      </script>
+
+      <template>
+        <Check />
+        <Primitive />
+      </template>
+      `,
+      config: {
+        style: 'new-york',
+        tailwind: {
+          config: 'tailwind.config.js',
+          css: 'src/assets/index.css',
+          baseColor: 'zinc',
+          cssVariables: true,
+        },
+        aliases: {
+          utils: '@/utils',
+          components: '@/components',
+        },
+      },
+    })
+    expect(result).toMatchSnapshot()
+  })
 })

From 3f0ded8e7f52774111f18d5ae5aa0c742bd9bcd2 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Wed, 4 Dec 2024 23:24:33 +0330
Subject: [PATCH 33/39] refactor: replace `kleur` with `consola` colors

---
 packages/cli/src/utils/highlighter.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/cli/src/utils/highlighter.ts b/packages/cli/src/utils/highlighter.ts
index febc88cd9..8890854b3 100644
--- a/packages/cli/src/utils/highlighter.ts
+++ b/packages/cli/src/utils/highlighter.ts
@@ -1,8 +1,8 @@
-import { cyan, green, red, yellow } from 'kleur/colors'
+import { colors } from 'consola/utils'
 
 export const highlighter = {
-  error: red,
-  warn: yellow,
-  info: cyan,
-  success: green,
+  error: colors.red,
+  warn: colors.yellow,
+  info: colors.cyan,
+  success: colors.green,
 }

From 8a8d1ef20a0c42126f5ebff7233917b7a73ba86f Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 5 Dec 2024 00:00:10 +0330
Subject: [PATCH 34/39] refactor: use `get-tsconfig` instead of
 `tsconfig-paths`

refactor: replace `node:path` with `pathe`
chore: add `tinyexec` instead of `execa`
---
 packages/cli/package.json                     |  3 ++-
 packages/cli/src/commands/add.ts              |  2 +-
 packages/cli/src/commands/diff.ts             |  2 +-
 packages/cli/src/commands/init.ts             |  2 +-
 packages/cli/src/commands/migrate.ts          |  2 +-
 packages/cli/src/migrations/migrate-icons.ts  |  2 +-
 packages/cli/src/preflights/preflight-add.ts  |  2 +-
 packages/cli/src/preflights/preflight-init.ts |  2 +-
 .../cli/src/preflights/preflight-migrate.ts   |  2 +-
 packages/cli/src/utils/create-project.ts      | 16 ++++++------
 packages/cli/src/utils/get-config.ts          | 25 +++++++++++--------
 packages/cli/src/utils/get-package-info.ts    |  2 +-
 packages/cli/src/utils/get-project-info.ts    | 17 ++++++-------
 packages/cli/src/utils/registry/index.ts      |  2 +-
 packages/cli/src/utils/resolve-import.ts      | 19 ++++++--------
 .../cli/src/utils/updaters/update-css-vars.ts |  2 +-
 .../cli/src/utils/updaters/update-files.ts    |  2 +-
 .../utils/updaters/update-tailwind-config.ts  |  2 +-
 .../utils/updaters/update-tailwind-content.ts |  2 +-
 pnpm-lock.yaml                                | 25 +++++--------------
 20 files changed, 60 insertions(+), 73 deletions(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 574e13310..31ab5f3d0 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -60,6 +60,7 @@
     "diff": "^7.0.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
+    "get-tsconfig": "^4.8.1",
     "lodash-es": "^4.17.21",
     "magic-string": "^0.30.13",
     "nypm": "^0.3.12",
@@ -72,8 +73,8 @@
     "reka-ui": "catalog:",
     "stringify-object": "^5.0.0",
     "tailwindcss": "^3.4.16",
+    "tinyexec": "^0.3.1",
     "ts-morph": "^24.0.0",
-    "tsconfig-paths": "^4.2.0",
     "undici": "^7.0.0",
     "vue-metamorph": "3.2.0",
     "zod": "^3.23.8"
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index a9f897137..99164a1b2 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -1,4 +1,3 @@
-import path from 'node:path'
 import { runInit } from '@/src/commands/init'
 import { preFlightAdd } from '@/src/preflights/preflight-add'
 import { addComponents } from '@/src/utils/add-components'
@@ -8,6 +7,7 @@ import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import { getRegistryIndex } from '@/src/utils/registry'
 import { Command } from 'commander'
+import path from 'pathe'
 import prompts from 'prompts'
 import { z } from 'zod'
 
diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts
index 525c56437..fc2b9fb71 100644
--- a/packages/cli/src/commands/diff.ts
+++ b/packages/cli/src/commands/diff.ts
@@ -1,7 +1,6 @@
 import type { Config } from '@/src/utils/get-config'
 import type { registryIndexSchema } from '@/src/utils/registry/schema'
 import { existsSync, promises as fs } from 'node:fs'
-import path from 'node:path'
 import { getConfig } from '@/src/utils/get-config'
 import { handleError } from '@/src/utils/handle-error'
 import { highlighter } from '@/src/utils/highlighter'
@@ -15,6 +14,7 @@ import {
 import { transform } from '@/src/utils/transformers'
 import { Command } from 'commander'
 import { type Change, diffLines } from 'diff'
+import path from 'pathe'
 import { z } from 'zod'
 
 const updateOptionsSchema = z.object({
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 6f0453f4d..4c9e3b623 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,5 +1,4 @@
 import { promises as fs } from 'node:fs'
-import path from 'node:path'
 import { addComponents } from '@/src/utils/add-components'
 import {
   type Config,
@@ -19,6 +18,7 @@ import { getRegistryBaseColors, getRegistryStyles } from '@/src/utils/registry'
 import { spinner } from '@/src/utils/spinner'
 import { updateTailwindContent } from '@/src/utils/updaters/update-tailwind-content'
 import { Command } from 'commander'
+import path from 'pathe'
 import prompts from 'prompts'
 import { z } from 'zod'
 
diff --git a/packages/cli/src/commands/migrate.ts b/packages/cli/src/commands/migrate.ts
index 751710473..76ab8d16b 100644
--- a/packages/cli/src/commands/migrate.ts
+++ b/packages/cli/src/commands/migrate.ts
@@ -1,10 +1,10 @@
-import path from 'node:path'
 import { migrateIcons } from '@/src/migrations/migrate-icons'
 import { preFlightMigrate } from '@/src/preflights/preflight-migrate'
 import * as ERRORS from '@/src/utils/errors'
 import { handleError } from '@/src/utils/handle-error'
 import { Command } from 'commander'
 import consola from 'consola'
+import path from 'pathe'
 import { z } from 'zod'
 
 export const migrations = [
diff --git a/packages/cli/src/migrations/migrate-icons.ts b/packages/cli/src/migrations/migrate-icons.ts
index 83558fb2a..b5c314e5d 100644
--- a/packages/cli/src/migrations/migrate-icons.ts
+++ b/packages/cli/src/migrations/migrate-icons.ts
@@ -4,7 +4,6 @@ import type { z } from 'zod'
 import { randomBytes } from 'node:crypto'
 import { promises as fs } from 'node:fs'
 import { tmpdir } from 'node:os'
-import path from 'node:path'
 import { highlighter } from '@/src/utils/highlighter'
 import { ICON_LIBRARIES } from '@/src/utils/icon-libraries'
 import { logger } from '@/src/utils/logger'
@@ -12,6 +11,7 @@ import { getRegistryIcons } from '@/src/utils/registry'
 import { spinner } from '@/src/utils/spinner'
 import { updateDependencies } from '@/src/utils/updaters/update-dependencies'
 import fg from 'fast-glob'
+import path from 'pathe'
 import prompts from 'prompts'
 import { Project, ScriptKind, SyntaxKind } from 'ts-morph'
 
diff --git a/packages/cli/src/preflights/preflight-add.ts b/packages/cli/src/preflights/preflight-add.ts
index 7d79ef552..408d23c1a 100644
--- a/packages/cli/src/preflights/preflight-add.ts
+++ b/packages/cli/src/preflights/preflight-add.ts
@@ -1,11 +1,11 @@
 import type { addOptionsSchema } from '@/src/commands/add'
 import type { z } from 'zod'
-import path from 'node:path'
 import * as ERRORS from '@/src/utils/errors'
 import { getConfig } from '@/src/utils/get-config'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import fs from 'fs-extra'
+import path from 'pathe'
 
 export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
   const errors: Record<string, boolean> = {}
diff --git a/packages/cli/src/preflights/preflight-init.ts b/packages/cli/src/preflights/preflight-init.ts
index 51f21fbb3..9233203cc 100644
--- a/packages/cli/src/preflights/preflight-init.ts
+++ b/packages/cli/src/preflights/preflight-init.ts
@@ -1,12 +1,12 @@
 import type { initOptionsSchema } from '@/src/commands/init'
 import type { z } from 'zod'
-import path from 'node:path'
 import * as ERRORS from '@/src/utils/errors'
 import { getProjectInfo, type ProjectInfo } from '@/src/utils/get-project-info'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import { spinner } from '@/src/utils/spinner'
 import fs from 'fs-extra'
+import path from 'pathe'
 
 export async function preFlightInit(options: z.infer<typeof initOptionsSchema>) {
   const errors: Record<string, boolean> = {}
diff --git a/packages/cli/src/preflights/preflight-migrate.ts b/packages/cli/src/preflights/preflight-migrate.ts
index 519cbe127..7d4fd93dc 100644
--- a/packages/cli/src/preflights/preflight-migrate.ts
+++ b/packages/cli/src/preflights/preflight-migrate.ts
@@ -1,12 +1,12 @@
 import type { migrateOptionsSchema } from '@/src/commands/migrate'
 import type { z } from 'zod'
-import path from 'node:path'
 // import { addOptionsSchema } from '@/src/commands/add'
 import * as ERRORS from '@/src/utils/errors'
 import { getConfig } from '@/src/utils/get-config'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import fs from 'fs-extra'
+import path from 'pathe'
 
 export async function preFlightMigrate(
   options: z.infer<typeof migrateOptionsSchema>,
diff --git a/packages/cli/src/utils/create-project.ts b/packages/cli/src/utils/create-project.ts
index ed5ce254f..6c17bb9f7 100644
--- a/packages/cli/src/utils/create-project.ts
+++ b/packages/cli/src/utils/create-project.ts
@@ -1,13 +1,13 @@
 import type { initOptionsSchema } from '@/src/commands/init'
 import type { z } from 'zod'
-import path from 'node:path'
-import { getPackageManager } from '@/src/utils/get-package-manager'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
 import { spinner } from '@/src/utils/spinner'
-import { execa } from 'execa'
 import fs from 'fs-extra'
+import { detectPackageManager } from 'nypm'
+import path from 'pathe'
 import prompts from 'prompts'
+import { x } from 'tinyexec'
 
 export async function createProject(options: Pick<z.infer<typeof initOptionsSchema>, 'cwd' | 'force' | 'srcDir'>) {
   options = {
@@ -35,9 +35,7 @@ export async function createProject(options: Pick<z.infer<typeof initOptionsSche
     }
   }
 
-  const packageManager = await getPackageManager(options.cwd, {
-    withFallback: true,
-  })
+  const packageManager = detectPackageManager(options.cwd)
 
   const { name } = await prompts({
     type: 'text',
@@ -93,11 +91,13 @@ export async function createProject(options: Pick<z.infer<typeof initOptionsSche
   ]
 
   try {
-    await execa(
+    await x(
       'npx',
       ['create-next-app@14.2.16', projectPath, '--silent', ...args],
       {
-        cwd: options.cwd,
+        nodeOptions: {
+          cwd: options.cwd,
+        },
       },
     )
   }
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index a8a0fed0f..c7a4baa61 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -1,8 +1,9 @@
 import { resolveImport } from '@/src/utils/resolve-import'
 import { loadConfig as c12LoadConfig } from 'c12'
+import { getTsconfig } from 'get-tsconfig'
 import path from 'pathe'
-import { loadConfig } from 'tsconfig-paths'
 import { z } from 'zod'
+import { highlighter } from './highlighter'
 
 export const DEFAULT_STYLE = 'default'
 export const DEFAULT_COMPONENTS = '@/components'
@@ -74,18 +75,22 @@ export async function getConfig(cwd: string) {
   return await resolveConfigPaths(cwd, config)
 }
 
-export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  // Read tsconfig.json.
-  const tsConfig = await loadConfig(cwd)
-
-  if (tsConfig.resultType === 'failed') {
+export function getTSConfig(cwd: string, tsconfigName: 'tsconfig.json' | 'jsconfig.json') {
+  const parsedConfig = getTsconfig(path.resolve(cwd, 'package.json'), tsconfigName)
+  if (parsedConfig === null) {
     throw new Error(
-      `Failed to load ${config.typescript ? 'tsconfig' : 'jsconfig'}.json. ${
-        tsConfig.message ?? ''
-      }`.trim(),
+      `Failed to find ${highlighter.info(tsconfigName)}`,
     )
   }
 
+  return parsedConfig
+}
+
+export async function resolveConfigPaths(cwd: string, config: RawConfig) {
+  // Read tsconfig.json.
+  const tsconfigType = config.typescript ? 'tsconfig.json' : 'jsconfig.json'
+  const tsConfig = getTSConfig(cwd, tsconfigType)
+
   return configSchema.parse({
     ...config,
     resolvedPaths: {
@@ -125,7 +130,7 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
   try {
     const configResult = await c12LoadConfig({
       name: 'components',
-      configFile: 'components.json',
+      configFile: 'components',
       cwd,
     })
 
diff --git a/packages/cli/src/utils/get-package-info.ts b/packages/cli/src/utils/get-package-info.ts
index 9c9f97980..798ef7383 100644
--- a/packages/cli/src/utils/get-package-info.ts
+++ b/packages/cli/src/utils/get-package-info.ts
@@ -1,6 +1,6 @@
 import type { PackageJson } from 'type-fest'
-import path from 'node:path'
 import fs from 'fs-extra'
+import path from 'pathe'
 
 export function getPackageInfo(
   cwd: string = '',
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index 500ccc425..ba5722ad8 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -6,13 +6,13 @@ import type {
 import { FRAMEWORKS } from '@/src/utils/frameworks'
 import {
   getConfig,
+  getTSConfig,
   resolveConfigPaths,
 } from '@/src/utils/get-config'
 import { getPackageInfo } from '@/src/utils/get-package-info'
 import fg from 'fast-glob'
 import fs from 'fs-extra'
 import path from 'pathe'
-import { loadConfig } from 'tsconfig-paths'
 import { z } from 'zod'
 
 export interface ProjectInfo {
@@ -131,16 +131,13 @@ export async function getTailwindConfigFile(cwd: string) {
 }
 
 export async function getTsConfigAliasPrefix(cwd: string) {
-  const tsConfig = await loadConfig(cwd)
-  if (
-    tsConfig?.resultType === 'failed'
-    || !Object.entries(tsConfig?.paths).length
-  ) {
-    return null
-  }
+  const isTypescript = await isTypeScriptProject(cwd)
+  const tsconfigType = isTypescript ? 'tsconfig.json' : 'jsconfig.json'
+
+  const tsConfig = await getTSConfig(cwd, tsconfigType)
 
   // This assume that the first alias is the prefix.
-  for (const [alias, paths] of Object.entries(tsConfig.paths)) {
+  for (const [alias, paths] of Object.entries(tsConfig.path)) {
     if (
       paths.includes('./*')
       || paths.includes('./src/*')
@@ -154,7 +151,7 @@ export async function getTsConfigAliasPrefix(cwd: string) {
   }
 
   // Use the first alias as the prefix.
-  return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, '') ?? null
+  return Object.keys(tsConfig?.path)?.[0].replace(/\/\*$/, '') ?? null
 }
 
 export async function isTypeScriptProject(cwd: string) {
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 3694d2ac7..08d9d4be6 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -2,7 +2,6 @@ import type { Config } from '@/src/utils/get-config'
 import type {
   registryItemFileSchema,
 } from '@/src/utils/registry/schema'
-import path from 'node:path'
 import { handleError } from '@/src/utils/handle-error'
 import { logger } from '@/src/utils/logger'
 import {
@@ -16,6 +15,7 @@ import {
 import { buildTailwindThemeColorsFromCssVars } from '@/src/utils/updaters/update-tailwind-config'
 import deepmerge from 'deepmerge'
 import { ofetch } from 'ofetch'
+import path from 'pathe'
 import { ProxyAgent } from 'undici'
 import { z } from 'zod'
 
diff --git a/packages/cli/src/utils/resolve-import.ts b/packages/cli/src/utils/resolve-import.ts
index 76ddd9e93..eb33b9bd8 100644
--- a/packages/cli/src/utils/resolve-import.ts
+++ b/packages/cli/src/utils/resolve-import.ts
@@ -1,13 +1,10 @@
-import { type ConfigLoaderSuccessResult, createMatchPath } from 'tsconfig-paths'
+import { createPathsMatcher, type TsConfigResult } from 'get-tsconfig'
 
-export function resolveImport(
-  importPath: string,
-  config: Pick<ConfigLoaderSuccessResult, 'absoluteBaseUrl' | 'paths'>,
-) {
-  return createMatchPath(config.absoluteBaseUrl, config.paths)(
-    importPath,
-    undefined,
-    () => true,
-    ['.ts', '.tsx', '.vue'],
-  )
+export function resolveImport(importPath: string, config: TsConfigResult) {
+  const matcher = createPathsMatcher(config)
+  if (matcher === null) {
+    return
+  }
+  const paths = matcher(importPath)
+  return paths[0]
 }
diff --git a/packages/cli/src/utils/updaters/update-css-vars.ts b/packages/cli/src/utils/updaters/update-css-vars.ts
index afb4a9ce7..237ba3c80 100644
--- a/packages/cli/src/utils/updaters/update-css-vars.ts
+++ b/packages/cli/src/utils/updaters/update-css-vars.ts
@@ -4,9 +4,9 @@ import type Root from 'postcss/lib/root'
 import type Rule from 'postcss/lib/rule'
 import type { z } from 'zod'
 import { promises as fs } from 'node:fs'
-import path from 'node:path'
 import { highlighter } from '@/src/utils/highlighter'
 import { spinner } from '@/src/utils/spinner'
+import path from 'pathe'
 import postcss from 'postcss'
 import AtRule from 'postcss/lib/at-rule'
 
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
index 1899ae1c2..f5b4af226 100644
--- a/packages/cli/src/utils/updaters/update-files.ts
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -1,7 +1,6 @@
 import type { Config } from '@/src/utils/get-config'
 import type { RegistryItem } from '@/src/utils/registry/schema'
 import { existsSync, promises as fs } from 'node:fs'
-import path, { basename, dirname } from 'node:path'
 import { getProjectInfo } from '@/src/utils/get-project-info'
 import { highlighter } from '@/src/utils/highlighter'
 import { logger } from '@/src/utils/logger'
@@ -11,6 +10,7 @@ import {
 } from '@/src/utils/registry'
 import { spinner } from '@/src/utils/spinner'
 import { transform } from '@/src/utils/transformers'
+import path, { basename, dirname } from 'pathe'
 // import { transformIcons } from '@/src/utils/transformers/transform-icons'
 import prompts from 'prompts'
 
diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.ts b/packages/cli/src/utils/updaters/update-tailwind-config.ts
index 633a3ebf4..bed997d9d 100644
--- a/packages/cli/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/cli/src/utils/updaters/update-tailwind-config.ts
@@ -10,10 +10,10 @@ import type {
 import type { z } from 'zod'
 import { promises as fs } from 'node:fs'
 import { tmpdir } from 'node:os'
-import path from 'node:path'
 import { highlighter } from '@/src/utils/highlighter'
 import { spinner } from '@/src/utils/spinner'
 import deepmerge from 'deepmerge'
+import path from 'pathe'
 import objectToString from 'stringify-object'
 import {
   Project,
diff --git a/packages/cli/src/utils/updaters/update-tailwind-content.ts b/packages/cli/src/utils/updaters/update-tailwind-content.ts
index 999220e06..285190ea5 100644
--- a/packages/cli/src/utils/updaters/update-tailwind-content.ts
+++ b/packages/cli/src/utils/updaters/update-tailwind-content.ts
@@ -1,13 +1,13 @@
 import type { Config } from '@/src/utils/get-config'
 import type { ObjectLiteralExpression } from 'ts-morph'
 import { promises as fs } from 'node:fs'
-import path from 'node:path'
 import { highlighter } from '@/src/utils/highlighter'
 import { spinner } from '@/src/utils/spinner'
 import {
   _createSourceFile,
   _getQuoteChar,
 } from '@/src/utils/updaters/update-tailwind-config'
+import path from 'pathe'
 import { SyntaxKind } from 'ts-morph'
 
 export async function updateTailwindContent(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f67336532..4767e5c07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -273,6 +273,9 @@ importers:
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
+      get-tsconfig:
+        specifier: ^4.8.1
+        version: 4.8.1
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -309,12 +312,12 @@ importers:
       tailwindcss:
         specifier: ^3.4.16
         version: 3.4.16
+      tinyexec:
+        specifier: ^0.3.1
+        version: 0.3.1
       ts-morph:
         specifier: ^24.0.0
         version: 24.0.0
-      tsconfig-paths:
-        specifier: ^4.2.0
-        version: 4.2.0
       undici:
         specifier: ^7.0.0
         version: 7.1.0
@@ -6833,10 +6836,6 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
   strip-eof@1.0.0:
     resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
     engines: {node: '>=0.10.0'}
@@ -7110,10 +7109,6 @@ packages:
       typescript:
         optional: true
 
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
-    engines: {node: '>=6'}
-
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
@@ -15319,8 +15314,6 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
-  strip-bom@3.0.0: {}
-
   strip-eof@1.0.0: {}
 
   strip-final-newline@3.0.0: {}
@@ -15622,12 +15615,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.2
 
-  tsconfig-paths@4.2.0:
-    dependencies:
-      json5: 2.2.3
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tslib@1.14.1: {}
 
   tslib@2.8.1: {}

From 5eee449df5eb65960ce8a7d1aafc6ffc31147c08 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 5 Dec 2024 00:04:34 +0330
Subject: [PATCH 35/39] chore: build registry

---
 .../www/src/public/r/styles/default/BreadcrumbResponsive.json | 2 +-
 .../src/public/r/styles/new-york/BreadcrumbResponsive.json    | 2 +-
 apps/www/src/public/r/temp.json                               | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
index d9054cf6c..979599b33 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/BreadcrumbResponsive.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
index 4f696fb39..66eb8497a 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "example/BreadcrumbResponsive.vue",
-      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+      "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 8f66d78c3..fb89ed0b8 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -3520,7 +3520,7 @@
     "files": [
       {
         "path": "example/BreadcrumbResponsive.vue",
-        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -10812,7 +10812,7 @@
     "files": [
       {
         "path": "example/BreadcrumbResponsive.vue",
-        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
+        "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }

From 4d8706677709cf0989f1d4f01fb6331556abbb48 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 5 Dec 2024 00:06:05 +0330
Subject: [PATCH 36/39] chore: bump cli tag

---
 packages/cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 31ab5f3d0..0cb22c620 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.1",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

From b5cf49e8ae59419092a8f5fa8258d3afd7826341 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 10 Dec 2024 09:17:53 +0800
Subject: [PATCH 37/39] chore: bump reka

---
 .../fixtures/frameworks/nuxt/package.json     |  2 +-
 packages/module/playground/package.json       |  2 +-
 pnpm-lock.yaml                                | 67 +++++++++++++------
 pnpm-workspace.yaml                           |  2 +-
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/packages/cli/test/fixtures/frameworks/nuxt/package.json b/packages/cli/test/fixtures/frameworks/nuxt/package.json
index d3443b861..a16febb12 100644
--- a/packages/cli/test/fixtures/frameworks/nuxt/package.json
+++ b/packages/cli/test/fixtures/frameworks/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.5",
+    "reka-ui": "^1.0.0-alpha.6",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index a12d36205..d32358bc8 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -12,7 +12,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "reka-ui": "^1.0.0-alpha.5",
+    "reka-ui": "^1.0.0-alpha.6",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4767e5c07..10a43b558 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,8 +10,8 @@ catalogs:
       specifier: ^0.29.0
       version: 0.29.0
     reka-ui:
-      specifier: ^1.0.0-alpha.5
-      version: 1.0.0-alpha.5
+      specifier: ^1.0.0-alpha.6
+      version: 1.0.0-alpha.6
     typescript:
       specifier: ^5.6.3
       version: 5.7.2
@@ -31,7 +31,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^3.9.2
-        version: 3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8)
+        version: 3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8(@types/node@22.10.1)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))
       '@commitlint/cli':
         specifier: ^19.5.0
         version: 19.6.0(@types/node@22.10.1)(typescript@5.7.2)
@@ -118,7 +118,7 @@ importers:
         version: 0.30.14
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.5(vue@3.5.13(typescript@5.7.2))
+        version: 1.0.0-alpha.6(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.16)
@@ -305,7 +305,7 @@ importers:
         version: 2.4.2
       reka-ui:
         specifier: 'catalog:'
-        version: 1.0.0-alpha.5(vue@3.5.13(typescript@5.7.2))
+        version: 1.0.0-alpha.6(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       stringify-object:
         specifier: ^5.0.0
         version: 5.0.0
@@ -385,7 +385,7 @@ importers:
         version: 3.14.1592(magicast@0.3.5)(rollup@4.28.0)
       '@nuxt/test-utils':
         specifier: ^3.14.4
-        version: 3.14.4(@vitest/ui@2.1.8)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+        version: 3.14.4(@vitest/ui@2.1.8(vitest@2.1.8))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8(@types/node@20.17.9)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
       '@nuxtjs/color-mode':
         specifier: ^3.5.2
         version: 3.5.2(magicast@0.3.5)(rollup@4.28.0)
@@ -2616,6 +2616,9 @@ packages:
   '@vueuse/core@11.3.0':
     resolution: {integrity: sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==}
 
+  '@vueuse/core@12.0.0':
+    resolution: {integrity: sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==}
+
   '@vueuse/integrations@11.3.0':
     resolution: {integrity: sha512-5fzRl0apQWrDezmobchoiGTkGw238VWESxZHazfhP3RM7pDSiyXy18QbfYkILoYNTd23HPAfQTJpkUc5QbkwTw==}
     peerDependencies:
@@ -2663,12 +2666,18 @@ packages:
   '@vueuse/metadata@11.3.0':
     resolution: {integrity: sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==}
 
+  '@vueuse/metadata@12.0.0':
+    resolution: {integrity: sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==}
+
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
   '@vueuse/shared@11.3.0':
     resolution: {integrity: sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==}
 
+  '@vueuse/shared@12.0.0':
+    resolution: {integrity: sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==}
+
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -6408,8 +6417,8 @@ packages:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  reka-ui@1.0.0-alpha.5:
-    resolution: {integrity: sha512-jJEc2gJPejZABz4xjsy6VmJtQduV06sL06DOlOj+Mt6HRdFMLYxVPMbr/kwdMuBbBomnkbhefJxPaw8tsdWrXQ==}
+  reka-ui@1.0.0-alpha.6:
+    resolution: {integrity: sha512-/t9IhuJxdPg1NR4JLKTI8FZzvgkeQon/gfoLDqxLODdPHfhawNfLz4/qwP7SnLnwk8dw7TK/E6e/ngdGFlgPyw==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -7926,7 +7935,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8)':
+  '@antfu/eslint-config@3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8(@types/node@22.10.1)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
       '@antfu/install-pkg': 0.5.0
       '@clack/prompts': 0.8.2
@@ -7935,7 +7944,7 @@ snapshots:
       '@stylistic/eslint-plugin': 2.11.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       '@typescript-eslint/parser': 8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
-      '@vitest/eslint-plugin': 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8)
+      '@vitest/eslint-plugin': 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8(@types/node@22.10.1)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))
       eslint: 9.16.0(jiti@2.4.1)
       eslint-config-flat-gitignore: 0.3.0(eslint@9.16.0(jiti@2.4.1))
       eslint-flat-config-utils: 0.4.0
@@ -9176,7 +9185,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/test-utils@3.14.4(@vitest/ui@2.1.8)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
+  '@nuxt/test-utils@3.14.4(@vitest/ui@2.1.8(vitest@2.1.8))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8(@types/node@20.17.9)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.28.0)
       '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.28.0)
@@ -9203,7 +9212,7 @@ snapshots:
       unenv: 1.10.0
       unplugin: 1.16.0
       vite: 5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0)
-      vitest-environment-nuxt: 1.0.1(@vitest/ui@2.1.8)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      vitest-environment-nuxt: 1.0.1(@vitest/ui@2.1.8(vitest@2.1.8))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8(@types/node@20.17.9)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
       vue: 3.5.13(typescript@5.7.2)
       vue-router: 4.5.0(vue@3.5.13(typescript@5.7.2))
     optionalDependencies:
@@ -10145,7 +10154,7 @@ snapshots:
       vite: 5.4.11(@types/node@22.10.1)(stylus@0.57.0)(terser@5.36.0)
       vue: 3.5.13(typescript@5.7.2)
 
-  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8)':
+  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2))(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)(vitest@2.1.8(@types/node@22.10.1)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))':
     dependencies:
       '@typescript-eslint/utils': 8.17.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2)
       eslint: 9.16.0(jiti@2.4.1)
@@ -10408,6 +10417,15 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@12.0.0(typescript@5.7.2)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.0.0
+      '@vueuse/shared': 12.0.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/integrations@11.3.0(change-case@5.4.4)(focus-trap@7.6.2)(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@vueuse/core': 11.3.0(vue@3.5.13(typescript@5.7.2))
@@ -10424,6 +10442,8 @@ snapshots:
 
   '@vueuse/metadata@11.3.0': {}
 
+  '@vueuse/metadata@12.0.0': {}
+
   '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
@@ -10438,6 +10458,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@12.0.0(typescript@5.7.2)':
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -14859,22 +14885,23 @@ snapshots:
     dependencies:
       jsesc: 0.5.0
 
-  reka-ui@1.0.0-alpha.5(vue@3.5.13(typescript@5.7.2)):
+  reka-ui@1.0.0-alpha.6(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)):
     dependencies:
       '@floating-ui/dom': 1.6.12
       '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.7.2))
       '@internationalized/date': 3.6.0
       '@internationalized/number': 3.6.0
       '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.7.2))
-      '@vueuse/core': 11.3.0(vue@3.5.13(typescript@5.7.2))
-      '@vueuse/shared': 11.3.0(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/core': 12.0.0(typescript@5.7.2)
+      '@vueuse/shared': 12.0.0(typescript@5.7.2)
       aria-hidden: 1.2.4
       defu: 6.1.4
-      fast-deep-equal: 3.1.3
-      nanoid: 5.0.9
+      ohash: 1.1.4
+      uncrypto: 0.1.3
       vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
+      - typescript
 
   remote-origin-url@0.4.0:
     dependencies:
@@ -16162,9 +16189,9 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest-environment-nuxt@1.0.1(@vitest/ui@2.1.8)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2)):
+  vitest-environment-nuxt@1.0.1(@vitest/ui@2.1.8(vitest@2.1.8))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8(@types/node@20.17.9)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(@vitest/ui@2.1.8)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      '@nuxt/test-utils': 3.14.4(@vitest/ui@2.1.8(vitest@2.1.8))(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.7.2))(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(stylus@0.57.0)(terser@5.36.0))(vitest@2.1.8(@types/node@20.17.9)(@vitest/ui@2.1.8)(stylus@0.57.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1e3b7bfa1..bca07c7e7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
 catalog:
   '@oxc-parser/wasm': ^0.29.0
   typescript: ^5.6.3
-  reka-ui: ^1.0.0-alpha.5
+  reka-ui: ^1.0.0-alpha.6
   zod: ^3.23.8

From d7c4f34babd250c72c736aa6a3f08e850bf830d2 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 10 Dec 2024 12:33:34 +0800
Subject: [PATCH 38/39] refactor(Command): adapt command component to use
 listbox

---
 apps/www/.vitepress/theme/styles/vp-doc.css   | 10 +--
 apps/www/src/public/r/index.json              |  6 +-
 .../src/public/r/styles/default/command.json  | 19 ++---
 .../src/public/r/styles/new-york/command.json | 19 ++---
 .../public/r/styles/new-york/radio-group.json |  2 +-
 apps/www/src/public/r/temp.json               | 40 +++++-----
 .../registry/default/ui/command/Command.vue   | 78 +++++++++++++++++--
 .../default/ui/command/CommandEmpty.vue       | 15 ++--
 .../default/ui/command/CommandGroup.vue       | 33 ++++++--
 .../default/ui/command/CommandInput.vue       | 12 ++-
 .../default/ui/command/CommandItem.vue        | 68 ++++++++++++++--
 .../default/ui/command/CommandList.vue        | 15 ++--
 .../default/ui/command/CommandSeparator.vue   | 10 +--
 .../src/registry/default/ui/command/index.ts  | 16 ++++
 .../registry/new-york/ui/command/Command.vue  | 78 +++++++++++++++++--
 .../new-york/ui/command/CommandEmpty.vue      | 15 ++--
 .../new-york/ui/command/CommandGroup.vue      | 33 ++++++--
 .../new-york/ui/command/CommandInput.vue      | 10 ++-
 .../new-york/ui/command/CommandItem.vue       | 66 ++++++++++++++--
 .../new-york/ui/command/CommandList.vue       | 15 ++--
 .../new-york/ui/command/CommandSeparator.vue  | 10 +--
 .../src/registry/new-york/ui/command/index.ts | 16 ++++
 .../ui/radio-group/RadioGroupItem.vue         |  2 +-
 23 files changed, 450 insertions(+), 138 deletions(-)

diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index 2a8cc5dcd..453c73db7 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -171,22 +171,22 @@
  * Table
  * -------------------------------------------------------------------------- */
 
-.vp-doc table {
+.vp-doc table:not(:where(.not-docs *)) {
   @apply relative w-full overflow-hidden border-none text-sm;
 }
 
-.vp-doc tr {
+.vp-doc tr:not(:where(.not-docs *)) {
   @apply m-0 border-b;
 }
-.vp-doc tbody tr:last-child {
+.vp-doc tbody:not(:where(.not-docs *)) tr:last-child {
   @apply border-b-0;
 }
 
-.vp-doc th {
+.vp-doc th:not(:where(.not-docs *)) {
   @apply px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
 }
 
-.vp-doc td {
+.vp-doc td:not(:where(.not-docs *)) {
 @apply px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
 }
 
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index 48ed096ea..5e7f4fc6b 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -660,7 +660,8 @@
     "name": "command",
     "type": "registry:ui",
     "dependencies": [
-      "reka-ui"
+      "reka-ui",
+      "@vueuse/core"
     ],
     "registryDependencies": [
       "utils",
@@ -2783,7 +2784,8 @@
     "name": "command",
     "type": "registry:ui",
     "dependencies": [
-      "reka-ui"
+      "reka-ui",
+      "@vueuse/core"
     ],
     "registryDependencies": [
       "utils",
diff --git a/apps/www/src/public/r/styles/default/command.json b/apps/www/src/public/r/styles/default/command.json
index 6b3fb3bdd..f38ee709d 100644
--- a/apps/www/src/public/r/styles/default/command.json
+++ b/apps/www/src/public/r/styles/default/command.json
@@ -2,7 +2,8 @@
   "name": "command",
   "type": "registry:ui",
   "dependencies": [
-    "reka-ui"
+    "reka-ui",
+    "@vueuse/core"
   ],
   "registryDependencies": [
     "utils",
@@ -11,7 +12,7 @@
   "files": [
     {
       "path": "ui/command/Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'\nimport { provideCommandContext } from '.'\n\nconst props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: '',\n})\n\nconst emits = defineEmits<ListboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nfunction handleSelect() {\n  filterState.search = ''\n}\n\nwatch(() => filterState.search, () => {\n  filterItems()\n})\n\nprovideCommandContext({\n  allItems,\n  allGroups,\n  filterState,\n})\n</script>\n\n<template>\n  <ListboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ListboxRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -23,37 +24,37 @@
     },
     {
       "path": "ui/command/CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { filterState } = useCommand()\nconst isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive v-if=\"isRender\" v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'\nimport { provideCommandGroupContext, useCommand } from '.'\n\nconst props = defineProps<ListboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { allGroups, filterState } = useCommand()\nconst id = useId()\n\nconst isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))\n\nprovideCommandGroupContext({ id })\nonMounted(() => {\n  if (!allGroups.value.has(id))\n    allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    v-bind=\"delegatedProps\"\n    :id=\"id\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <ListboxGroupLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ListboxGroupLabel>\n    <slot />\n  </ListboxGroup>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ListboxFilterProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst { filterState } = useCommand()\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ListboxFilter\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      v-model=\"filterState.search\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useCurrentElement } from '@vueuse/core'\nimport { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'\nimport { useCommand, useCommandGroup } from '.'\n\nconst props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ListboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst id = useId()\nconst { filterState, allItems, allGroups } = useCommand()\nconst groupContext = useCommandGroup()\n\nconst isRender = computed(() => {\n  if (!filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nconst itemRef = ref()\nconst currentElement = useCurrentElement(itemRef)\nonMounted(() => {\n  if (!(currentElement.value instanceof HTMLElement))\n    return\n\n  // textValue to perform filter\n  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!allGroups.value.has(groupId)) {\n      allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"forwarded\"\n    :id=\"id\"\n    ref=\"itemRef\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n    @select=\"() => {\n      filterState.search = ''\n    }\"\n  >\n    <slot />\n  </ListboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxContent, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ListboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Separator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -65,7 +66,7 @@
     },
     {
       "path": "ui/command/index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+      "content": "import type { Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n\nexport const [useCommand, provideCommandContext] = createContext<{\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n}>('Command')\n\nexport const [useCommandGroup, provideCommandGroupContext] = createContext<{\n  id?: string\n}>('CommandGroup')\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/command.json b/apps/www/src/public/r/styles/new-york/command.json
index 37ea9efb4..7336b3c72 100644
--- a/apps/www/src/public/r/styles/new-york/command.json
+++ b/apps/www/src/public/r/styles/new-york/command.json
@@ -2,7 +2,8 @@
   "name": "command",
   "type": "registry:ui",
   "dependencies": [
-    "reka-ui"
+    "reka-ui",
+    "@vueuse/core"
   ],
   "registryDependencies": [
     "utils",
@@ -11,7 +12,7 @@
   "files": [
     {
       "path": "ui/command/Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'\nimport { provideCommandContext } from '.'\n\nconst props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: '',\n})\n\nconst emits = defineEmits<ListboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nfunction handleSelect() {\n  filterState.search = ''\n}\n\nwatch(() => filterState.search, () => {\n  filterItems()\n})\n\nprovideCommandContext({\n  allItems,\n  allGroups,\n  filterState,\n})\n</script>\n\n<template>\n  <ListboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ListboxRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -23,37 +24,37 @@
     },
     {
       "path": "ui/command/CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { filterState } = useCommand()\nconst isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive v-if=\"isRender\" v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </Primitive>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'\nimport { provideCommandGroupContext, useCommand } from '.'\n\nconst props = defineProps<ListboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { allGroups, filterState } = useCommand()\nconst id = useId()\n\nconst isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))\n\nprovideCommandGroupContext({ id })\nonMounted(() => {\n  if (!allGroups.value.has(id))\n    allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    v-bind=\"delegatedProps\"\n    :id=\"id\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <ListboxGroupLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ListboxGroupLabel>\n    <slot />\n  </ListboxGroup>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ListboxFilterProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst { filterState } = useCommand()\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ListboxFilter\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      v-model=\"filterState.search\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useCurrentElement } from '@vueuse/core'\nimport { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'\nimport { useCommand, useCommandGroup } from '.'\n\nconst props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ListboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst id = useId()\nconst { filterState, allItems, allGroups } = useCommand()\nconst groupContext = useCommandGroup()\n\nconst isRender = computed(() => {\n  if (!filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nconst itemRef = ref()\nconst currentElement = useCurrentElement(itemRef)\nonMounted(() => {\n  if (!(currentElement.value instanceof HTMLElement))\n    return\n\n  // textValue to perform filter\n  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!allGroups.value.has(groupId)) {\n      allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"forwarded\"\n    :id=\"id\"\n    ref=\"itemRef\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n    @select=\"() => {\n      filterState.search = ''\n    }\"\n  >\n    <slot />\n  </ListboxItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxContent, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ListboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
     {
       "path": "ui/command/CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Separator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -65,7 +66,7 @@
     },
     {
       "path": "ui/command/index.ts",
-      "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+      "content": "import type { Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n\nexport const [useCommand, provideCommandContext] = createContext<{\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n}>('Command')\n\nexport const [useCommandGroup, provideCommandGroupContext] = createContext<{\n  id?: string\n}>('CommandGroup')\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/radio-group.json b/apps/www/src/public/r/styles/new-york/radio-group.json
index 86eac016a..b41eb3d9d 100644
--- a/apps/www/src/public/r/styles/new-york/radio-group.json
+++ b/apps/www/src/public/r/styles/new-york/radio-group.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "ui/radio-group/RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 text-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index fb89ed0b8..3131f4cf2 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -1050,7 +1050,8 @@
     "name": "command",
     "type": "registry:ui",
     "dependencies": [
-      "reka-ui"
+      "reka-ui",
+      "@vueuse/core"
     ],
     "registryDependencies": [
       "utils",
@@ -1059,7 +1060,7 @@
     "files": [
       {
         "path": "ui/command/Command.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'\nimport { provideCommandContext } from '.'\n\nconst props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: '',\n})\n\nconst emits = defineEmits<ListboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nfunction handleSelect() {\n  filterState.search = ''\n}\n\nwatch(() => filterState.search, () => {\n  filterItems()\n})\n\nprovideCommandContext({\n  allItems,\n  allGroups,\n  filterState,\n})\n</script>\n\n<template>\n  <ListboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ListboxRoot>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1071,37 +1072,37 @@
       },
       {
         "path": "ui/command/CommandEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { filterState } = useCommand()\nconst isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive v-if=\"isRender\" v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'\nimport { provideCommandGroupContext, useCommand } from '.'\n\nconst props = defineProps<ListboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { allGroups, filterState } = useCommand()\nconst id = useId()\n\nconst isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))\n\nprovideCommandGroupContext({ id })\nonMounted(() => {\n  if (!allGroups.value.has(id))\n    allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    v-bind=\"delegatedProps\"\n    :id=\"id\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <ListboxGroupLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ListboxGroupLabel>\n    <slot />\n  </ListboxGroup>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ListboxFilterProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst { filterState } = useCommand()\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ListboxFilter\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      v-model=\"filterState.search\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useCurrentElement } from '@vueuse/core'\nimport { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'\nimport { useCommand, useCommandGroup } from '.'\n\nconst props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ListboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst id = useId()\nconst { filterState, allItems, allGroups } = useCommand()\nconst groupContext = useCommandGroup()\n\nconst isRender = computed(() => {\n  if (!filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nconst itemRef = ref()\nconst currentElement = useCurrentElement(itemRef)\nonMounted(() => {\n  if (!(currentElement.value instanceof HTMLElement))\n    return\n\n  // textValue to perform filter\n  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!allGroups.value.has(groupId)) {\n      allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"forwarded\"\n    :id=\"id\"\n    ref=\"itemRef\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n    @select=\"() => {\n      filterState.search = ''\n    }\"\n  >\n    <slot />\n  </ListboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandList.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxContent, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ListboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Separator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -1113,7 +1114,7 @@
       },
       {
         "path": "ui/command/index.ts",
-        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "content": "import type { Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n\nexport const [useCommand, provideCommandContext] = createContext<{\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n}>('Command')\n\nexport const [useCommandGroup, provideCommandGroupContext] = createContext<{\n  id?: string\n}>('CommandGroup')\n",
         "type": "registry:ui",
         "target": ""
       }
@@ -2001,7 +2002,7 @@
       },
       {
         "path": "ui/radio-group/RadioGroupItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-vue-next'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator class=\"flex items-center justify-center\">\n      <Check class=\"h-3.5 w-3.5 text-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -8342,7 +8343,8 @@
     "name": "command",
     "type": "registry:ui",
     "dependencies": [
-      "reka-ui"
+      "reka-ui",
+      "@vueuse/core"
     ],
     "registryDependencies": [
       "utils",
@@ -8351,7 +8353,7 @@
     "files": [
       {
         "path": "ui/command/Command.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  open: true,\n  modelValue: '',\n})\n\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'\nimport { provideCommandContext } from '.'\n\nconst props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: '',\n})\n\nconst emits = defineEmits<ListboxRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nfunction handleSelect() {\n  filterState.search = ''\n}\n\nwatch(() => filterState.search, () => {\n  filterItems()\n})\n\nprovideCommandContext({\n  allItems,\n  allGroups,\n  filterState,\n})\n</script>\n\n<template>\n  <ListboxRoot\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)\"\n  >\n    <slot />\n  </ListboxRoot>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -8363,37 +8365,37 @@
       },
       {
         "path": "ui/command/CommandEmpty.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Primitive } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { filterState } = useCommand()\nconst isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive v-if=\"isRender\" v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </Primitive>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandGroup.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'\nimport { provideCommandGroupContext, useCommand } from '.'\n\nconst props = defineProps<ListboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst { allGroups, filterState } = useCommand()\nconst id = useId()\n\nconst isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))\n\nprovideCommandGroupContext({ id })\nonMounted(() => {\n  if (!allGroups.value.has(id))\n    allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    v-bind=\"delegatedProps\"\n    :id=\"id\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <ListboxGroupLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ListboxGroupLabel>\n    <slot />\n  </ListboxGroup>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandInput.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      :class=\"cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Search } from 'lucide-vue-next'\nimport { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { useCommand } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ListboxFilterProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst { filterState } = useCommand()\n</script>\n\n<template>\n  <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n    <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <ListboxFilter\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      v-model=\"filterState.search\"\n      auto-focus\n      :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n    />\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandItem.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useCurrentElement } from '@vueuse/core'\nimport { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'\nimport { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'\nimport { useCommand, useCommandGroup } from '.'\n\nconst props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ListboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst id = useId()\nconst { filterState, allItems, allGroups } = useCommand()\nconst groupContext = useCommandGroup()\n\nconst isRender = computed(() => {\n  if (!filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nconst itemRef = ref()\nconst currentElement = useCurrentElement(itemRef)\nonMounted(() => {\n  if (!(currentElement.value instanceof HTMLElement))\n    return\n\n  // textValue to perform filter\n  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!allGroups.value.has(groupId)) {\n      allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"forwarded\"\n    :id=\"id\"\n    ref=\"itemRef\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n    @select=\"() => {\n      filterState.search = ''\n    }\"\n  >\n    <slot />\n  </ListboxItem>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandList.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  dismissable: false,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ComboboxContent>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ListboxContent, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ListboxContent v-bind=\"forwarded\" :class=\"cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)\">\n    <div role=\"presentation\">\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
       {
         "path": "ui/command/CommandSeparator.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { SeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { Separator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <Separator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
         "type": "registry:ui",
         "target": ""
       },
@@ -8405,7 +8407,7 @@
       },
       {
         "path": "ui/command/index.ts",
-        "content": "export { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n",
+        "content": "import type { Ref } from 'vue'\nimport { createContext } from 'reka-ui'\n\nexport { default as Command } from './Command.vue'\nexport { default as CommandDialog } from './CommandDialog.vue'\nexport { default as CommandEmpty } from './CommandEmpty.vue'\nexport { default as CommandGroup } from './CommandGroup.vue'\nexport { default as CommandInput } from './CommandInput.vue'\nexport { default as CommandItem } from './CommandItem.vue'\nexport { default as CommandList } from './CommandList.vue'\nexport { default as CommandSeparator } from './CommandSeparator.vue'\nexport { default as CommandShortcut } from './CommandShortcut.vue'\n\nexport const [useCommand, provideCommandContext] = createContext<{\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n}>('Command')\n\nexport const [useCommandGroup, provideCommandGroupContext] = createContext<{\n  id?: string\n}>('CommandGroup')\n",
         "type": "registry:ui",
         "target": ""
       }
diff --git a/apps/www/src/registry/default/ui/command/Command.vue b/apps/www/src/registry/default/ui/command/Command.vue
index 467ae0192..959701013 100644
--- a/apps/www/src/registry/default/ui/command/Command.vue
+++ b/apps/www/src/registry/default/ui/command/Command.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
 
-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  open: true,
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: '',
 })
 
-const emits = defineEmits<ComboboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -18,13 +18,75 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
 </script>
 
 <template>
-  <ComboboxRoot
+  <ListboxRoot
     v-bind="forwarded"
     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
-  </ComboboxRoot>
+  </ListboxRoot>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandEmpty.vue b/apps/www/src/registry/default/ui/command/CommandEmpty.vue
index 1908f93c8..58795f217 100644
--- a/apps/www/src/registry/default/ui/command/CommandEmpty.vue
+++ b/apps/www/src/registry/default/ui/command/CommandEmpty.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from 'reka-ui'
+import type { PrimitiveProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxEmpty } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
   return delegated
 })
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
-  </ComboboxEmpty>
+  </Primitive>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandGroup.vue b/apps/www/src/registry/default/ui/command/CommandGroup.vue
index 683bf592e..fd4f5b388 100644
--- a/apps/www/src/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/registry/default/ui/command/CommandGroup.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'reka-ui'
+import type { ListboxGroupProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
 
-const props = defineProps<ComboboxGroupProps & {
+const props = defineProps<ListboxGroupProps & {
   class?: HTMLAttributes['class']
   heading?: string
 }>()
@@ -14,16 +15,32 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxGroup
+  <ListboxGroup
     v-bind="delegatedProps"
+    :id="id"
     :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
   >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
-    </ComboboxLabel>
+    </ListboxGroupLabel>
     <slot />
-  </ComboboxGroup>
+  </ListboxGroup>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandInput.vue b/apps/www/src/registry/default/ui/command/CommandInput.vue
index 2713203f1..4c3b963d0 100644
--- a/apps/www/src/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/registry/default/ui/command/CommandInput.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<ComboboxInputProps & {
+const props = defineProps<ListboxFilterProps & {
   class?: HTMLAttributes['class']
 }>()
 
@@ -19,15 +20,18 @@ const delegatedProps = computed(() => {
 })
 
 const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <ComboboxInput
+    <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
       auto-focus
-      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
   </div>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandItem.vue b/apps/www/src/registry/default/ui/command/CommandItem.vue
index dd5a872dc..a72d16d22 100644
--- a/apps/www/src/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/registry/default/ui/command/CommandItem.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,13 +16,63 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxItem
+  <ListboxItem
+    v-if="isRender"
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
   >
     <slot />
-  </ComboboxItem>
+  </ListboxItem>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandList.vue b/apps/www/src/registry/default/ui/command/CommandList.vue
index 82e81e96c..83c7d95a6 100644
--- a/apps/www/src/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/registry/default/ui/command/CommandList.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { ListboxContentProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { ListboxContent, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
-  dismissable: false,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,13 +12,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
-  </ComboboxContent>
+  </ListboxContent>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/CommandSeparator.vue b/apps/www/src/registry/default/ui/command/CommandSeparator.vue
index cc5f05507..41220204c 100644
--- a/apps/www/src/registry/default/ui/command/CommandSeparator.vue
+++ b/apps/www/src/registry/default/ui/command/CommandSeparator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'reka-ui'
+import type { SeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxSeparator } from 'reka-ui'
+import { Separator } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,10 +14,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
+  <Separator
     v-bind="delegatedProps"
     :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
-  </ComboboxSeparator>
+  </Separator>
 </template>
diff --git a/apps/www/src/registry/default/ui/command/index.ts b/apps/www/src/registry/default/ui/command/index.ts
index 0e35f4b9f..cb48e1ebd 100644
--- a/apps/www/src/registry/default/ui/command/index.ts
+++ b/apps/www/src/registry/default/ui/command/index.ts
@@ -1,3 +1,6 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
 export { default as Command } from './Command.vue'
 export { default as CommandDialog } from './CommandDialog.vue'
 export { default as CommandEmpty } from './CommandEmpty.vue'
@@ -7,3 +10,16 @@ export { default as CommandItem } from './CommandItem.vue'
 export { default as CommandList } from './CommandList.vue'
 export { default as CommandSeparator } from './CommandSeparator.vue'
 export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/apps/www/src/registry/new-york/ui/command/Command.vue b/apps/www/src/registry/new-york/ui/command/Command.vue
index 467ae0192..959701013 100644
--- a/apps/www/src/registry/new-york/ui/command/Command.vue
+++ b/apps/www/src/registry/new-york/ui/command/Command.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
 
-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  open: true,
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: '',
 })
 
-const emits = defineEmits<ComboboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -18,13 +18,75 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
 </script>
 
 <template>
-  <ComboboxRoot
+  <ListboxRoot
     v-bind="forwarded"
     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
   >
     <slot />
-  </ComboboxRoot>
+  </ListboxRoot>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandEmpty.vue b/apps/www/src/registry/new-york/ui/command/CommandEmpty.vue
index 1908f93c8..58795f217 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandEmpty.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandEmpty.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from 'reka-ui'
+import type { PrimitiveProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxEmpty } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
   return delegated
 })
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
-  </ComboboxEmpty>
+  </Primitive>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandGroup.vue b/apps/www/src/registry/new-york/ui/command/CommandGroup.vue
index 683bf592e..fd4f5b388 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandGroup.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandGroup.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'reka-ui'
+import type { ListboxGroupProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
 
-const props = defineProps<ComboboxGroupProps & {
+const props = defineProps<ListboxGroupProps & {
   class?: HTMLAttributes['class']
   heading?: string
 }>()
@@ -14,16 +15,32 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxGroup
+  <ListboxGroup
     v-bind="delegatedProps"
+    :id="id"
     :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
   >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
-    </ComboboxLabel>
+    </ListboxGroupLabel>
     <slot />
-  </ComboboxGroup>
+  </ListboxGroup>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/registry/new-york/ui/command/CommandInput.vue
index a8cb4e0da..4c3b963d0 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandInput.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<ComboboxInputProps & {
+const props = defineProps<ListboxFilterProps & {
   class?: HTMLAttributes['class']
 }>()
 
@@ -19,13 +20,16 @@ const delegatedProps = computed(() => {
 })
 
 const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
 </script>
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <ComboboxInput
+    <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
       auto-focus
       :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     />
diff --git a/apps/www/src/registry/new-york/ui/command/CommandItem.vue b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
index dcbe942e6..a72d16d22 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandItem.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandItem.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,13 +16,63 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
 </script>
 
 <template>
-  <ComboboxItem
+  <ListboxItem
+    v-if="isRender"
     v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
     :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
   >
     <slot />
-  </ComboboxItem>
+  </ListboxItem>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandList.vue b/apps/www/src/registry/new-york/ui/command/CommandList.vue
index 82e81e96c..83c7d95a6 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandList.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandList.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { ListboxContentProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { ListboxContent, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
-  dismissable: false,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,13 +12,13 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
-  </ComboboxContent>
+  </ListboxContent>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/CommandSeparator.vue b/apps/www/src/registry/new-york/ui/command/CommandSeparator.vue
index cc5f05507..41220204c 100644
--- a/apps/www/src/registry/new-york/ui/command/CommandSeparator.vue
+++ b/apps/www/src/registry/new-york/ui/command/CommandSeparator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'reka-ui'
+import type { SeparatorProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { ComboboxSeparator } from 'reka-ui'
+import { Separator } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,10 +14,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
+  <Separator
     v-bind="delegatedProps"
     :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
-  </ComboboxSeparator>
+  </Separator>
 </template>
diff --git a/apps/www/src/registry/new-york/ui/command/index.ts b/apps/www/src/registry/new-york/ui/command/index.ts
index 0e35f4b9f..cb48e1ebd 100644
--- a/apps/www/src/registry/new-york/ui/command/index.ts
+++ b/apps/www/src/registry/new-york/ui/command/index.ts
@@ -1,3 +1,6 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
 export { default as Command } from './Command.vue'
 export { default as CommandDialog } from './CommandDialog.vue'
 export { default as CommandEmpty } from './CommandEmpty.vue'
@@ -7,3 +10,16 @@ export { default as CommandItem } from './CommandItem.vue'
 export { default as CommandList } from './CommandList.vue'
 export { default as CommandSeparator } from './CommandSeparator.vue'
 export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 0f8649341..a9ca7e308 100644
--- a/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     "
   >
     <RadioGroupIndicator class="flex items-center justify-center">
-      <Check class="h-3.5 w-3.5 fill-primary" />
+      <Check class="h-3.5 w-3.5 text-primary" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>

From 18040192c861e87e3e2871b4d237d01e83830d5c Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 11 Dec 2024 15:05:55 +0800
Subject: [PATCH 39/39] refactor(Command, Combobox): adapt to respective
 component

---
 apps/www/.vitepress/theme/utils/codeeditor.ts |   6 +-
 apps/www/__registry__/index.ts                | 520 +++++++++++++++++-
 .../src/content/docs/components/combobox.md   |  16 +-
 .../src/content/docs/components/command.md    |  28 +-
 apps/www/src/public/r/index.json              | 104 ++++
 .../public/r/styles/default/ComboboxDemo.json |   6 +-
 .../public/r/styles/default/ComboboxForm.json |   5 +-
 .../r/styles/default/ComboboxTrigger.json     |  18 +
 .../r/styles/default/CommandDropdownMenu.json |  18 +
 .../public/r/styles/default/CommandForm.json  |  25 +
 .../r/styles/default/CommandPopover.json      |  18 +
 .../r/styles/default/CommandResponsive.json   |  21 +
 .../src/public/r/styles/default/combobox.json |  72 +++
 .../r/styles/new-york/ComboboxDemo.json       |   6 +-
 .../r/styles/new-york/ComboboxForm.json       |   5 +-
 .../r/styles/new-york/ComboboxTrigger.json    |  18 +
 .../styles/new-york/CommandDropdownMenu.json  |  18 +
 .../public/r/styles/new-york/CommandForm.json |  25 +
 .../r/styles/new-york/CommandPopover.json     |  18 +
 .../r/styles/new-york/CommandResponsive.json  |  21 +
 .../public/r/styles/new-york/combobox.json    |  72 +++
 apps/www/src/public/r/temp.json               | 366 +++++++++++-
 .../registry/default/example/ComboboxDemo.vue |  96 ++--
 .../registry/default/example/ComboboxForm.vue |  96 ++--
 .../default/example/ComboboxTrigger.vue       |  58 ++
 .../default/example/CommandDropdownMenu.vue   | 104 ++++
 .../registry/default/example/CommandForm.vue  | 121 ++++
 .../default/example/CommandPopover.vue        |  94 ++++
 .../default/example/CommandResponsive.vue     |  94 ++++
 .../registry/default/ui/combobox/Combobox.vue |  14 +
 .../default/ui/combobox/ComboboxAnchor.vue    |  25 +
 .../default/ui/combobox/ComboboxEmpty.vue     |  20 +
 .../default/ui/combobox/ComboboxGroup.vue     |  29 +
 .../default/ui/combobox/ComboboxInput.vue     |  26 +
 .../default/ui/combobox/ComboboxItem.vue      |  26 +
 .../default/ui/combobox/ComboboxList.vue      |  34 ++
 .../default/ui/combobox/ComboboxSeparator.vue |  23 +
 .../default/ui/combobox/ComboboxTrigger.vue   |  26 +
 .../src/registry/default/ui/combobox/index.ts |  10 +
 .../new-york/example/ComboboxDemo.vue         |  96 ++--
 .../new-york/example/ComboboxForm.vue         |  91 ++-
 .../new-york/example/ComboboxTrigger.vue      |  58 ++
 .../new-york/example/CommandDropdownMenu.vue  | 104 ++++
 .../registry/new-york/example/CommandForm.vue | 121 ++++
 .../new-york/example/CommandPopover.vue       |  94 ++++
 .../new-york/example/CommandResponsive.vue    |  94 ++++
 .../new-york/ui/combobox/Combobox.vue         |  14 +
 .../new-york/ui/combobox/ComboboxAnchor.vue   |  25 +
 .../new-york/ui/combobox/ComboboxEmpty.vue    |  20 +
 .../new-york/ui/combobox/ComboboxGroup.vue    |  29 +
 .../new-york/ui/combobox/ComboboxInput.vue    |  26 +
 .../new-york/ui/combobox/ComboboxItem.vue     |  26 +
 .../new-york/ui/combobox/ComboboxList.vue     |  34 ++
 .../ui/combobox/ComboboxSeparator.vue         |  23 +
 .../new-york/ui/combobox/ComboboxTrigger.vue  |  26 +
 .../registry/new-york/ui/combobox/index.ts    |  10 +
 56 files changed, 2911 insertions(+), 282 deletions(-)
 create mode 100644 apps/www/src/public/r/styles/default/ComboboxTrigger.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandDropdownMenu.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandForm.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandPopover.json
 create mode 100644 apps/www/src/public/r/styles/default/CommandResponsive.json
 create mode 100644 apps/www/src/public/r/styles/default/combobox.json
 create mode 100644 apps/www/src/public/r/styles/new-york/ComboboxTrigger.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandDropdownMenu.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandForm.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandPopover.json
 create mode 100644 apps/www/src/public/r/styles/new-york/CommandResponsive.json
 create mode 100644 apps/www/src/public/r/styles/new-york/combobox.json
 create mode 100644 apps/www/src/registry/default/example/ComboboxTrigger.vue
 create mode 100644 apps/www/src/registry/default/example/CommandDropdownMenu.vue
 create mode 100644 apps/www/src/registry/default/example/CommandForm.vue
 create mode 100644 apps/www/src/registry/default/example/CommandPopover.vue
 create mode 100644 apps/www/src/registry/default/example/CommandResponsive.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/Combobox.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxAnchor.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxEmpty.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxGroup.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxInput.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxItem.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxList.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxSeparator.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/ComboboxTrigger.vue
 create mode 100644 apps/www/src/registry/default/ui/combobox/index.ts
 create mode 100644 apps/www/src/registry/new-york/example/ComboboxTrigger.vue
 create mode 100644 apps/www/src/registry/new-york/example/CommandDropdownMenu.vue
 create mode 100644 apps/www/src/registry/new-york/example/CommandForm.vue
 create mode 100644 apps/www/src/registry/new-york/example/CommandPopover.vue
 create mode 100644 apps/www/src/registry/new-york/example/CommandResponsive.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/Combobox.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxAnchor.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxEmpty.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxGroup.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxInput.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxItem.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxList.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxSeparator.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/ComboboxTrigger.vue
 create mode 100644 apps/www/src/registry/new-york/ui/combobox/index.ts

diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index f6c424697..35e289019 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -1,11 +1,11 @@
 import type { RegistryStyle } from '@/registry/registry-styles'
 import sdk from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
+// @ts-expect-error ?raw
+import cssRaw from '../../../../../packages/cli/test/fixtures/frameworks/nuxt/assets/css/tailwind.css?raw'
 import { Index as demoIndex } from '../../../../www/__registry__'
 // @ts-expect-error ?raw
 import tailwindConfigRaw from '../../../tailwind.config?raw'
-// @ts-expect-error ?raw
-import cssRaw from '../../../../../packages/cli/test/fixtures/frameworks/nuxt/assets/css/tailwind.css?raw'
 
 export function makeCodeSandboxParams(componentName: string, style: RegistryStyle, sources: Record<string, string>) {
   let files: Record<string, any> = {}
@@ -132,7 +132,7 @@ function constructFiles(componentName: string, style: RegistryStyle, sources: Re
   })
 
   // @ts-expect-error componentName might not exist in Index
-  const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils')
+  const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils') ?? []
 
   const files = {
     'package.json': {
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 9544e7e72..4058a0fda 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -632,6 +632,57 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "combobox": {
+      name: "combobox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/combobox/Combobox.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxAnchor.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxEmpty.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxGroup.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxInput.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxItem.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxList.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxSeparator.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxTrigger.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/index.ts",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/ui/combobox/Combobox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "command": {
       name: "command",
       description: "",
@@ -2985,7 +3036,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","popover"],
+      registryDependencies: ["utils","combobox"],
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -3015,7 +3066,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      registryDependencies: ["utils","button","combobox","form","toast"],
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
@@ -3056,6 +3107,21 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "ComboboxTrigger": {
+      name: "ComboboxTrigger",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","combobox"],
+      files: [{
+        path: "registry/new-york/example/ComboboxTrigger.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxTrigger.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "CommandDemo": {
       name: "CommandDemo",
       description: "",
@@ -3086,6 +3152,66 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "CommandDropdownMenu": {
+      name: "CommandDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/example/CommandDropdownMenu.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandForm": {
+      name: "CommandForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","command","form","popover","toast"],
+      files: [{
+        path: "registry/new-york/example/CommandForm.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandPopover": {
+      name: "CommandPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/new-york/example/CommandPopover.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandResponsive": {
+      name: "CommandResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/new-york/example/CommandResponsive.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
       description: "",
@@ -6352,6 +6478,57 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "combobox": {
+      name: "combobox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/new-york/ui/combobox/Combobox.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxAnchor.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxEmpty.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxGroup.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxInput.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxItem.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxList.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxSeparator.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/ComboboxTrigger.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/ui/combobox/index.ts",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/ui/combobox/Combobox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "command": {
       name: "command",
       description: "",
@@ -8705,7 +8882,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","popover"],
+      registryDependencies: ["utils","combobox"],
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -8735,7 +8912,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      registryDependencies: ["utils","button","combobox","form","toast"],
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
@@ -8776,6 +8953,21 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "ComboboxTrigger": {
+      name: "ComboboxTrigger",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","combobox"],
+      files: [{
+        path: "registry/new-york/example/ComboboxTrigger.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/ComboboxTrigger.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "CommandDemo": {
       name: "CommandDemo",
       description: "",
@@ -8806,6 +8998,66 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "CommandDropdownMenu": {
+      name: "CommandDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/example/CommandDropdownMenu.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandForm": {
+      name: "CommandForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","command","form","popover","toast"],
+      files: [{
+        path: "registry/new-york/example/CommandForm.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandPopover": {
+      name: "CommandPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/new-york/example/CommandPopover.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandResponsive": {
+      name: "CommandResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/new-york/example/CommandResponsive.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/example/CommandResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
       description: "",
@@ -12088,6 +12340,57 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "combobox": {
+      name: "combobox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/combobox/Combobox.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxAnchor.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxEmpty.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxGroup.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxInput.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxItem.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxList.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxSeparator.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxTrigger.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/index.ts",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: () => import("@/registry/default/ui/combobox/Combobox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "command": {
       name: "command",
       description: "",
@@ -14441,7 +14744,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","popover"],
+      registryDependencies: ["utils","combobox"],
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -14471,7 +14774,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      registryDependencies: ["utils","button","combobox","form","toast"],
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
@@ -14512,6 +14815,21 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "ComboboxTrigger": {
+      name: "ComboboxTrigger",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","combobox"],
+      files: [{
+        path: "registry/default/example/ComboboxTrigger.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/ComboboxTrigger.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "CommandDemo": {
       name: "CommandDemo",
       description: "",
@@ -14542,6 +14860,66 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "CommandDropdownMenu": {
+      name: "CommandDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/CommandDropdownMenu.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandForm": {
+      name: "CommandForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","command","form","popover","toast"],
+      files: [{
+        path: "registry/default/example/CommandForm.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandPopover": {
+      name: "CommandPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/default/example/CommandPopover.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandResponsive": {
+      name: "CommandResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/default/example/CommandResponsive.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
       description: "",
@@ -17808,6 +18186,57 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "combobox": {
+      name: "combobox",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["utils"],
+      files: [{
+        path: "registry/default/ui/combobox/Combobox.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxAnchor.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxEmpty.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxGroup.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxInput.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxItem.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxList.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxSeparator.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/ComboboxTrigger.vue",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/ui/combobox/index.ts",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: () => import("@/registry/default/ui/combobox/Combobox.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "command": {
       name: "command",
       description: "",
@@ -20161,7 +20590,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxDemo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","popover"],
+      registryDependencies: ["utils","combobox"],
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
@@ -20191,7 +20620,7 @@ export const Index: Record<string, any> = {
       name: "ComboboxForm",
       description: "",
       type: "registry:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      registryDependencies: ["utils","button","combobox","form","toast"],
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
@@ -20232,6 +20661,21 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "ComboboxTrigger": {
+      name: "ComboboxTrigger",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","combobox"],
+      files: [{
+        path: "registry/default/example/ComboboxTrigger.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/ComboboxTrigger.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "CommandDemo": {
       name: "CommandDemo",
       description: "",
@@ -20262,6 +20706,66 @@ export const Index: Record<string, any> = {
       category: "",
       subcategory: ""
     },
+    "CommandDropdownMenu": {
+      name: "CommandDropdownMenu",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","dropdown-menu"],
+      files: [{
+        path: "registry/default/example/CommandDropdownMenu.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandDropdownMenu.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandForm": {
+      name: "CommandForm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["utils","button","command","form","popover","toast"],
+      files: [{
+        path: "registry/default/example/CommandForm.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandForm.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandPopover": {
+      name: "CommandPopover",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","popover"],
+      files: [{
+        path: "registry/default/example/CommandPopover.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandPopover.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "CommandResponsive": {
+      name: "CommandResponsive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["button","command","drawer","popover"],
+      files: [{
+        path: "registry/default/example/CommandResponsive.vue",
+        type: "registry:example",
+        target: ""
+      }],
+      component: () => import("@/registry/default/example/CommandResponsive.vue").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
     "ContextMenuDemo": {
       name: "ContextMenuDemo",
       description: "",
diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index 5e741cf5b..56fa08749 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -1,6 +1,8 @@
 ---
 title: Combobox
 description: Autocomplete input and command palette with a list of suggestions.
+source: apps/www/registry/default/ui/combobox
+primitive: https://www.reka-ui.com/docs/components/combobox.html
 ---
 
 <ComponentPreview name="ComboboxDemo" />
@@ -9,9 +11,9 @@ description: Autocomplete input and command palette with a list of suggestions.
 
 ## Installation
 
-The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
-
-See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
+```bash
+npx shadcn-vue@latest add combobox
+```
 
 ## Usage
 
@@ -92,11 +94,11 @@ const value = ref('')
 
 ## Examples
 
-### Combobox
+### Combobox Trigger
 
-<ComponentPreview name="ComboboxDemo" />
+<ComponentPreview name="ComboboxTrigger" />
 
-### Popover
+<!-- ### Popover
 
 <ComponentPreview name="ComboboxPopover" />
 
@@ -108,7 +110,7 @@ const value = ref('')
 
 You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
 
-<ComponentPreview name="ComboboxResponsive" />
+<ComponentPreview name="ComboboxResponsive" /> -->
 
 ### Form
 
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 6d095839a..e010344d3 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -2,7 +2,7 @@
 title: Command
 description: Fast, composable, unstyled command menu.
 source: apps/www/registry/default/ui/command
-primitive: https://www.reka-ui.com/docs/components/combobox.html
+primitive: https://www.reka-ui.com/docs/components/listbox.html
 ---
 
 <ComponentPreview name="CommandDemo" />
@@ -134,6 +134,28 @@ watch(CmdJ, (v) => {
 </template>
 ```
 
-### Combobox
+<br></br>
 
-You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
+<Callout>
+
+You can use the `<Command />` component like a combobox.
+
+</Callout>
+
+### Popover
+
+<ComponentPreview name="CommandPopover" />
+
+### Dropdown menu
+
+<ComponentPreview name="CommandDropdownMenu" />
+
+### Responsive
+
+You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
+
+<ComponentPreview name="CommandResponsive" />
+
+### Form
+
+<ComponentPreview name="CommandForm" />
diff --git a/apps/www/src/public/r/index.json b/apps/www/src/public/r/index.json
index 5e7f4fc6b..06b375fab 100644
--- a/apps/www/src/public/r/index.json
+++ b/apps/www/src/public/r/index.json
@@ -656,6 +656,58 @@
       }
     ]
   },
+  {
+    "name": "combobox",
+    "type": "registry:ui",
+    "dependencies": [
+      "reka-ui"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/combobox/Combobox.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxAnchor.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxEmpty.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxGroup.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxInput.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxItem.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxList.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxSeparator.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxTrigger.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/index.ts",
+        "type": "registry:ui"
+      }
+    ]
+  },
   {
     "name": "command",
     "type": "registry:ui",
@@ -2780,6 +2832,58 @@
       }
     ]
   },
+  {
+    "name": "combobox",
+    "type": "registry:ui",
+    "dependencies": [
+      "reka-ui"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/combobox/Combobox.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxAnchor.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxEmpty.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxGroup.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxInput.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxItem.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxList.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxSeparator.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/ComboboxTrigger.vue",
+        "type": "registry:ui"
+      },
+      {
+        "path": "ui/combobox/index.ts",
+        "type": "registry:ui"
+      }
+    ]
+  },
   {
     "name": "command",
     "type": "registry:ui",
diff --git a/apps/www/src/public/r/styles/default/ComboboxDemo.json b/apps/www/src/public/r/styles/default/ComboboxDemo.json
index 74c9b166a..66401711a 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDemo.json
@@ -4,14 +4,12 @@
   "dependencies": [],
   "registryDependencies": [
     "utils",
-    "button",
-    "command",
-    "popover"
+    "combobox"
   ],
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/default/ui/combobox'\nimport { Check, Search } from 'lucide-vue-next'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n</script>\n\n<template>\n  <Combobox by=\"label\">\n    <ComboboxAnchor>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9\" :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/ComboboxForm.json b/apps/www/src/public/r/styles/default/ComboboxForm.json
index 18d52e4af..724db4a0b 100644
--- a/apps/www/src/public/r/styles/default/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/default/ComboboxForm.json
@@ -9,15 +9,14 @@
   "registryDependencies": [
     "utils",
     "button",
-    "command",
+    "combobox",
     "form",
-    "popover",
     "toast"
   ],
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'\n\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n\n        <Combobox by=\"label\">\n          <FormControl>\n            <ComboboxAnchor>\n              <div class=\"relative w-full max-w-sm items-center\">\n                <ComboboxInput :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n                <ComboboxTrigger class=\"absolute end-0 inset-y-0 flex items-center justify-center px-3\">\n                  <ChevronsUpDown class=\"size-4 text-muted-foreground\" />\n                </ComboboxTrigger>\n              </div>\n            </ComboboxAnchor>\n          </FormControl>\n\n          <ComboboxList>\n            <ComboboxEmpty>\n              Nothing found.\n            </ComboboxEmpty>\n\n            <ComboboxGroup>\n              <ComboboxItem\n                v-for=\"language in languages\"\n                :key=\"language.value\"\n                :value=\"language\"\n                @select=\"() => {\n                  setFieldValue('language', language.value)\n                }\"\n              >\n                {{ language.label }}\n\n                <ComboboxItemIndicator>\n                  <Check :class=\"cn('ml-auto h-4 w-4')\" />\n                </ComboboxItemIndicator>\n              </ComboboxItem>\n            </ComboboxGroup>\n          </ComboboxList>\n        </Combobox>\n\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/default/ComboboxTrigger.json b/apps/www/src/public/r/styles/default/ComboboxTrigger.json
new file mode 100644
index 000000000..7de6f6ee9
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/ComboboxTrigger.json
@@ -0,0 +1,18 @@
+{
+  "name": "ComboboxTrigger",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button",
+    "combobox"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'\nimport { Check, ChevronsUpDown, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst value = ref<typeof frameworks[0]>()\n</script>\n\n<template>\n  <Combobox v-model=\"value\" by=\"label\">\n    <ComboboxAnchor as-child>\n      <ComboboxTrigger as-child>\n        <Button variant=\"outline\" class=\"justify-between\">\n          {{ value?.label ?? 'Select framework' }}\n\n          <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </ComboboxTrigger>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandDropdownMenu.json b/apps/www/src/public/r/styles/default/CommandDropdownMenu.json
new file mode 100644
index 000000000..a9cc6d369
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandDropdownMenu.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandDropdownMenu",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandForm.json b/apps/www/src/public/r/styles/default/CommandForm.json
new file mode 100644
index 000000000..6170e277a
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "CommandForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button",
+    "command",
+    "form",
+    "popover",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CommandForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandPopover.json b/apps/www/src/public/r/styles/default/CommandPopover.json
new file mode 100644
index 000000000..2b838d636
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandPopover.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandPopover",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/CommandPopover.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/CommandResponsive.json b/apps/www/src/public/r/styles/default/CommandResponsive.json
new file mode 100644
index 000000000..ef97e0383
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/CommandResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "CommandResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "drawer",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/CommandResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/combobox.json b/apps/www/src/public/r/styles/default/combobox.json
new file mode 100644
index 000000000..ecb1e8351
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/combobox.json
@@ -0,0 +1,72 @@
+{
+  "name": "combobox",
+  "type": "registry:ui",
+  "dependencies": [
+    "reka-ui"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/combobox/Combobox.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot v-bind=\"forwarded\">\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxAnchor.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxAnchorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxAnchor, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxAnchor\n    v-bind=\"forwarded\"\n    :class=\"cn('w-[200px]', props.class)\"\n  >\n    <slot />\n  </ComboboxAnchor>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxList.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxTrigger, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('', props.class)\"\n    tabindex=\"0\"\n  >\n    <slot />\n  </ComboboxTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/index.ts",
+      "content": "export { default as Combobox } from './Combobox.vue'\nexport { default as ComboboxAnchor } from './ComboboxAnchor.vue'\nexport { default as ComboboxEmpty } from './ComboboxEmpty.vue'\nexport { default as ComboboxGroup } from './ComboboxGroup.vue'\nexport { default as ComboboxInput } from './ComboboxInput.vue'\nexport { default as ComboboxItem } from './ComboboxItem.vue'\nexport { default as ComboboxList } from './ComboboxList.vue'\nexport { default as ComboboxSeparator } from './ComboboxSeparator.vue'\n\nexport { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
index aee8cd53f..5f1fd80b4 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -4,14 +4,12 @@
   "dependencies": [],
   "registryDependencies": [
     "utils",
-    "button",
-    "command",
-    "popover"
+    "combobox"
   ],
   "files": [
     {
       "path": "example/ComboboxDemo.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/new-york/ui/combobox'\nimport { Check, Search } from 'lucide-vue-next'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n</script>\n\n<template>\n  <Combobox by=\"label\">\n    <ComboboxAnchor>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9\" :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
index ecfa5c631..30046364b 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -9,15 +9,14 @@
   "registryDependencies": [
     "utils",
     "button",
-    "command",
+    "combobox",
     "form",
-    "popover",
     "toast"
   ],
   "files": [
     {
       "path": "example/ComboboxForm.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'\n\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n\n        <Combobox by=\"label\">\n          <FormControl>\n            <ComboboxAnchor>\n              <div class=\"relative w-full max-w-sm items-center\">\n                <ComboboxInput :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n                <ComboboxTrigger class=\"absolute end-0 inset-y-0 flex items-center justify-center px-3\">\n                  <ChevronsUpDown class=\"size-4 text-muted-foreground\" />\n                </ComboboxTrigger>\n              </div>\n            </ComboboxAnchor>\n          </FormControl>\n\n          <ComboboxList>\n            <ComboboxEmpty>\n              Nothing found.\n            </ComboboxEmpty>\n\n            <ComboboxGroup>\n              <ComboboxItem\n                v-for=\"language in languages\"\n                :key=\"language.value\"\n                :value=\"language\"\n                @select=\"() => {\n                  setFieldValue('language', language.value)\n                }\"\n              >\n                {{ language.label }}\n\n                <ComboboxItemIndicator>\n                  <Check :class=\"cn('ml-auto h-4 w-4')\" />\n                </ComboboxItemIndicator>\n              </ComboboxItem>\n            </ComboboxGroup>\n          </ComboboxList>\n        </Combobox>\n\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxTrigger.json b/apps/www/src/public/r/styles/new-york/ComboboxTrigger.json
new file mode 100644
index 000000000..c2ae3d697
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/ComboboxTrigger.json
@@ -0,0 +1,18 @@
+{
+  "name": "ComboboxTrigger",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button",
+    "combobox"
+  ],
+  "files": [
+    {
+      "path": "example/ComboboxTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'\nimport { Check, ChevronsUpDown, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst value = ref<typeof frameworks[0]>()\n</script>\n\n<template>\n  <Combobox v-model=\"value\" by=\"label\">\n    <ComboboxAnchor as-child>\n      <ComboboxTrigger as-child>\n        <Button variant=\"outline\" class=\"justify-between\">\n          {{ value?.label ?? 'Select framework' }}\n\n          <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </ComboboxTrigger>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandDropdownMenu.json b/apps/www/src/public/r/styles/new-york/CommandDropdownMenu.json
new file mode 100644
index 000000000..ca1a5fdab
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandDropdownMenu.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandDropdownMenu",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "example/CommandDropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandForm.json b/apps/www/src/public/r/styles/new-york/CommandForm.json
new file mode 100644
index 000000000..d255da773
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandForm.json
@@ -0,0 +1,25 @@
+{
+  "name": "CommandForm",
+  "type": "registry:example",
+  "dependencies": [
+    "vee-validate",
+    "@vee-validate/zod",
+    "zod"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button",
+    "command",
+    "form",
+    "popover",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "example/CommandForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandPopover.json b/apps/www/src/public/r/styles/new-york/CommandPopover.json
new file mode 100644
index 000000000..33bbb8340
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandPopover.json
@@ -0,0 +1,18 @@
+{
+  "name": "CommandPopover",
+  "type": "registry:example",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/CommandPopover.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/CommandResponsive.json b/apps/www/src/public/r/styles/new-york/CommandResponsive.json
new file mode 100644
index 000000000..faaa86a3b
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/CommandResponsive.json
@@ -0,0 +1,21 @@
+{
+  "name": "CommandResponsive",
+  "type": "registry:example",
+  "dependencies": [
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "drawer",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "example/CommandResponsive.vue",
+      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/combobox.json b/apps/www/src/public/r/styles/new-york/combobox.json
new file mode 100644
index 000000000..ecb1e8351
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/combobox.json
@@ -0,0 +1,72 @@
+{
+  "name": "combobox",
+  "type": "registry:ui",
+  "dependencies": [
+    "reka-ui"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "ui/combobox/Combobox.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot v-bind=\"forwarded\">\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxAnchor.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxAnchorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxAnchor, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxAnchor\n    v-bind=\"forwarded\"\n    :class=\"cn('w-[200px]', props.class)\"\n  >\n    <slot />\n  </ComboboxAnchor>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxList.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/ComboboxTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxTrigger, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('', props.class)\"\n    tabindex=\"0\"\n  >\n    <slot />\n  </ComboboxTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": ""
+    },
+    {
+      "path": "ui/combobox/index.ts",
+      "content": "export { default as Combobox } from './Combobox.vue'\nexport { default as ComboboxAnchor } from './ComboboxAnchor.vue'\nexport { default as ComboboxEmpty } from './ComboboxEmpty.vue'\nexport { default as ComboboxGroup } from './ComboboxGroup.vue'\nexport { default as ComboboxInput } from './ComboboxInput.vue'\nexport { default as ComboboxItem } from './ComboboxItem.vue'\nexport { default as ComboboxList } from './ComboboxList.vue'\nexport { default as ComboboxSeparator } from './ComboboxSeparator.vue'\n\nexport { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index 3131f4cf2..f88496499 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -1046,6 +1046,78 @@
       }
     ]
   },
+  {
+    "name": "combobox",
+    "type": "registry:ui",
+    "dependencies": [
+      "reka-ui"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/combobox/Combobox.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot v-bind=\"forwarded\">\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxAnchor.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxAnchorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxAnchor, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxAnchor\n    v-bind=\"forwarded\"\n    :class=\"cn('w-[200px]', props.class)\"\n  >\n    <slot />\n  </ComboboxAnchor>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxTrigger, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('', props.class)\"\n    tabindex=\"0\"\n  >\n    <slot />\n  </ComboboxTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/index.ts",
+        "content": "export { default as Combobox } from './Combobox.vue'\nexport { default as ComboboxAnchor } from './ComboboxAnchor.vue'\nexport { default as ComboboxEmpty } from './ComboboxEmpty.vue'\nexport { default as ComboboxGroup } from './ComboboxGroup.vue'\nexport { default as ComboboxInput } from './ComboboxInput.vue'\nexport { default as ComboboxItem } from './ComboboxItem.vue'\nexport { default as ComboboxList } from './ComboboxList.vue'\nexport { default as ComboboxSeparator } from './ComboboxSeparator.vue'\n\nexport { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "command",
     "type": "registry:ui",
@@ -4108,14 +4180,12 @@
     "dependencies": [],
     "registryDependencies": [
       "utils",
-      "button",
-      "command",
-      "popover"
+      "combobox"
     ],
     "files": [
       {
         "path": "example/ComboboxDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/new-york/ui/combobox'\nimport { Check, Search } from 'lucide-vue-next'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n</script>\n\n<template>\n  <Combobox by=\"label\">\n    <ComboboxAnchor>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9\" :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4150,15 +4220,14 @@
     "registryDependencies": [
       "utils",
       "button",
-      "command",
+      "combobox",
       "form",
-      "popover",
       "toast"
     ],
     "files": [
       {
         "path": "example/ComboboxForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'\n\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n\n        <Combobox by=\"label\">\n          <FormControl>\n            <ComboboxAnchor>\n              <div class=\"relative w-full max-w-sm items-center\">\n                <ComboboxInput :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n                <ComboboxTrigger class=\"absolute end-0 inset-y-0 flex items-center justify-center px-3\">\n                  <ChevronsUpDown class=\"size-4 text-muted-foreground\" />\n                </ComboboxTrigger>\n              </div>\n            </ComboboxAnchor>\n          </FormControl>\n\n          <ComboboxList>\n            <ComboboxEmpty>\n              Nothing found.\n            </ComboboxEmpty>\n\n            <ComboboxGroup>\n              <ComboboxItem\n                v-for=\"language in languages\"\n                :key=\"language.value\"\n                :value=\"language\"\n                @select=\"() => {\n                  setFieldValue('language', language.value)\n                }\"\n              >\n                {{ language.label }}\n\n                <ComboboxItemIndicator>\n                  <Check :class=\"cn('ml-auto h-4 w-4')\" />\n                </ComboboxItemIndicator>\n              </ComboboxItem>\n            </ComboboxGroup>\n          </ComboboxList>\n        </Combobox>\n\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -4203,6 +4272,24 @@
       }
     ]
   },
+  {
+    "name": "ComboboxTrigger",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button",
+      "combobox"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'\nimport { Check, ChevronsUpDown, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst value = ref<typeof frameworks[0]>()\n</script>\n\n<template>\n  <Combobox v-model=\"value\" by=\"label\">\n    <ComboboxAnchor as-child>\n      <ComboboxTrigger as-child>\n        <Button variant=\"outline\" class=\"justify-between\">\n          {{ value?.label ?? 'Select framework' }}\n\n          <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </ComboboxTrigger>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "CommandDemo",
     "type": "registry:example",
@@ -4237,6 +4324,88 @@
       }
     ]
   },
+  {
+    "name": "CommandDropdownMenu",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button",
+      "command",
+      "form",
+      "popover",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CommandForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandPopover",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/CommandPopover.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "drawer",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/CommandResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "ContextMenuDemo",
     "type": "registry:example",
@@ -8339,6 +8508,78 @@
       }
     ]
   },
+  {
+    "name": "combobox",
+    "type": "registry:ui",
+    "dependencies": [
+      "reka-ui"
+    ],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      {
+        "path": "ui/combobox/Combobox.vue",
+        "content": "<script setup lang=\"ts\">\nimport { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot v-bind=\"forwarded\">\n    <slot />\n  </ComboboxRoot>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxAnchor.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxAnchorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxAnchor, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxAnchor\n    v-bind=\"forwarded\"\n    :class=\"cn('w-[200px]', props.class)\"\n  >\n    <slot />\n  </ComboboxAnchor>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxEmpty.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxEmpty } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxEmpty v-bind=\"delegatedProps\" :class=\"cn('py-6 text-center text-sm', props.class)\">\n    <slot />\n  </ComboboxEmpty>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxGroup.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxGroupProps & {\n  class?: HTMLAttributes['class']\n  heading?: string\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"delegatedProps\"\n    :class=\"cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxInput.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class']\n}>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxItem.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxList.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {\n  position: 'popper',\n  align: 'center',\n  sideOffset: 4,\n})\nconst emits = defineEmits<ComboboxContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ComboboxPortal>\n    <ComboboxContent\n      v-bind=\"forwarded\"\n      :class=\"cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)\"\n    >\n      <ComboboxViewport>\n        <slot />\n      </ComboboxViewport>\n    </ComboboxContent>\n  </ComboboxPortal>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxSeparator.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxSeparator } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"delegatedProps\"\n    :class=\"cn('-mx-1 h-px bg-border', props.class)\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/ComboboxTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport type { ComboboxTriggerProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { ComboboxTrigger, useForwardProps } from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ComboboxTrigger\n    v-bind=\"forwarded\"\n    :class=\"cn('', props.class)\"\n    tabindex=\"0\"\n  >\n    <slot />\n  </ComboboxTrigger>\n</template>\n",
+        "type": "registry:ui",
+        "target": ""
+      },
+      {
+        "path": "ui/combobox/index.ts",
+        "content": "export { default as Combobox } from './Combobox.vue'\nexport { default as ComboboxAnchor } from './ComboboxAnchor.vue'\nexport { default as ComboboxEmpty } from './ComboboxEmpty.vue'\nexport { default as ComboboxGroup } from './ComboboxGroup.vue'\nexport { default as ComboboxInput } from './ComboboxInput.vue'\nexport { default as ComboboxItem } from './ComboboxItem.vue'\nexport { default as ComboboxList } from './ComboboxList.vue'\nexport { default as ComboboxSeparator } from './ComboboxSeparator.vue'\n\nexport { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'\n",
+        "type": "registry:ui",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "command",
     "type": "registry:ui",
@@ -11401,14 +11642,12 @@
     "dependencies": [],
     "registryDependencies": [
       "utils",
-      "button",
-      "command",
-      "popover"
+      "combobox"
     ],
     "files": [
       {
         "path": "example/ComboboxDemo.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/default/ui/combobox'\nimport { Check, Search } from 'lucide-vue-next'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n</script>\n\n<template>\n  <Combobox by=\"label\">\n    <ComboboxAnchor>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9\" :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -11443,15 +11682,14 @@
     "registryDependencies": [
       "utils",
       "button",
-      "command",
+      "combobox",
       "form",
-      "popover",
       "toast"
     ],
     "files": [
       {
         "path": "example/ComboboxForm.vue",
-        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'\n\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n\n        <Combobox by=\"label\">\n          <FormControl>\n            <ComboboxAnchor>\n              <div class=\"relative w-full max-w-sm items-center\">\n                <ComboboxInput :display-value=\"(val) => val?.label ?? ''\" placeholder=\"Select framework...\" />\n                <ComboboxTrigger class=\"absolute end-0 inset-y-0 flex items-center justify-center px-3\">\n                  <ChevronsUpDown class=\"size-4 text-muted-foreground\" />\n                </ComboboxTrigger>\n              </div>\n            </ComboboxAnchor>\n          </FormControl>\n\n          <ComboboxList>\n            <ComboboxEmpty>\n              Nothing found.\n            </ComboboxEmpty>\n\n            <ComboboxGroup>\n              <ComboboxItem\n                v-for=\"language in languages\"\n                :key=\"language.value\"\n                :value=\"language\"\n                @select=\"() => {\n                  setFieldValue('language', language.value)\n                }\"\n              >\n                {{ language.label }}\n\n                <ComboboxItemIndicator>\n                  <Check :class=\"cn('ml-auto h-4 w-4')\" />\n                </ComboboxItemIndicator>\n              </ComboboxItem>\n            </ComboboxGroup>\n          </ComboboxList>\n        </Combobox>\n\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
         "target": ""
       }
@@ -11497,6 +11735,24 @@
       }
     ]
   },
+  {
+    "name": "ComboboxTrigger",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button",
+      "combobox"
+    ],
+    "files": [
+      {
+        "path": "example/ComboboxTrigger.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'\nimport { Check, ChevronsUpDown, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst value = ref<typeof frameworks[0]>()\n</script>\n\n<template>\n  <Combobox v-model=\"value\" by=\"label\">\n    <ComboboxAnchor as-child>\n      <ComboboxTrigger as-child>\n        <Button variant=\"outline\" class=\"justify-between\">\n          {{ value?.label ?? 'Select framework' }}\n\n          <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </ComboboxTrigger>\n    </ComboboxAnchor>\n\n    <ComboboxList>\n      <div class=\"relative w-full max-w-sm items-center\">\n        <ComboboxInput class=\"pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10\" placeholder=\"Select framework...\" />\n        <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-3\">\n          <Search class=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n\n      <ComboboxEmpty>\n        No framework found.\n      </ComboboxEmpty>\n\n      <ComboboxGroup>\n        <ComboboxItem\n          v-for=\"framework in frameworks\"\n          :key=\"framework.value\"\n          :value=\"framework\"\n        >\n          {{ framework.label }}\n\n          <ComboboxItemIndicator>\n            <Check :class=\"cn('ml-auto h-4 w-4')\" />\n          </ComboboxItemIndicator>\n        </ComboboxItem>\n      </ComboboxGroup>\n    </ComboboxList>\n  </Combobox>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "CommandDemo",
     "type": "registry:example",
@@ -11531,6 +11787,88 @@
       }
     ]
   },
+  {
+    "name": "CommandDropdownMenu",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "example/CommandDropdownMenu.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandForm",
+    "type": "registry:example",
+    "dependencies": [
+      "vee-validate",
+      "@vee-validate/zod",
+      "zod"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button",
+      "command",
+      "form",
+      "popover",
+      "toast"
+    ],
+    "files": [
+      {
+        "path": "example/CommandForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <Check\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandPopover",
+    "type": "registry:example",
+    "dependencies": [],
+    "registryDependencies": [
+      "button",
+      "command",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/CommandPopover.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
+  {
+    "name": "CommandResponsive",
+    "type": "registry:example",
+    "dependencies": [
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "button",
+      "command",
+      "drawer",
+      "popover"
+    ],
+    "files": [
+      {
+        "path": "example/CommandResponsive.vue",
+        "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
+        "type": "registry:example",
+        "target": ""
+      }
+    ]
+  },
   {
     "name": "ContextMenuDemo",
     "type": "registry:example",
diff --git a/apps/www/src/registry/default/example/ComboboxDemo.vue b/apps/www/src/registry/default/example/ComboboxDemo.vue
index 8a77ec2cc..6ad079567 100644
--- a/apps/www/src/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/registry/default/example/ComboboxDemo.vue
@@ -1,22 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Button } from '@/registry/default/ui/button'
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/registry/default/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/default/ui/combobox'
+import { Check, Search } from 'lucide-vue-next'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
@@ -25,54 +10,37 @@ const frameworks = [
   { value: 'remix', label: 'Remix' },
   { value: 'astro', label: 'Astro' },
 ]
-
-const open = ref(false)
-const value = ref('')
 </script>
 
 <template>
-  <Popover v-model:open="open">
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        role="combobox"
-        :aria-expanded="open"
-        class="w-[200px] justify-between"
-      >
-        {{ value
-          ? frameworks.find((framework) => framework.value === value)?.label
-          : "Select framework..." }}
-        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-[200px] p-0">
-      <Command>
-        <CommandInput class="h-9" placeholder="Search framework..." />
-        <CommandEmpty>No framework found.</CommandEmpty>
-        <CommandList>
-          <CommandGroup>
-            <CommandItem
-              v-for="framework in frameworks"
-              :key="framework.value"
-              :value="framework.value"
-              @select="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  value = ev.detail.value
-                }
-                open = false
-              }"
-            >
-              {{ framework.label }}
-              <Check
-                :class="cn(
-                  'ml-auto h-4 w-4',
-                  value === framework.value ? 'opacity-100' : 'opacity-0',
-                )"
-              />
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </PopoverContent>
-  </Popover>
+  <Combobox by="label">
+    <ComboboxAnchor>
+      <div class="relative w-full max-w-sm items-center">
+        <ComboboxInput class="pl-9" :display-value="(val) => val?.label ?? ''" placeholder="Select framework..." />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+          <Search class="size-4 text-muted-foreground" />
+        </span>
+      </div>
+    </ComboboxAnchor>
+
+    <ComboboxList>
+      <ComboboxEmpty>
+        No framework found.
+      </ComboboxEmpty>
+
+      <ComboboxGroup>
+        <ComboboxItem
+          v-for="framework in frameworks"
+          :key="framework.value"
+          :value="framework"
+        >
+          {{ framework.label }}
+
+          <ComboboxItemIndicator>
+            <Check :class="cn('ml-auto h-4 w-4')" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxGroup>
+    </ComboboxList>
+  </Combobox>
 </template>
diff --git a/apps/www/src/registry/default/example/ComboboxForm.vue b/apps/www/src/registry/default/example/ComboboxForm.vue
index 796f02ac8..5a2768bed 100644
--- a/apps/www/src/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/registry/default/example/ComboboxForm.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Button } from '@/registry/default/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/registry/default/ui/command'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'
+
 import {
   FormControl,
   FormDescription,
@@ -18,11 +12,6 @@ import {
   FormMessage,
 } from '@/registry/default/ui/form'
 
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/default/ui/popover'
 import { toast } from '@/registry/default/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
@@ -40,7 +29,7 @@ const languages = [
   { label: 'Japanese', value: 'ja' },
   { label: 'Korean', value: 'ko' },
   { label: 'Chinese', value: 'zh' },
-]
+] as const
 
 const formSchema = toTypedSchema(z.object({
   language: z.string({
@@ -48,8 +37,11 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setFieldValue, values } = useForm({
+const { handleSubmit, setFieldValue } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+    language: '',
+  },
 })
 
 const onSubmit = handleSubmit((values) => {
@@ -65,45 +57,43 @@ const onSubmit = handleSubmit((values) => {
     <FormField name="language">
       <FormItem class="flex flex-col">
         <FormLabel>Language</FormLabel>
-        <Popover>
-          <PopoverTrigger as-child>
-            <FormControl>
-              <Button
-                variant="outline"
-                role="combobox"
-                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
+
+        <Combobox by="label">
+          <FormControl>
+            <ComboboxAnchor>
+              <div class="relative w-full max-w-sm items-center">
+                <ComboboxInput :display-value="(val) => val?.label ?? ''" placeholder="Select framework..." />
+                <ComboboxTrigger class="absolute end-0 inset-y-0 flex items-center justify-center px-3">
+                  <ChevronsUpDown class="size-4 text-muted-foreground" />
+                </ComboboxTrigger>
+              </div>
+            </ComboboxAnchor>
+          </FormControl>
+
+          <ComboboxList>
+            <ComboboxEmpty>
+              Nothing found.
+            </ComboboxEmpty>
+
+            <ComboboxGroup>
+              <ComboboxItem
+                v-for="language in languages"
+                :key="language.value"
+                :value="language"
+                @select="() => {
+                  setFieldValue('language', language.value)
+                }"
               >
-                {{ values.language ? languages.find(
-                  (language) => language.value === values.language,
-                )?.label : 'Select language...' }}
-                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </Button>
-            </FormControl>
-          </PopoverTrigger>
-          <PopoverContent class="w-[200px] p-0">
-            <Command>
-              <CommandInput placeholder="Search language..." />
-              <CommandEmpty>Nothing found.</CommandEmpty>
-              <CommandList>
-                <CommandGroup>
-                  <CommandItem
-                    v-for="language in languages"
-                    :key="language.value"
-                    :value="language.label"
-                    @select="() => {
-                      setFieldValue('language', language.value)
-                    }"
-                  >
-                    <Check
-                      :class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
-                    />
-                    {{ language.label }}
-                  </CommandItem>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+                {{ language.label }}
+
+                <ComboboxItemIndicator>
+                  <Check :class="cn('ml-auto h-4 w-4')" />
+                </ComboboxItemIndicator>
+              </ComboboxItem>
+            </ComboboxGroup>
+          </ComboboxList>
+        </Combobox>
+
         <FormDescription>
           This is the language that will be used in the dashboard.
         </FormDescription>
diff --git a/apps/www/src/registry/default/example/ComboboxTrigger.vue b/apps/www/src/registry/default/example/ComboboxTrigger.vue
new file mode 100644
index 000000000..ca17924c4
--- /dev/null
+++ b/apps/www/src/registry/default/example/ComboboxTrigger.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/default/ui/combobox'
+import { Check, ChevronsUpDown, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt', label: 'Nuxt' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const value = ref<typeof frameworks[0]>()
+</script>
+
+<template>
+  <Combobox v-model="value" by="label">
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger as-child>
+        <Button variant="outline" class="justify-between">
+          {{ value?.label ?? 'Select framework' }}
+
+          <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxList>
+      <div class="relative w-full max-w-sm items-center">
+        <ComboboxInput class="pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10" placeholder="Select framework..." />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+          <Search class="size-4 text-muted-foreground" />
+        </span>
+      </div>
+
+      <ComboboxEmpty>
+        No framework found.
+      </ComboboxEmpty>
+
+      <ComboboxGroup>
+        <ComboboxItem
+          v-for="framework in frameworks"
+          :key="framework.value"
+          :value="framework"
+        >
+          {{ framework.label }}
+
+          <ComboboxItemIndicator>
+            <Check :class="cn('ml-auto h-4 w-4')" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxGroup>
+    </ComboboxList>
+  </Combobox>
+</template>
diff --git a/apps/www/src/registry/default/example/CommandDropdownMenu.vue b/apps/www/src/registry/default/example/CommandDropdownMenu.vue
new file mode 100644
index 000000000..1584bc023
--- /dev/null
+++ b/apps/www/src/registry/default/example/CommandDropdownMenu.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/default/ui/command'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const labels = [
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+]
+
+const labelRef = ref('feature')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+    <p class="text-sm font-medium leading-none">
+      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+        {{ labelRef }}
+      </span>
+      <span class="text-muted-foreground">Create a new project</span>
+    </p>
+    <DropdownMenu v-model:open="open">
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-[200px]">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Assign to...
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Set due date...
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              Apply label
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent class="p-0">
+              <Command>
+                <CommandInput
+                  placeholder="Filter label..."
+                  auto-focus
+                />
+                <CommandList>
+                  <CommandEmpty>No label found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem
+                      v-for="label in labels"
+                      :key="label"
+                      :value="label"
+                      @select="(ev) => {
+                        labelRef = ev.detail.value as string
+                        open = false
+                      }"
+                    >
+                      {{ label }}
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="text-red-600">
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/example/CommandForm.vue b/apps/www/src/registry/default/example/CommandForm.vue
new file mode 100644
index 000000000..08f5e07a6
--- /dev/null
+++ b/apps/www/src/registry/default/example/CommandForm.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/default/ui/command'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/registry/default/ui/form'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/default/ui/popover'
+import { toast } from '@/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const formSchema = toTypedSchema(z.object({
+  language: z.string({
+    required_error: 'Please select a language.',
+  }),
+}))
+
+const { handleSubmit, setFieldValue, values } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    language: '',
+  },
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-6" @submit="onSubmit">
+    <FormField name="language">
+      <FormItem class="flex flex-col">
+        <FormLabel>Language</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline"
+                role="combobox"
+                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
+              >
+                {{ values.language ? languages.find(
+                  (language) => language.value === values.language,
+                )?.label : 'Select language...' }}
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search language..." />
+              <CommandEmpty>Nothing found.</CommandEmpty>
+              <CommandList>
+                <CommandGroup>
+                  <CommandItem
+                    v-for="language in languages"
+                    :key="language.value"
+                    :value="language.label"
+                    @select="() => {
+                      setFieldValue('language', language.value)
+                    }"
+                  >
+                    {{ language.label }}
+                    <Check
+                      :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
+                    />
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          This is the language that will be used in the dashboard.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/registry/default/example/CommandPopover.vue b/apps/www/src/registry/default/example/CommandPopover.vue
new file mode 100644
index 000000000..7839fcbc8
--- /dev/null
+++ b/apps/www/src/registry/default/example/CommandPopover.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Button } from '@/registry/default/ui/button'
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/default/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/default/ui/popover'
+import { ref } from 'vue'
+
+interface Status {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+const open = ref(false)
+const selectedStatus = ref<Status>()
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <p class="text-sm text-muted-foreground">
+      Status
+    </p>
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button
+          variant="outline"
+          size="sm"
+          class="w-[150px] justify-start"
+        >
+          <template v-if="selectedStatus">
+            {{ selectedStatus?.label }}
+          </template>
+          <template v-else>
+            + Set status
+          </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="p-0" side="right" align="start">
+        <Command>
+          <CommandInput placeholder="Change status..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="status in statuses"
+                :key="status.value"
+                :value="status.value"
+                @select="() => {
+                  selectedStatus = status
+                  open = false
+                }"
+              >
+                {{ status.label }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/example/CommandResponsive.vue b/apps/www/src/registry/default/example/CommandResponsive.vue
new file mode 100644
index 000000000..8f8115f8f
--- /dev/null
+++ b/apps/www/src/registry/default/example/CommandResponsive.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { Button } from '@/registry/default/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
+
+interface Status {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+const [UseTemplate, StatusList] = createReusableTemplate()
+const isDesktop = useMediaQuery('(min-width: 768px)')
+
+const isOpen = ref(false)
+const selectedStatus = ref<Status | null>(null)
+
+function onStatusSelect(status: Status) {
+  selectedStatus.value = status
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <div>
+    <UseTemplate>
+      <Command>
+        <CommandInput placeholder="Filter status..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="status of statuses"
+              :key="status.value"
+              :value="status.value"
+              @select="onStatusSelect(status)"
+            >
+              {{ status.label }}
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </UseTemplate>
+
+    <Popover v-if="isDesktop" v-model:open="isOpen">
+      <PopoverTrigger as-child>
+        <Button variant="outline" class="w-[150px] justify-start">
+          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[200px] p-0" align="start">
+        <StatusList />
+      </PopoverContent>
+    </Popover>
+
+    <Drawer v-else :open="isOpen" @update:open="(newOpenValue) => isOpen = newOpenValue">
+      <DrawerTrigger as-child>
+        <Button variant="outline" class="w-[150px] justify-start">
+          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div class="mt-4 border-t">
+          <StatusList />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/Combobox.vue b/apps/www/src/registry/default/ui/combobox/Combobox.vue
new file mode 100644
index 000000000..6f8e93ea6
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/Combobox.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot v-bind="forwarded">
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxAnchor.vue b/apps/www/src/registry/default/ui/combobox/ComboboxAnchor.vue
new file mode 100644
index 000000000..acfe4d4b2
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxAnchor.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxEmpty.vue b/apps/www/src/registry/default/ui/combobox/ComboboxEmpty.vue
new file mode 100644
index 000000000..1908f93c8
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxGroup.vue b/apps/www/src/registry/default/ui/combobox/ComboboxGroup.vue
new file mode 100644
index 000000000..683bf592e
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxInput.vue b/apps/www/src/registry/default/ui/combobox/ComboboxInput.vue
new file mode 100644
index 000000000..68fa18685
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxInput
+    v-bind="forwardedProps"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxInput>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxItem.vue b/apps/www/src/registry/default/ui/combobox/ComboboxItem.vue
new file mode 100644
index 000000000..84439e55c
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxList.vue b/apps/www/src/registry/default/ui/combobox/ComboboxList.vue
new file mode 100644
index 000000000..fd29aed7e
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxList.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent
+      v-bind="forwarded"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <ComboboxViewport>
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxSeparator.vue b/apps/www/src/registry/default/ui/combobox/ComboboxSeparator.vue
new file mode 100644
index 000000000..cc5f05507
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/ComboboxTrigger.vue b/apps/www/src/registry/default/ui/combobox/ComboboxTrigger.vue
new file mode 100644
index 000000000..549ca26fc
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/ComboboxTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxTrigger, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxTrigger
+    v-bind="forwarded"
+    :class="cn('', props.class)"
+    tabindex="0"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>
diff --git a/apps/www/src/registry/default/ui/combobox/index.ts b/apps/www/src/registry/default/ui/combobox/index.ts
new file mode 100644
index 000000000..6a6c525de
--- /dev/null
+++ b/apps/www/src/registry/default/ui/combobox/index.ts
@@ -0,0 +1,10 @@
+export { default as Combobox } from './Combobox.vue'
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
+export { default as ComboboxGroup } from './ComboboxGroup.vue'
+export { default as ComboboxInput } from './ComboboxInput.vue'
+export { default as ComboboxItem } from './ComboboxItem.vue'
+export { default as ComboboxList } from './ComboboxList.vue'
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
+
+export { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'
diff --git a/apps/www/src/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
index 09805ba1e..b909a31c2 100644
--- a/apps/www/src/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxDemo.vue
@@ -1,22 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Button } from '@/registry/new-york/ui/button'
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/registry/new-york/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@/registry/new-york/ui/combobox'
+import { Check, Search } from 'lucide-vue-next'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
@@ -25,54 +10,37 @@ const frameworks = [
   { value: 'remix', label: 'Remix' },
   { value: 'astro', label: 'Astro' },
 ]
-
-const open = ref(false)
-const value = ref('')
 </script>
 
 <template>
-  <Popover v-model:open="open">
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        role="combobox"
-        :aria-expanded="open"
-        class="w-[200px] justify-between"
-      >
-        {{ value
-          ? frameworks.find((framework) => framework.value === value)?.label
-          : "Select framework..." }}
-        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-[200px] p-0">
-      <Command>
-        <CommandInput class="h-9" placeholder="Search framework..." />
-        <CommandEmpty>No framework found.</CommandEmpty>
-        <CommandList>
-          <CommandGroup>
-            <CommandItem
-              v-for="framework in frameworks"
-              :key="framework.value"
-              :value="framework.value"
-              @select="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  value = ev.detail.value
-                }
-                open = false
-              }"
-            >
-              {{ framework.label }}
-              <Check
-                :class="cn(
-                  'ml-auto h-4 w-4',
-                  value === framework.value ? 'opacity-100' : 'opacity-0',
-                )"
-              />
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </PopoverContent>
-  </Popover>
+  <Combobox by="label">
+    <ComboboxAnchor>
+      <div class="relative w-full max-w-sm items-center">
+        <ComboboxInput class="pl-9" :display-value="(val) => val?.label ?? ''" placeholder="Select framework..." />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+          <Search class="size-4 text-muted-foreground" />
+        </span>
+      </div>
+    </ComboboxAnchor>
+
+    <ComboboxList>
+      <ComboboxEmpty>
+        No framework found.
+      </ComboboxEmpty>
+
+      <ComboboxGroup>
+        <ComboboxItem
+          v-for="framework in frameworks"
+          :key="framework.value"
+          :value="framework"
+        >
+          {{ framework.label }}
+
+          <ComboboxItemIndicator>
+            <Check :class="cn('ml-auto h-4 w-4')" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxGroup>
+    </ComboboxList>
+  </Combobox>
 </template>
diff --git a/apps/www/src/registry/new-york/example/ComboboxForm.vue b/apps/www/src/registry/new-york/example/ComboboxForm.vue
index 7168d520e..775ea5d7c 100644
--- a/apps/www/src/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/registry/new-york/example/ComboboxForm.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import { Button } from '@/registry/new-york/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/registry/new-york/ui/command'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'
+
 import {
   FormControl,
   FormDescription,
@@ -18,11 +12,6 @@ import {
   FormMessage,
 } from '@/registry/new-york/ui/form'
 
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/registry/new-york/ui/popover'
 import { toast } from '@/registry/new-york/ui/toast'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
@@ -48,7 +37,7 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setFieldValue, values } = useForm({
+const { handleSubmit, setFieldValue } = useForm({
   validationSchema: formSchema,
   initialValues: {
     language: '',
@@ -68,45 +57,43 @@ const onSubmit = handleSubmit((values) => {
     <FormField name="language">
       <FormItem class="flex flex-col">
         <FormLabel>Language</FormLabel>
-        <Popover>
-          <PopoverTrigger as-child>
-            <FormControl>
-              <Button
-                variant="outline"
-                role="combobox"
-                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
+
+        <Combobox by="label">
+          <FormControl>
+            <ComboboxAnchor>
+              <div class="relative w-full max-w-sm items-center">
+                <ComboboxInput :display-value="(val) => val?.label ?? ''" placeholder="Select framework..." />
+                <ComboboxTrigger class="absolute end-0 inset-y-0 flex items-center justify-center px-3">
+                  <ChevronsUpDown class="size-4 text-muted-foreground" />
+                </ComboboxTrigger>
+              </div>
+            </ComboboxAnchor>
+          </FormControl>
+
+          <ComboboxList>
+            <ComboboxEmpty>
+              Nothing found.
+            </ComboboxEmpty>
+
+            <ComboboxGroup>
+              <ComboboxItem
+                v-for="language in languages"
+                :key="language.value"
+                :value="language"
+                @select="() => {
+                  setFieldValue('language', language.value)
+                }"
               >
-                {{ values.language ? languages.find(
-                  (language) => language.value === values.language,
-                )?.label : 'Select language...' }}
-                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </Button>
-            </FormControl>
-          </PopoverTrigger>
-          <PopoverContent class="w-[200px] p-0">
-            <Command>
-              <CommandInput placeholder="Search language..." />
-              <CommandEmpty>Nothing found.</CommandEmpty>
-              <CommandList>
-                <CommandGroup>
-                  <CommandItem
-                    v-for="language in languages"
-                    :key="language.value"
-                    :value="language.label"
-                    @select="() => {
-                      setFieldValue('language', language.value)
-                    }"
-                  >
-                    {{ language.label }}
-                    <Check
-                      :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
-                    />
-                  </CommandItem>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+                {{ language.label }}
+
+                <ComboboxItemIndicator>
+                  <Check :class="cn('ml-auto h-4 w-4')" />
+                </ComboboxItemIndicator>
+              </ComboboxItem>
+            </ComboboxGroup>
+          </ComboboxList>
+        </Combobox>
+
         <FormDescription>
           This is the language that will be used in the dashboard.
         </FormDescription>
diff --git a/apps/www/src/registry/new-york/example/ComboboxTrigger.vue b/apps/www/src/registry/new-york/example/ComboboxTrigger.vue
new file mode 100644
index 000000000..97351f09f
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/ComboboxTrigger.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/registry/new-york/ui/combobox'
+import { Check, ChevronsUpDown, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt', label: 'Nuxt' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const value = ref<typeof frameworks[0]>()
+</script>
+
+<template>
+  <Combobox v-model="value" by="label">
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger as-child>
+        <Button variant="outline" class="justify-between">
+          {{ value?.label ?? 'Select framework' }}
+
+          <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxList>
+      <div class="relative w-full max-w-sm items-center">
+        <ComboboxInput class="pl-9 focus-visible:ring-0 border-0 border-b rounded-none h-10" placeholder="Select framework..." />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+          <Search class="size-4 text-muted-foreground" />
+        </span>
+      </div>
+
+      <ComboboxEmpty>
+        No framework found.
+      </ComboboxEmpty>
+
+      <ComboboxGroup>
+        <ComboboxItem
+          v-for="framework in frameworks"
+          :key="framework.value"
+          :value="framework"
+        >
+          {{ framework.label }}
+
+          <ComboboxItemIndicator>
+            <Check :class="cn('ml-auto h-4 w-4')" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxGroup>
+    </ComboboxList>
+  </Combobox>
+</template>
diff --git a/apps/www/src/registry/new-york/example/CommandDropdownMenu.vue b/apps/www/src/registry/new-york/example/CommandDropdownMenu.vue
new file mode 100644
index 000000000..c1e0db627
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/CommandDropdownMenu.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/new-york/ui/command'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const labels = [
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+]
+
+const labelRef = ref('feature')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+    <p class="text-sm font-medium leading-none">
+      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+        {{ labelRef }}
+      </span>
+      <span class="text-muted-foreground">Create a new project</span>
+    </p>
+    <DropdownMenu v-model:open="open">
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-[200px]">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Assign to...
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Set due date...
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              Apply label
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent class="p-0">
+              <Command>
+                <CommandInput
+                  placeholder="Filter label..."
+                  auto-focus
+                />
+                <CommandList>
+                  <CommandEmpty>No label found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem
+                      v-for="label in labels"
+                      :key="label"
+                      :value="label"
+                      @select="(ev) => {
+                        labelRef = ev.detail.value as string
+                        open = false
+                      }"
+                    >
+                      {{ label }}
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="text-red-600">
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/apps/www/src/registry/new-york/example/CommandForm.vue b/apps/www/src/registry/new-york/example/CommandForm.vue
new file mode 100644
index 000000000..7168d520e
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/CommandForm.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/new-york/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/new-york/ui/command'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/registry/new-york/ui/form'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/new-york/ui/popover'
+import { toast } from '@/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const formSchema = toTypedSchema(z.object({
+  language: z.string({
+    required_error: 'Please select a language.',
+  }),
+}))
+
+const { handleSubmit, setFieldValue, values } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    language: '',
+  },
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="space-y-6" @submit="onSubmit">
+    <FormField name="language">
+      <FormItem class="flex flex-col">
+        <FormLabel>Language</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline"
+                role="combobox"
+                :class="cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')"
+              >
+                {{ values.language ? languages.find(
+                  (language) => language.value === values.language,
+                )?.label : 'Select language...' }}
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search language..." />
+              <CommandEmpty>Nothing found.</CommandEmpty>
+              <CommandList>
+                <CommandGroup>
+                  <CommandItem
+                    v-for="language in languages"
+                    :key="language.value"
+                    :value="language.label"
+                    @select="() => {
+                      setFieldValue('language', language.value)
+                    }"
+                  >
+                    {{ language.label }}
+                    <Check
+                      :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
+                    />
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          This is the language that will be used in the dashboard.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/registry/new-york/example/CommandPopover.vue b/apps/www/src/registry/new-york/example/CommandPopover.vue
new file mode 100644
index 000000000..7bdbee5a2
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/CommandPopover.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Button } from '@/registry/new-york/ui/button'
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/registry/new-york/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/registry/new-york/ui/popover'
+import { ref } from 'vue'
+
+interface Status {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+const open = ref(false)
+const selectedStatus = ref<Status>()
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <p class="text-sm text-muted-foreground">
+      Status
+    </p>
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button
+          variant="outline"
+          size="sm"
+          class="w-[150px] justify-start"
+        >
+          <template v-if="selectedStatus">
+            {{ selectedStatus?.label }}
+          </template>
+          <template v-else>
+            + Set status
+          </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="p-0" side="right" align="start">
+        <Command>
+          <CommandInput placeholder="Change status..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="status in statuses"
+                :key="status.value"
+                :value="status.value"
+                @select="() => {
+                  selectedStatus = status
+                  open = false
+                }"
+              >
+                {{ status.label }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/registry/new-york/example/CommandResponsive.vue b/apps/www/src/registry/new-york/example/CommandResponsive.vue
new file mode 100644
index 000000000..b1e591566
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/CommandResponsive.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { Button } from '@/registry/new-york/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'
+import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
+
+interface Status {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+const [UseTemplate, StatusList] = createReusableTemplate()
+const isDesktop = useMediaQuery('(min-width: 768px)')
+
+const isOpen = ref(false)
+const selectedStatus = ref<Status | null>(null)
+
+function onStatusSelect(status: Status) {
+  selectedStatus.value = status
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <div>
+    <UseTemplate>
+      <Command>
+        <CommandInput placeholder="Filter status..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="status of statuses"
+              :key="status.value"
+              :value="status.value"
+              @select="onStatusSelect(status)"
+            >
+              {{ status.label }}
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </UseTemplate>
+
+    <Popover v-if="isDesktop" v-model:open="isOpen">
+      <PopoverTrigger as-child>
+        <Button variant="outline" class="w-[150px] justify-start">
+          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[200px] p-0" align="start">
+        <StatusList />
+      </PopoverContent>
+    </Popover>
+
+    <Drawer v-else v-model:open="isOpen">
+      <DrawerTrigger as-child>
+        <Button variant="outline" class="w-[150px] justify-start">
+          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div class="mt-4 border-t">
+          <StatusList />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/Combobox.vue b/apps/www/src/registry/new-york/ui/combobox/Combobox.vue
new file mode 100644
index 000000000..6f8e93ea6
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/Combobox.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot v-bind="forwarded">
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxAnchor.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxAnchor.vue
new file mode 100644
index 000000000..acfe4d4b2
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxAnchor.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxEmpty.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxEmpty.vue
new file mode 100644
index 000000000..1908f93c8
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxGroup.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxGroup.vue
new file mode 100644
index 000000000..683bf592e
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxInput.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxInput.vue
new file mode 100644
index 000000000..68fa18685
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxInput
+    v-bind="forwardedProps"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxInput>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxItem.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxItem.vue
new file mode 100644
index 000000000..84439e55c
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxList.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxList.vue
new file mode 100644
index 000000000..fd29aed7e
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxList.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent
+      v-bind="forwarded"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <ComboboxViewport>
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxSeparator.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxSeparator.vue
new file mode 100644
index 000000000..cc5f05507
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/ComboboxTrigger.vue b/apps/www/src/registry/new-york/ui/combobox/ComboboxTrigger.vue
new file mode 100644
index 000000000..549ca26fc
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/ComboboxTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxTrigger, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxTrigger
+    v-bind="forwarded"
+    :class="cn('', props.class)"
+    tabindex="0"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/combobox/index.ts b/apps/www/src/registry/new-york/ui/combobox/index.ts
new file mode 100644
index 000000000..6a6c525de
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/combobox/index.ts
@@ -0,0 +1,10 @@
+export { default as Combobox } from './Combobox.vue'
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
+export { default as ComboboxGroup } from './ComboboxGroup.vue'
+export { default as ComboboxInput } from './ComboboxInput.vue'
+export { default as ComboboxItem } from './ComboboxItem.vue'
+export { default as ComboboxList } from './ComboboxList.vue'
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
+
+export { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'